@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
174 lines • 13.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* 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/>.
*/
import { tokens } from '@neo4j-ndl/base';
import { renderToString } from 'react-dom/server';
import { defaultThresholdLineSeriesOption, } from './Chart';
import { ChartTooltip } from './ChartTooltip';
const colors = Object.values(tokens.categorical);
export const mergeSeries = (series, theme = 'light') => {
return series.map((option, index = 0) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
if (option === undefined) {
return {};
}
const color = Array.isArray(option.color)
? option.color[index]
: ((_a = option.color) !== null && _a !== void 0 ? _a : colors[index]);
if (option.type === 'thresholdLine') {
const { notificationType } = option;
// Needed to differentiate between normal lines and threshold lines
// as we are unable to inject custom properties into echarts series lines.
const thresholdLineName = `thresholdLine-${notificationType}`;
return Object.assign(Object.assign({ symbolSize: 9, symbol: 'none', condition: defaultThresholdLineSeriesOption.condition }, option), { lineStyle: Object.assign({ width: 2, type: 'dashed' }, option.lineStyle), name: thresholdLineName, type: 'line', data: [
[option.xAxis[0], option.yAxis],
[option.xAxis[1], option.yAxis],
] });
}
if (option.type === 'line') {
const shadow = tokens.theme[theme].boxShadow.raised;
const shadowParts = shadow.split(/ (?=\d+px|rgba?\()/);
return Object.assign(Object.assign({ type: 'line', symbolSize: 9, color, symbol: 'none' }, option), { lineStyle: Object.assign({ width: 2, type: 'solid' }, option.lineStyle), emphasis: Object.assign(Object.assign(Object.assign({ disabled: true, focus: 'series' }, option.emphasis), { itemStyle: Object.assign({ borderColor: tokens.theme[theme].color.neutral.bg.weak, shadowOffsetX: parseInt(shadowParts[0]), shadowOffsetY: parseInt(shadowParts[1]), shadowBlur: parseInt(shadowParts[2]), shadowColor: shadowParts[4] }, (_b = option.emphasis) === null || _b === void 0 ? void 0 : _b.itemStyle), label: { show: false } }), option.emphasis) });
}
if (option.type === 'pie') {
return Object.assign(Object.assign({ animationDuration: 600, animationType: 'scale', selectedMode: 'single' }, option), {
// Blur opacity is set to 1 to prevent other slices from
// being opacitated when hovering a slice where the emphasis is enabled (used for scale effect)
blur: Object.assign({ itemStyle: Object.assign({ opacity: 1 }, (_c = option.blur) === null || _c === void 0 ? void 0 : _c.itemStyle), label: Object.assign({ opacity: 1 }, (_d = option.blur) === null || _d === void 0 ? void 0 : _d.label) }, option.blur),
// Emphasis is enabled and used to apply the scale effect when hovering the pie chart slices.
emphasis: Object.assign({ disabled: false, focus: 'self', scale: true, scaleSize: 5 }, option.emphasis), itemStyle: Object.assign({ borderColor: tokens.theme[theme].color.neutral.bg.weak, borderWidth: 1 }, option.itemStyle), label: Object.assign({ formatter: '{d}%', backgroundColor: 'transparent', color: tokens.theme[theme].color.neutral.text.weak }, option.label), labelLine: Object.assign({ length: 5, show: true }, option.labelLine), tooltip: Object.assign({ trigger: 'item', confine: true,
// Reset the default tooltip css styling
padding: 0, borderRadius: 0, borderWidth: 0, extraCssText: 'box-shadow: none; background-color: transparent;', formatter: function (params) {
var _a, _b;
const paramsArray = Array.isArray(params) ? params : [params];
const firstParam = paramsArray[0];
let valueFormatter = (value) => `${value}`;
return `${renderToString(_jsx("span", { className: "ndl-charts-chart-tooltip", children: _jsx(ChartTooltip.Content, { leadingElement: (_a = firstParam === null || firstParam === void 0 ? void 0 : firstParam.value[0]) !== null && _a !== void 0 ? _a : firstParam.seriesName, trailingElement: valueFormatter(Array.isArray(firstParam.value)
? firstParam.value[1]
: firstParam.value), indentSquareColor: firstParam.color }, (_b = firstParam === null || firstParam === void 0 ? void 0 : firstParam.value[0]) !== null && _b !== void 0 ? _b : firstParam.seriesName) }))}`;
} }, option.tooltip) });
}
if (option.type === 'bar') {
return Object.assign(Object.assign({ barMaxWidth: 16 }, option), { blur: Object.assign({ itemStyle: Object.assign({ opacity: 0.3 }, (_e = option.blur) === null || _e === void 0 ? void 0 : _e.itemStyle) }, option.blur), emphasis: Object.assign({ disabled: true, focus: 'series' }, option.emphasis), itemStyle: Object.assign({ color, borderWidth: 20 }, option.itemStyle), markLine: {
lineStyle: Object.assign({ width: 20 }, (_f = option.markLine) === null || _f === void 0 ? void 0 : _f.lineStyle),
emphasis: Object.assign({ disabled: true, lineStyle: Object.assign({ width: 20 }, (_h = (_g = option.markLine) === null || _g === void 0 ? void 0 : _g.emphasis) === null || _h === void 0 ? void 0 : _h.lineStyle) }, (_j = option.markLine) === null || _j === void 0 ? void 0 : _j.emphasis),
}, tooltip: Object.assign({ trigger: 'axis', confine: true,
// Reset the default tooltip css styling
padding: 0, borderRadius: 0, borderWidth: 0, extraCssText: 'box-shadow: none; background-color: transparent;', formatter: function (params) {
var _a;
const paramsArray = Array.isArray(params) ? params : [params];
const firstParam = paramsArray[0];
let valueFormatter = (value) => `${value}`;
return `${renderToString(_jsxs("span", { className: "ndl-charts-chart-tooltip", children: [_jsx(ChartTooltip.Title, { children: firstParam.name }), _jsx(ChartTooltip.Content, { leadingElement: firstParam.seriesName, trailingElement: valueFormatter(Array.isArray(firstParam.value)
? firstParam.value[1]
: firstParam.value), indentSquareColor: firstParam.color }, (_a = firstParam === null || firstParam === void 0 ? void 0 : firstParam.value[0]) !== null && _a !== void 0 ? _a : firstParam.seriesName)] }))}`;
} }, option.tooltip) });
}
return option;
});
};
export const mergeXAxis = (xAxis, theme = 'light') => {
var _a, _b;
if (xAxis === undefined) {
return [];
}
if (Array.isArray(xAxis)) {
return xAxis.map((x) => mergeXAxis(x, theme));
}
const baseXAxis = Object.assign(Object.assign({}, xAxis), { splitLine: Object.assign({ show: false }, xAxis === null || xAxis === void 0 ? void 0 : xAxis.splitLine), axisLine: Object.assign({ lineStyle: Object.assign({}, (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisLine) === null || _a === void 0 ? void 0 : _a.lineStyle) }, xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisLine), axisTick: Object.assign(Object.assign(Object.assign({}, xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisTick), { lineStyle: Object.assign({}, (_b = xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisTick) === null || _b === void 0 ? void 0 : _b.lineStyle), show: true }), xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisTick), axisLabel: Object.assign({ margin: 16, formatter: {
year: '{yearStyle|{yyyy}}\n{monthStyle|{MMM}}',
month: '{MMM}',
day: '{dd} {MMM}',
hour: '{HH}:{mm}',
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}',
millisecond: '{hh}:{mm}:{ss} {SSS}',
// @ts-expect-error the type is not correct none is used when no other format works.
none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}',
}, overflow: 'truncate' }, xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisLabel) });
if (xAxis.type === 'time') {
const timeXAxis = Object.assign(Object.assign({}, baseXAxis), { axisLabel: Object.assign({ hideOverlap: true }, baseXAxis.axisLabel) });
return timeXAxis;
}
if (xAxis.type === 'value' || xAxis.type === 'log') {
const valueXAxis = Object.assign({}, baseXAxis);
return valueXAxis;
}
if (xAxis.type === 'category') {
const categoryXAxis = Object.assign(Object.assign({}, baseXAxis), { axisTick: Object.assign({ alignWithLabel: true }, (Array.isArray(baseXAxis) ? {} : baseXAxis === null || baseXAxis === void 0 ? void 0 : baseXAxis.axisTick)), axisLabel: Object.assign({ width: 80 }, (Array.isArray(baseXAxis) ? {} : baseXAxis === null || baseXAxis === void 0 ? void 0 : baseXAxis.axisLabel)) });
return categoryXAxis;
}
return baseXAxis;
};
export const mergeYAxis = (yAxis, theme = 'light') => {
var _a, _b;
if (yAxis === undefined) {
return [];
}
if (Array.isArray(yAxis)) {
return yAxis.map((y) => mergeYAxis(y, theme));
}
const baseYAxis = Object.assign(Object.assign({}, yAxis), { axisLine: Object.assign(Object.assign({}, yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisLine), { lineStyle: Object.assign({}, (_a = yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisLine) === null || _a === void 0 ? void 0 : _a.lineStyle), show: true }), axisTick: Object.assign(Object.assign({ show: false }, yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisTick), { lineStyle: Object.assign({ width: 1 }, (_b = yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisTick) === null || _b === void 0 ? void 0 : _b.lineStyle) }), axisLabel: Object.assign({ margin: 8, overflow: 'truncate' }, yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisLabel), splitLine: Object.assign({ show: true }, yAxis === null || yAxis === void 0 ? void 0 : yAxis.splitLine) });
if (yAxis.type === 'time') {
const timeYAxis = Object.assign(Object.assign({}, baseYAxis), { axisLabel: Object.assign({ hideOverlap: true }, baseYAxis.axisLabel), splitLine: Object.assign({ show: false }, baseYAxis === null || baseYAxis === void 0 ? void 0 : baseYAxis.splitLine) });
return timeYAxis;
}
if (yAxis.type === 'value' || yAxis.type === 'log') {
const valueYAxis = Object.assign(Object.assign({}, baseYAxis), { axisLabel: Object.assign({ hideOverlap: true }, baseYAxis.axisLabel), splitLine: Object.assign({ show: false }, baseYAxis === null || baseYAxis === void 0 ? void 0 : baseYAxis.splitLine) });
return valueYAxis;
}
if (yAxis.type === 'category') {
const categoryYAxis = Object.assign(Object.assign({}, baseYAxis), { axisLabel: Object.assign({ width: 100 }, (Array.isArray(baseYAxis) ? {} : baseYAxis === null || baseYAxis === void 0 ? void 0 : baseYAxis.axisLabel)) });
return categoryYAxis;
}
return baseYAxis;
};
export const mergeDataZoom = (dataZoom) => {
if (Array.isArray(dataZoom)) {
return dataZoom.map((option) => mergeDataZoom(option));
}
const isSlider = (dataZoom === null || dataZoom === void 0 ? void 0 : dataZoom.type) === 'slider';
const isInside = (dataZoom === null || dataZoom === void 0 ? void 0 : dataZoom.type) === 'inside';
if (isSlider) {
return Object.assign({ bottom: 10, height: 28, left: 50, right: 50, show: true, type: 'slider' }, dataZoom);
}
else if (isInside) {
return Object.assign({ filterMode: 'none', xAxisIndex: [0], zoomOnMouseWheel: false }, dataZoom);
}
return dataZoom;
};
export const mergeToolbox = (toolbox) => {
var _a;
if (Array.isArray(toolbox)) {
return toolbox.map((option) => mergeToolbox(option));
}
return {
feature: {
dataZoom: Object.assign(Object.assign({ yAxisIndex: false }, (_a = toolbox === null || toolbox === void 0 ? void 0 : toolbox.feature) === null || _a === void 0 ? void 0 : _a.dataZoom), { show: true, icon: {
// This hack removes the icons.
// Due to: https://github.com/apache/echarts/issues/10274
zoom: '-',
back: '-',
} }),
},
};
};
//# sourceMappingURL=user-option-utils.js.map