renaming

ui/charts/EthereumDailyTxsChart.tsx

@@ -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

 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

@@ -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

@@ -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

 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

@@ -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

@@ -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

-export interface TimeGraphItem {
+export interface TimeChartItem {
   date: Date;
   value: number;
 }

ui/shared/graphs/useTimeGraphController.tsx → ui/shared/chart/useTimeChartController.tsx

 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;
+}