@flipdish/ui-library 0.4.3 → 0.6.0

package/dist/components/organisms/Charts/components/metrics.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowDownRight, TrendDown01, ArrowDown, ArrowUpRight, TrendUp01, ArrowUp, Eye, Zap } from '@flipdish/ui-icons';
+import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import { Dropdown } from '@flipdish/ui-library/components/molecules/Dropdown';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useId } from 'react';
+import { AreaChart, Area, ResponsiveContainer } from 'recharts';
+
+const ActionsDropdown = ({ actions }) => (jsxs(Dropdown.Root, { children: [jsx(Dropdown.DotsButton, {}), jsx(Dropdown.Popover, { className: "w-min", children: jsx(Dropdown.Menu, { children: actions.map(({ id, label, icon, onPress }) => (jsx(Dropdown.Item, { icon: icon, onAction: onPress, children: jsx("span", { className: "pr-4", children: label }) }, id))) }) })] }));
+const MetricChangeIndicator = ({ type, trend, value, className }) => {
+    const icons = {
+        positive: {
+            simple: ArrowUp,
+            trend: TrendUp01,
+            modern: ArrowUpRight,
+        },
+        negative: {
+            simple: ArrowDown,
+            trend: TrendDown01,
+            modern: ArrowDownRight,
+        },
+    };
+    const Icon = icons[trend][type];
+    return (jsxs("div", { className: cx('flex items-center', type === 'simple' ? 'gap-0.5' : 'gap-1', type === 'modern' && 'rounded-md bg-primary py-0.5 pr-2 pl-1.5 shadow-xs ring-1 ring-primary ring-inset', className), children: [jsx(Icon, { className: cx('stroke-[3px] text-fg-success-secondary', type === 'modern' ? 'size-3' : 'size-4', trend === 'negative' ? 'text-fg-error-secondary' : 'text-fg-success-secondary') }), jsx("span", { className: cx('text-sm font-medium text-secondary', type === 'modern' ? 'text-secondary' : trend === 'negative' ? 'text-error-primary' : 'text-success-primary'), children: value })] }));
+};
+const MetricsSimple = ({ title = '2,000', subtitle = 'View 24 hours', type, trend, change, dropdownActions, footer, className, }) => {
+    return (jsxs("div", { className: cx('rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-2 px-4 py-5 md:px-5", children: [jsx("h3", { className: "text-sm font-medium text-tertiary", children: subtitle }), jsxs("div", { className: "flex items-end gap-4", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary", children: title }), jsx(MetricChangeIndicator, { type: type, trend: trend, value: change })] }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-4 md:px-5", children: footer })] }));
+};
+const MetricsIcon01 = ({ icon = TrendUp01, title = '2,000', subtitle = 'View 24 hours', change = '100%', changeTrend = 'positive', dropdownActions, footer, className, }) => {
+    return (jsxs("div", { className: cx('rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-4 px-4 py-5 md:gap-5 md:px-5", children: [jsx(FeaturedIcon, { color: changeTrend === 'positive' ? 'success' : 'error', theme: "light", icon: icon, size: "lg" }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("h3", { className: "text-sm font-medium text-tertiary", children: subtitle }), jsxs("div", { className: "flex items-end gap-4", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary", children: title }), jsx(MetricChangeIndicator, { type: "modern", trend: changeTrend, value: change })] })] }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-4 md:px-5", children: footer })] }));
+};
+const MetricsIcon02 = ({ icon = Zap, title = '2,000', subtitle = 'View 24 hours', change = '100%', changeTrend = 'positive', changeDescription = 'vs last month', dropdownActions, footer, className, }) => {
+    return (jsxs("div", { className: cx('rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-4 px-4 py-5 md:gap-5 md:px-5", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(FeaturedIcon, { color: "brand", theme: "light", size: "lg", icon: icon }), jsx("h3", { className: "text-md font-semibold text-primary", children: subtitle })] }), jsxs("div", { className: "flex flex-col gap-3", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary", children: title }), jsxs("div", { className: "flex gap-2", children: [jsx(MetricChangeIndicator, { type: "simple", trend: changeTrend, value: change }), changeDescription && jsx("span", { className: "text-sm font-medium text-tertiary", children: changeDescription })] })] }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-4 md:px-5", children: footer })] }));
+};
+const MetricsIcon03 = ({ icon = TrendUp01, title = '2,000', subtitle = 'View 24 hours', change = '100%', changeTrend = 'positive', dropdownActions, className, footer, }) => {
+    return (jsxs("div", { className: cx('rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-4 px-4 py-5 md:gap-5 md:px-5", children: [jsx(FeaturedIcon, { color: "gray", theme: "modern", icon: icon || TrendUp01, size: "lg" }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("h3", { className: "text-sm font-semibold text-tertiary", children: subtitle }), jsxs("div", { className: "flex flex-wrap items-center gap-3 lg:gap-4", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary", children: title }), jsxs("div", { className: "flex gap-2", children: [jsx(MetricChangeIndicator, { type: "trend", trend: changeTrend, value: change }), jsx("span", { className: "text-sm font-medium text-tertiary", children: "vs last month" })] })] })] }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-3 pr-4 md:p-4 md:pr-5", children: footer })] }));
+};
+const MetricsIcon04 = ({ icon = TrendUp01, title = '2,000', subtitle = 'View 24 hours', change = '100%', changeTrend = 'positive', dropdownActions, footer, className, }) => {
+    return (jsxs("div", { className: cx('min-w-70 rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-4 px-4 py-5 md:flex-row md:px-5", children: [jsx(FeaturedIcon, { color: "gray", theme: "modern", icon: icon, size: "md" }), jsxs("div", { className: "flex w-full flex-col gap-2", children: [jsx("h3", { className: "text-sm font-semibold text-tertiary", children: subtitle }), jsxs("div", { className: "flex w-full flex-wrap items-center justify-between gap-4", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary", children: title }), jsx(MetricChangeIndicator, { type: "modern", trend: changeTrend, value: change })] })] }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-3 pr-4 md:p-4 md:pr-5", children: footer })] }));
+};
+const CustomizedDot = (props) => {
+    if (!props.payload?.highlight) {
+        return null;
+    }
+    const size = 20;
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: we don't need a title for this svg
+    jsxs("svg", { x: Number(props.cx) - size / 2, y: Number(props.cy) - size / 2, width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: cx('text-fg-success-secondary', props.dotColor), children: [jsx("rect", { x: "1.75", y: "1.625", width: "17.25", height: "17.25", rx: "8.625", className: "stroke-current", strokeOpacity: 0.2, strokeWidth: "2" }), jsx("rect", { x: "6.125", y: "6", width: "8.5", height: "8.5", rx: "4.25", className: "fill-bg-primary stroke-current", strokeWidth: "2" })] }));
+};
+const lineData = [
+    { value: 10 },
+    { value: 15 },
+    { value: 12 },
+    { value: 20 },
+    { value: 18 },
+    { value: 25 },
+    { value: 30 },
+    { value: 28 },
+    { value: 32 },
+    { value: 35 },
+    { value: 40, highlight: true },
+    { value: 32 },
+    { value: 40 },
+    { value: 50 },
+    { value: 55 },
+];
+const MetricsChart01 = ({ title = '2,000', subtitle = 'View 24 hours', change = '100%', changeDescription = 'vs last month', dropdownActions, chartData = lineData, trend = 'positive', footer, className, }) => {
+    const id = useId();
+    const chartColor = trend === 'positive' ? 'text-fg-success-secondary' : 'text-fg-error-secondary';
+    return (jsxs("div", { className: cx('rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-5 px-4 py-5 md:px-5", children: [jsx("h3", { className: "text-md font-semibold text-primary", children: subtitle }), jsxs("div", { className: "flex items-end justify-between gap-4", children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary", children: title }), jsxs("div", { className: "flex gap-2", children: [jsx(MetricChangeIndicator, { type: "simple", trend: trend, value: change }), jsx("span", { className: "text-sm font-medium text-tertiary", children: changeDescription })] })] }), jsxs(AreaChart, { height: 56, width: 112, data: chartData, margin: {
+                                    left: 0,
+                                    right: 0,
+                                    top: 0,
+                                    bottom: 0,
+                                }, children: [jsx("defs", { children: jsxs("linearGradient", { id: `gradient-${id}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "5%", stopColor: "currentColor", className: chartColor, stopOpacity: "1" }), jsx("stop", { offset: "95%", stopColor: "currentColor", className: chartColor, stopOpacity: "0" })] }) }), jsx(Area, { isAnimationActive: false, className: chartColor, dataKey: "value", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: `url(#gradient-${id})`, fillOpacity: 0.2, dot: jsx(CustomizedDot, { dotColor: chartColor }), activeDot: false })] })] }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-4 md:px-5", children: footer })] }));
+};
+const lineData2 = [
+    { a: 10, b: 0 },
+    { a: 5, b: 30 },
+    { a: 30, b: 20 },
+    { a: 20, b: 35 },
+];
+const MetricsChart02 = ({ icon = Eye, title = '2,000', subtitle = 'View 24 hours', change = '100%', changeTrend = 'positive', dropdownActions, footer, className, }) => {
+    const id = useId();
+    const chartColor = changeTrend === 'positive' ? 'text-fg-success-secondary' : 'text-fg-error-secondary';
+    return (jsxs("div", { className: cx('rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-4 px-4 py-5 md:gap-5 md:px-5", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(FeaturedIcon, { color: "gray", theme: "modern", size: "lg", icon: icon }), jsx("h3", { className: "text-md font-semibold text-primary", children: subtitle })] }), jsxs("div", { className: "flex items-end justify-between gap-4", children: [jsxs("div", { className: "flex items-start gap-2", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary lg:text-display-md", children: title }), jsx(MetricChangeIndicator, { type: "trend", trend: changeTrend, value: change })] }), jsxs(AreaChart, { height: 56, width: 128, data: lineData2, margin: {
+                                    left: 0,
+                                    right: 0,
+                                    top: 0,
+                                    bottom: 0,
+                                }, children: [jsx("defs", { children: jsxs("linearGradient", { id: `gradient-${id}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "5%", stopColor: "currentColor", className: chartColor, stopOpacity: "1" }), jsx("stop", { offset: "95%", stopColor: "currentColor", className: chartColor, stopOpacity: "0" })] }) }), jsx(Area, { className: chartColor, dataKey: "a", type: "monotone", strokeWidth: 0, fill: "currentColor", fillOpacity: 0.2, isAnimationActive: false, activeDot: false }), jsx(Area, { dataKey: "b", type: "monotone", strokeWidth: 0, fill: `url(#gradient-${id})`, fillOpacity: 0.2, isAnimationActive: false, activeDot: false })] })] }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-3 pr-4 md:p-4 md:pr-5", children: footer })] }));
+};
+const lineData3 = [{ value: 0 }, { value: 9 }, { value: 6 }, { value: 15 }];
+const MetricsChart03 = ({ title = '2,000', subtitle = 'View 24 hours', type = 'trend', change, changeTrend, changeDescription, chartColor, chartAreaFill, chartCurveType, chartData = lineData3, dropdownActions, footer, className, }) => {
+    const id = useId();
+    chartColor = chartColor ?? (changeTrend === 'positive' ? 'text-fg-success-secondary' : 'text-fg-error-secondary');
+    return (jsxs("div", { className: cx('rounded-xl bg-primary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsxs("div", { className: "relative flex flex-col gap-4 px-4 py-5 md:gap-5 md:px-5", children: [jsxs("div", { className: "flex flex-col gap-2", children: [jsx("h3", { className: "text-sm font-medium text-tertiary", children: subtitle }), jsxs("div", { className: "flex items-center gap-4", children: [jsx("p", { className: "flex-1 text-display-sm font-semibold text-primary", children: title }), jsxs("div", { className: "flex gap-2", children: [jsx(MetricChangeIndicator, { type: type, trend: changeTrend, value: change }), changeDescription && jsx("span", { className: "text-sm font-medium text-tertiary", children: changeDescription })] })] })] }), jsx(ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, height: 72, children: jsxs(AreaChart, { data: chartData, margin: {
+                                left: 0,
+                                right: 0,
+                                top: 0,
+                                bottom: 0,
+                            }, children: [jsx("defs", { children: jsxs("linearGradient", { id: `gradient-${id}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "5%", stopColor: "currentColor", className: chartColor, stopOpacity: "1" }), jsx("stop", { offset: "95%", stopColor: "currentColor", className: chartColor, stopOpacity: "0" })] }) }), jsx(Area, { isAnimationActive: false, className: chartColor, dataKey: "value", type: chartCurveType || 'monotone', stroke: "currentColor", strokeWidth: 2, fill: chartAreaFill || `url(#gradient-${id})`, fillOpacity: 0.2, activeDot: false })] }) }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end border-t border-secondary p-3 pr-4 md:p-4 md:pr-5", children: footer })] }));
+};
+const MetricsChart04 = ({ title, subtitle, type = 'trend', change, changeTrend, changeDescription, chartColor = 'text-fg-success-secondary', chartAreaFill, chartCurveType, chartData = lineData3, dropdownActions, footer, className, }) => {
+    const id = useId();
+    chartColor = chartColor ?? (changeTrend === 'positive' ? 'text-fg-success-secondary' : 'text-fg-error-secondary');
+    return (jsxs("div", { className: cx('flex flex-col overflow-hidden rounded-xl bg-secondary shadow-xs ring-1 ring-secondary ring-inset', className), children: [jsx("div", { className: "mb-0.5 px-4 pt-3 pb-2 md:px-5", children: jsx("h3", { className: "text-sm font-semibold text-primary", children: subtitle }) }), jsxs("div", { className: "relative flex flex-col gap-4 rounded-xl bg-primary px-4 py-5 shadow-xs ring-1 ring-secondary ring-inset md:gap-5 md:px-5", children: [jsx("div", { className: "flex flex-col gap-2", children: jsxs("div", { className: "flex items-center gap-3", children: [jsx("p", { className: "text-display-sm font-semibold text-primary", children: title }), jsxs("div", { className: "flex gap-2", children: [jsx(MetricChangeIndicator, { type: type, trend: changeTrend, value: change }), changeDescription && jsx("span", { className: "text-sm font-medium text-tertiary", children: changeDescription })] })] }) }), jsx(ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, height: 56, children: jsxs(AreaChart, { data: chartData, margin: {
+                                left: 0,
+                                right: 0,
+                                top: 0,
+                                bottom: 0,
+                            }, className: chartColor, children: [jsx("defs", { children: jsxs("linearGradient", { id: `gradient-${id}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "5%", stopColor: "currentColor", className: chartColor, stopOpacity: "1" }), jsx("stop", { offset: "95%", stopColor: "currentColor", className: chartColor, stopOpacity: "0" })] }) }), jsx(Area, { isAnimationActive: false, className: chartColor, dataKey: "value", type: chartCurveType || 'monotone', stroke: "currentColor", strokeWidth: 2, fill: chartAreaFill || `url(#gradient-${id})`, fillOpacity: 0.2, activeDot: false })] }) }), dropdownActions && dropdownActions.length > 0 && (jsx("div", { className: "absolute top-4 right-4 md:top-5 md:right-5", children: jsx(ActionsDropdown, { actions: dropdownActions }) }))] }), footer && jsx("div", { className: "flex items-center justify-end py-3 pr-4 pl-3 md:pr-5 md:pl-4", children: footer })] }));
+};
+
+export { MetricChangeIndicator, MetricsChart01, MetricsChart02, MetricsChart03, MetricsChart04, MetricsIcon01, MetricsIcon02, MetricsIcon03, MetricsIcon04, MetricsSimple };
+//# sourceMappingURL=metrics.js.map

package/dist/components/organisms/Charts/components/metrics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics.js","sources":["../../../../../src/components/organisms/Charts/components/metrics.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/organisms/Charts/components/pie-chart.cjs

@@ -2,79 +2,45 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
+var recharts = require('recharts');
+var chartsBase = require('./charts-base.cjs');
 
-/**
- * Selects evenly spaced items from an array. Used for rendering
- * certain number of x-axis labels.
- * @param dataArray - The array of items to select from.
- * @param count - The number of items to select.
- * @returns The selected items.
- */
-const selectEvenlySpacedItems = (dataArray, count) => {
-    if (!dataArray || dataArray.length === 0) {
-        return [];
-    }
-    const selectedItems = [];
-    if (dataArray.length === 1) {
-        for (let i = 0; i < count; i++) {
-            selectedItems.push(dataArray[0]);
-        }
-        return selectedItems;
-    }
-    for (let i = 0; i < count; i++) {
-        const targetIndex = Math.round((i * (dataArray.length - 1)) / (count - 1));
-        const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));
-        selectedItems.push(dataArray[boundedIndex]);
-    }
-    return selectedItems;
+const defaultData = [
+    { name: 'Series 1', value: 200, className: 'text-utility-brand-600' },
+    { name: 'Series 2', value: 350, className: 'text-utility-brand-500' },
+    { name: 'Series 3', value: 100, className: 'text-utility-brand-400' },
+    { name: 'Series 4', value: 120, className: 'text-utility-brand-300' },
+    { name: 'Series 5', value: 230, className: 'text-utility-neutral-200' },
+];
+const sizeConfig = {
+    xxs: { height: 120, maxWidthClassName: 'max-w-52.5', innerRadius: 30, outerRadius: 60 },
+    xs: { height: 160, maxWidthClassName: 'max-w-62.5', innerRadius: 40, outerRadius: 80 },
+    sm: { height: 200, maxWidthClassName: 'max-w-72.5', innerRadius: 50, outerRadius: 100 },
+    md: { height: 240, maxWidthClassName: 'max-w-96', innerRadius: 60, outerRadius: 120 },
+    lg: { height: 280, maxWidthClassName: 'max-w-96', innerRadius: 70, outerRadius: 140 },
 };
 /**
- * Renders the legend content for a chart.
- * @param reversed - Whether to reverse the payload.
- * @param payload - The payload of the legend.
- * @param align - The alignment of the legend.
- * @param layout - The layout of the legend.
- * @param className - The class name of the legend.
- * @returns The legend content.
+ * Plots each row as a slice of a donut, sized by its share of the total — here,
+ * five tokenised series. Pick a `size` preset for the footprint and colour each
+ * slice with a semantic `text-utility-*` token. Use it to show the composition
+ * of a whole when a handful of parts matter.
+ *
+ * @summary donut showing each part's share of a whole
  */
-const ChartLegendContent = ({ reversed, payload, align, layout, className, }) => {
-    payload = reversed ? [...(payload ?? [])].reverse() : payload;
-    return (jsxRuntime.jsx("ul", { className: cx.cx('flex', layout === 'vertical'
-            ? `flex-col gap-1 pl-4 ${align === 'center' ? 'items-center' : align === 'right' ? 'items-start' : 'items-start'}`
-            : `flex-row gap-3 ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'}`, className), children: payload?.map((entry, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the payload is an array of objects
-        jsxRuntime.jsxs("li", { className: "flex items-center gap-2 text-sm text-tertiary", children: [jsxRuntime.jsx("span", { className: cx.cx('block size-2 rounded-full bg-current ring-[0.5px] ring-black/10 ring-inset', entry.payload?.className) }), entry.value] }, index))) }));
-};
-const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }) => {
-    const canRender = active && payload && payload.length;
-    if (!canRender) {
-        return null;
-    }
-    const isSingleDataPoint = payload.length === 1;
-    // If it's a single data point, we use the value as the title and
-    // the name as the secondary title.
-    let title = isSingleDataPoint ? (isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value) : label;
-    let secondaryTitle = isSingleDataPoint ? (isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label) : payload;
-    title =
-        isSingleDataPoint && formatter
-            ? formatter(title, payload?.[0].name || label, payload[0], 0, payload)
-            : labelFormatter
-                ? labelFormatter(title, payload)
-                : title;
-    secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 rounded-lg bg-primary-solid px-3 py-2 shadow-lg", children: [jsxRuntime.jsx("p", { className: "text-xs font-semibold text-white", children: title }), !secondaryTitle ? null : Array.isArray(secondaryTitle) ? (jsxRuntime.jsx("div", { children: secondaryTitle.map((entry, index) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the secondaryTitle is an array of objects
-                jsxRuntime.jsx("p", { className: cx.cx('text-xs text-tooltip-supporting-text'), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, index))) })) : (jsxRuntime.jsx("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle }))] }));
-};
-const ChartActiveDot = ({ cx = 0, cy = 0 }) => {
-    const size = 12;
-    return (
-    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
-    jsxRuntime.jsx("svg", { x: cx - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: jsxRuntime.jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "6", className: "fill-bg-primary stroke-utility-brand-600", strokeWidth: "2" }) }));
+const PieChart = ({ data = defaultData, size = 'xs', showLegend = true, showTooltip = true, valueFormatter, className }) => {
+    const config = sizeConfig[size];
+    return (jsxRuntime.jsx(recharts.ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, height: config.height, className: cx.cx(config.maxWidthClassName, className), children: jsxRuntime.jsxs(recharts.PieChart, { className: "text-tertiary [&_.recharts-text]:text-xs", margin: { left: 0, right: 0, top: 0, bottom: 0 }, children: [showLegend && jsxRuntime.jsx(recharts.Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: jsxRuntime.jsx(chartsBase.ChartLegendContent, {}) }), showTooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(chartsBase.ChartTooltipContent, { isPieChart: true }), formatter: valueFormatter }), jsxRuntime.jsx(recharts.Pie, { isAnimationActive: false, startAngle: -270, endAngle: -630, stroke: "none", data: data, dataKey: "value", nameKey: "name", fill: "currentColor", innerRadius: config.innerRadius, outerRadius: config.outerRadius })] }) }));
 };
+const PieChartXxs = (props) => jsxRuntime.jsx(PieChart, { ...props, size: "xxs" });
+const PieChartXs = (props) => jsxRuntime.jsx(PieChart, { ...props, size: "xs" });
+const PieChartSm = (props) => jsxRuntime.jsx(PieChart, { ...props, size: "sm" });
+const PieChartMd = (props) => jsxRuntime.jsx(PieChart, { ...props, size: "md" });
+const PieChartLg = (props) => jsxRuntime.jsx(PieChart, { ...props, size: "lg" });
 
-exports.ChartActiveDot = ChartActiveDot;
-exports.ChartLegendContent = ChartLegendContent;
-exports.ChartTooltipContent = ChartTooltipContent;
-exports.selectEvenlySpacedItems = selectEvenlySpacedItems;
+exports.PieChart = PieChart;
+exports.PieChartLg = PieChartLg;
+exports.PieChartMd = PieChartMd;
+exports.PieChartSm = PieChartSm;
+exports.PieChartXs = PieChartXs;
+exports.PieChartXxs = PieChartXxs;
 //# sourceMappingURL=pie-chart.cjs.map

package/dist/components/organisms/Charts/components/pie-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.cjs","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"sourcesContent":[null],"names":["_jsx","cx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"pie-chart.cjs","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"sourcesContent":[null],"names":["_jsx","ResponsiveContainer","cx","_jsxs","RechartsPieChart","Legend","ChartLegendContent","Tooltip","ChartTooltipContent","Pie"],"mappings":"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"}

package/dist/components/organisms/Charts/components/pie-chart.d.ts

@@ -1,38 +1,50 @@
-import type { TooltipProps } from 'recharts';
-import type { Props as LegendContentProps } from 'recharts/types/component/DefaultLegendContent';
-import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
-import type { Props as DotProps } from 'recharts/types/shape/Dot';
-/**
- * Selects evenly spaced items from an array. Used for rendering
- * certain number of x-axis labels.
- * @param dataArray - The array of items to select from.
- * @param count - The number of items to select.
- * @returns The selected items.
- */
-export declare const selectEvenlySpacedItems: <T extends readonly unknown[]>(dataArray: T, count: number) => Array<T[number]>;
-/**
- * Renders the legend content for a chart.
- * @param reversed - Whether to reverse the payload.
- * @param payload - The payload of the legend.
- * @param align - The alignment of the legend.
- * @param layout - The layout of the legend.
- * @param className - The class name of the legend.
- * @returns The legend content.
- */
-export declare const ChartLegendContent: ({ reversed, payload, align, layout, className, }: LegendContentProps & {
-    reversed?: boolean;
+type ChartValueFormatter = (value: any) => string;
+export interface PieChartDataItem {
+    /** Display name shown in the legend and tooltip. */
+    name: string;
+    /** Numeric value determining this slice's share of the whole. */
+    value: number;
+    /** Tailwind `text-*` utility controlling the slice colour. */
     className?: string;
-}) => import("react").JSX.Element;
-interface ChartTooltipContentProps extends TooltipProps<ValueType, NameType> {
-    isRadialChart?: boolean;
-    isPieChart?: boolean;
-    label?: string;
-    payload?: any;
 }
-export declare const ChartTooltipContent: ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }: ChartTooltipContentProps) => import("react").JSX.Element | null;
-interface ChartActiveDotProps extends DotProps {
-    payload?: any;
+/** Preset radii and footprint for the pie. */
+export type PieChartSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+export interface PieChartProps {
+    /** Slices to plot. Each slice's share is its `value` over the total. */
+    data?: PieChartDataItem[];
+    /**
+     * Preset that controls the chart height and inner/outer radii.
+     * @default 'xs'
+     */
+    size?: PieChartSize;
+    /**
+     * Whether to render the legend.
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to render the tooltip on hover.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /** Formats the tooltip value. Defaults to the raw value. */
+    valueFormatter?: ChartValueFormatter;
+    /** Additional class name for the chart container. */
+    className?: string;
 }
-export declare const ChartActiveDot: ({ cx, cy }: ChartActiveDotProps) => import("react").JSX.Element;
+/**
+ * Plots each row as a slice of a donut, sized by its share of the total — here,
+ * five tokenised series. Pick a `size` preset for the footprint and colour each
+ * slice with a semantic `text-utility-*` token. Use it to show the composition
+ * of a whole when a handful of parts matter.
+ *
+ * @summary donut showing each part's share of a whole
+ */
+export declare const PieChart: ({ data, size, showLegend, showTooltip, valueFormatter, className }: PieChartProps) => import("react").JSX.Element;
+export declare const PieChartXxs: (props: Omit<PieChartProps, "size">) => import("react").JSX.Element;
+export declare const PieChartXs: (props: Omit<PieChartProps, "size">) => import("react").JSX.Element;
+export declare const PieChartSm: (props: Omit<PieChartProps, "size">) => import("react").JSX.Element;
+export declare const PieChartMd: (props: Omit<PieChartProps, "size">) => import("react").JSX.Element;
+export declare const PieChartLg: (props: Omit<PieChartProps, "size">) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=pie-chart.d.ts.map

package/dist/components/organisms/Charts/components/pie-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,SAAS,OAAO,EAAE,EAAE,WAAW,CAAC,EAAE,OAAO,MAAM,KAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAqBlH,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,kDAMhC,kBAAkB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gCA2BjE,CAAC;AAEF,UAAU,wBAAyB,SAAQ,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,GAAI,kFAAkF,wBAAwB,uCAwC7I,CAAC;AAEF,UAAU,mBAAoB,SAAQ,QAAQ;IAG5C,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,cAAc,GAAI,YAAoB,mBAAmB,gCASrE,CAAC"}
+{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,8CAA8C;AAC9C,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,oEAAuG,aAAa,gCAyB5I,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,gCAAuC,CAAC;AACtG,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,gCAAsC,CAAC;AACpG,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,gCAAsC,CAAC;AACpG,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,gCAAsC,CAAC;AACpG,eAAO,MAAM,UAAU,GAAI,OAAO,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,gCAAsC,CAAC"}

package/dist/components/organisms/Charts/components/pie-chart.js

@@ -1,75 +1,39 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
+import { ResponsiveContainer, PieChart as PieChart$1, Legend, Tooltip, Pie } from 'recharts';
+import { ChartLegendContent, ChartTooltipContent } from './charts-base.js';
 
-/**
- * Selects evenly spaced items from an array. Used for rendering
- * certain number of x-axis labels.
- * @param dataArray - The array of items to select from.
- * @param count - The number of items to select.
- * @returns The selected items.
- */
-const selectEvenlySpacedItems = (dataArray, count) => {
-    if (!dataArray || dataArray.length === 0) {
-        return [];
-    }
-    const selectedItems = [];
-    if (dataArray.length === 1) {
-        for (let i = 0; i < count; i++) {
-            selectedItems.push(dataArray[0]);
-        }
-        return selectedItems;
-    }
-    for (let i = 0; i < count; i++) {
-        const targetIndex = Math.round((i * (dataArray.length - 1)) / (count - 1));
-        const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));
-        selectedItems.push(dataArray[boundedIndex]);
-    }
-    return selectedItems;
+const defaultData = [
+    { name: 'Series 1', value: 200, className: 'text-utility-brand-600' },
+    { name: 'Series 2', value: 350, className: 'text-utility-brand-500' },
+    { name: 'Series 3', value: 100, className: 'text-utility-brand-400' },
+    { name: 'Series 4', value: 120, className: 'text-utility-brand-300' },
+    { name: 'Series 5', value: 230, className: 'text-utility-neutral-200' },
+];
+const sizeConfig = {
+    xxs: { height: 120, maxWidthClassName: 'max-w-52.5', innerRadius: 30, outerRadius: 60 },
+    xs: { height: 160, maxWidthClassName: 'max-w-62.5', innerRadius: 40, outerRadius: 80 },
+    sm: { height: 200, maxWidthClassName: 'max-w-72.5', innerRadius: 50, outerRadius: 100 },
+    md: { height: 240, maxWidthClassName: 'max-w-96', innerRadius: 60, outerRadius: 120 },
+    lg: { height: 280, maxWidthClassName: 'max-w-96', innerRadius: 70, outerRadius: 140 },
 };
 /**
- * Renders the legend content for a chart.
- * @param reversed - Whether to reverse the payload.
- * @param payload - The payload of the legend.
- * @param align - The alignment of the legend.
- * @param layout - The layout of the legend.
- * @param className - The class name of the legend.
- * @returns The legend content.
+ * Plots each row as a slice of a donut, sized by its share of the total — here,
+ * five tokenised series. Pick a `size` preset for the footprint and colour each
+ * slice with a semantic `text-utility-*` token. Use it to show the composition
+ * of a whole when a handful of parts matter.
+ *
+ * @summary donut showing each part's share of a whole
  */
-const ChartLegendContent = ({ reversed, payload, align, layout, className, }) => {
-    payload = reversed ? [...(payload ?? [])].reverse() : payload;
-    return (jsx("ul", { className: cx('flex', layout === 'vertical'
-            ? `flex-col gap-1 pl-4 ${align === 'center' ? 'items-center' : align === 'right' ? 'items-start' : 'items-start'}`
-            : `flex-row gap-3 ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'}`, className), children: payload?.map((entry, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the payload is an array of objects
-        jsxs("li", { className: "flex items-center gap-2 text-sm text-tertiary", children: [jsx("span", { className: cx('block size-2 rounded-full bg-current ring-[0.5px] ring-black/10 ring-inset', entry.payload?.className) }), entry.value] }, index))) }));
-};
-const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }) => {
-    const canRender = active && payload && payload.length;
-    if (!canRender) {
-        return null;
-    }
-    const isSingleDataPoint = payload.length === 1;
-    // If it's a single data point, we use the value as the title and
-    // the name as the secondary title.
-    let title = isSingleDataPoint ? (isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value) : label;
-    let secondaryTitle = isSingleDataPoint ? (isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label) : payload;
-    title =
-        isSingleDataPoint && formatter
-            ? formatter(title, payload?.[0].name || label, payload[0], 0, payload)
-            : labelFormatter
-                ? labelFormatter(title, payload)
-                : title;
-    secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
-    return (jsxs("div", { className: "flex flex-col gap-0.5 rounded-lg bg-primary-solid px-3 py-2 shadow-lg", children: [jsx("p", { className: "text-xs font-semibold text-white", children: title }), !secondaryTitle ? null : Array.isArray(secondaryTitle) ? (jsx("div", { children: secondaryTitle.map((entry, index) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the secondaryTitle is an array of objects
-                jsx("p", { className: cx('text-xs text-tooltip-supporting-text'), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, index))) })) : (jsx("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle }))] }));
-};
-const ChartActiveDot = ({ cx = 0, cy = 0 }) => {
-    const size = 12;
-    return (
-    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
-    jsx("svg", { x: cx - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "6", className: "fill-bg-primary stroke-utility-brand-600", strokeWidth: "2" }) }));
+const PieChart = ({ data = defaultData, size = 'xs', showLegend = true, showTooltip = true, valueFormatter, className }) => {
+    const config = sizeConfig[size];
+    return (jsx(ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, height: config.height, className: cx(config.maxWidthClassName, className), children: jsxs(PieChart$1, { className: "text-tertiary [&_.recharts-text]:text-xs", margin: { left: 0, right: 0, top: 0, bottom: 0 }, children: [showLegend && jsx(Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: jsx(ChartLegendContent, {}) }), showTooltip && jsx(Tooltip, { content: jsx(ChartTooltipContent, { isPieChart: true }), formatter: valueFormatter }), jsx(Pie, { isAnimationActive: false, startAngle: -270, endAngle: -630, stroke: "none", data: data, dataKey: "value", nameKey: "name", fill: "currentColor", innerRadius: config.innerRadius, outerRadius: config.outerRadius })] }) }));
 };
+const PieChartXxs = (props) => jsx(PieChart, { ...props, size: "xxs" });
+const PieChartXs = (props) => jsx(PieChart, { ...props, size: "xs" });
+const PieChartSm = (props) => jsx(PieChart, { ...props, size: "sm" });
+const PieChartMd = (props) => jsx(PieChart, { ...props, size: "md" });
+const PieChartLg = (props) => jsx(PieChart, { ...props, size: "lg" });
 
-export { ChartActiveDot, ChartLegendContent, ChartTooltipContent, selectEvenlySpacedItems };
+export { PieChart, PieChartLg, PieChartMd, PieChartSm, PieChartXs, PieChartXxs };
 //# sourceMappingURL=pie-chart.js.map

package/dist/components/organisms/Charts/components/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.js","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"pie-chart.js","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","RechartsPieChart"],"mappings":"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"}