Merge pull request #834 from CodeForAfrica/ft/hhurumap-heatmap

HeatMapChart
CodeForAfrica · Aug 12, 2024 · d54a423 · d54a423
2 parents e8c48e8 + 00d48be
commit d54a423
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 1 deletion.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js
@@ -6,6 +6,7 @@ import theme from "@/climatemappedafrica/theme";
 const {
   BarChartScope,
   DonutChartScope,
+  HeatMapScope,
   LineChartScope,
   MultiLineChartScope,
   TreemapChartScope,
@@ -61,6 +62,9 @@ export default function configureScope(
     case "treemap":
       vegaSpec = TreemapChartScope(scopeOptions);
       break;
+    case "heatmap":
+      vegaSpec = HeatMapScope(scopeOptions);
+      break;
     case "stacked":
       if (isMobile) {
         vegaSpec = VerticalStackedChartScope(scopeOptions);

diff --git a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js
@@ -6,6 +6,7 @@ import theme from "@/pesayetu/theme";
 const {
   BarChartScope,
   DonutChartScope,
+  HeatMapScope,
   LineChartScope,
   MultiLineChartScope,
   TreemapChartScope,
@@ -68,6 +69,9 @@ export default function configureScope(
         vegaSpec = StackedChartScope(scopeOptions);
       }
       break;
+    case "heatmap":
+      vegaSpec = HeatMapScope(scopeOptions);
+      break;
     default:
       if (isMobile) {
         vegaSpec = VerticalBarChartScope(scopeOptions);

diff --git a/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js b/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js
@@ -3,7 +3,7 @@ import { StyledEngineProvider } from "@mui/material/styles";
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 
-import Tooltip from "./Tooltip"; // Import your ChartTooltip component
+import Tooltip from "./Tooltip";
 
 function ChartTooltip({
   id,

diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js
@@ -0,0 +1,140 @@
+import merge from "deepmerge";
+
+import Scope from "./Scope";
+
+export default function HeatMapScope(props) {
+  const {
+    primaryData,
+    metadata,
+    config,
+    secondaryData,
+    primaryParentData,
+    secondaryParentData,
+    isCompare,
+    isMobile,
+    theme,
+    args,
+  } = props;
+
+  const { primary_group: primaryGroup } = metadata;
+
+  return merge(
+    Scope({
+      primaryData,
+      metadata,
+      config,
+      secondaryData,
+      primaryParentData,
+      secondaryParentData,
+      chartType: "heatmap",
+      theme,
+      args,
+    }),
+    {
+      height: isMobile && isCompare && secondaryData?.length > 1 ? 620 : 310,
+      signals: [
+        {
+          name: "height",
+          value: isMobile && isCompare && secondaryData?.length > 1 ? 620 : 310,
+        },
+        {
+          name: "isMobile",
+          value: isMobile,
+        },
+        {
+          name: "isCompare",
+          value: isCompare,
+        },
+        { name: "stripeWidth", update: "width/length(data('primary'))" },
+      ],
+      scales: [
+        {
+          name: "scaleX",
+          type: "linear",
+          domain: {
+            data: "primary",
+            field: primaryGroup,
+          },
+          range: [0, { signal: "width" }],
+          zero: false,
+        },
+        {
+          name: "color",
+          type: "linear",
+          domain: {
+            data: "primary",
+            field: {
+              signal: "datatype[Units]",
+            },
+          },
+          range: [theme.palette.secondary.main, theme.palette.primary.main],
+          reverse: true,
+        },
+      ],
+      marks: [
+        {
+          name: "stripe",
+          type: "rect",
+          interactive: true,
+          from: {
+            data: "primary",
+          },
+          encode: {
+            enter: {
+              xc: {
+                scale: "scaleX",
+                field: primaryGroup,
+              },
+              fill: {
+                scale: "color",
+                field: {
+                  signal: "datatype[Units]",
+                },
+              },
+            },
+            update: {
+              y: {
+                signal: 0,
+              },
+              height: {
+                signal: "height",
+              },
+              width: {
+                signal: "stripeWidth",
+              },
+              tooltip: {
+                signal: "{'group': datum[mainGroup], 'count': datum.count}",
+              },
+            },
+            hover: {
+              y: {
+                value: -4,
+              },
+              height: {
+                signal: "height + 8",
+              },
+            },
+          },
+        },
+      ],
+      axes: [
+        {
+          scale: "scaleX",
+          orient: "bottom",
+          domain: false,
+          format: ".4",
+          labelColor: "black",
+        },
+      ],
+      legends: [
+        {
+          fill: "color",
+          type: "gradient",
+          titleFontSize: 12,
+          titlePadding: 4,
+          gradientLength: { signal: "height" },
+        },
+      ],
+    },
+  );
+}
diff --git a/packages/hurumap-core/src/Scope/index.js b/packages/hurumap-core/src/Scope/index.js
@@ -1,5 +1,6 @@
 import BarChartScope from "./BarChartScope";
 import DonutChartScope from "./DonutChartScope";
+import HeatMapScope from "./HeatMapScope";
 import LineChartScope from "./LineChartScope";
 import MultiLineChartScope from "./MultiLineChartScope";
 import Scope from "./Scope";
@@ -12,6 +13,7 @@ export default {
   Scope,
   BarChartScope,
   DonutChartScope,
+  HeatMapScope,
   LineChartScope,
   MultiLineChartScope,
   VerticalBarChartScope,