ref(explore): Improve conversion to TimeSeries

static/app/utils/timeSeries/parseGroupBy.spec.tsx

@@ -0,0 +1,52 @@
+import {parseGroupBy} from './parseGroupBy';
+
+describe('parseGroupBy', () => {
+  it('returns undefined for "Other" group name', () => {
+    const result = parseGroupBy('Other', ['field1', 'field2']);
+    expect(result).toBeUndefined();
+  });
+
+  it('parses single field and value correctly', () => {
+    const result = parseGroupBy('value1', ['field1']);
+    expect(result).toEqual([{key: 'field1', value: 'value1'}]);
+  });
+
+  it('parses multiple fields and values correctly', () => {
+    const result = parseGroupBy('value1,value2,value3', ['field1', 'field2', 'field3']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: 'field2', value: 'value2'},
+      {key: 'field3', value: 'value3'},
+    ]);
+  });
+
+  it('handles more values than fields by using empty strings for extra values', () => {
+    const result = parseGroupBy('value1,value2', ['field1']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: '', value: 'value2'},
+    ]);
+  });
+
+  it('handles more fields than values by using empty strings for missing values', () => {
+    const result = parseGroupBy('value1', ['field1', 'field2']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: 'field2', value: ''},
+    ]);
+  });
+
+  it('handles empty strings in values', () => {
+    const result = parseGroupBy('value1,,value3', ['field1', 'field2', 'field3']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: 'field2', value: ''},
+      {key: 'field3', value: 'value3'},
+    ]);
+  });
+
+  it('handles empty fields array', () => {
+    const result = parseGroupBy('', []);
+    expect(result).toBeUndefined();
+  });
+});

static/app/utils/timeSeries/parseGroupBy.tsx

@@ -0,0 +1,26 @@
+import zipWith from 'lodash/zipWith';
+
+import type {TimeSeriesGroupBy} from 'sentry/views/dashboards/widgets/common/types';
+
+export function parseGroupBy(
+  groupName: string,
+  fields: string[]
+): TimeSeriesGroupBy[] | undefined {
+  if (groupName === 'Other') {
+    return undefined;
+  }
+
+  const groupKeys = fields;
+  const groupValues = groupName.split(',');
+
+  const groupBys = zipWith(groupKeys, groupValues, (key, value) => {
+    return {
+      key: key ?? '',
+      value: value ?? '',
+    };
+  }).filter(groupBy => {
+    return groupBy.key || groupBy.value;
+  });
+
+  return groupBys.length > 0 ? groupBys : undefined;
+}

static/app/views/dashboards/widgets/common/types.tsx

@@ -65,7 +65,7 @@ export type TimeSeriesItem = {
  */
 type IncompleteReason = 'INCOMPLETE_BUCKET';
 
-type TimeSeriesGroupBy = {
+export type TimeSeriesGroupBy = {
   key: string;
   /**
    * The `value` of a `groupBy` can sometimes surprisingly be an array, because some datasets support array values. e.g., in the error dataset, the error type could be an array that looks like `["Exception", null, "TypeError"]`

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesName.spec.tsx

@@ -148,4 +148,16 @@ describe('formatSeriesName', () => {
       expect(formatTimeSeriesName(timeSeries)).toEqual(result);
     });
   });
+
+  describe('other', () => {
+    it('Formats "Other"', () => {
+      const timeSeries = TimeSeriesFixture();
+      timeSeries.meta = {
+        ...timeSeries.meta,
+        isOther: true,
+      };
+
+      expect(formatTimeSeriesName(timeSeries)).toBe('Other');
+    });
+  });
 });

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesName.tsx

@@ -1,3 +1,4 @@
+import {t} from 'sentry/locale';
 import {
   getAggregateArg,
   getMeasurementSlug,
@@ -12,6 +13,10 @@ export function formatTimeSeriesName(timeSeries: TimeSeries): string {
   // If the timeSeries has `groupBy` information, the label is made by
   // concatenating the values of the groupBy, since there's no point repeating
   // the name of the Y axis multiple times in the legend.
+  if (timeSeries.meta.isOther) {
+    return t('Other');
+  }
+
   if (timeSeries.groupBy?.length && timeSeries.groupBy.length > 0) {
     return `${timeSeries.groupBy
       ?.map(groupBy => {

static/app/views/explore/components/chart/chartVisualization.tsx

@@ -6,7 +6,6 @@ import styled from '@emotion/styled';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
 import {t} from 'sentry/locale';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
-import {isTimeSeriesOther} from 'sentry/utils/timeSeries/isTimeSeriesOther';
 import {markDelayedData} from 'sentry/utils/timeSeries/markDelayedData';
 import usePrevious from 'sentry/utils/usePrevious';
 import {Area} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/area';
@@ -17,7 +16,6 @@ import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/tim
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import type {ChartInfo} from 'sentry/views/explore/components/chart/types';
 import {SAMPLING_MODE} from 'sentry/views/explore/hooks/useProgressiveQuery';
-import {prettifyAggregation} from 'sentry/views/explore/utils';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
 import {INGESTION_DELAY} from 'sentry/views/insights/settings';
 
@@ -38,8 +36,6 @@ export function ChartVisualization({
   const theme = useTheme();
 
   const plottables = useMemo(() => {
-    const formattedYAxis = prettifyAggregation(chartInfo.yAxis) ?? chartInfo.yAxis;
-
     const DataPlottableConstructor =
       chartInfo.chartType === ChartType.LINE
         ? Line
@@ -55,13 +51,12 @@ export function ChartVisualization({
       // values instead of the aggregate function.
       if (s.yAxis === chartInfo.yAxis) {
         return new DataPlottableConstructor(markDelayedData(s, INGESTION_DELAY), {
-          alias: formattedYAxis ?? chartInfo.yAxis,
-          color: isTimeSeriesOther(s) ? theme.chartOther : undefined,
+          color: s.meta.isOther ? theme.chartOther : undefined,
           stack: 'all',
         });
       }
       return new DataPlottableConstructor(markDelayedData(s, INGESTION_DELAY), {
-        color: isTimeSeriesOther(s) ? theme.chartOther : undefined,
+        color: s.meta.isOther ? theme.chartOther : undefined,
         stack: 'all',
       });
     });