Move ChartWidget to ui/shared/chart.

types/api/stats.ts

@@ -24,8 +24,10 @@ export type Stats = {
 }
 
 export type Charts = {
-  'chart': Array<{
+  chart: Array<ChartsItem>;
+}
+
+export type ChartsItem ={
   date: string;
   value: string;
-  }>;
 }

ui/stats/ChartWidget.tsx → ui/shared/chart/ChartWidget.tsx

 import { Box, Grid, Heading, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Text, useColorModeValue, VisuallyHidden } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { Charts } from 'types/api/stats';
-import { QueryKeys } from 'types/client/queries';
-import type { StatsIntervalIds } from 'types/client/stats';
+import type { TimeChartItem } from './types';
 
 import repeatArrow from 'icons/repeat_arrow.svg';
 import dotsIcon from 'icons/vertical_dots.svg';
-import useFetch from 'lib/hooks/useFetch';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
 import ChartWidgetSkeleton from './ChartWidgetSkeleton';
-import { STATS_INTERVALS } from './constants';
 import FullscreenChartModal from './FullscreenChartModal';
 
 type Props = {
-  id: string;
+  items?: Array<TimeChartItem>;
   title: string;
   description: string;
-  interval: StatsIntervalIds;
+  isLoading: boolean;
 }
 
-function formatDate(date: Date) {
-  return date.toISOString().substring(0, 10);
-}
-
-const ChartWidget = ({ id, title, description, interval }: Props) => {
-  const fetch = useFetch();
-
-  const selectedInterval = STATS_INTERVALS[interval];
-
+const ChartWidget = ({ items, title, description, isLoading }: Props) => {
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
 
-  const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
-  const startDate = selectedInterval.start ? formatDate(selectedInterval.start) : undefined;
-
   const menuButtonColor = useColorModeValue('black', 'white');
   const borderColor = useColorModeValue('gray.200', 'gray.600');
 
-  const url = `/node-api/stats/charts?name=${ id }${ startDate ? `&from=${ startDate }&to=${ endDate }` : '' }`;
-
-  const { data, isLoading } = useQuery<unknown, unknown, Charts>(
-    [ QueryKeys.charts, id, startDate ],
-    async() => await fetch(url),
-  );
-
   const handleZoom = useCallback(() => {
     setIsZoomResetInitial(false);
   }, []);
@@ -75,12 +52,7 @@ const ChartWidget = ({ id, title, description, interval }: Props) => {
     return <ChartWidgetSkeleton/>;
   }
 
-  if (data) {
-    const items = data.chart
-      .map((item) => {
-        return { date: new Date(item.date), value: Number(item.value) };
-      });
-
+  if (items) {
     return (
       <>
         <Box

ui/stats/ChartWidgetGraph.tsx → ui/shared/chart/ChartWidgetGraph.tsx

@@ -78,7 +78,7 @@ const ChartWidgetGraph = ({ items, onZoom, isZoomResetInitial, title }: Props) =
           xScale={ xScale }
           yScale={ yScale }
           stroke={ color }
-          animation="left"
+          animation="none"
           strokeWidth={ 3 }
         />
 

ui/stats/FullscreenChartModal.tsx → ui/shared/chart/FullscreenChartModal.tsx

 import { Button, Flex, Heading, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
-import type { TimeChartItem } from '../shared/chart/types';
+import type { TimeChartItem } from './types';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
 

ui/stats/ChartWidgetContainer.tsx

+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Charts } from 'types/api/stats';
+import { QueryKeys } from 'types/client/queries';
+import type { StatsIntervalIds } from 'types/client/stats';
+
+import useFetch from 'lib/hooks/useFetch';
+
+import ChartWidget from '../shared/chart/ChartWidget';
+import { STATS_INTERVALS } from './constants';
+
+type Props = {
+  id: string;
+  title: string;
+  description: string;
+  interval: StatsIntervalIds;
+}
+
+function formatDate(date: Date) {
+  return date.toISOString().substring(0, 10);
+}
+
+const ChartWidgetContainer = ({ id, title, description, interval }: Props) => {
+  const fetch = useFetch();
+
+  const selectedInterval = STATS_INTERVALS[interval];
+
+  const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
+  const startDate = selectedInterval.start ? formatDate(selectedInterval.start) : undefined;
+
+  const url = `/node-api/stats/charts?name=${ id }${ startDate ? `&from=${ startDate }&to=${ endDate }` : '' }`;
+
+  const { data, isLoading } = useQuery<unknown, unknown, Charts>(
+    [ QueryKeys.charts, id, startDate ],
+    async() => await fetch(url),
+  );
+
+  const items = data?.chart
+    .map((item) => {
+      return { date: new Date(item.date), value: Number(item.value) };
+    });
+
+  return (
+    <ChartWidget
+      items={ items }
+      title={ title }
+      description={ description }
+      isLoading={ isLoading }
+    />
+  );
+};
+
+export default ChartWidgetContainer;

ui/stats/ChartsWidgetsList.tsx

@@ -6,7 +6,7 @@ import type { StatsIntervalIds, StatsSection } from 'types/client/stats';
 import { apos } from 'lib/html-entities';
 
 import EmptySearchResult from '../apps/EmptySearchResult';
-import ChartWidget from './ChartWidget';
+import ChartWidgetContainer from './ChartWidgetContainer';
 
 type Props = {
   charts: Array<StatsSection>;
@@ -46,7 +46,7 @@ const ChartsWidgetsList = ({ charts, interval }: Props) => {
                     <GridItem
                       key={ chart.id }
                     >
-                      <ChartWidget
+                      <ChartWidgetContainer
                         id={ chart.id }
                         title={ chart.title }
                         description={ chart.description }