minor changes #146

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@loadable/component": "^5.15.3",
     "@nilfoundation/react-components": "^0.8.3",
-    "@nilfoundation/ui-kit": "^2.2.3",
+    "@nilfoundation/ui-kit": "^2.2.14",
     "@reduxjs/toolkit": "^1.8.5",
     "@sentry/react": "^7.21.1",
     "@sentry/tracing": "^7.21.1",

src/features/dashboard/components/Charts/ProofCostChart.tsx

@@ -4,41 +4,48 @@
  */
 
 import type { ReactElement } from 'react';
-import { useState } from 'react';
-import { CandlestickSeries, Chart } from '@nilfoundation/ui-kit';
-import type { CandlestickData, CandlestickSeriesPartialOptions } from 'lightweight-charts';
+import { useContext, useRef } from 'react';
+import { CandlestickSeries, Chart, HistogramSeries, Spinner } from '@nilfoundation/ui-kit';
+import type { ISeriesApi } from 'lightweight-charts';
 import { useGetStatementDashboardData } from '../../hooks/useGetStatementDashboardData';
+import { DashboardContext } from '../Dashboard/DashboardContext';
+import { seriesDefaultOptions, volumeSeriesOptions } from './chartsCommonSettings';
 
 /**
  * Proof cost chart.
  *
  * @returns React component.
  */
 export const ProofCostChart = (): ReactElement => {
-  const [legendData, setLegendData] = useState<CandlestickData | null>(null);
+  const { displayVolume, dateRange } = useContext(DashboardContext);
   const {
     chartData: { candlestickChartData, volumesData },
     loadingData: isLoadingChartData,
-  } = useGetStatementDashboardData(props.displayVolumes, props.dataRange);
+  } = useGetStatementDashboardData(displayVolume, dateRange);
+  const series = useRef<ISeriesApi<'Candlestick'> | null>(null);
 
   return (
-    <Chart>
-      <CandlestickSeries
-        data={candlestickChartData}
-        reactive
-        options={seriesDefaultOptions}
-      />
-    </Chart>
+    <div>
+      {isLoadingChartData && candlestickChartData.length === 0 ? (
+        <Spinner animation />
+      ) : (
+        <Chart>
+          <CandlestickSeries
+            data={candlestickChartData}
+            reactive
+            options={seriesDefaultOptions}
+            onInit={api => {
+              series.current = api;
+            }}
+          />
+          {displayVolume && volumesData?.length && (
+            <HistogramSeries
+              data={volumesData}
+              options={volumeSeriesOptions}
+            />
+          )}
+        </Chart>
+      )}
+    </div>
   );
 };
-
-/**
- * Series default options.
- */
-const seriesDefaultOptions: CandlestickSeriesPartialOptions = {
-  priceFormat: {
-    type: 'price',
-    precision: 4,
-    minMove: 0.0001,
-  },
-};

src/features/dashboard/components/Charts/ProofGenTimeChart.tsx

@@ -4,44 +4,43 @@
  */
 
 import type { ReactElement } from 'react';
-import { useMemo } from 'react';
+import { useContext } from 'react';
+import { Chart, HistogramSeries, LineSeries, Spinner } from '@nilfoundation/ui-kit';
 import { useGetStatementDashboardData } from '@/hooks';
-import colors from '@/styles/export.module.scss';
-import { ChartTemplate } from '../ChartTemplate';
-import type { ChartBaseProps } from '../ChartTemplate';
-
-/**
- * Props.
- */
-type ProofTimeGenChartProps = ChartBaseProps;
+import { seriesDefaultOptions, volumeSeriesOptions } from './chartsCommonSettings';
+import { DashboardContext } from '../Dashboard/DashboardContext';
 
 /**
  * Proof cost chart.
  *
- * @param {ProofTimeGenChartProps} props Props.
  * @returns React component.
  */
-export const ProofTimeGenChart = (props: ProofTimeGenChartProps): ReactElement => {
-  const seriesOptions = useMemo(
-    () => ({
-      color: colors.infoColor,
-    }),
-    [],
-  );
+export const ProofTimeGenChart = (): ReactElement => {
+  const { displayVolume, dateRange } = useContext(DashboardContext);
   const {
     chartData: { proofGenTimeData, volumesData },
     loadingData: isLoadingChartData,
-  } = useGetStatementDashboardData(props.displayVolumes, props.dataRange);
+  } = useGetStatementDashboardData(displayVolume, dateRange);
 
   return (
-    <ChartTemplate
-      loadingData={isLoadingChartData}
-      chartName="Proof Generation Time, min"
-      seriesData={proofGenTimeData}
-      seriesType="Line"
-      seriesOptions={seriesOptions}
-      volumesData={volumesData}
-      {...props}
-    />
+    <div>
+      {isLoadingChartData && proofGenTimeData.length === 0 ? (
+        <Spinner animation />
+      ) : (
+        <Chart>
+          <LineSeries
+            data={proofGenTimeData}
+            reactive
+            options={seriesDefaultOptions}
+          />
+          {displayVolume && volumesData?.length && (
+            <HistogramSeries
+              data={volumesData}
+              options={volumeSeriesOptions}
+            />
+          )}
+        </Chart>
+      )}
+    </div>
   );
 };

src/features/dashboard/components/Charts/chartsCommonSettings.ts

@@ -0,0 +1,39 @@
+/**
+ * @file React hook.
+ * @copyright Yury Korotovskikh <[email protected]>
+ */
+
+import type {
+  CandlestickSeriesPartialOptions,
+  DeepPartial,
+  PriceScaleOptions,
+} from 'lightweight-charts';
+
+/**
+ * Series default options.
+ */
+export const seriesDefaultOptions: CandlestickSeriesPartialOptions = {
+  priceFormat: {
+    type: 'price',
+    precision: 4,
+    minMove: 0.0001,
+  },
+};
+
+/**
+ * Volume series options.
+ */
+export const volumeSeriesOptions: CandlestickSeriesPartialOptions = {
+  ...seriesDefaultOptions,
+  priceScaleId: 'right',
+};
+
+/**
+ * Volume series price scale options.
+ */
+export const volumeSPriceScaleOPtions: DeepPartial<PriceScaleOptions> = {
+  scaleMargins: {
+    top: 0.5,
+    bottom: 0,
+  },
+};

src/features/dashboard/components/Charts/styles.ts

@@ -0,0 +1,37 @@
+/**
+ * @file Styles.
+ */
+
+import { SPACE } from '@nilfoundation/ui-kit';
+import type { StyleObject } from 'styletron-react';
+
+const chartContainer: StyleObject = {
+  flexGrow: 1,
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+};
+
+const wrapper: StyleObject = {
+  flexGrow: 1,
+  width: '100%',
+};
+
+const legend: StyleObject = {
+  marginBottom: SPACE[8],
+  height: '48px',
+  flexShrink: 0,
+};
+
+const timeIntervalToggle: StyleObject = {
+  marginBottom: SPACE[16],
+};
+
+export const styles = {
+  legend,
+  timeIntervalToggle,
+  chartContainer,
+  wrapper,
+};

src/features/dashboard/components/Dashboard/Dashboard.tsx

@@ -7,17 +7,17 @@ import type { ReactElement } from 'react';
 import { useState } from 'react';
 import { match } from 'ts-pattern';
 import { Card } from '@nilfoundation/ui-kit';
-import { ChartType, DateUnit } from '@/enums';
+import { ChartType } from '@/enums';
 import { selectCurrentStatement, useAppSelector } from '@/redux';
 import { useLocalStorage } from '@/hooks';
-import { StatementInfoPanel } from '@/features/dashboard';
-import { useWindowDimensions } from '@/features/shared';
 import { ChartTypeSelect } from './ChartTypeSelect';
 import { DataRangeSelect } from './DataRangeSelect';
 import { DashboardToolbar } from './DashboardToolbar';
 import { CopyToClipboardNavItem } from './CopyToClipboardNavItem';
 import { getCardOverrides } from './overrides';
 import { ProofCostChart } from '../Charts/ProofCostChart';
+import { ProofTimeGenChart } from '../Charts/ProofGenTimeChart';
+import { DateUnit } from '../../models/DateUnit';
 
 /**
  * Statement dashboard.
@@ -68,11 +68,7 @@ const StatementDashboard = (): ReactElement => {
             />
           </DashboardToolbar>
         </div>
-        <ChartFactory
-          chartType={chartType}
-          dataRange={dataRange}
-          displayVolumes={displayVolumes}
-        />
+        <ChartFactory chartType={chartType} />
       </div>
     </Card>
   );
@@ -84,10 +80,10 @@ const StatementDashboard = (): ReactElement => {
  * @param {{chartType: ChartType}} props Props.
  * @returns Chart.
  */
-const ChartFactory = ({ chartType, ...rest }: { chartType: ChartType }) => {
+const ChartFactory = ({ chartType }: { chartType: ChartType }) => {
   return match(chartType)
     .with(ChartType.proofCostChart, () => <ProofCostChart />)
-    .with(ChartType.proofGetTimeChart, () => <ProofTimeGenChart {...rest} />)
+    .with(ChartType.proofGetTimeChart, () => <ProofTimeGenChart />)
     .otherwise(() => <></>);
 };
 

src/features/dashboard/components/Dashboard/DashboardContext.tsx

@@ -0,0 +1,10 @@
+/**
+ * @file React context.
+ * @copyright Yury Korotovskikh <[email protected]>
+ */
+
+import { createContext } from 'react';
+import type { DashboardContext as DashboardContextType } from '../../models/DashboardContext';
+
+export const DashboardContext = createContext({} as DashboardContextType);
+DashboardContext.displayName = 'DashboardContext';

src/features/dashboard/components/Dashboard/DataRangeSelect.tsx

@@ -5,7 +5,7 @@
 
 import type { ReactElement } from 'react';
 import { Nav } from '@nilfoundation/react-components';
-import { DateUnit } from '@/enums';
+import { DateUnit } from '../../models/DateUnit';
 
 /**
  * Props.

src/features/dashboard/components/Dashboard/styles.ts

@@ -0,0 +1,3 @@
+/**
+ * @file Styles.
+ */

src/features/dashboard/components/StatementInfoPanel/styles.ts

@@ -1,5 +1,5 @@
 /**
- * @file Styles for Trades component.
+ * @file Styles.
  */
 
 import type { StyleObject } from 'styletron-react';

src/features/dashboard/hooks/useGetStatementDashboardData.ts

@@ -7,18 +7,12 @@ import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { dequal as deepEqual } from 'dequal';
 import sum from 'lodash/sum';
-import type {
-  CandlestickData,
-  HistogramData,
-  LineData,
-  UTCTimestamp,
-  WhitespaceData,
-} from 'lightweight-charts';
+import type { CandlestickData, HistogramData, LineData, UTCTimestamp } from 'lightweight-charts';
+import { PRIMITIVE_COLORS } from '@nilfoundation/ui-kit';
 import { useAppSelector, selectSortedChartData } from '@/redux';
 import { getUTCTimestamp } from '@/utils';
-import { DateUnit } from '@/enums';
 import type { Proposal, Request } from '@/models';
-import { PRIMITIVE_COLORS } from '@nilfoundation/ui-kit';
+import { DateUnit } from '../models/DateUnit';
 
 /**
  * Hook return type.
@@ -27,7 +21,7 @@ type UseGetStatementDashboardDataReturnType = {
   chartData: {
     candlestickChartData: CandlestickData[];
     proofGenTimeData: LineData[];
-    volumesData?: Array<WhitespaceData | HistogramData>;
+    volumesData?: HistogramData[];
   };
   loadingData: boolean;
 };
@@ -134,7 +128,7 @@ const getProofGenTimeData = <T extends Request | Proposal>(
  */
 const getVolumesData = <T extends Request | Proposal>(
   ordersGrouppedByDate: Record<string, T[]>,
-): Array<WhitespaceData | HistogramData> => {
+): HistogramData[] => {
   const keys = Object.keys(ordersGrouppedByDate);
 
   return keys.map((x, index) => {

src/features/dashboard/index.tsx

@@ -10,4 +10,12 @@ const Dashboard = loadable(() => import('./components/Dashboard/Dashboard'), {
   fallback: <Spinner animation />,
 });
 
+const StatementInfoPanel = loadable(
+  () => import('./components/StatementInfoPanel/StatementInfoPanel'),
+  {
+    fallback: <Spinner animation />,
+  },
+);
+
 export { Dashboard };
+export { StatementInfoPanel };