Bye highchart in widget!

jeedom · Jan 31, 2021 · 87b8cf2 · 87b8cf2
1 parent d6c80a1
commit 87b8cf2
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 104 deletions.
diff --git a/core/template/dashboard/cmd.info.numeric.default.html b/core/template/dashboard/cmd.info.numeric.default.html
@@ -4,10 +4,9 @@
   </div>
   <div class="content-sm">
     <div class="gauge cursor #history#" data-cmd_id="#id#"></div>
+    <div class="gaugeValue" data-cmd_id="#id#"></div>
   </div>
-  <div class="value" data-cmd_id="#id#">
-    <div class="state"><strong>#state#</strong> <strong>#unite#</strong></div>
-  </div>
+  <div class="state"><strong>#state#</strong> <strong>#unite#</strong></div>
   <div class="cmdStats #hide_history#">
     <span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
   </div>
@@ -16,98 +15,30 @@
   </template>
   <script>
     jeedom.cmd.update['#id#'] = function(_options) {
-      $('.cmd[data-cmd_id=#id#]')
-        .attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
-        .find('.state strong').first().text(_options.display_value)
-      if ($('.cmd[data-cmd_uid=#uid#] .gauge').highcharts() !== undefined) {
-        $('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value)
+      var cmd = $('.cmd[data-cmd_id=#id#]')
+      var minValue = ('#minValue#' == '') ? 0 : parseInt('#minValue#')
+      var maxValue = ('#maxValue#' == '') ? 100 : parseInt('#maxValue#')
+      if (_options.display_value >= maxValue) {
+        _options.display_value = maxValue
+        var angle = 0
+      } else if (_options.display_value <= minValue) {
+        _options.display_value = minValue
+        var angle = -180
+      } else {
+        var angle = (((_options.display_value - minValue) * 180) / (maxValue - minValue)) - 180
       }
+      cmd.find('.gaugeValue').css('transform', 'scale(0.94) rotate('+angle+'deg)')
+      cmd.find('.state strong').first().text(_options.display_value)
     }
 
     if (is_numeric('#state#')) {
-      $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
-        chart: {
-          style: {
-            fontFamily: 'Roboto'
-          },
-          type: 'solidgauge',
-          plotBackgroundColor: null,
-          plotBackgroundImage: null,
-          backgroundColor: null,
-          plotBorderWidth: 0,
-          plotShadow: false,
-          height: 40,
-          spacingTop: 0,
-          spacingLeft: 0,
-          spacingRight: 0,
-          spacingBottom: 0,
-          borderWidth : 0
-        },
-        title: null,
-        pane: {
-          center: ['50%', '100%'],
-          size: 80,
-          startAngle: - 90,
-          endAngle: 90,
-          background: {
-            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
-            innerRadius: '90%',
-            outerRadius: '100%',
-            shape: 'arc',
-            borderWidth: 0
-          }
-        },
-        tooltip: {
-          enabled: false
-        },
-        // the value axis
-        yAxis: {
-          stops: [
-          [0, '#cmdColor#']
-          ],
-          lineWidth: 0,
-          minorTickInterval: null,
-          tickPixelInterval: 400,
-          labels : {enabled: false},
-          tickWidth: 0,
-          min: ('#minValue#' == '') ? 0 : parseInt('#minValue#'),
-          max: ('#maxValue#' == '') ? 100 : parseInt('#maxValue#'),
-          title: {
-            text: ''
-          }
-        },
-        labels : {enabled: false},
-        plotOptions: {
-          solidgauge: {
-            dataLabels: {
-              y: 9,
-              borderWidth: 0,
-              useHTML: true
-            }
-          }
-        },
-        credits: {
-          enabled: false
-        },
-        exporting : {
-          enabled: false
-        },
-        series: [{
-          name: '',
-          data: [Math.round(parseFloat('#state#') * 10) / 10],
-          radius: 92,
-          innerRadius: 72,
-          dataLabels: {
-            enabled: false
-          },
-        }]
-      })
+      jeedom.cmd.update['#id#']({display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#'})
     } else {
       $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger">#state#</span></center>')
     }
 
     if ($.issetWidgetOptParam('#color#', 'color')) {
-      $('.cmd[data-cmd_id=#id#] .highcharts-color-0').css('fill', '#color#')
+      $('.cmd[data-cmd_id=#id#] .gaugeValue').css('border-color', '#color#')
     }
   </script>
-</div>
+</div>
diff --git a/desktop/css/coreWidgets.css b/desktop/css/coreWidgets.css
@@ -469,28 +469,33 @@ Desktop
     height: 220px;
   }
 
-  .gauge {
-    position: relative;
-    width: 100px;
-    height: 42px;
-    margin: 0 auto;
+  div.arcgauge .gauge,
+  div.arcgauge .gaugeValue {
+    position: absolute;
+    top: 14px;
+    left: 0;
+    width: 90px;
+    height: 45px;
+    border-top-left-radius: 90px;
+    border-top-right-radius: 90px;
+    border: 5px solid var(--el-defaultColor);
+    border-bottom: 0 !important;
   }
-  .gauge .highcharts-pane {
-    fill: var(--el-defaultColor);
+  div.arcgauge .content-sm {
+    width: 90px;
+    height: 45px;
+    clip-path: polygon(0 -5px, 100% -5px, 100% 100%, 0 100%);
+  }
+  div.arcgauge .gaugeValue {
+    border: 8px solid var(--link-color);
+    transform-origin: 45px 45px;
+    transform: scale(0.94) rotate(-180deg);
   }
-
-  .arcgauge .highcharts-color-0 { fill: var(--link-color); }
-  .arcgauge .highcharts-data-label > span > span { font-size: 12px !important; color: var(--link-color) !important;}
   .arcgauge .cmdStats {
     position: relative;
-    top: -2px;
-  }
-  .arcgauge .highcharts-background {
-    fill-opacity: 0 !important;
-  }
-  .gauge .highcharts-yaxis-grid {
-    display: none;
+    top: 5px;
   }
+
   .hgauge-value,
   .vgauge-value,
   .shuttergauge-value {