From 9b322cac3eb7ec77bc7cf41c2fe13a86b71809b8 Mon Sep 17 00:00:00 2001
From: Holtz Yan <yan.holtz@datadoghq.com>
Date: Wed, 13 Nov 2024 15:13:56 +0100
Subject: [PATCH] simpler treemap basic

---
 viz/TreemapBasic/Treemap.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/viz/TreemapBasic/Treemap.tsx b/viz/TreemapBasic/Treemap.tsx
index de4fdb6b..8d3f07e5 100644
--- a/viz/TreemapBasic/Treemap.tsx
+++ b/viz/TreemapBasic/Treemap.tsx
@@ -1,6 +1,5 @@
-import { useMemo } from "react";
-import { Tree } from "./data";
-import * as d3 from "d3";
+import { Tree } from './data';
+import * as d3 from 'd3';
 
 type TreemapProps = {
   width: number;
@@ -9,14 +8,10 @@ type TreemapProps = {
 };
 
 export const Treemap = ({ width, height, data }: TreemapProps) => {
-  const hierarchy = useMemo(() => {
-    return d3.hierarchy(data).sum((d) => d.value);
-  }, [data]);
+  const hierarchy = d3.hierarchy(data).sum((d) => d.value);
 
-  const root = useMemo(() => {
-    const treeGenerator = d3.treemap<Tree>().size([width, height]).padding(4);
-    return treeGenerator(hierarchy);
-  }, [hierarchy, width, height]);
+  const treeGenerator = d3.treemap<Tree>().size([width, height]).padding(4);
+  const root = treeGenerator(hierarchy);
 
   const allShapes = root.leaves().map((leaf) => {
     return (
@@ -27,8 +22,8 @@ export const Treemap = ({ width, height, data }: TreemapProps) => {
           width={leaf.x1 - leaf.x0}
           height={leaf.y1 - leaf.y0}
           stroke="transparent"
-          fill={"#69b3a2"}
-          className={"opacity-80 hover:opacity-100"}
+          fill={'#69b3a2'}
+          className={'opacity-80 hover:opacity-100'}
         />
         <text
           x={leaf.x0 + 3}