feat: change geomap checkboxes to radiogroup

globalfund · Oct 14, 2023 · 290e695 · 290e695
1 parent 2df74f0
commit 290e695
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 42 deletions.
diff --git a/src/app/hooks/useChartsRawData.tsx b/src/app/hooks/useChartsRawData.tsx
@@ -69,19 +69,23 @@ export function useChartsRawData(props: {
   const [notFound, setNotFound] = React.useState(false);
   const [dataTotalCount, setDataTotalCount] = React.useState(0);
   const [isEditMode, setIsEditMode] = React.useState(checkIfIsEditMode(view));
+  const localChartFromAPI = JSON.parse(
+    localStorage.getItem("chartFromAPI") as string
+  );
+  const [chartFromAPI, setChartFromAPI] =
+    React.useState<any>(localChartFromAPI);
 
   const appliedFilters = useStoreState(
     (state) => state.charts.appliedFilters.value
   );
   const setAllAppliedFilters = useStoreActions(
     (actions) => actions.charts.appliedFilters.setAll
   );
-  const setChartFromAPI = useStoreActions(
-    (actions) => actions.charts.chartFromAPI.setValue
-  );
-  const chartFromAPI = useStoreState(
-    (state) => state.charts.chartFromAPI.value
-  );
+
+  React.useEffect(() => {
+    localStorage.setItem("chartFromAPI", JSON.stringify(chartFromAPI));
+  }, [chartFromAPI]);
+
   const setEnabledFilterOptionGroups = useStoreActions(
     (actions) => actions.charts.enabledFilterOptionGroups.setValue
   );
@@ -272,5 +276,7 @@ export function useChartsRawData(props: {
     dataTotalCount,
     loadDataset,
     loadDataFromAPI,
+    chartFromAPI,
+    setChartFromAPI,
   };
 }
diff --git a/src/app/hooks/useDataThemesEchart.tsx b/src/app/hooks/useDataThemesEchart.tsx
@@ -142,15 +142,15 @@ export function useDataThemesEchart() {
     const {
       // artboard
       height,
-      width,
+      background,
+      // margins
       marginTop,
       marginRight,
       marginBottom,
       marginLeft,
-      background,
       // Tooltip
       palette,
-      roam,
+
       showTooltip,
       isMonetaryValue,
     } = visualOptions;
@@ -159,7 +159,7 @@ export function useDataThemesEchart() {
 
     const sizes = data.results.map((d: any) => d.value);
 
-    return {
+    const option = {
       tooltip: {
         trigger: showTooltip ? "item" : "none",
         showDelay: 0,
@@ -175,17 +175,12 @@ export function useDataThemesEchart() {
           }
         },
       },
-      backgroundColor: background,
-
       visualMap: {
         left: "right",
         min: Math.min(...sizes),
         max: Math.max(...sizes),
         inRange: {
-          color: checkLists
-            .filter((item) => palette[item.label])
-            .map((item) => item.value)
-            .flat(1),
+          color: checkLists.find((item) => item.label === palette)?.value,
         },
         text: ["High", "Low"],
         calculable: true,
@@ -194,8 +189,7 @@ export function useDataThemesEchart() {
         {
           type: "map",
           height,
-          width,
-          roam: roam,
+          roam: false,
           map: "World",
           data: data.results,
           top: marginTop,
@@ -216,6 +210,8 @@ export function useDataThemesEchart() {
         },
       ],
     };
+
+    return option;
   }
 
   function echartsLinechart(data: any, visualOptions: any) {

diff --git a/src/app/modules/chart-module/components/toolbox/views/steps/panels-content/Mapping.tsx b/src/app/modules/chart-module/components/toolbox/views/steps/panels-content/Mapping.tsx
@@ -112,7 +112,6 @@ export function ChartToolBoxMapping(props: ChartToolBoxMappingProps) {
           css={`
             z-index: 1030;
             position: relative;
-            background: pink;
           `}
         >
           {nonStaticDimensions?.map(

diff --git a/src/app/modules/chart-module/components/toolbox/views/steps/panels-content/SelectDataset.tsx b/src/app/modules/chart-module/components/toolbox/views/steps/panels-content/SelectDataset.tsx
@@ -22,11 +22,11 @@ export const DEFAULT_DATASETS = [
   },
   {
     name: "Allocations",
-    id: "allocations",
+    id: "allocations-dataset",
   },
   {
     name: "Grants",
-    id: "grants",
+    id: "grants-dataset",
   },
   {
     name: "Investment - Signed",

diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx
@@ -55,23 +55,21 @@ export default function ChartModule() {
     isEditMode,
     loadDataset,
     loadDataFromAPI,
+    chartFromAPI,
+    setChartFromAPI,
   } = useChartsRawData({
     visualOptions,
     setVisualOptions,
   });
 
   const chartType = useStoreState((state) => state.charts.chartType.value);
-  const chartFromAPI = useStoreState(
-    (state) => state.charts.chartFromAPI.value
-  );
   const mapping = useStoreState((state) => state.charts.mapping.value);
   const isSaveLoading = useStoreState(
     (state) => state.charts.ChartCreate.loading
   );
   const isChartLoading = useStoreState(
     (state) => state.charts.ChartGet.loading
   );
-
   const loadChart = useStoreActions((actions) => actions.charts.ChartGet.fetch);
   const loadedChart = useStoreState(
     (state) =>
@@ -192,6 +190,7 @@ export default function ChartModule() {
     resetAppliedFilters();
     resetEnabledFilterOptionGroups();
     resetChartFromAPI();
+    clearChart();
   }
 
   function clearChartBuilder() {
@@ -252,11 +251,15 @@ export default function ChartModule() {
     return () => {
       document.body.style.background =
         "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f2f7fd 100%)";
-      clearChart();
       clearChartBuilder();
     };
   }, []);
 
+  //empty chart when chart type and dataset types changes
+  React.useEffect(() => {
+    setChartFromAPI(null);
+  }, [chartType, dataTypes]);
+
   React.useEffect(() => {
     if (!view && toolboxOpen) {
       setToolboxOpen(false);

diff --git a/src/app/modules/chart-module/routes/customize/components/ChartOptionRadioGroup.js b/src/app/modules/chart-module/routes/customize/components/ChartOptionRadioGroup.js
@@ -0,0 +1,92 @@
+import React from "react";
+import {  Col } from "react-bootstrap";
+
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import { checkLists } from "app/modules/chart-module/routes/customize/data";
+
+import RadioGroup from '@material-ui/core/RadioGroup';
+
+
+const ChartOptionCheckboxes = ({
+  value,
+  error,
+  onChange,
+  default: defaultValue,
+}) => {
+
+  const [radioValue, setRadioValue] = React.useState(value ?? defaultValue);
+  const handleChange = (e) => {
+    setRadioValue(e.target?.value);
+  };
+
+  React.useEffect(() => {
+    onChange(radioValue);
+  }, [radioValue]);
+
+  return (
+    <>
+     <RadioGroup aria-label="palette" name="palette" value={radioValue} onChange={handleChange}>
+      {checkLists.map((item) => (
+        <div
+          key={item.label}
+          css={`
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color:#231D2C;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500; 
+            padding-left:10px;
+            div:nth-child(2){
+              display: flex;
+              align-items: center;
+              gap:4px;
+            }
+            svg{
+              width: 20px;
+              height: 20px;
+            }
+            button, input{
+              :hover{
+                background: transparent;
+              }
+            }
+          `}
+        >
+          <Col xs={6} className="d-flex align-items-center nowrap">
+
+          <FormControlLabel value={item.label} control={<Radio checked={radioValue===item.label} color='default'  />} label={item.label} name="pallete"  />
+
+          </Col>
+
+          <div>
+            {item.value.map((color, colorIndex) => (
+              <div
+                key={`${"color" + colorIndex}`}
+                css={`
+                  width: 26px;
+                  height: 26px;
+                  border-radius: 50%;
+                  background-color: ${color};
+                `}
+              />
+            ))}
+          </div>
+
+          {error && (
+            <div className="col-12">
+              <small>
+                <i>{error}</i>
+              </small>
+            </div>
+          )}
+        </div>
+      ))}
+      </RadioGroup>
+    </>
+  );
+};
+
+export default React.memo(ChartOptionCheckboxes);
diff --git a/src/app/modules/chart-module/routes/customize/utils.tsx b/src/app/modules/chart-module/routes/customize/utils.tsx
@@ -11,15 +11,15 @@ import CustomizeOptionColor from "app/modules/chart-module/routes/customize/comp
 import ChartOptionBoolean from "app/modules/chart-module/routes/customize/components/ChartOptionBoolean";
 import CustomizeOptionNumber from "app/modules/chart-module/routes/customize/components/ChartOptionNumber";
 import ChartOptionColorScaleWrapper from "app/modules/chart-module/routes/customize/components/ChartOptionColorScaleWrapper";
-import ChartOptionCheckboxes from "app/modules/chart-module/routes/customize/components/ChartOptionCheckboxes";
+import ChartOptionRadioGroup from "app/modules/chart-module/routes/customize/components/ChartOptionRadioGroup";
 
 const CHART_OPTION_COMPONENTS = {
   number: CustomizeOptionNumber,
   text: CustomizeOptionText,
   color: CustomizeOptionColor,
   colorScale: ChartOptionColorScaleWrapper,
   boolean: ChartOptionBoolean,
-  checkbox: ChartOptionCheckboxes,
+  radioGroup: ChartOptionRadioGroup,
 };
 
 export function getPartialMapping(mapping, dimension, repeatIndex) {

diff --git a/src/app/modules/report-module/components/chart-wrapper/index.tsx b/src/app/modules/report-module/components/chart-wrapper/index.tsx
@@ -12,20 +12,23 @@ interface Props {
 
 export function ReportChartWrapper(props: Props) {
   const containerRef = React.useRef<HTMLDivElement>(null);
-  const loadChart = useStoreActions((actions) => actions.charts.ChartGet.fetch);
+  const [visualOptions, setVisualOptions] = React.useState({});
+  const [chartName, setChartName] = React.useState<string>("");
 
+  const { loadDataFromAPI, loading, notFound, chartFromAPI } = useChartsRawData(
+    {
+      visualOptions,
+      setVisualOptions,
+      inChartWrapper: true,
+    }
+  );
+  const loadChart = useStoreActions((actions) => actions.charts.ChartGet.fetch);
   const loadedChart = useStoreState(
     (state) =>
       (state.charts.ChartGet.crudData ?? emptyChartAPI) as ChartAPIModel
   );
 
-  const chartFromAPI = useStoreState(
-    (state) => state.charts.chartFromAPI.value
-  );
-
-  const [chartName, setChartName] = React.useState<string>("");
   const setRawViz = React.useState<any>(null)[1];
-  const [visualOptions, setVisualOptions] = React.useState({});
 
   const renderedChart = React.useMemo(() => {
     return chartFromAPI
@@ -57,12 +60,6 @@ export function ReportChartWrapper(props: Props) {
     }
   }, [loadedChart]);
 
-  const { loadDataFromAPI, loading, notFound } = useChartsRawData({
-    visualOptions,
-    setVisualOptions,
-    inChartWrapper: true,
-  });
-
   React.useEffect(() => {
     if (props.id) {
       loadDataFromAPI(undefined, props.id);

diff --git a/src/app/modules/report-module/sub-module/rowStructure/addRowFrameButton.tsx b/src/app/modules/report-module/sub-module/rowStructure/addRowFrameButton.tsx
@@ -122,7 +122,7 @@ export default function AddRowFrameButton(props: AddRowFrameProps) {
       `}
       ref={drop}
     >
-      <DarkTooltip title="Add new row frame" placement="bottom" color="pink">
+      <DarkTooltip title="Add new row frame" placement="bottom">
         <div
           css={`
             width: 100%;