@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
102 lines • 4.43 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect } from 'react';
import { useCallback, useReducer, useRef } from 'react';
import cloneDeep from 'lodash/cloneDeep';
import defaultsDeep from 'lodash/defaultsDeep';
import * as echarts from 'echarts/core';
import { getLineSeries } from '../Line';
import { getSankeySeries } from '../Sankey';
import { getMutationObserver } from '../utils/observe';
import { getClassName } from '../utils/styles';
import { getTheme } from '../utils/theme';
import { getLegendTooltip, getSankeyTooltip } from '../utils/tooltip';
import { ThemeColor } from '../themes/ThemeColor';
export const Charts = (_a) => {
var { className, height, id, isLegendTooltip = true, isSvgRenderer = true, nodeSelector, option, opts, theme, themeColor, width } = _a, rest = __rest(_a, ["className", "height", "id", "isLegendTooltip", "isSvgRenderer", "nodeSelector", "option", "opts", "theme", "themeColor", "width"]);
const containerRef = useRef();
const echart = useRef();
const [update, forceUpdate] = useReducer((x) => x + 1, 0);
const getSize = () => (Object.assign(Object.assign({}, (height && { height: `${height}px` })), (width && { width: `${width}px` })));
const getTooltip = useCallback((series, tooltipType, isSkeleton, echart) => {
// Skeleton should not have any interactions
if (isSkeleton) {
return undefined;
}
else if (tooltipType === 'sankey') {
return getSankeyTooltip(series, option);
}
else if (tooltipType === 'legend') {
return getLegendTooltip(series, option, echart);
}
return option.tooltip;
}, [option]);
const getSeries = useCallback((chartTheme, isSkeleton) => {
let tooltipType;
const series = cloneDeep(option === null || option === void 0 ? void 0 : option.series);
const newSeries = [];
series.map((serie) => {
switch (serie.type) {
case 'sankey':
tooltipType = 'sankey'; // Overrides legend tooltip
newSeries.push(getSankeySeries(serie, chartTheme, isSkeleton));
break;
case 'line':
if (!tooltipType) {
tooltipType = 'legend';
}
newSeries.push(getLineSeries(serie, chartTheme, isSkeleton));
break;
default:
newSeries.push(serie);
break;
}
});
return { series, tooltipType };
}, [option === null || option === void 0 ? void 0 : option.series]);
useEffect(() => {
var _a;
const isSkeleton = themeColor === ThemeColor.skeleton;
const chartTheme = theme ? theme : getTheme(themeColor);
const renderer = isSvgRenderer ? 'svg' : 'canvas';
echart.current = echarts.init(containerRef.current, chartTheme, defaultsDeep(opts, { height, renderer, width }) // height and width are necessary here for unit tests
);
const { series, tooltipType } = getSeries(chartTheme, isSkeleton);
(_a = echart.current) === null || _a === void 0 ? void 0 : _a.setOption(Object.assign(Object.assign(Object.assign({}, option), (isLegendTooltip && { tooltip: getTooltip(series, tooltipType, isSkeleton, echart.current) })), { series }));
return () => {
var _a;
(_a = echart.current) === null || _a === void 0 ? void 0 : _a.dispose();
};
}, [
containerRef,
getSeries,
getTooltip,
height,
isLegendTooltip,
isSvgRenderer,
option,
opts,
theme,
themeColor,
update,
width
]);
// Resize observer
useEffect(() => {
var _a;
(_a = echart.current) === null || _a === void 0 ? void 0 : _a.resize();
}, [height, width]);
// Dark theme observer
useEffect(() => {
let observer = () => { };
observer = getMutationObserver(nodeSelector, () => {
forceUpdate();
});
return () => {
observer();
};
}, [nodeSelector]);
return _jsx("div", Object.assign({ className: getClassName(className), id: id, ref: containerRef, style: getSize() }, rest));
};
Charts.displayName = 'Charts';
//# sourceMappingURL=Charts.js.map