feat(dashboards): Use multiline x-axis date labels (#81810)

By design request! Split up dates into two lines, if both date and time are shown. Turning this one for Dashboards only for now. Closes #81809 I also tweaked the default `LineChartWidget` to better accommodate this by increasing the number of ticks.
getsentry · Dec 6, 2024 · b815847 · b815847
1 parent b4bce9c
commit b815847
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 8 deletions.
diff --git a/static/app/components/charts/baseChart.tsx b/static/app/components/charts/baseChart.tsx
@@ -277,6 +277,10 @@ export interface BaseChartProps {
    * Similarly to single point bar in area charts a flat line for line charts makes it easy to spot the single data point.
    */
   transformSinglePointToLine?: boolean;
+  /**
+   * Use multiline date formatting for xAxis if grouped by date
+   */
+  useMultilineDate?: boolean;
   /**
    * Use short date formatting for xAxis
    */
@@ -341,6 +345,7 @@ function BaseChartUnwrapped({
   minutesThresholdToDisplaySeconds,
   showTimeInTooltip,
   useShortDate,
+  useMultilineDate,
   start,
   end,
   period,
@@ -519,6 +524,7 @@ function BaseChartUnwrapped({
             ...xAxis,
             theme,
             useShortDate,
+            useMultilineDate,
             start,
             end,
             period,
@@ -533,6 +539,7 @@ function BaseChartUnwrapped({
               ...axis,
               theme,
               useShortDate,
+              useMultilineDate,
               start,
               end,
               period,
@@ -580,6 +587,7 @@ function BaseChartUnwrapped({
     graphic,
     isGroupedByDate,
     useShortDate,
+    useMultilineDate,
     start,
     end,
     period,

diff --git a/static/app/components/charts/components/xAxis.spec.tsx b/static/app/components/charts/components/xAxis.spec.tsx
@@ -58,6 +58,26 @@ describe('Chart XAxis', function () {
           expect(axisLabelFormatter(timestamp, 1)).toEqual('Jul 9 12:00 AM');
         });
       });
+
+      describe('Multiline', () => {
+        beforeEach(function () {
+          xAxisObj = XAxis({
+            ...props,
+            useMultilineDate: true,
+            period: '7d',
+          });
+
+          axisLabelFormatter = xAxisObj.axisLabel.formatter;
+        });
+
+        it('formats axis label for first data point', function () {
+          expect(axisLabelFormatter(timestamp, 0)).toEqual('Jul 8\n5:00 PM');
+        });
+
+        it('formats axis label for second data point', function () {
+          expect(axisLabelFormatter(timestamp, 1)).toEqual('Jul 8\n5:00 PM');
+        });
+      });
     });
 
     describe('With Period <= 24h', function () {
@@ -100,6 +120,27 @@ describe('Chart XAxis', function () {
           expect(axisLabelFormatter(timestamp, 1)).toEqual('12:00 AM');
         });
       });
+
+      describe('Multiline', () => {
+        beforeEach(function () {
+          xAxisObj = XAxis({
+            ...props,
+            useMultilineDate: true,
+            period: '24h',
+            utc: true,
+          });
+
+          axisLabelFormatter = xAxisObj.axisLabel.formatter;
+        });
+
+        it('formats axis label for first data point', function () {
+          expect(axisLabelFormatter(timestamp, 0)).toEqual('Jul 9\n12:00 AM');
+        });
+
+        it('formats axis label for second data point', function () {
+          expect(axisLabelFormatter(timestamp, 1)).toEqual('12:00 AM');
+        });
+      });
     });
   });
 });
diff --git a/static/app/components/charts/components/xAxis.tsx b/static/app/components/charts/components/xAxis.tsx
@@ -3,12 +3,13 @@ import type {XAXisComponentOption} from 'echarts';
 import merge from 'lodash/merge';
 
 import type {BaseChartProps} from 'sentry/components/charts/baseChart';
-import {truncationFormatter, useShortInterval} from 'sentry/components/charts/utils';
+import {computeShortInterval, truncationFormatter} from 'sentry/components/charts/utils';
 import {getFormattedDate, getTimeFormat} from 'sentry/utils/dates';
 
 type HelperProps =
   | 'isGroupedByDate'
   | 'useShortDate'
+  | 'useMultilineDate'
   | 'start'
   | 'end'
   | 'period'
@@ -21,6 +22,7 @@ export type XAxisProps = BaseChartProps['xAxis'] &
 function XAxis({
   isGroupedByDate,
   useShortDate,
+  useMultilineDate,
   theme,
 
   start,
@@ -32,14 +34,20 @@ function XAxis({
   ...props
 }: XAxisProps): XAXisComponentOption {
   const AxisLabelFormatter = (value: string, index: number) => {
-    const timeFormat = getTimeFormat({seconds: addSecondsToTimeFormat});
-    const dateFormat = useShortDate ? 'MMM Do' : `MMM D ${timeFormat}`;
     const firstItem = index === 0;
-    const format =
-      useShortInterval({start, end, period}) && !firstItem ? timeFormat : dateFormat;
+    // Always show the date of the first item. Otherwise check the interval duration
+    const showDate = firstItem ? true : !computeShortInterval({start, end, period});
 
     if (isGroupedByDate) {
-      return getFormattedDate(value, format, {local: !utc});
+      const dateFormat = useShortDate ? 'MMM Do' : `MMM D`;
+      const dateString = getFormattedDate(value, dateFormat, {local: !utc});
+
+      const timeFormat = getTimeFormat({seconds: addSecondsToTimeFormat});
+      const timeString = getFormattedDate(value, timeFormat, {local: !utc});
+
+      const delimiter = useMultilineDate ? '\n' : ' ';
+
+      return showDate ? `${dateString}${delimiter}${timeString}` : timeString;
     }
 
     if (props.truncate) {

diff --git a/static/app/components/charts/utils.tsx b/static/app/components/charts/utils.tsx
@@ -56,7 +56,7 @@ export function truncationFormatter(
 /**
  * Use a shorter interval if the time difference is <= 24 hours.
  */
-function computeShortInterval(datetimeObj: DateTimeObject): boolean {
+export function computeShortInterval(datetimeObj: DateTimeObject): boolean {
   const diffInMinutes = getDiffInMinutes(datetimeObj);
   return diffInMinutes <= TWENTY_FOUR_HOURS;
 }

diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -388,6 +388,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
 
     const chartOptions = {
       autoHeightResize: shouldResize ?? true,
+      useMultilineDate: true,
       grid: {
         left: 0,
         right: 4,

diff --git a/static/app/views/dashboards/widgets/lineChartWidget/lineChartWidgetVisualization.tsx b/static/app/views/dashboards/widgets/lineChartWidget/lineChartWidgetVisualization.tsx
@@ -194,7 +194,7 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
       grid={{
         left: 0,
         top: showLegend ? 25 : 10,
-        right: 1,
+        right: 4,
         bottom: 0,
         containLabel: true,
       }}
@@ -213,6 +213,13 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
         },
         formatter,
       }}
+      xAxis={{
+        axisLabel: {
+          padding: [0, 10, 0, 10],
+          width: 60,
+        },
+        splitNumber: 0,
+      }}
       yAxis={{
         axisLabel: {
           formatter(value: number) {
@@ -233,6 +240,7 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
       }}
       {...chartZoomProps}
       isGroupedByDate
+      useMultilineDate
       start={start ? new Date(start) : undefined}
       end={end ? new Date(end) : undefined}
       period={period}