@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
71 lines (70 loc) • 3.05 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/>.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("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] = (0, react_1.useState)();
const updateChartContainerHeight = (0, react_1.useCallback)(() => {
var _a;
setChartContainerHeight((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
}, [chartRef]);
(0, react_1.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.
*/
const ChartContainer = ({ children, style }) => {
const chartRef = (0, react_1.useRef)(null);
const chartContainerHeight = useChartContainerHeight(chartRef);
const chartContainerStyle = (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { ref: chartRef, className: "ndl-chart", style: chartContainerStyle, children: children }));
};
exports.ChartContainer = ChartContainer;
//# sourceMappingURL=ChartContainer.js.map