Skip to content

Commit

Permalink
Add a function for getting zoom range (#780)
Browse files Browse the repository at this point in the history
* Add a function for getting current zoom range

* Change API to be more in line with existing

Update types for getInitialScaleBounds - its implementation shows that it may return undefined.

* Update docs

---------

Co-authored-by: Jukka Kurkela <[email protected]>
  • Loading branch information
joshkel and kurkle authored Nov 16, 2024
1 parent 4c794cb commit dd0c8b3
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 4 deletions.
16 changes: 15 additions & 1 deletion docs/guide/developers.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Returns the current zoom level. If this is the same as the chart's initial scal

If the chart has been panned but not zoomed, this method will still return `1.0`.

### `chart.getInitialScaleBounds(): Record<string, {min: number, max: number}>`
### `chart.getInitialScaleBounds(): Record<string, {min: number | undefined, max: number | undefined}>`

Returns the initial scale bounds of each scale before any zooming or panning took place. This is returned in the format of an object, e.g.

Expand All @@ -38,6 +38,20 @@ Returns the initial scale bounds of each scale before any zooming or panning too
}
```

### `chart.getZoomedScaleBounds(): Record<string, {min: number, max: number}>`

Returns the updated scale bounds of each scale after any zooming or panning took place. This is returned in the format of an object, e.g.

```json
{
x: {min: 25, max: 75},
y1: {min: 60, max: 90},
y2: undefined
}
```

Scale IDs that have not been zoomed will be `undefined` within the returned object.

### `chart.isZoomedOrPanned(): boolean`

Returns whether the chart has been zoomed or panned - i.e. whether the initial scale of any axis is different to the one used currently.
Expand Down
11 changes: 11 additions & 0 deletions src/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export function resetZoom(chart, transition = 'default') {
delete scaleOptions.min;
delete scaleOptions.max;
}
delete state.updatedScaleLimits[scale.id];
});
chart.update(transition);
call(state.options.zoom.onZoomComplete, [{chart}]);
Expand Down Expand Up @@ -209,6 +210,16 @@ export function getInitialScaleBounds(chart) {
return scaleBounds;
}

export function getZoomedScaleBounds(chart) {
const state = getState(chart);
const scaleBounds = {};
for (const scaleId of Object.keys(chart.scales)) {
scaleBounds[scaleId] = state.updatedScaleLimits[scaleId];
}

return scaleBounds;
}

export function isZoomedOrPanned(chart) {
const scaleBounds = getInitialScaleBounds(chart);
for (const scaleId of Object.keys(chart.scales)) {
Expand Down
3 changes: 2 additions & 1 deletion src/plugin.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Hammer from 'hammerjs';
import {addListeners, computeDragRect, removeListeners} from './handlers';
import {startHammer, stopHammer} from './hammer';
import {pan, zoom, resetZoom, zoomScale, getZoomLevel, getInitialScaleBounds, isZoomedOrPanned, isZoomingOrPanning, zoomRect} from './core';
import {pan, zoom, resetZoom, zoomScale, getZoomLevel, getInitialScaleBounds, getZoomedScaleBounds, isZoomedOrPanned, isZoomingOrPanning, zoomRect} from './core';
import {panFunctions, zoomFunctions, zoomRectFunctions} from './scale.types';
import {getState, removeState} from './state';
import {version} from '../package.json';
Expand Down Expand Up @@ -82,6 +82,7 @@ export default {
chart.resetZoom = (transition) => resetZoom(chart, transition);
chart.getZoomLevel = () => getZoomLevel(chart);
chart.getInitialScaleBounds = () => getInitialScaleBounds(chart);
chart.getZoomedScaleBounds = () => getZoomedScaleBounds(chart);
chart.isZoomedOrPanned = () => isZoomedOrPanned(chart);
chart.isZoomingOrPanning = () => isZoomingOrPanning(chart);
},
Expand Down
27 changes: 27 additions & 0 deletions test/specs/api.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -342,4 +342,31 @@ describe('api', function() {
expect(chart.isZoomedOrPanned()).toBe(false);
});
});

describe('getZoomedScaleBounds', function() {
it('should return the zoom range, or undefined if not zoomed', function() {
const chart = window.acquireChart({
type: 'scatter',
options: {
scales: {
x: {
min: 0,
max: 100
},
y: {
min: 0,
max: 100
}
}
}
});
expect(chart.getZoomedScaleBounds().x).toBeUndefined();

chart.zoom(1.5);
expect(chart.getZoomedScaleBounds().x).toEqual({min: 25, max: 75});

chart.resetZoom();
expect(chart.getZoomedScaleBounds().x).toBeUndefined();
});
});
});
6 changes: 4 additions & 2 deletions types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ declare module 'chart.js' {
zoomScale(id: string, range: ScaleRange, mode?: UpdateMode): void;
resetZoom(mode?: UpdateMode): void;
getZoomLevel(): number;
getInitialScaleBounds(): Record<string, {min: number, max: number}>;
getInitialScaleBounds(): Record<string, {min: number | undefined, max: number | undefined}>;
getZoomedScaleBounds(): Record<string, ScaleRange | undefined>;
isZoomedOrPanned(): boolean;
isZoomingOrPanning(): boolean;
}
Expand Down Expand Up @@ -55,6 +56,7 @@ export function zoomRect(chart: Chart, p0: Point, p1: Point, mode?: UpdateMode):
export function zoomScale(chart: Chart, scaleId: string, range: ScaleRange, mode?: UpdateMode): void;
export function resetZoom(chart: Chart, mode?: UpdateMode): void;
export function getZoomLevel(chart: Chart): number;
export function getInitialScaleBounds(chart: Chart): Record<string, {min: number, max: number}>;
export function getInitialScaleBounds(chart: Chart): Record<string, {min: number | undefined, max: number | undefined}>;
export function getZoomedScaleBounds(chart: Chart): Record<string, ScaleRange | undefined>;
export function isZoomedOrPanned(chart: Chart): boolean;
export function isZoomingOrPanning(chart: Chart): boolean;

0 comments on commit dd0c8b3

Please sign in to comment.