Function DatesBarGraph

pages/usage.tsx:74–130

(props: {
  data: { date: string; value: number }[];
  ylabel: string;
})

const msToDay = 1000 * 60 * 60 * 24;

function DatesBarGraph(props: {
  data: { date: string; value: number }[];
  ylabel: string;
}) {
  if (!props.data || props.data.length == 0) return null;

  const chartData = props.data
    .map((d) => ({ date: Date.parse(d.date) / msToDay, value: d.value }))
    .sort((a, b) => a.date - b.date);

  const xRange = chartData[chartData.length - 1].date - chartData[0].date;
  const offset = Math.ceil(xRange * 0.1);

  const intToDate = (date: number) => formatDate(new Date(date * msToDay));

  return (
    <>
      <ResponsiveContainer width="99%" aspect={2}>
        <ComposedChart
          data={chartData}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 0,
          }}
          maxBarSize={50}
        >
          <XAxis
            dataKey="date"
            type="number"
            scale="time"
            domain={[`dataMin - ${offset}`, `dataMax + ${offset}`]}
            tickFormatter={intToDate}
          />
          <YAxis allowDecimals={false}>
            <Label
              value={props.ylabel}
              angle={-90}
              style={{ textAnchor: "middle" }}
              position="insideLeft"
              offset={-5}
            />
          </YAxis>
          <Tooltip
            labelFormatter={intToDate}
            formatter={(value) =>
              `${Math.round((value as number) * 100) / 100}`
            }
          />

          <Bar dataKey="value" fill="#8884d8" />
        </ComposedChart>
      </ResponsiveContainer>
    </>
  );
}