feat: Support strokeDasharray and fillOpacity on AreaChart (#350)

* feat: Support strokeDasharray and fillOpacity on AreaChart

Signed-off-by: lannyfu <[email protected]>

* add changeset

Signed-off-by: lannyfu <[email protected]>

---------

Signed-off-by: lannyfu <[email protected]>

Author: fuchunlan

.changeset/olive-oranges-report.md

@@ -0,0 +1,5 @@
+---
+'@kubed/charts': patch
+---
+
+feat: Support strokeDasharray and fillOpacity on AreaChart

packages/charts/src/charts/AreaChart/AreaChart.tsx

@@ -15,14 +15,21 @@ import { AxisDomain } from 'recharts/types/util/types';
 import { remove } from 'lodash';
 
 import { ChartBaseProps } from '../../types';
-import { defaultValueFormatter, getYAxisDomain, getCategoryColors } from '../../utils';
+import {
+  defaultValueFormatter,
+  getYAxisDomain,
+  getCategoryColors,
+  getCategoryMap,
+} from '../../utils';
 import { Legend as LegendContent } from '../../components/Legend';
 import { Tooltip as TooltipContent } from '../../components/Tooltip';
 
 export interface AreaChartProps extends ChartBaseProps {
   stack?: boolean;
   xAxisProps?: XAxisProps;
   yAxisProps?: YAxisProps;
+  strokeDasharrays?: any[];
+  fillOpacitys?: any[];
 }
 
 export const AreaChart = ({
@@ -53,12 +60,16 @@ export const AreaChart = ({
   maxActiveCategories = 50,
   xAxisProps = {},
   yAxisProps = {},
+  strokeDasharrays,
+  fillOpacitys,
   ...rest
 }: AreaChartProps) => {
   const initialActiveCats = categories.slice(0, maxActiveCategories);
   const [activeCategories, setActiveCategories] = useState(initialActiveCats);
   const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   const categoryColors = getCategoryColors(categories, colors);
+  const categoryStrokeDasharrays = getCategoryMap(categories, strokeDasharrays);
+  const categoryFillOpacitys = getCategoryMap(categories, fillOpacitys);
 
   const handleLegendClick = (category) => {
     const newActiveCategories = [...activeCategories];
@@ -131,16 +142,17 @@ export const AreaChart = ({
         {showTooltip ? (
           <Tooltip
             wrapperStyle={{ outline: 'none' }}
-            content={({ active, payload, label }) => (
-              customTooltip && customTooltip(payload)) || (
-              <TooltipContent
-                active={active}
-                payload={payload}
-                label={label}
-                valueFormatter={valueFormatter}
-                legendFormatter={legendFormatter}
-              />
-            )}
+            content={({ active, payload, label }) =>
+              (customTooltip && customTooltip(payload)) || (
+                <TooltipContent
+                  active={active}
+                  payload={payload}
+                  label={label}
+                  valueFormatter={valueFormatter}
+                  legendFormatter={legendFormatter}
+                />
+              )
+            }
           />
         ) : null}
         {categories.map((category) => (
@@ -165,6 +177,8 @@ export const AreaChart = ({
             dataKey={category}
             stroke={categoryColors.get(category)}
             fill={`url(#${categoryColors.get(category)})`}
+            strokeDasharray={categoryStrokeDasharrays.get(category)}
+            fillOpacity={categoryFillOpacitys.get(category)}
             strokeWidth={1}
             dot={false}
             isAnimationActive={showAnimation}

packages/charts/src/utils.ts

@@ -37,3 +37,11 @@ export const removeValueFromArray = (value: any, array: any[]): any[] => {
   }
   return array;
 };
+
+export const getCategoryMap = (categories: string[], array: string[] = []): Map<string, string> => {
+  const categoryMap = new Map<string, string>();
+  categories.forEach((category, idx) => {
+    categoryMap.set(category, array[idx]);
+  });
+  return categoryMap;
+};