Merge pull request #820 from CodeForAfrica/feat/treemapchart_hurumap_…

…package @hurumap/TreemapChart
CodeForAfrica · Aug 6, 2024 · 07435b0 · 07435b0
2 parents 4f19336 + f1cb325
commit 07435b0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 274 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/TreemapChartScope.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/TreemapChartScope.js
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js
@@ -2,14 +2,14 @@ import { Scope } from "@hurumap/core";
 
 import MultiLineChartScope from "./MultiLineChartScope";
 import StackedChartScope from "./StackedChartScope";
-import TreemapChartScope from "./TreemapChartScope";
 import VerticalBarChartScope from "./VerticalBarChartScope";
 import VerticalStackedChartScope from "./VerticalStackedChartScope";
 
 import { hurumapArgs } from "@/climatemappedafrica/config";
 import theme from "@/climatemappedafrica/theme";
 
-const { BarChartScope, LineChartScope, DonutChartScope } = Scope;
+const { BarChartScope, LineChartScope, DonutChartScope, TreemapChartScope } =
+  Scope;
 
 export default function configureScope(
   indicator,
@@ -74,7 +74,7 @@ export default function configureScope(
       vegaSpec = DonutChartScope(scopeOptions);
       break;
     case "treemap":
-      vegaSpec = TreemapChartScope(..._scopeOptions);
+      vegaSpec = TreemapChartScope(scopeOptions);
       break;
     case "stacked":
       if (isMobile) {

diff --git a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js
@@ -2,14 +2,14 @@ import { Scope } from "@hurumap/core";
 
 import MultiLineChartScope from "./MultiLineChartScope";
 import StackedChartScope from "./StackedChartScope";
-import TreemapChartScope from "./TreemapChartScope";
 import VerticalBarChartScope from "./VerticalBarChartScope";
 import VerticalStackedChartScope from "./VerticalStackedChartScope";
 
 import { hurumapArgs } from "@/pesayetu/config";
 import theme from "@/pesayetu/theme";
 
-const { BarChartScope, LineChartScope, DonutChartScope } = Scope;
+const { BarChartScope, LineChartScope, DonutChartScope, TreemapChartScope } =
+  Scope;
 
 export default function configureScope(
   indicator,
@@ -74,7 +74,7 @@ export default function configureScope(
       vegaSpec = DonutChartScope(scopeOptions);
       break;
     case "treemap":
-      vegaSpec = TreemapChartScope(..._scopeOptions);
+      vegaSpec = TreemapChartScope(scopeOptions);
       break;
     case "stacked":
       if (isMobile) {

diff --git a/...onents/HURUmap/Chart/TreemapChartScope.js → ...rumap-core/src/Scope/TreemapChartScope.js b/...onents/HURUmap/Chart/TreemapChartScope.js → ...rumap-core/src/Scope/TreemapChartScope.js
@@ -2,9 +2,7 @@ import merge from "deepmerge";
 
 import Scope from "./Scope";
 
-import theme from "@/pesayetu/theme";
-
-export default function TreemapChartScope(
+export default function TreemapChartScope({
   primaryData,
   metadata,
   config,
@@ -14,39 +12,44 @@ export default function TreemapChartScope(
   profileNames,
   isCompare,
   isMobile,
-) {
+  theme,
+  args,
+}) {
   const { primary_group: primaryGroup } = metadata;
   const nestedFields = config?.nest_fields ?? [primaryGroup]; // if nest fields are undefined, make use primaryGroup
+  const transform = [
+    {
+      type: "nest",
+      keys: nestedFields,
+    },
+    {
+      type: "treemap",
+      field: { signal: "datatype[Units]" },
+      method: { signal: "layout" },
+      ratio: { signal: "aspectRatio" },
+      size: [
+        {
+          signal:
+            "isCompare && data('secondary').length > 1 && !isMobile ? width/2 -30: width",
+        },
+        { signal: "isCompare && isMobile ? height/2 : height" },
+      ],
+    },
+  ];
 
   return merge(
-    Scope(
+    Scope({
       primaryData,
       metadata,
       config,
       secondaryData,
       primaryParentData,
       secondaryParentData,
-      "treemap",
-      [
-        {
-          type: "nest",
-          keys: nestedFields,
-        },
-        {
-          type: "treemap",
-          field: { signal: "datatype[Units]" },
-          method: { signal: "layout" },
-          ratio: { signal: "aspectRatio" },
-          size: [
-            {
-              signal:
-                "isCompare && data('secondary').length > 1 && !isMobile ? width/2 -30: width",
-            },
-            { signal: "isCompare && isMobile ? height/2 : height" },
-          ],
-        },
-      ],
-    ),
+      chartType: "treemap",
+      transform,
+      theme,
+      args,
+    }),
     {
       height: isMobile && isCompare && secondaryData?.length > 1 ? 760 : 380,
       signals: [

diff --git a/packages/hurumap-core/src/Scope/index.js b/packages/hurumap-core/src/Scope/index.js
@@ -2,10 +2,12 @@ import BarChartScope from "./BarChartScope";
 import DonutChartScope from "./DonutChartScope";
 import LineChartScope from "./LineChartScope";
 import Scope from "./Scope";
+import TreemapChartScope from "./TreemapChartScope";
 
 export default {
   Scope,
   BarChartScope,
   LineChartScope,
   DonutChartScope,
+  TreemapChartScope,
 };