#36 - SensorLineChartTile now supports showing axes and longterm data

src/logic/tile/tiles/SensorLineChartTile.html

@@ -22,7 +22,9 @@
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
+        {% if not showAxes %}
             padding-bottom: 5%;
+        {% endif %}
     }
 
     .sensorLineChartTile .title {
@@ -52,7 +54,9 @@
         <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>
@@ -91,29 +95,45 @@
             let layout = {
                 xaxis: {
                     showgrid: false,
-                    zeroline: false,
-                    visible: 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: false,
-                    visible: false,
-                    range: [{{ min }}, {{ max }}]
+                    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: 0,
-                    l: 0,
-                    r: 0,
+                    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: false,
+                displayModeBar: {{ showAxes | lower }},
                 displaylogo: false,
                 responsive: true,
                 locale: 'de'

src/logic/tile/tiles/SensorLineChartTile.py

@@ -29,7 +29,8 @@ class SensorLineChartTile(Tile):
         "numberOfHoursToShow": 4,
         "decimals": 1,
         "lineColor": "rgba(254, 151, 0, 1)",
-        "fillColor": "rgba(254, 151, 0, 0.2)"
+        "fillColor": "rgba(254, 151, 0, 0.2)",
+        "showAxes": True
     }
 
     UNIT_BY_SENSOR_TYPE = {
@@ -137,6 +138,11 @@ class SensorLineChartTile(Tile):
         textLabels = [f'{self.__format_date(xItem)} - {yItem}{unescapedUnit}' for xItem, yItem in zip(data['x'],
                                                                                                       data['y'])]
 
+        title = self._settings['title']
+        if self._settings['showAxes']:
+            days = int(self._settings['numberOfHoursToShow'] / 24)
+            title = f'{title} - {days} days'
+
         return Tile.render_template(os.path.dirname(__file__), __class__.__name__,
                                     x=data['x'],
                                     y=data['y'],
@@ -146,12 +152,13 @@ class SensorLineChartTile(Tile):
                                     latest=data['latest'],
                                     unit=unit,
                                     icon=icon,
-                                    title=self._settings['title'],
+                                    title=title,
                                     lineColor=self._settings['lineColor'],
                                     fillColor=self._settings['fillColor'],
                                     chartId=str(uuid.uuid4()),
                                     ghostTraceX=data['ghostTraceX'],
-                                    ghostTraceY=data['ghostTraceY'])
+                                    ghostTraceY=data['ghostTraceY'],
+                                    showAxes=self._settings['showAxes'])
 
     def __format_date(self, dateTime: str):
         parsedDateTime = datetime.strptime(dateTime, self.DATE_FORMAT)