Stats & charts: horizontal axis improvements

Author: isstuev

ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png

@@ -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,

ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png

@@ -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);