From 14a846463d4665ed93cb1f549f5d8e8eb1f8e171 Mon Sep 17 00:00:00 2001
From: Chris Browet <cbro@semperpax.com>
Date: Sun, 11 Jul 2021 11:04:04 +0200
Subject: [PATCH] Bump to ChartJs3 (mandatory for 2021.7)

---
 weather-card-chart.js | 159 ++++++++++++++++++++++++------------------
 1 file changed, 93 insertions(+), 66 deletions(-)

diff --git a/weather-card-chart.js b/weather-card-chart.js
index 31a3bfe..e63a421 100644
--- a/weather-card-chart.js
+++ b/weather-card-chart.js
@@ -178,7 +178,7 @@ class WeatherCardChart extends Polymer.Element {
               </template>
             </div>
           </div>
-          <ha-chart-base hass="[[_hass]]" data="[[ChartData]]"></ha-chart-base>
+          <ha-chart-base data="[[ChartData]]" options="[[ChartOptions]]" chartType="[[ChartType]]"></ha-chart-base>
           <div class="conditions">
             <template is="dom-repeat" items="[[forecast]]">
               <div>
@@ -328,59 +328,69 @@ class WeatherCardChart extends Polymer.Element {
     var style = getComputedStyle(document.body);
     var textColor = style.getPropertyValue('--primary-text-color');
     var dividerColor = style.getPropertyValue('--divider-color');
+    const chartType = 'bar';
+    const chartData = {
+      labels: dateTime,
+      datasets: [
+        {
+          label: this.ll('tempHi'),
+          type: 'line',
+          data: tempHigh,
+          xAxisID: "xAxes",
+          yAxisID: 'yTempAxis',
+          borderWidth: 2.0,
+          lineTension: 0.4,
+          pointRadius: 0.0,
+          pointHitRadius: 5.0,
+          borderColor: "#ff0029",
+          backgroundColor: "#ff0029",
+          fill: false,
+        },
+        {
+          label: this.ll('tempLo'),
+          type: 'line',
+          data: tempLow,
+          xAxisID: "xAxes",
+          yAxisID: 'yTempAxis',
+          borderWidth: 2.0,
+          lineTension: 0.4,
+          pointRadius: 0.0,
+          pointHitRadius: 5.0,
+          borderColor: "#66a61e",
+          backgroundColor: "#66a61e",
+          fill: false,
+        },
+        {
+          label: this.ll('precip'),
+          type: 'bar',
+          barThickness: 8,
+          maxBarThickness: 15,
+          data: precip,
+          xAxisID: "xAxes",
+          yAxisID: 'yPrecipAxis',
+          borderColor: "#262889",
+          backgroundColor: "#262889",
+        },
+      ]
+    }
     const chartOptions = {
-      type: 'bar',
-      data: {
-        labels: dateTime,
-        datasets: [
-          {
-            label: this.ll('tempHi'),
-            type: 'line',
-            data: tempHigh,
-            yAxisID: 'TempAxis',
-            borderWidth: 2.0,
-            lineTension: 0.4,
-            pointRadius: 0.0,
-            pointHitRadius: 5.0,
-            fill: false,
-          },
-          {
-            label: this.ll('tempLo'),
-            type: 'line',
-            data: tempLow,
-            yAxisID: 'TempAxis',
-            borderWidth: 2.0,
-            lineTension: 0.4,
-            pointRadius: 0.0,
-            pointHitRadius: 5.0,
-            fill: false,
-          },
-          {
-            label: this.ll('precip'),
-            type: 'bar',
-            data: precip,
-            yAxisID: 'PrecipAxis',
-          },
-        ]
-      },
-      options: {
         animation: {
           duration: 300,
           easing: 'linear',
-          onComplete: function () {
-            var chartInstance = this.chart,
+          onComplete: function (animation) {
+            var chartInstance = animation.chart,
               ctx = chartInstance.ctx;
             ctx.fillStyle = textColor;
             var fontSize = 10;
             var fontStyle = 'normal';
             var fontFamily = 'Roboto';
-            ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
+            ctx.font = fontStyle + ' ' + fontSize + 'px ' + fontFamily;
             ctx.textAlign = 'center';
             ctx.textBaseline = 'bottom';
-            var meta = chartInstance.controller.getDatasetMeta(2);
+            var meta = chartInstance.getDatasetMeta(2);
             meta.data.forEach(function (bar, index) {
               var data = (Math.round((chartInstance.data.datasets[2].data[index]) * 10) / 10).toFixed(1);
-              ctx.fillText(data, bar._model.x, bar._model.y - 5);
+              ctx.fillText(data, bar.x, bar.y - 5);
             });
           },
         },
@@ -388,21 +398,30 @@ class WeatherCardChart extends Polymer.Element {
           display: false,
         },
         scales: {
-          xAxes: [{
+          xAxes: {
             type: 'time',
-            maxBarThickness: 15,
+            adapters: {
+              date: {
+                locale: this._hass.locale,
+              },
+            },
             display: false,
             ticks: {
               display: false,
             },
-            gridLines: {
+            grid: {
               display: false,
             },
           },
-          {
-            id: 'DateAxis',
+          xDateAxis: {
+            type: 'time',
             position: 'top',
-            gridLines: {
+            adapters: {
+              date: {
+                locale: this._hass.locale,
+              },
+            },
+            grid: {
               display: true,
               drawBorder: false,
               color: dividerColor,
@@ -414,21 +433,23 @@ class WeatherCardChart extends Polymer.Element {
               fontColor: textColor,
               maxRotation: 0,
               callback: function(value, index, values) {
-                var data = new Date(value).toLocaleDateString(locale,
-                  { weekday: 'short' });
-                var time = new Date(value).toLocaleTimeString(locale,
-                  { hour: 'numeric' });
+                var date = new Date(0);
+                date.setUTCMilliseconds(values[index].value);
                 if (mode == 'hourly') {
-                  return time;
+                  return date.toLocaleTimeString(locale, { hour: 'numeric' });
                 }
-                return data;
+                return date.toLocaleDateString(locale, { weekday: 'short' });;
               },
             },
-          }],
-          yAxes: [{
-            id: 'TempAxis',
+          },
+          yTempAxis: {
             position: 'left',
-            gridLines: {
+            adapters: {
+              date: {
+                locale: this._hass.locale,
+              },
+            },
+            grid: {
               display: true,
               drawBorder: false,
               color: dividerColor,
@@ -439,13 +460,19 @@ class WeatherCardChart extends Polymer.Element {
               fontColor: textColor,
             },
             afterFit: function(scaleInstance) {
-              scaleInstance.width = 28;
+              scaleInstance.width = 37;
             },
           },
-          {
-            id: 'PrecipAxis',
+          yPrecipAxis: {
+            display: false,
             position: 'right',
-            gridLines: {
+            suggestedMax: 20,
+            adapters: {
+              date: {
+                locale: this._hass.locale,
+              },
+            },
+            grid: {
               display: false,
               drawBorder: false,
               color: dividerColor,
@@ -453,13 +480,12 @@ class WeatherCardChart extends Polymer.Element {
             ticks: {
               display: false,
               min: 0,
-              suggestedMax: 20,
               fontColor: textColor,
             },
             afterFit: function(scaleInstance) {
               scaleInstance.width = 15;
             },
-          }],
+          },
         },
         tooltips: {
           mode: 'index',
@@ -485,9 +511,10 @@ class WeatherCardChart extends Polymer.Element {
             },
           },
         },
-      },
-    };
-    this.ChartData = chartOptions;
+      }
+    this.ChartData = chartData;
+    this.ChartOptions = chartOptions;
+    this.ChartType = chartType;
   }
 
   _fire(type, detail, options) {