SensorLineChartTile.html

<style>
    .sensorLineChartTile {
        background-color: #2F2F2F;
        font-size: 4vmin;
        font-weight: bold;
        border-radius: 1vh;
    }

    .sensorLineChartTile .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .sensorLineChartTile .chart {
        flex: 1;
    }

    .sensorLineChartTile .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        {% if not showAxes %}
            padding-bottom: 5%;
        {% endif %}
    }

    .sensorLineChartTile .title {
        font-size: 2.2vmin;
    }

    .sensorLineChartTile .header-left {
        display: flex;
        flex-direction: column;
        padding-top: 3%;
        padding-left: 5%;
    }

    .sensorLineChartTile i {
        margin-right: 5%;
        font-size: 3.8vmin;
    }

    .sensorLineChartTile .title,
    .sensorLineChartTile .value {
        text-align: left;
    }
</style>

<div class="sensorLineChartTile">
    <div class="content">
        <div class="header">
            <div class="header-left">
                <div class="title">{{ title }}</div>
                {% if not showAxes %}
                    <div class="value">{{ latest }}{{ unit }}</div>
                {% endif %}
            </div>
            <i class="wi {{ icon }}"></i>
        </div>
        <div class="chart" id="{{ chartId }}"></div>
    </div>

    <script>
        function createChart_{{ chartId | replace('-', '_') }}()
        {
            let data = [
                {
                    x: {{ x }},
                    y: {{ y }},
                    text: {{ textLabels }},
                    fill: 'tozeroy',
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        shape: 'spline',
                        color: '{{ lineColor }}',
                        width: 3
                    },
                    hoverinfo: 'text',
                    fillcolor: '{{ fillColor }}'
                },
                {
                    x: {{ ghostTraceX }},
                    y: {{ ghostTraceY }},
                    fill: 'tozeroy',
                    type: 'scatter',
                    mode: 'none',
                    fillcolor: '{{ fillColor }}'
                }
            ];

            let layout = {
                xaxis: {
                    showgrid: false,
                    zeroline: {{ showAxes | lower }},
                    visible: {{ showAxes | lower }},
                    showspikes: {{ showAxes | lower }},
                    spikedash: 'solid',
                    spikecolor: 'white',
                    spikethickness: 2,
                    tickcolor: 'white',
                    zerolinecolor: 'white',
                    linecolor: 'white',
                    tickfont: {
                        color: 'white'
                    }
                },
                yaxis: {
                    showgrid: false,
                    zeroline: {{ showAxes | lower }},
                    visible: {{ showAxes | lower }},
                    range: [{{ min }}, {{ max }}],
                    tickcolor: 'white',
                    zerolinecolor: 'white',
                    linecolor: 'white',
                    tickfont: {
                        color: 'white'
                    }
                },
                paper_bgcolor: 'rgba(0,0,0,0)',
                plot_bgcolor: 'rgba(0,0,0,0)',
                showlegend: false,
                margin: {
                    b: {% if showAxes %}50{% else %}0{% endif %},
                    l: {% if showAxes %}50{% else %}0{% endif %},
                    r: {% if showAxes %}50{% else %}0{% endif %},
                    t: 0
                },
                dragmode: !isMobileDevice()
            };

            let config = {
                displayModeBar: {{ showAxes | lower }},
                displaylogo: false,
                responsive: true,
                locale: 'de'
            };

            Plotly.newPlot(document.getElementById('{{ chartId }}'), data, layout, config);
        }

        createChart_{{ chartId | replace('-', '_') }}();
    </script>
</div>