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) {