From 9f669fb4c70652e8cc9ff6032e4cbf756e5717e1 Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Wed, 18 Dec 2024 19:48:27 -0500
Subject: [PATCH] add treemap component

---
 assets/package.json                           | 13 ++++---
 .../cost-management/CostManagementTreeMap.tsx | 39 +++++++++++++++++++
 assets/src/routes/costManagementRoutes.tsx    |  7 +++-
 3 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 assets/src/components/cost-management/CostManagementTreeMap.tsx

diff --git a/assets/package.json b/assets/package.json
index 9ac1b81b2..ab2a5fb1f 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -42,12 +42,13 @@
     "@graphql-codegen/named-operations-object": "3.0.0",
     "@jumpn/utils-graphql": "0.6.0",
     "@markdoc/markdoc": "0.4.0",
-    "@nivo/core": "0.87.0",
-    "@nivo/geo": "0.87.0",
-    "@nivo/line": "0.87.0",
-    "@nivo/pie": "0.87.0",
-    "@nivo/radial-bar": "0.87.0",
-    "@nivo/tooltip": "0.87.0",
+    "@nivo/core": "0.88.0",
+    "@nivo/geo": "0.88.0",
+    "@nivo/line": "0.88.0",
+    "@nivo/pie": "0.88.0",
+    "@nivo/radial-bar": "0.88.0",
+    "@nivo/tooltip": "0.88.0",
+    "@nivo/treemap": "0.88.0",
     "@pluralsh/design-system": "4.3.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
diff --git a/assets/src/components/cost-management/CostManagementTreeMap.tsx b/assets/src/components/cost-management/CostManagementTreeMap.tsx
new file mode 100644
index 000000000..a616321af
--- /dev/null
+++ b/assets/src/components/cost-management/CostManagementTreeMap.tsx
@@ -0,0 +1,39 @@
+import { ResponsiveTreeMapHtml } from '@nivo/treemap'
+import { useThemeColorMode } from '@pluralsh/design-system'
+
+type TreeMapData = {
+  name: string
+  color: string
+  amount?: number
+  children?: TreeMapData[]
+}
+
+export function CostManagementTreeMap({ data }: { data: TreeMapData }) {
+  const colorMode = useThemeColorMode()
+  return (
+    <ResponsiveTreeMapHtml
+      data={data}
+      identity="name"
+      value="amount"
+      valueFormat=" >-$.3s"
+      innerPadding={2}
+      label={(e) => e.id + ' (' + e.formattedValue + ')'}
+      labelSkipSize={12}
+      labelTextColor={{
+        from: 'color',
+        modifiers: [[colorMode === 'dark' ? 'brighter' : 'darker', 2]],
+      }}
+      enableParentLabel={false}
+      parentLabelTextColor={{
+        from: 'color',
+        modifiers: [[colorMode === 'dark' ? 'brighter' : 'darker', 3]],
+      }}
+      colors={{ scheme: 'blues' }}
+      nodeOpacity={0.45}
+      borderColor={{
+        from: 'color',
+        modifiers: [[colorMode === 'dark' ? 'brighter' : 'darker', 0.1]],
+      }}
+    />
+  )
+}
diff --git a/assets/src/routes/costManagementRoutes.tsx b/assets/src/routes/costManagementRoutes.tsx
index 3d9bff9be..049c021e3 100644
--- a/assets/src/routes/costManagementRoutes.tsx
+++ b/assets/src/routes/costManagementRoutes.tsx
@@ -22,7 +22,12 @@ export const costManagementRoutes = [
   >
     <Route
       index
-      element={<Navigate to={CM_NAMESPACES_REL_PATH} />}
+      element={
+        <Navigate
+          replace
+          to={CM_NAMESPACES_REL_PATH}
+        />
+      }
     />
     <Route
       path={CM_NAMESPACES_REL_PATH}