@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
99 lines • 4.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartRender = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
*
* 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/>.
*/
const react_1 = require("@neo4j-ndl/react");
const react_2 = require("react");
const use_chart_instance_1 = require("./hooks/use-chart-instance");
const use_chart_option_1 = require("./hooks/use-chart-option");
const use_chart_refs_1 = require("./hooks/use-chart-refs");
const use_chart_zoom_1 = require("./hooks/use-chart-zoom");
const build_chart_option_1 = require("./utils/build-chart-option");
const threshold_1 = require("./utils/threshold");
const user_option_utils_1 = require("./utils/user-option-utils");
const DEFAULT_CHART_SETTINGS = {
lazyUpdate: false,
notMerge: true,
silent: false,
};
/**
* Owns the ECharts instance element and coordinates chart-specific hooks.
*
* The component normalizes user props into Needle-themed ECharts options,
* initializes/resizes the chart instance, applies loading and zoom behavior, and
* reports derived chart state back to `Chart` for legend rendering.
*/
const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoading, onChartOptionChange, onFirstResizeChange, option: userOption, palette, series: propsSeries, settings = DEFAULT_CHART_SETTINGS, xAxis: propXAxis, yAxis: propYAxis, }) => {
const { chartEchartRef } = (0, use_chart_refs_1.useChartRefsContext)();
const dataZoomOptions = userOption === null || userOption === void 0 ? void 0 : userOption.dataZoom;
const toolboxOptions = userOption === null || userOption === void 0 ? void 0 : userOption.toolbox;
const { theme } = (0, react_1.useNeedleTheme)();
const hasSliderZoom = (0, build_chart_option_1.hasSliderDataZoom)(dataZoomOptions);
const thresholdLines = (0, react_2.useMemo)(() => (0, threshold_1.normalizeThresholdLines)(propsSeries), [propsSeries]);
const dataZoom = (0, react_2.useMemo)(() => (0, user_option_utils_1.mergeDataZoom)(dataZoomOptions), [dataZoomOptions]);
const series = (0, react_2.useMemo)(() => (0, user_option_utils_1.mergeSeries)(propsSeries, theme, userOption, palette), [palette, propsSeries, theme, userOption]);
const xAxis = (0, react_2.useMemo)(() => (0, user_option_utils_1.mergeXAxis)(propXAxis, theme), [propXAxis, theme]);
const yAxis = (0, react_2.useMemo)(() => (0, user_option_utils_1.mergeYAxis)(propYAxis, theme), [propYAxis, theme]);
const hasCategoryXAxis = (0, build_chart_option_1.hasCategoryXAxis)(xAxis);
const hasMarkArea = (0, build_chart_option_1.hasMarkAreaInSeries)(series);
/**
* Hook responsibilities:
* - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.
* - `useChartResize` keeps the canvas sized to its container before first render.
* - `useChartOption` builds and applies the merged ECharts option.
* - `useChartZoom` attaches consumer zoom callbacks.
* - `useChartLoading` synchronizes the loading overlay with chart readiness.
*/
(0, use_chart_instance_1.useChartLifecycle)({ palette, theme });
const { isWaitingForFirstResize } = (0, use_chart_instance_1.useChartResize)();
const chartOption = (0, use_chart_option_1.useChartOption)({
dataZoom,
dataset,
hasCategoryXAxis,
hasMarkArea,
hasSliderZoom,
propsSeries,
series,
settings,
thresholdLines,
toolboxOptions,
userOption,
xAxis,
yAxis,
});
(0, use_chart_zoom_1.useChartZoom)({ callbacks, isChartZoomDisabled });
(0, use_chart_instance_1.useChartLoading)({
isLoading,
isWaitingForFirstResize,
theme,
});
(0, react_2.useEffect)(() => {
onFirstResizeChange(isWaitingForFirstResize);
}, [isWaitingForFirstResize, onFirstResizeChange]);
(0, react_2.useEffect)(() => {
onChartOptionChange(chartOption);
}, [chartOption, onChartOptionChange]);
return (0, jsx_runtime_1.jsx)("div", { ref: chartEchartRef, className: "ndl-chart-echart" });
};
exports.ChartRender = ChartRender;
//# sourceMappingURL=ChartRender.js.map