@vectara/vectara-ui/lib/components/chart/ComposedChart.js

Vectara's design system, codified as a React and Sass component library

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, jsxs as _jsxs } from "react/jsx-runtime";
import { Bar, CartesianGrid, ComposedChart as RechartsComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { getChartColor, getChartColorByIndex } from "./palette";
import { chartAxisLineStyle, chartLegendProps, chartTickStyle, chartTooltipProps } from "./chartTheme";
export const VuiComposedChart = (_a) => {
    var { data, categoryKey, series, height = 320, showLegend = series.length > 1, showGrid = true, showTooltip = true, syncId, syncMethod, formatLeftValue, formatRightValue } = _a, rest = __rest(_a, ["data", "categoryKey", "series", "height", "showLegend", "showGrid", "showTooltip", "syncId", "syncMethod", "formatLeftValue", "formatRightValue"]);
    const hasRightAxis = series.some((s) => s.axis === "right");
    // A composed chart can mix two axes, so the tooltip formats each value by the
    // axis its series is measured against rather than a single shared formatter.
    const axisByDataKey = new Map(series.map((s) => { var _a; return [s.dataKey, (_a = s.axis) !== null && _a !== void 0 ? _a : "left"]; }));
    const hasValueFormatter = Boolean(formatLeftValue || formatRightValue);
    return (_jsx("div", Object.assign({ className: "vuiComposedChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsComposedChart, Object.assign({ data: data, syncId: syncId, syncMethod: syncMethod }, { children: [showGrid && _jsx(CartesianGrid, { stroke: "var(--vui-color-border-light)", vertical: false }), _jsx(XAxis, { dataKey: categoryKey, tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false }), _jsx(YAxis, { yAxisId: "left", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatLeftValue }), hasRightAxis && (_jsx(YAxis, { yAxisId: "right", orientation: "right", tick: chartTickStyle, axisLine: chartAxisLineStyle, tickLine: false, tickFormatter: formatRightValue })), showTooltip && (_jsx(Tooltip, Object.assign({ cursor: { fill: "var(--vui-color-light-shade)" }, formatter: hasValueFormatter
                            ? (value, _name, item) => {
                                if (typeof value !== "number")
                                    return value;
                                const format = axisByDataKey.get(String(item === null || item === void 0 ? void 0 : item.dataKey)) === "right" ? formatRightValue : formatLeftValue;
                                return format ? format(value) : value;
                            }
                            : undefined }, chartTooltipProps))), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps)), series.map((s, index) => {
                        var _a, _b;
                        const color = s.color ? getChartColor(s.color) : getChartColorByIndex(index);
                        const yAxisId = (_a = s.axis) !== null && _a !== void 0 ? _a : "left";
                        const name = (_b = s.name) !== null && _b !== void 0 ? _b : s.dataKey;
                        if (s.type === "bar") {
                            return (_jsx(Bar, { yAxisId: yAxisId, dataKey: s.dataKey, name: name, fill: color, radius: [4, 4, 0, 0], stroke: "var(--vui-color-empty-shade)", strokeWidth: 1 }, s.dataKey));
                        }
                        return (_jsx(Line, { yAxisId: yAxisId, type: s.curved ? "monotone" : "linear", dataKey: s.dataKey, name: name, stroke: color, strokeWidth: 2, dot: { r: 3, strokeWidth: 0, fill: color }, activeDot: { r: 5 } }, s.dataKey));
                    })] })) })) })));
};