Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Convert Tibber Prices Today.json to a Material Design JSON Chart #458

Open
ArnoD15 opened this issue Jul 21, 2024 · 1 comment
Assignees
Labels
enhancement New feature or request reproducible Issue could be reproduced

Comments

@ArnoD15
Copy link

ArnoD15 commented Jul 21, 2024

Hallo Hombach,
um die Preise von Tibber auch in VIS anzeigen zu können, wäre es sinnvoll den JSON File von Tibber (heute und Morgen) in einen neuen JSON File zu konvertieren, um diesen mit dem Widget "materialdesign JSON Chart" anzeigen zu können.
Ich denke, das können viele verwenden und würde deinen Adapter aufwerten.

Das Ganze würde in VIS dann so aussehen:
grafik

Wenn man es noch etwas variable gestalten will, kann man die Preisgrenze, ab wann etwas rot, gelb oder grün angezeigt wird in den Adaptereinstellungen auswählen.

Aktuell erstelle ich das in meinem Skript:

async function createDiagramm(){
    // JSON-Daten parsen
    const [dataToday, dataTomorrow] = await Promise.all([
            getStateAsync(sID_PricesTodayJSON).then(state => JSON.parse(state.val)),
            getStateAsync(sID_PricesTomorrowJSON).then(state => JSON.parse(state.val))
    ]);
    // Listen für axisLabels und data initialisieren
    const axisLabels = [];
    const dataPoints = [];
    const barDataPoints = [];
    // Hole aktuelle Zeit
    const currentDateTime = new Date();
    const currentDate = formatDate(currentDateTime);
    const currentHour = currentDateTime.getHours();
    const diagramJsonChart = {
        "axisLabels": [],
        "graphs": [
            {
            "data": [],
            "type": "line",
            "color": "gray",
            "line_pointSizeHover": 5,
            "line_pointSize": 2,
            "line_Tension": 0.2,
            "yAxis_show": false,
            "yAxis_gridLines_show": false,
            "yAxis_gridLines_ticks_length": 5,
            "yAxis_position": "left",
            "yAxis_appendix": "€",
            "yAxis_min": 0.0,
            "yAxis_max": 0.7,
            "yAxis_zeroLineWidth": 5,
            "yAxis_zeroLineColor": "white",
            "displayOrder": 0,
            "tooltip_AppendText": " €",
            "datalabel_color": "white",
            "datalabel_fontFamily": "RobotoCondensed-Light",
            "datalabel_rotation":70,
            "datalabel_fontSize": 12,
           "datalabel_show": "true",
            "line_PointColor": ["#FFFFFF"],
            "line_PointColorBorder": ["#FFFFFF"],
            "line_PointColorHover": ["##FFFFFF"],
            "line_PointColorBorderHover": ["#FFFFFF"],
            "use_gradient_color": true,
            "gradient_color": [
                {"value": 0.1, "color": "#0FFA1366"},
                {"value": 0.25, "color": "#fff90580"},
                {"value": 0.2, "color": "#fff90580"},
                {"value": 0.3, "color": "#FF004066"}
            ],
            "use_line_gradient_fill_color": true,
            "line_gradient_fill_color": [
                {"value": 0.1, "color": "#0FFA1366"},
                {"value": 0.25, "color": "#fff90580"},
                {"value": 0.2, "color": "#fff90580"},
                {"value": 0.3, "color": "#FF004066"}
            ]
            }, {
			"data": [],
			"type": "bar",
			"color": "#140CF2",
			"yAxis_min": 0,
			"yAxis_max": 1,
			"datalabel_show": false
		    }
        ]
    };
    // Daten extrahieren und formatieren
    const extractData = (data) => {
        data.forEach(entry => {
            const date = new Date(entry.startsAt);
            const timeLabel = `${formatDate(date)} - ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')} Uhr`;
            axisLabels.push(timeLabel);
            dataPoints.push(entry.total);
            const entryDate = formatDate(date);
            const entryHour = date.getHours();
            barDataPoints.push(entryDate === currentDate && entryHour === currentHour ? 0.7 : 0);
        });
    };
    // Daten heute und morgen extrahieren
    extractData(dataToday);
    extractData(dataTomorrow);
    // JSON-Chart erstellen
    diagramJsonChart.axisLabels = axisLabels;
    diagramJsonChart.graphs[0].data = dataPoints;
    diagramJsonChart.graphs[1].data = barDataPoints;
    // JSON-Chart speichern
    const outputJsonStr = JSON.stringify(diagramJsonChart, null, 4);
    await setStateAsync(sID_DiagramJosonChart,outputJsonStr)
}
@hombach hombach self-assigned this Jul 21, 2024
@hombach hombach added enhancement New feature or request reproducible Issue could be reproduced labels Jul 21, 2024
@hombach
Copy link
Owner

hombach commented Jul 21, 2024

Das ist cool!! War mir bisher immer zu viel Arbeit / zu wenig Erfahrung mit dem JSON Chart .... das werde ich mir definitiv ansehen - möchte das auch haben ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request reproducible Issue could be reproduced
Projects
None yet
Development

No branches or pull requests

2 participants