Add same axis feature for scatter plot

Author: mustafasaifee42

src/Components/AggregatedDataExplorer.tsx

@@ -59,6 +59,7 @@ function AggregatedDataExplorer(props: Props) {
     selectedCountryOrRegion: regionId,
     signatureSolution: undefined,
     signatureSolutionForDataList: 'All',
+    keepAxisSame: false,
   };
 
   const [state, dispatch] = useReducer(Reducer, initialState);
@@ -207,6 +208,12 @@ function AggregatedDataExplorer(props: Props) {
       payload: verticalBarLayout,
     });
   };
+  const updateKeepAxisSame = (d: boolean) => {
+    dispatch({
+      type: 'UPDATE_KEEP_AXIS_SAME',
+      payload: d,
+    });
+  };
   return (
     <div>
       <div
@@ -279,6 +286,7 @@ function AggregatedDataExplorer(props: Props) {
           updateReverseOrder,
           updateBarLayout,
           updateSignatureSolutionForDataList,
+          updateKeepAxisSame,
         }}
       >
         <div

src/Components/CountryVisualization.tsx

@@ -93,6 +93,7 @@ function CountryVisualization(props: Props) {
       disaggregationMetaData.length > 0 ? disaggregationMetaData[0] : undefined,
     disaggregationGraphType: 'country',
     disaggregationOrder: 'first',
+    keepAxisSame: false,
   };
 
   const [state, dispatch] = useReducer(Reducer, initialState);
@@ -271,6 +272,12 @@ function CountryVisualization(props: Props) {
       payload: disaggregationOrder,
     });
   };
+  const updateKeepAxisSame = (d: boolean) => {
+    dispatch({
+      type: 'UPDATE_KEEP_AXIS_SAME',
+      payload: d,
+    });
+  };
   return (
     <Context.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values
@@ -299,6 +306,7 @@ function CountryVisualization(props: Props) {
         updateDisaggregationIndicator,
         updateDisaggregationGraphType,
         updateDisaggregationOrder,
+        updateKeepAxisSame,
       }}
     >
       <div className='undp-container'>

src/Context/Context.tsx

@@ -33,6 +33,7 @@ const Context = createContext<CtxDataType>({
   signatureSolution: undefined,
   signatureSolutionForDataList: 'All',
   showReference: false,
+  keepAxisSame: false,
   updateGraphType: (
     _d:
       | 'scatterPlot'
@@ -74,6 +75,7 @@ const Context = createContext<CtxDataType>({
       | 'Poverty and Inequality'
       | 'Resilience',
   ) => {},
+  updateKeepAxisSame: (_d: boolean) => {},
 });
 
 export default Context;

src/Context/Reducer.tsx

@@ -46,6 +46,8 @@ export default (state: any, action: any) => {
       return { ...state, disaggregationGraphType: action.payload };
     case 'UPDATE_DISAGGREGATION_ORDER':
       return { ...state, disaggregationOrder: action.payload };
+    case 'UPDATE_KEEP_AXIS_SAME':
+      return { ...state, keepAxisSame: action.payload };
     default:
       return { ...state };
   }

src/GrapherComponent/ScatterPlot/Graph.tsx

@@ -7,6 +7,8 @@ import { Delaunay } from 'd3-delaunay';
 import { scaleOrdinal, scaleLinear, scaleThreshold, scaleSqrt } from 'd3-scale';
 import minBy from 'lodash.minby';
 import UNDPColorModule from 'undp-viz-colors';
+import flattenDeep from 'lodash.flattendeep';
+import min from 'lodash.min';
 import { Tooltip } from '../../Components/Tooltip';
 import {
   CountryGroupDataType,
@@ -47,6 +49,7 @@ export function Graph(props: Props) {
     selectedRegions,
     selectedIncomeGroups,
     selectedCountryGroup,
+    keepAxisSame,
   } = useContext(Context) as CtxDataType;
   const [selectedColor, setSelectedColor] = useState<string | undefined>(
     undefined,
@@ -103,7 +106,24 @@ export function Graph(props: Props) {
         .range([0.25, 30])
         .nice()
     : undefined;
-
+  const xFullArray = flattenDeep(
+    data.map(d => {
+      const xIndicatorIndex = d.indicators.findIndex(
+        el => xIndicatorMetaData.DataKey === el.indicator,
+      );
+      const arr = d.indicators[xIndicatorIndex].yearlyData.map(el => el.value);
+      return arr;
+    }),
+  );
+  const yFullArray = flattenDeep(
+    data.map(d => {
+      const yIndicatorIndex = d.indicators.findIndex(
+        el => yIndicatorMetaData.DataKey === el.indicator,
+      );
+      const arr = d.indicators[yIndicatorIndex].yearlyData.map(el => el.value);
+      return arr;
+    }),
+  );
   const dataFormatted = orderBy(
     data
       .map(d => {
@@ -245,7 +265,6 @@ export function Graph(props: Props) {
     'radiusValue',
     'desc',
   );
-
   const refXIndicatorIndex = regionData
     ? regionData.indicators.findIndex(
         el => xIndicatorMetaData.DataKey === el.indicator,
@@ -266,14 +285,18 @@ export function Graph(props: Props) {
       : regionData.indicators[refXIndicatorIndex].yearlyData[
           regionData.indicators[refXIndicatorIndex].yearlyData.length - 1
         ]?.value;
-  const xMaxValue = maxBy(dataFormatted, d => d.xVal)
+  const xMaxValue = keepAxisSame
+    ? (max(xFullArray) as number)
+    : maxBy(dataFormatted, d => d.xVal)
     ? refXVal && showReference
       ? (maxBy(dataFormatted, d => d.xVal)?.xVal as number) > refXVal
         ? (maxBy(dataFormatted, d => d.xVal)?.xVal as number)
         : refXVal
       : (maxBy(dataFormatted, d => d.xVal)?.xVal as number)
     : 0;
-  const xMinValue = minBy(dataFormatted, d => d.xVal)
+  const xMinValue = keepAxisSame
+    ? (min(xFullArray) as number)
+    : minBy(dataFormatted, d => d.xVal)
     ? refXVal && showReference
       ? (minBy(dataFormatted, d => d.xVal)?.xVal as number) < refXVal
         ? (minBy(dataFormatted, d => d.xVal)?.xVal as number)
@@ -300,14 +323,18 @@ export function Graph(props: Props) {
       : regionData.indicators[refYIndicatorIndex].yearlyData[
           regionData.indicators[refYIndicatorIndex].yearlyData.length - 1
         ]?.value;
-  const yMaxValue = maxBy(dataFormatted, d => d.yVal)
+  const yMaxValue = keepAxisSame
+    ? (max(yFullArray) as number)
+    : maxBy(dataFormatted, d => d.yVal)
     ? refYVal && showReference
       ? (maxBy(dataFormatted, d => d.yVal)?.yVal as number) > refYVal
         ? (maxBy(dataFormatted, d => d.yVal)?.yVal as number)
         : refYVal
       : (maxBy(dataFormatted, d => d.yVal)?.yVal as number)
     : 0;
-  const yMinValue = minBy(dataFormatted, d => d.yVal)
+  const yMinValue = keepAxisSame
+    ? (min(yFullArray) as number)
+    : minBy(dataFormatted, d => d.yVal)
     ? refYVal && showReference
       ? (minBy(dataFormatted, d => d.yVal)?.yVal as number) < refYVal
         ? (minBy(dataFormatted, d => d.yVal)?.yVal as number)

src/GrapherComponent/Settings/ScatterPlotSettings.tsx

@@ -36,6 +36,7 @@ export function ScatterPlotSettings(props: Props) {
     yAxisIndicator,
     sizeIndicator,
     colorIndicator,
+    keepAxisSame,
     showLabel,
     showMostRecentData,
     selectedCountryOrRegion,
@@ -47,6 +48,7 @@ export function ScatterPlotSettings(props: Props) {
     updateShowLabel,
     updateShowMostRecentData,
     updateShowReference,
+    updateKeepAxisSame,
   } = useContext(Context) as CtxDataType;
   const scatterPlotIndicators = indicators.filter(d => !d.IsCategorical);
   const sizeIndicators = indicators.filter(d => d.Sizing);
@@ -240,6 +242,16 @@ export function ScatterPlotSettings(props: Props) {
           >
             Show World/Regional Reference
           </Checkbox>
+          <Checkbox
+            style={{ margin: 0 }}
+            className='undp-checkbox'
+            checked={keepAxisSame}
+            onChange={e => {
+              updateKeepAxisSame(e.target.checked);
+            }}
+          >
+            Use same axes to compare between years
+          </Checkbox>
         </div>
       </div>
       {!selectedCountryOrRegion && countries.length > 1 ? (

src/RegionVisualization/Visualization.tsx

@@ -91,6 +91,7 @@ function VisualizationEl(props: Props) {
       disaggregationMetaData.length > 0 ? disaggregationMetaData[0] : undefined,
     disaggregationGraphType: 'global',
     disaggregationOrder: 'first',
+    keepAxisSame: false,
   };
 
   const [state, dispatch] = useReducer(Reducer, initialState);
@@ -270,6 +271,12 @@ function VisualizationEl(props: Props) {
       payload: disaggregationOrder,
     });
   };
+  const updateKeepAxisSame = (d: boolean) => {
+    dispatch({
+      type: 'UPDATE_KEEP_AXIS_SAME',
+      payload: d,
+    });
+  };
   return (
     <Context.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values
@@ -298,6 +305,7 @@ function VisualizationEl(props: Props) {
         updateDisaggregationIndicator,
         updateDisaggregationGraphType,
         updateDisaggregationOrder,
+        updateKeepAxisSame,
       }}
     >
       <div>

src/Types.ts

@@ -168,6 +168,7 @@ export interface CtxDataType {
     | 'Governance'
     | 'Poverty and Inequality'
     | 'Resilience';
+  keepAxisSame: boolean;
   updateGraphType: (
     _d:
       | 'scatterPlot'
@@ -209,6 +210,7 @@ export interface CtxDataType {
       | 'Poverty and Inequality'
       | 'Resilience',
   ) => void;
+  updateKeepAxisSame: (_d: boolean) => void;
 }
 
 export interface CountryListType {