Merge pull request #4699 from inrumi/trendlines-customcolor

Added optional color to TrendLines

.changeset/silly-dolphins-repair.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Added the color prop to TrendLine from the Sparklines props types to be able to have custom colors.

packages/core/src/components/TrendLine/TrendLine.stories.tsx

@@ -55,6 +55,37 @@ const data = [
     month: <TrendLine data={[1, 0.8, 0.8, 0.8]} title="Trend over time" />,
     year: <TrendLine data={[1, 0.6, 0.9, 0.7]} title="Trend over time" />,
   },
+  {
+    stock: 'E',
+    day: (
+      <TrendLine
+        data={[1, 0.3, 0.3, 0.6]}
+        color="blue"
+        title="Trend over time"
+      />
+    ),
+    week: (
+      <TrendLine
+        data={[0.1, 0.9, 0.1, 0.9]}
+        color="rgb(241,225,89)"
+        title="Trend over time"
+      />
+    ),
+    month: (
+      <TrendLine
+        data={[0.1, 0.3, 0.5, 0.7]}
+        color="#9a59b7"
+        title="Trend over time"
+      />
+    ),
+    year: (
+      <TrendLine
+        data={[0.1, 0.7, 0.4, 1]}
+        color="#000000"
+        title="Trend over time"
+      />
+    ),
+  },
 ];
 
 const columns = [
@@ -98,3 +129,13 @@ export const TrendingDown = () => (
     <TrendLine data={[0.8, 0.7, 0.5, 0.1]} title="Trend over time" />
   </div>
 );
+
+export const TrendingCustomColor = () => (
+  <div style={containerStyle}>
+    <TrendLine
+      data={[0.8, 0.7, 0.5, 0.1]}
+      color="purple"
+      title="Trend over time"
+    />
+  </div>
+);

packages/core/src/components/TrendLine/TrendLine.tsx

@@ -15,7 +15,12 @@
  */
 
 import React from 'react';
-import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
+import {
+  Sparklines,
+  SparklinesLine,
+  SparklinesLineProps,
+  SparklinesProps,
+} from 'react-sparklines';
 import { useTheme } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 
@@ -27,14 +32,17 @@ function color(data: number[], theme: BackstageTheme): string | undefined {
   return theme.palette.status.error;
 }
 
-export const TrendLine = (props: SparklinesProps & { title?: string }) => {
+export const TrendLine = (
+  props: SparklinesProps &
+    Pick<SparklinesLineProps, 'color'> & { title?: string },
+) => {
   const theme = useTheme<BackstageTheme>();
 
   if (!props.data) return null;
   return (
     <Sparklines width={120} height={30} min={0} max={1} {...props}>
       {props.title && <title>{props.title}</title>}
-      <SparklinesLine color={color(props.data, theme)} />
+      <SparklinesLine color={props.color ?? color(props.data, theme)} />
     </Sparklines>
   );
 };