Skip to content
Snippets Groups Projects
Select Git revision
  • a1ecf801c5b466dfb600dfc3930715ba3885e310
  • master default
  • v1.34.0
  • v1.33.0
  • v1.32.1
  • v1.32.0
  • v1.31.2
  • v1.31.1
  • v1.31.0
  • v1.30.0
  • v1.29.0
  • v1.28.0
  • v1.27.0
  • v1.26.0
  • v1.25.0
  • v1.24.0
  • v1.23.1
  • v1.23.0
  • v1.22.0
  • v1.20.0
  • v1.19.1
  • v1.19.0
22 results

SensorLineChartTile.html

Blame
  • SensorLineChartTile.html 2.93 KiB
    <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;
            padding-bottom: 5%;
        }
    
        .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>
                    <div class="value">{{ latest }}{{ unit }}</div>
                </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 }}'
                }];
    
                let layout = {
                    xaxis: {
                        showgrid: false,
                        zeroline: false,
                        visible: false,
                    },
                    yaxis: {
                        showgrid: false,
                        zeroline: false,
                        visible: false,
                        range: [{{ min }}, {{ max }}]
                    },
                    paper_bgcolor: 'rgba(0,0,0,0)',
                    plot_bgcolor: 'rgba(0,0,0,0)',
                    showlegend: false,
                    margin: {
                        b: 0,
                        l: 0,
                        r: 0,
                        t: 0
                    },
                    dragmode: !isMobileDevice()
                };
    
                let config = {
                    displayModeBar: false,
                    displaylogo: false,
                    responsive: true,
                    locale: 'de'
                };
    
                Plotly.newPlot(document.getElementById('{{ chartId }}'), data, layout, config);
            }
    
            createChart_{{ chartId | replace('-', '_') }}();
        </script>
    </div>