Skip to content
This repository has been archived by the owner on Jul 22, 2024. It is now read-only.

Commit

Permalink
Merge pull request #60 from koying/chartjs3
Browse files Browse the repository at this point in the history 
Bump to ChartJs3 (mandatory for 2021.7). Fixes #59
  • Loading branch information
@Yevgenium
Yevgenium authored Jul 13, 2021
2 parents bebd8ad + cf7f586 commit dc2b21a
Showing 1 changed file with 136 additions and 89 deletions.
225 changes: 136 additions & 89 deletions weather-card-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ class WeatherCardChart extends Polymer.Element {
margin: 10px 0px 10px 0px;
}
.attributes div {
text-align: center;
text-align: left;
}
.conditions {
display: flex;
Expand Down Expand Up @@ -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]]"></ha-chart-base>
<div class="conditions">
<template is="dom-repeat" items="[[forecast]]">
<div>
Expand Down Expand Up @@ -328,81 +328,124 @@ 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);
});
},
},
legend: {
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,
Expand All @@ -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,
Expand All @@ -439,55 +484,57 @@ 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,
},
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) {
Expand Down

0 comments on commit dc2b21a

Please sign in to comment.