basic graph implementation

43a3a998 · tom · ede913d3 · 43a3a998 · 43a3a998 · 43a3a998
Commit 43a3a998 authored Oct 25, 2022 by tom
12 changed files
--- a/.gitattributes
+++ b/.gitattributes
 __snapshots__/** filter=lfs diff=lfs merge=lfs -text
+data/charts_eth_txs.json filter=lfs diff=lfs merge=lfs -text
--- a/data/charts_eth_txs.json
+++ b/data/charts_eth_txs.json
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
    "@tanstack/react-query-devtools": "^4.0.10",
    "@types/react-scroll": "^1.8.4",
    "bignumber.js": "^9.1.0",
+    "d3": "^7.6.1",
    "dayjs": "^1.11.5",
    "ethers": "^5.7.1",
    "framer-motion": "^6",
@@ -55,6 +56,7 @@
  },
  "devDependencies": {
    "@playwright/experimental-ct-react": "^1.26.1",
+    "@types/d3": "^7.4.0",
    "@types/node": "17.0.36",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",

--- a/pages/[network_type]/[network_sub_type]/graph.tsx
+++ b/pages/[network_type]/[network_sub_type]/graph.tsx
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import React from 'react';
+import Graph from 'ui/pages/Graph';
+const GraphPage: NextPage = () => {
+  return (
+    <>
+      <Head><title>Graph Page</title></Head>
+      <Graph/>
+    </>
+  );
+};
+export default GraphPage;
+export { getStaticPaths } from 'lib/next/getStaticPaths';
+export { getStaticProps } from 'lib/next/getStaticProps';
--- a/ui/charts/EthereumDailyTxsChart.tsx
+++ b/ui/charts/EthereumDailyTxsChart.tsx
+import React from 'react';
+import json from 'data/charts_eth_txs.json';
+import Area from 'ui/shared/graphs/Area';
+import Axis from 'ui/shared/graphs/Axis';
+import GridLine from 'ui/shared/graphs/GridLine';
+import Line from 'ui/shared/graphs/Line';
+import useController from 'ui/shared/graphs/useController';
+const dimensions = {
+  width: 600,
+  height: 300,
+  margin: { top: 30, right: 30, bottom: 30, left: 60 },
+};
+const data = {
+  name: 'VCIT',
+  color: '#5e4fa2',
+  items: json.map((d) => ({ ...d, date: new Date(d.date) })),
+};
+const EthereumDailyTxsChart = () => {
+  const { width, height, margin } = dimensions;
+  const svgWidth = width + margin.left + margin.right;
+  const svgHeight = height + margin.top + margin.bottom;
+  const controller = useController({ data, width, height });
+  const { yTickFormat, xScale, yScale } = controller;
+  return (
+    <svg width={ svgWidth } height={ svgHeight }>
+      <g transform={ `translate(${ margin.left },${ margin.top })` }>
+        { /* base grid line */ }
+        <GridLine
+          type="horizontal"
+          scale={ yScale }
+          ticks={ 1 }
+          size={ width }
+          disableAnimation
+        />
+        <GridLine
+          type="vertical"
+          scale={ xScale }
+          ticks={ 5 }
+          size={ height }
+          transform={ `translate(0, ${ height })` }
+        />
+        <GridLine
+          type="horizontal"
+          scale={ yScale }
+          ticks={ 5 }
+          size={ width }
+        />
+        <Line
+          data={ data.items }
+          xScale={ xScale }
+          yScale={ yScale }
+          color={ data.color }
+          animation="left"
+        />
+        <Area
+          data={ data.items }
+          color={ data.color }
+          xScale={ xScale }
+          yScale={ yScale }
+        />
+        <Axis
+          type="left"
+          scale={ yScale }
+          transform="translate(0, -10)"
+          ticks={ 5 }
+          tickFormat={ yTickFormat }
+        />
+        <Axis
+          type="bottom"
+          scale={ xScale }
+          transform={ `translate(10, ${ height - height / 6 })` }
+          ticks={ 5 }
+        />
+      </g>
+    </svg>
+  );
+};
+export default EthereumDailyTxsChart;
--- a/ui/pages/Graph.tsx
+++ b/ui/pages/Graph.tsx
+import React from 'react';
+import EthereumDailyTxsChart from 'ui/charts/EthereumDailyTxsChart';
+import Page from 'ui/shared/Page/Page';
+import PageTitle from 'ui/shared/Page/PageTitle';
+const Graph = () => {
+  return (
+    <Page>
+      <PageTitle text="Ethereum Daily Transactions Chart"/>
+      <EthereumDailyTxsChart/>
+    </Page>
+  );
+};
+export default Graph;
--- a/ui/shared/graphs/Area.tsx
+++ b/ui/shared/graphs/Area.tsx
+import * as d3 from 'd3';
+import React from 'react';
+interface DataItem {
+  date: Date;
+  value: number;
+}
+interface Props {
+  xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+  yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+  color: string;
+  data: Array<DataItem>;
+  disableAnimation?: boolean;
+}
+const Area = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (disableAnimation) {
+      d3.select(ref.current).attr('opacity', 1);
+      return;
+    }
+    d3.select(ref.current).transition()
+      .duration(750)
+      .ease(d3.easeBackIn)
+      .attr('opacity', 1);
+  }, [ disableAnimation ]);
+  const d = React.useMemo(() => {
+    const area = d3.area<DataItem>()
+      .x(({ date }) => xScale(date))
+      .y1(({ value }) => yScale(value))
+      .y0(() => yScale(yScale.domain()[0]));
+    return area(data) || undefined;
+  }, [ xScale, yScale, data ]);
+  return (
+    <>
+      <path ref={ ref } d={ d } fill={ `url(#gradient-${ color })` } opacity={ 0 } { ...props }/>
+      <defs>
+        <linearGradient id={ `gradient-${ color }` } x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor={ color } stopOpacity={ 0.5 }/>
+          <stop offset="100%" stopColor={ color } stopOpacity={ 0 }/>
+        </linearGradient>
+      </defs>
+    </>
+  );
+};
+export default React.memo(Area);
--- a/ui/shared/graphs/Axis.tsx
+++ b/ui/shared/graphs/Axis.tsx
+import * as d3 from 'd3';
+import React from 'react';
+interface Props {
+  type: 'left' | 'bottom';
+  scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+  disableAnimation?: boolean;
+  transform?: string;
+  ticks: number;
+  tickFormat?: (domainValue: d3.AxisDomain, index: number) => string;
+}
+const Axis = ({ type, scale, ticks, transform, tickFormat, disableAnimation, ...props }: Props) => {
+  const ref = React.useRef<SVGGElement>(null);
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const axisGenerator = type === 'left' ? d3.axisLeft : d3.axisBottom;
+    const axis = tickFormat ?
+      axisGenerator(scale).ticks(ticks).tickFormat(tickFormat) :
+      axisGenerator(scale).ticks(ticks);
+    const axisGroup = d3.select(ref.current);
+    if (disableAnimation) {
+      axisGroup.call(axis);
+    } else {
+      axisGroup.transition().duration(750).ease(d3.easeLinear).call(axis);
+    }
+    axisGroup.select('.domain').remove();
+    axisGroup.selectAll('line').remove();
+    axisGroup.selectAll('text')
+      .attr('opacity', 0.5)
+      .attr('color', 'white')
+      .attr('font-size', '0.75rem');
+  }, [ scale, ticks, tickFormat, disableAnimation, type ]);
+  return <g ref={ ref } transform={ transform } { ...props }/>;
+};
+export default React.memo(Axis);
--- a/ui/shared/graphs/GridLine.tsx
+++ b/ui/shared/graphs/GridLine.tsx
+import * as d3 from 'd3';
+import React from 'react';
+interface Props {
+  type: 'vertical' | 'horizontal';
+  scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+  disableAnimation?: boolean;
+  size: number;
+  transform?: string;
+  ticks: number;
+}
+const GridLine = ({ type, scale, ticks, size, transform, disableAnimation, ...props }: Props) => {
+  const ref = React.useRef<SVGGElement>(null);
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const axisGenerator = type === 'vertical' ? d3.axisBottom : d3.axisLeft;
+    const axis = axisGenerator(scale).ticks(ticks).tickSize(-size);
+    const gridGroup = d3.select(ref.current);
+    if (disableAnimation) {
+      gridGroup.call(axis);
+    } else {
+      gridGroup.transition().duration(750).ease(d3.easeLinear).call(axis);
+    }
+    gridGroup.select('.domain').remove();
+    gridGroup.selectAll('text').remove();
+    gridGroup.selectAll('line').attr('stroke', 'rgba(255, 255, 255, 0.1)');
+  }, [ scale, ticks, size, disableAnimation, type ]);
+  return <g ref={ ref } transform={ transform } { ...props }/>;
+};
+export default React.memo(GridLine);
--- a/ui/shared/graphs/Line.tsx
+++ b/ui/shared/graphs/Line.tsx
+import * as d3 from 'd3';
+import React from 'react';
+interface DataItem {
+  date: Date;
+  value: number;
+}
+interface Props {
+  xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+  yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
+  color: string;
+  data: Array<DataItem>;
+  animation: 'left' | 'fadeIn' | 'none';
+}
+const Line = ({ xScale, yScale, color, data, animation, ...props }: Props) => {
+  const ref = React.useRef<SVGPathElement>(null);
+  // Define different types of animation that we can use
+  const animateLeft = React.useCallback(() => {
+    const totalLength = ref.current?.getTotalLength() || 0;
+    d3.select(ref.current)
+      .attr('opacity', 1)
+      .attr('stroke-dasharray', `${ totalLength },${ totalLength }`)
+      .attr('stroke-dashoffset', totalLength)
+      .transition()
+      .duration(750)
+      .ease(d3.easeLinear)
+      .attr('stroke-dashoffset', 0);
+  }, []);
+  const animateFadeIn = React.useCallback(() => {
+    d3.select(ref.current)
+      .transition()
+      .duration(750)
+      .ease(d3.easeLinear)
+      .attr('opacity', 1);
+  }, []);
+  const noneAnimation = React.useCallback(() => {
+    d3.select(ref.current).attr('opacity', 1);
+  }, []);
+  React.useEffect(() => {
+    switch (animation) {
+      case 'left':
+        animateLeft();
+        break;
+      case 'fadeIn':
+        animateFadeIn();
+        break;
+      case 'none':
+      default:
+        noneAnimation();
+        break;
+    }
+  }, [ animateLeft, animateFadeIn, noneAnimation, animation ]);
+  // Recalculate line length if scale has changed
+  React.useEffect(() => {
+    if (animation === 'left') {
+      const totalLength = ref.current?.getTotalLength();
+      d3.select(ref.current).attr(
+        'stroke-dasharray',
+        `${ totalLength },${ totalLength }`,
+      );
+    }
+  }, [ xScale, yScale, animation ]);
+  const line = d3.line<DataItem>()
+    .x((d) => xScale(d.date))
+    .y((d) => yScale(d.value));
+  return (
+    <path
+      ref={ ref }
+      d={ line(data) || undefined }
+      stroke={ color }
+      strokeWidth={ 1 }
+      fill="none"
+      opacity={ 0 }
+      { ...props }
+    />
+  );
+};
+export default React.memo(Line);
--- a/ui/shared/graphs/useController.tsx
+++ b/ui/shared/graphs/useController.tsx
+import * as d3 from 'd3';
+import { useMemo } from 'react';
+interface DataItem {
+  date: Date;
+  value: number;
+}
+interface Props {
+  data: {
+    items: Array<DataItem>;
+  };
+  width: number;
+  height: number;
+}
+const useController = ({ data, width, height }: Props) => {
+  const xMin = useMemo(
+    () => d3.min(data.items, ({ date }) => date) || new Date(),
+    [ data ],
+  );
+  const xMax = useMemo(
+    () => d3.max(data.items, ({ date }) => date) || new Date(),
+    [ data ],
+  );
+  const xScale = useMemo(
+    () => d3.scaleTime().domain([ xMin, xMax ]).range([ 0, width ]),
+    [ xMin, xMax, width ],
+  );
+  const yMin = useMemo(
+    () => d3.min(data.items, ({ value }) => value) || 0,
+    [ data ],
+  );
+  const yMax = useMemo(
+    () => d3.max(data.items, ({ value }) => value) || 0,
+    [ data ],
+  );
+  const yScale = useMemo(() => {
+    const indention = (yMax - yMin) * 0.5;
+    return d3.scaleLinear()
+      .domain([ Math.max(yMin - indention, 0), yMax + indention ])
+      .range([ height, 0 ]);
+  }, [ height, yMin, yMax ]);
+  const yScaleForAxis = useMemo(
+    () => d3.scaleBand().domain([ String(yMin), String(yMax) ]).range([ height, 0 ]),
+    [ height, yMin, yMax ],
+  );
+  const yTickFormat = (d: d3.AxisDomain) => d.toLocaleString();
+  return {
+    yTickFormat,
+    xScale,
+    yScale,
+    yScaleForAxis,
+  };
+};
+export default useController;
--- a/yarn.lock
+++ b/yarn.lock