chart fixes

ui/home/indicators/ChainIndicatorChart.tsx

+import { useToken } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ChainIndicatorChartData } from './types';
@@ -8,7 +9,6 @@ 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;
@@ -20,6 +20,7 @@ const CHART_MARGIN = { bottom: 0, left: 10, right: 10, top: 0 };
 const ChainIndicatorChart = ({ data }: Props) => {
   const ref = React.useRef<SVGSVGElement>(null);
   const overlayRef = React.useRef<SVGRectElement>(null);
+  const lineColor = useToken('colors', 'blue.500');
 
   const { width, height, innerWidth, innerHeight } = useChartSize(ref.current, CHART_MARGIN);
   const { xScale, yScale } = useTimeChartController({
@@ -30,13 +31,9 @@ const ChainIndicatorChart = ({ data }: Props) => {
 
   return (
     <svg width={ width || '100%' } height={ height || '100%' } ref={ ref } cursor="pointer">
-      <defs>
-        <BlueLineGradient.defs/>
-      </defs>
       <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` } opacity={ width ? 1 : 0 }>
         <ChartArea
           data={ data[0].items }
-          color={ data[0].color }
           xScale={ xScale }
           yScale={ yScale }
         />
@@ -44,7 +41,7 @@ const ChainIndicatorChart = ({ data }: Props) => {
           data={ data[0].items }
           xScale={ xScale }
           yScale={ yScale }
-          stroke={ `url(#${ BlueLineGradient.id })` }
+          stroke={ lineColor }
           animation="left"
           strokeWidth={ 3 }
         />

ui/home/indicators/ChainIndicatorChartContainer.tsx

-import { Flex } from '@chakra-ui/react';
+import { Flex, Spinner } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
 import type { ChainIndicatorChartData } from './types';
 
-import ChartLineLoader from 'ui/shared/chart/ChartLineLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import ChainIndicatorChart from './ChainIndicatorChart';
@@ -15,7 +14,7 @@ const ChainIndicatorChartContainer = ({ data, isError, isLoading }: Props) => {
 
   const content = (() => {
     if (isLoading) {
-      return <ChartLineLoader mt="auto"/>;
+      return <Spinner size="md" m="auto"/>;
     }
 
     if (isError) {
@@ -25,7 +24,7 @@ const ChainIndicatorChartContainer = ({ data, isError, isLoading }: Props) => {
     return <ChainIndicatorChart data={ data }/>;
   })();
 
-  return <Flex h={{ base: '150px', lg: '250px' }} alignItems="flex-start">{ content }</Flex>;
+  return <Flex h={{ base: '150px', lg: 'auto' }} minH="150px" alignItems="flex-start" flexGrow={ 1 }>{ content }</Flex>;
 };
 
 export default React.memo(ChainIndicatorChartContainer);

ui/home/indicators/utils/indicators.tsx

@@ -10,7 +10,6 @@ import txIcon from 'icons/transactions.svg';
 import { shortenNumberWithLetter } from 'lib/formatters';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
 import TokenLogo from 'ui/shared/TokenLogo';
-const CHART_COLOR = '#439AE2';
 
 const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
   id: 'daily_txs',
@@ -26,7 +25,6 @@ const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
         .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
         .sort(sortByDateDesc),
       name: 'Tx/day',
-      color: CHART_COLOR,
       valueFormatter: (x) => shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 2 }),
     } ]),
   },
@@ -46,7 +44,6 @@ const coinPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) }))
         .sort(sortByDateDesc),
       name: `${ appConfig.network.currency.symbol } price`,
-      color: CHART_COLOR,
       valueFormatter: (x) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
     } ]),
   },
@@ -67,7 +64,6 @@ const marketPriceIndicator: TChainIndicator<QueryKeys.chartsMarket> = {
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))
         .sort(sortByDateDesc),
       name: 'Market cap',
-      color: CHART_COLOR,
       valueFormatter: (x) => '$' + shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 0 }),
     } ]),
   },

ui/shared/chart/ChartArea.tsx

-import { useColorModeValue, useToken } from '@chakra-ui/react';
+import { useColorModeValue, useToken, useTheme } from '@chakra-ui/react';
+import { transparentize } from '@chakra-ui/theme-tools';
 import * as d3 from 'd3';
 import React from 'react';
 
@@ -14,7 +15,13 @@ interface Props extends React.SVGProps<SVGPathElement> {
 
 const ChartArea = ({ xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
   const ref = React.useRef(null);
+  const theme = useTheme();
+
   const gradientStopColor = useToken('colors', useColorModeValue('whiteAlpha.200', 'blackAlpha.100'));
+  const defaultGradient = {
+    startColor: useToken('colors', useColorModeValue('blue.100', 'blue.400')),
+    stopColor: useToken('colors', transparentize(useColorModeValue('blue.100', 'blue.400'), 0)(theme)),
+  };
 
   React.useEffect(() => {
     if (disableAnimation) {
@@ -38,12 +45,19 @@ const ChartArea = ({ xScale, yScale, color, data, disableAnimation, ...props }:
 
   return (
     <>
-      <path ref={ ref } d={ d } fill={ color ? `url(#gradient-${ color })` : 'none' } opacity={ 0 } { ...props }/>
-      { color && (
+      <path ref={ ref } d={ d } fill={ color ? `url(#gradient-${ color })` : 'url(#gradient-chart-area-default)' } opacity={ 0 } { ...props }/>
+      { color ? (
         <defs>
           <linearGradient id={ `gradient-${ color }` } x1="0%" x2="0%" y1="0%" y2="100%">
-            <stop offset="2%" stopColor={ color }/>
-            <stop offset="78%" stopColor={ gradientStopColor }/>
+            <stop offset="20%" stopColor={ color }/>
+            <stop offset="100%" stopColor={ gradientStopColor }/>
+          </linearGradient>
+        </defs>
+      ) : (
+        <defs>
+          <linearGradient id="gradient-chart-area-default" x1="0%" x2="0%" y1="0%" y2="100%">
+            <stop offset="0%" stopColor={ defaultGradient.startColor }/>
+            <stop offset="100%" stopColor={ defaultGradient.stopColor }/>
           </linearGradient>
         </defs>
       ) }

ui/shared/chart/utils/gradients.tsx

 import React from 'react';
 
 export const BlueLineGradient = {
-  id: 'blue-linear-gradient',
+  id: 'blue-line-gradient',
   defs: () => (
-    <linearGradient id="blue-linear-gradient">
+    <linearGradient id="blue-line-gradient">
       <stop offset="0%" stopColor="#4299E1"/>
       <stop offset="100%" stopColor="#00B5D8"/>
     </linearGradient>