@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
94 lines (93 loc) • 4.87 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chart = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ChartContainer_1 = require("./ChartContainer");
const ChartRender_1 = require("./ChartRender");
const use_chart_refs_1 = require("./hooks/use-chart-refs");
const use_legend_series_1 = require("./hooks/use-legend-series");
const Legend_1 = require("./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 = (0, use_legend_series_1.useLegendSeries)({
chartOption,
isWaitingForFirstResize,
});
if (isWaitingForFirstResize) {
return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "ndl-chart-legend-container ndl-chart-legend-container-placeholder" }));
}
return ((0, jsx_runtime_1.jsx)(Legend_1.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>
* ```
*/
const Chart = (_a) => {
var { style, legend } = _a, chartProps = __rest(_a, ["style", "legend"]);
const [isWaitingForFirstResize, setIsWaitingForFirstResize] = (0, react_1.useState)(true);
const [chartOption, setChartOption] = (0, react_1.useState)();
const [isLegendLayoutReady, setIsLegendLayoutReady] = (0, react_1.useState)(!(legend === null || legend === void 0 ? void 0 : legend.show));
const handleLegendLayoutReady = (0, react_1.useCallback)(() => {
setIsLegendLayoutReady(true);
}, []);
(0, react_1.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 ((0, jsx_runtime_1.jsx)(use_chart_refs_1.ChartRefsProvider, { children: (0, jsx_runtime_1.jsxs)(ChartContainer_1.ChartContainer, { style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: chartLayoutClassName, children: (0, jsx_runtime_1.jsx)(ChartRender_1.ChartRender, Object.assign({}, chartProps, { onChartOptionChange: setChartOption, onFirstResizeChange: setIsWaitingForFirstResize })) }), (legend === null || legend === void 0 ? void 0 : legend.show) && ((0, jsx_runtime_1.jsx)(ChartLegend, { chartOption: chartOption, isLayoutReady: isLegendLayoutReady, isWaitingForFirstResize: isWaitingForFirstResize, onLayoutReady: handleLegendLayoutReady }))] }) }));
};
exports.Chart = Chart;
//# sourceMappingURL=Chart.js.map