jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-08 09:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some tweak for timeline chart (#1201)

Browse Source 
* Some tweak for timeline chart

* remove comments
This commit is contained in:
Boyi C 2018-05-21 19:50:29 +08:00 committed by Paulus Schoutsen
parent 0edf06bfb9
commit 4d50ab937a
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -63,7 +63,7 @@
"@webcomponents/shadycss": "^1.0.0", "@webcomponents/shadycss": "^1.0.0",
"@webcomponents/webcomponentsjs": "^2.0.0", "@webcomponents/webcomponentsjs": "^2.0.0",
"chart.js": "~2.7.2", "chart.js": "~2.7.2",
"chartjs-chart-timeline": "0.2.0", "chartjs-chart-timeline": "^0.2.1",
"es6-object-assign": "^1.1.0", "es6-object-assign": "^1.1.0",
"fecha": "^2.3.3", "fecha": "^2.3.3",
"home-assistant-js-websocket": "2.0.1", "home-assistant-js-websocket": "2.0.1",

43
src/components/entity/ha-chart-base.js
View File

@ -338,7 +338,9 @@ class HaChartBase extends mixinBehaviors([
this._customTooltips({ opacity: 0 }); this._customTooltips({ opacity: 0 });
this._chart.data = data; this._chart.data = data;
this._chart.update({ duration: 0 }); this._chart.update({ duration: 0 });
if (this.isTimeline !== true && this.data.legend === true) { if (this.isTimeline) {
this._chart.options.scales.yAxes[0].gridLines.display = data.length > 1;
} else if (this.data.legend === true) {
this._drawLegend(); this._drawLegend();
} }
this.resizeChart(); this.resizeChart();
@ -388,7 +390,7 @@ class HaChartBase extends mixinBehaviors([
); );
} }
if (this._colorFunc !== undefined) { if (this._colorFunc !== undefined) {
options.colorFunction = this._colorFunc; options.elements.colorFunction = this._colorFunc;
} }
if (data.datasets.length === 1) { if (data.datasets.length === 1) {
if (options.scales.yAxes[0].ticks) { if (options.scales.yAxes[0].ticks) {
@ -396,10 +398,16 @@ class HaChartBase extends mixinBehaviors([
} else { } else {
options.scales.yAxes[0].ticks = { display: false }; options.scales.yAxes[0].ticks = { display: false };
} }
if (options.scales.yAxes[0].gridLines) {
options.scales.yAxes[0].gridLines.display = false;
} else {
options.scales.yAxes[0].gridLines = { display: false };
}
} }
this.$.chartTarget.style.height = '50px';
} else {
this.$.chartTarget.style.height = '160px';
} }
this.$.chartTarget.style.height = '160px';
this.$.chartTarget.height = '160px';
const chartData = { const chartData = {
type: this.data.type, type: this.data.type,
data: this.data.data, data: this.data.data,
@ -418,11 +426,9 @@ class HaChartBase extends mixinBehaviors([
resizeChart() { resizeChart() {
if (!this._chart) return; if (!this._chart) return;
// Chart not ready // Chart not ready
if (this.$.chartTarget.clientWidth === 0) { if (this._resizeTimer === undefined) {
if (this._resizeTimer === undefined) { this._resizeTimer = setInterval(this.resizeChart.bind(this), 10);
this._resizeTimer = setInterval(this.resizeChart.bind(this), 10); return;
return;
}
} }
clearInterval(this._resizeTimer); clearInterval(this._resizeTimer);
@ -447,25 +453,24 @@ class HaChartBase extends mixinBehaviors([
} }
// Recalculate chart height for Timeline chart // Recalculate chart height for Timeline chart
var axis = this._chart.boxes.filter(x => x.position === 'bottom')[0]; const areaTop = this._chart.chartArea.top;
if (axis && axis.height > 0) { const areaBot = this._chart.chartArea.bottom;
this._axisHeight = axis.height; const height1 = this._chart.canvas.clientHeight;
if (areaBot > 0) {
this._axisHeight = (height1 - areaBot) + areaTop;
} }
if (!this._axisHeight) { if (!this._axisHeight) {
chartTarget.style.height = '100px'; chartTarget.style.height = '50px';
chartTarget.height = '100px';
this._chart.resize(); this._chart.resize();
axis = this._chart.boxes.filter(x => x.position === 'bottom')[0]; this.resizeChart();
if (axis && axis.height > 0) { return;
this._axisHeight = axis.height;
}
} }
if (this._axisHeight) { if (this._axisHeight) {
const cnt = data.datasets.length; const cnt = data.datasets.length;
const targetHeight = ((30 * cnt) + this._axisHeight) + 'px'; const targetHeight = ((30 * cnt) + this._axisHeight) + 'px';
if (chartTarget.style.height !== targetHeight) { if (chartTarget.style.height !== targetHeight) {
chartTarget.style.height = targetHeight; chartTarget.style.height = targetHeight;
chartTarget.height = targetHeight;
} }
this._chart.resize(); this._chart.resize();
} }