version 0.0.3

treban · Nov 14, 2017 · 5a6e4ed · 5a6e4ed
1 parent 7aeb90c
commit 5a6e4ed
Show file tree

Hide file tree

Showing 9 changed files with 684 additions and 438 deletions.
diff --git a/README.md b/README.md
@@ -42,35 +42,41 @@ Example chart device:
 ```
 {
   "variables": [
+    {
+      "name": "pressure",
+      "expression": "$wetter.pressure",
+      "type": "number",
+      "chart": "areaspline",
+      "yaxis": 2,
+      "dashstyle": "Solid",
+      "color": "#a6c96a"
+    },
     {
       "name": "temperature",
       "expression": "$wetter.temperature",
       "type": "number",
       "step": false,
       "chart": "areaspline",
-      "yaxis": 0
+      "yaxis": 0,
+      "dashstyle": "Solid",
+      "color": "#f28f43"
     },
     {
       "name": "humidity",
       "expression": "$wetter.humidity",
       "type": "number",
       "step": false,
       "chart": "spline",
-      "yaxis": 1
-    },
-    {
-      "name": "pressure",
-      "expression": "$wetter.pressure",
-      "type": "number",
-      "chart": "spline",
-      "yaxis": 2
+      "yaxis": 1,
+      "dashstyle": "Solid"
     },
     {
       "name": "windspeed",
       "expression": "$wetter.windspeed",
       "type": "number",
       "chart": "spline",
-      "yaxis": 3
+      "yaxis": 3,
+      "dashstyle": "Solid"
     }
   ],
   "xAttributeOptions": [],
@@ -83,29 +89,58 @@ Example chart device:
   "xlabel": "x-label",
   "height": 250,
   "subtitle": "Subtitle",
-  "timerange": "1d",
+  "timerange": "7d",
   "legend": true,
   "interval": 5,
   "yaxis": [
-    {
-      "label": "Temperature",
-      "unit": "°C"
-    },
-    {
-      "label": "humidity",
-      "opposite": true,
-      "unit": "%"
-    },
-    {
-      "label": "pressure",
-      "unit": "mbar"
-    },
-    {
-      "label": "windspeed",
-      "unit": "m/s",
-      "opposite": true
-    }
-  ]
+  {
+    "label": "Temperature",
+    "unit": "°C"
+  },
+  {
+    "label": "humidity",
+    "opposite": true,
+    "unit": "%"
+  },
+  {
+    "label": "pressure",
+    "unit": "mbar"
+  },
+  {
+    "label": "windspeed",
+    "unit": "m/s",
+    "opposite": true
+  }
+],
+"allowzoom": true,
+"allowtrace": true,
+"datebuttons": [
+  {
+    "label": "3day",
+    "count": 6,
+    "unit": "day",
+    "datagrouping": true
+  },
+  {
+    "label": "1min",
+    "count": 1,
+    "datagrouping": false,
+    "unit": "minute"
+  },
+  {
+    "label": "3day",
+    "count": 3,
+    "unit": "day",
+    "datagrouping": false
+  },
+  {
+    "label": "ALL",
+    "unit": "all",
+    "count": 0,
+    "datagrouping": false
+  }
+],
+"showdatepicker": true
 },
 
 ```
@@ -121,7 +156,7 @@ Example gauge device:
   "variables": [
     {
       "name": "Tank",
-      "expression": "$kosta-20000",
+      "expression": "$tank",
       "type": "number",
       "min": 0,
       "max": 30000,
@@ -131,7 +166,7 @@ Example gauge device:
     },
     {
       "name": "Power",
-      "expression": "$kosta-39000",
+      "expression": "$power",
       "type": "number",
       "min": 0,
       "max": 5000,
@@ -140,7 +175,6 @@ Example gauge device:
       "label": "Power"
     }
   ],
-  "xAttributeOptions": [],
   "echo": {
     "additionalNames": []
   },
@@ -155,6 +189,9 @@ Example gauge device:
 * 0.0.2 :
   - BUGFIX (#1: UTC)
   - dashStyle included
+* 0.0.3 :
+  - line colors
+  - date picker
 
 #### LICENSE
 

diff --git a/app/chart-page.coffee b/app/chart-page.coffee
@@ -9,6 +9,7 @@ $(document).on 'templateinit', (event) ->
     @myChart = null
     @dateval = 0
     @drawseries = null
+    @interObj = null
 
     colors: [
       '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
@@ -25,14 +26,16 @@ $(document).on 'templateinit', (event) ->
       @height = @device.config.height ? @device.configDefaults.height
       @xlabel = @device.config.xlabel ? @device.configDefaults.xlabel
       @ylabel = @device.config.ylabel ? @device.configDefaults.ylabel
+#      @theme = @device.config.theme ? @device.configDefaults.theme
       @legend = @device.config.legend ? @device.configDefaults.legend
       @interval = @device.config.interval ? @device.configDefaults.interval
       @timerange = @device.config.timerange ? @device.configDefaults.timerange
       @allowzoom = @device.config.allowzoom ? @device.configDefaults.allowzoom
       @devyaxis = @device.config.yaxis ? @device.configDefaults.yaxis
       @allowtrace = @device.config.allowtrace ? @device.configDefaults.allowtrace
       @showdatalabels = @device.config.showdatalabels ? @device.configDefaults.showdatalabels
-
+      @showdatepicker = @device.config.showdatepicker ? @device.configDefaults.showdatepicker
+      @devbuttons = @device.config.datebuttons ? @device.configDefaults.datebuttons
 
       @dateval = new Date()
       @dateval = switch
@@ -57,7 +60,21 @@ $(document).on 'templateinit', (event) ->
           },
           opposite: ya.opposite
           })
-      console.log @yaxis
+
+      @datebuttons = []
+      for but in @devbuttons
+        @datebuttons.push({
+          type: but.unit,
+          count: but.count,
+          text: but.label,
+          dataGrouping: {
+              forced: true,
+              approximation: "average",
+              enabled: but.datagrouping
+              units: [[but.unit, [1]]]
+          }
+        })
+
       @chartoptions =
         {
           chart: {
@@ -74,7 +91,8 @@ $(document).on 'templateinit', (event) ->
               type: 'datetime',
               title: {
                   text: @xlabel
-              }
+              },
+              ordinal: false
           },
           yAxis: @yaxis,
           legend: {
@@ -83,6 +101,18 @@ $(document).on 'templateinit', (event) ->
           credits: {
               enabled: false
           },
+          navigator: {
+              enabled: false
+          },
+          rangeSelector: {
+              enabled: @showdatepicker
+              inputEnabled: false,
+              buttons: @datebuttons,
+
+          },
+          scrollbar: {
+              enabled: false
+          },
           plotOptions: {
               area: {
                   marker: {
@@ -94,6 +124,7 @@ $(document).on 'templateinit', (event) ->
                           lineWidth: 1
                       }
                   },
+                  connectNulls: true,
                   threshold: null,
                   dataLabels: {
                     enabled: @showdatalabels
@@ -127,21 +158,24 @@ $(document).on 'templateinit', (event) ->
           },
           series: []
         }
+    destroy: ->
+      super()
+      clearInterval(@interObj)
 
     afterRender: (elements) =>
-
       @chartobj = $(elements).find('#' + @chartId)
       Highcharts.setOptions({
         global: {
           useUTC: false
         }
       })
-      @myChart = Highcharts.chart(@chartobj[0],@chartoptions)
+      @myChart = Highcharts.stockChart(@chartobj[0],@chartoptions)
+#      Highcharts.setOptions(darkunica)
+#      @myChart = Highcharts.chart(@chartobj[0],@chartoptions)
       @drawSeries()
       window.addEventListener("resize", @resize , true)
-      console.log @interval
       if (@interval > 0 )
-        setInterval () =>
+        @interObj=setInterval () =>
           @refresh()
         , @interval*1000
       super(elements)
@@ -170,13 +204,16 @@ $(document).on 'templateinit', (event) ->
             dashStyle: attr.dashstyle,
             tooltip: {
                 valueDecimals: 2
-            }
+            },
+            color: attr.color,
           }
           if (!refresh)
             @myChart.addSeries(update)
           else
             @myChart.series[series].setData(@data)
-      ).fail(ajaxAlertFail)
+      ).fail( (ajaxAlertFail) =>
+        clearInterval(@interObj)
+        )
 
     convertData: (rawdata) =>
       @resu = new Array()

diff --git a/app/chart-template.jade b/app/chart-template.jade
@@ -3,12 +3,13 @@ script#chart-template(type='text/template')
     div.item-inner
       label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
       div.chart(data-bind="attr: { id: chartId }")
+      span.credit(data-bind="text: 'highchart.com'")
 
 script#gauge-template(type='text/template')
   li.sortable.no-header.chart-device
-
       label.device-label(data-bind="text: name, tooltip: $data.labelTooltipHtml")
       span.attributes(data-bind="template: { name: 'gauge-attr-template', foreach: $data.device.attributes, afterRender: $data.afterAttributeRender }")
+      span.credit(data-bind="text: 'highchart.com'")
 
 script#gauge-attr-template(type='text/template')
   <!-- ko if: !$data.hidden -->

diff --git a/app/chart.css b/app/chart.css
@@ -1,3 +1,12 @@
 ul.items .chart-device .chart {
 
 }
+
+span.credit {
+  float: right;
+  font-size: 6.5pt;
+  vertical-align: bottom;
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+}