paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 36 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
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] || []}
/>
plugins/lighthouse/src/components/CategoryTrendline/index.test.tsx
-78
View File
@@ -1,78 +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.
*/
/* 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 '.';
describe('CategoryTrendline', () => {
describe('when no data is present', () => {
it('renders null without throwing', () => {
const rendered = render(
wrapInThemedTestApp(<CategoryTrendline data={[]} title="sparkline" />),
);
expect(rendered.queryByTitle('sparkline')).not.toBeInTheDocument();
});
});
describe('when one datapoint is present', () => {
it('renders as a straight line', () => {
const rendered = render(
wrapInThemedTestApp(
<CategoryTrendline data={[0.5]} title="sparkline" />,
),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
});
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" />,
),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
});
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" />,
),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
});
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" />,
),
);
expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
});
});
});
plugins/lighthouse/src/components/CategoryTrendline/index.tsx
-41
View File
@@ -1,41 +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, { FC } from 'react';
import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
import { useTheme } from '@material-ui/core';
import { BackstageTheme } from '@backstage/theme';
function color(data: number[], theme: BackstageTheme): string | undefined {
const lastNum = data[data.length - 1];
if (!lastNum) return undefined;
if (lastNum >= 0.9) return theme.palette.status.ok;
if (lastNum >= 0.5) return theme.palette.status.warning;
return theme.palette.status.error;
}
const CategoryTrendline: FC<SparklinesProps & { title?: string }> = props => {
const theme = useTheme<BackstageTheme>();
if (!props.data) return null;
return (
<Sparklines width={120} height={30} min={0} max={1} {...props}>
{props.title && <title>{props.title}</title>}
<SparklinesLine color={color(props.data, theme)} />
</Sparklines>
);
};
export default CategoryTrendline;