Skip to content

Fix zoom on category scale #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 8, 2021
Merged

Fix zoom on category scale #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const commonjs = require('rollup-plugin-commonjs');
const istanbul = require('rollup-plugin-istanbul');
const resolve = require('rollup-plugin-node-resolve');
const builds = require('./rollup.config');
Expand Down
17 changes: 9 additions & 8 deletions samples/zoom-bar-x.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,24 +59,25 @@
}
},
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
},
scales: {
x: {
min: 'February-16',
max: 'June-16'
}
},
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
},
zoom: {
pan: {
enabled: true,
mode: 'xy' // is panning about the y axis neccessary for bar charts?
speed: 2,
mode: 'x'
},
zoom: {
enabled: true,
Expand Down
128 changes: 49 additions & 79 deletions src/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function directionEnabled(mode, dir, chart) {
function rangeMaxLimiter(zoomPanOptions, newMax) {
if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMax &&
!isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {
var rangeMax = zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes];
const rangeMax = zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes];
if (newMax > rangeMax) {
newMax = rangeMax;
}
Expand All @@ -85,67 +85,49 @@ function rangeMaxLimiter(zoomPanOptions, newMax) {
function rangeMinLimiter(zoomPanOptions, newMin) {
if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMin &&
!isNullOrUndef(zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes])) {
var rangeMin = zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes];
const rangeMin = zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes];
if (newMin < rangeMin) {
newMin = rangeMin;
}
}
return newMin;
}

function zoomCategoryScale(scale, zoom, center, zoomOptions) {
var labels = scale.chart.data.labels;
var minIndex = scale.min;
var lastLabelIndex = labels.length - 1;
var maxIndex = scale.max;
var sensitivity = zoomOptions.sensitivity;
var chartCenter = scale.isHorizontal() ? scale.left + (scale.width / 2) : scale.top + (scale.height / 2);
var centerPointer = scale.isHorizontal() ? center.x : center.y;

zoomNS.zoomCumulativeDelta = zoom > 1 ? zoomNS.zoomCumulativeDelta + 1 : zoomNS.zoomCumulativeDelta - 1;

if (Math.abs(zoomNS.zoomCumulativeDelta) > sensitivity) {
if (zoomNS.zoomCumulativeDelta < 0) {
if (centerPointer >= chartCenter) {
if (minIndex <= 0) {
maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
} else {
minIndex = Math.max(0, minIndex - 1);
}
} else if (centerPointer < chartCenter) {
if (maxIndex >= lastLabelIndex) {
minIndex = Math.max(0, minIndex - 1);
} else {
maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
}
}
zoomNS.zoomCumulativeDelta = 0;
} else if (zoomNS.zoomCumulativeDelta > 0) {
if (centerPointer >= chartCenter) {
minIndex = minIndex < maxIndex ? minIndex = Math.min(maxIndex, minIndex + 1) : minIndex;
} else if (centerPointer < chartCenter) {
maxIndex = maxIndex > minIndex ? maxIndex = Math.max(minIndex, maxIndex - 1) : maxIndex;
}
zoomNS.zoomCumulativeDelta = 0;
}
scale.options.min = rangeMinLimiter(zoomOptions, labels[minIndex]);
scale.options.max = rangeMaxLimiter(zoomOptions, labels[maxIndex]);
}
function zoomDelta(scale, zoom, center) {
const range = scale.max - scale.min;
const newDiff = range * (zoom - 1);

const centerPoint = scale.isHorizontal() ? center.x : center.y;
const minPercent = (scale.getValueForPixel(centerPoint) - scale.min) / range;
const maxPercent = 1 - minPercent;

return {
min: newDiff * minPercent,
max: newDiff * maxPercent
};
}

function zoomNumericalScale(scale, zoom, center, zoomOptions) {
var range = scale.max - scale.min;
var newDiff = range * (zoom - 1);

var centerPoint = scale.isHorizontal() ? center.x : center.y;
var minPercent = (scale.getValueForPixel(centerPoint) - scale.min) / range;
var maxPercent = 1 - minPercent;
const delta = zoomDelta(scale, zoom, center);
scale.options.min = rangeMinLimiter(zoomOptions, scale.min + delta.min);
scale.options.max = rangeMaxLimiter(zoomOptions, scale.max - delta.max);
}

var minDelta = newDiff * minPercent;
var maxDelta = newDiff * maxPercent;
const integerChange = (v) => v === 0 || isNaN(v) ? 0 : v < 0 ? Math.min(Math.round(v), -1) : Math.max(Math.round(v), 1);

scale.options.min = rangeMinLimiter(zoomOptions, scale.min + minDelta);
scale.options.max = rangeMaxLimiter(zoomOptions, scale.max - maxDelta);
function zoomCategoryScale(scale, zoom, center, zoomOptions) {
const labels = scale.getLabels();
const maxIndex = labels.length - 1;
if (scale.min === scale.max && zoom < 1) {
if (scale.min > 0) {
scale.min--;
} else if (scale.max < maxIndex) {
scale.max++;
}
}
const delta = zoomDelta(scale, zoom, center);
scale.options.min = labels[Math.max(0, rangeMinLimiter(zoomOptions, scale.min + integerChange(delta.min)))];
scale.options.max = labels[Math.min(maxIndex, rangeMaxLimiter(zoomOptions, scale.max - integerChange(delta.max)))];
}

function zoomScale(scale, zoom, center, zoomOptions) {
Expand Down Expand Up @@ -220,13 +202,13 @@ function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes, animat
}

function panCategoryScale(scale, delta, panOptions) {
var labels = scale.chart.data.labels;
var lastLabelIndex = labels.length - 1;
var offsetAmt = Math.max(scale.ticks.length, 1);
var panSpeed = panOptions.speed;
var minIndex = scale.min;
var step = Math.round(scale.width / (offsetAmt * panSpeed));
var maxIndex;
const labels = scale.getLabels();
const lastLabelIndex = labels.length - 1;
const offsetAmt = Math.max(scale.ticks.length, 1);
const panSpeed = panOptions.speed;
const step = Math.round(scale.width / (offsetAmt * panSpeed));
let minIndex = scale.min;
let maxIndex;

zoomNS.panCumulativeDelta += delta;

Expand All @@ -240,23 +222,14 @@ function panCategoryScale(scale, delta, panOptions) {
}

function panNumericalScale(scale, delta, panOptions) {
var scaleOpts = scale.options;
var prevStart = scale.min;
var prevEnd = scale.max;
var newMin = scale.getValueForPixel(scale.getPixelForValue(prevStart) - delta);
var newMax = scale.getValueForPixel(scale.getPixelForValue(prevEnd) - delta);
var rangeMin = newMin;
var rangeMax = newMax;
var diff;

if (panOptions.scaleAxes && panOptions.rangeMin &&
!isNullOrUndef(panOptions.rangeMin[panOptions.scaleAxes])) {
rangeMin = panOptions.rangeMin[panOptions.scaleAxes];
}
if (panOptions.scaleAxes && panOptions.rangeMax &&
!isNullOrUndef(panOptions.rangeMax[panOptions.scaleAxes])) {
rangeMax = panOptions.rangeMax[panOptions.scaleAxes];
}
const scaleOpts = scale.options;
const prevStart = scale.min;
const prevEnd = scale.max;
const newMin = scale.getValueForPixel(scale.getPixelForValue(prevStart) - delta);
const newMax = scale.getValueForPixel(scale.getPixelForValue(prevEnd) - delta);
const rangeMin = rangeMinLimiter(panOptions, newMin);
const rangeMax = rangeMaxLimiter(panOptions, newMax);
let diff;

if (newMin >= rangeMin && newMax <= rangeMax) {
scaleOpts.min = newMin;
Expand All @@ -273,7 +246,7 @@ function panNumericalScale(scale, delta, panOptions) {
}

function panScale(scale, delta, panOptions) {
var fn = panFunctions[scale.type];
const fn = panFunctions[scale.type];
if (fn) {
fn(scale, delta, panOptions);
}
Expand Down Expand Up @@ -336,9 +309,8 @@ zoomNS.panFunctions.category = panCategoryScale;
zoomNS.panFunctions.time = panNumericalScale;
zoomNS.panFunctions.linear = panNumericalScale;
zoomNS.panFunctions.logarithmic = panNumericalScale;
// Globals for category pan and zoom
// Globals for category pan
zoomNS.panCumulativeDelta = 0;
zoomNS.zoomCumulativeDelta = 0;

// Chartjs Zoom Plugin
var zoomPlugin = {
Expand Down Expand Up @@ -521,7 +493,6 @@ var zoomPlugin = {
mc.on('pinchend', function(e) {
handlePinch(e);
currentPinchScaling = null; // reset
zoomNS.zoomCumulativeDelta = 0;
var zoomOptions = chartInstance.$zoom._options.zoom;
if (typeof zoomOptions.onZoomComplete === 'function') {
zoomOptions.onZoomComplete({chart: chartInstance});
Expand Down Expand Up @@ -551,7 +522,6 @@ var zoomPlugin = {
mc.on('panend', function() {
currentDeltaX = null;
currentDeltaY = null;
zoomNS.panCumulativeDelta = 0;
setTimeout(function() {
panning = false;
}, 500);
Expand Down