Select Git revision
SensorLineChartTile.html

Robert Goldmann authored
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>