add treemap component

pluralsh · Dec 19, 2024 · 9f669fb · 9f669fb
1 parent 2732d59
commit 9f669fb
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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}