Extract TrendLine from Lighthouse plugin (#532)

* Extract TrendLine from Lighthouse plugin

* Create TrendLine.stories.tsx

* Change lifecycle names

* Made story example smaller

* Review comment

* Update TrendLine.tsx

packages/core/package.json

@@ -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

@@ -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

@@ -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

@@ -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>
+);

packages/core/src/components/TrendLine/TrendLine.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 TrendLine from '.';
+
+describe('TrendLine', () => {
+  describe('when no data is present', () => {
+    it('renders null without throwing', () => {
+      const rendered = render(
+        wrapInThemedTestApp(<TrendLine 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(<TrendLine 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(<TrendLine 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(<TrendLine 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(<TrendLine data={[0.5, 0.4]} title="sparkline" />),
+      );
+      expect(rendered.getByTitle('sparkline')).toBeInTheDocument();
+    });
+  });
+});

packages/core/src/components/TrendLine/TrendLine.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 Trendline: 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 Trendline;

packages/core/src/components/TrendLine/index.ts

@@ -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

@@ -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';