@efiche/design 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +21 -12
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.mts +8 -0
  4. package/dist/index.d.ts +8 -0
  5. package/dist/index.js +21 -12
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
package/dist/index.d.mts CHANGED
@@ -27,6 +27,8 @@ interface LineChartProps {
27
27
  legend?: boolean;
28
28
  grid?: boolean;
29
29
  theme?: ChartTheme;
30
+ className?: string;
31
+ style?: React.CSSProperties;
30
32
  }
31
33
  declare const LineChart: FC<LineChartProps>;
32
34
 
@@ -44,6 +46,8 @@ interface BarChartProps {
44
46
  legend?: boolean;
45
47
  grid?: boolean;
46
48
  theme?: ChartTheme;
49
+ className?: string;
50
+ style?: React.CSSProperties;
47
51
  }
48
52
  declare const BarChart: FC<BarChartProps>;
49
53
 
@@ -62,6 +66,8 @@ interface AreaChartProps {
62
66
  legend?: boolean;
63
67
  grid?: boolean;
64
68
  theme?: ChartTheme;
69
+ className?: string;
70
+ style?: React.CSSProperties;
65
71
  }
66
72
  declare const AreaChart: FC<AreaChartProps>;
67
73
 
@@ -77,6 +83,8 @@ interface PieChartProps {
77
83
  legend?: boolean;
78
84
  label?: boolean;
79
85
  theme?: ChartTheme;
86
+ className?: string;
87
+ style?: React.CSSProperties;
80
88
  }
81
89
  declare const PieChart: FC<PieChartProps>;
82
90
 
package/dist/index.d.ts CHANGED
@@ -27,6 +27,8 @@ interface LineChartProps {
27
27
  legend?: boolean;
28
28
  grid?: boolean;
29
29
  theme?: ChartTheme;
30
+ className?: string;
31
+ style?: React.CSSProperties;
30
32
  }
31
33
  declare const LineChart: FC<LineChartProps>;
32
34
 
@@ -44,6 +46,8 @@ interface BarChartProps {
44
46
  legend?: boolean;
45
47
  grid?: boolean;
46
48
  theme?: ChartTheme;
49
+ className?: string;
50
+ style?: React.CSSProperties;
47
51
  }
48
52
  declare const BarChart: FC<BarChartProps>;
49
53
 
@@ -62,6 +66,8 @@ interface AreaChartProps {
62
66
  legend?: boolean;
63
67
  grid?: boolean;
64
68
  theme?: ChartTheme;
69
+ className?: string;
70
+ style?: React.CSSProperties;
65
71
  }
66
72
  declare const AreaChart: FC<AreaChartProps>;
67
73
 
@@ -77,6 +83,8 @@ interface PieChartProps {
77
83
  legend?: boolean;
78
84
  label?: boolean;
79
85
  theme?: ChartTheme;
86
+ className?: string;
87
+ style?: React.CSSProperties;
80
88
  }
81
89
  declare const PieChart: FC<PieChartProps>;
82
90
 
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  var __defProp = Object.defineProperty;
2
3
  var __defProps = Object.defineProperties;
3
4
  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -104,10 +105,12 @@ var LineChart = ({
104
105
  height = 250,
105
106
  legend = false,
106
107
  grid = true,
107
- theme = "light"
108
+ theme = "light",
109
+ className,
110
+ style
108
111
  }) => {
109
112
  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
110
- return /* @__PURE__ */ jsx2(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RechartsLineChart, { data, children: [
113
+ return /* @__PURE__ */ jsx2("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ jsx2(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RechartsLineChart, { data, children: [
111
114
  grid && /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
112
115
  /* @__PURE__ */ jsx2(XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
113
116
  /* @__PURE__ */ jsx2(YAxis, { stroke: axisStroke, tick: axisTick }),
@@ -130,7 +133,7 @@ var LineChart = ({
130
133
  line.dataKey
131
134
  );
132
135
  })
133
- ] }) });
136
+ ] }) }) });
134
137
  };
135
138
  var LineChart_default = LineChart;
136
139
 
@@ -153,10 +156,12 @@ var BarChart = ({
153
156
  height = 250,
154
157
  legend = false,
155
158
  grid = true,
156
- theme = "light"
159
+ theme = "light",
160
+ className,
161
+ style
157
162
  }) => {
158
163
  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
159
- return /* @__PURE__ */ jsx3(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs2(RechartsBarChart, { data, children: [
164
+ return /* @__PURE__ */ jsx3("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ jsx3(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs2(RechartsBarChart, { data, children: [
160
165
  grid && /* @__PURE__ */ jsx3(CartesianGrid2, { strokeDasharray: "3 3", stroke: gridColor }),
161
166
  /* @__PURE__ */ jsx3(XAxis2, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
162
167
  /* @__PURE__ */ jsx3(YAxis2, { stroke: axisStroke, tick: axisTick }),
@@ -178,7 +183,7 @@ var BarChart = ({
178
183
  bar.dataKey
179
184
  );
180
185
  })
181
- ] }) });
186
+ ] }) }) });
182
187
  };
183
188
  var BarChart_default = BarChart;
184
189
 
@@ -201,10 +206,12 @@ var AreaChart = ({
201
206
  height = 250,
202
207
  legend = false,
203
208
  grid = true,
204
- theme = "light"
209
+ theme = "light",
210
+ className,
211
+ style
205
212
  }) => {
206
213
  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
207
- return /* @__PURE__ */ jsx4(ResponsiveContainer3, { width: "100%", height, children: /* @__PURE__ */ jsxs3(RechartsAreaChart, { data, children: [
214
+ return /* @__PURE__ */ jsx4("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ jsx4(ResponsiveContainer3, { width: "100%", height, children: /* @__PURE__ */ jsxs3(RechartsAreaChart, { data, children: [
208
215
  grid && /* @__PURE__ */ jsx4(CartesianGrid3, { strokeDasharray: "3 3", stroke: gridColor }),
209
216
  /* @__PURE__ */ jsx4(XAxis3, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
210
217
  /* @__PURE__ */ jsx4(YAxis3, { stroke: axisStroke, tick: axisTick }),
@@ -229,7 +236,7 @@ var AreaChart = ({
229
236
  area.dataKey
230
237
  );
231
238
  })
232
- ] }) });
239
+ ] }) }) });
233
240
  };
234
241
  var AreaChart_default = AreaChart;
235
242
 
@@ -248,7 +255,9 @@ var PieChart = ({
248
255
  donut = false,
249
256
  legend = false,
250
257
  label = false,
251
- theme = "light"
258
+ theme = "light",
259
+ className,
260
+ style
252
261
  }) => {
253
262
  const { tooltipStyle } = getChartTheme(theme);
254
263
  const dataWithColors = data.map((item, i) => {
@@ -259,7 +268,7 @@ var PieChart = ({
259
268
  });
260
269
  const outerRadius = 90;
261
270
  const innerRadius = donut ? 55 : 0;
262
- return /* @__PURE__ */ jsx5(ResponsiveContainer4, { width: "100%", height, children: /* @__PURE__ */ jsxs4(RechartsPieChart, { children: [
271
+ return /* @__PURE__ */ jsx5("div", { className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: /* @__PURE__ */ jsx5(ResponsiveContainer4, { width: "100%", height, children: /* @__PURE__ */ jsxs4(RechartsPieChart, { children: [
263
272
  /* @__PURE__ */ jsx5(
264
273
  Pie,
265
274
  {
@@ -275,7 +284,7 @@ var PieChart = ({
275
284
  ),
276
285
  /* @__PURE__ */ jsx5(Tooltip4, { contentStyle: tooltipStyle }),
277
286
  legend && /* @__PURE__ */ jsx5(Legend4, {})
278
- ] }) });
287
+ ] }) }) });
279
288
  };
280
289
  var PieChart_default = PieChart;
281
290