asynqmon/ui/src/components/QueueMetricsChart.tsx

import { useTheme } from "@material-ui/core/styles";
import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";
import { Metrics } from "../api";

interface Props {
  data: Metrics[];

  // both startTime and endTime are in unix time (seconds)
  startTime: number;
  endTime: number;

  // (optional): Tick formatter function for YAxis
  yAxisTickFormatter?: (val: number) => string;
}

// interface that rechart understands.
interface ChartData {
  timestamp: number;
  [qname: string]: number;
}

function toChartData(metrics: Metrics[]): ChartData[] {
  if (metrics.length === 0) {
    return [];
  }
  let byTimestamp: { [key: number]: ChartData } = {};
  for (let x of metrics) {
    for (let [ts, val] of x.values) {
      if (!byTimestamp[ts]) {
        byTimestamp[ts] = { timestamp: ts };
      }
      const qname = x.metric.queue;
      if (qname) {
        byTimestamp[ts][qname] = parseFloat(val);
      }
    }
  }
  return Object.values(byTimestamp);
}

const lineColors = [
  "#2085ec",
  "#72b4eb",
  "#0a417a",
  "#8464a0",
  "#cea9bc",
  "#323232",
];

function QueueMetricsChart(props: Props) {
  const theme = useTheme();

  const data = toChartData(props.data);
  const keys = props.data.map((x) => x.metric.queue);
  return (
    <ResponsiveContainer height={260}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis
          minTickGap={10}
          dataKey="timestamp"
          domain={[props.startTime, props.endTime]}
          tickFormatter={(timestamp: number) =>
            new Date(timestamp * 1000).toLocaleTimeString()
          }
          type="number"
          scale="time"
          stroke={theme.palette.text.secondary}
        />
        <YAxis
          tickFormatter={props.yAxisTickFormatter}
          stroke={theme.palette.text.secondary}
        />
        <Tooltip
          labelFormatter={(timestamp: number) => {
            return new Date(timestamp * 1000).toLocaleTimeString();
          }}
        />
        <Legend />
        {keys.map((key, idx) => (
          <Line
            key={key}
            type="monotone"
            dataKey={key}
            stroke={lineColors[idx % lineColors.length]}
            dot={false}
          />
        ))}
      </LineChart>
    </ResponsiveContainer>
  );
}

QueueMetricsChart.defaultProps = {
  yAxisTickFormatter: (val: number) => val.toString(),
};

export default QueueMetricsChart;