@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/tools/components/chart/SimplePieChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimplePieChart.js","names":["RechartsPieChart","SimplePieChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","dataKey","PieChart","ChartTooltip","ChartTooltipContent","Pie","ChartLegend","ChartLegendContent"],"sources":["../../../../src/tools/components/chart/SimplePieChart.tsx"],"sourcesContent":["import { Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\n/**\n * シンプルな円グラフのプロップス\n */\ninterface SimplePieChartProps {\n  /** グラフデータ配列 */\n  data: Array<Record<string, unknown>>;\n  /** 値として使用するデータキー */\n  dataKey: string;\n  /** ラベルとして使用するデータキー */\n  nameKey: string;\n  /** カードのタイトル */\n  title: string;\n  /** カードの説明（オプション） */\n  description?: string;\n  /** チャート設定 */\n  config?: ChartConfig;\n}\n\n/**\n * シンプルな円グラフ\n *\n * 割合や構成比を視覚化するためのドーナツ型円グラフ。\n *\n * @example\n * ```tsx\n * import { SimplePieChart } from '@alneas/appkit-react/tools/chart';\n *\n * const data = [\n *   { category: '製品A', value: 300, fill: 'var(--color-chart-1)' },\n *   { category: '製品B', value: 200, fill: 'var(--color-chart-2)' },\n * ];\n *\n * <SimplePieChart\n *   data={data}\n *   dataKey=\"value\"\n *   nameKey=\"category\"\n *   title=\"製品別売上\"\n * />\n * ```\n */\nexport function SimplePieChart({\n  data,\n  dataKey,\n  nameKey,\n  title,\n  description,\n  config,\n}: SimplePieChartProps) {\n  // Generate specific colors if not provided in data\n  // Ideally data should have 'fill' property or config should handle it\n\n  // Default config fallback if none provided\n  const defaultConfig = {\n    [dataKey]: {\n      label: dataKey,\n      color: 'hsl(var(--primary))',\n    },\n  } satisfies ChartConfig;\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full h-full flex flex-col'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex-1 pb-0'>\n        <ChartContainer config={finalConfig} className='mx-auto aspect-square max-h-[250px]'>\n          <RechartsPieChart>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n            <Pie data={data} dataKey={dataKey} nameKey={nameKey} innerRadius={60} strokeWidth={5} />\n            <ChartLegend\n              content={\n                <ChartLegendContent\n                  nameKey={nameKey}\n                  className='-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center'\n                />\n              }\n            />\n          </RechartsPieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAoDA,SAAgBC,EAAe,EAC7B,SACA,YACA,YACA,UACA,gBACA,aACsB;CActB,OACE,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD;GAAa,WAAU;GACrB,UAAA,kBAACC,GAAD;IAAgB,QATFC,KAAU,GAN3BC,IAAU;KACT,OAAOA;KACP,OAAO;IACT,EAG4B;IASa,WAAU;IAC7C,UAAA,kBAACX,GAAD,EAAA,UAAA;KACE,kBAACa,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,EAAqB,WAAA,GAAW,CAAA;KAAI,CAAA;KAC1E,kBAACC,GAAD;MAAW;MAAe;MAAkB;MAAS,aAAa;MAAI,aAAa;KAAI,CAAA;KACvF,kBAACC,GAAD,EACE,SACE,kBAACC,GAAD;MACW;MACT,WAAU;KACX,CAAA,EAEJ,CAAA;IACe,EAAA,CAAA;GACJ,CAAA;EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"SimplePieChart.js","names":["RechartsPieChart","SimplePieChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","dataKey","PieChart","ChartTooltip","ChartTooltipContent","Pie","ChartLegend","ChartLegendContent"],"sources":["../../../../src/tools/components/chart/SimplePieChart.tsx"],"sourcesContent":["import { Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimplePieChart\n */\ninterface SimplePieChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key containing the numeric metric.\n   */\n  dataKey: string;\n  /**\n   * Record key used for slice labels; see the specific chart for any differing series-name behavior.\n   */\n  nameKey: string;\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n}\n\n/**\n * Renders a donut chart with a fixed inner radius and legend.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimplePieChartProps.\n * @returns The rendered SimplePieChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. The donut uses innerRadius=60 and strokeWidth=5 in Recharts units. The plot is aspect-square with max-height 250px; there is no height prop. Per-slice colors should be supplied as row fill values; the default series config does not assign each slice a distinct fill.\n * @example\n * ```tsx\n * import { SimplePieChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimplePieChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} dataKey=\"sales\" nameKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimplePieChart({\n  data,\n  dataKey,\n  nameKey,\n  title,\n  description,\n  config,\n}: SimplePieChartProps) {\n  // Generate specific colors if not provided in data\n  // Ideally data should have 'fill' property or config should handle it\n\n  // Default config fallback if none provided\n  const defaultConfig = {\n    [dataKey]: {\n      label: dataKey,\n      color: 'hsl(var(--primary))',\n    },\n  } satisfies ChartConfig;\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full h-full flex flex-col'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex-1 pb-0'>\n        <ChartContainer config={finalConfig} className='mx-auto aspect-square max-h-[250px]'>\n          <RechartsPieChart>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n            <Pie data={data} dataKey={dataKey} nameKey={nameKey} innerRadius={60} strokeWidth={5} />\n            <ChartLegend\n              content={\n                <ChartLegendContent\n                  nameKey={nameKey}\n                  className='-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center'\n                />\n              }\n            />\n          </RechartsPieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AA0DA,SAAgBC,EAAe,EAC7B,SACA,YACA,YACA,UACA,gBACA,aACsB;CActB,OACE,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD;GAAa,WAAU;GACrB,UAAA,kBAACC,GAAD;IAAgB,QATFC,KAAU,GAN3BC,IAAU;KACT,OAAOA;KACP,OAAO;IACT,EAG4B;IASa,WAAU;IAC7C,UAAA,kBAACX,GAAD,EAAA,UAAA;KACE,kBAACa,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,EAAqB,WAAA,GAAW,CAAA;KAAI,CAAA;KAC1E,kBAACC,GAAD;MAAW;MAAe;MAAkB;MAAS,aAAa;MAAI,aAAa;KAAI,CAAA;KACvF,kBAACC,GAAD,EACE,SACE,kBAACC,GAAD;MACW;MACT,WAAU;KACX,CAAA,EAEJ,CAAA;IACe,EAAA,CAAA;GACJ,CAAA;EACL,CAAA,CACT;;AAEV"}

package/dist/tools/components/chart/SimpleRadarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleRadarChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RadarChart","ChartTooltip","ChartTooltipContent","PolarAngleAxis","PolarGrid","Radar","ChartLegend","ChartLegendContent","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleRadarChart","title","description","config","dataKey","height","angleKey"],"sources":["../../../../src/tools/components/chart/SimpleRadarChart.tsx"],"sourcesContent":["import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\ninterface SimpleRadarChartProps {\n  data: Array<Record<string, unknown>>;\n  dataKey: string; // The metric value\n  angleKey: string; // The category/axis label\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 複数項目のバランスや特性を比較するために多角形で描画するレーダーチャートコンポーネント。\n */\nexport function SimpleRadarChart({\n  data,\n  dataKey,\n  angleKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleRadarChartProps) {\n  const defaultConfig: ChartConfig = {\n    [dataKey]: {\n      label: dataKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={finalConfig}\n          className={`w-full min-h-[${height}] mx-auto aspect-square`}\n        >\n          <RadarChart data={data}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey={angleKey} tick={{ fill: 'var(--color-muted-foreground)' }} />\n            <PolarGrid stroke='var(--color-border)' />\n            <Radar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAyBA,SAAgBkB,EAAiB,CAC/B,OACA,UACA,WACA,QACA,cACA,SACA,SAAS,SACe,CAUxB,OACE,EAAAF,EAAA,KAAA,CAAChB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAgB,EAAA,KAAA,CAACf,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAe,EAAA,IAAA,CAACd,EAAAA,UAAD,CAAA,SAAYiB,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACb,EAAAA,gBAAD,CAAA,SAAkBiB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACZ,EAAAA,YAAD,CAAA,UACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,eAAD,CACE,OAVYgB,GAAU,EAN3BC,GAAU,CACT,MAAOA,EACP,MAAO,qBACT,CAG4B,EAWtB,UAAW,iBAAiBC,EAAO,yBAEnC,UAAA,EAAAP,EAAA,KAAA,CAACV,EAAAA,WAAD,CAAkB,OAAlB,SAAA,EACE,EAAAU,EAAA,IAAA,CAACT,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAS,EAAA,IAAA,CAACR,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GAChE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,eAAD,CAAgB,QAASe,EAAU,KAAM,CAAE,KAAM,+BAAgC,CAAI,CAAA,GACrF,EAAAR,EAAA,IAAA,CAACN,EAAAA,UAAD,CAAW,OAAO,qBAAuB,CAAA,GACzC,EAAAM,EAAA,IAAA,CAACL,EAAAA,MAAD,CACW,UACT,KAAM,eAAeW,EAAQ,GAC7B,YAAa,GACb,IAAK,CACH,EAAG,EACH,YAAa,CACf,CACD,CAAA,GACD,EAAAN,EAAA,IAAA,CAACJ,EAAAA,YAAD,CAAa,SAAS,EAAAI,EAAA,IAAA,CAACH,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACrC,C,EACE,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"SimpleRadarChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RadarChart","ChartTooltip","ChartTooltipContent","PolarAngleAxis","PolarGrid","Radar","ChartLegend","ChartLegendContent","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleRadarChart","title","description","config","dataKey","height","angleKey"],"sources":["../../../../src/tools/components/chart/SimpleRadarChart.tsx"],"sourcesContent":["import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleRadarChart\n */\ninterface SimpleRadarChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key containing the numeric metric.\n   */\n  dataKey: string; // The metric value\n  /**\n   * Record key for radar category/spoke labels.\n   */\n  angleKey: string; // The category/axis label\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders a numeric metric across category spokes in a radar chart.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleRadarChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered SimpleRadarChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. The metric uses --color-dataKey with 0.6 fill opacity and visible points. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { SimpleRadarChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleRadarChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} dataKey=\"sales\" angleKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleRadarChart({\n  data,\n  dataKey,\n  angleKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleRadarChartProps) {\n  const defaultConfig: ChartConfig = {\n    [dataKey]: {\n      label: dataKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={finalConfig}\n          className={`w-full min-h-[${height}] mx-auto aspect-square`}\n        >\n          <RadarChart data={data}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey={angleKey} tick={{ fill: 'var(--color-muted-foreground)' }} />\n            <PolarGrid stroke='var(--color-border)' />\n            <Radar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NA8DA,SAAgBkB,EAAiB,CAC/B,OACA,UACA,WACA,QACA,cACA,SACA,SAAS,SACe,CAUxB,OACE,EAAAF,EAAA,KAAA,CAAChB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAgB,EAAA,KAAA,CAACf,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAe,EAAA,IAAA,CAACd,EAAAA,UAAD,CAAA,SAAYiB,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACb,EAAAA,gBAAD,CAAA,SAAkBiB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACZ,EAAAA,YAAD,CAAA,UACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,eAAD,CACE,OAVYgB,GAAU,EAN3BC,GAAU,CACT,MAAOA,EACP,MAAO,qBACT,CAG4B,EAWtB,UAAW,iBAAiBC,EAAO,yBAEnC,UAAA,EAAAP,EAAA,KAAA,CAACV,EAAAA,WAAD,CAAkB,OAAlB,SAAA,EACE,EAAAU,EAAA,IAAA,CAACT,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAS,EAAA,IAAA,CAACR,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GAChE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,eAAD,CAAgB,QAASe,EAAU,KAAM,CAAE,KAAM,+BAAgC,CAAI,CAAA,GACrF,EAAAR,EAAA,IAAA,CAACN,EAAAA,UAAD,CAAW,OAAO,qBAAuB,CAAA,GACzC,EAAAM,EAAA,IAAA,CAACL,EAAAA,MAAD,CACW,UACT,KAAM,eAAeW,EAAQ,GAC7B,YAAa,GACb,IAAK,CACH,EAAG,EACH,YAAa,CACf,CACD,CAAA,GACD,EAAAN,EAAA,IAAA,CAACJ,EAAAA,YAAD,CAAa,SAAS,EAAAI,EAAA,IAAA,CAACH,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACrC,C,EACE,CAAA,CACL,CAAA,CACT,C,EAEV,C"}

package/dist/tools/components/chart/SimpleRadarChart.d.cts

@@ -1,15 +1,52 @@
 import { ChartConfig } from '../ui/chart.cjs';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleRadarChart
+ */
 interface SimpleRadarChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key containing the numeric metric.
+     */
     dataKey: string;
+    /**
+     * Record key for radar category/spoke labels.
+     */
     angleKey: string;
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 複数項目のバランスや特性を比較するために多角形で描画するレーダーチャートコンポーネント。
+ * Renders a numeric metric across category spokes in a radar chart.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleRadarChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered SimpleRadarChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. The metric uses --color-dataKey with 0.6 fill opacity and visible points. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { SimpleRadarChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<SimpleRadarChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} dataKey="sales" angleKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function SimpleRadarChart({ data, dataKey, angleKey, title, description, config, height, }: SimpleRadarChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/SimpleRadarChart.d.ts

@@ -1,15 +1,52 @@
 import { ChartConfig } from '../ui/chart.js';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleRadarChart
+ */
 interface SimpleRadarChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key containing the numeric metric.
+     */
     dataKey: string;
+    /**
+     * Record key for radar category/spoke labels.
+     */
     angleKey: string;
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 複数項目のバランスや特性を比較するために多角形で描画するレーダーチャートコンポーネント。
+ * Renders a numeric metric across category spokes in a radar chart.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleRadarChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered SimpleRadarChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. The metric uses --color-dataKey with 0.6 fill opacity and visible points. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { SimpleRadarChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<SimpleRadarChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} dataKey="sales" angleKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function SimpleRadarChart({ data, dataKey, angleKey, title, description, config, height, }: SimpleRadarChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/SimpleRadarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleRadarChart.js","names":["SimpleRadarChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","dataKey","height","RadarChart","ChartTooltip","ChartTooltipContent","PolarAngleAxis","angleKey","PolarGrid","Radar","ChartLegend","ChartLegendContent"],"sources":["../../../../src/tools/components/chart/SimpleRadarChart.tsx"],"sourcesContent":["import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\ninterface SimpleRadarChartProps {\n  data: Array<Record<string, unknown>>;\n  dataKey: string; // The metric value\n  angleKey: string; // The category/axis label\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 複数項目のバランスや特性を比較するために多角形で描画するレーダーチャートコンポーネント。\n */\nexport function SimpleRadarChart({\n  data,\n  dataKey,\n  angleKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleRadarChartProps) {\n  const defaultConfig: ChartConfig = {\n    [dataKey]: {\n      label: dataKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={finalConfig}\n          className={`w-full min-h-[${height}] mx-auto aspect-square`}\n        >\n          <RadarChart data={data}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey={angleKey} tick={{ fill: 'var(--color-muted-foreground)' }} />\n            <PolarGrid stroke='var(--color-border)' />\n            <Radar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAyBA,SAAgBA,EAAiB,EAC/B,SACA,YACA,aACA,UACA,gBACA,WACA,YAAS,WACe;CAUxB,OACE,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GACE,QAVYC,KAAU,GAN3BC,IAAU;IACT,OAAOA;IACP,OAAO;GACT,EAG4B;GAWtB,WAAW,iBAAiBC,EAAO;GAEnC,UAAA,kBAACC,GAAD;IAAkB;IAAlB,UAAA;KACE,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAChE,kBAACC,GAAD;MAAgB,SAASC;MAAU,MAAM,EAAE,MAAM,gCAAgC;KAAI,CAAA;KACrF,kBAACC,GAAD,EAAW,QAAO,sBAAuB,CAAA;KACzC,kBAACC,GAAD;MACW;MACT,MAAM,eAAeR,EAAQ;MAC7B,aAAa;MACb,KAAK;OACH,GAAG;OACH,aAAa;MACf;KACD,CAAA;KACD,kBAACS,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;IACrC;;EACE,CAAA,EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"SimpleRadarChart.js","names":["SimpleRadarChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","dataKey","height","RadarChart","ChartTooltip","ChartTooltipContent","PolarAngleAxis","angleKey","PolarGrid","Radar","ChartLegend","ChartLegendContent"],"sources":["../../../../src/tools/components/chart/SimpleRadarChart.tsx"],"sourcesContent":["import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleRadarChart\n */\ninterface SimpleRadarChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key containing the numeric metric.\n   */\n  dataKey: string; // The metric value\n  /**\n   * Record key for radar category/spoke labels.\n   */\n  angleKey: string; // The category/axis label\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders a numeric metric across category spokes in a radar chart.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleRadarChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered SimpleRadarChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. The metric uses --color-dataKey with 0.6 fill opacity and visible points. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { SimpleRadarChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleRadarChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} dataKey=\"sales\" angleKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleRadarChart({\n  data,\n  dataKey,\n  angleKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleRadarChartProps) {\n  const defaultConfig: ChartConfig = {\n    [dataKey]: {\n      label: dataKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={finalConfig}\n          className={`w-full min-h-[${height}] mx-auto aspect-square`}\n        >\n          <RadarChart data={data}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey={angleKey} tick={{ fill: 'var(--color-muted-foreground)' }} />\n            <PolarGrid stroke='var(--color-border)' />\n            <Radar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AA8DA,SAAgBA,EAAiB,EAC/B,SACA,YACA,aACA,UACA,gBACA,WACA,YAAS,WACe;CAUxB,OACE,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GACE,QAVYC,KAAU,GAN3BC,IAAU;IACT,OAAOA;IACP,OAAO;GACT,EAG4B;GAWtB,WAAW,iBAAiBC,EAAO;GAEnC,UAAA,kBAACC,GAAD;IAAkB;IAAlB,UAAA;KACE,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAChE,kBAACC,GAAD;MAAgB,SAASC;MAAU,MAAM,EAAE,MAAM,gCAAgC;KAAI,CAAA;KACrF,kBAACC,GAAD,EAAW,QAAO,sBAAuB,CAAA;KACzC,kBAACC,GAAD;MACW;MACT,MAAM,eAAeR,EAAQ;MAC7B,aAAa;MACb,KAAK;OACH,GAAG;OACH,aAAa;MACf;KACD,CAAA;KACD,kBAACS,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;IACrC;;EACE,CAAA,EACL,CAAA,CACT;;AAEV"}

package/dist/tools/components/chart/SimpleScatterChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleScatterChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","ScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Scatter","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleScatterChart","title","description","config","yAxisKey","height","xAxisKey","zAxisKey","nameKey"],"sources":["../../../../src/tools/components/chart/SimpleScatterChart.tsx"],"sourcesContent":["import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\ninterface SimpleScatterChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  yAxisKey: string;\n  zAxisKey?: string; // Optional for bubble size\n  nameKey?: string; // For tooltip label\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 2つの変数間の関係性をプロットして表現する散布図コンポーネント。Z軸を使用したバブルチャート表示も可能です。\n */\nexport function SimpleScatterChart({\n  data,\n  xAxisKey,\n  yAxisKey,\n  zAxisKey,\n  nameKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleScatterChartProps) {\n  // Scatter usually needs manual config since it doesn't just iterate keys\n  const defaultConfig: ChartConfig = {\n    [yAxisKey]: {\n      label: yAxisKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <ScatterChart\n            accessibilityLayer\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              type='number'\n              dataKey={xAxisKey}\n              name={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <YAxis\n              type='number'\n              dataKey={yAxisKey}\n              name={yAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            {zAxisKey && (\n              <ZAxis type='number' dataKey={zAxisKey} range={[60, 400]} name={zAxisKey} />\n            )}\n\n            <ChartTooltip cursor={{ strokeDasharray: '3 3' }} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            <Scatter name={nameKey || title} data={data} fill={`var(--color-${yAxisKey})`} />\n          </ScatterChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NA2BA,SAAgBoB,EAAmB,CACjC,OACA,WACA,WACA,WACA,UACA,QACA,cACA,SACA,SAAS,SACiB,CAW1B,OACE,EAAAF,EAAA,KAAA,CAAClB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAkB,EAAA,KAAA,CAACjB,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAiB,EAAA,IAAA,CAAChB,EAAAA,UAAD,CAAA,SAAYmB,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACf,EAAAA,gBAAD,CAAA,SAAkBmB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACd,EAAAA,YAAD,CAAA,UACE,EAAAc,EAAA,IAAA,CAACb,EAAAA,eAAD,CAAgB,OATFkB,GAAU,EAN3BC,GAAW,CACV,MAAOA,EACP,MAAO,qBACT,CAG4B,EASa,UAAW,iBAAiBC,EAAO,GACtE,UAAA,EAAAP,EAAA,KAAA,CAACZ,EAAAA,aAAD,CACE,mBAAA,GACA,OAAQ,CACN,KAAM,GACN,MAAO,EACT,EALF,SAAA,EAOE,EAAAY,EAAA,IAAA,CAACX,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAW,EAAA,IAAA,CAACV,EAAAA,MAAD,CACE,KAAK,SACL,QAASkB,EACT,KAAMA,EACN,SAAU,GACV,SAAU,GACV,WAAY,EACZ,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAR,EAAA,IAAA,CAACT,EAAAA,MAAD,CACE,KAAK,SACL,QAASe,EACT,KAAMA,EACN,SAAU,GACV,SAAU,GACV,WAAY,EACZ,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,EACAG,IACC,EAAAT,EAAA,IAAA,CAACR,EAAAA,MAAD,CAAO,KAAK,SAAS,QAASiB,EAAU,MAAO,CAAC,GAAI,GAAG,EAAG,KAAMA,CAAW,CAAA,GAG7E,EAAAT,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,OAAQ,CAAE,gBAAiB,KAAM,EAAG,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GACrF,EAAAM,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,GAE/C,EAAAI,EAAA,IAAA,CAACH,EAAAA,QAAD,CAAS,KAAMa,GAAWP,EAAa,OAAM,KAAM,eAAeG,EAAS,EAAK,CAAA,CACpE,C,EACA,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"SimpleScatterChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","ScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Scatter","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleScatterChart","title","description","config","yAxisKey","height","xAxisKey","zAxisKey","nameKey"],"sources":["../../../../src/tools/components/chart/SimpleScatterChart.tsx"],"sourcesContent":["import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleScatterChart\n */\ninterface SimpleScatterChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Record key containing numeric vertical-axis values.\n   */\n  yAxisKey: string;\n  /**\n   * Optional numeric record key controlling scatter bubble size; omitted uses ordinary scatter points.\n   */\n  zAxisKey?: string; // Optional for bubble size\n  /**\n   * Constant Scatter series name (fallback title); this is not a per-row key lookup.\n   */\n  nameKey?: string; // For tooltip label\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders numeric X/Y observations with optional Z-driven bubble sizes.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleScatterChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered SimpleScatterChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. nameKey supplies the constant Scatter series name (fallback title), rather than selecting a per-row tooltip label. Z bubbles use range [60, 400]. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { SimpleScatterChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleScatterChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} xAxisKey=\"x\" yAxisKey=\"sales\" zAxisKey=\"size\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleScatterChart({\n  data,\n  xAxisKey,\n  yAxisKey,\n  zAxisKey,\n  nameKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleScatterChartProps) {\n  // Scatter usually needs manual config since it doesn't just iterate keys\n  const defaultConfig: ChartConfig = {\n    [yAxisKey]: {\n      label: yAxisKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <ScatterChart\n            accessibilityLayer\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              type='number'\n              dataKey={xAxisKey}\n              name={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <YAxis\n              type='number'\n              dataKey={yAxisKey}\n              name={yAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            {zAxisKey && (\n              <ZAxis type='number' dataKey={zAxisKey} range={[60, 400]} name={zAxisKey} />\n            )}\n\n            <ChartTooltip cursor={{ strokeDasharray: '3 3' }} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            <Scatter name={nameKey || title} data={data} fill={`var(--color-${yAxisKey})`} />\n          </ScatterChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAsEA,SAAgBoB,EAAmB,CACjC,OACA,WACA,WACA,WACA,UACA,QACA,cACA,SACA,SAAS,SACiB,CAW1B,OACE,EAAAF,EAAA,KAAA,CAAClB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAkB,EAAA,KAAA,CAACjB,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAiB,EAAA,IAAA,CAAChB,EAAAA,UAAD,CAAA,SAAYmB,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACf,EAAAA,gBAAD,CAAA,SAAkBmB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACd,EAAAA,YAAD,CAAA,UACE,EAAAc,EAAA,IAAA,CAACb,EAAAA,eAAD,CAAgB,OATFkB,GAAU,EAN3BC,GAAW,CACV,MAAOA,EACP,MAAO,qBACT,CAG4B,EASa,UAAW,iBAAiBC,EAAO,GACtE,UAAA,EAAAP,EAAA,KAAA,CAACZ,EAAAA,aAAD,CACE,mBAAA,GACA,OAAQ,CACN,KAAM,GACN,MAAO,EACT,EALF,SAAA,EAOE,EAAAY,EAAA,IAAA,CAACX,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAW,EAAA,IAAA,CAACV,EAAAA,MAAD,CACE,KAAK,SACL,QAASkB,EACT,KAAMA,EACN,SAAU,GACV,SAAU,GACV,WAAY,EACZ,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAR,EAAA,IAAA,CAACT,EAAAA,MAAD,CACE,KAAK,SACL,QAASe,EACT,KAAMA,EACN,SAAU,GACV,SAAU,GACV,WAAY,EACZ,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,EACAG,IACC,EAAAT,EAAA,IAAA,CAACR,EAAAA,MAAD,CAAO,KAAK,SAAS,QAASiB,EAAU,MAAO,CAAC,GAAI,GAAG,EAAG,KAAMA,CAAW,CAAA,GAG7E,EAAAT,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,OAAQ,CAAE,gBAAiB,KAAM,EAAG,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,GACrF,EAAAM,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,GAE/C,EAAAI,EAAA,IAAA,CAACH,EAAAA,QAAD,CAAS,KAAMa,GAAWP,EAAa,OAAM,KAAM,eAAeG,EAAS,EAAK,CAAA,CACpE,C,EACA,CAAA,CACL,CAAA,CACT,C,EAEV,C"}

package/dist/tools/components/chart/SimpleScatterChart.d.cts

@@ -1,17 +1,60 @@
 import { ChartConfig } from '../ui/chart.cjs';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleScatterChart
+ */
 interface SimpleScatterChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Record key containing numeric vertical-axis values.
+     */
     yAxisKey: string;
+    /**
+     * Optional numeric record key controlling scatter bubble size; omitted uses ordinary scatter points.
+     */
     zAxisKey?: string;
+    /**
+     * Constant Scatter series name (fallback title); this is not a per-row key lookup.
+     */
     nameKey?: string;
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 2つの変数間の関係性をプロットして表現する散布図コンポーネント。Z軸を使用したバブルチャート表示も可能です。
+ * Renders numeric X/Y observations with optional Z-driven bubble sizes.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleScatterChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered SimpleScatterChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. nameKey supplies the constant Scatter series name (fallback title), rather than selecting a per-row tooltip label. Z bubbles use range [60, 400]. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { SimpleScatterChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<SimpleScatterChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} xAxisKey="x" yAxisKey="sales" zAxisKey="size" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function SimpleScatterChart({ data, xAxisKey, yAxisKey, zAxisKey, nameKey, title, description, config, height, }: SimpleScatterChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/SimpleScatterChart.d.ts

@@ -1,17 +1,60 @@
 import { ChartConfig } from '../ui/chart.js';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleScatterChart
+ */
 interface SimpleScatterChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Record key containing numeric vertical-axis values.
+     */
     yAxisKey: string;
+    /**
+     * Optional numeric record key controlling scatter bubble size; omitted uses ordinary scatter points.
+     */
     zAxisKey?: string;
+    /**
+     * Constant Scatter series name (fallback title); this is not a per-row key lookup.
+     */
     nameKey?: string;
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 2つの変数間の関係性をプロットして表現する散布図コンポーネント。Z軸を使用したバブルチャート表示も可能です。
+ * Renders numeric X/Y observations with optional Z-driven bubble sizes.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleScatterChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered SimpleScatterChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. nameKey supplies the constant Scatter series name (fallback title), rather than selecting a per-row tooltip label. Z bubbles use range [60, 400]. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { SimpleScatterChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<SimpleScatterChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} xAxisKey="x" yAxisKey="sales" zAxisKey="size" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function SimpleScatterChart({ data, xAxisKey, yAxisKey, zAxisKey, nameKey, title, description, config, height, }: SimpleScatterChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/SimpleScatterChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleScatterChart.js","names":["SimpleScatterChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","yAxisKey","height","ScatterChart","CartesianGrid","XAxis","xAxisKey","YAxis","zAxisKey","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Scatter","nameKey"],"sources":["../../../../src/tools/components/chart/SimpleScatterChart.tsx"],"sourcesContent":["import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\ninterface SimpleScatterChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  yAxisKey: string;\n  zAxisKey?: string; // Optional for bubble size\n  nameKey?: string; // For tooltip label\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 2つの変数間の関係性をプロットして表現する散布図コンポーネント。Z軸を使用したバブルチャート表示も可能です。\n */\nexport function SimpleScatterChart({\n  data,\n  xAxisKey,\n  yAxisKey,\n  zAxisKey,\n  nameKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleScatterChartProps) {\n  // Scatter usually needs manual config since it doesn't just iterate keys\n  const defaultConfig: ChartConfig = {\n    [yAxisKey]: {\n      label: yAxisKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <ScatterChart\n            accessibilityLayer\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              type='number'\n              dataKey={xAxisKey}\n              name={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <YAxis\n              type='number'\n              dataKey={yAxisKey}\n              name={yAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            {zAxisKey && (\n              <ZAxis type='number' dataKey={zAxisKey} range={[60, 400]} name={zAxisKey} />\n            )}\n\n            <ChartTooltip cursor={{ strokeDasharray: '3 3' }} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            <Scatter name={nameKey || title} data={data} fill={`var(--color-${yAxisKey})`} />\n          </ScatterChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgBA,EAAmB,EACjC,SACA,aACA,aACA,aACA,YACA,UACA,gBACA,WACA,YAAS,WACiB;CAW1B,OACE,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAU,GAN3BC,IAAW;IACV,OAAOA;IACP,OAAO;GACT,EAG4B;GASa,WAAW,iBAAiBC,EAAO;GACtE,UAAA,kBAACC,GAAD;IACE,oBAAA;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IALF,UAAA;KAOE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,MAAK;MACL,SAASC;MACT,MAAMA;MACN,UAAU;MACV,UAAU;MACV,YAAY;MACZ,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MACE,MAAK;MACL,SAASN;MACT,MAAMA;MACN,UAAU;MACV,UAAU;MACV,YAAY;MACZ,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACAO,KACC,kBAACC,GAAD;MAAO,MAAK;MAAS,SAASD;MAAU,OAAO,CAAC,IAAI,GAAG;MAAG,MAAMA;KAAW,CAAA;KAG7E,kBAACE,GAAD;MAAc,QAAQ,EAAE,iBAAiB,MAAM;MAAG,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KACrF,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAE/C,kBAACC,GAAD;MAAS,MAAMC,KAAWpB;MAAa;MAAM,MAAM,eAAeM,EAAS;KAAK,CAAA;IACpE;;EACA,CAAA,EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"SimpleScatterChart.js","names":["SimpleScatterChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","yAxisKey","height","ScatterChart","CartesianGrid","XAxis","xAxisKey","YAxis","zAxisKey","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Scatter","nameKey"],"sources":["../../../../src/tools/components/chart/SimpleScatterChart.tsx"],"sourcesContent":["import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleScatterChart\n */\ninterface SimpleScatterChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Record key containing numeric vertical-axis values.\n   */\n  yAxisKey: string;\n  /**\n   * Optional numeric record key controlling scatter bubble size; omitted uses ordinary scatter points.\n   */\n  zAxisKey?: string; // Optional for bubble size\n  /**\n   * Constant Scatter series name (fallback title); this is not a per-row key lookup.\n   */\n  nameKey?: string; // For tooltip label\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders numeric X/Y observations with optional Z-driven bubble sizes.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleScatterChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered SimpleScatterChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. nameKey supplies the constant Scatter series name (fallback title), rather than selecting a per-row tooltip label. Z bubbles use range [60, 400]. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { SimpleScatterChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleScatterChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} xAxisKey=\"x\" yAxisKey=\"sales\" zAxisKey=\"size\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleScatterChart({\n  data,\n  xAxisKey,\n  yAxisKey,\n  zAxisKey,\n  nameKey,\n  title,\n  description,\n  config,\n  height = '300px',\n}: SimpleScatterChartProps) {\n  // Scatter usually needs manual config since it doesn't just iterate keys\n  const defaultConfig: ChartConfig = {\n    [yAxisKey]: {\n      label: yAxisKey,\n      color: 'hsl(var(--chart-1))',\n    },\n  };\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <ScatterChart\n            accessibilityLayer\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              type='number'\n              dataKey={xAxisKey}\n              name={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <YAxis\n              type='number'\n              dataKey={yAxisKey}\n              name={yAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            {zAxisKey && (\n              <ZAxis type='number' dataKey={zAxisKey} range={[60, 400]} name={zAxisKey} />\n            )}\n\n            <ChartTooltip cursor={{ strokeDasharray: '3 3' }} content={<ChartTooltipContent />} />\n            <ChartLegend content={<ChartLegendContent />} />\n\n            <Scatter name={nameKey || title} data={data} fill={`var(--color-${yAxisKey})`} />\n          </ScatterChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAsEA,SAAgBA,EAAmB,EACjC,SACA,aACA,aACA,aACA,YACA,UACA,gBACA,WACA,YAAS,WACiB;CAW1B,OACE,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAU,GAN3BC,IAAW;IACV,OAAOA;IACP,OAAO;GACT,EAG4B;GASa,WAAW,iBAAiBC,EAAO;GACtE,UAAA,kBAACC,GAAD;IACE,oBAAA;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IALF,UAAA;KAOE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,MAAK;MACL,SAASC;MACT,MAAMA;MACN,UAAU;MACV,UAAU;MACV,YAAY;MACZ,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MACE,MAAK;MACL,SAASN;MACT,MAAMA;MACN,UAAU;MACV,UAAU;MACV,YAAY;MACZ,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACAO,KACC,kBAACC,GAAD;MAAO,MAAK;MAAS,SAASD;MAAU,OAAO,CAAC,IAAI,GAAG;MAAG,MAAMA;KAAW,CAAA;KAG7E,kBAACE,GAAD;MAAc,QAAQ,EAAE,iBAAiB,MAAM;MAAG,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KACrF,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAE/C,kBAACC,GAAD;MAAS,MAAMC,KAAWpB;MAAa;MAAM,MAAM,eAAeM,EAAS;KAAK,CAAA;IACpE;;EACA,CAAA,EACL,CAAA,CACT;;AAEV"}

package/dist/tools/components/chart/StackedBarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","BarChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","StackedBarChart","defaultConfig","barKeys","key","index","title","description","config","height","xAxisKey","value"],"sources":["../../../../src/tools/components/chart/StackedBarChart.tsx"],"sourcesContent":["import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\ninterface StackedBarChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  barKeys: string[];\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 複数のカテゴリデータを1本の棒に積み上げて全体の割合や構成比を表示する積層棒グラフコンポーネント。\n */\nexport function StackedBarChart({\n  data,\n  xAxisKey,\n  barKeys,\n  title,\n  description,\n  config,\n  height = '300px',\n}: StackedBarChartProps) {\n  const defaultConfig: ChartConfig = {};\n  barKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <BarChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {barKeys.map((key) => (\n              <Bar\n                key={key}\n                dataKey={key}\n                stackId='a'\n                fill={`var(--color-${key})`}\n                radius={[0, 0, 4, 4]}\n              />\n            ))}\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAyBA,SAAgBkB,EAAgB,CAC9B,OACA,WACA,UACA,QACA,cACA,SACA,SAAS,SACc,CACvB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAQ,SAAS,EAAK,IAAU,CAC9B,EAAcC,GAAO,CACnB,MAAOA,EACP,MAAO,mBAAoBC,EAAQ,EAAK,EAAE,GAC5C,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAAChB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAgB,EAAA,KAAA,CAACf,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAe,EAAA,IAAA,CAACd,EAAAA,UAAD,CAAA,SAAYqB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACb,EAAAA,gBAAD,CAAA,SAAkBqB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACZ,EAAAA,YAAD,CAAA,UACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,eAAD,CAAgB,OATFoB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACV,EAAAA,SAAD,CAAU,mBAAA,GAAyB,OAAnC,SAAA,EACE,EAAAU,EAAA,IAAA,CAACT,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAS,EAAA,IAAA,CAACR,EAAAA,MAAD,CACE,QAASmB,EACT,SAAU,GACV,WAAY,GACZ,SAAU,GACV,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAqB,UAAA,EAAW,CAAA,CAAI,CAAA,GAC3D,EAAAM,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,EAC9CQ,EAAQ,IAAK,IACZ,EAAAJ,EAAA,IAAA,CAACH,EAAAA,IAAD,CAEE,QAASQ,EACT,QAAQ,IACR,KAAM,eAAeA,EAAI,GACzB,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,CACpB,EALMA,CAKN,CACF,CACO,C,EACI,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"StackedBarChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","BarChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","StackedBarChart","defaultConfig","barKeys","key","index","title","description","config","height","xAxisKey","value"],"sources":["../../../../src/tools/components/chart/StackedBarChart.tsx"],"sourcesContent":["import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see StackedBarChart\n */\ninterface StackedBarChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Record keys for numeric series stacked together in declared order.\n   */\n  barKeys: string[];\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders numeric series in one shared stacked-bar group.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see StackedBarChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered StackedBarChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. All bars share stack ID a; values are not normalized into percentages by this wrapper. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { StackedBarChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<StackedBarChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} barKeys={[\"sales\"]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function StackedBarChart({\n  data,\n  xAxisKey,\n  barKeys,\n  title,\n  description,\n  config,\n  height = '300px',\n}: StackedBarChartProps) {\n  const defaultConfig: ChartConfig = {};\n  barKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <BarChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {barKeys.map((key) => (\n              <Bar\n                key={key}\n                dataKey={key}\n                stackId='a'\n                fill={`var(--color-${key})`}\n                radius={[0, 0, 4, 4]}\n              />\n            ))}\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NA8DA,SAAgBkB,EAAgB,CAC9B,OACA,WACA,UACA,QACA,cACA,SACA,SAAS,SACc,CACvB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAQ,SAAS,EAAK,IAAU,CAC9B,EAAcC,GAAO,CACnB,MAAOA,EACP,MAAO,mBAAoBC,EAAQ,EAAK,EAAE,GAC5C,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAAChB,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAgB,EAAA,KAAA,CAACf,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAe,EAAA,IAAA,CAACd,EAAAA,UAAD,CAAA,SAAYqB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACb,EAAAA,gBAAD,CAAA,SAAkBqB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACZ,EAAAA,YAAD,CAAA,UACE,EAAAY,EAAA,IAAA,CAACX,EAAAA,eAAD,CAAgB,OATFoB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACV,EAAAA,SAAD,CAAU,mBAAA,GAAyB,OAAnC,SAAA,EACE,EAAAU,EAAA,IAAA,CAACT,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAS,EAAA,IAAA,CAACR,EAAAA,MAAD,CACE,QAASmB,EACT,SAAU,GACV,WAAY,GACZ,SAAU,GACV,cAAgB,GAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,EAAG,CAAC,EAClD,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAqB,UAAA,EAAW,CAAA,CAAI,CAAA,GAC3D,EAAAM,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,EAC9CQ,EAAQ,IAAK,IACZ,EAAAJ,EAAA,IAAA,CAACH,EAAAA,IAAD,CAEE,QAASQ,EACT,QAAQ,IACR,KAAM,eAAeA,EAAI,GACzB,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,CACpB,EALMA,CAKN,CACF,CACO,C,EACI,CAAA,CACL,CAAA,CACT,C,EAEV,C"}

package/dist/tools/components/chart/StackedBarChart.d.cts

@@ -1,15 +1,52 @@
 import { ChartConfig } from '../ui/chart.cjs';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see StackedBarChart
+ */
 interface StackedBarChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Record keys for numeric series stacked together in declared order.
+     */
     barKeys: string[];
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 複数のカテゴリデータを1本の棒に積み上げて全体の割合や構成比を表示する積層棒グラフコンポーネント。
+ * Renders numeric series in one shared stacked-bar group.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see StackedBarChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered StackedBarChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. All bars share stack ID a; values are not normalized into percentages by this wrapper. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { StackedBarChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<StackedBarChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} barKeys={["sales"]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function StackedBarChart({ data, xAxisKey, barKeys, title, description, config, height, }: StackedBarChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/StackedBarChart.d.ts

@@ -1,15 +1,52 @@
 import { ChartConfig } from '../ui/chart.js';
+/**
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see StackedBarChart
+ */
 interface StackedBarChartProps {
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
+    /**
+     * Record keys for numeric series stacked together in declared order.
+     */
     barKeys: string[];
+    /**
+     * Visible card heading.
+     */
     title: string;
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
+    /**
+     * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.
+     */
     config?: ChartConfig;
+    /**
+     * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.
+     */
     height?: number | string;
 }
 /**
- * 複数のカテゴリデータを1本の棒に積み上げて全体の割合や構成比を表示する積層棒グラフコンポーネント。
+ * Renders numeric series in one shared stacked-bar group.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see StackedBarChartProps. Wrapper defaults: height='300px'.
+ * @returns The rendered StackedBarChart composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. All bars share stack ID a; values are not normalized into percentages by this wrapper. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.
+ * @example
+ * ```tsx
+ * import { StackedBarChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<StackedBarChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} barKeys={["sales"]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
+ * ```
  */
 export declare function StackedBarChart({ data, xAxisKey, barKeys, title, description, config, height, }: StackedBarChartProps): import('react').JSX.Element;
 export {};

package/dist/tools/components/chart/StackedBarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.js","names":["StackedBarChart","defaultConfig","barKeys","key","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","BarChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar"],"sources":["../../../../src/tools/components/chart/StackedBarChart.tsx"],"sourcesContent":["import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\ninterface StackedBarChartProps {\n  data: Array<Record<string, unknown>>;\n  xAxisKey: string;\n  barKeys: string[];\n  title: string;\n  description?: string;\n  config?: ChartConfig;\n  height?: number | string;\n}\n\n/**\n * 複数のカテゴリデータを1本の棒に積み上げて全体の割合や構成比を表示する積層棒グラフコンポーネント。\n */\nexport function StackedBarChart({\n  data,\n  xAxisKey,\n  barKeys,\n  title,\n  description,\n  config,\n  height = '300px',\n}: StackedBarChartProps) {\n  const defaultConfig: ChartConfig = {};\n  barKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <BarChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {barKeys.map((key) => (\n              <Bar\n                key={key}\n                dataKey={key}\n                stackId='a'\n                fill={`var(--color-${key})`}\n                radius={[0, 0, 4, 4]}\n              />\n            ))}\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAyBA,SAAgBA,EAAgB,EAC9B,SACA,aACA,YACA,UACA,gBACA,WACA,YAAS,WACc;CACvB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAQ,SAAS,GAAK,MAAU;EAC9B,EAAcC,KAAO;GACnB,OAAOA;GACP,OAAO,mBAAoBC,IAAQ,IAAK,EAAE;EAC5C;CACF,CAAC,GAKC,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAUZ;GASa,WAAW,iBAAiBa,EAAO;GACtE,UAAA,kBAACC,GAAD;IAAU,oBAAA;IAAyB;IAAnC,UAAA;KACE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,YAAY;MACZ,UAAU;MACV,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;MAClD,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD,EAAc,SAAS,kBAACC,GAAD,EAAqB,WAAA,GAAW,CAAA,EAAI,CAAA;KAC3D,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC9CrB,EAAQ,KAAK,MACZ,kBAACsB,GAAD;MAEE,SAASrB;MACT,SAAQ;MACR,MAAM,eAAeA,EAAI;MACzB,QAAQ;OAAC;OAAG;OAAG;OAAG;MAAC;KACpB,GALMA,CAKN,CACF;IACO;;EACI,CAAA,EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"StackedBarChart.js","names":["StackedBarChart","defaultConfig","barKeys","key","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","BarChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar"],"sources":["../../../../src/tools/components/chart/StackedBarChart.tsx"],"sourcesContent":["import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see StackedBarChart\n */\ninterface StackedBarChartProps {\n  /**\n   * Already-loaded records in plot order; required numeric values and category keys must be present.\n   */\n  data: Array<Record<string, unknown>>;\n  /**\n   * Record key used for the horizontal axis; category charts format ticks to the first five characters.\n   */\n  xAxisKey: string;\n  /**\n   * Record keys for numeric series stacked together in declared order.\n   */\n  barKeys: string[];\n  /**\n   * Visible card heading.\n   */\n  title: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Optional ChartConfig replacing the generated config; keys should match plotted series. The wrapper does not merge missing entries.\n   */\n  config?: ChartConfig;\n  /**\n   * Requested chart height/minimum height. See the owning component: only SimpleBarChart applies inline style; other wrappers build a dynamic min-height utility class.\n   */\n  height?: number | string;\n}\n\n/**\n * Renders numeric series in one shared stacked-bar group.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see StackedBarChartProps. Wrapper defaults: height='300px'.\n * @returns The rendered StackedBarChart composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional recharts peer. The wrapper supplies ChartContainer context; no external query or chart provider is required. The host supplies already-loaded numeric data and a container with measurable dimensions. config replaces the generated series config rather than merging it. Series configuration emits --color-KEY variables; provide valid CSS colors when overriding defaults. This component does not fetch, aggregate or persist data. height defaults to 300px. All bars share stack ID a; values are not normalized into percentages by this wrapper. height is interpolated into a dynamic min-h-[VALUE] utility class, not an inline pixel height; matching CSS must exist in the host build for that minimum height to take effect.\n * @example\n * ```tsx\n * import { StackedBarChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<StackedBarChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} barKeys={[\"sales\"]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function StackedBarChart({\n  data,\n  xAxisKey,\n  barKeys,\n  title,\n  description,\n  config,\n  height = '300px',\n}: StackedBarChartProps) {\n  const defaultConfig: ChartConfig = {};\n  barKeys.forEach((key, index) => {\n    defaultConfig[key] = {\n      label: key,\n      color: `hsl(var(--chart-${(index % 5) + 1}))`,\n    };\n  });\n\n  const finalConfig = config || defaultConfig;\n\n  return (\n    <Card className='w-full'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={finalConfig} className={`w-full min-h-[${height}]`}>\n          <BarChart accessibilityLayer data={data}>\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => String(value).slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            {barKeys.map((key) => (\n              <Bar\n                key={key}\n                dataKey={key}\n                stackId='a'\n                fill={`var(--color-${key})`}\n                radius={[0, 0, 4, 4]}\n              />\n            ))}\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AA8DA,SAAgBA,EAAgB,EAC9B,SACA,aACA,YACA,UACA,gBACA,WACA,YAAS,WACc;CACvB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAQ,SAAS,GAAK,MAAU;EAC9B,EAAcC,KAAO;GACnB,OAAOA;GACP,OAAO,mBAAoBC,IAAQ,IAAK,EAAE;EAC5C;CACF,CAAC,GAKC,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD,EAAA,UACE,kBAACC,GAAD;GAAgB,QATFC,KAAUZ;GASa,WAAW,iBAAiBa,EAAO;GACtE,UAAA,kBAACC,GAAD;IAAU,oBAAA;IAAyB;IAAnC,UAAA;KACE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,YAAY;MACZ,UAAU;MACV,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;MAClD,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD,EAAc,SAAS,kBAACC,GAAD,EAAqB,WAAA,GAAW,CAAA,EAAI,CAAA;KAC3D,kBAACC,GAAD,EAAa,SAAS,kBAACC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC9CrB,EAAQ,KAAK,MACZ,kBAACsB,GAAD;MAEE,SAASrB;MACT,SAAQ;MACR,MAAM,eAAeA,EAAI;MACzB,QAAQ;OAAC;OAAG;OAAG;OAAG;MAAC;KACpB,GALMA,CAKN,CACF;IACO;;EACI,CAAA,EACL,CAAA,CACT;;AAEV"}