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(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 => { - const classes = useStyles(props); - const theme = useTheme(); - 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 ( -
- -
- {isNaN(value) ? 'N/A' : `${asActual}${unit}`} -
-
- ); -}; 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('', () => { - it('renders without exploding', () => { - const { getByText } = render( - wrapInTestApp(), - ); - getByText('10%'); - }); - it('handles fractional prop', () => { - const { getByText } = render( - wrapInTestApp(), - ); - getByText('10%'); - }); - - it('handles max prop', () => { - const { getByText } = render( - wrapInTestApp(), - ); - getByText('1%'); - }); - - it('handles unit prop', () => { - const { getByText } = render( - wrapInTestApp(), - ); - 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 => { deepLink={deepLink} variant={variant} > - + ); 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 = () => ( -
- -
-); - -export const MediumProgress = () => ( -
- -
-); - -export const LowProgress = () => ( -
- -
-); 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 = () => ( - - - - - - - - - - - -); - -export const Subhead = () => ( - - - - - - - - - - - -); - -export const LinkInFooter = () => ( - - - - - - - - - - - -); 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('', () => { - it('renders without exploding', () => { - const { getByText } = render(wrapInTestApp()); - expect(getByText(/Tingle.*/)).toBeInTheDocument(); - }); - - it('renders progress and title', () => { - const { getByText } = render(wrapInTestApp()); - expect(getByText(/Tingle.*/)).toBeInTheDocument(); - expect(getByText(/12%.*/)).toBeInTheDocument(); - }); - - it('does not render deepLink', () => { - const { queryByText } = render( - wrapInTestApp(), - ); - expect(queryByText('View more')).not.toBeInTheDocument(); - }); - - it('handles invalid numbers', () => { - const badProps = { title: 'Tingle upgrade', progress: 'hejjo' }; - const { getByText } = render(wrapInTestApp()); - 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';