Earnings Chart

packages/site/package.json

@@ -33,6 +33,8 @@
   "dependencies": {
     "@material-ui/core": "^4.12.4",
     "@metamask/providers": "^9.0.0",
+    "@nivo/bar": "^0.80.0",
+    "@nivo/core": "^0.80.0",
     "js-big-decimal": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/site/src/components/EarningsChart.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { address } from '../utils/tokens';
+import {
+  EarningsChart,
+  EarningsChartProps,
+  StampedEarning,
+} from './EarningsChart';
+
+const meta: Meta<typeof EarningsChart> = {
+  title: 'EarningsChart',
+  component: EarningsChart,
+  argTypes: {
+    timeScale: {
+      options: ['day', 'week', 'month'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type EC = StoryObj<EarningsChartProps>;
+
+export const NoData: EC = {
+  args: {
+    timeScale: 'day',
+    earnings: [],
+  },
+};
+
+export const Day: EC = {
+  args: {
+    timeScale: 'day',
+    earnings: randomEarnings(oneDayAgo()),
+  },
+};
+
+export const Week: EC = {
+  args: {
+    timeScale: 'week',
+    earnings: randomEarnings(oneWeekAgo()),
+  },
+};
+
+export const Month: EC = {
+  args: {
+    timeScale: 'month',
+    earnings: randomEarnings(oneMonthAgo()),
+  },
+};
+
+function oneMonthAgo(): Date {
+  return new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
+}
+
+function oneDayAgo(): Date {
+  return new Date(Date.now() - 24 * 60 * 60 * 1000);
+}
+
+function oneWeekAgo(): Date {
+  return new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
+}
+
+function randomEarnings(
+  since: Date,
+  tokens: address[] = ['0x0000000000000000000000000000000000000000'],
+): StampedEarning[] {
+  const earnings: StampedEarning[] = [];
+
+  for (let i = 0; i < 100; i++) {
+    const time = randSince(since);
+    const token = tokens[Math.floor(Math.random() * tokens.length)];
+    earnings.push({
+      time,
+      token,
+      amount: BigInt(Math.floor(Math.random() * 100)),
+    });
+  }
+  return earnings;
+}
+
+/**
+ * Generates a random date between the given date and now.
+ *
+ * @param then - Lower bound for the random date.
+ * @returns A date between the given date and now.
+ */
+function randSince(then: Date): Date {
+  const weight = Math.random();
+  const epoch = then.getTime() * weight + Date.now() * (1 - weight);
+  return new Date(epoch);
+}

packages/site/src/components/EarningsChart.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import * as bar from '@nivo/bar';
+import AxisProps from '@nivo/axes/dist/types';
+import { address, getToken } from '../utils/tokens';
+
+export type StampedEarning = {
+  time: Date;
+  token: address;
+  amount: bigint;
+};
+
+export type EarningsChartProps = {
+  earnings: StampedEarning[];
+  timeScale: 'day' | 'week' | 'month' | number; // number is in days
+};
+
+type Bucket = {
+  startTime: Date;
+  endTime: Date;
+  label: string;
+  earnings: { [x: address]: bigint };
+};
+
+function getBuckets(timeScale: EarningsChartProps['timeScale']): Bucket[] {
+  const now = new Date();
+  const buckets: Bucket[] = [];
+
+  if (timeScale === 'day') {
+    for (let i = 24; i > 0; i--) {
+      buckets.push({
+        startTime: new Date(now.getTime() - i * 60 * 60 * 1000),
+        endTime: new Date(now.getTime() - (i - 1) * 60 * 60 * 1000),
+        label: `${i - 1}`,
+        earnings: {},
+      });
+    }
+  }
+
+  if (timeScale === 'week') {
+    for (let i = 7; i > 0; i--) {
+      buckets.push({
+        startTime: new Date(now.getTime() - i * 24 * 60 * 60 * 1000),
+        endTime: new Date(now.getTime() - (i - 1) * 24 * 60 * 60 * 1000),
+        label: `${i - 1}`,
+        earnings: {},
+      });
+    }
+  }
+
+  if (timeScale === 'month') {
+    for (let i = 30; i > 0; i--) {
+      buckets.push({
+        startTime: new Date(now.getTime() - i * 24 * 60 * 60 * 1000),
+        endTime: new Date(now.getTime() - (i - 1) * 24 * 60 * 60 * 1000),
+        label: `${i - 1}`,
+        earnings: {},
+      });
+    }
+  }
+
+  return buckets;
+}
+
+function fillBuckets(buckets: Bucket[], earnings: StampedEarning[]): Bucket[] {
+  const tokens = getTokenList(earnings);
+
+  for (const bucket of buckets) {
+    for (const token of tokens) {
+      bucket.earnings[token] = 0n;
+    }
+  }
+
+  for (const earning of earnings) {
+    for (const bucket of buckets) {
+      if (earning.time > bucket.startTime && earning.time < bucket.endTime) {
+        bucket.earnings[earning.token] += earning.amount;
+      }
+    }
+  }
+
+  return buckets;
+}
+
+function getTokenList(earnings: StampedEarning[]): address[] {
+  const tokens = new Set<address>();
+  earnings.forEach((x) => tokens.add(x.token));
+  return Array.from(tokens);
+}
+
+/**
+ * Converts 'filled' time buckets to data for nivo bar chart.
+ *
+ * @param buckets - Filled time buckets.
+ * @returns Formatted data for nivo bar chart.
+ */
+function getChartData(buckets: Bucket[]): bar.BarDatum[] {
+  const data: bar.BarDatum[] = [];
+
+  for (const bucket of buckets) {
+    const datum: bar.BarDatum = {
+      id: bucket.label,
+    };
+    for (const token of Object.keys(bucket.earnings)) {
+      datum[token] = Number(bucket.earnings[token]);
+    }
+    data.push(datum);
+  }
+  return data;
+}
+
+export const EarningsChart: React.FC<EarningsChartProps> = (props) => {
+  const { earnings, timeScale } = props;
+  const timeBuckets = getBuckets(timeScale);
+  fillBuckets(timeBuckets, earnings);
+
+  const data: bar.BarDatum[] = getChartData(timeBuckets);
+
+  return (
+    <div style={{ height: 400, width: 600 }}>
+      <bar.ResponsiveBar
+        data={data}
+        keys={getTokenList(earnings)}
+        indexBy={'id'}
+        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
+        padding={0.3}
+        valueScale={{ type: 'linear' }}
+        indexScale={{ type: 'band', round: true }}
+        colors={{ scheme: 'nivo' }}
+        borderColor={{
+          from: 'color',
+          modifiers: [['darker', 1.6]],
+        }}
+        axisTop={null}
+        axisRight={null}
+        axisBottom={{
+          tickSize: 5,
+          tickPadding: 5,
+          tickRotation: 0,
+          legend: 'Time',
+          legendPosition: 'middle',
+          legendOffset: 32,
+        }}
+        axisLeft={{
+          tickSize: 5,
+          tickPadding: 5,
+          tickRotation: 0,
+          legend: 'Earnings',
+          legendPosition: 'middle',
+          legendOffset: -40,
+        }}
+        labelSkipWidth={12}
+        labelSkipHeight={12}
+        labelTextColor={{
+          from: 'color',
+          modifiers: [['darker', 1.6]],
+        }}
+        legends={[
+          {
+            dataFrom: 'keys',
+            anchor: 'bottom-right',
+            direction: 'column',
+            justify: false,
+            translateX: 120,
+            translateY: 0,
+            itemsSpacing: 2,
+            itemWidth: 100,
+            itemHeight: 20,
+            itemDirection: 'left-to-right',
+            itemOpacity: 0.85,
+            symbolSize: 20,
+            effects: [
+              {
+                on: 'hover',
+                style: {
+                  itemOpacity: 1,
+                },
+              },
+            ],
+          },
+        ]}
+        ariaLabel="Earnings"
+        barAriaLabel={function (e: any) {
+          return `${e.id}: ${e.formattedValue} in country: ${e.indexValue}`;
+        }}
+      />
+    </div>
+  );
+};