@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
24 lines (23 loc) • 1.86 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 } from "react/jsx-runtime";
import { Bar, BarChart, Line, LineChart } from "recharts";
import { getChartColor, getChartColorByIndex } from "./palette";
// A compact, axis-free trend meant to sit inline beside a number or in a table
// cell. It renders at a fixed size rather than filling its container.
export const VuiSparkline = (_a) => {
var { data, dataKey, variant = "line", color, curved = true, width = 120, height = 32 } = _a, rest = __rest(_a, ["data", "dataKey", "variant", "color", "curved", "width", "height"]);
const fill = color ? getChartColor(color) : getChartColorByIndex(0);
return (_jsx("div", Object.assign({ className: "vuiSparkline" }, rest, { children: variant === "bar" ? (_jsx(BarChart, Object.assign({ width: width, height: height, data: data, margin: { top: 1, right: 0, bottom: 1, left: 0 } }, { children: _jsx(Bar, { dataKey: dataKey, fill: fill, radius: 1, isAnimationActive: false }) }))) : (_jsx(LineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 2, right: 2, bottom: 2, left: 2 } }, { children: _jsx(Line, { type: curved ? "monotone" : "linear", dataKey: dataKey, stroke: fill, strokeWidth: 1.5, dot: false,
// No axes or tooltip means a hover dot conveys nothing, so suppress it.
activeDot: false, isAnimationActive: false }) }))) })));
};