Add prop to override color selection in gauge components

Signed-off-by: James Turley <jamesturley@gocardless.com>

.changeset/grumpy-pugs-report.md

@@ -0,0 +1,23 @@
+---
+'@backstage/core-components': patch
+---
+
+Add new way to override color selection to progress bar/gauge components.
+
+`Gauge`, `LinearGauge` and `GaugeCard` all accept a `getColor` prop,
+which is a function of the type:
+
+```ts
+export type GetColor = (args: {
+  palette: Palette;
+  value: number;
+  inverse?: boolean;
+  max?: number;
+}) => string | PaletteColor;
+```
+
+Either return a standard Material UI palette color object or a CSS color
+string (e.g. "red", "#f02020"), and the gauge will be set to that color.
+
+If the prop is omitted, the default implementation is unchanged from previous
+versions.

packages/core-components/src/components/ProgressBars/Gauge.stories.tsx

@@ -53,3 +53,9 @@ export const AbsoluteProgress = () => (
     <Gauge value={89.2} fractional={false} unit="m/s" />
   </div>
 );
+
+export const StaticColor = () => (
+  <div style={containerStyle}>
+    <Gauge getColor={() => '#f0f'} value={0.5} />
+  </div>
+);

packages/core-components/src/components/ProgressBars/Gauge.tsx

@@ -52,8 +52,16 @@ type Props = {
   inverse?: boolean;
   unit?: string;
   max?: number;
+  getColor?: GetColor;
 };
 
+export type GetColor = (args: {
+  palette: BackstageTheme['palette'];
+  value: number;
+  inverse?: boolean;
+  max?: number;
+}) => string | BackstageTheme['palette']['error'];
+
 const defaultProps = {
   fractional: true,
   inverse: false,
@@ -83,10 +91,18 @@ export function getProgressColor(
   return palette.status.ok;
 }
 
+export const defaultGetProgressColor: GetColor = ({
+  palette,
+  value,
+  inverse,
+  max,
+}) => getProgressColor(palette, value, inverse, max);
+
 /** @public */
 export function Gauge(props: Props) {
+  const { getColor = defaultGetProgressColor } = props;
   const classes = useStyles(props);
-  const theme = useTheme<BackstageTheme>();
+  const { palette } = useTheme<BackstageTheme>();
   const { value, fractional, inverse, unit, max } = {
     ...defaultProps,
     ...props,
@@ -102,7 +118,7 @@ export function Gauge(props: Props) {
         percent={asPercentage}
         strokeWidth={12}
         trailWidth={12}
-        strokeColor={getProgressColor(theme.palette, asActual, inverse, max)}
+        strokeColor={getColor({ palette, value: asActual, inverse, max })}
         className={classes.circle}
       />
       <div className={classes.overlay}>

packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx

@@ -97,3 +97,24 @@ export const LinkInFooter = () => (
     </Grid>
   </Wrapper>
 );
+
+export const StaticColor = () => (
+  <Wrapper>
+    <Grid item>
+      <GaugeCard getColor={() => '#f00'} title="Red" progress={0.5} />
+    </Grid>
+    <Grid item>
+      <GaugeCard getColor={() => '#0f0'} title="Green" progress={0.5} />
+    </Grid>
+    <Grid item>
+      <GaugeCard getColor={() => '#00f'} title="Blue" progress={0.5} />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        getColor={({ palette }) => palette.error}
+        title="palette.error"
+        progress={0.5}
+      />
+    </Grid>
+  </Wrapper>
+);

packages/core-components/src/components/ProgressBars/GaugeCard.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
 import { BottomLinkProps } from '../../layout/BottomLink';
-import { Gauge } from './Gauge';
+import { Gauge, GetColor } from './Gauge';
 
 type Props = {
   title: string;
@@ -28,6 +28,7 @@ type Props = {
   progress: number;
   inverse?: boolean;
   deepLink?: BottomLinkProps;
+  getColor?: GetColor;
 };
 
 /** @public */
@@ -46,7 +47,14 @@ const useStyles = makeStyles(
 /** @public */
 export function GaugeCard(props: Props) {
   const classes = useStyles(props);
-  const { title, subheader, progress, inverse, deepLink, variant } = props;
+  const { title, subheader, progress, inverse, deepLink, variant, getColor } =
+    props;
+
+  const gaugeProps = {
+    inverse,
+    getColor,
+    value: progress,
+  };
 
   return (
     <div className={classes.root}>
@@ -56,7 +64,7 @@ export function GaugeCard(props: Props) {
         deepLink={deepLink}
         variant={variant}
       >
-        <Gauge value={progress} inverse={inverse} />
+        <Gauge {...gaugeProps} />
       </InfoCard>
     </div>
   );

packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx

@@ -41,3 +41,9 @@ export const LowProgress = () => (
     <LinearGauge value={0.2} />
   </div>
 );
+
+export const StaticColor = () => (
+  <div style={containerStyle}>
+    <LinearGauge getColor={() => '#f0f'} value={0.5} />
+  </div>
+);

packages/core-components/src/components/ProgressBars/LinearGauge.tsx

@@ -20,18 +20,19 @@ import Tooltip from '@material-ui/core/Tooltip';
 // @ts-ignore
 import { Line } from 'rc-progress';
 import { BackstageTheme } from '@backstage/theme';
-import { getProgressColor } from './Gauge';
+import { defaultGetProgressColor, GetColor } from './Gauge';
 
 type Props = {
   /**
    * Progress value between 0.0 - 1.0.
    */
   value: number;
+  getColor?: GetColor;
 };
 
 export function LinearGauge(props: Props) {
-  const { value } = props;
-  const theme = useTheme<BackstageTheme>();
+  const { value, getColor = defaultGetProgressColor } = props;
+  const { palette } = useTheme<BackstageTheme>();
   if (isNaN(value)) {
     return null;
   }
@@ -39,7 +40,12 @@ export function LinearGauge(props: Props) {
   if (percent > 100) {
     percent = 100;
   }
-  const strokeColor = getProgressColor(theme.palette, percent, false, 100);
+  const strokeColor = getColor({
+    palette,
+    value: percent,
+    inverse: false,
+    max: 100,
+  });
   return (
     <Tooltip title={`${percent}%`}>
       <span>