feat: adjust sankey chart link colors

globalfund · Sep 17, 2024 · 0d47f8e · 0d47f8e
1 parent fe6cb32
commit 0d47f8e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/app/components/charts/sankey/index.tsx b/src/app/components/charts/sankey/index.tsx
@@ -39,6 +39,10 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
       .reduce((acc, item) => acc + item.value, 0);
   }, [props.data.links]);
 
+  const maxLevel = React.useMemo(() => {
+    return Math.max(...props.data.nodes.map((node) => node.level));
+  }, [props.data.nodes]);
+
   React.useEffect(() => {
     if (containerRef.current) {
       const chart = echarts.init(containerRef.current, undefined, {
@@ -86,7 +90,8 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
                 color: appColors.COMMON.WHITE,
               },
               lineStyle: {
-                color: appColors.SANKEY_CHART.LINK_COLORS[1],
+                color:
+                  appColors.SANKEY_CHART.LINK_COLORS[maxLevel === 3 ? 0 : 1],
               },
               itemStyle: {
                 color: appColors.SANKEY_CHART.NODE_COLOR,
@@ -100,7 +105,8 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
                 color: appColors.COMMON.WHITE,
               },
               lineStyle: {
-                color: appColors.SANKEY_CHART.LINK_COLORS[2],
+                color:
+                  appColors.SANKEY_CHART.LINK_COLORS[maxLevel === 3 ? 1 : 2],
               },
             },
             {

diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
@@ -901,7 +901,7 @@ export const appColors = {
   },
   SANKEY_CHART: {
     NODE_COLOR: "#252C34",
-    LINK_COLORS: ["#3B5366", "#013E77", "#33C4BE"],
+    LINK_COLORS: ["#0A2840", "#013E77", "#00B5AE"],
   },
   TOOLTIP: {
     TEXT_COLOR: "#262C34",