Merge pull request QuickSwap#1685 from 0xoscario/hotfix/analytics-chart

Fix liquidity chart in analytics page

Author: sameepsi

src/components/AreaChart/AreaChart.tsx

@@ -39,7 +39,6 @@ const AreaChart: React.FC<AreaChartProps> = ({
   const yMin = yAxisValues
     ? Math.min(...yAxisValues.map((val) => Number(val)))
     : 0;
-
   const options = {
     chart: {
       sparkline: {

src/components/styles/AreaChart.scss

@@ -19,6 +19,7 @@
   justify-content: space-between;
   margin-right: 8px;
   margin-bottom: 32px;
+  width: 43px;
   & p {
     font-size: 10px;
     font-weight: 500;

src/pages/AnalyticsPage/AnalyticsLiquidityChart.tsx

@@ -68,13 +68,16 @@ const AnalyticsLiquidityChart: React.FC<{
 
       const minVolume = Math.floor(Math.min(...dailyVolumes));
       const maxVolume = Math.ceil(Math.max(...dailyVolumes));
-
       const values: any[] = [];
       // show 10 values in the y axis of the graph
-      const step = (maxVolume - minVolume) / 10;
+      const step = (maxVolume - minVolume) / 9;
       if (step > 0) {
-        for (let i = maxVolume; i >= minVolume; i -= step) {
-          values.push(Math.floor(i));
+        for (let i = 9; i >= 0; i--) {
+          const value = minVolume + (i * (maxVolume - minVolume)) / 9;
+          if (values.includes(value)) {
+            continue;
+          }
+          values.push(value);
         }
       } else {
         values.push(minVolume);