Stats & charts: horizontal axis improvements (#2478)

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,

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