From e2991542c9c8c78fc74145932d8a1c44b3c8c1b3 Mon Sep 17 00:00:00 2001
From: Johnn Mis <v-jmis@expediagroup.com>
Date: Thu, 25 Feb 2021 10:12:29 -0600
Subject: [PATCH 1/3] Picked color prop from Sparklines prop types

---
 .../TrendLine/TrendLine.stories.tsx           | 41 +++++++++++++++++++
 .../src/components/TrendLine/TrendLine.tsx    | 14 +++++--
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/TrendLine/TrendLine.stories.tsx b/packages/core/src/components/TrendLine/TrendLine.stories.tsx
index 5d2972095a..6a5f8564f7 100644
--- a/packages/core/src/components/TrendLine/TrendLine.stories.tsx
+++ b/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>
+);
diff --git a/packages/core/src/components/TrendLine/TrendLine.tsx b/packages/core/src/components/TrendLine/TrendLine.tsx
index 43b76e8c32..84024634d3 100644
--- a/packages/core/src/components/TrendLine/TrendLine.tsx
+++ b/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>
   );
 };

From 169f48deb4e76d66ed908a1efeb8468822d2df31 Mon Sep 17 00:00:00 2001
From: Johnn Mis <v-jmis@expediagroup.com>
Date: Thu, 25 Feb 2021 11:00:27 -0600
Subject: [PATCH 2/3] Added changeset file

---
 .changeset/silly-dolphins-repair.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silly-dolphins-repair.md

diff --git a/.changeset/silly-dolphins-repair.md b/.changeset/silly-dolphins-repair.md
new file mode 100644
index 0000000000..d09504297e
--- /dev/null
+++ b/.changeset/silly-dolphins-repair.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': minor
+---
+
+Added the color prop to TrendLine from the Sparklines props types to be able to have custom colors.

From df4aa4c8ed556e52e2b9b03b2140ec1fd07d2bb0 Mon Sep 17 00:00:00 2001
From: Johnn Mis <inrumi@gmail.com>
Date: Thu, 25 Feb 2021 12:18:24 -0600
Subject: [PATCH 3/3] Updating changeset to patch instead of minor

---
 .changeset/silly-dolphins-repair.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/silly-dolphins-repair.md b/.changeset/silly-dolphins-repair.md
index d09504297e..43c6aed230 100644
--- a/.changeset/silly-dolphins-repair.md
+++ b/.changeset/silly-dolphins-repair.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/core': minor
+'@backstage/core': patch
 ---
 
 Added the color prop to TrendLine from the Sparklines props types to be able to have custom colors.