From 374d432d01d6518322f7eb9c0d94ac7dce955d84 Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 18:48:53 -0700
Subject: [PATCH 1/9] add z index to Tooltip

---
 src/components/chart-elements/BarChart/BarChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
index c87df34bd..b548bd741 100644
--- a/src/components/chart-elements/BarChart/BarChart.tsx
+++ b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -328,7 +328,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
               </YAxis>
             )}
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ fill: "#d1d5db", opacity: "0.15" }}
               content={

From 7df44e3abf8e936471a206251efebe9e0aa2bdb2 Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 18:49:14 -0700
Subject: [PATCH 2/9] update storybook

---
 .../chart-elements/BarChart.stories.tsx       | 88 ++++++++-----------
 .../chart-elements/helpers/testData.tsx       |  9 ++
 2 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 664925dcf..1105ed0a7 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -11,6 +11,7 @@ import {
   longBaseChartData,
   longIndexBaseChartData,
   simpleBaseChartWithNegativeValues,
+  longDataName,
 } from "./helpers/testData";
 
 const meta: Meta<typeof BarChart> = {
@@ -312,60 +313,41 @@ export const CustomTooltipPreviousDay: Story = {
   },
 };
 
-export const CustomTooltipComplex: Story = {
-  args: {
-    yAxisWidth: 65,
-    index: customTooltipIndex,
-    categories: ["Sales"],
-    colors: customTooltipColors,
-    valueFormatter: currencyValueFormatter,
-    customTooltip: (props: CustomTooltipProps) => {
-      const { payload, active, label } = props;
-      if (!active || !payload) return null;
-
-      const categoryPayload = payload?.[0];
-      if (!categoryPayload) return null;
-      const value = categoryPayload.value as number;
-      const dataKey = categoryPayload.dataKey as number;
-
-      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);
-      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};
-      const prev = previousValues ? previousValues[dataKey] : undefined;
-      const percentage = ((value - prev) / prev) * 100 ?? undefined;
-      const badgeColor = getBadgeColor(percentage);
-
-      return (
-        <div className="rounded-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border">
-          <div className="flex flex-1 space-x-2.5">
-            <div className={`w-1 flex flex-col bg-${categoryPayload.color}-500 rounded`} />
-            <div className="w-full">
-              <p className="text-tremor-default font-medium text-tremor-content-emphasis">
-                {dataKey}
-              </p>
-              <p className="text-tremor-default text-tremor-content-subtle">{label}</p>
-              <p className="mt-2 font-medium whitespace-nowrap text-tremor-content-emphasis">
-                {currencyValueFormatter(value)}
-              </p>
-              {percentage ? (
-                <div className="mt-1 flex items-end space-x-2">
-                  <div
-                    className={`inline-flex text-tremor-default px-1.5 py-0.5 bg-${badgeColor}-100 text-${badgeColor}-600 rounded`}
-                  >
-                    {percentage > 0 ? "+" : null}
-                    {percentage.toFixed(1)}%
-                  </div>
-                  <div className="whitespace-nowrap text-tremor-default text-tremor-content-subtle">
-                    from previous month
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          </div>
+export function LongTooltip() {
+  return (
+    <>
+      <div className="grid grid-cols-2">
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
         </div>
-      );
-    },
-  },
-};
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
 
 export const tickGap: Story = {
   args: {
diff --git a/src/stories/chart-elements/helpers/testData.tsx b/src/stories/chart-elements/helpers/testData.tsx
index 879569ad2..042bc6dae 100644
--- a/src/stories/chart-elements/helpers/testData.tsx
+++ b/src/stories/chart-elements/helpers/testData.tsx
@@ -1751,3 +1751,12 @@ export const singleAndMultipleData = [
     Sales: 3612,
   },
 ];
+
+export const longDataName = [
+  {
+    name: 'Very very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Topic 1',
+    'Group A': 890,
+    'Group B': 338,
+    'Group C': 538,
+  },
+];

From b2df2bd1521872ad5e0ba7aa9ab5132f2fd997c0 Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 19:03:23 -0700
Subject: [PATCH 3/9] update test code line

---
 .../chart-elements/BarChart.stories.tsx       | 37 +++++++++++++++++++
 .../chart-elements/helpers/testData.tsx       |  9 +++++
 2 files changed, 46 insertions(+)

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 664925dcf..e54644875 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -11,6 +11,7 @@ import {
   longBaseChartData,
   longIndexBaseChartData,
   simpleBaseChartWithNegativeValues,
+  longDataName,
 } from "./helpers/testData";
 
 const meta: Meta<typeof BarChart> = {
@@ -387,3 +388,39 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+
+export function LongTooltip() {
+  return (
+    <>
+      <div className="grid grid-cols-2">
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
+        </div>
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/stories/chart-elements/helpers/testData.tsx b/src/stories/chart-elements/helpers/testData.tsx
index 879569ad2..042bc6dae 100644
--- a/src/stories/chart-elements/helpers/testData.tsx
+++ b/src/stories/chart-elements/helpers/testData.tsx
@@ -1751,3 +1751,12 @@ export const singleAndMultipleData = [
     Sales: 3612,
   },
 ];
+
+export const longDataName = [
+  {
+    name: 'Very very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Topic 1',
+    'Group A': 890,
+    'Group B': 338,
+    'Group C': 538,
+  },
+];

From 1f5c379b28543b737d6469065355b19bc30114bd Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 19:04:37 -0700
Subject: [PATCH 4/9] update test code line

---
 .../chart-elements/BarChart.stories.tsx       | 36 -------------------
 1 file changed, 36 deletions(-)

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 4fc23e733..7a2ef5cb2 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -313,42 +313,6 @@ export const CustomTooltipPreviousDay: Story = {
   },
 };
 
-export function LongTooltip() {
-  return (
-    <>
-      <div className="grid grid-cols-2">
-        <div className="flex flex-wrap">
-          <BarChart
-            className="mt-6"
-            data={longDataName}
-            index="name"
-            categories={[
-              'Group A',
-              'Group B',
-              'Group C',
-            ]}
-            colors={['blue', 'teal', 'amber']}
-          />
-        </div>
-        <div className="flex flex-wrap">
-          <BarChart
-            className="mt-6"
-            data={longDataName}
-            index="name"
-            categories={[
-              'Group A',
-              'Group B',
-              'Group C',
-            ]}
-            colors={['blue', 'teal', 'amber']}
-          />
-        </div>
-      </div>
-    </>
-  );
-}
-
-
 export const tickGap: Story = {
   args: {
     data: longBaseChartData,

From 0d6da651774d1b5284cd18e6ff12deb4b0893cca Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 19:07:02 -0700
Subject: [PATCH 5/9] revert wrongly removed test

---
 .../chart-elements/BarChart.stories.tsx       | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 7a2ef5cb2..1a998bda2 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -334,6 +334,60 @@ export const AxisLabels: Story = {
   },
 };
 
+export const CustomTooltipComplex: Story = {
+  args: {
+    yAxisWidth: 65,
+    index: customTooltipIndex,
+    categories: ["Sales"],
+    colors: customTooltipColors,
+    valueFormatter: currencyValueFormatter,
+    customTooltip: (props: CustomTooltipProps) => {
+      const { payload, active, label } = props;
+      if (!active || !payload) return null;
+
+      const categoryPayload = payload?.[0];
+      if (!categoryPayload) return null;
+      const value = categoryPayload.value as number;
+      const dataKey = categoryPayload.dataKey as number;
+
+      const previousIndex = data.findIndex((e) => e[customTooltipIndex] === label);
+      const previousValues: any = previousIndex > 0 ? data[previousIndex - 1] : {};
+      const prev = previousValues ? previousValues[dataKey] : undefined;
+      const percentage = ((value - prev) / prev) * 100 ?? undefined;
+      const badgeColor = getBadgeColor(percentage);
+
+      return (
+        <div className="rounded-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border">
+          <div className="flex flex-1 space-x-2.5">
+            <div className={`w-1 flex flex-col bg-${categoryPayload.color}-500 rounded`} />
+            <div className="w-full">
+              <p className="text-tremor-default font-medium text-tremor-content-emphasis">
+                {dataKey}
+              </p>
+              <p className="text-tremor-default text-tremor-content-subtle">{label}</p>
+              <p className="mt-2 font-medium whitespace-nowrap text-tremor-content-emphasis">
+                {currencyValueFormatter(value)}
+              </p>
+              {percentage ? (
+                <div className="mt-1 flex items-end space-x-2">
+                  <div
+                    className={`inline-flex text-tremor-default px-1.5 py-0.5 bg-${badgeColor}-100 text-${badgeColor}-600 rounded`}
+                  >
+                    {percentage > 0 ? "+" : null}
+                    {percentage.toFixed(1)}%
+                  </div>
+                  <div className="whitespace-nowrap text-tremor-default text-tremor-content-subtle">
+                    from previous month
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      );
+    },
+  },
+};
 
 export function LongTooltip() {
   return (

From faede3307feeb8a2d555c597a71836e645def4a2 Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 19:09:46 -0700
Subject: [PATCH 6/9] delete unused types

---
 .../chart-elements/BarChart.stories.tsx       | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 1a998bda2..a8611c589 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -313,27 +313,6 @@ export const CustomTooltipPreviousDay: Story = {
   },
 };
 
-export const tickGap: Story = {
-  args: {
-    data: longBaseChartData,
-    tickGap: 200,
-  },
-};
-
-export const barCategoryGap: Story = {
-  args: {
-    data: data,
-    barCategoryGap: "20%",
-  },
-};
-
-export const AxisLabels: Story = {
-  args: {
-    xAxisLabel: "Month of Year",
-    yAxisLabel: "Amount (USD)",
-  },
-};
-
 export const CustomTooltipComplex: Story = {
   args: {
     yAxisWidth: 65,

From 622820216b3fcb4fab0cc201f01a6d8ac9c4ec3b Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 19:13:44 -0700
Subject: [PATCH 7/9] revert wrongly removed test

---
 .../chart-elements/BarChart.stories.tsx       | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index a8611c589..1a998bda2 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -313,6 +313,27 @@ export const CustomTooltipPreviousDay: Story = {
   },
 };
 
+export const tickGap: Story = {
+  args: {
+    data: longBaseChartData,
+    tickGap: 200,
+  },
+};
+
+export const barCategoryGap: Story = {
+  args: {
+    data: data,
+    barCategoryGap: "20%",
+  },
+};
+
+export const AxisLabels: Story = {
+  args: {
+    xAxisLabel: "Month of Year",
+    yAxisLabel: "Amount (USD)",
+  },
+};
+
 export const CustomTooltipComplex: Story = {
   args: {
     yAxisWidth: 65,

From 0c756abc1a9394b77c381febd5f02d5b5e6f4c56 Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Sun, 16 Jun 2024 19:16:17 -0700
Subject: [PATCH 8/9] fix the test code location

---
 .../chart-elements/BarChart.stories.tsx       | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 1a998bda2..97f9cb6ce 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -313,27 +313,6 @@ export const CustomTooltipPreviousDay: Story = {
   },
 };
 
-export const tickGap: Story = {
-  args: {
-    data: longBaseChartData,
-    tickGap: 200,
-  },
-};
-
-export const barCategoryGap: Story = {
-  args: {
-    data: data,
-    barCategoryGap: "20%",
-  },
-};
-
-export const AxisLabels: Story = {
-  args: {
-    xAxisLabel: "Month of Year",
-    yAxisLabel: "Amount (USD)",
-  },
-};
-
 export const CustomTooltipComplex: Story = {
   args: {
     yAxisWidth: 65,
@@ -389,6 +368,27 @@ export const CustomTooltipComplex: Story = {
   },
 };
 
+export const tickGap: Story = {
+  args: {
+    data: longBaseChartData,
+    tickGap: 200,
+  },
+};
+
+export const barCategoryGap: Story = {
+  args: {
+    data: data,
+    barCategoryGap: "20%",
+  },
+};
+
+export const AxisLabels: Story = {
+  args: {
+    xAxisLabel: "Month of Year",
+    yAxisLabel: "Amount (USD)",
+  },
+};
+
 export function LongTooltip() {
   return (
     <>

From 51f6250f19d36d511a150e9e50c6d8d8affa8168 Mon Sep 17 00:00:00 2001
From: Sho-ki <shoki0116.highjump@gmail.com>
Date: Wed, 26 Jun 2024 22:36:25 -0700
Subject: [PATCH 9/9] add z-index to other charts

---
 src/components/chart-elements/AreaChart/AreaChart.tsx       | 2 +-
 src/components/chart-elements/DonutChart/DonutChart.tsx     | 2 +-
 src/components/chart-elements/FunnelChart/FunnelChart.tsx   | 1 +
 src/components/chart-elements/LineChart/LineChart.tsx       | 2 +-
 src/components/chart-elements/ScatterChart/ScatterChart.tsx | 2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 57426b026..8dce26ed6 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -241,7 +241,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               )}
             </YAxis>
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
               content={
diff --git a/src/components/chart-elements/DonutChart/DonutChart.tsx b/src/components/chart-elements/DonutChart/DonutChart.tsx
index a3e0de11b..c38ee265d 100644
--- a/src/components/chart-elements/DonutChart/DonutChart.tsx
+++ b/src/components/chart-elements/DonutChart/DonutChart.tsx
@@ -192,7 +192,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>((props, ref
               />
             ) : null} */}
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               content={
                 showTooltip ? (
diff --git a/src/components/chart-elements/FunnelChart/FunnelChart.tsx b/src/components/chart-elements/FunnelChart/FunnelChart.tsx
index 6c2696ac0..4635e5670 100644
--- a/src/components/chart-elements/FunnelChart/FunnelChart.tsx
+++ b/src/components/chart-elements/FunnelChart/FunnelChart.tsx
@@ -670,6 +670,7 @@ const FunnelChartPrimitive = React.forwardRef<HTMLDivElement, FunnelChartProps>(
                 className={tremorTwMerge(
                   "absolute top-0 pointer-events-none",
                   tooltip.data ? "visible" : "hidden",
+                  "z-50",
                 )}
                 tabIndex={-1}
                 role="dialog"
diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
index ded14f8df..5b167661f 100644
--- a/src/components/chart-elements/LineChart/LineChart.tsx
+++ b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -237,7 +237,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               )}
             </YAxis>
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
               content={
diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
index 99b17afe3..ada5fa6e7 100644
--- a/src/components/chart-elements/ScatterChart/ScatterChart.tsx
+++ b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
@@ -307,7 +307,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
               </YAxis>
             ) : null}
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
               content={