spark charts

src/components/spark-elements/SparkAreaChart/SparkAreaChart.tsx

@@ -2,12 +2,13 @@
 import React from "react";
 import { Area, AreaChart as ReChartsAreaChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
 
-import { BaseColors, colorPalette, getColorClassNames, themeColorRange, tremorTwMerge } from "lib";
-import { CurveType } from "../../../lib/inputTypes";
-import BaseSparkChartProps from "../common/BaseSparkChartProps";
-import { constructCategoryColors, getYAxisDomain } from "components/chart-elements/common/utils";
 import NoData from "components/chart-elements/common/NoData";
+import { constructCategoryColors, getYAxisDomain } from "components/chart-elements/common/utils";
+import { BaseColors, colorPalette, getColorClassNames, themeColorRange, tremorTwMerge } from "lib";
 import { AxisDomain } from "recharts/types/util/types";
+import { Color, CurveType } from "../../../lib/inputTypes";
+import BaseSparkChartProps from "../common/BaseSparkChartProps";
+import { strokeColors, textColors } from "../common/style";
 
 export interface SparkAreaChartProps extends BaseSparkChartProps {
   stack?: boolean;
@@ -24,7 +25,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, SparkAreaChartProps>((props,
     stack = false,
     colors = themeColorRange,
     showAnimation = false,
-    animationDuration = 900,
+    animationDuration = 600,
     showGradient = true,
     curveType = "linear",
     connectNulls = false,
@@ -46,16 +47,12 @@ const AreaChart = React.forwardRef<HTMLDivElement, SparkAreaChartProps>((props,
             <YAxis hide domain={yAxisDomain as AxisDomain} />
             <XAxis hide dataKey={index} />
             {categories.map((category) => {
+              const color = categoryColors.get(category) as Color;
               return (
                 <defs key={category}>
                   {showGradient ? (
                     <linearGradient
-                      className={
-                        getColorClassNames(
-                          categoryColors.get(category) ?? BaseColors.Gray,
-                          colorPalette.text,
-                        ).textColor
-                      }
+                      className={color ? textColors[color] : "gray"}
                       id={categoryColors.get(category)}
                       x1="0"
                       y1="0"
@@ -85,31 +82,29 @@ const AreaChart = React.forwardRef<HTMLDivElement, SparkAreaChartProps>((props,
                 </defs>
               );
             })}
-            {categories.map((category) => (
-              <Area
-                className={
-                  getColorClassNames(
-                    categoryColors.get(category) ?? BaseColors.Gray,
-                    colorPalette.text,
-                  ).strokeColor
-                }
-                strokeOpacity={1}
-                dot={false}
-                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}
-              />
-            ))}
+            {categories.map((category) => {
+              const color = categoryColors.get(category) as Color;
+              return (
+                <Area
+                  strokeOpacity={1}
+                  dot={false}
+                  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}
+                  className={color ? strokeColors[color] : "gray"}
+                />
+              );
+            })}
           </ReChartsAreaChart>
         ) : (
           <NoData noDataText={noDataText} />

src/components/spark-elements/SparkBarChart/SparkBarChart.tsx

@@ -1,14 +1,15 @@
 "use client";
-import { colorPalette, getColorClassNames, tremorTwMerge } from "lib";
+import { Color, tremorTwMerge } from "lib";
 import React from "react";
 
 import { Bar, BarChart as ReChartsBarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
 
-import { BaseColors, themeColorRange } from "lib";
-import BaseSparkChartProps from "../common/BaseSparkChartProps";
-import { constructCategoryColors, getYAxisDomain } from "components/chart-elements/common/utils";
 import NoData from "components/chart-elements/common/NoData";
+import { constructCategoryColors, getYAxisDomain } from "components/chart-elements/common/utils";
+import { themeColorRange } from "lib";
 import { AxisDomain } from "recharts/types/util/types";
+import BaseSparkChartProps from "../common/BaseSparkChartProps";
+import { fillColors } from "../common/style";
 
 export interface SparkBarChartProps extends BaseSparkChartProps {
   stack?: boolean;
@@ -46,24 +47,22 @@ const SparkBarChart = React.forwardRef<HTMLDivElement, SparkBarChartProps>((prop
           >
             <YAxis hide domain={yAxisDomain as AxisDomain} />
             <XAxis hide dataKey={index} />
-            {categories.map((category) => (
-              <Bar
-                className={tremorTwMerge(
-                  getColorClassNames(
-                    categoryColors.get(category) ?? BaseColors.Gray,
-                    colorPalette.background,
-                  ).fillColor,
-                )}
-                key={category}
-                name={category}
-                type="linear"
-                stackId={stack || relative ? "a" : undefined}
-                dataKey={category}
-                fill=""
-                isAnimationActive={showAnimation}
-                animationDuration={animationDuration}
-              />
-            ))}
+            {categories.map((category) => {
+              const color = categoryColors.get(category) as Color;
+              return (
+                <Bar
+                  key={category}
+                  name={category}
+                  type="linear"
+                  stackId={stack || relative ? "a" : undefined}
+                  dataKey={category}
+                  fill=""
+                  isAnimationActive={showAnimation}
+                  animationDuration={animationDuration}
+                  className={color ? fillColors[color] : "gray"}
+                />
+              );
+            })}
           </ReChartsBarChart>
         ) : (
           <NoData noDataText={noDataText} />

src/components/spark-elements/SparkLineChart/SparkLineChart.tsx

@@ -2,14 +2,15 @@
 import React from "react";
 import { Line, LineChart as ReChartsLineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
 
-import { BaseColors, colorPalette, getColorClassNames, themeColorRange, tremorTwMerge } from "lib";
-import { CurveType } from "../../../lib/inputTypes";
-import BaseSparkChartProps from "../common/BaseSparkChartProps";
-import { constructCategoryColors, getYAxisDomain } from "components/chart-elements/common/utils";
 import NoData from "components/chart-elements/common/NoData";
+import { constructCategoryColors, getYAxisDomain } from "components/chart-elements/common/utils";
+import { themeColorRange, tremorTwMerge } from "lib";
 import { AxisDomain } from "recharts/types/util/types";
+import { Color, CurveType } from "../../../lib/inputTypes";
+import BaseSparkChartProps from "../common/BaseSparkChartProps";
+import { strokeColors } from "../common/style";
 
-export interface SparkLineChartProps extends BaseSparkChartProps {
+interface SparkLineChartProps extends BaseSparkChartProps {
   curveType?: CurveType;
   connectNulls?: boolean;
 }
@@ -41,29 +42,26 @@ const SparkLineChart = React.forwardRef<HTMLDivElement, SparkLineChartProps>((pr
           <ReChartsLineChart data={data} margin={{ top: 1, left: 1, right: 1, bottom: 1 }}>
             <YAxis hide domain={yAxisDomain as AxisDomain} />
             <XAxis hide dataKey={index} />
-            {categories.map((category) => (
-              <Line
-                className={tremorTwMerge(
-                  getColorClassNames(
-                    categoryColors.get(category) ?? BaseColors.Gray,
-                    colorPalette.text,
-                  ).strokeColor,
-                )}
-                strokeOpacity={1}
-                dot={false}
-                key={category}
-                name={category}
-                type={curveType}
-                dataKey={category}
-                stroke=""
-                strokeWidth={2}
-                strokeLinejoin="round"
-                strokeLinecap="round"
-                isAnimationActive={showAnimation}
-                animationDuration={animationDuration}
-                connectNulls={connectNulls}
-              />
-            ))}
+            {categories.map((category) => {
+              const color = categoryColors.get(category) as Color;
+              return (
+                <Line
+                  key={category}
+                  name={category}
+                  type={curveType}
+                  dataKey={category}
+                  stroke=""
+                  strokeWidth={2}
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                  dot={false}
+                  isAnimationActive={showAnimation}
+                  animationDuration={animationDuration}
+                  connectNulls={connectNulls}
+                  className={color ? strokeColors[color] : "gray"}
+                />
+              );
+            })}
           </ReChartsLineChart>
         ) : (
           <NoData noDataText={noDataText} />
@@ -75,4 +73,4 @@ const SparkLineChart = React.forwardRef<HTMLDivElement, SparkLineChartProps>((pr
 
 SparkLineChart.displayName = "SparkLineChart";
 
-export default SparkLineChart;
+export { SparkLineChart, type SparkLineChartProps };

src/components/spark-elements/SparkLineChart/index.ts

@@ -1,2 +1,2 @@
-export { default as SparkLineChart } from "./SparkLineChart";
+export { SparkLineChart } from "./SparkLineChart";
 export type { SparkLineChartProps } from "./SparkLineChart";

src/components/spark-elements/common/style.ts

@@ -0,0 +1,79 @@
+import { Color } from "lib";
+
+export const strokeColors: { [color in Color]: string } = {
+  brand: "stroke-tremor-brand-default",
+  slate: "stroke-slate-500",
+  gray: "stroke-gray-500",
+  zinc: "stroke-zinc-500",
+  neutral: "stroke-neutral-500",
+  stone: "stroke-stone-500",
+  red: "stroke-red-500",
+  orange: "stroke-orange-500",
+  amber: "stroke-amber-500",
+  yellow: "stroke-yellow-500",
+  lime: "stroke-lime-500",
+  green: "stroke-green-500",
+  emerald: "stroke-emerald-500",
+  teal: "stroke-teal-500",
+  cyan: "stroke-cyan-500",
+  sky: "stroke-sky-500",
+  blue: "stroke-blue-500",
+  indigo: "stroke-indigo-500",
+  violet: "stroke-violet-500",
+  purple: "stroke-purple-500",
+  fuchsia: "stroke-fuchsia-500",
+  pink: "stroke-pink-500",
+  rose: "stroke-rose-500",
+};
+
+export const fillColors: { [color in Color]: string } = {
+  brand: "fill-tremor-brand-default",
+  slate: "fill-slate-500",
+  gray: "fill-gray-500",
+  zinc: "fill-zinc-500",
+  neutral: "fill-neutral-500",
+  stone: "fill-stone-500",
+  red: "fill-red-500",
+  orange: "fill-orange-500",
+  amber: "fill-amber-500",
+  yellow: "fill-yellow-500",
+  lime: "fill-lime-500",
+  green: "fill-green-500",
+  emerald: "fill-emerald-500",
+  teal: "fill-teal-500",
+  cyan: "fill-cyan-500",
+  sky: "fill-sky-500",
+  blue: "fill-blue-500",
+  indigo: "fill-indigo-500",
+  violet: "fill-violet-500",
+  purple: "fill-purple-500",
+  fuchsia: "fill-fuchsia-500",
+  pink: "fill-pink-500",
+  rose: "fill-rose-500",
+};
+
+export const textColors: { [color in Color]: string } = {
+  brand: "text-tremor-brand-default",
+  slate: "text-slate-500",
+  gray: "text-gray-500",
+  zinc: "text-zinc-500",
+  neutral: "text-neutral-500",
+  stone: "text-stone-500",
+  red: "text-red-500",
+  orange: "text-orange-500",
+  amber: "text-amber-500",
+  yellow: "text-yellow-500",
+  lime: "text-lime-500",
+  green: "text-green-500",
+  emerald: "text-emerald-500",
+  teal: "text-teal-500",
+  cyan: "text-cyan-500",
+  sky: "text-sky-500",
+  blue: "text-blue-500",
+  indigo: "text-indigo-500",
+  violet: "text-violet-500",
+  purple: "text-purple-500",
+  fuchsia: "text-fuchsia-500",
+  pink: "text-pink-500",
+  rose: "text-rose-500",
+};

src/stories/spark-elements/SparkLineChart.stories.tsx

@@ -2,13 +2,13 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { SparkLineChart } from "components/spark-elements";
 import {
   simpleBaseChartData as data,
   longBaseChartData,
   simpleBaseChartDataWithNulls,
   singleAndMultipleData,
 } from "../chart-elements/helpers/testData";
-import { SparkLineChart } from "components/spark-elements";
 import ExampleCard from "./helpers/ExampleCard";
 import { smallVariantionDatas } from "./helpers/testData";
 

src/tests/spark-elements/SparkAreaChart.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import AreaChart from "components/spark-elements/SparkAreaChart/SparkAreaChart";
+import React from "react";
 
 describe("AreaChart", () => {
   beforeAll(() => {