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.1.3",
+    "@nilfoundation/ui-kit": "^2.2.3",
     "@reduxjs/toolkit": "^1.8.5",
     "@sentry/react": "^7.21.1",
     "@sentry/tracing": "^7.21.1",

src/components/common/index.ts

@@ -13,7 +13,4 @@ export * from './ObjectAsPlainTextViewer';
 export * from './GALocationTracker';
 export * from './ProgressBar';
 export * from './RouterLink';
-export * from './ChartTemplate';
-export * from './ChartLegend';
-export * from './StatementCharts';
 export * from './FullScreenLoader';

src/components/common/ChartLegend/ChartLegend.module.scss → src/features/dashboard/components/ChartLegends/ChartLegend.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/constants.scss";
+@import '../../../styles/constants.scss';
 
 $height: 3rem;
 

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

@@ -0,0 +1,44 @@
+/**
+ * @file React component.
+ * @copyright Yury Korotovskikh <[email protected]>
+ */
+
+import type { ReactElement } from 'react';
+import { useState } from 'react';
+import { CandlestickSeries, Chart } from '@nilfoundation/ui-kit';
+import type { CandlestickData, CandlestickSeriesPartialOptions } from 'lightweight-charts';
+import { useGetStatementDashboardData } from '../../hooks/useGetStatementDashboardData';
+
+/**
+ * Proof cost chart.
+ *
+ * @returns React component.
+ */
+export const ProofCostChart = (): ReactElement => {
+  const [legendData, setLegendData] = useState<CandlestickData | null>(null);
+  const {
+    chartData: { candlestickChartData, volumesData },
+    loadingData: isLoadingChartData,
+  } = useGetStatementDashboardData(props.displayVolumes, props.dataRange);
+
+  return (
+    <Chart>
+      <CandlestickSeries
+        data={candlestickChartData}
+        reactive
+        options={seriesDefaultOptions}
+      />
+    </Chart>
+  );
+};
+
+/**
+ * Series default options.
+ */
+const seriesDefaultOptions: CandlestickSeriesPartialOptions = {
+  priceFormat: {
+    type: 'price',
+    precision: 4,
+    minMove: 0.0001,
+  },
+};

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

@@ -0,0 +1,51 @@
+/**
+ * @file React component.
+ * @copyright Yury Korotovskikh <[email protected]>
+ */
+
+import type { ReactElement } from 'react';
+import { Nav } from '@nilfoundation/react-components';
+import { ChartType } from '@/enums';
+import { useBreakpoint } from '@/features/shared';
+import { BREAKPOINT } from '@/styles/Breakpoint';
+
+/**
+ * Props.
+ */
+type ChartTypeSelectProps = {
+  chartType: ChartType;
+  onSelectChartType: (chartType: ChartType) => void;
+  disabled: boolean;
+};
+
+/**
+ * Chart type selector.
+ *
+ * @param {ChartTypeSelectProps} props Props.
+ * @returns React component.
+ */
+export const ChartTypeSelect = ({
+  chartType,
+  onSelectChartType,
+  disabled,
+}: ChartTypeSelectProps): ReactElement => {
+  const bp = useBreakpoint();
+
+  return (
+    <Nav
+      tabs
+      vertical={bp === BREAKPOINT.SM}
+    >
+      {Object.values(ChartType).map(x => (
+        <Nav.Item
+          key={x}
+          active={x === chartType}
+          onClick={() => onSelectChartType(x)}
+          disabled={disabled}
+        >
+          {x}
+        </Nav.Item>
+      ))}
+    </Nav>
+  );
+};