98 |
99 | {/* header */}
100 |
107 |
108 |
109 |
110 |
111 |
112 | {/* drawer */}
113 |
114 |
115 | {/* main content */}
116 |
124 | {/* */}
125 | {/* breadcrumb */}
126 |
127 | {children}
128 | {/* */}
129 |
130 |
131 |
132 | );
133 | };
134 |
135 | MainLayout.propTypes = {
136 | children: PropTypes.node
137 | };
138 |
139 | export default MainLayout;
140 |
--------------------------------------------------------------------------------
/react-ui/src/views/dashboard/Default/TotalGrowthBarChart.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | // material-ui
5 | import { Grid, MenuItem, TextField, Typography, useTheme } from '@material-ui/core';
6 |
7 | // third-party
8 | import ApexCharts from 'apexcharts';
9 | import Chart from 'react-apexcharts';
10 |
11 | // project imports
12 | import SkeletonTotalGrowthBarChart from './../../../ui-component/cards/Skeleton/TotalGrowthBarChart';
13 | import MainCard from './../../../ui-component/cards/MainCard';
14 | import { gridSpacing } from './../../../store/constant';
15 |
16 | // chart data
17 | import chartData from './chart-data/total-growth-bar-chart';
18 |
19 | const status = [
20 | {
21 | value: 'today',
22 | label: 'Today'
23 | },
24 | {
25 | value: 'month',
26 | label: 'This Month'
27 | },
28 | {
29 | value: 'year',
30 | label: 'This Year'
31 | }
32 | ];
33 |
34 | //-----------------------|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||-----------------------//
35 |
36 | const TotalGrowthBarChart = ({ isLoading }) => {
37 | const [value, setValue] = React.useState('today');
38 | const theme = useTheme();
39 |
40 | const primary = theme.palette.text.primary;
41 | const grey200 = theme.palette.grey[200];
42 |
43 | const primary200 = theme.palette.primary[200];
44 | const primaryDark = theme.palette.primary.dark;
45 | const secondaryMain = theme.palette.secondary.main;
46 | const secondaryLight = theme.palette.secondary.light;
47 | const grey500 = theme.palette.grey[500];
48 |
49 | React.useEffect(() => {
50 | const newChartData = {
51 | ...chartData.options,
52 | colors: [primary200, primaryDark, secondaryMain, secondaryLight],
53 | xaxis: {
54 | labels: {
55 | style: {
56 | colors: [primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary]
57 | }
58 | }
59 | },
60 | yaxis: {
61 | labels: {
62 | style: {
63 | colors: [primary]
64 | }
65 | }
66 | },
67 | grid: {
68 | borderColor: grey200
69 | },
70 | tooltip: {
71 | theme: 'light'
72 | },
73 | legend: {
74 | labels: {
75 | colors: grey500
76 | }
77 | }
78 | };
79 |
80 | // do not load chart when loading
81 | if (!isLoading) {
82 | ApexCharts.exec(`bar-chart`, 'updateOptions', newChartData);
83 | }
84 | }, [primary200, primaryDark, secondaryMain, secondaryLight, primary, grey200, isLoading, grey500]);
85 |
86 | return (
87 |