@@ -328,59 +328,93 @@ class WeatherCardChart extends Polymer.Element {
var style = getComputedStyle(document.body);
var textColor = style.getPropertyValue('--primary-text-color');
var dividerColor = style.getPropertyValue('--divider-color');
- 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',
+ 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,
+ tooltip: {
+ callbacks: {
+ label: function(context) {
+ var label = context.dataset.label || '';
+ return label += ': ' + context.parsed.y + tempUnit;
+ }
+ }
+ }
},
- ]
- },
- options: {
+ {
+ 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,
+ tooltip: {
+ callbacks: {
+ label: function(context) {
+ var label = context.dataset.label || '';
+ return label += ': ' + context.parsed.y + tempUnit;
+ }
+ }
+ }
+ },
+ {
+ label: this.ll('precip'),
+ type: 'bar',
+ barThickness: 8,
+ maxBarThickness: 15,
+ data: precip,
+ xAxisID: "xAxes",
+ yAxisID: 'yPrecipAxis',
+ borderColor: "#262889",
+ backgroundColor: "#262889",
+ tooltip: {
+ callbacks: {
+ label: function(context) {
+ var label = context.dataset.label || '';
+ return label += ': ' + context.parsed.y + precipUnit;
+ }
+ }
+ }
+ },
+ ]
+ }
+ const chartOptions = {
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);
+ if (data > 0)
+ ctx.fillText(data, bar.x, bar.y - 5);
});
},
},
@@ -388,21 +422,30 @@ class WeatherCardChart extends Polymer.Element {
display: false,
},
scales: {
- xAxes: [{
+ xAxes: {
type: 'time',
- maxBarThickness: 15,
+ adapters: {
+ date: {
+ locale: this.lang,
+ },
+ },
display: false,
ticks: {
display: false,
},
- gridLines: {
+ grid: {
display: false,
},
},
- {
- id: 'DateAxis',
+ xDateAxis: {
+ type: 'time',
position: 'top',
- gridLines: {
+ adapters: {
+ date: {
+ locale: this.lang,
+ },
+ },
+ grid: {
display: true,
drawBorder: false,
color: dividerColor,
@@ -414,21 +457,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.lang ,
+ },
+ },
+ grid: {
display: true,
drawBorder: false,
color: dividerColor,
@@ -439,13 +484,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.lang,
+ },
+ },
+ grid: {
display: false,
drawBorder: false,
color: dividerColor,
@@ -453,41 +504,37 @@ class WeatherCardChart extends Polymer.Element {
ticks: {
display: false,
min: 0,
- suggestedMax: 20,
fontColor: textColor,
},
afterFit: function(scaleInstance) {
scaleInstance.width = 15;
},
- }],
+ },
},
- tooltips: {
- mode: 'index',
- callbacks: {
- title: function (items, data) {
- const item = items[0];
- const date = data.labels[item.index];
- return new Date(date).toLocaleDateString(locale, {
- month: 'long',
- day: 'numeric',
- weekday: 'long',
- hour: 'numeric',
- minute: 'numeric',
- });
- },
- label: function(tooltipItems, data) {
- var label = data.datasets[tooltipItems.datasetIndex].label || '';
- if (data.datasets[2].label == label) {
- return label + ': ' + (tooltipItems.yLabel ?
- (tooltipItems.yLabel + ' ' + precipUnit) : ('0 ' + precipUnit));
+ plugins: {
+ tooltip: {
+ callbacks: {
+ title: function(context) {
+ var date = new Date(context[0].label);
+ if (mode == 'hourly') {
+ return date.toLocaleTimeString(locale, {
+ hour: 'numeric',
+ minute: 'numeric',
+ });
+ }
+ return date.toLocaleDateString(locale, {
+ month: 'long',
+ day: 'numeric',
+ weekday: 'long',
+ });;
}
- return label + ': ' + tooltipItems.yLabel + ' ' + tempUnit;
- },
- },
+ }
+ }
},
- },
- };
- this.ChartData = chartOptions;
+
+ }
+ this.ChartData = chartData;
+ this.ChartOptions = chartOptions;
}
_fire(type, detail, options) {