@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
106 lines • 4.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Charts = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("react");
const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
const defaultsDeep_1 = tslib_1.__importDefault(require("lodash/defaultsDeep"));
const echarts = tslib_1.__importStar(require("echarts/core"));
const Line_1 = require("../Line");
const Sankey_1 = require("../Sankey");
const observe_1 = require("../utils/observe");
const styles_1 = require("../utils/styles");
const theme_1 = require("../utils/theme");
const tooltip_1 = require("../utils/tooltip");
const ThemeColor_1 = require("../themes/ThemeColor");
const Charts = (_a) => {
var { className, height, id, isLegendTooltip = true, isSvgRenderer = true, nodeSelector, option, opts, theme, themeColor, width } = _a, rest = tslib_1.__rest(_a, ["className", "height", "id", "isLegendTooltip", "isSvgRenderer", "nodeSelector", "option", "opts", "theme", "themeColor", "width"]);
const containerRef = (0, react_2.useRef)();
const echart = (0, react_2.useRef)();
const [update, forceUpdate] = (0, react_2.useReducer)((x) => x + 1, 0);
const getSize = () => (Object.assign(Object.assign({}, (height && { height: `${height}px` })), (width && { width: `${width}px` })));
const getTooltip = (0, react_2.useCallback)((series, tooltipType, isSkeleton, echart) => {
// Skeleton should not have any interactions
if (isSkeleton) {
return undefined;
}
else if (tooltipType === 'sankey') {
return (0, tooltip_1.getSankeyTooltip)(series, option);
}
else if (tooltipType === 'legend') {
return (0, tooltip_1.getLegendTooltip)(series, option, echart);
}
return option.tooltip;
}, [option]);
const getSeries = (0, react_2.useCallback)((chartTheme, isSkeleton) => {
let tooltipType;
const series = (0, cloneDeep_1.default)(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((0, Sankey_1.getSankeySeries)(serie, chartTheme, isSkeleton));
break;
case 'line':
if (!tooltipType) {
tooltipType = 'legend';
}
newSeries.push((0, Line_1.getLineSeries)(serie, chartTheme, isSkeleton));
break;
default:
newSeries.push(serie);
break;
}
});
return { series, tooltipType };
}, [option === null || option === void 0 ? void 0 : option.series]);
(0, react_1.useEffect)(() => {
var _a;
const isSkeleton = themeColor === ThemeColor_1.ThemeColor.skeleton;
const chartTheme = theme ? theme : (0, theme_1.getTheme)(themeColor);
const renderer = isSvgRenderer ? 'svg' : 'canvas';
echart.current = echarts.init(containerRef.current, chartTheme, (0, defaultsDeep_1.default)(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
(0, react_1.useEffect)(() => {
var _a;
(_a = echart.current) === null || _a === void 0 ? void 0 : _a.resize();
}, [height, width]);
// Dark theme observer
(0, react_1.useEffect)(() => {
let observer = () => { };
observer = (0, observe_1.getMutationObserver)(nodeSelector, () => {
forceUpdate();
});
return () => {
observer();
};
}, [nodeSelector]);
return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, styles_1.getClassName)(className), id: id, ref: containerRef, style: getSize() }, rest));
};
exports.Charts = Charts;
exports.Charts.displayName = 'Charts';
//# sourceMappingURL=Charts.js.map