@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
114 lines • 5.28 kB
JavaScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { getInstanceByDom } from 'echarts';
import { useEffect } from 'react';
import { useChartRefsContext } from './use-chart-refs';
/**
* Owns ECharts zoom interactions and forwards zoom changes to consumers.
*
* The hook subscribes to ECharts `datazoom` events, enables drag-to-zoom through
* ECharts' global cursor API, resets zoom on double click, and clears ECharts'
* SVG cursor override after mouse movement so Needle's default cursor styling is
* preserved.
*/
export function useChartZoom({ callbacks, isChartZoomDisabled, }) {
const { chartEchartRef } = useChartRefsContext();
useEffect(() => {
var _a;
const chart = chartEchartRef.current === null
? undefined
: getInstanceByDom(chartEchartRef.current);
if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) {
chart === null || chart === void 0 ? void 0 : chart.on('datazoom', () => {
var _a;
if (chartEchartRef.current === null) {
return;
}
const currentChart = getInstanceByDom(chartEchartRef.current);
if (!currentChart) {
return;
}
const option = currentChart.getOption();
if (!option || !option.dataZoom) {
return;
}
const dataZoom = Array.isArray(option.dataZoom)
? option.dataZoom[0]
: option.dataZoom;
const { startValue, endValue } = dataZoom;
(_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) === null || _a === void 0 ? void 0 : _a.call(callbacks, { endValue, startValue });
});
}
const handleMouseMove = () => {
// ECharts updates SVG cursor styles on mouse move, so Needle has to
// reset it after ECharts' internal handler runs.
chart === null || chart === void 0 ? void 0 : chart.getZr().setCursorStyle('default');
};
const chartChild = (_a = chartEchartRef.current) === null || _a === void 0 ? void 0 : _a.children[0];
if (!isChartZoomDisabled) {
chartChild === null || chartChild === void 0 ? void 0 : chartChild.addEventListener('mousemove', handleMouseMove);
}
const handleMouseDown = (params) => {
var _a;
const event = params.event;
const amountOfMouseClicks = event.detail;
const isDoubleClick = amountOfMouseClicks === 2;
if (isDoubleClick) {
if (chart === undefined) {
return;
}
chart === null || chart === void 0 ? void 0 : chart.dispatchAction({
end: 100,
start: 0,
type: 'dataZoom',
});
if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) {
(_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) === null || _a === void 0 ? void 0 : _a.call(callbacks, { endValue: 100, startValue: 0 });
}
}
};
if (!isChartZoomDisabled) {
chart === null || chart === void 0 ? void 0 : chart.getZr().on('mousedown', handleMouseDown);
}
const chartRefCurrentElement = chartEchartRef.current;
const element = chartRefCurrentElement === null || chartRefCurrentElement === void 0 ? void 0 : chartRefCurrentElement.children[0];
return () => {
element === null || element === void 0 ? void 0 : element.removeEventListener('mousemove', handleMouseMove);
if (chartRefCurrentElement) {
const chart = getInstanceByDom(chartRefCurrentElement);
chart === null || chart === void 0 ? void 0 : chart.getZr().off('mousedown', handleMouseDown);
}
};
});
if (chartEchartRef.current !== null && !isChartZoomDisabled) {
const chart = getInstanceByDom(chartEchartRef.current);
if (chart) {
// Needs to be re-set on every re-render. Sets the selectable zoom area
// over the chart body, not the slider.
chart.dispatchAction({
dataZoomSelectActive: true,
key: 'dataZoomSelect',
type: 'takeGlobalCursor',
});
}
}
}
//# sourceMappingURL=use-chart-zoom.js.map