next-helios-fe 1.4.4 → 1.4.5

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 (4) hide show
  1. package/dist/components/chart/index.d.ts +10 -5
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/chart/index.tsx +55 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.4.4",
3
+ "version": "1.4.5",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/chart/index.tsx CHANGED
@@ -4,31 +4,49 @@ import dynamic from "next/dynamic";
4
4
  const Ch = dynamic(() => import("react-apexcharts"), { ssr: false });
5
5
 
6
6
  interface ChartProps {
7
- type: "line" | "area" | "bar" | "pie" | "donut" | "radialBar" | "heatmap";
8
- theme?: "light" | "dark" | "system";
7
+ type:
8
+ | "line"
9
+ | "area"
10
+ | "bar"
11
+ | "pie"
12
+ | "donut"
13
+ | "radialBar"
14
+ | "heatmap"
15
+ | "scatter"
16
+ | "bubble"
17
+ | "candlestick"
18
+ | "boxPlot"
19
+ | "radar"
20
+ | "polarArea"
21
+ | "rangeBar"
22
+ | "rangeArea"
23
+ | "treemap";
24
+
9
25
  id?: string;
10
26
  title?: string;
11
27
  subTitle?: string;
12
- series: any;
13
28
  labels?: string[];
29
+ series: any;
14
30
  xaxis?: {
15
31
  categories: string[];
16
32
  };
17
- height?: number;
18
- sparkline?: boolean;
33
+ options?: {
34
+ theme?: "light" | "dark" | "system";
35
+ height?: number;
36
+ barChart?: { variant: "vertical" | "horizontal" };
37
+ sparkline?: boolean;
38
+ };
19
39
  }
20
40
 
21
41
  export const Chart: React.FC<ChartProps> = ({
22
42
  type,
23
- theme,
24
43
  id,
25
44
  title,
26
45
  subTitle,
27
46
  series,
28
47
  labels,
29
48
  xaxis,
30
- height,
31
- sparkline,
49
+ options,
32
50
  }) => {
33
51
  const areaOptions = type === "area" && {
34
52
  fill: {
@@ -42,10 +60,10 @@ export const Chart: React.FC<ChartProps> = ({
42
60
 
43
61
  return (
44
62
  <Ch
45
- type={type}
46
63
  id={id}
64
+ type={type}
47
65
  series={series}
48
- height={height}
66
+ height={options?.height}
49
67
  options={{
50
68
  title: {
51
69
  text: title,
@@ -74,6 +92,7 @@ export const Chart: React.FC<ChartProps> = ({
74
92
  "#9e9e9e",
75
93
  ],
76
94
  chart: {
95
+ type: type,
77
96
  toolbar: {
78
97
  show: false,
79
98
  },
@@ -81,14 +100,14 @@ export const Chart: React.FC<ChartProps> = ({
81
100
  enabled: false,
82
101
  },
83
102
  sparkline: {
84
- enabled: sparkline ?? true,
103
+ enabled: options?.sparkline ?? true,
85
104
  },
86
105
  events: {
87
106
  mounted: (chart) => {
88
107
  chart.windowResizeHandler();
89
108
  },
90
109
  },
91
- foreColor: theme === "light" ? "#475569" : "#ffffff",
110
+ foreColor: options?.theme === "light" ? "#475569" : "#ffffff",
92
111
  },
93
112
  dataLabels: {
94
113
  enabled: false,
@@ -101,18 +120,39 @@ export const Chart: React.FC<ChartProps> = ({
101
120
  bar: {
102
121
  borderRadius: 4,
103
122
  columnWidth: "30%",
123
+ horizontal: options?.barChart?.variant === "horizontal",
104
124
  },
105
125
  pie: {
106
126
  donut: {
107
- size: "70%",
127
+ labels: {
128
+ show: type === "donut",
129
+ name: {
130
+ show: true,
131
+ },
132
+ value: {
133
+ show: true,
134
+ },
135
+ total: {
136
+ show: true,
137
+ },
138
+ },
139
+ },
140
+ },
141
+ radialBar: {
142
+ dataLabels: {
143
+ total: {
144
+ show: true,
145
+ label: "Total",
146
+ },
108
147
  },
109
148
  },
110
149
  },
111
150
  tooltip: {
112
- theme: theme === "light" ? "light" : "dark",
151
+ theme: options?.theme === "light" ? "light" : "dark",
152
+ fillSeriesColor: false,
113
153
  },
114
154
  grid: {
115
- borderColor: theme === "light" ? "#e5e6e8" : "#545869",
155
+ borderColor: options?.theme === "light" ? "#e5e6e8" : "#545869",
116
156
  },
117
157
  ...areaOptions,
118
158
  }}