chore: fixed sunburst chart

wizeline · Mar 26, 2024 · bea8985 · bea8985
1 parent a023e10
commit bea8985
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 33 deletions.
diff --git a/app/components/charts/SunburstChart.tsx b/app/components/charts/SunburstChart.tsx
@@ -3,8 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import * as d3 from "d3";
 import { useScreenSize } from "~/context/ScreenSizeContext";
-import ModalInformation from "../information/ModalInformation";
-import { NodeType } from "~/types";
 import { hierarchy } from "d3";
 
 export type SunburstLeaf = {
@@ -22,29 +20,19 @@ export type SunburstNode = {
 
 interface SunburstElementProps {
   data: SunburstNode | undefined;
+  onSelectNodePath?: (args: any) => void;
   onSelectNode?: (args: any) => void;
 }
 
 const SunburstChart = (props: SunburstElementProps) => {
-  const { data, onSelectNode } = props;
+  const { data, onSelectNodePath, onSelectNode } = props;
   const color = d3.scaleOrdinal(d3.schemeSet1);
   const chartRef = useRef<HTMLDivElement | null>(null);
   const [Sunburst, setSunburst] = useState<any | null>(null);
-  const [selectedNode, setSelectedNode] = useState<NodeType | null>(null);
   const [hasChildNodes, setHasChildNodes] = useState(false);
-  const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
   const { isDesktop, isTablet } = useScreenSize();
   const chartWidth = isDesktop ? 800 : isTablet ? 600 : 300;
 
-  const handleIsInfoModalOpen = () => {
-    setIsInfoModalOpen(true);
-  };
-
-  const handleIsInfoModalClose = () => {
-    setSelectedNode(null);
-    setIsInfoModalOpen(false);
-  };
-
   useEffect(() => {
     if (chartRef.current) {
       const observer = new MutationObserver((mutationsList) => {
@@ -96,17 +84,14 @@ const SunburstChart = (props: SunburstElementProps) => {
                 }
               });
 
-            onSelectNode && onSelectNode(lastPath.split("/"));
+            onSelectNodePath && onSelectNodePath(lastPath.split("/"));
 
             if (!node.children) {
-              setSelectedNode(node);
+              onSelectNode && onSelectNode(node?.name);
             } else {
-              setSelectedNode(null);
+              onSelectNode && onSelectNode("");
             }
           }
-          if (!isInfoModalOpen) {
-            handleIsInfoModalOpen();
-          }
         })
         .width(chartWidth)
         .tooltipTitle(() => "")
@@ -120,22 +105,11 @@ const SunburstChart = (props: SunburstElementProps) => {
     color,
     hasChildNodes,
     chartWidth,
-    isInfoModalOpen,
     onSelectNode,
+    onSelectNodePath,
   ]);
 
-  return (
-    <>
-      <div ref={chartRef} className="max-w-[800px] z-0"></div>
-      {isInfoModalOpen && selectedNode && !selectedNode?.children && (
-        <ModalInformation
-          onClose={handleIsInfoModalClose}
-          nodeName={selectedNode?.name}
-          modalData={[]}
-        />
-      )}
-    </>
-  );
+  return <div ref={chartRef} className="max-w-[800px] z-0"></div>;
 };
 
 export default SunburstChart;
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -122,6 +122,12 @@ export default function Index() {
               }`}
             >
               <div className="min-h-screen flex flex-col justify-between items-center">
+                {/* Use this if you want to display the Sunburst chart instead of the Bubble chart */}
+                {/*<SunburstChart
+                  data={jsonData}
+                  onSelectNode={setProductName}
+                  onSelectNodePath={setNodeAncestors}
+                />*/}
                 <BubbleChart
                   data={jsonData}
                   onSelectNode={setProductName}