Add deployment frequency chart component

pkg/app/web/package.json

@@ -34,6 +34,7 @@
     "@types/react-redux": "^7.1.9",
     "@types/react-router": "^5.1.7",
     "@types/react-router-dom": "^5.1.5",
+    "@types/recharts": "^1.8.18",
     "@types/redux-mock-store": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^3.3.0",
     "@typescript-eslint/parser": "^3.3.0",
@@ -89,6 +90,7 @@
     "react-redux": "^7.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "recharts": "^1.8.5",
     "redux": "^4.0.5",
     "yup": "^0.29.3"
   }

pkg/app/web/src/components/deployment-frequency-chart.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { DeploymentFrequencyChart } from "./deployment-frequency-chart";
+
+export default {
+  title: "insights/DeploymentFrequencyChart",
+  component: DeploymentFrequencyChart,
+};
+
+const randData = Array.from(new Array(20)).map((_, v) => ({
+  value: Math.floor(Math.random() * 20 + 10),
+  timestamp: new Date(`2020/10/${v + 5}`).getTime(),
+}));
+
+export const overview: React.FC = () => (
+  <DeploymentFrequencyChart data={randData} />
+);
+export const noData: React.FC = () => <DeploymentFrequencyChart data={[]} />;

pkg/app/web/src/components/deployment-frequency-chart.tsx

@@ -0,0 +1,82 @@
+import React, { FC, useCallback } from "react";
+import { Box, makeStyles, Paper, Typography } from "@material-ui/core";
+import { InsightDataPoint } from "pipe/pkg/app/web/model/insight_pb";
+import {
+  LineChart,
+  Line,
+  YAxis,
+  XAxis,
+  CartesianGrid,
+  Tooltip,
+} from "recharts";
+import dayjs from "dayjs";
+import { theme } from "../theme";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(3),
+    width: 680,
+  },
+  chart: {
+    flex: 1,
+  },
+}));
+
+interface Props {
+  data: InsightDataPoint.AsObject[];
+}
+
+const CHART_WIDTH = 600;
+const CHART_HEIGHT = 400;
+
+export const DeploymentFrequencyChart: FC<Props> = ({ data }) => {
+  const classes = useStyles();
+
+  const formatter = useCallback(
+    (time: number | string) => dayjs(time).format("MMM DD"),
+    []
+  );
+
+  return (
+    <Paper elevation={1} className={classes.root}>
+      <Typography variant="h6" component="div">
+        Deployment Frequency
+      </Typography>
+      {data.length === 0 ? (
+        <Box
+          width={CHART_WIDTH}
+          height={CHART_HEIGHT}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Typography variant="body1">No data</Typography>
+        </Box>
+      ) : (
+        <LineChart
+          data={data}
+          width={CHART_WIDTH}
+          height={CHART_HEIGHT}
+          margin={{
+            top: 48,
+            right: 24,
+            left: 8,
+            bottom: 8,
+          }}
+        >
+          <CartesianGrid vertical={false} />
+          <Line
+            dataKey="value"
+            stroke={theme.palette.primary.main}
+            strokeWidth={2}
+            isAnimationActive={false}
+            dot={{ fill: theme.palette.primary.main }}
+          />
+          <YAxis />
+          <XAxis dataKey="timestamp" tickFormatter={formatter} />
+          <Tooltip labelFormatter={formatter} />
+        </LineChart>
+      )}
+    </Paper>
+  );
+};