Merge pull request #70 from mayurmarakana89/geochart-theme-styling

use theme into geohart from cgpv (#70)
Canadian-Geospatial-Platform · Mar 1, 2024 · b31d278 · b31d278
2 parents e549f6b + 0253979
commit b31d278
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 85 deletions.
diff --git a/src/chart-style.ts b/src/chart-style.ts
@@ -1,71 +1,119 @@
 /**
  * SX Classes for the Chart
  */
-export const sxClasses = {
-  mainContainer: {
-    width: '100%',
-  },
-  mainGeoChartContainer: {},
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  datasourceSelector: {
-    minWidth: '150px',
-  },
-  title: {
-    padding: '10px',
-    fontSize: 'larger',
-  },
-  xAxisLabel: {
-    textAlign: 'center',
-    margin: '10px 0px',
-  },
-  yAxisLabel: {
-    position: 'relative',
-    margin: '0 10px',
-    writingMode: 'vertical-rl',
-    transform: 'rotate(-180deg)',
-    transformOrigin: 'bottom center',
-  },
-  uiOptions: {
-    position: 'absolute',
-    right: '0px',
-    marginRight: '35px',
-    verticalAlign: 'middle',
-  },
-  uiOptionsStepsSelector: {
-    minWidth: '100px',
-  },
-  uiOptionsResetStates: {
-    display: 'inline-flex',
-    width: '40px',
-  },
-  checkDatasetWrapperLabel: {
-    display: 'inline-block',
-    padding: '9px',
-  },
-  checkDatasetWrapper: {
-    display: 'inline-block',
-  },
-  checkDatasetLabel: {
-    display: 'inline-flex',
-    verticalAlign: 'middle',
-    marginRight: '20px !important',
-  },
-  chartContent: {
-    position: 'relative',
-  },
-  xSliderWrapper: {},
-  ySliderWrapper: {
-    height: '85%',
-  },
-  loadingDatasource: {
-    backgroundColor: 'transparent',
-    zIndex: 0,
-  },
-  chartError: {
-    fontStyle: 'italic',
-    color: 'red',
-  },
+import { Theme } from '@mui/material/styles';
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const getSxClasses = (theme: Theme) => {
+  return {
+    mainContainer: {
+      borderColor: theme.palette.geoViewColor.primary.main,
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      overflowY: 'auto',
+    },
+    mainGeoChartContainer: {
+      padding: '20px',
+      display: 'flex',
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'row',
+    },
+    datasourceSelector: {
+      minWidth: '150px',
+      marginRight: '10px',
+      '& .MuiSelect-select': {
+        padding: '8px 12px !important',
+      },
+    },
+    uiOptionsStepsSelector: {
+      minWidth: '100px',
+      '& .MuiSelect-select': {
+        padding: '8px 12px !important',
+      },
+    },
+    downloadButton: {
+      marginLeft: 'auto',
+      '& button': {
+        height: '40px',
+        textTransform: 'capitalize',
+        backgroundColor: theme.palette.geoViewColor?.bgColor.dark[100],
+        color: theme.palette.geoViewColor.textColor.main,
+        '&:hover': {
+          backgroundColor: theme.palette.geoViewColor?.bgColor.dark[50],
+          color: theme.palette.geoViewColor.textColor.main,
+        },
+      },
+    },
+    dataset: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title: {
+      fontWeight: 'bold',
+      fontSize: theme.palette.geoViewFontSize.lg,
+      textAlign: 'center',
+      margin: '10px 0px',
+    },
+    xAxisLabel: {
+      textAlign: 'center',
+      margin: '10px 0px',
+      fontWeight: 'bold',
+    },
+    yAxisLabel: {
+      position: 'relative',
+      margin: 'auto',
+      writingMode: 'vertical-rl',
+      transform: 'rotate(-180deg)',
+      transformOrigin: 'bottom center',
+      fontWeight: 'bold',
+      marginTop: '-15%',
+    },
+    uiOptionsResetStates: {
+      display: 'inline-flex',
+      width: '40px',
+      textTransform: 'capitalize',
+      margin: '10px',
+    },
+    checkDatasetWrapperLabel: {
+      display: 'inline-block',
+      padding: '10px',
+    },
+    checkDatasetWrapper: {
+      display: 'inline-block',
+      '& .Mui-checked': {
+        color: `${theme.palette.geoViewColor.primary.main} !important`,
+      },
+    },
+    checkDatasetLabel: {
+      display: 'inline-flex',
+      verticalAlign: 'middle',
+      marginRight: '20px !important',
+    },
+    chartContent: {
+      position: 'relative',
+    },
+    xSliderWrapper: {
+      '& .MuiSlider-root': {
+        color: theme.palette.geoViewColor.primary.main,
+      },
+    },
+    ySliderWrapper: {
+      height: '75%',
+      textAlign: 'center',
+      '& .MuiSlider-root': {
+        color: theme.palette.geoViewColor.primary.main,
+      },
+    },
+    loadingDatasource: {
+      backgroundColor: 'transparent',
+      zIndex: 0,
+    },
+    chartError: {
+      fontStyle: 'italic',
+      color: 'red',
+    },
+  };
 };
diff --git a/src/chart.tsx b/src/chart.tsx
@@ -21,7 +21,7 @@ import {
 import { SchemaValidator, ValidatorResult } from './chart-schema-validator';
 import { createChartJSOptions, createChartJSData, fetchItemsViaQueryForDatasource, setColorPalettes } from './chart-parsing';
 import { isNumber, downloadJson, getColorFromPalette } from './utils';
-import { sxClasses } from './chart-style';
+import { getSxClasses } from './chart-style';
 
 /**
  * Main props for the Chart.
@@ -129,6 +129,7 @@ export function GeoChart<
   // Leaving the code commented purposely in case we want it fast
   // const { useWhatChanged } = cgpv.ui;
   const {
+    Paper,
     Box,
     Grid,
     Button,
@@ -140,6 +141,7 @@ export function GeoChart<
     Typography,
     SliderBase: Slider,
     CircularProgress,
+    cgpvTheme,
   } = cgpv.ui.elements;
   const {
     sx: elStyle,
@@ -167,6 +169,7 @@ export function GeoChart<
     onParsed,
     onError,
   } = props;
+  const sxClasses = getSxClasses(cgpvTheme);
 
   // Translation
   const { i18n: i18nReact } = useTranslation();
@@ -1490,7 +1493,11 @@ export function GeoChart<
    */
   const renderDownload = (): JSX.Element => {
     if (inputs?.ui?.download) {
-      return <ButtonDropDown onButtonClick={handleDownloadClick} options={[t('geochart.downloadFiltered'), t('geochart.downloadAll')]} />;
+      return (
+        <Box sx={sxClasses.downloadButton}>
+          <ButtonDropDown onButtonClick={handleDownloadClick} options={[t('geochart.downloadFiltered'), t('geochart.downloadAll')]} />
+        </Box>
+      );
     }
     return <Box />;
   };
@@ -1574,10 +1581,10 @@ export function GeoChart<
    */
   const renderUIOptions = (): JSX.Element => {
     return (
-      <Box sx={sxClasses.uiOptions}>
+      <>
         {renderUIOptionsStepsSwitcher()}
-        {renderUIOptionsResetStates()}
-      </Box>
+        {false && renderUIOptionsResetStates()}
+      </>
     );
   };
 
@@ -1590,7 +1597,7 @@ export function GeoChart<
       if (Object.keys(datasetRegistry).length > 1) {
         const label = chartType === 'pie' || chartType === 'doughnut' ? `${t('geochart.category')}:` : '';
         return (
-          <Box>
+          <>
             <Typography sx={sxClasses.checkDatasetWrapperLabel}>{label}</Typography>
             {Object.entries(datasetRegistry)
               .filter(([, dsOption]: [string, GeoChartDatasetOption]) => {
@@ -1614,7 +1621,7 @@ export function GeoChart<
                   </Box>
                 );
               })}
-          </Box>
+          </>
         );
       }
     }
@@ -1632,7 +1639,7 @@ export function GeoChart<
       if (chartType === 'pie' || chartType === 'doughnut') {
         if (Object.keys(datasRegistry).length > 1) {
           return (
-            <Box>
+            <>
               {Object.entries(datasRegistry)
                 .filter(([, dsOption]: [string, GeoChartDatasetOption]) => {
                   return dsOption.visible;
@@ -1654,7 +1661,7 @@ export function GeoChart<
                     </Box>
                   );
                 })}
-            </Box>
+            </>
           );
         }
       }
@@ -1671,17 +1678,21 @@ export function GeoChart<
   const renderChartContainer = (): JSX.Element => {
     // The xs: 1, 11 and 12 used here are as documented online
     return (
-      <Box sx={{ ...sx, ...sxClasses.mainGeoChartContainer }}>
+      <Paper sx={{ ...sx, ...sxClasses.mainGeoChartContainer }}>
         <Grid container>
           <Grid item xs={12}>
             <Box sx={sxClasses.header}>
               {renderDatasourceSelector()}
-              {renderTitle()}
               {renderUIOptions()}
+              {renderDownload()}
+            </Box>
+            <Box sx={sxClasses.title}>{renderTitle()}</Box>
+            <Box sx={sxClasses.dataset}>
+              {renderDataSelector()}
+              {renderDatasetSelector()}
             </Box>
-            {renderDataSelector()}
-            {renderDatasetSelector()}
           </Grid>
+
           <Grid item xs={1}>
             {renderYAxisLabel()}
           </Grid>
@@ -1692,17 +1703,19 @@ export function GeoChart<
           <Grid item xs={1}>
             {renderYSlider()}
           </Grid>
-          <Grid item xs={1} />
-          <Grid item xs={10}>
+
+          <Grid item xs={1.25} />
+          <Grid item xs={9.75}>
             {renderXAxisLabel()}
             {renderXSlider()}
           </Grid>
+          <Grid item xs={1} />
+
           <Grid item xs={12}>
             {renderDescription()}
-            {renderDownload()}
           </Grid>
         </Grid>
-      </Box>
+      </Paper>
     );
   };
 
@@ -1759,5 +1772,5 @@ GeoChart.defaultProps = {
       },
     },
   } as ChartOptions<ChartType>,
-  data: { datasets: [], labels: [] },
+  data: { datasets: [], labels: [], borderWidth: 10 },
 };
diff --git a/src/types.ts b/src/types.ts
@@ -276,6 +276,7 @@ export const DEFAULT_COLOR_PALETTE_CUSTOM_ALT_OPAQUE: string[] = DEFAULT_COLOR_P
  * The date formatting to show the dates on the Axis.
  */
 export const DATE_OPTIONS_AXIS: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
   month: 'short',
   day: 'numeric',
 };