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

Commit

Permalink
Bump to ChartJs3 (mandatory for 2021.7)
Browse files Browse the repository at this point in the history
  • Loading branch information
@koying
koying committed Jul 12, 2021
1 parent 8803cef commit 14a8464
Showing 1 changed file with 93 additions and 66 deletions.
159 changes: 93 additions & 66 deletions weather-card-chart.js
View file
Original file line number Diff line number Diff line change
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]]" chartType="[[ChartType]]"></ha-chart-base>
<div class="conditions">
<template is="dom-repeat" items="[[forecast]]">
<div>
Expand Down Expand Up @@ -328,81 +328,100 @@ 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);
});
},
},
legend: {
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,
Expand All @@ -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,
Expand All @@ -439,27 +460,32 @@ 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,
},
ticks: {
display: false,
min: 0,
suggestedMax: 20,
fontColor: textColor,
},
afterFit: function(scaleInstance) {
scaleInstance.width = 15;
},
}],
},
},
tooltips: {
mode: 'index',
Expand All @@ -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) {
Expand Down

0 comments on commit 14a8464

Please sign in to comment.