@efiche/design 0.2.0 → 0.2.2

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 (8) hide show
  1. package/README.md +110 -0
  2. package/dist/index.cjs +20 -12
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.mts +8 -0
  5. package/dist/index.d.ts +8 -0
  6. package/dist/index.js +20 -12
  7. package/dist/index.js.map +1 -1
  8. 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
@@ -104,10 +104,12 @@ var LineChart = ({
104
104
  height = 250,
105
105
  legend = false,
106
106
  grid = true,
107
- theme = "light"
107
+ theme = "light",
108
+ className,
109
+ style
108
110
  }) => {
109
111
  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
110
- return /* @__PURE__ */ jsx2(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RechartsLineChart, { data, children: [
112
+ 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
113
  grid && /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
112
114
  /* @__PURE__ */ jsx2(XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
113
115
  /* @__PURE__ */ jsx2(YAxis, { stroke: axisStroke, tick: axisTick }),
@@ -130,7 +132,7 @@ var LineChart = ({
130
132
  line.dataKey
131
133
  );
132
134
  })
133
- ] }) });
135
+ ] }) }) });
134
136
  };
135
137
  var LineChart_default = LineChart;
136
138
 
@@ -153,10 +155,12 @@ var BarChart = ({
153
155
  height = 250,
154
156
  legend = false,
155
157
  grid = true,
156
- theme = "light"
158
+ theme = "light",
159
+ className,
160
+ style
157
161
  }) => {
158
162
  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
159
- return /* @__PURE__ */ jsx3(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs2(RechartsBarChart, { data, children: [
163
+ 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
164
  grid && /* @__PURE__ */ jsx3(CartesianGrid2, { strokeDasharray: "3 3", stroke: gridColor }),
161
165
  /* @__PURE__ */ jsx3(XAxis2, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
162
166
  /* @__PURE__ */ jsx3(YAxis2, { stroke: axisStroke, tick: axisTick }),
@@ -178,7 +182,7 @@ var BarChart = ({
178
182
  bar.dataKey
179
183
  );
180
184
  })
181
- ] }) });
185
+ ] }) }) });
182
186
  };
183
187
  var BarChart_default = BarChart;
184
188
 
@@ -201,10 +205,12 @@ var AreaChart = ({
201
205
  height = 250,
202
206
  legend = false,
203
207
  grid = true,
204
- theme = "light"
208
+ theme = "light",
209
+ className,
210
+ style
205
211
  }) => {
206
212
  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
207
- return /* @__PURE__ */ jsx4(ResponsiveContainer3, { width: "100%", height, children: /* @__PURE__ */ jsxs3(RechartsAreaChart, { data, children: [
213
+ 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
214
  grid && /* @__PURE__ */ jsx4(CartesianGrid3, { strokeDasharray: "3 3", stroke: gridColor }),
209
215
  /* @__PURE__ */ jsx4(XAxis3, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
210
216
  /* @__PURE__ */ jsx4(YAxis3, { stroke: axisStroke, tick: axisTick }),
@@ -229,7 +235,7 @@ var AreaChart = ({
229
235
  area.dataKey
230
236
  );
231
237
  })
232
- ] }) });
238
+ ] }) }) });
233
239
  };
234
240
  var AreaChart_default = AreaChart;
235
241
 
@@ -248,7 +254,9 @@ var PieChart = ({
248
254
  donut = false,
249
255
  legend = false,
250
256
  label = false,
251
- theme = "light"
257
+ theme = "light",
258
+ className,
259
+ style
252
260
  }) => {
253
261
  const { tooltipStyle } = getChartTheme(theme);
254
262
  const dataWithColors = data.map((item, i) => {
@@ -259,7 +267,7 @@ var PieChart = ({
259
267
  });
260
268
  const outerRadius = 90;
261
269
  const innerRadius = donut ? 55 : 0;
262
- return /* @__PURE__ */ jsx5(ResponsiveContainer4, { width: "100%", height, children: /* @__PURE__ */ jsxs4(RechartsPieChart, { children: [
270
+ 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
271
  /* @__PURE__ */ jsx5(
264
272
  Pie,
265
273
  {
@@ -275,7 +283,7 @@ var PieChart = ({
275
283
  ),
276
284
  /* @__PURE__ */ jsx5(Tooltip4, { contentStyle: tooltipStyle }),
277
285
  legend && /* @__PURE__ */ jsx5(Legend4, {})
278
- ] }) });
286
+ ] }) }) });
279
287
  };
280
288
  var PieChart_default = PieChart;
281
289