@efiche/design 0.2.0 → 0.2.2

package/README.md

@@ -117,6 +117,112 @@ Override any `--ds-*` variable on `:root` (or `.ds-theme-dark` for dark mode) in
 
 ---
 
+## Charts
+
+Charts are built on top of [Recharts](https://recharts.org). Make sure it is installed:
+
+```bash
+npm install recharts
+```
+
+```tsx
+import { LineChart, BarChart, AreaChart, PieChart } from '@efiche/design'
+import { useTheme } from '@efiche/design'
+
+const { theme } = useTheme() // pass to charts for dark mode awareness
+```
+
+### LineChart
+
+```tsx
+// Single line
+<LineChart data={data} xKey="month" lines={[{ dataKey: 'value' }]} />
+
+// Multi-line with legend
+<LineChart
+  data={data}
+  xKey="month"
+  lines={[
+    { dataKey: 'revenue',  color: '#22c55e', label: 'Revenue' },
+    { dataKey: 'expenses', color: '#ef4444', label: 'Expenses' },
+  ]}
+  legend
+  theme={theme}
+/>
+```
+
+### BarChart
+
+```tsx
+// Single bar
+<BarChart data={data} xKey="month" bars={[{ dataKey: 'sales' }]} />
+
+// Stacked bars
+<BarChart
+  data={data}
+  xKey="month"
+  bars={[
+    { dataKey: 'online',  color: '#3b82f6', stackId: 'a', label: 'Online' },
+    { dataKey: 'offline', color: '#94a3b8', stackId: 'a', label: 'Offline' },
+  ]}
+  legend
+  theme={theme}
+/>
+```
+
+### AreaChart
+
+```tsx
+// Single area
+<AreaChart data={data} xKey="month" areas={[{ dataKey: 'visitors' }]} />
+
+// Stacked areas
+<AreaChart
+  data={data}
+  xKey="month"
+  areas={[
+    { dataKey: 'mobile',  color: '#3b82f6', stackId: '1', label: 'Mobile' },
+    { dataKey: 'desktop', color: '#22c55e', stackId: '1', label: 'Desktop' },
+  ]}
+  legend
+  theme={theme}
+/>
+```
+
+### PieChart
+
+```tsx
+// Pie
+<PieChart
+  data={[
+    { name: 'Direct', value: 400, fill: '#3b82f6' },
+    { name: 'Social', value: 300, fill: '#22c55e' },
+    { name: 'Email',  value: 200, fill: '#f59e0b' },
+  ]}
+  label
+/>
+
+// Donut with legend
+<PieChart data={pieData} donut legend theme={theme} />
+```
+
+### Chart props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `object[]` | required | Array of data objects |
+| `xKey` | `string` | required | Key used for the X axis *(LineChart, BarChart, AreaChart)* |
+| `lines` / `bars` / `areas` | `config[]` | required | Series definitions — see per-component docs above |
+| `data` | `{ name, value, fill? }[]` | required | Slice definitions *(PieChart)* |
+| `height` | `number` | `250` | Chart height in px |
+| `legend` | `boolean` | `false` | Show the legend |
+| `grid` | `boolean` | `true` | Show the background grid *(LineChart, BarChart, AreaChart)* |
+| `label` | `boolean` | `false` | Show percentage labels on slices *(PieChart)* |
+| `donut` | `boolean` | `false` | Hollow centre *(PieChart)* |
+| `theme` | `"light" \| "dark"` | `"light"` | Controls axis, grid, and tooltip colours |
+
+---
+
 ## Components
 
 | Component | Import |
@@ -146,6 +252,10 @@ Override any `--ds-*` variable on `:root` (or `.ds-theme-dark` for dark mode) in
 | `Textarea` | `import { Textarea } from '@efiche/design'` |
 | `Tooltip` | `import { Tooltip } from '@efiche/design'` |
 | `ThemeProvider` | `import { ThemeProvider, useTheme } from '@efiche/design'` |
+| `LineChart` | `import { LineChart } from '@efiche/design'` |
+| `BarChart` | `import { BarChart } from '@efiche/design'` |
+| `AreaChart` | `import { AreaChart } from '@efiche/design'` |
+| `PieChart` | `import { PieChart } from '@efiche/design'` |
 
 ---
 

package/dist/index.cjs

@@ -157,10 +157,12 @@ var LineChart = ({
   height = 250,
   legend = false,
   grid = true,
-  theme = "light"
+  theme = "light",
+  className,
+  style
 }) => {
   const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data, children: [
     grid && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { stroke: axisStroke, tick: axisTick }),
@@ -183,7 +185,7 @@ var LineChart = ({
         line.dataKey
       );
     })
-  ] }) });
+  ] }) }) });
 };
 var LineChart_default = LineChart;
 
@@ -197,10 +199,12 @@ var BarChart = ({
   height = 250,
   legend = false,
   grid = true,
-  theme = "light"
+  theme = "light",
+  className,
+  style
 }) => {
   const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_recharts2.BarChart, { data, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_recharts2.BarChart, { data, children: [
     grid && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.YAxis, { stroke: axisStroke, tick: axisTick }),
@@ -222,7 +226,7 @@ var BarChart = ({
         bar.dataKey
       );
     })
-  ] }) });
+  ] }) }) });
 };
 var BarChart_default = BarChart;
 
@@ -236,10 +240,12 @@ var AreaChart = ({
   height = 250,
   legend = false,
   grid = true,
-  theme = "light"
+  theme = "light",
+  className,
+  style
 }) => {
   const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts3.AreaChart, { data, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts3.AreaChart, { data, children: [
     grid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.YAxis, { stroke: axisStroke, tick: axisTick }),
@@ -264,7 +270,7 @@ var AreaChart = ({
         area.dataKey
       );
     })
-  ] }) });
+  ] }) }) });
 };
 var AreaChart_default = AreaChart;
 
@@ -277,7 +283,9 @@ var PieChart = ({
   donut = false,
   legend = false,
   label = false,
-  theme = "light"
+  theme = "light",
+  className,
+  style
 }) => {
   const { tooltipStyle } = getChartTheme(theme);
   const dataWithColors = data.map((item, i) => {
@@ -288,7 +296,7 @@ var PieChart = ({
   });
   const outerRadius = 90;
   const innerRadius = donut ? 55 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts4.PieChart, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts4.PieChart, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_recharts4.Pie,
       {
@@ -304,7 +312,7 @@ var PieChart = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.Tooltip, { contentStyle: tooltipStyle }),
     legend && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.Legend, {})
-  ] }) });
+  ] }) }) });
 };
 var PieChart_default = PieChart;