Bring back zoom in charts using chartjs-plugin-zoom (#890)

* add chartjs-plugin-zoom + hammerjs

* adds a "unzoom" button for chartjs-plugin-zoom

* limits chartjs zoom and pan area by scanning all axis
This commit is contained in:
Tabakhase 2018-02-18 17:12:30 +01:00 committed by Paulus Schoutsen
parent 7acab579b4
commit 72a0b3520d
3 changed files with 87 additions and 3 deletions

View File

@ -58,7 +58,9 @@
"webcomponentsjs": "^1.0.10",
"chart.js": "~2.7.1",
"moment": "^2.20.0",
"chartjs-chart-timeline": "fanthos/chartjs-chart-timeline#^0.1.3"
"chartjs-chart-timeline": "fanthos/chartjs-chart-timeline#^0.1.3",
"chartjs-plugin-zoom": "^0.6.3",
"hammerjs": "^2.0.8"
},
"devDependencies": {
"web-component-tester": "^6.3.0"

View File

@ -64,6 +64,9 @@
margin-right: 6px;
width: 10px;
}
.chartZoomInline {
float: right;
}
</style>
<template is="dom-if" if="[[unit]]">
<div class="chartHeader">
@ -78,6 +81,14 @@
</template>
</ul>
</div>
<template is="dom-if" if="[[isZoomable]]">
<div class="chartZoomInline">
<paper-icon-button
icon='mdi:arrow-expand-all'
on-tap='resetZoom'
></paper-icon-button>
</div>
</template>
</div>
</template>
<div id="chartTarget" style="height:40px; width:100%">
@ -98,7 +109,7 @@
</dom-module>
<script>
// eslint-disable-next-line no-unused-vars
/* global Chart moment Color */
/* global Chart moment Color Hammer */
{
let SCRIPT_LOADED = false;
@ -270,6 +281,7 @@
this._drawLegend();
}
this.resizeChart();
this.updateZoomlimits();
} else {
if (!data.datasets) {
return;
@ -303,6 +315,29 @@
}
};
options = Chart.helpers.merge(options, this.data.options);
if (this.data.type === 'timeline') {
// timeline is not zoomable, so dont capture mouse
this.set('isZoomable', false);
options = Chart.helpers.merge(options, {
pan: { enabled: false },
zoom: { enabled: false },
});
} else {
// allow free zooming&moving around
this.set('isZoomable', true);
options = Chart.helpers.merge(options, {
pan: {
enabled: true,
drag: true,
mode: 'xy',
},
zoom: {
enabled: true,
drag: false,
mode: 'xy',
}
});
}
if (this.data.type === 'timeline') {
this.set('isTimeline', true);
if (this.data.colors !== undefined) {
@ -335,8 +370,45 @@
this._drawLegend();
}
this.resizeChart();
this.updateZoomlimits();
}
}
updateZoomlimits() {
if (!this._chart) return;
if (this.isTimeline) return;
const buffer = {
x: { min: null, max: null },
y: { min: null, max: null }
};
Object.keys(this._chart.scales).forEach((name) => {
var scale = this._chart.scales[name];
var axis = name.substr(0, 1);
if (!(axis in buffer)) return;
if (buffer[axis].max === null || buffer[axis].max < scale.max) {
// ===null to accept negative-max
buffer[axis].max = scale.max;
}
if (buffer[axis].min === null || buffer[axis].min > scale.min) {
// ===null to allow to go "up" on the first value
buffer[axis].min = scale.min;
}
});
this._chart.options = Chart.helpers.merge(this._chart.options, {
pan: {
rangeMin: { x: buffer.x.min, y: buffer.y.min },
rangeMax: { x: buffer.x.max, y: buffer.y.max }
},
zoom: {
// x is nulled so users are able to "zoom in on time"
rangeMin: { x: null /* buffer.x.min */, y: buffer.y.min },
rangeMax: { x: null /* buffer.x.max */, y: buffer.y.max }
}
});
}
resizeChart() {
if (!this._chart) return;
// Chart not ready
@ -393,6 +465,14 @@
}
}
// for chartjs-plugin-zoom
resetZoom(event = null) {
if (event) {
event.stopPropagation();
}
this._chart.resetZoom();
}
// Get HSL distributed color list
static getColorList(count) {
let processL = false;

View File

@ -1,10 +1,12 @@
<script src="../../bower_components/moment/moment.js"></script>
<script src="../../bower_components/chart.js/dist/Chart.min.js"></script>
<script src="../../bower_components/chartjs-chart-timeline/timeline.js"></script>
<script src="../../bower_components/hammerjs/hammer.min.js"></script>
<script src="../../bower_components/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js"></script>
<script>
// Use minified(Chart.min.js) version to fix strange color after uglify
// eslint-disable-next-line no-unused-vars
/* global Chart moment */
/* global Chart moment Color Hammer */
{
// This function add a new interaction mode to Chart.js that
// returns one point for every dataset.