@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
90 lines (89 loc) • 4.5 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/>.
*/
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from 'react';
import { ChartContainer } from './ChartContainer';
import { ChartRender } from './ChartRender';
import { ChartRefsProvider } from './hooks/use-chart-refs';
import { useLegendSeries } from './hooks/use-legend-series';
import { Legend } from './Legend';
/**
* Bridges the rendered ECharts option into the React legend.
*
* `useLegendSeries` reads the current chart option and ECharts color state to
* derive the legend rows. Rendering is deferred until the chart has completed
* its first resize so the legend does not measure against an uninitialized
* chart instance.
*/
const ChartLegend = ({ chartOption, isLayoutReady, isWaitingForFirstResize, onLayoutReady, }) => {
const legendSeries = useLegendSeries({
chartOption,
isWaitingForFirstResize,
});
if (isWaitingForFirstResize) {
return (_jsx("div", { "aria-hidden": "true", className: "ndl-chart-legend-container ndl-chart-legend-container-placeholder" }));
}
return (_jsx(Legend, { series: legendSeries !== null && legendSeries !== void 0 ? legendSeries : [], onLayoutReady: onLayoutReady, isLayoutReady: isLayoutReady }));
};
/**
* A chart component powered by Apache ECharts with Needle's customization and theming.
*
* The `Chart` component fills 100% of its parent's width and height. Because it
* relies on the container's `clientHeight` to size the canvas, **the parent element
* must have an explicit height** (e.g. a fixed px/rem value or a viewport unit).
*
* @example
* ```tsx
* <div style={{ height: '350px' }}>
* <Chart dataset={dataset} series={series} xAxis={xAxis} yAxis={yAxis} />
* </div>
* ```
*/
export const Chart = (_a) => {
var { style, legend } = _a, chartProps = __rest(_a, ["style", "legend"]);
const [isWaitingForFirstResize, setIsWaitingForFirstResize] = useState(true);
const [chartOption, setChartOption] = useState();
const [isLegendLayoutReady, setIsLegendLayoutReady] = useState(!(legend === null || legend === void 0 ? void 0 : legend.show));
const handleLegendLayoutReady = useCallback(() => {
setIsLegendLayoutReady(true);
}, []);
useEffect(() => {
if (!(legend === null || legend === void 0 ? void 0 : legend.show)) {
setIsLegendLayoutReady(true);
}
}, [legend === null || legend === void 0 ? void 0 : legend.show]);
const chartLayoutClassName = (legend === null || legend === void 0 ? void 0 : legend.show) && !isLegendLayoutReady
? 'ndl-chart-layout ndl-chart-layout-hidden'
: 'ndl-chart-layout';
return (_jsx(ChartRefsProvider, { children: _jsxs(ChartContainer, { style: style, children: [_jsx("div", { className: chartLayoutClassName, children: _jsx(ChartRender, Object.assign({}, chartProps, { onChartOptionChange: setChartOption, onFirstResizeChange: setIsWaitingForFirstResize })) }), (legend === null || legend === void 0 ? void 0 : legend.show) && (_jsx(ChartLegend, { chartOption: chartOption, isLayoutReady: isLegendLayoutReady, isWaitingForFirstResize: isWaitingForFirstResize, onLayoutReady: handleLegendLayoutReady }))] }) }));
};
//# sourceMappingURL=Chart.js.map