@neo4j-ndl/react-charts/lib/esm/charts/ChartRender.js

React implementation of charts from Neo4j Design System

import { jsx as _jsx } from "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/>.
 */
import { useNeedleTheme } from '@neo4j-ndl/react';
import { useEffect, useMemo } from 'react';
import { useChartLifecycle, useChartLoading, useChartResize, } from './hooks/use-chart-instance';
import { useChartOption } from './hooks/use-chart-option';
import { useChartRefsContext } from './hooks/use-chart-refs';
import { useChartZoom } from './hooks/use-chart-zoom';
import { hasCategoryXAxis as getHasCategoryXAxis, hasMarkAreaInSeries, hasSliderDataZoom, } from './utils/build-chart-option';
import { normalizeThresholdLines } from './utils/threshold';
import { mergeDataZoom, mergeSeries, mergeXAxis, mergeYAxis, } from './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.
 */
export const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoading, onChartOptionChange, onFirstResizeChange, option: userOption, palette, series: propsSeries, settings = DEFAULT_CHART_SETTINGS, xAxis: propXAxis, yAxis: propYAxis, }) => {
    const { chartEchartRef } = 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 } = useNeedleTheme();
    const hasSliderZoom = hasSliderDataZoom(dataZoomOptions);
    const thresholdLines = useMemo(() => normalizeThresholdLines(propsSeries), [propsSeries]);
    const dataZoom = useMemo(() => mergeDataZoom(dataZoomOptions), [dataZoomOptions]);
    const series = useMemo(() => mergeSeries(propsSeries, theme, userOption, palette), [palette, propsSeries, theme, userOption]);
    const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);
    const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);
    const hasCategoryXAxis = getHasCategoryXAxis(xAxis);
    const hasMarkArea = 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.
     */
    useChartLifecycle({ palette, theme });
    const { isWaitingForFirstResize } = useChartResize();
    const chartOption = useChartOption({
        dataZoom,
        dataset,
        hasCategoryXAxis,
        hasMarkArea,
        hasSliderZoom,
        propsSeries,
        series,
        settings,
        thresholdLines,
        toolboxOptions,
        userOption,
        xAxis,
        yAxis,
    });
    useChartZoom({ callbacks, isChartZoomDisabled });
    useChartLoading({
        isLoading,
        isWaitingForFirstResize,
        theme,
    });
    useEffect(() => {
        onFirstResizeChange(isWaitingForFirstResize);
    }, [isWaitingForFirstResize, onFirstResizeChange]);
    useEffect(() => {
        onChartOptionChange(chartOption);
    }, [chartOption, onChartOptionChange]);
    return _jsx("div", { ref: chartEchartRef, className: "ndl-chart-echart" });
};
//# sourceMappingURL=ChartRender.js.map