chore: added path functionality

wizeline · Mar 23, 2024 · 6adaf20 · 6adaf20
1 parent b06df93
commit 6adaf20
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/app/components/charts/SunburstChart.tsx b/app/components/charts/SunburstChart.tsx
@@ -5,6 +5,7 @@ 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 = {
   name: string;
@@ -21,10 +22,11 @@ export type SunburstNode = {
 
 interface SunburstElementProps {
   data: SunburstNode | undefined;
+  onSelectNode?: (args: any) => void;
 }
 
 const SunburstChart = (props: SunburstElementProps) => {
-  const { data } = props;
+  const { data, onSelectNode } = props;
   const color = d3.scaleOrdinal(d3.schemeSet1);
   const chartRef = useRef<HTMLDivElement | null>(null);
   const [Sunburst, setSunburst] = useState<any | null>(null);
@@ -79,23 +81,53 @@ const SunburstChart = (props: SunburstElementProps) => {
         .color((d: any, parent: any) => color(parent ? parent.data.name : null))
         .onHover((node: any) => {
           if (node) {
-            setSelectedNode(node);
+            let lastPath = "";
+
+            hierarchy(data, (d: any) => d.children)
+              .sum((d) => d.size)
+              .sort((a, b) => (b.value ? b.value : 0) - (a.value ? a.value : 0))
+              .each((nodeI) => {
+                if (node.name === nodeI.data.name) {
+                  lastPath = nodeI
+                    .ancestors()
+                    .map((d) => d.data.name)
+                    .reverse()
+                    .join("/");
+                }
+              });
+
+            onSelectNode && onSelectNode(lastPath.split("/"));
+
+            if (!node.children) {
+              setSelectedNode(node);
+            } else {
+              setSelectedNode(null);
+            }
           }
           if (!isInfoModalOpen) {
             handleIsInfoModalOpen();
           }
         })
         .width(chartWidth)
+        .tooltipTitle(() => "")
         .tooltipContent((d: any, node: any) => `Size: <i>${node.value}</i>`)(
         chartRef.current
       );
     }
-  }, [data, Sunburst, color, hasChildNodes, chartWidth, isInfoModalOpen]);
+  }, [
+    data,
+    Sunburst,
+    color,
+    hasChildNodes,
+    chartWidth,
+    isInfoModalOpen,
+    onSelectNode,
+  ]);
 
   return (
     <>
       <div ref={chartRef} className="max-w-[800px] z-0"></div>
-      {isInfoModalOpen && selectedNode && (
+      {isInfoModalOpen && selectedNode && !selectedNode?.children && (
         <ModalInformation
           onClose={handleIsInfoModalClose}
           node={selectedNode}

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -31,6 +31,7 @@ export default function Index() {
       return notificationDate >= today;
     });
   const [zoomPercentage, setZoomPercentage] = useState(100);
+  const [nodeAncestors, setNodeAncestors] = useState<string[]>([]);
 
   const handleZoomChange = (newZoomPercentage: number) => {
     setZoomPercentage(newZoomPercentage);
@@ -69,10 +70,10 @@ export default function Index() {
           notifications={notifications}
         />
       </div>
-      {!jsonData ? <Loader /> : <div className="min-h-screen flex flex-col justify-between items-center"><SunburstChart data={jsonData} /></div>}
+      {!jsonData ? <Loader /> : <div className="min-h-screen flex flex-col justify-between items-center"><SunburstChart data={jsonData} onSelectNode={setNodeAncestors} /></div>}
       <div className="hidden sm:block absolute bottom-0 left-0 mb-4 ml-4">
         <Breadcrumb
-          path={["Data and Simulation Generation", "Customer Segmentation"]}
+          path={nodeAncestors}
         />
       </div>
       <div className="hidden sm:block absolute bottom-0 right-0 mb-4 mr-4">

diff --git a/app/types/nodeTypes.ts b/app/types/nodeTypes.ts
@@ -2,6 +2,7 @@ export type NodeType = {
   name: string;
   value: number;
   __dataNode: DataNodeType;
+  children?: NodeType[] | null;
 };
 
 export type DataNodeType = {