fix: add missing code for choropleth rendering

bento-platform · Sep 28, 2023 · c06d58c · c06d58c
1 parent 3012b73
commit c06d58c
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 48 deletions.
diff --git a/src/js/components/Overview/Chart.tsx b/src/js/components/Overview/Chart.tsx
@@ -1,56 +1,73 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { chartTypes } from '@/constants/overviewConstants';
+import { useNavigate } from 'react-router-dom';
 import { BarChart, PieChart } from 'bento-charts';
+import { ChoroplethMap } from 'bento-charts/dist/maps';
 
 import { CHART_HEIGHT } from '@/constants/overviewConstants';
 import { ChartData } from '@/types/data';
-import { useNavigate } from 'react-router-dom';
+import { CHART_TYPE_BAR, CHART_TYPE_CHOROPLETH, CHART_TYPE_PIE, ChartConfig } from '@/types/chartConfig';
 
-const Chart = ({ chartType, data, units, id }: ChartProps) => {
+const Chart = memo(({ chartConfig, data, units, id }: ChartProps) => {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const translateMap = ({ x, y }: { x: string; y: number }) => ({ x: t(x), y });
   const removeMissing = ({ x }: { x: string }) => x !== 'missing';
 
-  const renderChartSwitch = () => {
-    switch (chartType) {
-      case chartTypes.BAR:
-        // bar charts can be rendered slightly larger as they do not clip
-        return (
-          <BarChart
-            data={data}
-            height={CHART_HEIGHT + 30}
-            units={units}
-            preFilter={removeMissing}
-            dataMap={translateMap}
-            onClick={(d) => {
-              navigate(`/${i18n.language}/search?${id}=${d.payload.x}`);
-            }}
-          />
-        );
-      case chartTypes.PIE:
-        return (
-          <PieChart
-            data={data}
-            height={CHART_HEIGHT}
-            preFilter={removeMissing}
-            dataMap={translateMap}
-            onClick={(d) => {
-              navigate(`/${i18n.language}/search?${id}=${d.name}`);
-            }}
-          />
-        );
-      default:
-        return <p>chart type doesnt exists</p>;
+  const { chart_type: type } = chartConfig;
+
+  switch (type) {
+    case CHART_TYPE_BAR:
+      // bar charts can be rendered slightly larger as they do not clip
+      return (
+        <BarChart
+          data={data}
+          height={CHART_HEIGHT + 30}
+          units={units}
+          preFilter={removeMissing}
+          dataMap={translateMap}
+          onClick={(d) => {
+            navigate(`/${i18n.language}/search?${id}=${d.payload.x}`);
+          }}
+        />
+      );
+    case CHART_TYPE_PIE:
+      return (
+        <PieChart
+          data={data}
+          height={CHART_HEIGHT}
+          preFilter={removeMissing}
+          dataMap={translateMap}
+          onClick={(d) => {
+            navigate(`/${i18n.language}/search?${id}=${d.name}`);
+          }}
+        />
+      );
+    case CHART_TYPE_CHOROPLETH: {
+      const { category_prop: categoryProp, features, center, zoom, color_mode: colorMode } = chartConfig;
+      return (
+        <ChoroplethMap
+          data={data}
+          height={CHART_HEIGHT}
+          preFilter={removeMissing}
+          dataMap={translateMap}
+          categoryProp={categoryProp}
+          features={features}
+          center={center}
+          zoom={zoom}
+          colorMode={colorMode}
+        />
+      );
     }
-  };
+    default:
+      return <p>chart type does not exist</p>;
+  }
+});
 
-  return <>{renderChartSwitch()}</>;
-};
+Chart.displayName = 'Chart';
 
 export interface ChartProps {
-  chartType: string;
+  chartConfig: ChartConfig;
   data: ChartData[];
   units: string;
   id: string;

diff --git a/src/js/components/Overview/MakeChartCard.tsx b/src/js/components/Overview/MakeChartCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Chart from './Chart';
 import { Card, Button, Tooltip, Space, Typography, Row } from 'antd';
 import { CloseOutlined, TeamOutlined, QuestionOutlined } from '@ant-design/icons';
@@ -9,14 +9,14 @@ import { ChartDataField } from '@/types/data';
 
 const CARD_STYLE = { width: '430px', height: '415px', margin: '5px 0', borderRadius: '11px' };
 
-const MakeChartCard = ({ section, chart, onRemoveChart }: MakeChartCardProps) => {
+const MakeChartCard = memo(({ section, chart, onRemoveChart }: MakeChartCardProps) => {
   const { t } = useTranslation(NON_DEFAULT_TRANSLATION);
   const { t: td } = useTranslation(DEFAULT_TRANSLATION);
 
   const {
     data,
     field: { id, description, title, config },
-    chartTypeConfig,
+    chartConfig,
   } = chart;
 
   const extraOptionsData = [
@@ -58,7 +58,7 @@ const MakeChartCard = ({ section, chart, onRemoveChart }: MakeChartCardProps) =>
     <div key={id} style={{ height: '100%', width: '430px' }}>
       <Card title={t(title)} style={CARD_STYLE} size="small" extra={<Space size="small">{ed}</Space>}>
         {data.filter((e) => !(e.x === 'missing')).length !== 0 ? (
-          <Chart chartTypeConfig={chartTypeConfig} data={data} units={config?.units || ''} id={id} />
+          <Chart chartConfig={chartConfig} data={data} units={config?.units || ''} id={id} />
         ) : (
           <Row style={{ height: '350px ' }} justify="center" align="middle">
             <CustomEmpty text="No Data" />
@@ -67,7 +67,9 @@ const MakeChartCard = ({ section, chart, onRemoveChart }: MakeChartCardProps) =>
       </Card>
     </div>
   );
-};
+});
+
+MakeChartCard.displayName = 'MakeChartCard';
 
 export interface MakeChartCardProps {
   section: string;

diff --git a/src/js/features/data/makeGetDataRequest.thunk.ts b/src/js/features/data/makeGetDataRequest.thunk.ts
@@ -32,7 +32,7 @@ export const makeGetDataRequestThunk = createAsyncThunk<
     const field = overviewResponse.fields[chart.field];
     return {
       id: field.id,
-      chartTypeConfig: chart,
+      chartConfig: chart,
       isDisplayed: i < MAX_CHARTS,
       field,
       data: serializeChartData(field.data),

diff --git a/src/js/types/chartConfig.ts b/src/js/types/chartConfig.ts
@@ -1,21 +1,26 @@
 import { ChoroplethMapProps } from 'bento-charts/dist/maps';
 
+// Use multiple literals here instead of an object for full immutability.
+export const CHART_TYPE_PIE = 'pie';
+export const CHART_TYPE_BAR = 'bar';
+export const CHART_TYPE_CHOROPLETH = 'choropleth';
+
 /*
 ChartConfig: represents what is stored in the configuration file for describing a chart, without any attached data or
 the field metadata (description / mapping information / units / etc.) By using a sum type here, we can optionally
 mandate configuration information for certain types of charts.
  */
 export type ChartConfig =
   | {
-      chart_type: 'pie';
+      chart_type: typeof CHART_TYPE_PIE;
       field: string;
     }
   | {
-      chart_type: 'bar';
+      chart_type: typeof CHART_TYPE_BAR;
       field: string;
     }
   | {
-      chart_type: 'choropleth';
+      chart_type: typeof CHART_TYPE_CHOROPLETH;
       field: string;
       category_prop: ChoroplethMapProps['categoryProp'];
       color_mode: ChoroplethMapProps['colorMode'];

diff --git a/src/js/types/data.ts b/src/js/types/data.ts
@@ -20,7 +20,7 @@ export interface ChartDataField {
   isDisplayed: boolean;
   // Field definition without data (we have mapped data in the data prop above instead):
   field: Omit<OverviewResponseDataField, 'data'>;
-  chartTypeConfig: ChartConfig;
+  chartConfig: ChartConfig;
 }
 
 export interface ChartData {