From 2f25f54a4e9e113aa8389a455436a23b4cd61009 Mon Sep 17 00:00:00 2001
From: Rajiv Ranjan Singh <rajiv@Rajivs-MacBook-Air.local>
Date: Mon, 7 Sep 2020 12:08:31 +0530
Subject: [PATCH 1/5] renamed the components

---
 .../{CircleProgress.tsx => CircleGauge.tsx}          |  2 +-
 .../ProgressBars/{ProgressCard.tsx => GaugeCard.tsx} |  4 ++--
 .../ProgressBars/HorizontalProgress.stories.tsx      | 12 ++++++------
 .../{HorizontalProgress.tsx => LinearGauge.tsx}      |  4 ++--
 .../components/ProgressBars/ProgressCard.stories.tsx |  2 +-
 packages/core/src/components/ProgressBars/index.ts   |  6 +++---
 6 files changed, 15 insertions(+), 15 deletions(-)
 rename packages/core/src/components/ProgressBars/{CircleProgress.tsx => CircleGauge.tsx} (98%)
 rename packages/core/src/components/ProgressBars/{ProgressCard.tsx => GaugeCard.tsx} (93%)
 rename packages/core/src/components/ProgressBars/{HorizontalProgress.tsx => LinearGauge.tsx} (92%)

diff --git a/packages/core/src/components/ProgressBars/CircleProgress.tsx b/packages/core/src/components/ProgressBars/CircleGauge.tsx
similarity index 98%
rename from packages/core/src/components/ProgressBars/CircleProgress.tsx
rename to packages/core/src/components/ProgressBars/CircleGauge.tsx
index 79a451b14e..eae65bbf57 100644
--- a/packages/core/src/components/ProgressBars/CircleProgress.tsx
+++ b/packages/core/src/components/ProgressBars/CircleGauge.tsx
@@ -77,7 +77,7 @@ export function getProgressColor(
   return palette.status.ok;
 }
 
-export const CircleProgress: FC<Props> = props => {
+export const CircleGauge: FC<Props> = props => {
   const classes = useStyles(props);
   const theme = useTheme<BackstageTheme>();
   const { value, fractional, inverse, unit, max } = {
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.tsx b/packages/core/src/components/ProgressBars/GaugeCard.tsx
similarity index 93%
rename from packages/core/src/components/ProgressBars/ProgressCard.tsx
rename to packages/core/src/components/ProgressBars/GaugeCard.tsx
index eef6312600..c9c623be40 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.tsx
+++ b/packages/core/src/components/ProgressBars/GaugeCard.tsx
@@ -18,7 +18,7 @@ import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { InfoCard } from '../../layout/InfoCard';
 import { BottomLinkProps } from '../../layout/BottomLink';
-import { CircleProgress } from './CircleProgress';
+import { CircleProgress } from './CircleGauge';
 
 type Props = {
   title: string;
@@ -36,7 +36,7 @@ const useStyles = makeStyles({
   },
 });
 
-export const ProgressCard: FC<Props> = props => {
+export const GaugeCard: FC<Props> = props => {
   const classes = useStyles(props);
   const { title, subheader, progress, deepLink, variant } = props;
 
diff --git a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx b/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
index 6e8f4ed7fd..c4492986b6 100644
--- a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
+++ b/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
@@ -15,29 +15,29 @@
  */
 
 import React from 'react';
-import { HorizontalProgress } from './HorizontalProgress';
+import { LinearGauge } from './LinearGauge';
 
 const containerStyle = { width: 300 };
 
 export default {
-  title: 'HorizontalProgress',
-  component: HorizontalProgress,
+  title: 'LinearGauge',
+  component: LinearGauge,
 };
 
 export const Default = () => (
   <div style={containerStyle}>
-    <HorizontalProgress value={0.8} />
+    <LinearGauge value={0.8} />
   </div>
 );
 
 export const MediumProgress = () => (
   <div style={containerStyle}>
-    <HorizontalProgress value={0.5} />
+    <LinearGauge value={0.5} />
   </div>
 );
 
 export const LowProgress = () => (
   <div style={containerStyle}>
-    <HorizontalProgress value={0.2} />
+    <LinearGauge value={0.2} />
   </div>
 );
diff --git a/packages/core/src/components/ProgressBars/HorizontalProgress.tsx b/packages/core/src/components/ProgressBars/LinearGauge.tsx
similarity index 92%
rename from packages/core/src/components/ProgressBars/HorizontalProgress.tsx
rename to packages/core/src/components/ProgressBars/LinearGauge.tsx
index 72bf1f34c3..5ea15fcbe4 100644
--- a/packages/core/src/components/ProgressBars/HorizontalProgress.tsx
+++ b/packages/core/src/components/ProgressBars/LinearGauge.tsx
@@ -19,7 +19,7 @@ import { Tooltip, useTheme } from '@material-ui/core';
 // @ts-ignore
 import { Line } from 'rc-progress';
 import { BackstageTheme } from '@backstage/theme';
-import { getProgressColor } from './CircleProgress';
+import { getProgressColor } from './CircleGauge';
 
 type Props = {
   /**
@@ -28,7 +28,7 @@ type Props = {
   value: number;
 };
 
-export const HorizontalProgress: FC<Props> = ({ value }) => {
+export const LinearGauge: FC<Props> = ({ value }) => {
   const theme = useTheme<BackstageTheme>();
   if (isNaN(value)) {
     return null;
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx b/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
index 62c9f3be6e..d39f88ac10 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
+++ b/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { ProgressCard } from './ProgressCard';
+import { ProgressCard } from './GaugeCard';
 import { Grid } from '@material-ui/core';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
diff --git a/packages/core/src/components/ProgressBars/index.ts b/packages/core/src/components/ProgressBars/index.ts
index c74e283ae6..41583704f5 100644
--- a/packages/core/src/components/ProgressBars/index.ts
+++ b/packages/core/src/components/ProgressBars/index.ts
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export { ProgressCard } from './ProgressCard';
-export { CircleProgress } from './CircleProgress';
-export { HorizontalProgress } from './HorizontalProgress';
+export { GaugeCard } from './GaugeCard';
+export { CircleGauge } from './CircleGauge';
+export { LinearGauge } from './LinearGauge';

From ab1c7b8b0b99f01b65542398891cc542e3cb059f Mon Sep 17 00:00:00 2001
From: Rajiv Ranjan Singh <rajivperfect007@gmail.com>
Date: Tue, 15 Sep 2020 21:44:19 +0530
Subject: [PATCH 2/5] updated components import

---
 .../components/ProgressBars/CircleGauge.tsx   | 106 ------------------
 .../ProgressBars/CircleProgress.test.jsx      |  68 -----------
 .../src/components/ProgressBars/GaugeCard.tsx |   4 +-
 .../HorizontalProgress.stories.tsx            |  43 -------
 .../components/ProgressBars/LinearGauge.tsx   |   2 +-
 .../ProgressBars/ProgressCard.stories.tsx     |  80 -------------
 .../ProgressBars/ProgressCard.test.jsx        |  49 --------
 .../core/src/components/ProgressBars/index.ts |   2 +-
 8 files changed, 4 insertions(+), 350 deletions(-)
 delete mode 100644 packages/core/src/components/ProgressBars/CircleGauge.tsx
 delete mode 100644 packages/core/src/components/ProgressBars/CircleProgress.test.jsx
 delete mode 100644 packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
 delete mode 100644 packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
 delete mode 100644 packages/core/src/components/ProgressBars/ProgressCard.test.jsx

diff --git a/packages/core/src/components/ProgressBars/CircleGauge.tsx b/packages/core/src/components/ProgressBars/CircleGauge.tsx
deleted file mode 100644
index eae65bbf57..0000000000
--- a/packages/core/src/components/ProgressBars/CircleGauge.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { makeStyles, useTheme } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
-import { Circle } from 'rc-progress';
-import React, { FC } from 'react';
-
-const useStyles = makeStyles<BackstageTheme>(theme => ({
-  root: {
-    position: 'relative',
-    lineHeight: 0,
-  },
-  overlay: {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -60%)',
-    fontSize: 45,
-    fontWeight: 'bold',
-    color: theme.palette.textContrast,
-  },
-  circle: {
-    width: '80%',
-    transform: 'translate(10%, 0)',
-  },
-  colorUnknown: {},
-}));
-
-type Props = {
-  value: number;
-  fractional?: boolean;
-  inverse?: boolean;
-  unit?: string;
-  max?: number;
-};
-
-const defaultProps = {
-  fractional: true,
-  inverse: false,
-  unit: '%',
-  max: 100,
-};
-
-export function getProgressColor(
-  palette: BackstageTheme['palette'],
-  value: number,
-  inverse?: boolean,
-  max?: number,
-) {
-  if (isNaN(value)) {
-    return '#ddd';
-  }
-
-  const actualMax = max ? max : defaultProps.max;
-  const actualValue = inverse ? actualMax - value : value;
-
-  if (actualValue < actualMax / 3) {
-    return palette.status.error;
-  } else if (actualValue < actualMax * (2 / 3)) {
-    return palette.status.warning;
-  }
-
-  return palette.status.ok;
-}
-
-export const CircleGauge: FC<Props> = props => {
-  const classes = useStyles(props);
-  const theme = useTheme<BackstageTheme>();
-  const { value, fractional, inverse, unit, max } = {
-    ...defaultProps,
-    ...props,
-  };
-
-  const asPercentage = fractional ? Math.round(value * max) : value;
-  const asActual = max !== 100 ? Math.round(value) : asPercentage;
-
-  return (
-    <div className={classes.root}>
-      <Circle
-        strokeLinecap="butt"
-        percent={asPercentage}
-        strokeWidth={12}
-        trailWidth={12}
-        strokeColor={getProgressColor(theme.palette, asActual, inverse, max)}
-        className={classes.circle}
-      />
-      <div className={classes.overlay}>
-        {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx b/packages/core/src/components/ProgressBars/CircleProgress.test.jsx
deleted file mode 100644
index 9b9eae1bb8..0000000000
--- a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
-import { CircleProgress, getProgressColor } from './CircleProgress';
-
-describe('<CircleProgress />', () => {
-  it('renders without exploding', () => {
-    const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={10} fractional={false} />),
-    );
-    getByText('10%');
-  });
-  it('handles fractional prop', () => {
-    const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={0.1} fractional />),
-    );
-    getByText('10%');
-  });
-
-  it('handles max prop', () => {
-    const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={1} max={10} fractional={false} />),
-    );
-    getByText('1%');
-  });
-
-  it('handles unit prop', () => {
-    const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={10} fractional={false} unit="m" />),
-    );
-    getByText('10m');
-  });
-
-  const ok = '#111';
-  const warning = '#222';
-  const error = '#333';
-  const palette = { status: { ok, warning, error } };
-
-  it('colors the progress correctly', () => {
-    expect(getProgressColor(palette)).toBe('#ddd');
-    expect(getProgressColor(palette, 10)).toBe(error);
-    expect(getProgressColor(palette, 50)).toBe(warning);
-    expect(getProgressColor(palette, 90)).toBe(ok);
-  });
-
-  it('colors the inverse progress correctly', () => {
-    expect(getProgressColor(palette)).toBe('#ddd');
-    expect(getProgressColor(palette, 10, true)).toBe(ok);
-    expect(getProgressColor(palette, 50, true)).toBe(warning);
-    expect(getProgressColor(palette, 90, true)).toBe(error);
-  });
-});
diff --git a/packages/core/src/components/ProgressBars/GaugeCard.tsx b/packages/core/src/components/ProgressBars/GaugeCard.tsx
index c9c623be40..fc7055f705 100644
--- a/packages/core/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core/src/components/ProgressBars/GaugeCard.tsx
@@ -18,7 +18,7 @@ import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { InfoCard } from '../../layout/InfoCard';
 import { BottomLinkProps } from '../../layout/BottomLink';
-import { CircleProgress } from './CircleGauge';
+import { GaugeProgress } from './GaugeProgress';
 
 type Props = {
   title: string;
@@ -48,7 +48,7 @@ export const GaugeCard: FC<Props> = props => {
         deepLink={deepLink}
         variant={variant}
       >
-        <CircleProgress value={progress} />
+        <GaugeProgress value={progress} />
       </InfoCard>
     </div>
   );
diff --git a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx b/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
deleted file mode 100644
index c4492986b6..0000000000
--- a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { LinearGauge } from './LinearGauge';
-
-const containerStyle = { width: 300 };
-
-export default {
-  title: 'LinearGauge',
-  component: LinearGauge,
-};
-
-export const Default = () => (
-  <div style={containerStyle}>
-    <LinearGauge value={0.8} />
-  </div>
-);
-
-export const MediumProgress = () => (
-  <div style={containerStyle}>
-    <LinearGauge value={0.5} />
-  </div>
-);
-
-export const LowProgress = () => (
-  <div style={containerStyle}>
-    <LinearGauge value={0.2} />
-  </div>
-);
diff --git a/packages/core/src/components/ProgressBars/LinearGauge.tsx b/packages/core/src/components/ProgressBars/LinearGauge.tsx
index 5ea15fcbe4..73163b345f 100644
--- a/packages/core/src/components/ProgressBars/LinearGauge.tsx
+++ b/packages/core/src/components/ProgressBars/LinearGauge.tsx
@@ -19,7 +19,7 @@ import { Tooltip, useTheme } from '@material-ui/core';
 // @ts-ignore
 import { Line } from 'rc-progress';
 import { BackstageTheme } from '@backstage/theme';
-import { getProgressColor } from './CircleGauge';
+import { getProgressColor } from './GaugeProgress';
 
 type Props = {
   /**
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx b/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
deleted file mode 100644
index d39f88ac10..0000000000
--- a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { ProgressCard } from './GaugeCard';
-import { Grid } from '@material-ui/core';
-
-const linkInfo = { title: 'Go to XYZ Location', link: '#' };
-
-export default {
-  title: 'Progress Card',
-  component: ProgressCard,
-};
-
-export const Default = () => (
-  <Grid container spacing={2}>
-    <Grid item>
-      <ProgressCard title="Progress" progress={0.3} />
-    </Grid>
-    <Grid item>
-      <ProgressCard title="Progress" progress={0.57} />
-    </Grid>
-    <Grid item>
-      <ProgressCard title="Progress" progress={0.89} />
-    </Grid>
-  </Grid>
-);
-
-export const Subhead = () => (
-  <Grid container spacing={2}>
-    <Grid item>
-      <ProgressCard
-        title="Progress"
-        subheader="With a subheader"
-        progress={0.3}
-      />
-    </Grid>
-    <Grid item>
-      <ProgressCard
-        title="Progress"
-        subheader="With a subheader"
-        progress={0.57}
-      />
-    </Grid>
-    <Grid item>
-      <ProgressCard
-        title="Progress"
-        subheader="With a subheader"
-        progress={0.89}
-      />
-    </Grid>
-  </Grid>
-);
-
-export const LinkInFooter = () => (
-  <Grid container spacing={2}>
-    <Grid item>
-      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.3} />
-    </Grid>
-    <Grid item>
-      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.57} />
-    </Grid>
-    <Grid item>
-      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.89} />
-    </Grid>
-  </Grid>
-);
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx b/packages/core/src/components/ProgressBars/ProgressCard.test.jsx
deleted file mode 100644
index 8568077a92..0000000000
--- a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
-
-import { ProgressCard } from './ProgressCard';
-
-const minProps = { title: 'Tingle upgrade', progress: 0.12 };
-
-describe('<ProgressCard />', () => {
-  it('renders without exploding', () => {
-    const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
-    expect(getByText(/Tingle.*/)).toBeInTheDocument();
-  });
-
-  it('renders progress and title', () => {
-    const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
-    expect(getByText(/Tingle.*/)).toBeInTheDocument();
-    expect(getByText(/12%.*/)).toBeInTheDocument();
-  });
-
-  it('does not render deepLink', () => {
-    const { queryByText } = render(
-      wrapInTestApp(<ProgressCard {...minProps} />),
-    );
-    expect(queryByText('View more')).not.toBeInTheDocument();
-  });
-
-  it('handles invalid numbers', () => {
-    const badProps = { title: 'Tingle upgrade', progress: 'hejjo' };
-    const { getByText } = render(wrapInTestApp(<ProgressCard {...badProps} />));
-    expect(getByText(/N\/A.*/)).toBeInTheDocument();
-  });
-});
diff --git a/packages/core/src/components/ProgressBars/index.ts b/packages/core/src/components/ProgressBars/index.ts
index 41583704f5..c7131c8831 100644
--- a/packages/core/src/components/ProgressBars/index.ts
+++ b/packages/core/src/components/ProgressBars/index.ts
@@ -15,5 +15,5 @@
  */
 
 export { GaugeCard } from './GaugeCard';
-export { CircleGauge } from './CircleGauge';
+export { GaugeProgress } from './GaugeProgress';
 export { LinearGauge } from './LinearGauge';

From 47b17514e39cb5db7b20dfbaa8314be1ad8a1ff5 Mon Sep 17 00:00:00 2001
From: Rajiv Ranjan Singh <rajivperfect007@gmail.com>
Date: Tue, 15 Sep 2020 21:48:43 +0530
Subject: [PATCH 3/5] updated components import

---
 .../src/components/ProgressBars/.DS_Store     | Bin 0 -> 6148 bytes
 .../ProgressBars/GaugeCard.stories.tsx        |  76 +++++++++++++
 .../ProgressBars/GaugeCard.test.jsx           |  47 ++++++++
 .../ProgressBars/GaugeProgress.test.jsx       |  68 +++++++++++
 .../components/ProgressBars/GaugeProgress.tsx | 106 ++++++++++++++++++
 .../ProgressBars/LinearGauge.stories.tsx      |  43 +++++++
 6 files changed, 340 insertions(+)
 create mode 100644 packages/core/src/components/ProgressBars/.DS_Store
 create mode 100644 packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
 create mode 100644 packages/core/src/components/ProgressBars/GaugeCard.test.jsx
 create mode 100644 packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
 create mode 100644 packages/core/src/components/ProgressBars/GaugeProgress.tsx
 create mode 100644 packages/core/src/components/ProgressBars/LinearGauge.stories.tsx

diff --git a/packages/core/src/components/ProgressBars/.DS_Store b/packages/core/src/components/ProgressBars/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
new file mode 100644
index 0000000000..922bb63b2f
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { GaugeCard } from './GaugeCard';
+import { Grid } from '@material-ui/core';
+
+const linkInfo = { title: 'Go to XYZ Location', link: '#' };
+
+export default {
+  title: 'Progress Card',
+  component: GaugeCard,
+};
+
+export const Default = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <GaugeCard title="Progress" progress={0.3} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" progress={0.57} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" progress={0.89} />
+    </Grid>
+  </Grid>
+);
+
+export const Subhead = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <GaugeCard title="Progress" subheader="With a subheader" progress={0.3} />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.57}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.89}
+      />
+    </Grid>
+  </Grid>
+);
+
+export const LinkInFooter = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.3} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.57} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.89} />
+    </Grid>
+  </Grid>
+);
diff --git a/packages/core/src/components/ProgressBars/GaugeCard.test.jsx b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx
new file mode 100644
index 0000000000..27ef0bb188
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { wrapInTestApp } from '@backstage/test-utils';
+
+import { GaugeCard } from './GaugeCard';
+
+const minProps = { title: 'Tingle upgrade', progress: 0.12 };
+
+describe('<GaugeCard />', () => {
+  it('renders without exploding', () => {
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+    expect(getByText(/Tingle.*/)).toBeInTheDocument();
+  });
+
+  it('renders progress and title', () => {
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+    expect(getByText(/Tingle.*/)).toBeInTheDocument();
+    expect(getByText(/12%.*/)).toBeInTheDocument();
+  });
+
+  it('does not render deepLink', () => {
+    const { queryByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+    expect(queryByText('View more')).not.toBeInTheDocument();
+  });
+
+  it('handles invalid numbers', () => {
+    const badProps = { title: 'Tingle upgrade', progress: 'hejjo' };
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...badProps} />));
+    expect(getByText(/N\/A.*/)).toBeInTheDocument();
+  });
+});
diff --git a/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
new file mode 100644
index 0000000000..778abdf12c
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { wrapInTestApp } from '@backstage/test-utils';
+import { GaugeProgress, getProgressColor } from './GaugeProgress';
+
+describe('<GaugeProgress />', () => {
+  it('renders without exploding', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={10} fractional={false} />),
+    );
+    getByText('10%');
+  });
+  it('handles fractional prop', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={0.1} fractional />),
+    );
+    getByText('10%');
+  });
+
+  it('handles max prop', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={1} max={10} fractional={false} />),
+    );
+    getByText('1%');
+  });
+
+  it('handles unit prop', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={10} fractional={false} unit="m" />),
+    );
+    getByText('10m');
+  });
+
+  const ok = '#111';
+  const warning = '#222';
+  const error = '#333';
+  const palette = { status: { ok, warning, error } };
+
+  it('colors the progress correctly', () => {
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10)).toBe(error);
+    expect(getProgressColor(palette, 50)).toBe(warning);
+    expect(getProgressColor(palette, 90)).toBe(ok);
+  });
+
+  it('colors the inverse progress correctly', () => {
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10, true)).toBe(ok);
+    expect(getProgressColor(palette, 50, true)).toBe(warning);
+    expect(getProgressColor(palette, 90, true)).toBe(error);
+  });
+});
diff --git a/packages/core/src/components/ProgressBars/GaugeProgress.tsx b/packages/core/src/components/ProgressBars/GaugeProgress.tsx
new file mode 100644
index 0000000000..14776ed431
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeProgress.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeStyles, useTheme } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
+import { Circle } from 'rc-progress';
+import React, { FC } from 'react';
+
+const useStyles = makeStyles<BackstageTheme>(theme => ({
+  root: {
+    position: 'relative',
+    lineHeight: 0,
+  },
+  overlay: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -60%)',
+    fontSize: 45,
+    fontWeight: 'bold',
+    color: theme.palette.textContrast,
+  },
+  circle: {
+    width: '80%',
+    transform: 'translate(10%, 0)',
+  },
+  colorUnknown: {},
+}));
+
+type Props = {
+  value: number;
+  fractional?: boolean;
+  inverse?: boolean;
+  unit?: string;
+  max?: number;
+};
+
+const defaultProps = {
+  fractional: true,
+  inverse: false,
+  unit: '%',
+  max: 100,
+};
+
+export function getProgressColor(
+  palette: BackstageTheme['palette'],
+  value: number,
+  inverse?: boolean,
+  max?: number,
+) {
+  if (isNaN(value)) {
+    return '#ddd';
+  }
+
+  const actualMax = max ? max : defaultProps.max;
+  const actualValue = inverse ? actualMax - value : value;
+
+  if (actualValue < actualMax / 3) {
+    return palette.status.error;
+  } else if (actualValue < actualMax * (2 / 3)) {
+    return palette.status.warning;
+  }
+
+  return palette.status.ok;
+}
+
+export const GaugeProgress: FC<Props> = props => {
+  const classes = useStyles(props);
+  const theme = useTheme<BackstageTheme>();
+  const { value, fractional, inverse, unit, max } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const asPercentage = fractional ? Math.round(value * max) : value;
+  const asActual = max !== 100 ? Math.round(value) : asPercentage;
+
+  return (
+    <div className={classes.root}>
+      <Circle
+        strokeLinecap="butt"
+        percent={asPercentage}
+        strokeWidth={12}
+        trailWidth={12}
+        strokeColor={getProgressColor(theme.palette, asActual, inverse, max)}
+        className={classes.circle}
+      />
+      <div className={classes.overlay}>
+        {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
new file mode 100644
index 0000000000..c4492986b6
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { LinearGauge } from './LinearGauge';
+
+const containerStyle = { width: 300 };
+
+export default {
+  title: 'LinearGauge',
+  component: LinearGauge,
+};
+
+export const Default = () => (
+  <div style={containerStyle}>
+    <LinearGauge value={0.8} />
+  </div>
+);
+
+export const MediumProgress = () => (
+  <div style={containerStyle}>
+    <LinearGauge value={0.5} />
+  </div>
+);
+
+export const LowProgress = () => (
+  <div style={containerStyle}>
+    <LinearGauge value={0.2} />
+  </div>
+);

From a07f0e94faba631838101e5d7a6487e2f265e05d Mon Sep 17 00:00:00 2001
From: Rajiv Ranjan Singh <rajivperfect007@gmail.com>
Date: Tue, 15 Sep 2020 22:12:21 +0530
Subject: [PATCH 4/5] updated components import

---
 packages/core/src/layout/Page/Page.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx
index aec99967dc..7bd57738cf 100644
--- a/packages/core/src/layout/Page/Page.stories.tsx
+++ b/packages/core/src/layout/Page/Page.stories.tsx
@@ -30,7 +30,7 @@ import {
   Table,
   StatusOK,
   TableColumn,
-  ProgressCard,
+  GaugeCard,
   TrendLine,
 } from '../../components';
 import { Box, Typography, Link, Chip, Grid } from '@material-ui/core';
@@ -120,14 +120,14 @@ const DataGrid = () => (
         direction="row"
       >
         <Grid item xs={6}>
-          <ProgressCard
+          <GaugeCard
             title="GKE Usage Score"
             subheader="This should be above 75%"
             progress={0.87}
           />
         </Grid>
         <Grid item xs={6}>
-          <ProgressCard
+          <GaugeCard
             title="Deployment Score"
             subheader="This should be above 40%"
             progress={0.58}

From 28c01d1617924d7cb063c16c3f4b1ea2a30f3728 Mon Sep 17 00:00:00 2001
From: Rajiv Singh <rajivperfect007@gmail.com>
Date: Tue, 15 Sep 2020 22:14:31 +0530
Subject: [PATCH 5/5] Delete .DS_Store

---
 .../core/src/components/ProgressBars/.DS_Store   | Bin 6148 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/core/src/components/ProgressBars/.DS_Store

diff --git a/packages/core/src/components/ProgressBars/.DS_Store b/packages/core/src/components/ProgressBars/.DS_Store
deleted file mode 100644
index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I