Merge branch 'development'

.vscode/bookmarks.json

@@ -0,0 +1,14 @@
+{
+	"files": [
+		{
+			"path": "src/components/pages/homePage/content/index.js",
+			"bookmarks": [
+				{
+					"line": 164,
+					"column": 76,
+					"label": ""
+				}
+			]
+		}
+	]
+}

package.json

@@ -11,6 +11,7 @@
     "@nivo/pie": "^0.67.0",
     "@nivo/radar": "^0.67.0",
     "@nivo/stream": "^0.67.0",
+    "@nivo/waffle": "^0.67.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/assets/data/waffle.json

@@ -0,0 +1,20 @@
+[
+  {
+    "id": "men",
+    "label": "men",
+    "value": 22.61185020415685,
+    "color": "#468df3"
+  },
+  {
+    "id": "women",
+    "label": "women",
+    "value": 20.379186016429255,
+    "color": "#ba72ff"
+  },
+  {
+    "id": "children",
+    "label": "children",
+    "value": 20.88781939320837,
+    "color": "#a1cfff"
+  }
+]

src/components/menu/index.js

@@ -15,6 +15,7 @@ import CalendarDataFile from '../../assets/data/calendar.json';
 import SteamDataFile from '../../assets/data/stream.json';
 import PieDataFile from '../../assets/data/pie.json';
 import RadarDataFile from '../../assets/data/radar.json';
+import WaffleDataFile from '../../assets/data/waffle.json';
 import ProcustDataFile from '../../assets/data/products.json';
 import useStyles from './styles';
 
@@ -31,6 +32,10 @@ export default function Menu() {
     dispatch(ChartsActions.setRadarData(RadarDataFile));
   };
 
+  const setWaffleChartData = () => {
+    dispatch(ChartsActions.setWaffleData(WaffleDataFile));
+  };
+
   const setPieChartData = () => {
     dispatch(ChartsActions.setPieData(PieDataFile));
   };
@@ -62,6 +67,7 @@ export default function Menu() {
     setStreamChartData();
     setPieChartData();
     setRadarChartData();
+    setWaffleChartData();
   }, []);
 
   return (

src/components/pages/homePage/content/index.js

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { ResponsiveStream } from '@nivo/stream';
 import { ResponsivePie } from '@nivo/pie';
 import { ResponsiveRadar } from '@nivo/radar';
+import { ResponsiveWaffle } from '@nivo/waffle';
 import useStyles from './styles';
 
 export default function Content() {
@@ -26,9 +27,10 @@ export default function Content() {
                 >
                   <ResponsivePie
                     data={chartStates.pie}
-                    margin={{ top: 75, right: 75, bottom: 55, left: -120 }}
+                    margin={{ top: 40, right: 75, bottom: 40, left: -140 }}
                     innerRadius={0.5}
                     padAngle={0.4}
+                    enableRadialLabels={false}
                     cornerRadius={3}
                     colors={{ scheme: 'nivo' }}
                     borderWidth={1}
@@ -125,7 +127,7 @@ export default function Content() {
                     keys={['chardonay', 'carmenere', 'syrah']}
                     indexBy="taste"
                     maxValue="auto"
-                    margin={{ top: 45, right: 100, bottom: 45, left: -120 }}
+                    margin={{ top: 40, right: 100, bottom: 40, left: -140 }}
                     curve="linearClosed"
                     borderWidth={2}
                     borderColor={{ from: 'color' }}
@@ -137,7 +139,7 @@ export default function Content() {
                     dotColor={{ theme: 'background' }}
                     dotBorderWidth={2}
                     dotBorderColor={{ from: 'color' }}
-                    enableDotLabel
+                    // enableDotLabel
                     dotLabel="value"
                     dotLabelYOffset={-12}
                     colors={{ scheme: 'nivo' }}
@@ -154,7 +156,24 @@ export default function Content() {
                     backgroundImage:
                       'url(https://cdni.iconscout.com/illustration/premium/thumb/online-shopping-via-mobile-application-1886572-1598243.png)',
                   }}
-                />
+                >
+                  <ResponsiveWaffle
+                    data={chartStates.waffle}
+                    total={100}
+                    rows={10}
+                    columns={10}
+                    margin={{ top: 25, right: 110, bottom: 25, left: -120 }}
+                    colors={{ scheme: 'nivo' }}
+                    emptyColor="#fff"
+                    borderColor={{
+                      from: 'color',
+                      modifiers: [['darker', 0.3]],
+                    }}
+                    animate
+                    motionStiffness={90}
+                    motionDamping={11}
+                  />
+                </div>
               </div>
               <Grid item xs={12} className={classes.gridCard}>
                 <ResponsiveStream

src/store/modules/charts/actions.js

@@ -14,6 +14,10 @@ export const setRadarData = (data) => {
   return { type: '@app/SET_RADAR_DATA', data };
 };
 
+export const setWaffleData = (data) => {
+  return { type: '@app/SET_WAFFLE_DATA', data };
+};
+
 export const setLoading = (loading) => {
   return { type: '@app/SET_LOADING', loading };
 };

src/store/modules/charts/reducer.js

@@ -3,6 +3,7 @@ import produce from 'immer';
 const initialState = {
   calendar: [],
   stream: [],
+  waffle: [],
   radar: [],
   pie: [],
   loading: true,
@@ -34,6 +35,12 @@ export default function charts(state = initialState, action) {
         draft.pie = action.data;
       });
 
+    case '@app/SET_WAFFLE_DATA':
+      // eslint-disable-next-line no-console
+      return produce(state, (draft) => {
+        draft.waffle = action.data;
+      });
+
     case '@app/SET_LOADING':
       return produce(state, (draft) => {
         draft.loading = action.loading;