@alneas/appkit-react 0.1.0 → 0.3.0

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

@@ -1,45 +1,55 @@
 import { ChartConfig } from '../ui/chart.cjs';
 /**
- * シンプルな棒グラフのプロップス
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleBarChart
  */
 interface SimpleBarChartProps {
-    /** グラフデータ配列 */
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
-    /** X軸に使用するデータキー */
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
-    /** 棒グラフとして表示するデータキー */
+    /**
+     * Record key containing the single numeric bar metric.
+     */
     barKey: 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;
-    /** 棒グラフの色 */
+    /**
+     * Bar fill CSS color; defaults to var(--color-bar), independently of barKey.
+     */
     barColor?: string;
 }
 /**
- * シンプルな棒グラフ
- *
- * カテゴリ別の値を比較するための棒グラフコンポーネント。
- *
+ * Renders one numeric series as a rounded bar chart.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleBarChartProps. Wrapper defaults: height='200px', barColor='var(--color-bar)'.
+ * @returns The rendered SimpleBarChart 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 200px and is applied as an inline style (numbers are React CSS pixel values). barColor defaults to var(--color-bar), which does not automatically match a differently named barKey; provide a matching variable or literal color.
  * @example
  * ```tsx
  * import { SimpleBarChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
  *
- * const data = [
- *   { month: '1月', sales: 100 },
- *   { month: '2月', sales: 150 },
- * ];
- *
- * <SimpleBarChart
- *   data={data}
- *   xAxisKey="month"
- *   barKey="sales"
- *   title="月別売上"
- * />
+ * export function Example() {
+ *   return (<SimpleBarChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} barKey="sales" xAxisKey="month" barColor="var(--color-sales)" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
  * ```
  */
 export declare function SimpleBarChart({ data, xAxisKey, barKey, title, description, config, height, barColor, }: SimpleBarChartProps): import('react').JSX.Element;

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

@@ -1,45 +1,55 @@
 import { ChartConfig } from '../ui/chart.js';
 /**
- * シンプルな棒グラフのプロップス
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleBarChart
  */
 interface SimpleBarChartProps {
-    /** グラフデータ配列 */
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
-    /** X軸に使用するデータキー */
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
-    /** 棒グラフとして表示するデータキー */
+    /**
+     * Record key containing the single numeric bar metric.
+     */
     barKey: 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;
-    /** 棒グラフの色 */
+    /**
+     * Bar fill CSS color; defaults to var(--color-bar), independently of barKey.
+     */
     barColor?: string;
 }
 /**
- * シンプルな棒グラフ
- *
- * カテゴリ別の値を比較するための棒グラフコンポーネント。
- *
+ * Renders one numeric series as a rounded bar chart.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleBarChartProps. Wrapper defaults: height='200px', barColor='var(--color-bar)'.
+ * @returns The rendered SimpleBarChart 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 200px and is applied as an inline style (numbers are React CSS pixel values). barColor defaults to var(--color-bar), which does not automatically match a differently named barKey; provide a matching variable or literal color.
  * @example
  * ```tsx
  * import { SimpleBarChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
  *
- * const data = [
- *   { month: '1月', sales: 100 },
- *   { month: '2月', sales: 150 },
- * ];
- *
- * <SimpleBarChart
- *   data={data}
- *   xAxisKey="month"
- *   barKey="sales"
- *   title="月別売上"
- * />
+ * export function Example() {
+ *   return (<SimpleBarChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} barKey="sales" xAxisKey="month" barColor="var(--color-sales)" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
  * ```
  */
 export declare function SimpleBarChart({ data, xAxisKey, barKey, title, description, config, height, barColor, }: SimpleBarChartProps): import('react').JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleBarChart.js","names":["RechartsBarChart","SimpleBarChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","barKey","BarChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","Bar","barColor"],"sources":["../../../../src/tools/components/chart/SimpleBarChart.tsx"],"sourcesContent":["import { Bar, BarChart as RechartsBarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * シンプルな棒グラフのプロップス\n */\ninterface SimpleBarChartProps {\n  /** グラフデータ配列 */\n  data: Array<Record<string, unknown>>;\n  /** X軸に使用するデータキー */\n  xAxisKey: string;\n  /** 棒グラフとして表示するデータキー */\n  barKey: string;\n  /** カードのタイトル */\n  title: string;\n  /** カードの説明（オプション） */\n  description?: string;\n  /** チャート設定 */\n  config?: ChartConfig;\n  /** グラフの高さ */\n  height?: number | string;\n  /** 棒グラフの色 */\n  barColor?: string;\n}\n\n/**\n * シンプルな棒グラフ\n *\n * カテゴリ別の値を比較するための棒グラフコンポーネント。\n *\n * @example\n * ```tsx\n * import { SimpleBarChart } from '@alneas/appkit-react/tools/chart';\n *\n * const data = [\n *   { month: '1月', sales: 100 },\n *   { month: '2月', sales: 150 },\n * ];\n *\n * <SimpleBarChart\n *   data={data}\n *   xAxisKey=\"month\"\n *   barKey=\"sales\"\n *   title=\"月別売上\"\n * />\n * ```\n */\nexport function SimpleBarChart({\n  data,\n  xAxisKey,\n  barKey,\n  title,\n  description,\n  config,\n  height = '200px',\n  barColor = 'var(--color-bar)',\n}: SimpleBarChartProps) {\n  const defaultConfig = {\n    [barKey]: {\n      label: barKey,\n      color: 'hsl(var(--primary))',\n    },\n  } satisfies ChartConfig;\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 className='pl-2'>\n        <ChartContainer config={finalConfig} className=\"w-full aspect-auto\" style={{ height }}>\n          <RechartsBarChart 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 />} />\n            <Bar dataKey={barKey} fill={barColor} radius={4} />\n          </RechartsBarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAiDA,SAAgBC,EAAe,EAC7B,SACA,aACA,WACA,UACA,gBACA,WACA,YAAS,SACT,cAAW,sBACW;CAUtB,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,IAAS;KACR,OAAOA;KACP,OAAO;IACT,EAG4B;IASa,WAAU;IAAqB,OAAO,EAAE,UAAO;IAClF,UAAA,kBAACX,GAAD;KAAkB,oBAAA;KAAyB;KAA3C,UAAA;MACE,kBAACa,GAAD;OAAe,UAAU;OAAO,QAAO;MAAuB,CAAA;MAC9D,kBAACC,GAAD;OACE,SAASC;OACT,UAAU;OACV,YAAY;OACZ,UAAU;OACV,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;OAClD,MAAM,EAAE,MAAM,gCAAgC;MAC/C,CAAA;MACD,kBAACC,GAAD,EAAc,SAAS,kBAACC,GAAD,CAAsB,CAAA,EAAI,CAAA;MACjD,kBAACC,GAAD;OAAK,SAASR;OAAQ,MAAMS;OAAU,QAAQ;MAAI,CAAA;KAClC;;GACJ,CAAA;EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"SimpleBarChart.js","names":["RechartsBarChart","SimpleBarChart","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","barKey","BarChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","Bar","barColor"],"sources":["../../../../src/tools/components/chart/SimpleBarChart.tsx"],"sourcesContent":["import { Bar, BarChart as RechartsBarChart, CartesianGrid, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleBarChart\n */\ninterface SimpleBarChartProps {\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 the single numeric bar metric.\n   */\n  barKey: 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   * Bar fill CSS color; defaults to var(--color-bar), independently of barKey.\n   */\n  barColor?: string;\n}\n\n/**\n * Renders one numeric series as a rounded bar chart.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleBarChartProps. Wrapper defaults: height='200px', barColor='var(--color-bar)'.\n * @returns The rendered SimpleBarChart 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 200px and is applied as an inline style (numbers are React CSS pixel values). barColor defaults to var(--color-bar), which does not automatically match a differently named barKey; provide a matching variable or literal color.\n * @example\n * ```tsx\n * import { SimpleBarChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleBarChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} barKey=\"sales\" xAxisKey=\"month\" barColor=\"var(--color-sales)\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleBarChart({\n  data,\n  xAxisKey,\n  barKey,\n  title,\n  description,\n  config,\n  height = '200px',\n  barColor = 'var(--color-bar)',\n}: SimpleBarChartProps) {\n  const defaultConfig = {\n    [barKey]: {\n      label: barKey,\n      color: 'hsl(var(--primary))',\n    },\n  } satisfies ChartConfig;\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 className='pl-2'>\n        <ChartContainer config={finalConfig} className=\"w-full aspect-auto\" style={{ height }}>\n          <RechartsBarChart 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 />} />\n            <Bar dataKey={barKey} fill={barColor} radius={4} />\n          </RechartsBarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AA2DA,SAAgBC,EAAe,EAC7B,SACA,aACA,WACA,UACA,gBACA,WACA,YAAS,SACT,cAAW,sBACW;CAUtB,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,IAAS;KACR,OAAOA;KACP,OAAO;IACT,EAG4B;IASa,WAAU;IAAqB,OAAO,EAAE,UAAO;IAClF,UAAA,kBAACX,GAAD;KAAkB,oBAAA;KAAyB;KAA3C,UAAA;MACE,kBAACa,GAAD;OAAe,UAAU;OAAO,QAAO;MAAuB,CAAA;MAC9D,kBAACC,GAAD;OACE,SAASC;OACT,UAAU;OACV,YAAY;OACZ,UAAU;OACV,gBAAgB,MAAU,OAAOC,CAAK,CAAC,CAAC,MAAM,GAAG,CAAC;OAClD,MAAM,EAAE,MAAM,gCAAgC;MAC/C,CAAA;MACD,kBAACC,GAAD,EAAc,SAAS,kBAACC,GAAD,CAAsB,CAAA,EAAI,CAAA;MACjD,kBAACC,GAAD;OAAK,SAASR;OAAQ,MAAMS;OAAU,QAAQ;MAAI,CAAA;KAClC;;GACJ,CAAA;EACL,CAAA,CACT;;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleLineChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","LineChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","Line","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleLineChart","defaultConfig","lineKeys","key","index","title","description","config","height","xAxisKey","value"],"sources":["../../../../src/tools/components/chart/SimpleLineChart.tsx"],"sourcesContent":["import { CartesianGrid, Line, LineChart, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * シンプルな折れ線グラフのプロップス\n */\ninterface SimpleLineChartProps {\n  /** グラフデータ配列 */\n  data: Array<Record<string, unknown>>;\n  /** X軸に使用するデータキー */\n  xAxisKey: string;\n  /** 折れ線として表示するデータキーの配列 */\n  lineKeys: string[];\n  /** カードのタイトル */\n  title: string;\n  /** カードの説明（オプション） */\n  description?: string;\n  /** チャート設定（色やラベル等） */\n  config?: ChartConfig;\n  /** グラフの高さ */\n  height?: number | string;\n}\n\n/**\n * シンプルな折れ線グラフ\n *\n * 時系列データや傾向を視覚化するための折れ線グラフコンポーネント。\n * Recharts を使用し、自動的にテーマカラーを適用します。\n *\n * @param props - コンポーネントのプロップス\n *\n * @example\n * ```tsx\n * import { SimpleLineChart } from '@alneas/appkit-react/tools/chart';\n *\n * const data = [\n *   { month: '1月', sales: 100, profit: 40 },\n *   { month: '2月', sales: 150, profit: 60 },\n *   { month: '3月', sales: 200, profit: 80 },\n * ];\n *\n * <SimpleLineChart\n *   data={data}\n *   xAxisKey=\"month\"\n *   lineKeys={['sales', 'profit']}\n *   title=\"売上推移\"\n *   description=\"月別売上と利益\"\n * />\n * ```\n */\nexport function SimpleLineChart({\n  data,\n  xAxisKey,\n  lineKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n}: SimpleLineChartProps) {\n  // Default config generation if not provided\n  const defaultConfig: ChartConfig = {};\n  lineKeys.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          <LineChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            {lineKeys.map((key) => (\n              <Line\n                key={key}\n                dataKey={key}\n                type='monotone'\n                stroke={`var(--color-${key})`}\n                strokeWidth={2}\n                dot={false}\n              />\n            ))}\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAoDA,SAAgBgB,EAAgB,CAC9B,OACA,WACA,WACA,QACA,cACA,SACA,SAAS,SACc,CAEvB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAS,SAAS,EAAK,IAAU,CAC/B,EAAcC,GAAO,CACnB,MAAOA,EACP,MAAO,mBAAoBC,EAAQ,EAAK,EAAE,GAC5C,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAACd,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAc,EAAA,KAAA,CAACb,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAa,EAAA,IAAA,CAACZ,EAAAA,UAAD,CAAA,SAAYmB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAA,SAAkBmB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACV,EAAAA,YAAD,CAAA,UACE,EAAAU,EAAA,IAAA,CAACT,EAAAA,eAAD,CAAgB,OATFkB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACR,EAAAA,UAAD,CACE,mBAAA,GACM,OACN,OAAQ,CACN,KAAM,GACN,MAAO,EACT,EANF,SAAA,EAQE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAO,EAAA,IAAA,CAACN,EAAAA,MAAD,CACE,QAASiB,EACT,SAAU,GACV,SAAU,GACV,WAAY,EACZ,cAAgB,GAAUC,EAAM,MAAM,EAAG,CAAC,EAC1C,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACL,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,EAC/DQ,EAAS,IAAK,IACb,EAAAJ,EAAA,IAAA,CAACH,EAAAA,KAAD,CAEE,QAASQ,EACT,KAAK,WACL,OAAQ,eAAeA,EAAI,GAC3B,YAAa,EACb,IAAK,EACN,EANMA,CAMN,CACF,CACQ,C,EACG,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"SimpleLineChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","LineChart","CartesianGrid","XAxis","ChartTooltip","ChartTooltipContent","Line","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimpleLineChart","defaultConfig","lineKeys","key","index","title","description","config","height","xAxisKey","value"],"sources":["../../../../src/tools/components/chart/SimpleLineChart.tsx"],"sourcesContent":["import { CartesianGrid, Line, LineChart, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleLineChart\n */\ninterface SimpleLineChartProps {\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 line series in declared order.\n   */\n  lineKeys: 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 one or more numeric series as monotone lines without point markers.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleLineChartProps. Wrapper defaults: height='250px'.\n * @returns The rendered SimpleLineChart 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 250px. X-axis tick values must support .slice(0, 5), so supply string categories; numeric or other values can throw during chart rendering. 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 { SimpleLineChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleLineChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} lineKeys={[\"sales\"]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleLineChart({\n  data,\n  xAxisKey,\n  lineKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n}: SimpleLineChartProps) {\n  // Default config generation if not provided\n  const defaultConfig: ChartConfig = {};\n  lineKeys.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          <LineChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            {lineKeys.map((key) => (\n              <Line\n                key={key}\n                dataKey={key}\n                type='monotone'\n                stroke={`var(--color-${key})`}\n                strokeWidth={2}\n                dot={false}\n              />\n            ))}\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"A,4NAuDA,SAAgBgB,EAAgB,CAC9B,OACA,WACA,WACA,QACA,cACA,SACA,SAAS,SACc,CAEvB,IAAMC,EAA6B,CAAC,EAUpC,OATAC,EAAS,SAAS,EAAK,IAAU,CAC/B,EAAcC,GAAO,CACnB,MAAOA,EACP,MAAO,mBAAoBC,EAAQ,EAAK,EAAE,GAC5C,CACF,CAAC,GAKC,EAAAN,EAAA,KAAA,CAACd,EAAAA,KAAD,CAAM,UAAU,SAAhB,SAAA,EACE,EAAAc,EAAA,KAAA,CAACb,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAa,EAAA,IAAA,CAACZ,EAAAA,UAAD,CAAA,SAAYmB,CAAiB,CAAA,EAC5BC,IAAe,EAAAR,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAA,SAAkBmB,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAR,EAAA,IAAA,CAACV,EAAAA,YAAD,CAAA,UACE,EAAAU,EAAA,IAAA,CAACT,EAAAA,eAAD,CAAgB,OATFkB,GAAUN,EASa,UAAW,iBAAiBO,EAAO,GACtE,UAAA,EAAAV,EAAA,KAAA,CAACR,EAAAA,UAAD,CACE,mBAAA,GACM,OACN,OAAQ,CACN,KAAM,GACN,MAAO,EACT,EANF,SAAA,EAQE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,cAAD,CAAe,SAAU,GAAO,OAAO,qBAAuB,CAAA,GAC9D,EAAAO,EAAA,IAAA,CAACN,EAAAA,MAAD,CACE,QAASiB,EACT,SAAU,GACV,SAAU,GACV,WAAY,EACZ,cAAgB,GAAUC,EAAM,MAAM,EAAG,CAAC,EAC1C,KAAM,CAAE,KAAM,+BAAgC,CAC/C,CAAA,GACD,EAAAZ,EAAA,IAAA,CAACL,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAK,EAAA,IAAA,CAACJ,EAAAA,oBAAD,CAAsB,CAAA,CAAI,CAAA,EAC/DQ,EAAS,IAAK,IACb,EAAAJ,EAAA,IAAA,CAACH,EAAAA,KAAD,CAEE,QAASQ,EACT,KAAK,WACL,OAAQ,eAAeA,EAAI,GAC3B,YAAa,EACb,IAAK,EACN,EANMA,CAMN,CACF,CACQ,C,EACG,CAAA,CACL,CAAA,CACT,C,EAEV,C"}

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

@@ -1,48 +1,51 @@
 import { ChartConfig } from '../ui/chart.cjs';
 /**
- * シンプルな折れ線グラフのプロップス
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleLineChart
  */
 interface SimpleLineChartProps {
-    /** グラフデータ配列 */
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
-    /** X軸に使用するデータキー */
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
-    /** 折れ線として表示するデータキーの配列 */
+    /**
+     * Record keys for numeric line series in declared order.
+     */
     lineKeys: 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;
 }
 /**
- * シンプルな折れ線グラフ
- *
- * 時系列データや傾向を視覚化するための折れ線グラフコンポーネント。
- * Recharts を使用し、自動的にテーマカラーを適用します。
- *
- * @param props - コンポーネントのプロップス
- *
+ * Renders one or more numeric series as monotone lines without point markers.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleLineChartProps. Wrapper defaults: height='250px'.
+ * @returns The rendered SimpleLineChart 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 250px. X-axis tick values must support .slice(0, 5), so supply string categories; numeric or other values can throw during chart rendering. 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 { SimpleLineChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
  *
- * const data = [
- *   { month: '1月', sales: 100, profit: 40 },
- *   { month: '2月', sales: 150, profit: 60 },
- *   { month: '3月', sales: 200, profit: 80 },
- * ];
- *
- * <SimpleLineChart
- *   data={data}
- *   xAxisKey="month"
- *   lineKeys={['sales', 'profit']}
- *   title="売上推移"
- *   description="月別売上と利益"
- * />
+ * export function Example() {
+ *   return (<SimpleLineChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} lineKeys={["sales"]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
  * ```
  */
 export declare function SimpleLineChart({ data, xAxisKey, lineKeys, title, description, config, height, }: SimpleLineChartProps): import('react').JSX.Element;

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

@@ -1,48 +1,51 @@
 import { ChartConfig } from '../ui/chart.js';
 /**
- * シンプルな折れ線グラフのプロップス
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimpleLineChart
  */
 interface SimpleLineChartProps {
-    /** グラフデータ配列 */
+    /**
+     * Already-loaded records in plot order; required numeric values and category keys must be present.
+     */
     data: Array<Record<string, unknown>>;
-    /** X軸に使用するデータキー */
+    /**
+     * Record key used for the horizontal axis; category charts format ticks to the first five characters.
+     */
     xAxisKey: string;
-    /** 折れ線として表示するデータキーの配列 */
+    /**
+     * Record keys for numeric line series in declared order.
+     */
     lineKeys: 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;
 }
 /**
- * シンプルな折れ線グラフ
- *
- * 時系列データや傾向を視覚化するための折れ線グラフコンポーネント。
- * Recharts を使用し、自動的にテーマカラーを適用します。
- *
- * @param props - コンポーネントのプロップス
- *
+ * Renders one or more numeric series as monotone lines without point markers.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleLineChartProps. Wrapper defaults: height='250px'.
+ * @returns The rendered SimpleLineChart 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 250px. X-axis tick values must support .slice(0, 5), so supply string categories; numeric or other values can throw during chart rendering. 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 { SimpleLineChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
  *
- * const data = [
- *   { month: '1月', sales: 100, profit: 40 },
- *   { month: '2月', sales: 150, profit: 60 },
- *   { month: '3月', sales: 200, profit: 80 },
- * ];
- *
- * <SimpleLineChart
- *   data={data}
- *   xAxisKey="month"
- *   lineKeys={['sales', 'profit']}
- *   title="売上推移"
- *   description="月別売上と利益"
- * />
+ * export function Example() {
+ *   return (<SimpleLineChart title="Monthly sales" data={[{ month: "January", sales: 100, x: 1, size: 60, fill: "#2563eb" }, { month: "February", sales: 150, x: 2, size: 90, fill: "#7c3aed" }]} lineKeys={["sales"]} xAxisKey="month" config={{ sales: { label: "Sales", color: "#2563eb" } }} />);
+ * }
  * ```
  */
 export declare function SimpleLineChart({ data, xAxisKey, lineKeys, title, description, config, height, }: SimpleLineChartProps): import('react').JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleLineChart.js","names":["SimpleLineChart","defaultConfig","lineKeys","key","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","LineChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","Line"],"sources":["../../../../src/tools/components/chart/SimpleLineChart.tsx"],"sourcesContent":["import { CartesianGrid, Line, LineChart, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * シンプルな折れ線グラフのプロップス\n */\ninterface SimpleLineChartProps {\n  /** グラフデータ配列 */\n  data: Array<Record<string, unknown>>;\n  /** X軸に使用するデータキー */\n  xAxisKey: string;\n  /** 折れ線として表示するデータキーの配列 */\n  lineKeys: string[];\n  /** カードのタイトル */\n  title: string;\n  /** カードの説明（オプション） */\n  description?: string;\n  /** チャート設定（色やラベル等） */\n  config?: ChartConfig;\n  /** グラフの高さ */\n  height?: number | string;\n}\n\n/**\n * シンプルな折れ線グラフ\n *\n * 時系列データや傾向を視覚化するための折れ線グラフコンポーネント。\n * Recharts を使用し、自動的にテーマカラーを適用します。\n *\n * @param props - コンポーネントのプロップス\n *\n * @example\n * ```tsx\n * import { SimpleLineChart } from '@alneas/appkit-react/tools/chart';\n *\n * const data = [\n *   { month: '1月', sales: 100, profit: 40 },\n *   { month: '2月', sales: 150, profit: 60 },\n *   { month: '3月', sales: 200, profit: 80 },\n * ];\n *\n * <SimpleLineChart\n *   data={data}\n *   xAxisKey=\"month\"\n *   lineKeys={['sales', 'profit']}\n *   title=\"売上推移\"\n *   description=\"月別売上と利益\"\n * />\n * ```\n */\nexport function SimpleLineChart({\n  data,\n  xAxisKey,\n  lineKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n}: SimpleLineChartProps) {\n  // Default config generation if not provided\n  const defaultConfig: ChartConfig = {};\n  lineKeys.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          <LineChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            {lineKeys.map((key) => (\n              <Line\n                key={key}\n                dataKey={key}\n                type='monotone'\n                stroke={`var(--color-${key})`}\n                strokeWidth={2}\n                dot={false}\n              />\n            ))}\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAoDA,SAAgBA,EAAgB,EAC9B,SACA,aACA,aACA,UACA,gBACA,WACA,YAAS,WACc;CAEvB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAS,SAAS,GAAK,MAAU;EAC/B,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;IACE,oBAAA;IACM;IACN,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IANF,UAAA;KAQE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,UAAU;MACV,YAAY;MACZ,gBAAgB,MAAUC,EAAM,MAAM,GAAG,CAAC;MAC1C,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAC/DnB,EAAS,KAAK,MACb,kBAACoB,GAAD;MAEE,SAASnB;MACT,MAAK;MACL,QAAQ,eAAeA,EAAI;MAC3B,aAAa;MACb,KAAK;KACN,GANMA,CAMN,CACF;IACQ;;EACG,CAAA,EACL,CAAA,CACT;;AAEV"}
+{"version":3,"file":"SimpleLineChart.js","names":["SimpleLineChart","defaultConfig","lineKeys","key","index","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent","ChartContainer","config","height","LineChart","CartesianGrid","XAxis","xAxisKey","value","ChartTooltip","ChartTooltipContent","Line"],"sources":["../../../../src/tools/components/chart/SimpleLineChart.tsx"],"sourcesContent":["import { CartesianGrid, Line, LineChart, XAxis } from 'recharts';\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart';\n\n/**\n * Input data, keys and presentation options for the chart wrapper.\n * @see SimpleLineChart\n */\ninterface SimpleLineChartProps {\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 line series in declared order.\n   */\n  lineKeys: 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 one or more numeric series as monotone lines without point markers.\n * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimpleLineChartProps. Wrapper defaults: height='250px'.\n * @returns The rendered SimpleLineChart 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 250px. X-axis tick values must support .slice(0, 5), so supply string categories; numeric or other values can throw during chart rendering. 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 { SimpleLineChart } from '@alneas/appkit-react/tools/chart';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<SimpleLineChart title=\"Monthly sales\" data={[{ month: \"January\", sales: 100, x: 1, size: 60, fill: \"#2563eb\" }, { month: \"February\", sales: 150, x: 2, size: 90, fill: \"#7c3aed\" }]} lineKeys={[\"sales\"]} xAxisKey=\"month\" config={{ sales: { label: \"Sales\", color: \"#2563eb\" } }} />);\n * }\n * ```\n */\nexport function SimpleLineChart({\n  data,\n  xAxisKey,\n  lineKeys,\n  title,\n  description,\n  config,\n  height = '250px',\n}: SimpleLineChartProps) {\n  // Default config generation if not provided\n  const defaultConfig: ChartConfig = {};\n  lineKeys.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          <LineChart\n            accessibilityLayer\n            data={data}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} stroke='var(--color-border)' />\n            <XAxis\n              dataKey={xAxisKey}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 5)}\n              tick={{ fill: 'var(--color-muted-foreground)' }}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            {lineKeys.map((key) => (\n              <Line\n                key={key}\n                dataKey={key}\n                type='monotone'\n                stroke={`var(--color-${key})`}\n                strokeWidth={2}\n                dot={false}\n              />\n            ))}\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;AAuDA,SAAgBA,EAAgB,EAC9B,SACA,aACA,aACA,UACA,gBACA,WACA,YAAS,WACc;CAEvB,IAAMC,IAA6B,CAAC;CAUpC,OATAC,EAAS,SAAS,GAAK,MAAU;EAC/B,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;IACE,oBAAA;IACM;IACN,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IANF,UAAA;KAQE,kBAACC,GAAD;MAAe,UAAU;MAAO,QAAO;KAAuB,CAAA;KAC9D,kBAACC,GAAD;MACE,SAASC;MACT,UAAU;MACV,UAAU;MACV,YAAY;MACZ,gBAAgB,MAAUC,EAAM,MAAM,GAAG,CAAC;MAC1C,MAAM,EAAE,MAAM,gCAAgC;KAC/C,CAAA;KACD,kBAACC,GAAD;MAAc,QAAQ;MAAO,SAAS,kBAACC,GAAD,CAAsB,CAAA;KAAI,CAAA;KAC/DnB,EAAS,KAAK,MACb,kBAACoB,GAAD;MAEE,SAASnB;MACT,MAAK;MACL,QAAQ,eAAeA,EAAI;MAC3B,aAAa;MACb,KAAK;KACN,GANMA,CAMN,CACF;IACQ;;EACG,CAAA,EACL,CAAA,CACT;;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"SimplePieChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RechartsPieChart","ChartTooltip","ChartTooltipContent","Pie","ChartLegend","ChartLegendContent","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimplePieChart","title","description","config","dataKey"],"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":"A,4NAoDA,SAAgBgB,EAAe,CAC7B,OACA,UACA,UACA,QACA,cACA,UACsB,CActB,OACE,EAAAF,EAAA,KAAA,CAACd,EAAAA,KAAD,CAAM,UAAU,8BAAhB,SAAA,EACE,EAAAc,EAAA,KAAA,CAACb,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAa,EAAA,IAAA,CAACZ,EAAAA,UAAD,CAAA,SAAYe,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAA,SAAkBe,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACV,EAAAA,YAAD,CAAa,UAAU,cACrB,UAAA,EAAAU,EAAA,IAAA,CAACT,EAAAA,eAAD,CAAgB,OATFc,GAAU,EAN3BC,GAAU,CACT,MAAOA,EACP,MAAO,qBACT,CAG4B,EASa,UAAU,sCAC7C,UAAA,EAAAN,EAAA,KAAA,CAACR,EAAAA,SAAD,CAAA,SAAA,EACE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAqB,UAAA,EAAW,CAAA,CAAI,CAAA,GAC1E,EAAAM,EAAA,IAAA,CAACL,EAAAA,IAAD,CAAW,OAAe,UAAkB,UAAS,YAAa,GAAI,YAAa,CAAI,CAAA,GACvF,EAAAK,EAAA,IAAA,CAACJ,EAAAA,YAAD,CACE,SACE,EAAAI,EAAA,IAAA,CAACH,EAAAA,mBAAD,CACW,UACT,UAAU,qEACX,CAAA,CAEJ,CAAA,CACe,CAAA,CAAA,CACJ,CAAA,CACL,CAAA,CACT,C,EAEV,C"}
+{"version":3,"file":"SimplePieChart.cjs","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","ChartContainer","RechartsPieChart","ChartTooltip","ChartTooltipContent","Pie","ChartLegend","ChartLegendContent","require_ui_components_ui_card","require_tools_components_ui_chart","react_jsx_runtime","recharts","SimplePieChart","title","description","config","dataKey"],"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":"A,4NA0DA,SAAgBgB,EAAe,CAC7B,OACA,UACA,UACA,QACA,cACA,UACsB,CActB,OACE,EAAAF,EAAA,KAAA,CAACd,EAAAA,KAAD,CAAM,UAAU,8BAAhB,SAAA,EACE,EAAAc,EAAA,KAAA,CAACb,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAa,EAAA,IAAA,CAACZ,EAAAA,UAAD,CAAA,SAAYe,CAAiB,CAAA,EAC5BC,IAAe,EAAAJ,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAA,SAAkBe,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAJ,EAAA,IAAA,CAACV,EAAAA,YAAD,CAAa,UAAU,cACrB,UAAA,EAAAU,EAAA,IAAA,CAACT,EAAAA,eAAD,CAAgB,OATFc,GAAU,EAN3BC,GAAU,CACT,MAAOA,EACP,MAAO,qBACT,CAG4B,EASa,UAAU,sCAC7C,UAAA,EAAAN,EAAA,KAAA,CAACR,EAAAA,SAAD,CAAA,SAAA,EACE,EAAAQ,EAAA,IAAA,CAACP,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAAO,EAAA,IAAA,CAACN,EAAAA,oBAAD,CAAqB,UAAA,EAAW,CAAA,CAAI,CAAA,GAC1E,EAAAM,EAAA,IAAA,CAACL,EAAAA,IAAD,CAAW,OAAe,UAAkB,UAAS,YAAa,GAAI,YAAa,CAAI,CAAA,GACvF,EAAAK,EAAA,IAAA,CAACJ,EAAAA,YAAD,CACE,SACE,EAAAI,EAAA,IAAA,CAACH,EAAAA,mBAAD,CACW,UACT,UAAU,qEACX,CAAA,CAEJ,CAAA,CACe,CAAA,CAAA,CACJ,CAAA,CACL,CAAA,CACT,C,EAEV,C"}

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

@@ -1,41 +1,47 @@
 import { ChartConfig } from '../ui/chart.cjs';
 /**
- * シンプルな円グラフのプロップス
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimplePieChart
  */
 interface SimplePieChartProps {
-    /** グラフデータ配列 */
+    /**
+     * 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 used for slice labels; see the specific chart for any differing series-name behavior.
+     */
     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;
 }
 /**
- * シンプルな円グラフ
- *
- * 割合や構成比を視覚化するためのドーナツ型円グラフ。
- *
+ * Renders a donut chart with a fixed inner radius and legend.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimplePieChartProps.
+ * @returns The rendered SimplePieChart 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. 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.
  * @example
  * ```tsx
  * import { SimplePieChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
  *
- * const data = [
- *   { category: '製品A', value: 300, fill: 'var(--color-chart-1)' },
- *   { category: '製品B', value: 200, fill: 'var(--color-chart-2)' },
- * ];
- *
- * <SimplePieChart
- *   data={data}
- *   dataKey="value"
- *   nameKey="category"
- *   title="製品別売上"
- * />
+ * export function Example() {
+ *   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" } }} />);
+ * }
  * ```
  */
 export declare function SimplePieChart({ data, dataKey, nameKey, title, description, config, }: SimplePieChartProps): import('react').JSX.Element;

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

@@ -1,41 +1,47 @@
 import { ChartConfig } from '../ui/chart.js';
 /**
- * シンプルな円グラフのプロップス
+ * Input data, keys and presentation options for the chart wrapper.
+ * @see SimplePieChart
  */
 interface SimplePieChartProps {
-    /** グラフデータ配列 */
+    /**
+     * 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 used for slice labels; see the specific chart for any differing series-name behavior.
+     */
     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;
 }
 /**
- * シンプルな円グラフ
- *
- * 割合や構成比を視覚化するためのドーナツ型円グラフ。
- *
+ * Renders a donut chart with a fixed inner radius and legend.
+ * @param props - Loaded chart data, series/axis keys and card/presentation settings; see SimplePieChartProps.
+ * @returns The rendered SimplePieChart 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. 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.
  * @example
  * ```tsx
  * import { SimplePieChart } from '@alneas/appkit-react/tools/chart';
+ * import '@alneas/appkit-react/styles';
  *
- * const data = [
- *   { category: '製品A', value: 300, fill: 'var(--color-chart-1)' },
- *   { category: '製品B', value: 200, fill: 'var(--color-chart-2)' },
- * ];
- *
- * <SimplePieChart
- *   data={data}
- *   dataKey="value"
- *   nameKey="category"
- *   title="製品別売上"
- * />
+ * export function Example() {
+ *   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" } }} />);
+ * }
  * ```
  */
 export declare function SimplePieChart({ data, dataKey, nameKey, title, description, config, }: SimplePieChartProps): import('react').JSX.Element;