Skip to content

F
frontend
Commit aa4e71b9 authored by tom's avatar tom
Browse files
Options

renaming

parent ba8dff1a
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 61 deletions
ui/charts/EthereumDailyTxsChart.tsx
View file @ aa4e71b9
......@@ -3,14 +3,14 @@ import _debounce from 'lodash/debounce';
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 Overlay from 'ui/shared/graphs/Overlay';
import Tooltip from 'ui/shared/graphs/Tooltip';
import useBrushX from 'ui/shared/graphs/useBrushX';
import useTimeGraphController from 'ui/shared/graphs/useTimeGraphController';
import ChartArea from 'ui/shared/chart/ChartArea';
import ChartAxis from 'ui/shared/chart/ChartAxis';
import ChartGridLine from 'ui/shared/chart/ChartGridLine';
import ChartLine from 'ui/shared/chart/ChartLine';
import ChartOverlay from 'ui/shared/chart/ChartOverlay';
import ChartTooltip from 'ui/shared/chart/ChartTooltip';
import useBrushX from 'ui/shared/chart/useBrushX';
import useTimeChartController from 'ui/shared/chart/useTimeChartController';
interface Props {
margin?: {
......@@ -65,7 +65,7 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
const data = {
items: json.slice(range[0], range[1]).map((d) => ({ ...d, date: new Date(d.date) })),
};
const { yTickFormat, xScale, yScale } = useTimeGraphController({ data, width: innerWidth, height: innerHeight });
const { yTickFormat, xScale, yScale } = useTimeChartController({ data, width: innerWidth, height: innerHeight });
const lineColor = useToken('colors', 'blue.500');
......@@ -73,7 +73,7 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
<svg width={ width || '100%' } height={ height || '100%' } ref={ ref }>
<g transform={ `translate(${ margin?.left || 0 },${ margin?.top || 0 })` } opacity={ width ? 1 : 0 }>
{ /* BASE GRID LINE */ }
<GridLine
<ChartGridLine
type="horizontal"
scale={ yScale }
ticks={ 1 }
......@@ -82,7 +82,7 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
/>
{ /* GIRD LINES */ }
<GridLine
<ChartGridLine
type="vertical"
scale={ xScale }
ticks={ 5 }
......@@ -90,7 +90,7 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
transform={ `translate(0, ${ innerHeight })` }
disableAnimation
/>
<GridLine
<ChartGridLine
type="horizontal"
scale={ yScale }
ticks={ 5 }
......@@ -99,14 +99,14 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
/>
{ /* GRAPH */ }
<Line
<ChartLine
data={ data.items }
xScale={ xScale }
yScale={ yScale }
stroke={ lineColor }
animation="left"
/>
<Area
<ChartArea
data={ data.items }
color={ lineColor }
xScale={ xScale }
......@@ -114,15 +114,15 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
/>
{ /* AXISES */ }
<Axis
<ChartAxis
type="left"
scale={ yScale }
ticks={ 5 }
tickFormat={ yTickFormat }
disableAnimation
/>
<Overlay ref={ overlayRef } width={ innerWidth } height={ innerHeight }>
<Axis
<ChartOverlay ref={ overlayRef } width={ innerWidth } height={ innerHeight }>
<ChartAxis
type="bottom"
scale={ xScale }
transform={ `translate(0, ${ innerHeight })` }
......@@ -130,7 +130,7 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
anchorEl={ overlayRef.current }
disableAnimation
/>
<Tooltip
<ChartTooltip
anchorEl={ overlayRef.current }
width={ innerWidth }
height={ innerHeight }
......@@ -139,7 +139,7 @@ const EthereumDailyTxsChart = ({ margin }: Props) => {
yScale={ yScale }
data={ data }
/>
</Overlay>
</ChartOverlay>
</g>
</svg>
);
......
ui/shared/graphs/Area.tsx → ui/shared/chart/ChartArea.tsx
View file @ aa4e71b9
import * as d3 from 'd3';
import React from 'react';
import type { TimeGraphItem } from 'ui/shared/graphs/types';
import type { TimeChartItem } from 'ui/shared/chart/types';
interface Props extends React.SVGProps<SVGPathElement> {
xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
color: string;
data: Array<TimeGraphItem>;
data: Array<TimeChartItem>;
disableAnimation?: boolean;
}
const Area = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
const ChartArea = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
const ref = React.useRef(null);
React.useEffect(() => {
if (disableAnimation) {
......@@ -25,7 +25,7 @@ const Area = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props
}, [ disableAnimation ]);
const d = React.useMemo(() => {
const area = d3.area<TimeGraphItem>()
const area = d3.area<TimeChartItem>()
.x(({ date }) => xScale(date))
.y1(({ value }) => yScale(value))
.y0(() => yScale(yScale.domain()[0]));
......@@ -45,4 +45,4 @@ const Area = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props
);
};
export default React.memo(Area);
export default React.memo(ChartArea);
ui/shared/graphs/Axis.tsx → ui/shared/chart/ChartAxis.tsx
View file @ aa4e71b9
......@@ -11,7 +11,7 @@ interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
anchorEl?: SVGRectElement | null;
}
const Axis = ({ type, scale, ticks, tickFormat, disableAnimation, anchorEl, ...props }: Props) => {
const ChartAxis = ({ type, scale, ticks, tickFormat, disableAnimation, anchorEl, ...props }: Props) => {
const ref = React.useRef<SVGGElement>(null);
const textColorToken = useColorModeValue('blackAlpha.500', 'whiteAlpha.500');
......@@ -65,4 +65,4 @@ const Axis = ({ type, scale, ticks, tickFormat, disableAnimation, anchorEl, ...p
return <g ref={ ref } { ...props }/>;
};
export default React.memo(Axis);
export default React.memo(ChartAxis);
ui/shared/graphs/GridLine.tsx → ui/shared/chart/ChartGridLine.tsx
View file @ aa4e71b9
......@@ -10,7 +10,7 @@ interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
ticks: number;
}
const GridLine = ({ type, scale, ticks, size, disableAnimation, ...props }: Props) => {
const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }: Props) => {
const ref = React.useRef<SVGGElement>(null);
const strokeColorToken = useColorModeValue('blackAlpha.300', 'whiteAlpha.300');
......@@ -38,4 +38,4 @@ const GridLine = ({ type, scale, ticks, size, disableAnimation, ...props }: Prop
return <g ref={ ref } { ...props }/>;
};
export default React.memo(GridLine);
export default React.memo(ChartGridLine);
ui/shared/graphs/Line.tsx → ui/shared/chart/ChartLine.tsx
View file @ aa4e71b9
import * as d3 from 'd3';
import React from 'react';
import type { TimeGraphItem } from 'ui/shared/graphs/types';
import type { TimeChartItem } from 'ui/shared/chart/types';
interface Props extends React.SVGProps<SVGPathElement> {
xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
data: Array<TimeGraphItem>;
data: Array<TimeChartItem>;
animation: 'left' | 'fadeIn' | 'none';
}
const Line = ({ xScale, yScale, data, animation, ...props }: Props) => {
const ChartLine = ({ xScale, yScale, data, animation, ...props }: Props) => {
const ref = React.useRef<SVGPathElement>(null);
// Define different types of animation that we can use
......@@ -59,7 +59,7 @@ const Line = ({ xScale, yScale, data, animation, ...props }: Props) => {
}
}, [ xScale, yScale, animation ]);
const line = d3.line<TimeGraphItem>()
const line = d3.line<TimeChartItem>()
.x((d) => xScale(d.date))
.y((d) => yScale(d.value));
......@@ -75,4 +75,4 @@ const Line = ({ xScale, yScale, data, animation, ...props }: Props) => {
);
};
export default React.memo(Line);
export default React.memo(ChartLine);
ui/shared/graphs/Overlay.tsx → ui/shared/chart/ChartOverlay.tsx
View file @ aa4e71b9
......@@ -6,13 +6,13 @@ interface Props {
children: React.ReactNode;
}
const Overlay = ({ width, height, children }: Props, ref: React.LegacyRef<SVGRectElement>) => {
const ChartOverlay = ({ width, height, children }: Props, ref: React.LegacyRef<SVGRectElement>) => {
return (
<g className="TooltipOverlay">
<g className="ChartOverlay">
{ children }
<rect ref={ ref } width={ width } height={ height } opacity={ 0 }/>
</g>
);
};
export default React.forwardRef(Overlay);
export default React.forwardRef(ChartOverlay);
ui/shared/graphs/Tooltip.tsx → ui/shared/chart/ChartTooltip.tsx
View file @ aa4e71b9
......@@ -2,7 +2,7 @@ import { useToken, useColorModeValue } from '@chakra-ui/react';
import * as d3 from 'd3';
import React from 'react';
import type { TimeGraphItem } from 'ui/shared/graphs/types';
import type { TimeChartItem } from 'ui/shared/chart/types';
interface Props {
width?: number;
......@@ -14,14 +14,14 @@ interface Props {
right?: number;
};
data: {
items: Array<TimeGraphItem>;
items: Array<TimeChartItem>;
};
xScale: d3.ScaleTime<number, number>;
yScale: d3.ScaleLinear<number, number>;
anchorEl: SVGRectElement | null;
}
const Tooltip = ({ xScale, yScale, width, height, data, margin: _margin, anchorEl, ...props }: Props) => {
const ChartTooltip = ({ xScale, yScale, width, height, data, margin: _margin, anchorEl, ...props }: Props) => {
const margin = React.useMemo(() => ({
top: 0, bottom: 0, left: 0, right: 0,
..._margin,
......@@ -36,7 +36,7 @@ const Tooltip = ({ xScale, yScale, width, height, data, margin: _margin, anchorE
const drawLine = React.useCallback(
(x: number) => {
d3.select(ref.current)
.select('.Tooltip__line')
.select('.ChartTooltip__line')
.attr('x1', x)
.attr('x2', x)
.attr('y1', -margin.top)
......@@ -47,7 +47,7 @@ const Tooltip = ({ xScale, yScale, width, height, data, margin: _margin, anchorE
const drawContent = React.useCallback(
(x: number) => {
const tooltipContent = d3.select(ref.current).select('.Tooltip__content');
const tooltipContent = d3.select(ref.current).select('.ChartTooltip__content');
tooltipContent.attr('transform', (cur, i, nodes) => {
const OFFSET = 8;
......@@ -58,26 +58,26 @@ const Tooltip = ({ xScale, yScale, width, height, data, margin: _margin, anchorE
});
tooltipContent
.select('.Tooltip__contentTitle')
.select('.ChartTooltip__contentTitle')
.text(d3.timeFormat('%b %d, %Y')(xScale.invert(x)));
},
[ xScale, margin, width ],
);
const onChangePosition = React.useCallback((d: TimeGraphItem, isVisible: boolean) => {
d3.select('.Tooltip__value')
const onChangePosition = React.useCallback((d: TimeChartItem, isVisible: boolean) => {
d3.select('.ChartTooltip__value')
.text(isVisible ? d.value.toLocaleString() : '');
}, []);
const followPoints = React.useCallback((event: MouseEvent) => {
const [ x ] = d3.pointer(event, anchorEl);
const xDate = xScale.invert(x);
const bisectDate = d3.bisector<TimeGraphItem, unknown>((d) => d.date).left;
const bisectDate = d3.bisector<TimeChartItem, unknown>((d) => d.date).left;
let baseXPos = 0;
// draw circles on line
d3.select(ref.current)
.select('.Tooltip__linePoint')
.select('.ChartTooltip__linePoint')
.attr('transform', (cur, i) => {
const index = bisectDate(data.items, xDate, 1);
const d0 = data.items[index - 1];
......@@ -129,7 +129,7 @@ const Tooltip = ({ xScale, yScale, width, height, data, margin: _margin, anchorE
})
.on('mousemove.tooltip', (event: MouseEvent) => {
d3.select(ref.current)
.select('.Tooltip__linePoint')
.select('.ChartTooltip__linePoint')
.attr('opacity', 1);
followPoints(event);
});
......@@ -137,20 +137,20 @@ const Tooltip = ({ xScale, yScale, width, height, data, margin: _margin, anchorE
return (
<g ref={ ref } opacity={ 0 } { ...props }>
<line className="Tooltip__line" stroke={ lineColor }/>
<g className="Tooltip__content">
<rect className="Tooltip__contentBg" rx={ 8 } ry={ 8 } fill={ bgColor } width={ 125 } height={ 52 }/>
<text className="Tooltip__contentTitle" transform="translate(8,20)" fontSize="12px" fontWeight="bold" fill={ textColor }/>
<line className="ChartTooltip__line" stroke={ lineColor }/>
<g className="ChartTooltip__content">
<rect className="ChartTooltip__contentBg" rx={ 8 } ry={ 8 } fill={ bgColor } width={ 125 } height={ 52 }/>
<text className="ChartTooltip__contentTitle" transform="translate(8,20)" fontSize="12px" fontWeight="bold" fill={ textColor }/>
<text
transform="translate(8,40)"
className="Tooltip__value"
className="ChartTooltip__value"
fontSize="12px"
fill={ textColor }
/>
</g>
<circle className="Tooltip__linePoint" r={ 3 } opacity={ 0 } fill={ lineColor }/>
<circle className="ChartTooltip__linePoint" r={ 3 } opacity={ 0 } fill={ lineColor }/>
</g>
);
};
export default React.memo(Tooltip);
export default React.memo(ChartTooltip);
ui/shared/graphs/types.tsx → ui/shared/chart/types.tsx
View file @ aa4e71b9
export interface TimeGraphItem {
export interface TimeChartItem {
date: Date;
value: number;
}
ui/shared/graphs/useTimeGraphController.tsx → ui/shared/chart/useTimeChartController.tsx
View file @ aa4e71b9
import * as d3 from 'd3';
import { useMemo } from 'react';
import type { TimeGraphItem } from 'ui/shared/graphs/types';
import type { TimeChartItem } from 'ui/shared/chart/types';
interface Props {
data: {
items: Array<TimeGraphItem>;
items: Array<TimeChartItem>;
};
width: number;
height: number;
}
const useTimeGraphController = ({ data, width, height }: Props) => {
export default function useTimeChartController({ data, width, height }: Props) {
const xMin = useMemo(
() => d3.min(data.items, ({ date }) => date) || new Date(),
......@@ -60,6 +60,4 @@ const useTimeGraphController = ({ data, width, height }: Props) => {
yScale,
yScaleForAxis,
};
};
export default useTimeGraphController;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment