feat/analytics

.env

@@ -1 +1 @@
-VITE_SUBSQUID_URL="https://squid.subsquid.io/origin-squid/v/v5/graphql"
+VITE_SUBSQUID_URL="https://squid.subsquid.io/origin-squid/v/v6/graphql"

graphql.config.yml

@@ -0,0 +1 @@
+schema: https://squid.subsquid.io/origin-squid/v/v6/graphql

libs/analytics/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/analytics/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/analytics/README.md

@@ -0,0 +1,7 @@
+# analytics
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test analytics` to execute the unit tests via [Jest](https://jestjs.io).

libs/analytics/project.json

@@ -0,0 +1,16 @@
+{
+  "name": "analytics",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/analytics/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/analytics/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  }
+}

libs/analytics/src/TimeLineChart.stories.tsx

@@ -0,0 +1,68 @@
+import { faker } from '@faker-js/faker';
+import { Container } from '@mui/material';
+import { addDays } from 'date-fns';
+
+import { TimeLineChart } from './TimeLineChart';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+faker.seed(4548);
+
+function array<T>(n: number, initial: T, fn: (last: T) => T) {
+  let last: T = initial;
+  return new Array(n).fill(0).map((_, index) => {
+    if (index === 0) return last;
+    return (last = fn(last));
+  });
+}
+
+const ema = (p: number) => {
+  let last: number;
+  return (val: number) => {
+    return (last = (val + (last ?? val) * (p - 1)) / p);
+  };
+};
+
+const smooth = ema(7);
+
+const meta: Meta<typeof TimeLineChart> = {
+  component: TimeLineChart,
+  title: 'Analytics/TimeLineChart',
+  args: {
+    title: 'APY',
+    filter: {
+      options: ['1W', '1M', '6M', '1Y', 'All'],
+      value: '1W',
+      onChange: (value) => console.log(value),
+    },
+    data: {
+      datasets: [
+        {
+          type: 'line',
+          data: array(180, { x: new Date('2023-01-01'), y: 0.05 }, (last) => ({
+            x: addDays(last.x, 1),
+            y: faker.number.float({
+              min: last.y * 0.9,
+              max: last.y * 1.1,
+            }),
+          })).map((d) => ({
+            x: d.x,
+            y: smooth(d.y),
+          })),
+        },
+      ],
+    },
+    formatValues: (val) => {
+      return `${Math.floor(Number(val) * 10000) / 100}%`;
+    },
+  },
+  render: (args) => (
+    <Container>
+      <TimeLineChart {...args} />
+    </Container>
+  ),
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof TimeLineChart> = {};