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

React implementation of charts from Neo4j Design System

/**
 *
 *  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 { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
const EXPANDED_LEGEND_MAX_HEIGHT_RATIO = 0.3;
/**
 * Tracks the outer chart container height.
 *
 * The measured height is used to expose CSS sizing data to descendants, most
 * notably the expanded legend max height. A ResizeObserver keeps the value in
 * sync with parent layout changes.
 */
const useChartContainerHeight = (chartRef) => {
    const [chartContainerHeight, setChartContainerHeight] = useState();
    const updateChartContainerHeight = useCallback(() => {
        var _a;
        setChartContainerHeight((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
    }, [chartRef]);
    useEffect(() => {
        updateChartContainerHeight();
        const chartContainer = chartRef.current;
        if (!chartContainer) {
            return;
        }
        const resizeObserver = new ResizeObserver(updateChartContainerHeight);
        resizeObserver.observe(chartContainer);
        return () => {
            resizeObserver.disconnect();
        };
    }, [chartRef, updateChartContainerHeight]);
    return chartContainerHeight;
};
/**
 * Provides the chart grid shell and CSS variables shared by the ECharts canvas
 * and legend rows.
 *
 * The container owns the measurement ref for the full chart area so the legend
 * can cap expanded height relative to the available chart height.
 */
export const ChartContainer = ({ children, style }) => {
    const chartRef = useRef(null);
    const chartContainerHeight = useChartContainerHeight(chartRef);
    const chartContainerStyle = useMemo(() => (Object.assign(Object.assign({}, style), { '--ndl-chart-legend-expanded-max-height': chartContainerHeight === undefined
            ? undefined
            : `${Math.floor(chartContainerHeight * EXPANDED_LEGEND_MAX_HEIGHT_RATIO)}px` })), [chartContainerHeight, style]);
    return (_jsx("div", { ref: chartRef, className: "ndl-chart", style: chartContainerStyle, children: children }));
};
//# sourceMappingURL=ChartContainer.js.map