@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
43 lines (42 loc) • 3.72 kB
JavaScript
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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Line, LineChart as RechartsLineChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { getChartColor, getChartColorByIndex } from "./palette";
import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
export const VuiLineChart = (_a) => {
var { data, categoryKey, series, variant = "line", curved = false, showPoints = true, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true, syncId, syncMethod, formatValue } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "variant", "curved", "showPoints", "height", "showLegend", "showGrid", "showTooltip", "syncId", "syncMethod", "formatValue"]);
const isArea = variant === "area" || variant === "stacked-area";
const isStacked = variant === "stacked-area";
const axes = (_jsxs(_Fragment, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatValue }), showTooltip && (_jsx(Tooltip, Object.assign({ cursor: { stroke: "var(--vui-color-border-medium)" }, formatter: formatValue && ((value) => (typeof value === "number" ? formatValue(value) : value)) }, chartTooltipProps))), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps))] }));
// Shared marker props keep lines and areas visually identical apart from the fill.
const markProps = (s, index) => {
var _a;
const color = s.color ? getChartColor(s.color) : getChartColorByIndex(index);
return {
key: s.dataKey,
type: curved ? "monotone" : "linear",
dataKey: s.dataKey,
name: (_a = s.name) !== null && _a !== void 0 ? _a : s.dataKey,
stroke: color,
strokeWidth: 2,
dot: showPoints ? { r: 3, strokeWidth: 0, fill: color } : false,
activeDot: { r: 5 }
};
};
return (_jsx("div", Object.assign({ className: "vuiLineChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: isArea ? (_jsxs(RechartsAreaChart, Object.assign({ data: data, syncId: syncId, syncMethod: syncMethod }, { children: [axes, series.map((s, index) => {
const props = markProps(s, index);
// Stacked areas tile rather than overlap, so they take a more solid
// fill; overlapping areas stay translucent to remain readable.
return (_jsx(Area, Object.assign({}, props, { fill: props.stroke, fillOpacity: isStacked ? 0.85 : 0.2, stackId: isStacked ? "stack" : undefined })));
})] }))) : (_jsxs(RechartsLineChart, Object.assign({ data: data, syncId: syncId, syncMethod: syncMethod }, { children: [axes, series.map((s, index) => (_jsx(Line, Object.assign({}, markProps(s, index)))))] }))) })) })));
};