add tooltip

ui/home/indicators/ChainIndicatorChart.tsx

-import { useToken } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ChainIndicatorChartData } from './types';
 
 import ChartArea from 'ui/shared/chart/ChartArea';
 import ChartLine from 'ui/shared/chart/ChartLine';
+import ChartOverlay from 'ui/shared/chart/ChartOverlay';
+import ChartTooltip from 'ui/shared/chart/ChartTooltip';
 import useChartSize from 'ui/shared/chart/useChartSize';
 import useTimeChartController from 'ui/shared/chart/useTimeChartController';
 import { BlueLineGradient } from 'ui/shared/chart/utils/gradients';
 
 interface Props {
   data: ChainIndicatorChartData;
+  caption?: string;
 }
 
+const COLOR = '#439AE2';
+
 const ChainIndicatorChart = ({ data }: Props) => {
   const ref = React.useRef<SVGSVGElement>(null);
+  const overlayRef = React.useRef<SVGRectElement>(null);
+
   const { width, height, innerWidth, innerHeight } = useChartSize(ref.current);
-  const color = useToken('colors', 'blue.300');
   const { xScale, yScale } = useTimeChartController({
-    data: [ { items: data, name: 'spline' } ],
+    data,
     width: innerWidth,
     height: innerHeight,
   });
 
   return (
-    <svg width={ width || '100%' } height={ height || '100%' } ref={ ref }>
+    <svg width={ width || '100%' } height={ height || '100%' } ref={ ref } cursor="pointer">
       <defs>
         <BlueLineGradient.defs/>
       </defs>
       <ChartArea
-        data={ data }
-        color={ color }
+        data={ data[0].items }
+        color={ COLOR }
         xScale={ xScale }
         yScale={ yScale }
       />
       <ChartLine
-        data={ data }
+        data={ data[0].items }
         xScale={ xScale }
         yScale={ yScale }
         stroke={ `url(#${ BlueLineGradient.id })` }
         animation="left"
         strokeWidth={ 3 }
       />
+      <ChartOverlay ref={ overlayRef } width={ innerWidth } height={ innerHeight }>
+        <ChartTooltip
+          anchorEl={ overlayRef.current }
+          width={ innerWidth }
+          height={ innerHeight }
+          xScale={ xScale }
+          yScale={ yScale }
+          data={ data }
+        />
+      </ChartOverlay>
     </svg>
   );
 };

ui/home/indicators/ChainIndicators.tsx

@@ -17,7 +17,7 @@ const ChainIndicators = () => {
   const listBgColor = useColorModeValue('gray.50', 'black');
 
   return (
-    <Flex p={ 8 } borderRadius="lg" boxShadow="lg" bgColor={ bgColor } columnGap={ 12 } w="100%" alignItems="flex-start">
+    <Flex p={ 8 } borderRadius="lg" boxShadow="lg" bgColor={ bgColor } columnGap={ 12 } w="100%" alignItems="stretch">
       <Flex flexGrow={ 1 } flexDir="column">
         <Flex alignItems="center">
           <Text fontWeight={ 500 } fontFamily="Poppins" fontSize="lg">{ indicator?.title }</Text>

ui/home/indicators/types.ts

 import type { ChartTransactionResponse, ChartMarketResponse } from 'types/api/charts';
 import type { QueryKeys } from 'types/client/queries';
-import type { TimeChartItem } from 'ui/shared/chart/types';
+import type { TimeChartDataItem } from 'ui/shared/chart/types';
 
 export type ChartsQueryKeys = QueryKeys.chartsTxs | QueryKeys.chartsMarket;
 
@@ -24,4 +24,4 @@ export type ChartsResponse<Q extends ChartsQueryKeys> =
       Q extends QueryKeys.chartsMarket ? ChartMarketResponse :
         never;
 
-export type ChainIndicatorChartData = Array<TimeChartItem>;
+export type ChainIndicatorChartData = Array<TimeChartDataItem>;

ui/home/indicators/useFetchChartData.tsx

+import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import React from 'react';
 
 import type { TChainIndicator, ChartsResponse, ChartsQueryKeys, ChainIndicatorChartData } from './types';
 
@@ -6,23 +8,21 @@ import useFetch from 'lib/hooks/useFetch';
 
 type NotUndefined<T> = T extends undefined ? never : T;
 
-export default function useFetchCharData<Q extends ChartsQueryKeys>(indicator: TChainIndicator<Q> | undefined) {
+export default function useFetchCharData<Q extends ChartsQueryKeys>(indicator: TChainIndicator<Q> | undefined): UseQueryResult<ChainIndicatorChartData> {
   const fetch = useFetch();
 
   type ResponseType = ChartsResponse<NotUndefined<typeof indicator>['api']['queryName']>;
 
-  return useQuery<unknown, unknown, ChainIndicatorChartData>(
+  const queryResult = useQuery<unknown, unknown, ResponseType>(
     [ indicator?.api.queryName ],
-    () => {
-      return fetch<ResponseType, unknown>(indicator?.api.path || '')
-        .then((result) => {
-          if ('status' in result) {
-            return Promise.reject(result);
-          }
-
-          return indicator?.api.dataFn(result);
-        });
-    },
+    () => fetch(indicator?.api.path || ''),
     { enabled: Boolean(indicator) },
   );
+
+  return React.useMemo(() => {
+    return {
+      ...queryResult,
+      data: queryResult.data && indicator ? indicator.api.dataFn(queryResult.data) : queryResult.data,
+    } as UseQueryResult<ChainIndicatorChartData>;
+  }, [ indicator, queryResult ]);
 }

ui/home/indicators/utils/indicators.tsx

@@ -8,6 +8,7 @@ import appConfig from 'configs/app/config';
 import globeIcon from 'icons/globe.svg';
 import txIcon from 'icons/transactions.svg';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
+const COLOR = '#439AE2';
 
 const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
   id: 'daily_txs',
@@ -18,9 +19,14 @@ const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
   api: {
     queryName: QueryKeys.chartsTxs,
     path: '/node-api/stats/charts/transactions',
-    dataFn: (response) => response.chart_data
+    dataFn: (response) => ([ {
+      items: response.chart_data
         .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
         .sort(sortByDateDesc),
+      name: 'Tx/day',
+      color: COLOR,
+      valueFormatter: (x) => x.toString(),
+    } ]),
   },
 };
 
@@ -34,9 +40,14 @@ const coinPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
   api: {
     queryName: QueryKeys.chartsMarket,
     path: '/node-api/stats/charts/market',
-    dataFn: (response) => response.chart_data
-      .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))
+    dataFn: (response) => ([ {
+      items: response.chart_data
+        .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) }))
         .sort(sortByDateDesc),
+      name: `${ appConfig.network.currency.symbol } price`,
+      color: COLOR,
+      valueFormatter: (x) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+    } ]),
   },
 };
 
@@ -50,9 +61,14 @@ const marketPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
   api: {
     queryName: QueryKeys.chartsMarket,
     path: '/node-api/stats/charts/market',
-    dataFn: (response) => response.chart_data
-      .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) }))
+    dataFn: (response) => ([ {
+      items: response.chart_data
+        .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))
         .sort(sortByDateDesc),
+      name: 'Market cap',
+      color: COLOR,
+      valueFormatter: (x) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 0 }),
+    } ]),
   },
 };
 

ui/shared/chart/ChartArea.tsx

+import { useColorModeValue, useToken } from '@chakra-ui/react';
 import * as d3 from 'd3';
 import React from 'react';
 
@@ -13,6 +14,8 @@ interface Props extends React.SVGProps<SVGPathElement> {
 
 const ChartArea = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
   const ref = React.useRef(null);
+  const gradientStopColor = useToken('colors', useColorModeValue('whiteAlpha.200', 'blackAlpha.100'));
+
   React.useEffect(() => {
     if (disableAnimation) {
       d3.select(ref.current).attr('opacity', 1);
@@ -39,8 +42,8 @@ const ChartArea = ({ xScale, yScale, color, data, disableAnimation, ...props }:
       { color && (
         <defs>
           <linearGradient id={ `gradient-${ color }` } x1="0%" x2="0%" y1="0%" y2="100%">
-            <stop offset="0%" stopColor={ color } stopOpacity={ 0.8 }/>
-            <stop offset="100%" stopColor={ color } stopOpacity={ 0.02 }/>
+            <stop offset="2%" stopColor={ color }/>
+            <stop offset="78%" stopColor={ gradientStopColor }/>
           </linearGradient>
         </defs>
       ) }

ui/shared/chart/ChartTooltip.tsx

@@ -14,15 +14,22 @@ interface Props {
   anchorEl: SVGRectElement | null;
 }
 
+const TEXT_LINE_HEIGHT = 12;
+const PADDING = 16;
+const LINE_SPACE = 10;
+
 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,
   }), [ _margin ]);
 
-  const lineColor = useToken('colors', 'red.500');
-  const textColor = useToken('colors', useColorModeValue('white', 'black'));
-  const bgColor = useToken('colors', useColorModeValue('gray.900', 'gray.400'));
+  const lineColor = useToken('colors', 'gray.400');
+  const titleColor = useToken('colors', 'blue.100');
+  const textColor = useToken('colors', 'white');
+  const markerBgColor = useToken('colors', useColorModeValue('black', 'white'));
+  const markerBorderColor = useToken('colors', useColorModeValue('white', 'black'));
+  const bgColor = useToken('colors', 'blackAlpha.900');
 
   const ref = React.useRef(null);
   const isPressed = React.useRef(false);
@@ -52,8 +59,8 @@ const ChartTooltip = ({ xScale, yScale, width, height, data, margin: _margin, an
       });
 
       tooltipContent
-        .select('.ChartTooltip__contentTitle')
-        .text(d3.timeFormat('%b %d, %Y')(xScale.invert(x)));
+        .select('.ChartTooltip__contentDate')
+        .text(d3.timeFormat('%e %b %Y')(xScale.invert(x)));
     },
     [ xScale, margin, width ],
   );
@@ -61,8 +68,8 @@ const ChartTooltip = ({ xScale, yScale, width, height, data, margin: _margin, an
   const updateDisplayedValue = React.useCallback((d: TimeChartItem, i: number) => {
     d3.selectAll('.ChartTooltip__value')
       .filter((td, tIndex) => tIndex === i)
-      .text(d.value.toLocaleString());
-  }, []);
+      .text(data[i].valueFormatter?.(d.value) || d.value.toLocaleString());
+  }, [ data ]);
 
   const drawCircles = React.useCallback((event: MouseEvent) => {
     const [ x ] = d3.pointer(event, anchorEl);
@@ -146,34 +153,72 @@ const ChartTooltip = ({ xScale, yScale, width, height, data, margin: _margin, an
 
   return (
     <g ref={ ref } opacity={ 0 } { ...props }>
-      <line className="ChartTooltip__line" stroke={ lineColor }/>
+      <line className="ChartTooltip__line" stroke={ lineColor } strokeDasharray="3"/>
       <g className="ChartTooltip__content">
-        <rect className="ChartTooltip__contentBg" rx={ 8 } ry={ 8 } fill={ bgColor } width={ 125 } height={ data.length * 22 + 34 }/>
+        <rect
+          className="ChartTooltip__contentBg"
+          rx={ 12 }
+          ry={ 12 }
+          fill={ bgColor }
+          width={ 200 }
+          height={ 2 * PADDING + (data.length + 1) * TEXT_LINE_HEIGHT + data.length * LINE_SPACE }
+        />
+        <g transform={ `translate(${ PADDING },${ PADDING })` }>
           <text
             className="ChartTooltip__contentTitle"
-          transform="translate(8,20)"
+            transform="translate(0,0)"
+            fontSize="12px"
+            fontWeight="500"
+            fill={ titleColor }
+            dominantBaseline="hanging"
+          >
+            Date
+          </text>
+          <text
+            className="ChartTooltip__contentDate"
+            transform="translate(80,0)"
             fontSize="12px"
-          fontWeight="bold"
+            fontWeight="500"
             fill={ textColor }
-          pointerEvents="none"
+            dominantBaseline="hanging"
           />
-        <g>
-          { data.map(({ name, color }, index) => (
-            <g key={ name } className="ChartTooltip__contentLine" transform={ `translate(12,${ 40 + index * 20 })` }>
-              <circle r={ 4 } fill={ color }/>
+        </g>
+        { data.map(({ name }, index) => (
+          <g
+            key={ name }
+            transform={ `translate(${ PADDING },${ PADDING + (index + 1) * (LINE_SPACE + TEXT_LINE_HEIGHT) })` }
+          >
             <text
-                transform="translate(10,4)"
+              className="ChartTooltip__contentTitle"
+              transform="translate(0,0)"
+              fontSize="12px"
+              fontWeight="500"
+              fill={ titleColor }
+              dominantBaseline="hanging"
+            >
+              { name }
+            </text>
+            <text
+              transform="translate(80,0)"
               className="ChartTooltip__value"
               fontSize="12px"
               fill={ textColor }
-                pointerEvents="none"
+              dominantBaseline="hanging"
             />
           </g>
         )) }
       </g>
-      </g>
-      { data.map(({ name, color }) => (
-        <circle key={ name } className="ChartTooltip__linePoint" r={ 4 } opacity={ 0 } fill={ color } stroke="#FFF" strokeWidth={ 1 }/>
+      { data.map(({ name }) => (
+        <circle
+          key={ name }
+          className="ChartTooltip__linePoint"
+          r={ 8 }
+          opacity={ 0 }
+          fill={ markerBgColor }
+          stroke={ markerBorderColor }
+          strokeWidth={ 4
+          }
+        />
       )) }
     </g>
   );

ui/shared/chart/types.tsx

@@ -19,6 +19,7 @@ export interface TimeChartDataItem {
   items: Array<TimeChartItem>;
   name: string;
   color?: string;
+  valueFormatter?: (value: number) => string;
 }
 
 export type TimeChartData = Array<TimeChartDataItem>;