Ft add geography chart scene

src/App.js

@@ -13,7 +13,7 @@ import Form from './scenes/Form';
 import Line from './scenes/Line';
 import Pie from './scenes/Pie';
 import FAQ from './scenes/FAQ';
-// import Geograph from './scenes/Geograph';
+import Geography from './scenes/Geography';
 import Calendar from './scenes/Calendar';
 
 function App() {
@@ -35,7 +35,7 @@ function App() {
               <Route path="/bar" element={<Bar />} />
               <Route path="/pie" element={<Pie />} />
               <Route path="/line" element={<Line />} />
-              {/* <Route path="/geograph" element={<Geograph />} /> */}
+              <Route path="/geography" element={<Geography />} />
               <Route path="/faq" element={<FAQ />} />
               <Route path="/calendar" element={<Calendar />} />
             </Routes>

src/components/Shared/Geography/index.jsx

@@ -0,0 +1,97 @@
+import { useTheme } from '@mui/material';
+import { ResponsiveChoropleth } from '@nivo/geo';
+import PropTypes from 'prop-types';
+import { geoFeatures } from '../../../data/mockGeoFeatures';
+import { tokens } from '../../../theme';
+
+const GeographyChart = ({ data, isDashboard = false }) => {
+  const theme = useTheme();
+  const colors = tokens(theme.palette.mode);
+  return (
+    <ResponsiveChoropleth
+      data={data}
+      theme={{
+        axis: {
+          domain: {
+            line: {
+              stroke: colors.grey[100],
+            },
+          },
+          legend: {
+            text: {
+              fill: colors.grey[100],
+            },
+          },
+          ticks: {
+            line: {
+              stroke: colors.grey[100],
+              strokeWidth: 1,
+            },
+            text: {
+              fill: colors.grey[100],
+            },
+          },
+        },
+        legends: {
+          text: {
+            fill: colors.grey[100],
+          },
+        },
+        tooltip: {
+          container: {
+            color: colors.primary[500],
+          },
+        },
+      }}
+      features={geoFeatures.features}
+      margin={{
+        top: 0, right: 0, bottom: 0, left: 0,
+      }}
+      domain={[0, 1000000]}
+      unknownColor="#666666"
+      label="properties.name"
+      valueFormat=".2s"
+      projectionScale={isDashboard ? 40 : 150}
+      projectionTranslation={isDashboard ? [0.49, 0.6] : [0.5, 0.5]}
+      projectionRotation={[0, 0, 0]}
+      borderWidth={1.5}
+      borderColor="#ffffff"
+      legends={
+        !isDashboard
+          ? [
+            {
+              anchor: 'bottom-left',
+              direction: 'column',
+              justify: true,
+              translateX: 20,
+              translateY: -100,
+              itemsSpacing: 0,
+              itemWidth: 94,
+              itemHeight: 18,
+              itemDirection: 'left-to-right',
+              itemTextColor: colors.grey[100],
+              itemOpacity: 0.85,
+              symbolSize: 18,
+              effects: [
+                {
+                  on: 'hover',
+                  style: {
+                    itemTextColor: '#ffffff',
+                    itemOpacity: 1,
+                  },
+                },
+              ],
+            },
+          ]
+          : undefined
+      }
+    />
+  );
+};
+
+GeographyChart.propTypes = {
+  data: PropTypes.oneOfType(['object']).isRequired,
+  isDashboard: PropTypes.bool.isRequired,
+};
+
+export default GeographyChart;

src/components/Shared/LineChart/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material';
 import { tokens } from '../../../theme';
 
-const LineChart = ({ data, isDashbord = false }) => {
+const LineChart = ({ data, isDashboard = false }) => {
   const theme = useTheme();
   const colors = tokens(theme.palette.mode);
 
@@ -43,7 +43,7 @@ const LineChart = ({ data, isDashbord = false }) => {
           },
         },
       }}
-      colors={isDashbord ? { datum: 'color' } : { scheme: 'nivo' }}
+      colors={isDashboard ? { datum: 'color' } : { scheme: 'nivo' }}
       margin={{
         top: 50, right: 110, bottom: 50, left: 60,
       }}
@@ -63,15 +63,15 @@ const LineChart = ({ data, isDashbord = false }) => {
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
-        legend: isDashbord ? undefined : 'transportation',
+        legend: isDashboard ? undefined : 'transportation',
         legendOffset: 36,
         legendPosition: 'middle',
       }}
       axisLeft={{
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
-        legend: isDashbord ? undefined : 'count',
+        legend: isDashboard ? undefined : 'count',
         legendOffset: -40,
         legendPosition: 'middle',
       }}
@@ -116,7 +116,7 @@ const LineChart = ({ data, isDashbord = false }) => {
 
 LineChart.propTypes = {
   data: PropTypes.oneOfType(['object']).isRequired,
-  isDashbord: PropTypes.bool.isRequired,
+  isDashboard: PropTypes.bool.isRequired,
 };
 
 export default LineChart;

src/components/Shared/PieChart/index.jsx

@@ -37,6 +37,11 @@ const PieChart = ({ data }) => {
             fill: colors.grey[100],
           },
         },
+        tooltip: {
+          container: {
+            color: colors.primary[500],
+          },
+        },
       }}
       margin={{
         top: 40, right: 80, bottom: 80, left: 80,

src/scenes/Geography/index.jsx

@@ -0,0 +1,22 @@
+import { Box, useTheme } from '@mui/material';
+import GeographyChart from '../../components/Shared/Geography';
+import Header from '../../components/Shared/Header/Header';
+import { mockGeographyData as data } from '../../data/mockData';
+import { tokens } from '../../theme';
+
+console.log(GeographyChart);
+const Geography = () => {
+  const theme = useTheme();
+  const colors = tokens(theme.palette.mode);
+
+  return (
+    <Box m="20px">
+      <Header title="Geography Chart" subTitle="Customized Simple Geography Chart" />
+      <Box height="75vh" border={`1px solid ${colors.grey[100]}`}>
+        <GeographyChart data={data} />
+      </Box>
+    </Box>
+  );
+};
+
+export default Geography;