@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
281 lines (280 loc) • 16 kB
JavaScript
"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utilities.js";
import chart_module from "./chart.module.js";
import * as __rspack_external_react from "react";
import * as __rspack_external_recharts from "recharts";
const THEMES = {
light: "",
dark: ".dark"
};
const ChartContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
function useChart() {
const context = __rspack_external_react.useContext(ChartContext);
if (!context) throw new Error("useChart must be used within a <ChartContainer />");
return context;
}
const ChartContainer = /*#__PURE__*/ __rspack_external_react.forwardRef(({ id, config, initialDimension = {
width: 320,
height: 200
}, className, children, innerResponsiveContainerStyle, aspect, debounce, height, maxHeight, minHeight, minWidth, onResize, width, ...props }, ref)=>{
const uniqueId = __rspack_external_react.useId();
const chartId = `chart-${id ?? uniqueId.replaceAll(":", "")}`;
return /*#__PURE__*/ jsx(ChartContext.Provider, {
value: {
config
},
children: /*#__PURE__*/ jsxs("div", {
"data-slot": "chart",
"data-chart": chartId,
className: cn(chart_module.container, className),
...props,
children: [
/*#__PURE__*/ jsx(ChartStyle, {
id: chartId,
config: config
}),
/*#__PURE__*/ jsx(__rspack_external_recharts.ResponsiveContainer, {
ref: ref,
id: id,
className: className,
initialDimension: initialDimension,
aspect: aspect,
debounce: debounce,
height: height,
maxHeight: maxHeight,
minHeight: minHeight,
minWidth: minWidth,
onResize: onResize,
style: innerResponsiveContainerStyle,
width: width,
children: children
})
]
})
});
});
const ChartStyle = ({ id, config })=>{
const colorConfig = Object.entries(config).filter(([, itemConfig])=>itemConfig.theme ?? itemConfig.color);
if (!colorConfig.length) return null;
return /*#__PURE__*/ jsx("style", {
dangerouslySetInnerHTML: {
__html: Object.entries(THEMES).map(([theme, prefix])=>`
${prefix} [data-chart=${id}] {
${colorConfig.map(([key, itemConfig])=>{
const color = itemConfig.theme?.[theme] ?? itemConfig.color;
return color ? ` --color-${key}: ${color};` : null;
}).join("\n")}
}
`).join("\n")
}
});
};
const ChartTooltip = __rspack_external_recharts.Tooltip;
function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, separator }) {
const { config } = useChart();
const tooltipLabel = __rspack_external_react.useMemo(()=>{
if (hideLabel || !payload?.length) return null;
const [item] = payload;
const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const value = labelKey || "string" != typeof label ? itemConfig?.label : config[label]?.label ?? label;
if (labelFormatter) return /*#__PURE__*/ jsx("div", {
className: cn(chart_module.tooltipLabel, labelClassName),
children: labelFormatter(value, payload)
});
if (null == value) return null;
return /*#__PURE__*/ jsx("div", {
className: cn(chart_module.tooltipLabel, labelClassName),
children: value
});
}, [
config,
hideLabel,
label,
labelClassName,
labelFormatter,
labelKey,
payload
]);
if (!active || !payload?.length) return null;
const nestLabel = 1 === payload.length && "dot" !== indicator;
return /*#__PURE__*/ jsxs("div", {
className: cn(chart_module.tooltip, className),
children: [
nestLabel ? null : tooltipLabel,
/*#__PURE__*/ jsx("div", {
className: chart_module.tooltipBody,
children: payload.filter((item)=>"none" !== item.type).map((item, index)=>{
const key = `${nameKey ?? item.dataKey ?? item.name ?? "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const indicatorColor = color ?? item.payload?.fill ?? item.color ?? "transparent";
const indicatorStyle = {
"--ac-chart-indicator-background": indicatorColor,
"--ac-chart-indicator-border": indicatorColor
};
const itemFormatter = formatter ?? item.formatter;
const hasFormatter = "function" == typeof itemFormatter && void 0 !== item.value && void 0 !== item.name;
const formatterResult = hasFormatter ? itemFormatter(item.value, item.name, item, index, payload) : void 0;
const formattedEntry = Array.isArray(formatterResult) && 2 === formatterResult.length ? formatterResult : void 0;
const resolvedName = formattedEntry?.[1] ?? itemConfig?.label ?? item.name;
const resolvedUnit = item.unit ?? itemConfig?.unit;
const resolvedValue = formattedEntry?.[0] ?? (null !== item.value && void 0 !== item.value ? formatChartValue(item.value, itemConfig) : null);
return /*#__PURE__*/ jsx("div", {
className: cn(chart_module.tooltipItem, "dot" === indicator && chart_module.tooltipItemCenter),
children: null == formatterResult || formattedEntry ? /*#__PURE__*/ jsxs(Fragment, {
children: [
itemConfig?.icon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ jsx("div", {
className: cn(chart_module.tooltipIndicator, "dot" === indicator && chart_module.tooltipIndicatorDot, "line" === indicator && chart_module.tooltipIndicatorLine, "dashed" === indicator && chart_module.tooltipIndicatorDashed, nestLabel && "dashed" === indicator && chart_module.tooltipIndicatorDashedNested),
style: indicatorStyle
}),
/*#__PURE__*/ jsxs("div", {
className: cn(chart_module.tooltipValueRow, nestLabel && chart_module.tooltipValueRowNested),
children: [
/*#__PURE__*/ jsxs("div", {
className: chart_module.tooltipNameWrapper,
children: [
nestLabel ? tooltipLabel : null,
null != resolvedName && /*#__PURE__*/ jsx("span", {
className: chart_module.tooltipName,
children: resolvedName
})
]
}),
null != resolvedValue && /*#__PURE__*/ jsxs("span", {
className: chart_module.tooltipValue,
children: [
null != resolvedName && separator ? /*#__PURE__*/ jsx("span", {
"aria-hidden": "true",
children: separator
}) : null,
resolvedValue,
null != resolvedUnit ? /*#__PURE__*/ jsxs("span", {
children: [
" ",
resolvedUnit
]
}) : null
]
})
]
})
]
}) : formatterResult
}, `${key}-${index}`);
})
})
]
});
}
const ChartLegend = __rspack_external_recharts.Legend;
function ChartLegendContent({ className, hideIcon = false, nameKey, payload, verticalAlign }) {
const { config } = useChart();
if (!payload?.length) return null;
return /*#__PURE__*/ jsx("div", {
className: cn(chart_module.legend, "top" === verticalAlign ? chart_module.legendTop : chart_module.legendBottom, className),
children: payload.filter((item)=>"none" !== item.type).map((item)=>{
const key = `${nameKey ?? item.dataKey ?? "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
return /*#__PURE__*/ jsxs("div", {
className: chart_module.legendItem,
children: [
itemConfig?.icon && !hideIcon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : /*#__PURE__*/ jsx("div", {
className: chart_module.legendColor,
style: {
backgroundColor: item.color
}
}),
itemConfig?.label ?? item.value ?? formatLegendDataKey(item.dataKey)
]
}, String(item.value));
})
});
}
function formatChartValue(value, itemConfig) {
if ("number" == typeof value) return itemConfig?.formatter ? itemConfig.formatter(value) : value.toLocaleString();
return String(value);
}
function formatLegendDataKey(dataKey) {
return "number" == typeof dataKey || "string" == typeof dataKey ? String(dataKey) : null;
}
function getPayloadConfigFromPayload(config, payload, key) {
if ("object" != typeof payload || null === payload) return;
const payloadObject = payload;
const nestedPayload = "object" == typeof payloadObject["payload"] && null !== payloadObject["payload"] ? payloadObject["payload"] : void 0;
let configLabelKey = key;
if ("string" == typeof payloadObject[key]) configLabelKey = payloadObject[key];
else if (nestedPayload && "string" == typeof nestedPayload[key]) configLabelKey = nestedPayload[key];
return config[configLabelKey] ?? config[key];
}
ChartContainer.displayName = "ChartContainer";
ChartStyle.displayName = "ChartStyle";
Object.assign(ChartTooltip, {
displayName: "ChartTooltip"
});
ChartTooltipContent.displayName = "ChartTooltipContent";
Object.assign(ChartLegend, {
displayName: "ChartLegend"
});
ChartLegendContent.displayName = "ChartLegendContent";
const { AreaChart: AreaChart } = __rspack_external_recharts;
const { BarChart: BarChart } = __rspack_external_recharts;
const { ComposedChart: ComposedChart } = __rspack_external_recharts;
const { FunnelChart: FunnelChart } = __rspack_external_recharts;
const { LineChart: LineChart } = __rspack_external_recharts;
const { PieChart: PieChart } = __rspack_external_recharts;
const { RadarChart: RadarChart } = __rspack_external_recharts;
const { RadialBarChart: RadialBarChart } = __rspack_external_recharts;
const { ScatterChart: ScatterChart } = __rspack_external_recharts;
const { Sankey: Sankey } = __rspack_external_recharts;
const { SunburstChart: SunburstChart } = __rspack_external_recharts;
const { Treemap: Treemap } = __rspack_external_recharts;
const { Area: Area } = __rspack_external_recharts;
const { Bar: Bar } = __rspack_external_recharts;
const { BarStack: BarStack } = __rspack_external_recharts;
const { Funnel: Funnel } = __rspack_external_recharts;
const { Line: Line } = __rspack_external_recharts;
const { Pie: Pie } = __rspack_external_recharts;
const { Radar: Radar } = __rspack_external_recharts;
const { RadialBar: RadialBar } = __rspack_external_recharts;
const { Scatter: Scatter } = __rspack_external_recharts;
const { CartesianGrid: CartesianGrid } = __rspack_external_recharts;
const { PolarAngleAxis: PolarAngleAxis } = __rspack_external_recharts;
const { PolarGrid: PolarGrid } = __rspack_external_recharts;
const { PolarRadiusAxis: PolarRadiusAxis } = __rspack_external_recharts;
const { XAxis: XAxis } = __rspack_external_recharts;
const { YAxis: YAxis } = __rspack_external_recharts;
const { ZAxis: ZAxis } = __rspack_external_recharts;
const { Brush: Brush } = __rspack_external_recharts;
const { ErrorBar: ErrorBar } = __rspack_external_recharts;
const { Label: RechartsLabel } = __rspack_external_recharts;
const { LabelList: LabelList } = __rspack_external_recharts;
const { ReferenceArea: ReferenceArea } = __rspack_external_recharts;
const { ReferenceDot: ReferenceDot } = __rspack_external_recharts;
const { ReferenceLine: ReferenceLine } = __rspack_external_recharts;
const { ResponsiveContainer: ResponsiveContainer } = __rspack_external_recharts;
const { Customized: Customized } = __rspack_external_recharts;
const { Cell: Cell } = __rspack_external_recharts;
const { Cross: Cross } = __rspack_external_recharts;
const { Curve: Curve } = __rspack_external_recharts;
const { Dot: Dot } = __rspack_external_recharts;
const { Polygon: Polygon } = __rspack_external_recharts;
const { Rectangle: Rectangle } = __rspack_external_recharts;
const { Sector: Sector } = __rspack_external_recharts;
const { Symbols: Symbols } = __rspack_external_recharts;
const { Trapezoid: Trapezoid } = __rspack_external_recharts;
const { ZIndexLayer: ZIndexLayer } = __rspack_external_recharts;
const { DefaultZIndexes: DefaultZIndexes } = __rspack_external_recharts;
const { useChartWidth: useChartWidth } = __rspack_external_recharts;
const { useChartHeight: useChartHeight } = __rspack_external_recharts;
const { useOffset: useOffset } = __rspack_external_recharts;
const { usePlotArea: usePlotArea } = __rspack_external_recharts;
const { useMargin: useMargin } = __rspack_external_recharts;
const { useIsTooltipActive: useIsTooltipActive } = __rspack_external_recharts;
const { useActiveTooltipCoordinate: useActiveTooltipCoordinate } = __rspack_external_recharts;
const { useActiveTooltipDataPoints: useActiveTooltipDataPoints } = __rspack_external_recharts;
const { useActiveTooltipLabel: useActiveTooltipLabel } = __rspack_external_recharts;
const { useXAxisDomain: useXAxisDomain } = __rspack_external_recharts;
const { useYAxisDomain: useYAxisDomain } = __rspack_external_recharts;
export { Area, AreaChart, Bar, BarChart, BarStack, Brush, CartesianGrid, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ComposedChart, Cross, Curve, Customized, DefaultZIndexes, Dot, ErrorBar, Funnel, FunnelChart, LabelList, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Radar, RadarChart, RadialBar, RadialBarChart, RechartsLabel, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Sankey, Scatter, ScatterChart, Sector, SunburstChart, Symbols, Trapezoid, Treemap, XAxis, YAxis, ZAxis, ZIndexLayer, useActiveTooltipCoordinate, useActiveTooltipDataPoints, useActiveTooltipLabel, useChartHeight, useChartWidth, useIsTooltipActive, useMargin, useOffset, usePlotArea, useXAxisDomain, useYAxisDomain };
//# sourceMappingURL=chart.js.map