Merge pull request #3 from W0CHP/master

Adds winDir scatter plot as per issue neoground#57
seehase · Oct 23, 2022 · 5628924 · 5628924
2 parents 7d0f232 + bda3e57
commit 5628924
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 4 deletions.
diff --git a/src/graph_line_archive_config.inc b/src/graph_line_archive_config.inc
@@ -0,0 +1,87 @@
+#encoding UTF-8
+## +-----------------------------------------------------------------------------------+
+## |    graph_line_archive_config.inc             JS config for default line charts    |
+## +-----------------------------------------------------------------------------------+
+
+chart: {
+    type: 'line',
+    zoom: {
+        enabled: false,
+        type: 'x',  
+        autoScaleYaxis: false,
+    },
+},
+
+dataLabels: {
+    enabled: false
+},
+
+stroke: {
+    width: 0,
+},
+
+plotOptions: {
+    line: {
+      borderRadius: 2,
+    }
+},
+
+fill: {
+    opacity: 0.7
+},
+
+markers: {
+    size: 4,
+    strokeWidth: 1,
+    strokeOpacity: 0.5,
+    strokeDashArray: 0,
+    fillOpacity: 0.7,
+    shape: "circle",
+    radius: 1,
+},
+
+xaxis: {
+    type: 'datetime',
+    tickAmount: 8,
+    trim: true,
+    labels: {
+        hideOverlappingLabels: true,
+        tickAmount: 8,
+        rotateAlways: false,
+        hideOverlappingLabels: true,
+        showDuplicates: false,
+        trim: true,
+        formatter: function(val, timestamp) {
+            return moment.unix(timestamp).format("$Extras.Formatting.datetime_graph_archive");
+        }
+    }
+},
+
+yaxis: {
+    max: 359,
+    min: 0,
+    tickAmount: 5,
+    forceNiceScale: true,
+},
+
+grid: {
+    show: true,
+    strokeDashArray: 0,
+    position: 'back',
+    xaxis: {
+        lines: {
+            show: true
+        }
+    },
+    yaxis: {
+        lines: {
+            show: true
+        }
+    },
+},
+
+tooltip: {
+    x: {
+        format: "$Extras.Formatting.datetime_graph_tooltip"
+    }
+},
diff --git a/src/graph_line_config.inc b/src/graph_line_config.inc
@@ -0,0 +1,87 @@
+#encoding UTF-8
+## +---------------------------------------------------------------------------+
+## |    graph_line_config.inc             JS config for default line charts    |
+## +---------------------------------------------------------------------------+
+
+chart: {
+    type: 'line',
+    zoom: {
+        enabled: false,
+        type: 'x',  
+        autoScaleYaxis: false,
+    },
+},
+
+dataLabels: {
+    enabled: false
+},
+
+stroke: {
+    width: 0,
+},
+
+plotOptions: {
+    line: {
+      borderRadius: 2,
+    }
+},
+
+fill: {
+    opacity: 0.7
+},
+
+markers: {
+    size: 4,
+    strokeWidth: 1,
+    strokeOpacity: 0.5,
+    strokeDashArray: 0,
+    fillOpacity: 0.7,
+    shape: "circle",
+    radius: 1,
+},
+
+xaxis: {
+    type: 'datetime',
+    tickAmount: 8,
+    trim: true,
+    labels: {
+        hideOverlappingLabels: true,
+        tickAmount: 8,
+        rotateAlways: false,
+        hideOverlappingLabels: true,
+        showDuplicates: false,
+        trim: true,
+        formatter: function(val, timestamp) {
+            return moment.unix(timestamp).format("$Extras.Formatting.datetime_graph_label");
+        }
+    }
+},
+
+yaxis: {
+    max: 359,
+    min: 0,
+    tickAmount: 5,
+    forceNiceScale: true,
+},
+
+grid: {
+    show: true,
+    strokeDashArray: 0,
+    position: 'back',
+    xaxis: {
+        lines: {
+            show: true
+        }
+    },
+    yaxis: {
+        lines: {
+            show: true
+        }
+    },
+},
+
+tooltip: {
+    x: {
+        format: "$Extras.Formatting.datetime_graph_tooltip"
+    }
+},
diff --git a/src/index.html.tmpl b/src/index.html.tmpl
@@ -279,10 +279,12 @@ new ApexCharts(document.querySelector('#$id'), {
   var graph_bar_config = {
     #include "graph_bar_config.inc"
   }
-
   var graph_radar_config = {
     #include "graph_radar_config.inc"
   }
+  var graph_line_config = {
+    #include "graph_line_config.inc"
+  }
 
   // outTemp + Dewpoint
   $getChartJsCode("outTemp", "outTempchart", "area", "outTemp", "dewpoint")
@@ -302,6 +304,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")

diff --git a/src/month-%Y-%m.html.tmpl b/src/month-%Y-%m.html.tmpl
@@ -310,10 +310,12 @@ new ApexCharts(document.querySelector('#$id'), {
   var graph_bar_config = {
     #include "graph_bar_archive_config.inc"
   }
-
   var graph_radar_config = {
     #include "graph_radar_config.inc"
   }
+  var graph_line_config = {
+    #include "graph_line_archive_config.inc"
+  }
 
   // outTemp + Dewpoint
   $getChartJsCode("outTemp", "outTempchart", "area", "outTemp", "dewpoint")
@@ -333,6 +335,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")

diff --git a/src/month.html.tmpl b/src/month.html.tmpl
@@ -284,6 +284,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")

diff --git a/src/skin.conf b/src/skin.conf
@@ -199,7 +199,7 @@
         values_order = outTemp, outHumidity, barometer, windSpeed, rain, snowDepth, dewpoint, windchill, heatindex, inTemp, inHumidity, UV, ET, radiation, appTemp, cloudbase, extraTemp1, extraHumid1, extraTemp2, extraHumid2, extraTemp3, extraHumid3, extraTemp4, extraHumid4, extraTemp5, extraHumid5, extraTemp6, extraHumid6, extraTemp7, extraHumid7, extraTemp8, extraHumid8
 
         # The order of chart cards (right column)
-        charts_order = outTemp, windchill, barometer, rain, snowDepth, windSpeed, windvec, UV, ET, radiation, outHumidity, inTemp, inHumidity, appTemp, cloudbase, extraTemp1, extraHumid1, extraTemp2, extraHumid2, extraTemp3, extraHumid3, extraTemp4, extraHumid4, extraTemp5, extraHumid5, extraTemp6, extraHumid6, extraTemp7, extraHumid7, extraTemp8, extraHumid8
+        charts_order = outTemp, windchill, barometer, rain, snowDepth, windSpeed, windDir, windvec, UV, ET, radiation, outHumidity, inTemp, inHumidity, appTemp, cloudbase, extraTemp1, extraHumid1, extraTemp2, extraHumid2, extraTemp3, extraHumid3, extraTemp4, extraHumid4, extraTemp5, extraHumid5, extraTemp6, extraHumid6, extraTemp7, extraHumid7, extraTemp8, extraHumid8
 
         # The order of cards on telemetry page
         telemetry_order = rxCheckPercent, txBatteryStatus, windBatteryStatus, rainBatteryStatus, outTempBatteryStatus, inTempBatteryStatus, consBatteryVoltage, heatingVoltage, supplyVoltage, referenceVoltage, extraBatteryStatus1, extraBatteryStatus2, extraBatteryStatus3, extraBatteryStatus4, extraBatteryStatus5, extraBatteryStatus6, extraBatteryStatus7, extraBatteryStatus8

diff --git a/src/week.html.tmpl b/src/week.html.tmpl
@@ -284,6 +284,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")

diff --git a/src/year-%Y.html.tmpl b/src/year-%Y.html.tmpl
@@ -354,10 +354,12 @@ new ApexCharts(document.querySelector('#$id'), {
   var graph_bar_config = {
     #include "graph_bar_archive_config.inc"
   }
-
   var graph_radar_config = {
     #include "graph_radar_config.inc"
   }
+  var graph_line_config = {
+    #include "graph_line_archive_config.inc"
+  }
 
   // outTemp + Dewpoint
   $getChartJsCode("outTemp", "outTempchart", "area", "outTemp", "dewpoint")
@@ -377,6 +379,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")

diff --git a/src/year.html.tmpl b/src/year.html.tmpl
@@ -331,6 +331,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")

diff --git a/src/yesterday.html.tmpl b/src/yesterday.html.tmpl
@@ -307,6 +307,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")