-
+
{props.data?.map((item, index) => {
diff --git a/src/components/dashboard/DashboardStcsDay.js b/src/components/dashboard/DashboardStcsDay.js
index ad35e2d..50cb0e9 100644
--- a/src/components/dashboard/DashboardStcsDay.js
+++ b/src/components/dashboard/DashboardStcsDay.js
@@ -1,95 +1,83 @@
+import 'react-datepicker/dist/react-datepicker.css';
import { ko } from 'date-fns/esm/locale';
-import React, { useEffect, useState } from 'react';
+import { Plus } from 'react-feather';
+import { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';
import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
import { Calendar } from 'react-feather';
import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
-import { useSkin } from '../../utility/hooks/useSkin';
-export const DashboardStcsDay = props => {
- const [chartData, setChartData] = useState({});
+const tooltipShadow = 'rgba(0, 0, 0, 0.25)';
+const gridLineColor = 'rgba(200, 200, 200, 0.2)';
+const successColorShade = '#28dac6';
- const [skin, setSkin] = useSkin(),
- labelColor = skin === 'dark' ? '#b4b7bd' : '#6e6b7b',
- tooltipShadow = 'rgba(0, 0, 0, 0.25)',
- gridLineColor = 'rgba(200, 200, 200, 0.2)',
- lineChartPrimary = '#666ee8',
- lineChartDanger = '#ff4961',
- warningColorShade = '#ffe802',
- warningLightColor = '#FDAC34',
- successColorShade = '#28dac6',
- primaryColorShade = '#836AF9',
- infoColorShade = '#299AFF',
- yellowColor = '#ffe800',
- greyColor = '#4F5D70',
- blueColor = '#2c9aff',
- blueLightColor = '#84D0FF',
- greyLightColor = '#EDF1F4';
+const options = {
+ elements: {
+ rectangle: {
+ borderWidth: 2,
+ borderSkipped: 'bottom'
+ }
+ },
+ responsive: true,
+ maintainAspectRatio: false,
+ responsiveAnimationDuration: 500,
+ legend: {
+ display: false
+ },
- const options = {
- elements: {
- rectangle: {
- borderWidth: 2,
- borderSkipped: 'bottom'
- }
- },
- responsive: true,
- maintainAspectRatio: false,
- responsiveAnimationDuration: 500,
- legend: {
- display: false
- },
- tooltips: {
- // Updated default tooltip UI
- shadowOffsetX: 1,
- shadowOffsetY: 1,
- shadowBlur: 8,
- shadowColor: tooltipShadow,
- backgroundColor: '#fff',
- titleFontColor: '#000',
- bodyFontColor: '#000'
- },
- scales: {
- xAxes: [
- {
+ tooltips: {
+ // Updated default tooltip UI
+ shadowOffsetX: 1,
+ shadowOffsetY: 1,
+ shadowBlur: 8,
+ shadowColor: tooltipShadow,
+ backgroundColor: '#fff',
+ titleFontColor: '#000',
+ bodyFontColor: '#000'
+ },
+ scales: {
+ xAxes: [
+ {
+ display: true,
+ gridLines: {
display: true,
- gridLines: {
- display: true,
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- scaleLabel: {
- display: false
- },
- ticks: {
- fontColor: labelColor
- }
+ color: gridLineColor,
+ zeroLineColor: gridLineColor
+ },
+ scaleLabel: {
+ display: false
+ },
+ ticks: {
+ fontColor: '#6e6b7b'
}
- ],
- yAxes: [
- {
- display: true,
- gridLines: {
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- ticks: {
- stepSize: 1,
- // min: 0,
- // max: 400,
- fontColor: labelColor
- }
+ }
+ ],
+ yAxes: [
+ {
+ display: true,
+ gridLines: {
+ color: gridLineColor,
+ zeroLineColor: gridLineColor
+ },
+ ticks: {
+ stepSize: 1,
+ // min: 0,
+ // max: 400,
+ fontColor: '#6e6b7bs'
}
- ]
- }
- };
+ }
+ ]
+ }
+};
+
+export const DashboardStcsDay = ({ startDate, setStartDate, data }) => {
+ const [chartData, setChartData] = useState({});
const chartDataInit = () => {
let arrDay = [];
let arrValue = [];
- props.data?.map(item => {
+ data?.map(item => {
arrDay.push(item.typeCd);
arrValue.push(item.count);
});
@@ -110,7 +98,7 @@ export const DashboardStcsDay = props => {
useEffect(() => {
chartDataInit();
- }, [props.data]);
+ }, [data]);
return (
@@ -121,8 +109,8 @@ export const DashboardStcsDay = props => {
props.setStartDate(date)}
+ selected={startDate}
+ onChange={date => setStartDate(date)}
dateFormat='yyy / MMMM'
showMonthYearPicker
showFullMonthYearPicker
@@ -131,10 +119,37 @@ export const DashboardStcsDay = props => {
/>
+
-
+