Merge pull request #3 from wizeline/include-main-js

Removed script tag, added manually request and chart package

Author: raulMarvanWizeline

app/components/sunburstChart/SunburstChart.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable no-unexpected-multiline */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from 'react';
+import * as d3 from 'd3';
+
+export type SunburstLeaf = {
+  name: string;
+  size: number;
+  color: string;
+};
+
+export type SunburstNode = {
+  name: string;
+  color: string;
+  size: number; 
+  children: (SunburstNode | SunburstLeaf)[];
+};
+
+interface SunburstElementProps {
+  data: SunburstNode | undefined
+}
+
+const SunburstChart = (props: SunburstElementProps) => {
+  const { data } = props;
+  const color = d3.scaleOrdinal(d3.schemeSet1);
+  const chartRef = useRef<HTMLDivElement | null>(null);
+  const [Sunburst, setSunburst] = useState<any | null>(null);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      import('sunburst-chart').then((module) => {
+        setSunburst(module.default);
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (data && Sunburst) {
+      const chart = Sunburst();
+      chart.data(data)
+        .label('name')
+        .labelOrientation('angular')
+        .maxLevels(10)
+        .color((d: any, parent: any) => color(parent ? parent.data.name : null))
+        .tooltipContent((d: any, node: any) => `Size: <i>${node.value}</i>`)
+        (chartRef.current);
+    }
+  }, [data, Sunburst, color]);
+
+  return (
+    <div ref={chartRef} className="mb-6"></div>
+  );
+};
+
+export default SunburstChart;

app/root.tsx

@@ -14,7 +14,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-        <script id="gen-ai-map" data-boxid="chart-map" data-charttype="" src="https://gen-ai-tools-public.s3.amazonaws.com/assets/map.js"></script>
         <Meta />
         <Links />
       </head>

app/routes/_index.tsx

@@ -1,5 +1,7 @@
 import type { MetaFunction } from "@remix-run/node";
+import { useEffect, useState } from "react";
 import HeaderMinimalist from "~/components/header/HeaderMinimalist";
+import SunburstChart from "~/components/sunburstChart/SunburstChart";
 
 export const meta: MetaFunction = () => {
   return [
@@ -9,10 +11,18 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+  const [jsonData, setJsonData] = useState(null);
+
+  useEffect(() => {
+    fetch('https://gen-ai-tools-public.s3.amazonaws.com/map-tree.json')
+        .then(response => response.json())
+        .then(data => setJsonData(data));
+  }, [])
+  
   return (
     <div className="min-h-screen flex flex-col justify-between">
       <HeaderMinimalist />
-      <div id="chart-map" className="mb-6"></div>
+      {jsonData && <SunburstChart data={jsonData} />}
     </div>
   );
 }