@uselets/ui 1.9.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/area-chart.d.ts +3 -1
- package/dist/components/area-chart.js +1 -1
- package/dist/components/area-chart.js.map +1 -1
- package/dist/components/bar-chart.d.ts +9 -3
- package/dist/components/bar-chart.js +1 -1
- package/dist/components/bar-chart.js.map +1 -1
- package/dist/components/chart.js +2 -2
- package/dist/components/chart.js.map +1 -1
- package/dist/components/pie-chart.js +1 -1
- package/dist/components/pie-chart.js.map +1 -1
- package/dist/components/sidebar.d.ts +1 -1
- package/dist/components/timeline.d.ts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/skills/uselets-ui/references/component-catalog.md +3 -3
- package/package.json +1 -1
- package/skills/uselets-ui/references/component-catalog.md +3 -3
package/README.md
CHANGED
|
@@ -340,7 +340,7 @@ You can import from the package root (`@uselets/ui`) or by subpath (`@uselets/ui
|
|
|
340
340
|
| `calendar` | `Calendar`, `CalendarDayButton` | Also exports the `DateRange` type. Weekends render with destructive text, week numbers are low-emphasis, and selected single/range endpoints use the `primary` palette with a subtle primary range fill. |
|
|
341
341
|
| `date-range-picker` | `DateRangePicker`, `DateRangePickerTrigger`, `DateRangePickerValue`, `DateRangePickerContent`, `DateRangePickerPresets`, `DateRangePickerPreset`, `DateRangePickerCalendar`, `DateRangePickerDateFields`, `DateRangePickerActions`, `DateRangePickerApply`, `DateRangePickerReset` | Compound popover picker backed by `Calendar` range mode. Draft edits from fixed presets, relative-day inputs, date inputs, and calendar stay in sync until `Apply`; reset/clear emits `null` through `onValueChange`. |
|
|
342
342
|
| `card` | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | `Card` supports `size: 'sm' \| 'md' \| 'lg'` (default: `md`). |
|
|
343
|
-
| `area-chart` / `bar-chart` / `pie-chart` / `donut-chart` | `AreaChart`, `BarChart`, `PieChart`, `DonutChart` (each with their series/datum types) | Recharts-backed charts with a mantine-shaped API. Each series/datum accepts `color` (raw CSS) or `colorKey: ChartColorKey` (`'primary' \| 'brand' \| 'gray' \| 'zinc' \| 'red' \| 'yellow' \| 'green' \| 'blue' \| 'indigo' \| 'pink'`) which resolves to `var(--{key}-500)`. Pass `areaProps` / `barProps` / `pieProps` to forward props (e.g. `onClick`, `cursor`) to the underlying recharts primitive. `PieChart` / `DonutChart` add `strokeColor` (default: `var(--background)`) alongside `strokeWidth` so the segment gaps are now visible by default. Re-exports `ChartColorKey`, `CHART_COLOR_KEYS`, `DEFAULT_CHART_PALETTE`, and `resolveChartColor` from `@uselets/ui/chart` for custom compositions. |
|
|
343
|
+
| `area-chart` / `bar-chart` / `pie-chart` / `donut-chart` | `AreaChart`, `BarChart`, `PieChart`, `DonutChart` (each with their series/datum types) | Recharts-backed charts with a mantine-shaped API. Each series/datum accepts `color` (raw CSS) or `colorKey: ChartColorKey` (`'primary' \| 'brand' \| 'gray' \| 'zinc' \| 'red' \| 'yellow' \| 'green' \| 'blue' \| 'indigo' \| 'pink'`) which resolves to `var(--{key}-500)`. Series/datum `name` is free-form and may contain spaces or non-ASCII characters. `BarChart` also accepts `color` / `colorKey` on each `data` row (`BarChartDatum`); when set, the row color wins over the series color and applies to every bar in that row. Pass `areaProps` / `barProps` / `pieProps` to forward props (e.g. `onClick`, `cursor`) to the underlying recharts series primitive (`<Area>` / `<Bar>` / `<Pie>`); pass `areaChartProps` / `barChartProps` to forward props (e.g. `margin`, `barCategoryGap`, `onClick`) to the wrapping recharts `<AreaChart>` / `<BarChart>`. `PieChart` / `DonutChart` add `strokeColor` (default: `var(--background)`) alongside `strokeWidth` so the segment gaps are now visible by default. Re-exports `ChartColorKey`, `CHART_COLOR_KEYS`, `DEFAULT_CHART_PALETTE`, and `resolveChartColor` from `@uselets/ui/chart` for custom compositions. |
|
|
344
344
|
| `checkbox` | `Checkbox` | `Checkbox` supports `size: 'sm' \| 'md' \| 'lg'` (default: `md`), `color: UIColor` (default: `primary`), `label?: React.ReactNode`, and `labelProps` for the composed `Label`. When `label` is provided without `id`, it generates an id and wires `htmlFor` automatically. Label text follows checkbox size: `sm` 12px, `md` 14px, `lg` 20px. |
|
|
345
345
|
| `code` | `Code` | Inline code primitive rendered as `<code>`. |
|
|
346
346
|
| `combobox` | `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor` | `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs. |
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { n as __name } from "../rolldown-runtime-Bdj-bS2b.js";
|
|
2
2
|
import { c as ChartLegendContentProps, m as ChartTooltipContentProps, n as ChartColorKey } from "../chart-lqgodZYQ.js";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import { Area } from "recharts";
|
|
4
|
+
import { Area, AreaChart as AreaChart$1 } from "recharts";
|
|
5
5
|
|
|
6
6
|
//#region src/components/area-chart.d.ts
|
|
7
7
|
type AreaChartSeries = {
|
|
@@ -33,6 +33,7 @@ type AreaChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {
|
|
|
33
33
|
tooltipProps?: ChartTooltipContentProps;
|
|
34
34
|
legendProps?: ChartLegendContentProps;
|
|
35
35
|
areaProps?: Partial<React.ComponentProps<typeof Area>>;
|
|
36
|
+
areaChartProps?: Omit<React.ComponentProps<typeof AreaChart$1>, 'data' | 'stackOffset'>;
|
|
36
37
|
};
|
|
37
38
|
declare function AreaChart({
|
|
38
39
|
className,
|
|
@@ -55,6 +56,7 @@ declare function AreaChart({
|
|
|
55
56
|
tooltipProps,
|
|
56
57
|
legendProps,
|
|
57
58
|
areaProps,
|
|
59
|
+
areaChartProps,
|
|
58
60
|
...props
|
|
59
61
|
}: AreaChartProps): React.JSX.Element;
|
|
60
62
|
//#endregion
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"react";import{Area as l,AreaChart as u,CartesianGrid as d,Legend as f,Tooltip as p,XAxis as m,YAxis as h}from"recharts";function buildConfig(e){return e.reduce((e,t,n)=>(e[t.name]={label:t.label??t.name,color:t.color??a(t.colorKey)??i[n%i.length]},e),{})}function AreaChart({className:i,data:a,series:g,dataKey:_,type:v=`default`,curveType:y=`monotone`,withXAxis:b=!0,withYAxis:x=!0,gridAxis:S=`x`,withDots:C=!1,withTooltip:w=!0,withLegend:T=!1,connectNulls:E,unit:D,fillOpacity:O=.2,strokeWidth:k=2,animationDuration:A,tooltipProps:j,legendProps:M,areaProps:N,...
|
|
1
|
+
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"react";import{Area as l,AreaChart as u,CartesianGrid as d,Legend as f,Tooltip as p,XAxis as m,YAxis as h}from"recharts";function buildConfig(e){return e.reduce((e,t,n)=>(e[t.name]={label:t.label??t.name,color:t.color??a(t.colorKey)??i[n%i.length]},e),{})}function AreaChart({className:i,data:a,series:g,dataKey:_,type:v=`default`,curveType:y=`monotone`,withXAxis:b=!0,withYAxis:x=!0,gridAxis:S=`x`,withDots:C=!1,withTooltip:w=!0,withLegend:T=!1,connectNulls:E,unit:D,fillOpacity:O=.2,strokeWidth:k=2,animationDuration:A,tooltipProps:j,legendProps:M,areaProps:N,areaChartProps:P,...F}){let I=c.useMemo(()=>buildConfig(g),[g]),L=v==="default"?void 0:`stack`,R=v===`percent`?`expand`:v===`split`?`silhouette`:void 0;return o(t,{"data-slot":`area-chart`,className:e(`w-full`,i),config:I,...F,children:s(u,{...P,data:a,stackOffset:R,children:[S!==`none`&&o(d,{vertical:S===`y`||S===`xy`,horizontal:S===`x`||S===`xy`}),b&&o(m,{dataKey:_,tickLine:!1,axisLine:!1,tickMargin:8}),x&&o(h,{tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:v===`percent`?e=>`${Math.round(e*100)}%`:D?e=>`${e}${D}`:void 0}),w&&o(p,{cursor:!1,content:o(r,{...j})}),T&&o(f,{content:o(n,{...M})}),g.map(e=>o(l,{type:y,dataKey:e.name,stackId:L,stroke:I[e.name]?.color,fill:I[e.name]?.color,fillOpacity:O,strokeWidth:k,dot:C,connectNulls:E,animationDuration:A,isAnimationActive:A!==0,...N},e.name))]})})}export{AreaChart};
|
|
2
2
|
//# sourceMappingURL=area-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"area-chart.js","names":["RechartsAreaChart"],"sources":["../../src/components/area-chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Area, CartesianGrid, Legend, AreaChart as RechartsAreaChart, Tooltip, XAxis, YAxis } from 'recharts'\n\nimport { cn } from '../lib/utils'\nimport {\n type ChartColorKey,\n type ChartConfig,\n ChartContainer,\n ChartLegendContent,\n type ChartLegendContentProps,\n ChartTooltipContent,\n type ChartTooltipContentProps,\n DEFAULT_CHART_PALETTE,\n resolveChartColor\n} from './chart'\n\nexport type AreaChartSeries = {\n name: string\n label?: string\n color?: string\n colorKey?: ChartColorKey\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split'\nexport type AreaChartCurveType = 'linear' | 'monotone' | 'natural' | 'step' | 'bump' | 'stepAfter' | 'stepBefore'\nexport type AreaChartGridAxis = 'none' | 'x' | 'y' | 'xy'\n\nexport type AreaChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {\n data: Array<Record<string, unknown>>\n series: AreaChartSeries[]\n dataKey: string\n type?: AreaChartType\n curveType?: AreaChartCurveType\n withXAxis?: boolean\n withYAxis?: boolean\n gridAxis?: AreaChartGridAxis\n withDots?: boolean\n withTooltip?: boolean\n withLegend?: boolean\n connectNulls?: boolean\n unit?: string\n fillOpacity?: number\n strokeWidth?: number\n animationDuration?: number\n tooltipProps?: ChartTooltipContentProps\n legendProps?: ChartLegendContentProps\n areaProps?: Partial<React.ComponentProps<typeof Area>>\n}\n\nfunction buildConfig(series: AreaChartSeries[]): ChartConfig {\n return series.reduce<ChartConfig>((acc, item, index) => {\n acc[item.name] = {\n label: item.label ?? item.name,\n color:\n item.color ?? resolveChartColor(item.colorKey) ?? DEFAULT_CHART_PALETTE[index % DEFAULT_CHART_PALETTE.length]\n }\n return acc\n }, {})\n}\n\nfunction AreaChart({\n className,\n data,\n series,\n dataKey,\n type = 'default',\n curveType = 'monotone',\n withXAxis = true,\n withYAxis = true,\n gridAxis = 'x',\n withDots = false,\n withTooltip = true,\n withLegend = false,\n connectNulls,\n unit,\n fillOpacity = 0.2,\n strokeWidth = 2,\n animationDuration,\n tooltipProps,\n legendProps,\n areaProps,\n ...props\n}: AreaChartProps) {\n const config = React.useMemo(() => buildConfig(series), [series])\n const stackId = type === 'default' ? undefined : 'stack'\n const stackOffset = type === 'percent' ? 'expand' : type === 'split' ? 'silhouette' : undefined\n\n return (\n <ChartContainer data-slot=\"area-chart\" className={cn('w-full', className)} config={config} {...props}>\n <RechartsAreaChart data={data} stackOffset={stackOffset}>\n {gridAxis !== 'none' && (\n <CartesianGrid\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n />\n )}\n {withXAxis && <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />}\n {withYAxis && (\n <YAxis\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={\n type === 'percent'\n ? (value: number) => `${Math.round(value * 100)}%`\n : unit\n ? (value) => `${value}${unit}`\n : undefined\n }\n />\n )}\n {withTooltip && <Tooltip cursor={false} content={<ChartTooltipContent {...tooltipProps} />} />}\n {withLegend && <Legend content={<ChartLegendContent {...legendProps} />} />}\n {series.map((item) => (\n <Area\n key={item.name}\n type={curveType}\n dataKey={item.name}\n stackId={stackId}\n stroke={
|
|
1
|
+
{"version":3,"file":"area-chart.js","names":["RechartsAreaChart"],"sources":["../../src/components/area-chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Area, CartesianGrid, Legend, AreaChart as RechartsAreaChart, Tooltip, XAxis, YAxis } from 'recharts'\n\nimport { cn } from '../lib/utils'\nimport {\n type ChartColorKey,\n type ChartConfig,\n ChartContainer,\n ChartLegendContent,\n type ChartLegendContentProps,\n ChartTooltipContent,\n type ChartTooltipContentProps,\n DEFAULT_CHART_PALETTE,\n resolveChartColor\n} from './chart'\n\nexport type AreaChartSeries = {\n name: string\n label?: string\n color?: string\n colorKey?: ChartColorKey\n}\n\nexport type AreaChartType = 'default' | 'stacked' | 'percent' | 'split'\nexport type AreaChartCurveType = 'linear' | 'monotone' | 'natural' | 'step' | 'bump' | 'stepAfter' | 'stepBefore'\nexport type AreaChartGridAxis = 'none' | 'x' | 'y' | 'xy'\n\nexport type AreaChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {\n data: Array<Record<string, unknown>>\n series: AreaChartSeries[]\n dataKey: string\n type?: AreaChartType\n curveType?: AreaChartCurveType\n withXAxis?: boolean\n withYAxis?: boolean\n gridAxis?: AreaChartGridAxis\n withDots?: boolean\n withTooltip?: boolean\n withLegend?: boolean\n connectNulls?: boolean\n unit?: string\n fillOpacity?: number\n strokeWidth?: number\n animationDuration?: number\n tooltipProps?: ChartTooltipContentProps\n legendProps?: ChartLegendContentProps\n areaProps?: Partial<React.ComponentProps<typeof Area>>\n areaChartProps?: Omit<React.ComponentProps<typeof RechartsAreaChart>, 'data' | 'stackOffset'>\n}\n\nfunction buildConfig(series: AreaChartSeries[]): ChartConfig {\n return series.reduce<ChartConfig>((acc, item, index) => {\n acc[item.name] = {\n label: item.label ?? item.name,\n color:\n item.color ?? resolveChartColor(item.colorKey) ?? DEFAULT_CHART_PALETTE[index % DEFAULT_CHART_PALETTE.length]\n }\n return acc\n }, {})\n}\n\nfunction AreaChart({\n className,\n data,\n series,\n dataKey,\n type = 'default',\n curveType = 'monotone',\n withXAxis = true,\n withYAxis = true,\n gridAxis = 'x',\n withDots = false,\n withTooltip = true,\n withLegend = false,\n connectNulls,\n unit,\n fillOpacity = 0.2,\n strokeWidth = 2,\n animationDuration,\n tooltipProps,\n legendProps,\n areaProps,\n areaChartProps,\n ...props\n}: AreaChartProps) {\n const config = React.useMemo(() => buildConfig(series), [series])\n const stackId = type === 'default' ? undefined : 'stack'\n const stackOffset = type === 'percent' ? 'expand' : type === 'split' ? 'silhouette' : undefined\n\n return (\n <ChartContainer data-slot=\"area-chart\" className={cn('w-full', className)} config={config} {...props}>\n <RechartsAreaChart {...areaChartProps} data={data} stackOffset={stackOffset}>\n {gridAxis !== 'none' && (\n <CartesianGrid\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n />\n )}\n {withXAxis && <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />}\n {withYAxis && (\n <YAxis\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={\n type === 'percent'\n ? (value: number) => `${Math.round(value * 100)}%`\n : unit\n ? (value) => `${value}${unit}`\n : undefined\n }\n />\n )}\n {withTooltip && <Tooltip cursor={false} content={<ChartTooltipContent {...tooltipProps} />} />}\n {withLegend && <Legend content={<ChartLegendContent {...legendProps} />} />}\n {series.map((item) => (\n <Area\n key={item.name}\n type={curveType}\n dataKey={item.name}\n stackId={stackId}\n stroke={config[item.name]?.color}\n fill={config[item.name]?.color}\n fillOpacity={fillOpacity}\n strokeWidth={strokeWidth}\n dot={withDots}\n connectNulls={connectNulls}\n animationDuration={animationDuration}\n isAnimationActive={animationDuration !== 0}\n {...areaProps}\n />\n ))}\n </RechartsAreaChart>\n </ChartContainer>\n )\n}\n\nexport { AreaChart }\n"],"mappings":"uZAmDA,SAAS,YAAY,EAAwC,CAC3D,OAAO,EAAO,QAAqB,EAAK,EAAM,KAC5C,EAAI,EAAK,MAAQ,CACf,MAAO,EAAK,OAAS,EAAK,KAC1B,MACE,EAAK,OAAS,EAAkB,EAAK,QAAQ,GAAK,EAAsB,EAAQ,EAAsB,OAC1G,EACO,GACN,CAAC,CAAC,CACP,CAEA,SAAS,UAAU,CACjB,YACA,OACA,SACA,UACA,OAAO,UACP,YAAY,WACZ,YAAY,GACZ,YAAY,GACZ,WAAW,IACX,WAAW,GACX,cAAc,GACd,aAAa,GACb,eACA,OACA,cAAc,GACd,cAAc,EACd,oBACA,eACA,cACA,YACA,iBACA,GAAG,GACc,CACjB,IAAM,EAAS,EAAM,YAAc,YAAY,CAAM,EAAG,CAAC,CAAM,CAAC,EAC1D,EAAU,IAAS,UAAY,IAAA,GAAY,QAC3C,EAAc,IAAS,UAAY,SAAW,IAAS,QAAU,aAAe,IAAA,GAEtF,OACE,EAAC,EAAD,CAAgB,YAAU,aAAa,UAAW,EAAG,SAAU,CAAS,EAAW,SAAQ,GAAI,WAC7F,EAACA,EAAD,CAAmB,GAAI,EAAsB,OAAmB,uBAAhE,CACG,IAAa,QACZ,EAAC,EAAD,CACE,SAAU,IAAa,KAAO,IAAa,KAC3C,WAAY,IAAa,KAAO,IAAa,IAC9C,CAAA,EAEF,GAAa,EAAC,EAAD,CAAgB,UAAS,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,EACxF,GACC,EAAC,EAAD,CACE,SAAU,GACV,SAAU,GACV,WAAY,EACZ,cACE,IAAS,UACJ,GAAkB,GAAG,KAAK,MAAM,EAAQ,GAAG,EAAE,GAC9C,EACG,GAAU,GAAG,IAAQ,IACtB,IAAA,EAET,CAAA,EAEF,GAAe,EAAC,EAAD,CAAS,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,GAAI,CAAe,CAAA,CAAI,CAAA,EAC5F,GAAc,EAAC,EAAD,CAAQ,QAAS,EAAC,EAAD,CAAoB,GAAI,CAAc,CAAA,CAAI,CAAA,EACzE,EAAO,IAAK,GACX,EAAC,EAAD,CAEE,KAAM,EACN,QAAS,EAAK,KACL,UACT,OAAQ,EAAO,EAAK,KAAK,EAAE,MAC3B,KAAM,EAAO,EAAK,KAAK,EAAE,MACZ,cACA,cACb,IAAK,EACS,eACK,oBACnB,kBAAmB,IAAsB,EACzC,GAAI,CACL,EAbM,EAAK,IAaX,CACF,CACgB,GACL,CAAA,CAEpB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { n as __name } from "../rolldown-runtime-Bdj-bS2b.js";
|
|
2
2
|
import { c as ChartLegendContentProps, m as ChartTooltipContentProps, n as ChartColorKey } from "../chart-lqgodZYQ.js";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import { Bar } from "recharts";
|
|
4
|
+
import { Bar, BarChart as BarChart$1 } from "recharts";
|
|
5
5
|
|
|
6
6
|
//#region src/components/bar-chart.d.ts
|
|
7
7
|
type BarChartSeries = {
|
|
@@ -10,11 +10,15 @@ type BarChartSeries = {
|
|
|
10
10
|
color?: string;
|
|
11
11
|
colorKey?: ChartColorKey;
|
|
12
12
|
};
|
|
13
|
+
type BarChartDatum = Record<string, unknown> & {
|
|
14
|
+
color?: string;
|
|
15
|
+
colorKey?: ChartColorKey;
|
|
16
|
+
};
|
|
13
17
|
type BarChartType = 'default' | 'stacked' | 'percent';
|
|
14
18
|
type BarChartOrientation = 'vertical' | 'horizontal';
|
|
15
19
|
type BarChartGridAxis = 'none' | 'x' | 'y' | 'xy';
|
|
16
20
|
type BarChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {
|
|
17
|
-
data:
|
|
21
|
+
data: BarChartDatum[];
|
|
18
22
|
series: BarChartSeries[];
|
|
19
23
|
dataKey: string;
|
|
20
24
|
type?: BarChartType;
|
|
@@ -31,6 +35,7 @@ type BarChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {
|
|
|
31
35
|
tooltipProps?: ChartTooltipContentProps;
|
|
32
36
|
legendProps?: ChartLegendContentProps;
|
|
33
37
|
barProps?: Partial<React.ComponentProps<typeof Bar>>;
|
|
38
|
+
barChartProps?: Omit<React.ComponentProps<typeof BarChart$1>, 'data' | 'layout' | 'stackOffset'>;
|
|
34
39
|
};
|
|
35
40
|
declare function BarChart({
|
|
36
41
|
className,
|
|
@@ -51,8 +56,9 @@ declare function BarChart({
|
|
|
51
56
|
tooltipProps,
|
|
52
57
|
legendProps,
|
|
53
58
|
barProps,
|
|
59
|
+
barChartProps,
|
|
54
60
|
...props
|
|
55
61
|
}: BarChartProps): React.JSX.Element;
|
|
56
62
|
//#endregion
|
|
57
|
-
export { BarChart, BarChartGridAxis, BarChartOrientation, BarChartProps, BarChartSeries, BarChartType };
|
|
63
|
+
export { BarChart, BarChartDatum, BarChartGridAxis, BarChartOrientation, BarChartProps, BarChartSeries, BarChartType };
|
|
58
64
|
//# sourceMappingURL=bar-chart.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"react";import{Bar as l,BarChart as u,CartesianGrid as d,Legend as f,
|
|
1
|
+
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"react";import{Bar as l,BarChart as u,CartesianGrid as d,Legend as f,Rectangle as p,Tooltip as m,XAxis as h,YAxis as g}from"recharts";function buildConfig(e){return e.reduce((e,t,n)=>(e[t.name]={label:t.label??t.name,color:t.color??a(t.colorKey)??i[n%i.length]},e),{})}function BarChart({className:i,data:_,series:v,dataKey:y,type:b=`default`,orientation:x=`vertical`,withXAxis:S=!0,withYAxis:C=!0,gridAxis:w=`x`,withTooltip:T=!0,withLegend:E=!1,barSize:D,radius:O=4,unit:k,animationDuration:A,tooltipProps:j,legendProps:M,barProps:N,barChartProps:P,...F}){let I=c.useMemo(()=>buildConfig(v),[v]),L=b==="default"?void 0:`stack`,R=b===`percent`?`expand`:void 0,z=x===`horizontal`,B={dataKey:y,tickLine:!1,axisLine:!1,tickMargin:8},V=b===`percent`?e=>`${Math.round(e*100)}%`:k?e=>`${e}${k}`:void 0;return o(t,{"data-slot":`bar-chart`,className:e(`w-full`,i),config:I,...F,children:s(u,{...P,data:_,stackOffset:R,layout:z?`vertical`:`horizontal`,children:[w!==`none`&&o(d,{vertical:w===`y`||w===`xy`,horizontal:w===`x`||w===`xy`}),S&&(z?o(h,{type:`number`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:V}):o(h,{type:`category`,...B})),C&&(z?o(g,{type:`category`,...B}):o(g,{type:`number`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:V})),T&&o(m,{cursor:!1,content:o(r,{...j})}),E&&o(f,{content:o(n,{...M})}),v.map(e=>{let t=I[e.name]?.color;return o(l,{dataKey:e.name,stackId:L,fill:t,radius:O,barSize:D,animationDuration:A,isAnimationActive:A!==0,shape:e=>{let n=e.payload,r=n?.color??a(n?.colorKey)??t;return o(p,{...e,fill:r})},...N},e.name)})]})})}export{BarChart};
|
|
2
2
|
//# sourceMappingURL=bar-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-chart.js","names":["RechartsBarChart"],"sources":["../../src/components/bar-chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Bar, CartesianGrid, Legend, BarChart as RechartsBarChart, Tooltip, XAxis, YAxis } from 'recharts'\n\nimport { cn } from '../lib/utils'\nimport {\n type ChartColorKey,\n type ChartConfig,\n ChartContainer,\n ChartLegendContent,\n type ChartLegendContentProps,\n ChartTooltipContent,\n type ChartTooltipContentProps,\n DEFAULT_CHART_PALETTE,\n resolveChartColor\n} from './chart'\n\nexport type BarChartSeries = {\n name: string\n label?: string\n color?: string\n colorKey?: ChartColorKey\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent'\nexport type BarChartOrientation = 'vertical' | 'horizontal'\nexport type BarChartGridAxis = 'none' | 'x' | 'y' | 'xy'\n\nexport type BarChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {\n data:
|
|
1
|
+
{"version":3,"file":"bar-chart.js","names":["RechartsBarChart"],"sources":["../../src/components/bar-chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Bar, CartesianGrid, Legend, BarChart as RechartsBarChart, Rectangle, Tooltip, XAxis, YAxis } from 'recharts'\n\nimport { cn } from '../lib/utils'\nimport {\n type ChartColorKey,\n type ChartConfig,\n ChartContainer,\n ChartLegendContent,\n type ChartLegendContentProps,\n ChartTooltipContent,\n type ChartTooltipContentProps,\n DEFAULT_CHART_PALETTE,\n resolveChartColor\n} from './chart'\n\nexport type BarChartSeries = {\n name: string\n label?: string\n color?: string\n colorKey?: ChartColorKey\n}\n\nexport type BarChartDatum = Record<string, unknown> & {\n color?: string\n colorKey?: ChartColorKey\n}\n\nexport type BarChartType = 'default' | 'stacked' | 'percent'\nexport type BarChartOrientation = 'vertical' | 'horizontal'\nexport type BarChartGridAxis = 'none' | 'x' | 'y' | 'xy'\n\nexport type BarChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {\n data: BarChartDatum[]\n series: BarChartSeries[]\n dataKey: string\n type?: BarChartType\n orientation?: BarChartOrientation\n withXAxis?: boolean\n withYAxis?: boolean\n gridAxis?: BarChartGridAxis\n withTooltip?: boolean\n withLegend?: boolean\n barSize?: number\n radius?: number | [number, number, number, number]\n unit?: string\n animationDuration?: number\n tooltipProps?: ChartTooltipContentProps\n legendProps?: ChartLegendContentProps\n barProps?: Partial<React.ComponentProps<typeof Bar>>\n barChartProps?: Omit<React.ComponentProps<typeof RechartsBarChart>, 'data' | 'layout' | 'stackOffset'>\n}\n\nfunction buildConfig(series: BarChartSeries[]): ChartConfig {\n return series.reduce<ChartConfig>((acc, item, index) => {\n acc[item.name] = {\n label: item.label ?? item.name,\n color:\n item.color ?? resolveChartColor(item.colorKey) ?? DEFAULT_CHART_PALETTE[index % DEFAULT_CHART_PALETTE.length]\n }\n return acc\n }, {})\n}\n\nfunction BarChart({\n className,\n data,\n series,\n dataKey,\n type = 'default',\n orientation = 'vertical',\n withXAxis = true,\n withYAxis = true,\n gridAxis = 'x',\n withTooltip = true,\n withLegend = false,\n barSize,\n radius = 4,\n unit,\n animationDuration,\n tooltipProps,\n legendProps,\n barProps,\n barChartProps,\n ...props\n}: BarChartProps) {\n const config = React.useMemo(() => buildConfig(series), [series])\n const stackId = type === 'default' ? undefined : 'stack'\n const stackOffset = type === 'percent' ? 'expand' : undefined\n const isHorizontal = orientation === 'horizontal'\n\n const categoryAxisProps = {\n dataKey,\n tickLine: false,\n axisLine: false,\n tickMargin: 8\n } as const\n\n const valueTickFormatter =\n type === 'percent'\n ? (value: number) => `${Math.round(value * 100)}%`\n : unit\n ? (value: number) => `${value}${unit}`\n : undefined\n\n return (\n <ChartContainer data-slot=\"bar-chart\" className={cn('w-full', className)} config={config} {...props}>\n <RechartsBarChart\n {...barChartProps}\n data={data}\n stackOffset={stackOffset}\n layout={isHorizontal ? 'vertical' : 'horizontal'}\n >\n {gridAxis !== 'none' && (\n <CartesianGrid\n vertical={gridAxis === 'y' || gridAxis === 'xy'}\n horizontal={gridAxis === 'x' || gridAxis === 'xy'}\n />\n )}\n {withXAxis &&\n (isHorizontal ? (\n <XAxis type=\"number\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={valueTickFormatter} />\n ) : (\n <XAxis type=\"category\" {...categoryAxisProps} />\n ))}\n {withYAxis &&\n (isHorizontal ? (\n <YAxis type=\"category\" {...categoryAxisProps} />\n ) : (\n <YAxis type=\"number\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={valueTickFormatter} />\n ))}\n {withTooltip && <Tooltip cursor={false} content={<ChartTooltipContent {...tooltipProps} />} />}\n {withLegend && <Legend content={<ChartLegendContent {...legendProps} />} />}\n {series.map((item) => {\n const seriesColor = config[item.name]?.color\n return (\n <Bar\n key={item.name}\n dataKey={item.name}\n stackId={stackId}\n fill={seriesColor}\n radius={radius}\n barSize={barSize}\n animationDuration={animationDuration}\n isAnimationActive={animationDuration !== 0}\n shape={(shapeProps) => {\n const row = shapeProps.payload as BarChartDatum | undefined\n const fill = row?.color ?? resolveChartColor(row?.colorKey) ?? seriesColor\n return <Rectangle {...shapeProps} fill={fill} />\n }}\n {...barProps}\n />\n )\n })}\n </RechartsBarChart>\n </ChartContainer>\n )\n}\n\nexport { BarChart }\n"],"mappings":"oaAsDA,SAAS,YAAY,EAAuC,CAC1D,OAAO,EAAO,QAAqB,EAAK,EAAM,KAC5C,EAAI,EAAK,MAAQ,CACf,MAAO,EAAK,OAAS,EAAK,KAC1B,MACE,EAAK,OAAS,EAAkB,EAAK,QAAQ,GAAK,EAAsB,EAAQ,EAAsB,OAC1G,EACO,GACN,CAAC,CAAC,CACP,CAEA,SAAS,SAAS,CAChB,YACA,OACA,SACA,UACA,OAAO,UACP,cAAc,WACd,YAAY,GACZ,YAAY,GACZ,WAAW,IACX,cAAc,GACd,aAAa,GACb,UACA,SAAS,EACT,OACA,oBACA,eACA,cACA,WACA,gBACA,GAAG,GACa,CAChB,IAAM,EAAS,EAAM,YAAc,YAAY,CAAM,EAAG,CAAC,CAAM,CAAC,EAC1D,EAAU,IAAS,UAAY,IAAA,GAAY,QAC3C,EAAc,IAAS,UAAY,SAAW,IAAA,GAC9C,EAAe,IAAgB,aAE/B,EAAoB,CACxB,UACA,SAAU,GACV,SAAU,GACV,WAAY,CACd,EAEM,EACJ,IAAS,UACJ,GAAkB,GAAG,KAAK,MAAM,EAAQ,GAAG,EAAE,GAC9C,EACG,GAAkB,GAAG,IAAQ,IAC9B,IAAA,GAER,OACE,EAAC,EAAD,CAAgB,YAAU,YAAY,UAAW,EAAG,SAAU,CAAS,EAAW,SAAQ,GAAI,WAC5F,EAACA,EAAD,CACE,GAAI,EACE,OACO,cACb,OAAQ,EAAe,WAAa,sBAJtC,CAMG,IAAa,QACZ,EAAC,EAAD,CACE,SAAU,IAAa,KAAO,IAAa,KAC3C,WAAY,IAAa,KAAO,IAAa,IAC9C,CAAA,EAEF,IACE,EACC,EAAC,EAAD,CAAO,KAAK,SAAS,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAqB,CAAA,EAE1G,EAAC,EAAD,CAAO,KAAK,WAAW,GAAI,CAAoB,CAAA,GAElD,IACE,EACC,EAAC,EAAD,CAAO,KAAK,WAAW,GAAI,CAAoB,CAAA,EAE/C,EAAC,EAAD,CAAO,KAAK,SAAS,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAqB,CAAA,GAE7G,GAAe,EAAC,EAAD,CAAS,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,GAAI,CAAe,CAAA,CAAI,CAAA,EAC5F,GAAc,EAAC,EAAD,CAAQ,QAAS,EAAC,EAAD,CAAoB,GAAI,CAAc,CAAA,CAAI,CAAA,EACzE,EAAO,IAAK,GAAS,CACpB,IAAM,EAAc,EAAO,EAAK,KAAK,EAAE,MACvC,OACE,EAAC,EAAD,CAEE,QAAS,EAAK,KACL,UACT,KAAM,EACE,SACC,UACU,oBACnB,kBAAmB,IAAsB,EACzC,MAAQ,GAAe,CACrB,IAAM,EAAM,EAAW,QACjB,EAAO,GAAK,OAAS,EAAkB,GAAK,QAAQ,GAAK,EAC/D,OAAO,EAAC,EAAD,CAAW,GAAI,EAAkB,MAAO,CAAA,CACjD,EACA,GAAI,CACL,EAdM,EAAK,IAcX,CAEL,CAAC,CACe,GACJ,CAAA,CAEpB"}
|
package/dist/components/chart.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{Fragment as t,jsx as n,jsxs as r}from"react/jsx-runtime";import*as i from"react";import*as a from"recharts";const o={light:``,dark:`.dark`},s=[`primary`,`brand`,`gray`,`zinc`,`red`,`yellow`,`green`,`blue`,`indigo`,`pink`];function resolveChartColor(e){if(e)return s.includes(e)?`var(--${e}-500)`:e}const c=[`var(--chart-1)`,`var(--chart-2)`,`var(--chart-3)`,`var(--chart-4)`,`var(--chart-5)`],l=i.createContext(null);function useChart(){let e=i.useContext(l);if(!e)throw Error(`useChart must be used within a <ChartContainer />`);return e}function ChartContainer({id:t,className:
|
|
1
|
+
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{Fragment as t,jsx as n,jsxs as r}from"react/jsx-runtime";import*as i from"react";import*as a from"recharts";const o={light:``,dark:`.dark`},s=[`primary`,`brand`,`gray`,`zinc`,`red`,`yellow`,`green`,`blue`,`indigo`,`pink`];function resolveChartColor(e){if(e)return s.includes(e)?`var(--${e}-500)`:e}const c=[`var(--chart-1)`,`var(--chart-2)`,`var(--chart-3)`,`var(--chart-4)`,`var(--chart-5)`],l=i.createContext(null);function useChart(){let e=i.useContext(l);if(!e)throw Error(`useChart must be used within a <ChartContainer />`);return e}function ChartContainer({id:t,className:r,children:o,config:s,...c}){let u=i.useId(),d=`chart-${t||u.replace(/:/g,``)}`;return n(l.Provider,{value:{config:s},children:n(`div`,{"data-slot":`chart`,"data-chart":d,className:e(`flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden`,r),...c,children:n(a.ResponsiveContainer,{children:o})})})}const ChartStyle=({id:e,config:t})=>{let r=Object.entries(t).filter(([,e])=>e.theme||e.color);return r.length?n(`style`,{children:Object.entries(o).map(([t,n])=>`
|
|
2
2
|
${n} [data-chart=${e}] {
|
|
3
3
|
${r.map(([e,n])=>{let r=n.theme?.[t]||n.color;return r?` --color-${e}: ${r};`:null}).join(`
|
|
4
4
|
`)}
|
|
5
5
|
}
|
|
6
6
|
`).join(`
|
|
7
|
-
`)}):null},u=a.Tooltip;function ChartTooltipContent({active:a,payload:o,className:s,indicator:c=`dot`,hideLabel:l=!1,hideIndicator:u=!1,label:d,labelFormatter:f,labelClassName:p,formatter:m,color:h,nameKey:g,labelKey:_}){let{config:v}=useChart(),y=i.useMemo(()=>{if(l||!o?.length)return null;let[t]=o,r=getPayloadConfigFromPayload(v,t,`${_||t?.dataKey||t?.name||`value`}`),i=!_&&typeof d==`string`?v[d]?.label||d:r?.label;return f?n(`div`,{className:e(`font-medium`,p),children:f(i,o)}):i?n(`div`,{className:e(`font-medium`,p),children:i}):null},[d,f,o,l,p,v,_]);if(!a||!o?.length)return null;let b=o.length===1&&c!==`dot`;return r(`div`,{className:e(`grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl`,s),children:[b?null:y,n(`div`,{className:`grid gap-1.5`,children:o.filter(e=>e.type!==`none`).map((i,a)=>{let o=getPayloadConfigFromPayload(v,i,`${g||i.name||i.dataKey||`value`}`),s=h||i.payload.fill||i.color;return n(`div`,{className:e(`flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground`,c===`dot`&&`items-center`),children:m&&i?.value!==void 0&&i.name?m(i.value,i.name,i,a,i.payload):r(t,{children:[o?.icon?n(o.icon,{}):!u&&n(`div`,{className:e(`shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)`,{"h-2.5 w-2.5":c===`dot`,"w-1":c===`line`,"w-0 border-[1.5px] border-dashed bg-transparent":c===`dashed`,"my-0.5":b&&c===`dashed`}),style:{"--color-bg":s,"--color-border":s}}),r(`div`,{className:e(`flex flex-1 justify-between leading-none`,b?`items-end`:`items-center`),children:[r(`div`,{className:`grid gap-1.5`,children:[b?y:null,n(`span`,{className:`text-muted-foreground`,children:o?.label||i.name})]}),i.value&&n(`span`,{className:`font-mono font-medium text-foreground tabular-nums`,children:i.value.toLocaleString()})]})]})},String(i.dataKey))})})]})}const d=a.Legend;function ChartLegendContent({className:t,hideIcon:i=!1,payload:a,verticalAlign:o=`bottom`,nameKey:s}){let{config:c}=useChart();return a?.length?n(`div`,{className:e(`flex items-center justify-center gap-4`,o===`top`?`pb-3`:`pt-3`,t),children:a.filter(e=>e.type!==`none`).map(t=>{let a=getPayloadConfigFromPayload(c,t,`${s||t.dataKey||`value`}`);return r(`div`,{className:e(`flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground`),children:[a?.icon&&!i?n(a.icon,{}):n(`div`,{className:`h-
|
|
7
|
+
`)}):null},u=a.Tooltip;function ChartTooltipContent({active:a,payload:o,className:s,indicator:c=`dot`,hideLabel:l=!1,hideIndicator:u=!1,label:d,labelFormatter:f,labelClassName:p,formatter:m,color:h,nameKey:g,labelKey:_}){let{config:v}=useChart(),y=i.useMemo(()=>{if(l||!o?.length)return null;let[t]=o,r=getPayloadConfigFromPayload(v,t,`${_||t?.dataKey||t?.name||`value`}`),i=!_&&typeof d==`string`?v[d]?.label||d:r?.label;return f?n(`div`,{className:e(`font-medium`,p),children:f(i,o)}):i?n(`div`,{className:e(`font-medium`,p),children:i}):null},[d,f,o,l,p,v,_]);if(!a||!o?.length)return null;let b=o.length===1&&c!==`dot`;return r(`div`,{className:e(`grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl`,s),children:[b?null:y,n(`div`,{className:`grid gap-1.5`,children:o.filter(e=>e.type!==`none`).map((i,a)=>{let o=getPayloadConfigFromPayload(v,i,`${g||i.name||i.dataKey||`value`}`),s=h||i.payload.fill||i.color;return n(`div`,{className:e(`flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground`,c===`dot`&&`items-center`),children:m&&i?.value!==void 0&&i.name?m(i.value,i.name,i,a,i.payload):r(t,{children:[o?.icon?n(o.icon,{}):!u&&n(`div`,{className:e(`shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)`,{"h-2.5 w-2.5":c===`dot`,"w-1":c===`line`,"w-0 border-[1.5px] border-dashed bg-transparent":c===`dashed`,"my-0.5":b&&c===`dashed`}),style:{"--color-bg":s,"--color-border":s}}),r(`div`,{className:e(`flex flex-1 justify-between leading-none`,b?`items-end`:`items-center`),children:[r(`div`,{className:`grid gap-1.5`,children:[b?y:null,n(`span`,{className:`text-muted-foreground`,children:o?.label||i.name})]}),i.value&&n(`span`,{className:`font-mono font-medium text-foreground tabular-nums`,children:i.value.toLocaleString()})]})]})},String(i.dataKey))})})]})}const d=a.Legend;function ChartLegendContent({className:t,hideIcon:i=!1,payload:a,verticalAlign:o=`bottom`,nameKey:s}){let{config:c}=useChart();return a?.length?n(`div`,{className:e(`flex items-center justify-center flex-wrap gap-4`,o===`top`?`pb-3`:`pt-3`,t),children:a.filter(e=>e.type!==`none`).map(t=>{let a=getPayloadConfigFromPayload(c,t,`${s||t.dataKey||`value`}`);return r(`div`,{className:e(`flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground`),children:[a?.icon&&!i?n(a.icon,{}):n(`div`,{className:`h-3 w-3 shrink-0 rounded-[2px]`,style:{backgroundColor:t.color}}),a?.label]},t.value)})}):null}function getPayloadConfigFromPayload(e,t,n){if(typeof t!=`object`||!t)return;let r=`payload`in t&&typeof t.payload==`object`&&t.payload!==null?t.payload:void 0,i=n;return n in t&&typeof t[n]==`string`?i=t[n]:r&&n in r&&typeof r[n]==`string`&&(i=r[n]),i in e?e[i]:e[n]}export{s as CHART_COLOR_KEYS,ChartContainer,d as ChartLegend,ChartLegendContent,ChartStyle,u as ChartTooltip,ChartTooltipContent,c as DEFAULT_CHART_PALETTE,resolveChartColor};
|
|
8
8
|
//# sourceMappingURL=chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.js","names":[],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport * as RechartsPrimitive from 'recharts'\n\nimport { cn } from '../lib/utils'\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const\n\nexport type ChartColorKey =\n | 'primary'\n | 'brand'\n | 'gray'\n | 'zinc'\n | 'red'\n | 'yellow'\n | 'green'\n | 'blue'\n | 'indigo'\n | 'pink'\n\nconst CHART_COLOR_KEYS: readonly ChartColorKey[] = [\n 'primary',\n 'brand',\n 'gray',\n 'zinc',\n 'red',\n 'yellow',\n 'green',\n 'blue',\n 'indigo',\n 'pink'\n]\n\nexport function resolveChartColor(value: string | undefined): string | undefined {\n if (!value) return undefined\n if ((CHART_COLOR_KEYS as readonly string[]).includes(value)) {\n return `var(--${value}-500)`\n }\n return value\n}\n\nexport const DEFAULT_CHART_PALETTE = [\n 'var(--chart-1)',\n 'var(--chart-2)',\n 'var(--chart-3)',\n 'var(--chart-4)',\n 'var(--chart-5)'\n] as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nexport type ChartContainerProps = React.ComponentProps<'div'> & {\n config: ChartConfig\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']\n}\n\nexport type ChartStyleProps = {\n id: string\n config: ChartConfig\n}\n\nexport type ChartTooltipProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip>\n\nexport type ChartTooltipContentProps = Partial<\n RechartsPrimitive.DefaultTooltipContentProps<number | string | Array<number | string>, number | string>\n> &\n Omit<React.ComponentProps<'div'>, 'formatter'> & {\n active?: boolean\n color?: string\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: 'line' | 'dot' | 'dashed'\n nameKey?: string\n labelKey?: string\n }\n\nexport type ChartLegendProps = React.ComponentProps<typeof RechartsPrimitive.Legend>\n\nexport type ChartLegendContentProps = React.ComponentProps<'div'> &\n Pick<RechartsPrimitive.DefaultLegendContentProps, 'payload' | 'verticalAlign'> & {\n hideIcon?: boolean\n nameKey?: string\n }\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error('useChart must be used within a <ChartContainer />')\n }\n\n return context\n}\n\nfunction ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n className\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n )\n}\n\nconst ChartStyle = ({ id, config }: ChartStyleProps) => {\n const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)\n\n if (!colorConfig.length) {\n return null\n }\n\n const styles = Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join('\\n')}\n}\n`\n )\n .join('\\n')\n\n return <style>{styles}</style>\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = 'dot',\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey\n}: ChartTooltipContentProps) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item?.dataKey || item?.name || 'value'}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === 'string' ? config[label as keyof typeof config]?.label || label : itemConfig?.label\n\n if (labelFormatter) {\n return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n }\n\n if (!value) {\n return null\n }\n\n return <div className={cn('font-medium', labelClassName)}>{value}</div>\n }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n return (\n <div\n className={cn(\n 'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',\n className\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload\n .filter((item) => item.type !== 'none')\n .map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || 'value'}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n <div\n key={String(item.dataKey)}\n className={cn(\n 'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n indicator === 'dot' && 'items-center'\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {\n 'h-2.5 w-2.5': indicator === 'dot',\n 'w-1': indicator === 'line',\n 'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n 'my-0.5': nestLabel && indicator === 'dashed'\n })}\n style={\n {\n '--color-bg': indicatorColor,\n '--color-border': indicatorColor\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n 'flex flex-1 justify-between leading-none',\n nestLabel ? 'items-end' : 'items-center'\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">{itemConfig?.label || item.name}</span>\n </div>\n {item.value && (\n <span className=\"font-mono font-medium text-foreground tabular-nums\">\n {item.value.toLocaleString()}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = 'bottom',\n nameKey\n}: ChartLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>\n {payload\n .filter((item) => item.type !== 'none')\n .map((item) => {\n const key = `${nameKey || item.dataKey || 'value'}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n <div\n key={item.value}\n className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n )\n })}\n </div>\n )\n}\n\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n if (typeof payload !== 'object' || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n ) {\n configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]\n}\n\nexport {\n CHART_COLOR_KEYS,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n ChartTooltip,\n ChartTooltipContent\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"chart.js","names":[],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport * as RechartsPrimitive from 'recharts'\n\nimport { cn } from '../lib/utils'\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const\n\nexport type ChartColorKey =\n | 'primary'\n | 'brand'\n | 'gray'\n | 'zinc'\n | 'red'\n | 'yellow'\n | 'green'\n | 'blue'\n | 'indigo'\n | 'pink'\n\nconst CHART_COLOR_KEYS: readonly ChartColorKey[] = [\n 'primary',\n 'brand',\n 'gray',\n 'zinc',\n 'red',\n 'yellow',\n 'green',\n 'blue',\n 'indigo',\n 'pink'\n]\n\nexport function resolveChartColor(value: string | undefined): string | undefined {\n if (!value) return undefined\n if ((CHART_COLOR_KEYS as readonly string[]).includes(value)) {\n return `var(--${value}-500)`\n }\n return value\n}\n\nexport const DEFAULT_CHART_PALETTE = [\n 'var(--chart-1)',\n 'var(--chart-2)',\n 'var(--chart-3)',\n 'var(--chart-4)',\n 'var(--chart-5)'\n] as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nexport type ChartContainerProps = React.ComponentProps<'div'> & {\n config: ChartConfig\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']\n}\n\nexport type ChartStyleProps = {\n id: string\n config: ChartConfig\n}\n\nexport type ChartTooltipProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip>\n\nexport type ChartTooltipContentProps = Partial<\n RechartsPrimitive.DefaultTooltipContentProps<number | string | Array<number | string>, number | string>\n> &\n Omit<React.ComponentProps<'div'>, 'formatter'> & {\n active?: boolean\n color?: string\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: 'line' | 'dot' | 'dashed'\n nameKey?: string\n labelKey?: string\n }\n\nexport type ChartLegendProps = React.ComponentProps<typeof RechartsPrimitive.Legend>\n\nexport type ChartLegendContentProps = React.ComponentProps<'div'> &\n Pick<RechartsPrimitive.DefaultLegendContentProps, 'payload' | 'verticalAlign'> & {\n hideIcon?: boolean\n nameKey?: string\n }\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error('useChart must be used within a <ChartContainer />')\n }\n\n return context\n}\n\nfunction ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-slot=\"chart\"\n data-chart={chartId}\n className={cn(\n \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n className\n )}\n {...props}\n >\n <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n )\n}\n\nconst ChartStyle = ({ id, config }: ChartStyleProps) => {\n const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)\n\n if (!colorConfig.length) {\n return null\n }\n\n const styles = Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join('\\n')}\n}\n`\n )\n .join('\\n')\n\n return <style>{styles}</style>\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = 'dot',\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey\n}: ChartTooltipContentProps) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item?.dataKey || item?.name || 'value'}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === 'string' ? config[label as keyof typeof config]?.label || label : itemConfig?.label\n\n if (labelFormatter) {\n return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n }\n\n if (!value) {\n return null\n }\n\n return <div className={cn('font-medium', labelClassName)}>{value}</div>\n }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n return (\n <div\n className={cn(\n 'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',\n className\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload\n .filter((item) => item.type !== 'none')\n .map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || 'value'}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n <div\n key={String(item.dataKey)}\n className={cn(\n 'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n indicator === 'dot' && 'items-center'\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {\n 'h-2.5 w-2.5': indicator === 'dot',\n 'w-1': indicator === 'line',\n 'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n 'my-0.5': nestLabel && indicator === 'dashed'\n })}\n style={\n {\n '--color-bg': indicatorColor,\n '--color-border': indicatorColor\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n 'flex flex-1 justify-between leading-none',\n nestLabel ? 'items-end' : 'items-center'\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">{itemConfig?.label || item.name}</span>\n </div>\n {item.value && (\n <span className=\"font-mono font-medium text-foreground tabular-nums\">\n {item.value.toLocaleString()}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = 'bottom',\n nameKey\n}: ChartLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n <div\n className={cn(\n 'flex items-center justify-center flex-wrap gap-4',\n verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n className\n )}\n >\n {payload\n .filter((item) => item.type !== 'none')\n .map((item) => {\n const key = `${nameKey || item.dataKey || 'value'}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n <div\n key={item.value}\n className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-3 w-3 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n )\n })}\n </div>\n )\n}\n\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n if (typeof payload !== 'object' || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n ) {\n configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]\n}\n\nexport {\n CHART_COLOR_KEYS,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n ChartTooltip,\n ChartTooltipContent\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"react";import{Legend as l,Pie as u,PieChart as d,Tooltip as f}from"recharts";function buildPieConfig(e){return e.reduce((e,t,n)=>(e[t.name]={label:t.name,color:t.color??a(t.colorKey)??i[n%i.length]},e),{})}function PieChartBase({className:i,data:p,withTooltip:m=!0,withLegend:h=!1,withLabels:g=!1,labelsPosition:_=`outside`,startAngle:v=90,endAngle:y=-270,paddingAngle:b=0,strokeWidth:x=1,strokeColor:S=`var(--background)`,innerRadius:C=0,outerRadius:w=`80%`,animationDuration:T,tooltipProps:E,legendProps:D,pieProps:O,dataSlot:k,centerSlot:A,...j}){let M=c.useMemo(()=>buildPieConfig(p),[p]),N=a(S)??S,P=c.useMemo(()=>p.map(e=>({...e,fill
|
|
1
|
+
import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"react";import{Legend as l,Pie as u,PieChart as d,Tooltip as f}from"recharts";function buildPieConfig(e){return e.reduce((e,t,n)=>(e[t.name]={label:t.name,color:t.color??a(t.colorKey)??i[n%i.length]},e),{})}function PieChartBase({className:i,data:p,withTooltip:m=!0,withLegend:h=!1,withLabels:g=!1,labelsPosition:_=`outside`,startAngle:v=90,endAngle:y=-270,paddingAngle:b=0,strokeWidth:x=1,strokeColor:S=`var(--background)`,innerRadius:C=0,outerRadius:w=`80%`,animationDuration:T,tooltipProps:E,legendProps:D,pieProps:O,dataSlot:k,centerSlot:A,...j}){let M=c.useMemo(()=>buildPieConfig(p),[p]),N=a(S)??S,P=c.useMemo(()=>p.map(e=>({...e,fill:M[e.name]?.color,stroke:N})),[p,N,M]);return o(t,{"data-slot":k,className:e(`relative aspect-square w-full`,i),config:M,...j,children:s(d,{children:[m&&o(f,{cursor:!1,content:o(r,{hideLabel:!0,...E})}),h&&o(l,{content:o(n,{nameKey:`name`,...D})}),o(u,{data:P,dataKey:`value`,nameKey:`name`,startAngle:v,endAngle:y,innerRadius:C,outerRadius:w,paddingAngle:b,strokeWidth:x,label:g?{fontSize:12}:void 0,labelLine:g&&_===`outside`,animationDuration:T,isAnimationActive:T!==0,...O,children:A})]})})}function PieChart(e){return o(PieChartBase,{...e,dataSlot:`pie-chart`})}export{PieChart,PieChartBase,buildPieConfig};
|
|
2
2
|
//# sourceMappingURL=pie-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.js","names":["RechartsPieChart"],"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Legend, Pie, PieChart as RechartsPieChart, Tooltip } from 'recharts'\n\nimport { cn } from '../lib/utils'\nimport {\n type ChartColorKey,\n type ChartConfig,\n ChartContainer,\n ChartLegendContent,\n type ChartLegendContentProps,\n ChartTooltipContent,\n type ChartTooltipContentProps,\n DEFAULT_CHART_PALETTE,\n resolveChartColor\n} from './chart'\n\nexport type PieChartDatum = {\n name: string\n value: number\n color?: string\n colorKey?: ChartColorKey\n}\n\nexport type PieChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {\n data: PieChartDatum[]\n withTooltip?: boolean\n withLegend?: boolean\n withLabels?: boolean\n labelsPosition?: 'inside' | 'outside'\n startAngle?: number\n endAngle?: number\n paddingAngle?: number\n strokeWidth?: number\n strokeColor?: ChartColorKey | string\n innerRadius?: number | string\n outerRadius?: number | string\n animationDuration?: number\n tooltipProps?: ChartTooltipContentProps\n legendProps?: ChartLegendContentProps\n pieProps?: Partial<React.ComponentProps<typeof Pie>>\n children?: React.ReactNode\n}\n\nexport function buildPieConfig(data: PieChartDatum[]): ChartConfig {\n return data.reduce<ChartConfig>((acc, item, index) => {\n acc[item.name] = {\n label: item.name,\n color:\n item.color ?? resolveChartColor(item.colorKey) ?? DEFAULT_CHART_PALETTE[index % DEFAULT_CHART_PALETTE.length]\n }\n return acc\n }, {})\n}\n\nexport type PieChartBaseProps = Omit<PieChartProps, 'children'> & {\n dataSlot: string\n innerRadius?: number | string\n outerRadius?: number | string\n centerSlot?: React.ReactNode\n}\n\nfunction PieChartBase({\n className,\n data,\n withTooltip = true,\n withLegend = false,\n withLabels = false,\n labelsPosition = 'outside',\n startAngle = 90,\n endAngle = -270,\n paddingAngle = 0,\n strokeWidth = 1,\n strokeColor = 'var(--background)',\n innerRadius = 0,\n outerRadius = '80%',\n animationDuration,\n tooltipProps,\n legendProps,\n pieProps,\n dataSlot,\n centerSlot,\n ...props\n}: PieChartBaseProps) {\n const config = React.useMemo(() => buildPieConfig(data), [data])\n const resolvedStroke = resolveChartColor(strokeColor) ?? strokeColor\n const styledData = React.useMemo(\n () => data.map((item) => ({ ...item, fill:
|
|
1
|
+
{"version":3,"file":"pie-chart.js","names":["RechartsPieChart"],"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Legend, Pie, PieChart as RechartsPieChart, Tooltip } from 'recharts'\n\nimport { cn } from '../lib/utils'\nimport {\n type ChartColorKey,\n type ChartConfig,\n ChartContainer,\n ChartLegendContent,\n type ChartLegendContentProps,\n ChartTooltipContent,\n type ChartTooltipContentProps,\n DEFAULT_CHART_PALETTE,\n resolveChartColor\n} from './chart'\n\nexport type PieChartDatum = {\n name: string\n value: number\n color?: string\n colorKey?: ChartColorKey\n}\n\nexport type PieChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {\n data: PieChartDatum[]\n withTooltip?: boolean\n withLegend?: boolean\n withLabels?: boolean\n labelsPosition?: 'inside' | 'outside'\n startAngle?: number\n endAngle?: number\n paddingAngle?: number\n strokeWidth?: number\n strokeColor?: ChartColorKey | string\n innerRadius?: number | string\n outerRadius?: number | string\n animationDuration?: number\n tooltipProps?: ChartTooltipContentProps\n legendProps?: ChartLegendContentProps\n pieProps?: Partial<React.ComponentProps<typeof Pie>>\n children?: React.ReactNode\n}\n\nexport function buildPieConfig(data: PieChartDatum[]): ChartConfig {\n return data.reduce<ChartConfig>((acc, item, index) => {\n acc[item.name] = {\n label: item.name,\n color:\n item.color ?? resolveChartColor(item.colorKey) ?? DEFAULT_CHART_PALETTE[index % DEFAULT_CHART_PALETTE.length]\n }\n return acc\n }, {})\n}\n\nexport type PieChartBaseProps = Omit<PieChartProps, 'children'> & {\n dataSlot: string\n innerRadius?: number | string\n outerRadius?: number | string\n centerSlot?: React.ReactNode\n}\n\nfunction PieChartBase({\n className,\n data,\n withTooltip = true,\n withLegend = false,\n withLabels = false,\n labelsPosition = 'outside',\n startAngle = 90,\n endAngle = -270,\n paddingAngle = 0,\n strokeWidth = 1,\n strokeColor = 'var(--background)',\n innerRadius = 0,\n outerRadius = '80%',\n animationDuration,\n tooltipProps,\n legendProps,\n pieProps,\n dataSlot,\n centerSlot,\n ...props\n}: PieChartBaseProps) {\n const config = React.useMemo(() => buildPieConfig(data), [data])\n const resolvedStroke = resolveChartColor(strokeColor) ?? strokeColor\n const styledData = React.useMemo(\n () => data.map((item) => ({ ...item, fill: config[item.name]?.color, stroke: resolvedStroke })),\n [data, resolvedStroke, config]\n )\n\n return (\n <ChartContainer\n data-slot={dataSlot}\n className={cn('relative aspect-square w-full', className)}\n config={config}\n {...props}\n >\n <RechartsPieChart>\n {withTooltip && <Tooltip cursor={false} content={<ChartTooltipContent hideLabel {...tooltipProps} />} />}\n {withLegend && <Legend content={<ChartLegendContent nameKey=\"name\" {...legendProps} />} />}\n <Pie\n data={styledData}\n dataKey=\"value\"\n nameKey=\"name\"\n startAngle={startAngle}\n endAngle={endAngle}\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n paddingAngle={paddingAngle}\n strokeWidth={strokeWidth}\n label={withLabels ? { fontSize: 12 } : undefined}\n labelLine={withLabels && labelsPosition === 'outside'}\n animationDuration={animationDuration}\n isAnimationActive={animationDuration !== 0}\n {...pieProps}\n >\n {centerSlot}\n </Pie>\n </RechartsPieChart>\n </ChartContainer>\n )\n}\n\nfunction PieChart(props: PieChartProps) {\n return <PieChartBase {...props} dataSlot=\"pie-chart\" />\n}\n\nexport { PieChart, PieChartBase }\n"],"mappings":"4WA4CA,SAAgB,eAAe,EAAoC,CACjE,OAAO,EAAK,QAAqB,EAAK,EAAM,KAC1C,EAAI,EAAK,MAAQ,CACf,MAAO,EAAK,KACZ,MACE,EAAK,OAAS,EAAkB,EAAK,QAAQ,GAAK,EAAsB,EAAQ,EAAsB,OAC1G,EACO,GACN,CAAC,CAAC,CACP,CASA,SAAS,aAAa,CACpB,YACA,OACA,cAAc,GACd,aAAa,GACb,aAAa,GACb,iBAAiB,UACjB,aAAa,GACb,WAAW,KACX,eAAe,EACf,cAAc,EACd,cAAc,oBACd,cAAc,EACd,cAAc,MACd,oBACA,eACA,cACA,WACA,WACA,aACA,GAAG,GACiB,CACpB,IAAM,EAAS,EAAM,YAAc,eAAe,CAAI,EAAG,CAAC,CAAI,CAAC,EACzD,EAAiB,EAAkB,CAAW,GAAK,EACnD,EAAa,EAAM,YACjB,EAAK,IAAK,IAAU,CAAE,GAAG,EAAM,KAAM,EAAO,EAAK,KAAK,EAAE,MAAO,OAAQ,CAAe,EAAE,EAC9F,CAAC,EAAM,EAAgB,CAAM,CAC/B,EAEA,OACE,EAAC,EAAD,CACE,YAAW,EACX,UAAW,EAAG,gCAAiC,CAAS,EAChD,SACR,GAAI,WAEJ,EAACA,EAAD,CAAA,SAAA,CACG,GAAe,EAAC,EAAD,CAAS,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,UAAA,GAAU,GAAI,CAAe,CAAA,CAAI,CAAA,EACtG,GAAc,EAAC,EAAD,CAAQ,QAAS,EAAC,EAAD,CAAoB,QAAQ,OAAO,GAAI,CAAc,CAAA,CAAI,CAAA,EACzF,EAAC,EAAD,CACE,KAAM,EACN,QAAQ,QACR,QAAQ,OACI,aACF,WACG,cACA,cACC,eACD,cACb,MAAO,EAAa,CAAE,SAAU,EAAG,EAAI,IAAA,GACvC,UAAW,GAAc,IAAmB,UACzB,oBACnB,kBAAmB,IAAsB,EACzC,GAAI,WAEH,CACE,CAAA,CACW,CAAA,CAAA,CACJ,CAAA,CAEpB,CAEA,SAAS,SAAS,EAAsB,CACtC,OAAO,EAAC,aAAD,CAAc,GAAI,EAAO,SAAS,WAAa,CAAA,CACxD"}
|
|
@@ -123,7 +123,7 @@ declare function SidebarMenuItem({
|
|
|
123
123
|
...props
|
|
124
124
|
}: SidebarMenuItemProps): React.JSX.Element;
|
|
125
125
|
declare const sidebarMenuButtonVariants: (props?: ({
|
|
126
|
-
variant?: "
|
|
126
|
+
variant?: "default" | "outline" | null | undefined;
|
|
127
127
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
128
128
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
129
129
|
type SidebarMenuButtonProps = React.ComponentProps<'button'> & {
|
|
@@ -8,10 +8,10 @@ declare const timelineVariants: (props?: ({
|
|
|
8
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
9
|
declare const timelineConnectorVariants: (props?: ({
|
|
10
10
|
status?: "pending" | "completed" | "in-progress" | null | undefined;
|
|
11
|
-
color?: "
|
|
11
|
+
color?: "destructive" | "secondary" | "primary" | "muted" | "accent" | "gradient" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
declare const timelineIconVariants: (props?: ({
|
|
14
|
-
color?: "
|
|
14
|
+
color?: "destructive" | "secondary" | "primary" | "muted" | "accent" | null | undefined;
|
|
15
15
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
16
16
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
17
17
|
type TimelineIconSize = NonNullable<VariantProps<typeof timelineIconVariants>['size']>;
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { _ as resolveChartColor, a as ChartContainerProps, c as ChartLegendConte
|
|
|
7
7
|
import { AreaChart, AreaChartCurveType, AreaChartGridAxis, AreaChartProps, AreaChartSeries, AreaChartType } from "./components/area-chart.js";
|
|
8
8
|
import { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps } from "./components/avatar.js";
|
|
9
9
|
import { Badge, BadgeProps, badgeVariants } from "./components/badge.js";
|
|
10
|
-
import { BarChart, BarChartGridAxis, BarChartOrientation, BarChartProps, BarChartSeries, BarChartType } from "./components/bar-chart.js";
|
|
10
|
+
import { BarChart, BarChartDatum, BarChartGridAxis, BarChartOrientation, BarChartProps, BarChartSeries, BarChartType } from "./components/bar-chart.js";
|
|
11
11
|
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from "./components/breadcrumb.js";
|
|
12
12
|
import { Separator, SeparatorProps } from "./components/separator.js";
|
|
13
13
|
import { ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupSeparatorProps, ButtonGroupText, ButtonGroupTextProps, buttonGroupVariants } from "./components/button-group.js";
|
|
@@ -85,4 +85,4 @@ import { BadgeColor, badgeColorVariants } from "./lib/badge.js";
|
|
|
85
85
|
import { ButtonColor, buttonColorVariants } from "./lib/button.js";
|
|
86
86
|
import { composeRefs, setRef } from "./lib/compose-refs.js";
|
|
87
87
|
import { cn, randomId } from "./lib/utils.js";
|
|
88
|
-
export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, AccordionTriggerProps, Alert, AlertAction, AlertActionProps, AlertDescription, AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogMedia, AlertDialogMediaProps, AlertDialogOverlay, AlertDialogOverlayProps, AlertDialogPortal, AlertDialogPortalProps, AlertDialogProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps, AlertProps, AlertTitle, AlertTitleProps, Anchor, AnchorProps, AreaChart, AreaChartCurveType, AreaChartGridAxis, AreaChartProps, AreaChartSeries, AreaChartType, Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, Badge, BadgeColor, BadgeProps, BarChart, BarChartGridAxis, BarChartOrientation, BarChartProps, BarChartSeries, BarChartType, Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps, Breakpoint, Button, ButtonColor, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupSeparatorProps, ButtonGroupText, ButtonGroupTextProps, ButtonProps, CHART_COLOR_KEYS, Calendar, CalendarDayButton, CalendarDayButtonProps, CalendarProps, Card, CardAction, CardActionProps, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselApi, CarouselContent, CarouselContentProps, CarouselIndicators, CarouselIndicatorsProps, CarouselItem, CarouselItemProps, CarouselNext, CarouselNextProps, CarouselPrevious, CarouselPreviousProps, CarouselProps, Center, CenterProps, ChartColorKey, ChartConfig, ChartContainer, ChartContainerProps, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartLegendProps, ChartStyle, ChartStyleProps, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, ChartTooltipProps, Checkbox, CheckboxProps, Code, CodeProps, Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps, type Column, type ColumnDef, Combobox, ComboboxChip, ComboboxChipProps, ComboboxChips, ComboboxChipsInput, ComboboxChipsInputProps, ComboboxChipsProps, ComboboxClear, ComboboxClearProps, ComboboxCollection, ComboboxCollectionProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxLabel, ComboboxLabelProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxTrigger, ComboboxTriggerProps, ComboboxValue, ComboboxValueProps, Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandEmptyProps, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemProps, CommandList, CommandListProps, CommandProps, CommandSeparator, CommandSeparatorProps, CommandShortcut, CommandShortcutProps, Container, ContainerProps, DEFAULT_CHART_PALETTE, DataTable, DataTableBody, DataTableBodyProps, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableHeader, DataTableHeaderProps, DataTableLabels, DataTablePagination, DataTablePaginationProps, DataTableProps, DataTableRoot, DataTableRootProps, DataTableToolbar, DataTableToolbarProps, DataTableViewOptions, DataTableViewOptionsProps, type DateRange, DateRangePicker, DateRangePickerActions, DateRangePickerActionsProps, DateRangePickerApply, DateRangePickerApplyProps, DateRangePickerCalendar, DateRangePickerCalendarProps, DateRangePickerContent, DateRangePickerContentProps, DateRangePickerDateFields, DateRangePickerDateFieldsProps, DateRangePickerPreset, DateRangePickerPresetOption, DateRangePickerPresetProps, DateRangePickerPresets, DateRangePickerPresetsProps, DateRangePickerProps, DateRangePickerReset, DateRangePickerResetProps, DateRangePickerTrigger, DateRangePickerTriggerProps, DateRangePickerValue, DateRangePickerValueProps, Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, DonutChart, DonutChartProps, Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerOverlay, DrawerOverlayProps, DrawerPortal, DrawerPortalProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps, Dropzone, DropzoneArea, DropzoneAreaProps, DropzoneDescription, DropzoneDescriptionProps, DropzoneFileList, DropzoneFileListItem, DropzoneFileListItemProps, DropzoneFileListProps, DropzoneFileMessage, DropzoneFileMessageProps, DropzoneFileStatus, DropzoneMessage, DropzoneMessageProps, DropzoneProps, DropzoneRemoveFile, DropzoneRemoveFileProps, DropzoneRetryFile, DropzoneRetryFileProps, DropzoneTrigger, DropzoneTriggerProps, DropzoneUploadResult, DropzoneValidation, Empty, EmptyContent, EmptyContentProps, EmptyDescription, EmptyDescriptionProps, EmptyHeader, EmptyHeaderProps, EmptyMedia, EmptyMediaProps, EmptyProps, EmptyTitle, EmptyTitleProps, ErrorCode, Field, FieldContent, FieldContentProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldGroup, FieldGroupProps, FieldLabel, FieldLabelProps, FieldLegend, FieldLegendProps, FieldProps, FieldSeparator, FieldSeparatorProps, FieldSet, FieldSetProps, FieldTitle, FieldTitleProps, type FileError, FileStatus, Flex, FlexProps, Grid, GridItem, GridItemProps, GridProps, Group, GroupProps, Heading, HeadingProps, HiddenFrom, HiddenFromProps, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, InfiniteProgress, InfiniteProgressProps, Input, InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupButton, InputGroupButtonProps, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupText, InputGroupTextProps, InputGroupTextarea, InputGroupTextareaProps, InputOTP, InputOTPGroup, InputOTPGroupProps, InputOTPProps, InputOTPSeparator, InputOTPSeparatorProps, InputOTPSlot, InputOTPSlotProps, InputProps, Kbd, KbdGroup, KbdGroupProps, KbdProps, Label, LabelProps, List, ListIcon, ListIconProps, ListItem, ListItemProps, ListProps, MaskInput, MaskInputProps, type MaskOptions, ModeToggle, ModeToggleProps, type ModifiedData, type Modify, NativeSelect, NativeSelectOptGroup, NativeSelectOptGroupProps, NativeSelectOption, NativeSelectOptionProps, NativeSelectProps, NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuIndicator, NavigationMenuIndicatorProps, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuList, NavigationMenuListProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, Pagination, PaginationContent, PaginationContentProps, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationProps, PieChart, PieChartBase, PieChartBaseProps, PieChartDatum, PieChartProps, Popover, PopoverAnchor, PopoverAnchorProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, Progress, ProgressProps, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps, type Replacement, ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps, ResizablePanelProps, ResponsiveValueMap, type RowData, ScrollArea, ScrollAreaProps, ScrollBar, ScrollBarProps, Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectProps, SelectScrollDownButton, SelectScrollDownButtonProps, SelectScrollUpButton, SelectScrollUpButtonProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, Separator, SeparatorProps, Sidebar, SidebarContent, SidebarContentProps, SidebarFooter, SidebarFooterProps, SidebarGroup, SidebarGroupAction, SidebarGroupActionProps, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarGroupProps, SidebarHeader, SidebarHeaderProps, SidebarInput, SidebarInputProps, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuBadge, SidebarMenuBadgeProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuItemProps, SidebarMenuProps, SidebarMenuSkeleton, SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubButtonProps, SidebarMenuSubItem, SidebarMenuSubItemProps, SidebarMenuSubProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSeparator, SidebarSeparatorProps, SidebarTrigger, SidebarTriggerProps, SimpleGrid, SimpleGridProps, Skeleton, SkeletonProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableContainer, TableContainerProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps, type TanStackTable, Text, TextProps, Textarea, TextareaProps, Theme, ThemeProvider, ThemeProviderProps, ThemeProviderState, Timeline, TimelineConnector, TimelineConnectorColor, TimelineConnectorProps, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineEmpty, TimelineEmptyProps, TimelineHeader, TimelineHeaderProps, TimelineIcon, TimelineIconColor, TimelineIconProps, TimelineIconSize, TimelineItem, TimelineItemProps, TimelineProps, TimelineStatus, TimelineTime, TimelineTimeProps, TimelineTitle, TimelineTitleProps, Toaster, ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipRoot, TooltipRootProps, TooltipTrigger, TooltipTriggerProps, type Track, type TrackingData, UIColor, UnstyledButton, UnstyledButtonProps, UseDataTableOptions, UseDisclosureHandlers, UseDisclosureOptions, UseDisclosureReturnValue, UseDropzoneProps, UseDropzoneReturn, UseIdleOptions, UseIntervalOptions, UseIntervalReturnValue, UseLocalStorageOptions, UseMaskOptions, VisibleFrom, VisibleFromProps, anchorVariants, badgeColorVariants, badgeVariants, breakpointValues, buildPieConfig, buttonColorVariants, buttonGroupVariants, buttonVariants, centerVariants, cn, composeRefs, containerVariants, createDataTableSelectColumn, defaultDataTableLabels, flexVariants, groupVariants, headingVariants, listVariants, locale, navigationMenuTriggerStyle, randomId, resolveChartColor, selectionControlColorVariants, setRef, spinnerVariants, stackVariants, tableVariants, tabsListVariants, textVariants, timelineVariants, toast, toggleVariants, uiColors, useBreakpoint, useBreakpointValue, useCarousel, useComboboxAnchor, useDataTable, useDataTableContext, useDisclosure, useDocumentVisibility, useDropzone, useFieldControlId, useIdle, useInterval, useIsMobile, useLocalStorage, useMask, useSidebar, useTheme };
|
|
88
|
+
export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, AccordionTriggerProps, Alert, AlertAction, AlertActionProps, AlertDescription, AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogMedia, AlertDialogMediaProps, AlertDialogOverlay, AlertDialogOverlayProps, AlertDialogPortal, AlertDialogPortalProps, AlertDialogProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps, AlertProps, AlertTitle, AlertTitleProps, Anchor, AnchorProps, AreaChart, AreaChartCurveType, AreaChartGridAxis, AreaChartProps, AreaChartSeries, AreaChartType, Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, Badge, BadgeColor, BadgeProps, BarChart, BarChartDatum, BarChartGridAxis, BarChartOrientation, BarChartProps, BarChartSeries, BarChartType, Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps, Breakpoint, Button, ButtonColor, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupSeparatorProps, ButtonGroupText, ButtonGroupTextProps, ButtonProps, CHART_COLOR_KEYS, Calendar, CalendarDayButton, CalendarDayButtonProps, CalendarProps, Card, CardAction, CardActionProps, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselApi, CarouselContent, CarouselContentProps, CarouselIndicators, CarouselIndicatorsProps, CarouselItem, CarouselItemProps, CarouselNext, CarouselNextProps, CarouselPrevious, CarouselPreviousProps, CarouselProps, Center, CenterProps, ChartColorKey, ChartConfig, ChartContainer, ChartContainerProps, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartLegendProps, ChartStyle, ChartStyleProps, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, ChartTooltipProps, Checkbox, CheckboxProps, Code, CodeProps, Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps, type Column, type ColumnDef, Combobox, ComboboxChip, ComboboxChipProps, ComboboxChips, ComboboxChipsInput, ComboboxChipsInputProps, ComboboxChipsProps, ComboboxClear, ComboboxClearProps, ComboboxCollection, ComboboxCollectionProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxLabel, ComboboxLabelProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxTrigger, ComboboxTriggerProps, ComboboxValue, ComboboxValueProps, Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandEmptyProps, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemProps, CommandList, CommandListProps, CommandProps, CommandSeparator, CommandSeparatorProps, CommandShortcut, CommandShortcutProps, Container, ContainerProps, DEFAULT_CHART_PALETTE, DataTable, DataTableBody, DataTableBodyProps, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableHeader, DataTableHeaderProps, DataTableLabels, DataTablePagination, DataTablePaginationProps, DataTableProps, DataTableRoot, DataTableRootProps, DataTableToolbar, DataTableToolbarProps, DataTableViewOptions, DataTableViewOptionsProps, type DateRange, DateRangePicker, DateRangePickerActions, DateRangePickerActionsProps, DateRangePickerApply, DateRangePickerApplyProps, DateRangePickerCalendar, DateRangePickerCalendarProps, DateRangePickerContent, DateRangePickerContentProps, DateRangePickerDateFields, DateRangePickerDateFieldsProps, DateRangePickerPreset, DateRangePickerPresetOption, DateRangePickerPresetProps, DateRangePickerPresets, DateRangePickerPresetsProps, DateRangePickerProps, DateRangePickerReset, DateRangePickerResetProps, DateRangePickerTrigger, DateRangePickerTriggerProps, DateRangePickerValue, DateRangePickerValueProps, Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, DonutChart, DonutChartProps, Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerOverlay, DrawerOverlayProps, DrawerPortal, DrawerPortalProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps, Dropzone, DropzoneArea, DropzoneAreaProps, DropzoneDescription, DropzoneDescriptionProps, DropzoneFileList, DropzoneFileListItem, DropzoneFileListItemProps, DropzoneFileListProps, DropzoneFileMessage, DropzoneFileMessageProps, DropzoneFileStatus, DropzoneMessage, DropzoneMessageProps, DropzoneProps, DropzoneRemoveFile, DropzoneRemoveFileProps, DropzoneRetryFile, DropzoneRetryFileProps, DropzoneTrigger, DropzoneTriggerProps, DropzoneUploadResult, DropzoneValidation, Empty, EmptyContent, EmptyContentProps, EmptyDescription, EmptyDescriptionProps, EmptyHeader, EmptyHeaderProps, EmptyMedia, EmptyMediaProps, EmptyProps, EmptyTitle, EmptyTitleProps, ErrorCode, Field, FieldContent, FieldContentProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldGroup, FieldGroupProps, FieldLabel, FieldLabelProps, FieldLegend, FieldLegendProps, FieldProps, FieldSeparator, FieldSeparatorProps, FieldSet, FieldSetProps, FieldTitle, FieldTitleProps, type FileError, FileStatus, Flex, FlexProps, Grid, GridItem, GridItemProps, GridProps, Group, GroupProps, Heading, HeadingProps, HiddenFrom, HiddenFromProps, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, InfiniteProgress, InfiniteProgressProps, Input, InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupButton, InputGroupButtonProps, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupText, InputGroupTextProps, InputGroupTextarea, InputGroupTextareaProps, InputOTP, InputOTPGroup, InputOTPGroupProps, InputOTPProps, InputOTPSeparator, InputOTPSeparatorProps, InputOTPSlot, InputOTPSlotProps, InputProps, Kbd, KbdGroup, KbdGroupProps, KbdProps, Label, LabelProps, List, ListIcon, ListIconProps, ListItem, ListItemProps, ListProps, MaskInput, MaskInputProps, type MaskOptions, ModeToggle, ModeToggleProps, type ModifiedData, type Modify, NativeSelect, NativeSelectOptGroup, NativeSelectOptGroupProps, NativeSelectOption, NativeSelectOptionProps, NativeSelectProps, NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuIndicator, NavigationMenuIndicatorProps, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuList, NavigationMenuListProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, Pagination, PaginationContent, PaginationContentProps, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationProps, PieChart, PieChartBase, PieChartBaseProps, PieChartDatum, PieChartProps, Popover, PopoverAnchor, PopoverAnchorProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, Progress, ProgressProps, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps, type Replacement, ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps, ResizablePanelProps, ResponsiveValueMap, type RowData, ScrollArea, ScrollAreaProps, ScrollBar, ScrollBarProps, Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectProps, SelectScrollDownButton, SelectScrollDownButtonProps, SelectScrollUpButton, SelectScrollUpButtonProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, Separator, SeparatorProps, Sidebar, SidebarContent, SidebarContentProps, SidebarFooter, SidebarFooterProps, SidebarGroup, SidebarGroupAction, SidebarGroupActionProps, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarGroupProps, SidebarHeader, SidebarHeaderProps, SidebarInput, SidebarInputProps, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuBadge, SidebarMenuBadgeProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuItemProps, SidebarMenuProps, SidebarMenuSkeleton, SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubButtonProps, SidebarMenuSubItem, SidebarMenuSubItemProps, SidebarMenuSubProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSeparator, SidebarSeparatorProps, SidebarTrigger, SidebarTriggerProps, SimpleGrid, SimpleGridProps, Skeleton, SkeletonProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableContainer, TableContainerProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps, type TanStackTable, Text, TextProps, Textarea, TextareaProps, Theme, ThemeProvider, ThemeProviderProps, ThemeProviderState, Timeline, TimelineConnector, TimelineConnectorColor, TimelineConnectorProps, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineEmpty, TimelineEmptyProps, TimelineHeader, TimelineHeaderProps, TimelineIcon, TimelineIconColor, TimelineIconProps, TimelineIconSize, TimelineItem, TimelineItemProps, TimelineProps, TimelineStatus, TimelineTime, TimelineTimeProps, TimelineTitle, TimelineTitleProps, Toaster, ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipRoot, TooltipRootProps, TooltipTrigger, TooltipTriggerProps, type Track, type TrackingData, UIColor, UnstyledButton, UnstyledButtonProps, UseDataTableOptions, UseDisclosureHandlers, UseDisclosureOptions, UseDisclosureReturnValue, UseDropzoneProps, UseDropzoneReturn, UseIdleOptions, UseIntervalOptions, UseIntervalReturnValue, UseLocalStorageOptions, UseMaskOptions, VisibleFrom, VisibleFromProps, anchorVariants, badgeColorVariants, badgeVariants, breakpointValues, buildPieConfig, buttonColorVariants, buttonGroupVariants, buttonVariants, centerVariants, cn, composeRefs, containerVariants, createDataTableSelectColumn, defaultDataTableLabels, flexVariants, groupVariants, headingVariants, listVariants, locale, navigationMenuTriggerStyle, randomId, resolveChartColor, selectionControlColorVariants, setRef, spinnerVariants, stackVariants, tableVariants, tabsListVariants, textVariants, timelineVariants, toast, toggleVariants, uiColors, useBreakpoint, useBreakpointValue, useCarousel, useComboboxAnchor, useDataTable, useDataTableContext, useDisclosure, useDocumentVisibility, useDropzone, useFieldControlId, useIdle, useInterval, useIsMobile, useLocalStorage, useMask, useSidebar, useTheme };
|
|
@@ -231,10 +231,10 @@ Unless noted otherwise, each module also exports its public `*Props` types from
|
|
|
231
231
|
- Notes: low-level chart primitives. For app usage prefer the high-level `area-chart`, `bar-chart`, `pie-chart`, `donut-chart` modules. Import raw recharts primitives (`Bar`, `XAxis`, etc.) directly from `recharts` when composing with `ChartContainer`. `ChartColorKey` is the union of theme color tokens accepted by every high-level chart (`primary | brand | gray | zinc | red | yellow | green | blue | indigo | pink`) and resolves to `var(--{key}-500)` via `resolveChartColor`.
|
|
232
232
|
- `area-chart`
|
|
233
233
|
- Exports: `AreaChart`, `AreaChartSeries`, `AreaChartType`, `AreaChartCurveType`, `AreaChartGridAxis`
|
|
234
|
-
- Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color?, colorKey? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Use `colorKey: ChartColorKey` for theme colors (`'blue'`, `'primary'`, etc.) or `color` for raw CSS values; explicit `color` wins. Defaults to chart colors `--chart-1..5`. Pass `areaProps` to spread props (e.g. `onClick`) onto each underlying recharts `<Area>`.
|
|
234
|
+
- Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color?, colorKey? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Use `colorKey: ChartColorKey` for theme colors (`'blue'`, `'primary'`, etc.) or `color` for raw CSS values; explicit `color` wins. Defaults to chart colors `--chart-1..5`. Pass `areaProps` to spread props (e.g. `onClick`) onto each underlying recharts `<Area>`. Pass `areaChartProps` to spread props (e.g. `margin`) onto the wrapping recharts `<AreaChart>`.
|
|
235
235
|
- `bar-chart`
|
|
236
|
-
- Exports: `BarChart`, `BarChartSeries`, `BarChartType`, `BarChartOrientation`, `BarChartGridAxis`
|
|
237
|
-
- Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Series accept `color` / `colorKey`. Supports stacked and percent types. Pass `barProps` to spread props (e.g. `onClick`, `cursor`) onto each underlying recharts `<Bar>`.
|
|
236
|
+
- Exports: `BarChart`, `BarChartSeries`, `BarChartDatum`, `BarChartType`, `BarChartOrientation`, `BarChartGridAxis`
|
|
237
|
+
- Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Series accept `color` / `colorKey`. Each `data` row (`BarChartDatum`) can also set `color` / `colorKey`; when present, the row color wins over the series color and applies to every bar in that row. Series/datum `name` is free-form (spaces and non-ASCII are fine). Supports stacked and percent types. Pass `barProps` to spread props (e.g. `onClick`, `cursor`) onto each underlying recharts `<Bar>`. Pass `barChartProps` to spread props (e.g. `margin`, `barCategoryGap`) onto the wrapping recharts `<BarChart>`.
|
|
238
238
|
- `pie-chart`
|
|
239
239
|
- Exports: `PieChart`, `PieChartBase`, `PieChartDatum`, `buildPieConfig`
|
|
240
240
|
- Notes: high-level pie chart. Pass `data` as `Array<{ name, value, color?, colorKey? }>`. Supports `withLabels`, `labelsPosition`, `startAngle`, `endAngle`, `paddingAngle`, `withLegend`, `withTooltip`, `strokeWidth`, and `strokeColor` (theme key or CSS value, defaults to `var(--background)` so segment gaps match the page background). Pass `pieProps` to spread props (e.g. `onClick`) onto the underlying recharts `<Pie>`. `PieChartBase` is the shared internal renderer used by `donut-chart`.
|
package/package.json
CHANGED
|
@@ -231,10 +231,10 @@ Unless noted otherwise, each module also exports its public `*Props` types from
|
|
|
231
231
|
- Notes: low-level chart primitives. For app usage prefer the high-level `area-chart`, `bar-chart`, `pie-chart`, `donut-chart` modules. Import raw recharts primitives (`Bar`, `XAxis`, etc.) directly from `recharts` when composing with `ChartContainer`. `ChartColorKey` is the union of theme color tokens accepted by every high-level chart (`primary | brand | gray | zinc | red | yellow | green | blue | indigo | pink`) and resolves to `var(--{key}-500)` via `resolveChartColor`.
|
|
232
232
|
- `area-chart`
|
|
233
233
|
- Exports: `AreaChart`, `AreaChartSeries`, `AreaChartType`, `AreaChartCurveType`, `AreaChartGridAxis`
|
|
234
|
-
- Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color?, colorKey? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Use `colorKey: ChartColorKey` for theme colors (`'blue'`, `'primary'`, etc.) or `color` for raw CSS values; explicit `color` wins. Defaults to chart colors `--chart-1..5`. Pass `areaProps` to spread props (e.g. `onClick`) onto each underlying recharts `<Area>`.
|
|
234
|
+
- Notes: high-level area chart. Pass `data`, `series` (array of `{ name, label?, color?, colorKey? }`), and `dataKey` (X axis field). Supports `type` (default/stacked/percent/split), `curveType`, `withXAxis`, `withYAxis`, `gridAxis`, `withDots`, `withTooltip`, `withLegend`. Use `colorKey: ChartColorKey` for theme colors (`'blue'`, `'primary'`, etc.) or `color` for raw CSS values; explicit `color` wins. Defaults to chart colors `--chart-1..5`. Pass `areaProps` to spread props (e.g. `onClick`) onto each underlying recharts `<Area>`. Pass `areaChartProps` to spread props (e.g. `margin`) onto the wrapping recharts `<AreaChart>`.
|
|
235
235
|
- `bar-chart`
|
|
236
|
-
- Exports: `BarChart`, `BarChartSeries`, `BarChartType`, `BarChartOrientation`, `BarChartGridAxis`
|
|
237
|
-
- Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Series accept `color` / `colorKey`. Supports stacked and percent types. Pass `barProps` to spread props (e.g. `onClick`, `cursor`) onto each underlying recharts `<Bar>`.
|
|
236
|
+
- Exports: `BarChart`, `BarChartSeries`, `BarChartDatum`, `BarChartType`, `BarChartOrientation`, `BarChartGridAxis`
|
|
237
|
+
- Notes: high-level bar chart. Same shape as `area-chart` plus `orientation` (vertical/horizontal), `barSize`, `radius`. Series accept `color` / `colorKey`. Each `data` row (`BarChartDatum`) can also set `color` / `colorKey`; when present, the row color wins over the series color and applies to every bar in that row. Series/datum `name` is free-form (spaces and non-ASCII are fine). Supports stacked and percent types. Pass `barProps` to spread props (e.g. `onClick`, `cursor`) onto each underlying recharts `<Bar>`. Pass `barChartProps` to spread props (e.g. `margin`, `barCategoryGap`) onto the wrapping recharts `<BarChart>`.
|
|
238
238
|
- `pie-chart`
|
|
239
239
|
- Exports: `PieChart`, `PieChartBase`, `PieChartDatum`, `buildPieConfig`
|
|
240
240
|
- Notes: high-level pie chart. Pass `data` as `Array<{ name, value, color?, colorKey? }>`. Supports `withLabels`, `labelsPosition`, `startAngle`, `endAngle`, `paddingAngle`, `withLegend`, `withTooltip`, `strokeWidth`, and `strokeColor` (theme key or CSS value, defaults to `var(--background)` so segment gaps match the page background). Pass `pieProps` to spread props (e.g. `onClick`) onto the underlying recharts `<Pie>`. `PieChartBase` is the shared internal renderer used by `donut-chart`.
|