diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index b972103055..58ccb93f59 100644 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png index 1795600ce8..ef39e74b09 100644 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png index 917cd0ce5b..6115f79ad2 100644 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png deleted file mode 100644 index 2b1559efce..0000000000 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and /dev/null differ diff --git a/ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png index eb6884c0a8..7f9b7ae2d7 100644 Binary files a/ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/Chart.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ 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 index 4f0d0954b5..38132a31c7 100644 Binary files a/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/Chart.pw.tsx_default_base-view-dark-mode-mobile-1.png differ 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 index 031e777d49..f1e3235057 100644 Binary files a/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/Chart.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png index eb2bff6f1b..651fe089ca 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png index 8298fae2de..ddaa39b920 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png differ 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 index 534e56d864..f571355003 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ diff --git a/ui/shared/chart/ChartWidgetGraph.tsx b/ui/shared/chart/ChartWidgetGraph.tsx index 04071252d3..8ec72e6a75 100644 --- 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/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 5a0c57d466..9247e56fc2 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png index 27aa7acbd7..57f32578ea 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png index 882cab7e0d..dd284f9f30 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png index 512d978cfc..f4c826a3b9 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png index 810e4f452e..a1287f508d 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png index 25c90139fb..4c50d800e8 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png index dafdd60749..0e61b92597 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png index e13f684ff4..7ce8c5e0ef 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png differ 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 index 6085a86d7f..f9f749e176 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png differ 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 index 948b0f76af..6aaa7d6847 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png differ 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 index 07145a4c85..a3fbbc04f8 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png differ 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 index f502de8f6c..87e6ce28ab 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png differ 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 index 44a38e8095..0af1e7a428 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png index caafd476bb..9169573a31 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png differ diff --git a/ui/shared/chart/utils/timeChartAxis.ts b/ui/shared/chart/utils/timeChartAxis.ts index faeea97378..b57253fe39 100644 --- 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) => (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);