Add config ability for graph blocks

[aalwash]

I couldn't find anything about it in the code and in the WIKI.

So now you can do:

blocks['graph_idx'] = {
    title: 'Custom graph title',
    width: 6
};

Note Some graphs append additional values (like xx.xx kWh) If people want an ability to configure this, please let me know. I can implement support for this

If this PR is approved, WIKI need to be updated

I also added node_modules/* in .gitignore, because git is complaining about directory not being commited If you don't want this, please let me know, I will remove it

[paalkr]

Yes, please add the ability to filter with values you would like to add to the graph block. Like when you currently have both barometer, hygrometer and thermometer values displayed in the same graph , the scale will just not make any sense.

[aalwash]

Added the config option 'graphTypes'

For example, a temp + humidity + baro sensor returns 3 values With the keys: ba (barometer), hu (humidity) and te (temperature)

So if you want only temperature, use the example below:

blocks['graph_idx'] = {
    title: 'Outside (temperature only)',
    width: 6,
    graphTypes: ['te']
};

The possible options for graphTypes is big and needs to be documented Below you see the function with all the possible values (keys array)

function getGraphProperties(result, label) {
    var graphProperties = {};
    if (result.hasOwnProperty('uvi')) {
        graphProperties = {
            keys: ['uvi'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('lux')) {
        graphProperties = {
            keys: ['lux'],
            labels: ['Lux'],
        };
    } else if (result.hasOwnProperty('lux_avg')) {
        graphProperties = {
            keys: ['lux_avg', 'lux_min', 'lux_max'],
            labels: ['Lux average', 'Minimum', 'Maximum'],
        };
    } else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) {
        graphProperties = {
            keys: ['gu', 'sp'],
            labels: ['m/s', 'm/s'],
        };
    } else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['ba', 'hu', 'te'],
            labels: ['hPa', '%', _TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['hu', 'te'],
            labels: ['%', _TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('te')) {
        graphProperties = {
            keys: ['te'],
            labels: [_TEMP_SYMBOL],
        };
    } else if (result.hasOwnProperty('hu')) {
        graphProperties = {
            keys: ['hu'],
            labels: ['%'],
        };
    } else if (result.hasOwnProperty('mm')) {
        graphProperties = {
            keys: ['mm'],
            labels: ['mm'],
        };
    } else if (result.hasOwnProperty('v_max')) {
        graphProperties = {
            keys: ['v_max'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('v2')) {
        graphProperties = {
            keys: ['v2', 'v'],
            labels: [label, label],
        };
        if (label === 'kWh' && realrange === 'day') {
            graphProperties.labels = ['Watt', 'Watt'];
        }
    } else if (result.hasOwnProperty('v')) {
        if (label === 'kWh' && realrange === 'day') {
            label = 'Wh';
        }
        if (data.method === 1) {
            graphProperties = {
                keys: ['eu'],
                labels: [label],
            };
        } else {
            graphProperties = {
                keys: ['v'],
                labels: [label],
            };
        }
    } else if (result.hasOwnProperty('eu')) {
        graphProperties = {
            keys: ['eu'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('u')) {
        graphProperties = {
            keys: ['u'],
            labels: [label],
        };
    } else if (result.hasOwnProperty('u_max')) {
        graphProperties = {
            keys: ['u_max', 'u_min'],
            labels: ['?', '?'],
        };
    }
    return graphProperties;
}

[paalkr]

Thx. I will try this out

So, basically instead of

blocks[473] = {} //gulvtemperatur
blocks[473]['title'] = 'Gulvtemperatur'
blocks[473]['switch'] = true;
blocks[473]['width'] = 12;
columns['Hall_c_2']['blocks'] = ['ch_Inneklima','graph_473'];

I would do something like

blocks['graph_473'] = {
    title: 'Gulvtemperatur',
    width: 12,
    graphTypes: ['te']
};
columns['Hall_c_2']['blocks'] = ['ch_Inneklima','graph_473'];

[paalkr]

Can this same functionality be added to the graph popup? Ref: https://github.com/Dashticz/dashticz_v2/issues/424

[aalwash]

I will look into it tonight how graph popups work And yes, your configuration is right.

Btw, if you want to stay in the syntax you already had, then this also works:

blocks[473] = {} //gulvtemperatur
blocks[473]['title'] = 'Gulvtemperatur'
blocks[473]['switch'] = true;
blocks[473]['width'] = 12;
blocks[473]['graphTypes'] = ['te'];

[paalkr]

Excellent. I like the

blocks['graph_473'] = {
    title: 'Gulvtemperatur',
    width: 12,
    graphTypes: ['te']
};

notation better, less repetitive.

[paalkr]

Did you find a solution to graph popups?

[aalwash]

Sorry, didn't have time to look into it

Tonight I will do my best to make some time to look into the code