responsive leaderboard

src/components/Treemap.jsx

@@ -1,23 +1,21 @@
 "use client";
+
 import { useState, useEffect, useRef } from 'react';
 import * as d3 from 'd3';
 
 const InteractiveTreemap = ({ data }) => {
-
-
-
-
     const svgRef = useRef();
     const [selectedNode, setSelectedNode] = useState(null);
 
     useEffect(() => {
         if (!data || !data.children || !Array.isArray(data.children)) return;
 
         const svg = d3.select(svgRef.current);
-        const width = window.innerWidth; // Adjust as needed
-        const height = window.innerHeight; // Adjust as needed
+        const container = svg.node().parentNode;
+        const width = container.clientWidth; // Use container width
+        const height = container.clientHeight; // Use container height
 
-        svg.selectAll("*").remove();
+        svg.selectAll('*').remove();
 
         data.children.sort((a, b) => {
             const sumA = Array.isArray(a.children) ? d3.sum(a.children.map((d) => d.value)) : a.value || 0;
@@ -28,22 +26,24 @@ const InteractiveTreemap = ({ data }) => {
         const root = d3.hierarchy(data).sum((d) => d.value);
         d3.treemap().size([width, height]).padding(0)(root);
 
-        // Generate a more condensed range of green shades
         const greenShades = d3.scaleSequential(d3.interpolate('#00441b', '#79C67C')).domain([0, data.children.length]);
 
         const cells = svg
             .selectAll('g')
             .data(root.leaves())
-            .enter().append('g')
+            .enter()
+            .append('g')
             .attr('transform', (d) => `translate(${d.x0},${d.y0})`);
 
-        const rects = cells.append('rect')
+        const rects = cells
+            .append('rect')
             .attr('id', (d) => d.data.id)
             .attr('width', (d) => d.x1 - d.x0)
             .attr('height', (d) => d.y1 - d.y0)
-            .attr('fill', (d, i) => greenShades(i)); // Inverted color scale
+            .attr('fill', (d, i) => greenShades(i));
 
-        const texts = cells.append('text')
+        const texts = cells
+            .append('text')
             .attr('x', (d) => (d.x1 - d.x0) / 2)
             .attr('y', (d) => (d.y1 - d.y0) / 2)
             .attr('text-anchor', 'middle')
@@ -52,41 +52,42 @@ const InteractiveTreemap = ({ data }) => {
             .style('fill', '#ffffff')
             .text((d) => d.data.name);
 
-        cells.on('mouseover', function (event, d) {
-            d3.select(this)
-                .select('rect')
-                .raise()
-                .transition()
-                .duration(150)
-                .attr('transform', 'scale(1.05)');
-
-            d3.select(this)
-                .select('text')
-                .raise()
-                .transition()
-                .duration(150)
-                .attr('transform', 'scale(1.05)');
-        }).on('mouseout', function (event, d) {
-            d3.select(this)
-                .select('rect')
-                .transition()
-                .duration(150)
-                .attr('transform', 'scale(1)');
-
-            d3.select(this)
-                .select('text')
-                .transition()
-                .duration(150)
-                .attr('transform', 'scale(1)');
-        });
-
+        cells
+            .on('mouseover', function (event, d) {
+                d3.select(this)
+                    .select('rect')
+                    .raise()
+                    .transition()
+                    .duration(150)
+                    .attr('transform', 'scale(1.05)');
+
+                d3.select(this)
+                    .select('text')
+                    .raise()
+                    .transition()
+                    .duration(150)
+                    .attr('transform', 'scale(1.05)');
+            })
+            .on('mouseout', function (event, d) {
+                d3.select(this)
+                    .select('rect')
+                    .transition()
+                    .duration(150)
+                    .attr('transform', 'scale(1)');
+
+                d3.select(this)
+                    .select('text')
+                    .transition()
+                    .duration(150)
+                    .attr('transform', 'scale(1)');
+            });
     }, [data]);
 
     return (
-        <div style={{ height: '100vh', width: '100vw' }}>
-            <svg ref={svgRef} width="100%" height="100%" />
+        <div style={{ height: '100vh', width: '100vw', position: 'relative' }}>
+            <svg ref={svgRef} style={{ width: '100%', height: '100%' }} />
             {selectedNode && (
-                <div style={{ height: '100%', width: '100%' }}>
+                <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
                     <p>Selected Node: {selectedNode.data.name}</p>
                     <p>Value: {selectedNode.value}</p>
                 </div>