Skip to content

Commit 6207db5

Browse files
BlariBlari
committed
Add charts pages block
1 parent f117ed7 commit 6207db5

File tree

12 files changed

+1573
-1
lines changed

12 files changed

+1573
-1
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@mui/styles": "^5.6.2",
2020
"@mui/x-data-grid": "^5.6.1",
2121
"@mui/x-date-pickers": "^5.0.0-alpha.1",
22+
"apexcharts": "^3.35.2",
2223
"axios": "^0.21.1",
2324
"babel-eslint": "10.1.0",
2425
"classnames": "^2.2.6",
@@ -37,6 +38,7 @@
3738
"mui-datatables": "^4.2.2",
3839
"query-string": "7.1.0",
3940
"react": "^17.0.2",
41+
"react-apexcharts": "^1.4.0",
4042
"react-dom": "^17.0.2",
4143
"react-redux": "^7.2.4",
4244
"react-router-dom": "^5.2.0",

‎src/components/Layout/Layout.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@ import WidgetsPage from '../../pages/widget'
4848
import FormsElements from '../../pages/forms/elements'
4949
import FormValidation from '../../pages/forms/validation'
5050

51+
import Charts from '../../pages/charts'
52+
import LineCharts from '../../pages/charts/LineCharts'
53+
import BarCharts from '../../pages/charts/BarCharts'
54+
import PieCharts from '../../pages/charts/PieCharts'
55+
5156
import BreadCrumbs from '../../components/BreadCrumbs';
5257

5358
// context
@@ -115,6 +120,11 @@ function Layout(props) {
115120
<Route path="/app/forms/elements" component={FormsElements} />
116121
<Route path="/app/forms/validation" component={FormValidation} />
117122

123+
<Route path="/app/charts/overview" component={Charts} />
124+
<Route path="/app/charts/line" component={LineCharts} />
125+
<Route path="/app/charts/bar" component={BarCharts} />
126+
<Route path="/app/charts/pie" component={PieCharts} />
127+
118128
/>
119129

120130
<Route path={'/app/api-docs'} exact

‎src/pages/charts/BarCharts.js

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
import React, { useState } from "react";
2+
import { Grid } from "@mui/material";
3+
import { useTheme } from "@mui/styles";
4+
import ReactApexChart from "react-apexcharts";
5+
import img from "../../images/carousel/2.jpg";
6+
7+
// components
8+
import Widget from "../../components/Widget/Widget";
9+
10+
const themeOptions = theme => {
11+
return {
12+
plotOptions: {
13+
bar: {
14+
horizontal: true
15+
}
16+
},
17+
dataLabels: {
18+
enabled: false
19+
},
20+
xaxis: {
21+
categories: [
22+
"South Korea",
23+
"Canada",
24+
"United Kingdom",
25+
"Netherlands",
26+
"Italy",
27+
"France",
28+
"Japan",
29+
"United States",
30+
"China",
31+
"Germany"
32+
]
33+
},
34+
stroke: {
35+
curve: "smooth"
36+
},
37+
legend: {
38+
show: false
39+
},
40+
chart: {
41+
stacked: false,
42+
toolbar: {
43+
show: false
44+
}
45+
},
46+
tooltip: {
47+
shared: false
48+
},
49+
colors: [theme.palette.primary.main],
50+
options: {
51+
plotOptions: {
52+
bar: {
53+
horizontal: true,
54+
dataLabels: {
55+
position: "top"
56+
}
57+
}
58+
},
59+
dataLabels: {
60+
enabled: true,
61+
offsetX: -6,
62+
style: {
63+
fontSize: "12px",
64+
colors: ["#fff"]
65+
}
66+
},
67+
stroke: {
68+
show: true,
69+
width: 1,
70+
colors: ["#fff"]
71+
},
72+
73+
xaxis: {
74+
categories: [2013, 2014, 2015, 2016, 2017, 2018, 2019]
75+
},
76+
colors: [theme.palette.primary.main, theme.palette.success.light]
77+
},
78+
options2: {
79+
chart: {
80+
stacked: true,
81+
toolbar: {
82+
show: false
83+
}
84+
},
85+
plotOptions: {
86+
bar: {
87+
horizontal: true
88+
}
89+
},
90+
stroke: {
91+
width: 1,
92+
colors: ["#fff"]
93+
},
94+
xaxis: {
95+
categories: [2013, 2014, 2015, 2016, 2017, 2018, 2019],
96+
labels: {
97+
formatter: function(val) {
98+
return val + "K";
99+
}
100+
}
101+
},
102+
yaxis: {
103+
title: {
104+
text: undefined
105+
}
106+
},
107+
tooltip: {
108+
y: {
109+
formatter: function(val) {
110+
return val + "K";
111+
}
112+
}
113+
},
114+
fill: {
115+
opacity: 1
116+
},
117+
colors: [
118+
theme.palette.primary.main,
119+
theme.palette.secondary.main,
120+
theme.palette.warning.main,
121+
theme.palette.success.light,
122+
theme.palette.info.main
123+
],
124+
legend: {
125+
position: "top",
126+
horizontalAlign: "left",
127+
offsetX: 40
128+
}
129+
},
130+
options3: {
131+
chart: {
132+
animations: {
133+
enabled: false
134+
},
135+
toolbar: {
136+
show: false
137+
}
138+
},
139+
plotOptions: {
140+
bar: {
141+
horizontal: true,
142+
barHeight: "100%"
143+
}
144+
},
145+
dataLabels: {
146+
enabled: false
147+
},
148+
stroke: {
149+
colors: ["#fff"],
150+
width: 0.2
151+
},
152+
labels: Array.apply(null, { length: 39 }).map(function(el, index) {
153+
return index + 1;
154+
}),
155+
yaxis: {
156+
axisBorder: {
157+
show: false
158+
},
159+
axisTicks: {
160+
show: false
161+
},
162+
labels: {
163+
show: false
164+
}
165+
},
166+
grid: {
167+
position: "back"
168+
},
169+
fill: {
170+
type: "image",
171+
opacity: 0.87,
172+
image: {
173+
src: [img],
174+
width: 466,
175+
height: 406
176+
}
177+
}
178+
}
179+
};
180+
};
181+
182+
const values = {
183+
series: [
184+
{
185+
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
186+
}
187+
],
188+
series2: [
189+
{
190+
data: [44, 55, 41, 64, 22, 43, 21]
191+
},
192+
{
193+
data: [53, 32, 33, 52, 13, 44, 32]
194+
}
195+
],
196+
series3: [
197+
{
198+
name: "Marine Sprite",
199+
data: [44, 55, 41, 37, 22, 43, 21]
200+
},
201+
{
202+
name: "Striking Calf",
203+
data: [53, 32, 33, 52, 13, 43, 32]
204+
},
205+
{
206+
name: "Tank Picture",
207+
data: [12, 17, 11, 9, 15, 11, 20]
208+
},
209+
{
210+
name: "Bucket Slope",
211+
data: [9, 7, 5, 8, 6, 9, 4]
212+
},
213+
{
214+
name: "Reborn Kid",
215+
data: [25, 12, 19, 32, 25, 24, 10]
216+
}
217+
],
218+
series4: [
219+
{
220+
name: "coins",
221+
data: [
222+
2,
223+
4,
224+
3,
225+
4,
226+
3,
227+
5,
228+
5,
229+
6.5,
230+
6,
231+
5,
232+
4,
233+
5,
234+
8,
235+
7,
236+
7,
237+
8,
238+
8,
239+
10,
240+
9,
241+
9,
242+
12,
243+
12,
244+
11,
245+
12,
246+
13,
247+
14,
248+
16,
249+
14,
250+
15,
251+
17,
252+
19,
253+
21
254+
]
255+
}
256+
]
257+
};
258+
259+
export default function Charts(props) {
260+
const theme = useTheme();
261+
const [state] = useState(values);
262+
263+
// local
264+
265+
return (
266+
<>
267+
<Grid container spacing={4}>
268+
<Grid item md={6} xs={12}>
269+
<Widget title={"Bar Basic"} noBodyPadding>
270+
<ReactApexChart
271+
options={themeOptions(theme)}
272+
series={state.series}
273+
type="bar"
274+
height="350"
275+
/>
276+
</Widget>
277+
</Grid>
278+
<Grid item md={6} xs={12}>
279+
<Widget title={"Grouped Basic"} noBodyPadding>
280+
<ReactApexChart
281+
options={themeOptions(theme).options}
282+
series={state.series2}
283+
type="bar"
284+
height="350"
285+
/>
286+
</Widget>
287+
</Grid>
288+
<Grid item md={6} xs={12}>
289+
<Widget title={"Stacked Basic"} noBodyPadding>
290+
<ReactApexChart
291+
options={themeOptions(theme).options2}
292+
series={state.series3}
293+
type="bar"
294+
height="350"
295+
/>
296+
</Widget>
297+
</Grid>
298+
<Grid item md={6} xs={12}>
299+
<Widget title={"Bar with Images"} noBodyPadding>
300+
<ReactApexChart
301+
options={themeOptions(theme).options3}
302+
series={state.series4}
303+
type="bar"
304+
height="350"
305+
/>
306+
</Widget>
307+
</Grid>
308+
</Grid>
309+
</>
310+
);
311+
}

0 commit comments

Comments
 (0)