From c9c8352cef626aef72aef9ff38585ea99b07c2e6 Mon Sep 17 00:00:00 2001
From: Aditya Pandey <askadityapandey@gmail.com>
Date: Sun, 15 Sep 2024 20:18:03 +0530
Subject: [PATCH 1/2] fixes a bug

---
 .../chart-elements/AreaChart/AreaChart.tsx    | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 5390f95c..eaf79280 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -291,23 +291,24 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 }
               />
             ) : null}
-            {categories.map((category) => {
-              return (
-                <defs key={category}>
-                  {showGradient ? (
-                    <linearGradient
-                      className={
-                        getColorClassNames(
-                          categoryColors.get(category) ?? BaseColors.Gray,
-                          colorPalette.text,
-                        ).textColor
-                      }
-                      id={categoryColors.get(category)}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
+              {categories.map((category) => {
+                const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace('#', '');
+                return (
+                  <defs key={category}>
+                    {showGradient ? (
+                      <linearGradient
+                        className={
+                          getColorClassNames(
+                            categoryColors.get(category) ?? BaseColors.Gray,
+                            colorPalette.text,
+                          ).textColor
+                        }
+                        id={gradientId}
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
                       <stop
                         offset="5%"
                         stopColor="currentColor"
@@ -319,13 +320,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                     </linearGradient>
                   ) : (
                     <linearGradient
-                      className={
+                    className={
                         getColorClassNames(
                           categoryColors.get(category) ?? BaseColors.Gray,
                           colorPalette.text,
                         ).textColor
                       }
-                      id={categoryColors.get(category)}
+                      id={gradientId}
                       x1="0"
                       y1="0"
                       x2="0"
@@ -342,7 +343,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 </defs>
               );
             })}
-            {categories.map((category) => (
+            {categories.map((category) => {
+              const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace('#', '');
               <Area
                 className={
                   getColorClassNames(
@@ -350,6 +352,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                     colorPalette.text,
                   ).strokeColor
                 }
+                fill={`url(#${gradientId})`}
                 strokeOpacity={activeDot || (activeLegend && activeLegend !== category) ? 0.3 : 1}
                 activeDot={(props: any) => {
                   const { cx, cy, stroke, strokeLinecap, strokeLinejoin, strokeWidth, dataKey } =
@@ -466,4 +469,4 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
 
 AreaChart.displayName = "AreaChart";
 
-export default AreaChart;
+export default AreaChart;
\ No newline at end of file

From 22a28cf54d4de92b079f653c420d3c38cdfc4936 Mon Sep 17 00:00:00 2001
From: severinlandolt <sev.landolt@gmail.com>
Date: Sun, 15 Sep 2024 17:31:54 +0200
Subject: [PATCH 2/2] fix: area chart linting

---
 .../chart-elements/AreaChart/AreaChart.tsx    | 199 +++++++++---------
 1 file changed, 100 insertions(+), 99 deletions(-)

diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index eaf79280..33c3919f 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -291,24 +291,24 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 }
               />
             ) : null}
-              {categories.map((category) => {
-                const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace('#', '');
-                return (
-                  <defs key={category}>
-                    {showGradient ? (
-                      <linearGradient
-                        className={
-                          getColorClassNames(
-                            categoryColors.get(category) ?? BaseColors.Gray,
-                            colorPalette.text,
-                          ).textColor
-                        }
-                        id={gradientId}
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="1"
-                      >
+            {categories.map((category) => {
+              const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace("#", "");
+              return (
+                <defs key={category}>
+                  {showGradient ? (
+                    <linearGradient
+                      className={
+                        getColorClassNames(
+                          categoryColors.get(category) ?? BaseColors.Gray,
+                          colorPalette.text,
+                        ).textColor
+                      }
+                      id={gradientId}
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
                       <stop
                         offset="5%"
                         stopColor="currentColor"
@@ -320,7 +320,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                     </linearGradient>
                   ) : (
                     <linearGradient
-                    className={
+                      className={
                         getColorClassNames(
                           categoryColors.get(category) ?? BaseColors.Gray,
                           colorPalette.text,
@@ -344,69 +344,21 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               );
             })}
             {categories.map((category) => {
-              const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace('#', '');
-              <Area
-                className={
-                  getColorClassNames(
-                    categoryColors.get(category) ?? BaseColors.Gray,
-                    colorPalette.text,
-                  ).strokeColor
-                }
-                fill={`url(#${gradientId})`}
-                strokeOpacity={activeDot || (activeLegend && activeLegend !== category) ? 0.3 : 1}
-                activeDot={(props: any) => {
-                  const { cx, cy, stroke, strokeLinecap, strokeLinejoin, strokeWidth, dataKey } =
-                    props;
-                  return (
-                    <Dot
-                      className={tremorTwMerge(
-                        "stroke-tremor-background dark:stroke-dark-tremor-background",
-                        onValueChange ? "cursor-pointer" : "",
-                        getColorClassNames(
-                          categoryColors.get(dataKey) ?? BaseColors.Gray,
-                          colorPalette.text,
-                        ).fillColor,
-                      )}
-                      cx={cx}
-                      cy={cy}
-                      r={5}
-                      fill=""
-                      stroke={stroke}
-                      strokeLinecap={strokeLinecap}
-                      strokeLinejoin={strokeLinejoin}
-                      strokeWidth={strokeWidth}
-                      onClick={(dotProps: any, event) => onDotClick(props, event)}
-                    />
-                  );
-                }}
-                dot={(props: any) => {
-                  const {
-                    stroke,
-                    strokeLinecap,
-                    strokeLinejoin,
-                    strokeWidth,
-                    cx,
-                    cy,
-                    dataKey,
-                    index,
-                  } = props;
-
-                  if (
-                    (hasOnlyOneValueForThisKey(data, category) &&
-                      !(activeDot || (activeLegend && activeLegend !== category))) ||
-                    (activeDot?.index === index && activeDot?.dataKey === category)
-                  ) {
+              const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace("#", "");
+              return (
+                <Area
+                  className={
+                    getColorClassNames(
+                      categoryColors.get(category) ?? BaseColors.Gray,
+                      colorPalette.text,
+                    ).strokeColor
+                  }
+                  strokeOpacity={activeDot || (activeLegend && activeLegend !== category) ? 0.3 : 1}
+                  activeDot={(props: any) => {
+                    const { cx, cy, stroke, strokeLinecap, strokeLinejoin, strokeWidth, dataKey } =
+                      props;
                     return (
                       <Dot
-                        key={index}
-                        cx={cx}
-                        cy={cy}
-                        r={5}
-                        stroke={stroke}
-                        fill=""
-                        strokeLinecap={strokeLinecap}
-                        strokeLinejoin={strokeLinejoin}
-                        strokeWidth={strokeWidth}
                         className={tremorTwMerge(
                           "stroke-tremor-background dark:stroke-dark-tremor-background",
                           onValueChange ? "cursor-pointer" : "",
@@ -415,26 +367,75 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                             colorPalette.text,
                           ).fillColor,
                         )}
+                        cx={cx}
+                        cy={cy}
+                        r={5}
+                        fill=""
+                        stroke={stroke}
+                        strokeLinecap={strokeLinecap}
+                        strokeLinejoin={strokeLinejoin}
+                        strokeWidth={strokeWidth}
+                        onClick={(dotProps: any, event) => onDotClick(props, event)}
                       />
                     );
-                  }
-                  return <Fragment key={index}></Fragment>;
-                }}
-                key={category}
-                name={category}
-                type={curveType}
-                dataKey={category}
-                stroke=""
-                fill={`url(#${categoryColors.get(category)})`}
-                strokeWidth={2}
-                strokeLinejoin="round"
-                strokeLinecap="round"
-                isAnimationActive={showAnimation}
-                animationDuration={animationDuration}
-                stackId={stack ? "a" : undefined}
-                connectNulls={connectNulls}
-              />
-            ))}
+                  }}
+                  dot={(props: any) => {
+                    const {
+                      stroke,
+                      strokeLinecap,
+                      strokeLinejoin,
+                      strokeWidth,
+                      cx,
+                      cy,
+                      dataKey,
+                      index,
+                    } = props;
+
+                    if (
+                      (hasOnlyOneValueForThisKey(data, category) &&
+                        !(activeDot || (activeLegend && activeLegend !== category))) ||
+                      (activeDot?.index === index && activeDot?.dataKey === category)
+                    ) {
+                      return (
+                        <Dot
+                          key={index}
+                          cx={cx}
+                          cy={cy}
+                          r={5}
+                          stroke={stroke}
+                          fill=""
+                          strokeLinecap={strokeLinecap}
+                          strokeLinejoin={strokeLinejoin}
+                          strokeWidth={strokeWidth}
+                          className={tremorTwMerge(
+                            "stroke-tremor-background dark:stroke-dark-tremor-background",
+                            onValueChange ? "cursor-pointer" : "",
+                            getColorClassNames(
+                              categoryColors.get(dataKey) ?? BaseColors.Gray,
+                              colorPalette.text,
+                            ).fillColor,
+                          )}
+                        />
+                      );
+                    }
+                    return <Fragment key={index}></Fragment>;
+                  }}
+                  key={category}
+                  name={category}
+                  type={curveType}
+                  dataKey={category}
+                  stroke=""
+                  fill={`url(#${gradientId})`}
+                  strokeWidth={2}
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                  isAnimationActive={showAnimation}
+                  animationDuration={animationDuration}
+                  stackId={stack ? "a" : undefined}
+                  connectNulls={connectNulls}
+                />
+              );
+            })}
             {onValueChange
               ? categories.map((category) => (
                   <Line
@@ -469,4 +470,4 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
 
 AreaChart.displayName = "AreaChart";
 
-export default AreaChart;
\ No newline at end of file
+export default AreaChart;