paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 25 Packages Projects Releases Wiki Activity

Extract TrendLine from Lighthouse plugin (#532)

Browse Source 
* Extract TrendLine from Lighthouse plugin

* Create TrendLine.stories.tsx

* Change lifecycle names

* Made story example smaller

* Review comment

* Update TrendLine.tsx
This commit is contained in:
Stefan Ålund
2020-04-17 08:25:20 +02:00
committed by GitHub
parent 47dd73919b
commit f774c115dc
10 changed files with 78 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/package.json
+2
View File
@@ -39,6 +39,7 @@
"react-dom": "^16.12.0",
"react-helmet": "5.2.1",
"react-router-dom": "^5.1.2",
"react-sparklines": "^1.7.0",
"recompose": "0.30.0"
},
"devDependencies": {
@@ -49,6 +50,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/react-sparklines": "^1.7.0",
"react-router": "^5.1.2"
},
"peerDependencies": {
packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ import React from 'react';
import { AlphaLabel } from './Lifecycle';
export default {
title: 'Alpha Lifecycle',
title: 'Lifecycle - Alpha',
component: AlphaLabel,
};
packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ import React from 'react';
import { BetaLabel } from './Lifecycle';
export default {
title: 'Beta Lifecycle',
title: 'Lifecycle - Beta',
component: BetaLabel,
};
packages/core/src/components/TrendLine/TrendLine.stories.tsx
+43
View File
@@ -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 TrendLine from '.';
export default {
title: 'TrendLine',
component: TrendLine,
};
const width = 140;
export const Default = () => (
<div style={{ width }}>
<TrendLine data={[0.1, 0.7, 0.5, 0.8]} title="Trend over time" />
</div>
);
export const TrendingUp = () => (
<div style={{ width }}>
<TrendLine data={[0.1, 0.5, 0.9, 1.0]} title="Trend over time" />
</div>
);
export const TrendingDown = () => (
<div style={{ width }}>
<TrendLine data={[0.8, 0.7, 0.5, 0.1]} title="Trend over time" />
</div>
);
plugins/lighthouse/src/components/CategoryTrendline/index.test.tsx → packages/core/src/components/TrendLine/TrendLine.test.tsx
+7 -16
View File
@@ -15,18 +15,17 @@
*/
/* eslint-disable jest/no-disabled-tests */
import React from 'react';
import { render } from '@testing-library/react';
import { wrapInThemedTestApp } from '@backstage/test-utils';
import CategoryTrendline from '.';
import TrendLine from '.';
describe('CategoryTrendline', () => {
describe('TrendLine', () => {
describe('when no data is present', () => {
it('renders null without throwing', () => {
const rendered = render(
wrapInThemedTestApp(<CategoryTrendline data={[]} title="sparkline" />),
wrapInThemedTestApp(<TrendLine data={[]} title="sparkline" />),
);
expect(rendered.queryByTitle('sparkline')).not.toBeInTheDocument();
});
@@ -35,9 +34,7 @@ describe('CategoryTrendline', () => {
describe('when one datapoint is present', () => {
it('renders as a straight line', () => {
const rendered = render(
wrapInThemedTestApp(
<CategoryTrendline data={[0.5]} title="sparkline" />,
),
wrapInThemedTestApp(<TrendLine data={[0.5]} title="sparkline" />),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
@@ -46,9 +43,7 @@ describe('CategoryTrendline', () => {
describe.skip('when the data finishes above the success threshold', () => {
it('renders with the correct color', () => {
const rendered = render(
wrapInThemedTestApp(
<CategoryTrendline data={[0.5, 0.95]} title="sparkline" />,
),
wrapInThemedTestApp(<TrendLine data={[0.5, 0.95]} title="sparkline" />),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
@@ -57,9 +52,7 @@ describe('CategoryTrendline', () => {
describe.skip('when the data finishes within the the warning threshold', () => {
it('renders with the correct color', () => {
const rendered = render(
wrapInThemedTestApp(
<CategoryTrendline data={[0.5, 0.65]} title="sparkline" />,
),
wrapInThemedTestApp(<TrendLine data={[0.5, 0.65]} title="sparkline" />),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
@@ -68,9 +61,7 @@ describe('CategoryTrendline', () => {
describe.skip('when the data finishes within the the error threshold', () => {
it('renders with the correct color', () => {
const rendered = render(
wrapInThemedTestApp(
<CategoryTrendline data={[0.5, 0.4]} title="sparkline" />,
),
wrapInThemedTestApp(<TrendLine data={[0.5, 0.4]} title="sparkline" />),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
plugins/lighthouse/src/components/CategoryTrendline/index.tsx → packages/core/src/components/TrendLine/TrendLine.tsx
+3 -2
View File
@@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { FC } from 'react';
import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
import { useTheme } from '@material-ui/core';
@@ -26,7 +27,7 @@ function color(data: number[], theme: BackstageTheme): string | undefined {
return theme.palette.status.error;
}
const CategoryTrendline: FC<SparklinesProps & { title?: string }> = props => {
const Trendline: FC<SparklinesProps & { title?: string }> = props => {
const theme = useTheme<BackstageTheme>();
if (!props.data) return null;
@@ -38,4 +39,4 @@ const CategoryTrendline: FC<SparklinesProps & { title?: string }> = props => {
);
};
export default CategoryTrendline;
export default Trendline;
packages/core/src/components/TrendLine/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* 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.
*/
export { default } from './TrendLine';
packages/core/src/index.ts
+1
View File
@@ -31,6 +31,7 @@ export { default as Progress } from './components/Progress';
export { AlphaLabel, BetaLabel } from './components/Lifecycle';
export { default as SupportButton } from './components/SupportButton';
export { default as SortableTable } from './components/SortableTable';
export { default as TrendLine } from './components/TrendLine';
export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular';
export * from './components/Status';
export { default as WarningPanel } from './components/WarningPanel';
plugins/lighthouse/package.json
+1 -3
View File
@@ -13,8 +13,7 @@
"clean": "backstage-cli clean"
},
"dependencies": {
"react-markdown": "^4.3.1",
"react-sparklines": "^1.7.0"
"react-markdown": "^4.3.1"
},
"devDependencies": {
"@backstage/cli": "^0.1.1-alpha.4",
@@ -29,7 +28,6 @@
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react-sparklines": "^1.7.0",
"@types/testing-library__jest-dom": "5.0.2",
"jest-fetch-mock": "^3.0.3",
"react": "^16.13.1",
plugins/lighthouse/src/components/AuditList/AuditListTable.tsx
+2 -2
View File
@@ -24,6 +24,7 @@ import {
TableRow,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { TrendLine } from '@backstage/core';
import {
Audit,
@@ -32,7 +33,6 @@ import {
Website,
} from '../../api';
import { formatTime } from '../../utils';
import CategoryTrendline from '../CategoryTrendline';
import AuditStatusIcon from '../AuditStatusIcon';
export const CATEGORIES: LighthouseCategoryId[] = [
@@ -132,7 +132,7 @@ export const AuditListTable: FC<{ items: Website[] }> = ({ items }) => {
key={`${website.url}|${category}`}
className={classes.sparklinesCell}
>
<CategoryTrendline
<TrendLine
title={`trendline for ${CATEGORY_LABELS[category]} category of ${website.url}`}
data={categorySparklines[website.url][category] || []}
/>