Stats & charts: horizontal axis improvements (#2478)

blockscout · Dec 23, 2024 · baeb0c8 · baeb0c8
1 parent a49e6e1
commit baeb0c8
Show file tree

Hide file tree

Showing 26 changed files with 7 additions and 9 deletions.
diff --git a/...reenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...reenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/...ess/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png b/...ess/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/...ddress/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png b/...ddress/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png
diff --git a/...screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/...screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
diff --git a/...s/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/...s/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png
diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
diff --git a/...creenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/...creenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
diff --git a/...ages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png b/...ages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png
diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
diff --git a/ui/shared/chart/ChartWidgetGraph.tsx b/ui/shared/chart/ChartWidgetGraph.tsx
@@ -63,14 +63,14 @@ const ChartWidgetGraph = ({
   const axesConfig = React.useMemo(() => {
     return {
       x: {
-        ticks: isEnlarged ? 8 : 4,
+        ticks: isEnlarged && !isMobile ? 8 : 4,
       },
       y: {
         ticks: isEnlarged ? 6 : 3,
         nice: true,
       },
     };
-  }, [ isEnlarged ]);
+  }, [ isEnlarged, isMobile ]);
 
   const {
     ref,

diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png
diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png
diff --git a/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/...rt/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png
diff --git a/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png b/...ared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png
diff --git a/...__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png b/...__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png
diff --git a/ui/shared/chart/utils/timeChartAxis.ts b/ui/shared/chart/utils/timeChartAxis.ts
@@ -4,7 +4,7 @@ import _unique from 'lodash/uniq';
 
 import type { AxesConfig, AxisConfig, TimeChartData } from '../types';
 
-import { WEEK, MONTH, YEAR } from 'lib/consts';
+import { MONTH, YEAR } from 'lib/consts';
 
 export const DEFAULT_MAXIMUM_SIGNIFICANT_DIGITS = 2;
 export const DEFAULT_MAXIMUM_FRACTION_DIGITS = 3;
@@ -48,14 +48,12 @@ const tickFormatterX = (axis: d3.Axis<d3.NumberValue>) => (d: d3.AxisDomain) =>
 
   const span = Number(extent[1]) - Number(extent[0]);
 
-  if (span > YEAR) {
+  if (span > 2 * YEAR) {
     format = d3.timeFormat('%Y');
-  } else if (span > 2 * MONTH) {
-    format = d3.timeFormat('%b');
-  } else if (span > WEEK) {
-    format = d3.timeFormat('%b %d');
+  } else if (span > 4 * MONTH) {
+    format = d3.timeFormat('%b \'%y');
   } else {
-    format = d3.timeFormat('%a %d');
+    format = d3.timeFormat('%d %b');
   }
 
   return format(d as Date);