diff --git a/packages/core-components/src/components/ProgressBars/Gauge.test.tsx b/packages/core-components/src/components/ProgressBars/Gauge.test.tsx
index 066e1233a0..2d9e852e6c 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.test.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.test.tsx
@@ -56,16 +56,26 @@ describe('', () => {
};
it('colors the progress correctly', () => {
- expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd');
- expect(getProgressColor(palette, 10)).toBe(error);
- expect(getProgressColor(palette, 50)).toBe(warning);
- expect(getProgressColor(palette, 90)).toBe(ok);
+ expect(getProgressColor({ palette, value: 'Not a Number' as any })).toBe(
+ '#ddd',
+ );
+ expect(getProgressColor({ palette, value: 10 })).toBe(error);
+ expect(getProgressColor({ palette, value: 50 })).toBe(warning);
+ expect(getProgressColor({ palette, value: 90 })).toBe(ok);
});
it('colors the inverse progress correctly', () => {
- expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd');
- expect(getProgressColor(palette, 10, true)).toBe(ok);
- expect(getProgressColor(palette, 50, true)).toBe(warning);
- expect(getProgressColor(palette, 90, true)).toBe(error);
+ expect(
+ getProgressColor({
+ palette,
+ value: 'Not a Number' as any,
+ inverse: true,
+ }),
+ ).toBe('#ddd');
+ expect(getProgressColor({ palette, value: 10, inverse: true })).toBe(ok);
+ expect(getProgressColor({ palette, value: 50, inverse: true })).toBe(
+ warning,
+ );
+ expect(getProgressColor({ palette, value: 90, inverse: true })).toBe(error);
});
});
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 097fc9419d..2bcc0c3976 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -55,12 +55,16 @@ type Props = {
getColor?: GetColor;
};
-export type GetColor = (args: {
+type GetColorArgs = {
palette: BackstageTheme['palette'];
value: number;
inverse?: boolean;
max?: number;
-}) => string | BackstageTheme['palette']['error'];
+};
+
+export type GetColor = (
+ args: GetColorArgs,
+) => string | BackstageTheme['palette']['error'];
const defaultProps = {
fractional: true,
@@ -69,12 +73,12 @@ const defaultProps = {
max: 100,
};
-export function getProgressColor(
- palette: BackstageTheme['palette'],
- value: number,
- inverse?: boolean,
- max?: number,
-) {
+export const getProgressColor: GetColor = ({
+ palette,
+ value,
+ inverse,
+ max,
+}) => {
if (isNaN(value)) {
return '#ddd';
}
@@ -89,18 +93,11 @@ 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 { getColor = getProgressColor } = props;
const classes = useStyles(props);
const { palette } = useTheme();
const { value, fractional, inverse, unit, max } = {
diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx
index ac6097195d..e331ed1fa5 100644
--- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx
@@ -20,7 +20,7 @@ import Tooltip from '@material-ui/core/Tooltip';
// @ts-ignore
import { Line } from 'rc-progress';
import { BackstageTheme } from '@backstage/theme';
-import { defaultGetProgressColor, GetColor } from './Gauge';
+import { getProgressColor, GetColor } from './Gauge';
type Props = {
/**
@@ -31,7 +31,7 @@ type Props = {
};
export function LinearGauge(props: Props) {
- const { value, getColor = defaultGetProgressColor } = props;
+ const { value, getColor = getProgressColor } = props;
const { palette } = useTheme();
if (isNaN(value)) {
return null;