Simplify offset and width calculation for bar chart traces. (#22792)

Author: linuspahl

graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx

@@ -108,7 +108,6 @@ const BarVisualization = makeVisualization(
 
     const getBarChartDataSettingsWithCustomUnits = useBarChartDataSettingsWithCustomUnits({
       config,
-      effectiveTimerange,
       barmode,
     });
 

graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.test.ts

@@ -107,23 +107,14 @@ describe('useBarChartDataSettingsWithCustomUnits', () => {
     };
     asMock(chartLayoutGenerators.generateMappersForYAxis).mockReturnValue(mappers);
 
-    asMock(chartLayoutGenerators.getBarChartTraceOffsetSettings).mockReturnValue({
-      offsetgroup: 1,
-      width: 0.25,
-      offset: -0.375,
-    });
+    asMock(chartLayoutGenerators.getBarChartTraceOffsetGroup).mockReturnValue(1);
   });
 
   it('Runs all related functions and return combined result from them', async () => {
     const { result } = renderHook(() =>
       useBarChartDataSettingsWithCustomUnits({
         config: testConfig,
         barmode: 'group',
-        effectiveTimerange: {
-          from: '2024-08-11T14:56:10.000Z',
-          to: '2024-08-12T15:01:10.000Z',
-          type: 'absolute',
-        },
       }),
     );
 
@@ -141,34 +132,12 @@ describe('useBarChartDataSettingsWithCustomUnits', () => {
       });
     });
 
-    expect(chartLayoutGenerators.generateMappersForYAxis).toHaveBeenCalledWith({
-      series: testConfig.series,
-      units,
-    });
-
     expect(useChartDataSettingsWithCustomUnits).toHaveBeenCalledWith({ config: testConfig });
-    expect(getFieldNameFromTrace).toHaveBeenCalledWith({ series: testConfig.series, fullPath: 'Name1' });
-
-    expect(chartLayoutGenerators.getBarChartTraceOffsetSettings).toHaveBeenCalledWith('group', {
-      yaxis: 'y1',
-      totalAxis: 4,
-      axisNumber: 1,
-      traceIndex: 1,
-      totalTraces: 4,
-      effectiveTimerange: {
-        from: '2024-08-11T14:56:10.000Z',
-        to: '2024-08-12T15:01:10.000Z',
-        type: 'absolute',
-      },
-      isTimeline: false,
-      xAxisItemsLength: 10,
-    });
+    expect(chartLayoutGenerators.getBarChartTraceOffsetGroup).toHaveBeenCalledWith('group', 'y1', 1);
 
     expect(barChartDataSettingsWithCustomUnits).toEqual({
       fullPath: 'Name1',
-      offset: -0.375,
       offsetgroup: 1,
-      width: 0.25,
       y: [1, 2, 3],
       yaxis: 'y1',
     });

graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.ts

@@ -14,45 +14,30 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 import useFeature from 'hooks/useFeature';
-import useWidgetUnits from 'views/components/visualizations/hooks/useWidgetUnits';
 import type AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
-import {
-  generateMappersForYAxis,
-  getBarChartTraceOffsetSettings,
-} from 'views/components/visualizations/utils/chartLayoutGenerators';
+import { getBarChartTraceOffsetGroup } from 'views/components/visualizations/utils/chartLayoutGenerators';
 import type { BarMode } from 'views/logic/aggregationbuilder/visualizations/BarVisualizationConfig';
-import type { AbsoluteTimeRange } from 'views/logic/queries/Query';
-import { NO_FIELD_NAME_SERIES, UNIT_FEATURE_FLAG } from 'views/components/visualizations/Constants';
-import getFieldNameFromTrace from 'views/components/visualizations/utils/getFieldNameFromTrace';
+import { UNIT_FEATURE_FLAG } from 'views/components/visualizations/Constants';
 import type { ChartDefinition } from 'views/components/visualizations/ChartData';
 import useChartDataSettingsWithCustomUnits from 'views/components/visualizations/hooks/useChartDataSettingsWithCustomUnits';
 
 const useBarChartDataSettingsWithCustomUnits = ({
   config,
   barmode,
-  effectiveTimerange,
 }: {
   config: AggregationWidgetConfig;
   barmode?: BarMode;
-  effectiveTimerange: AbsoluteTimeRange;
 }) => {
   const unitFeatureEnabled = useFeature(UNIT_FEATURE_FLAG);
-  const widgetUnits = useWidgetUnits(config);
-  const { fieldNameToAxisCountMapper, unitTypeMapper } = useMemo(
-    () => generateMappersForYAxis({ series: config.series, units: widgetUnits }),
-    [config.series, widgetUnits],
-  );
   const getChartDataSettingsWithCustomUnits = useChartDataSettingsWithCustomUnits({ config });
 
   return useCallback(
     ({
       values,
       idx,
-      total,
-      xAxisItemsLength,
       fullPath,
       name,
     }: {
@@ -66,44 +51,23 @@ const useBarChartDataSettingsWithCustomUnits = ({
     }): Partial<ChartDefinition> => {
       if (!unitFeatureEnabled) return {};
 
-      const fieldNameKey = getFieldNameFromTrace({ fullPath, series: config.series }) ?? NO_FIELD_NAME_SERIES;
       const {
         y: convertedValues,
         yaxis,
         ...hoverTemplateSettings
       } = getChartDataSettingsWithCustomUnits({ name, fullPath, values });
-      const axisNumber = fieldNameToAxisCountMapper?.[fieldNameKey];
-      const totalAxis = Object.keys(unitTypeMapper).length;
 
-      const offsetSettings = getBarChartTraceOffsetSettings(barmode, {
-        yaxis,
-        totalAxis,
-        axisNumber,
-        traceIndex: idx,
-        totalTraces: total,
-        effectiveTimerange,
-        isTimeline: config.isTimeline,
-        xAxisItemsLength: xAxisItemsLength,
-      });
+      const offsetgroup = getBarChartTraceOffsetGroup(barmode, yaxis, idx);
 
       return {
         yaxis,
         y: convertedValues,
         fullPath,
+        offsetgroup,
         ...hoverTemplateSettings,
-        ...offsetSettings,
       };
     },
-    [
-      barmode,
-      config.isTimeline,
-      config.series,
-      effectiveTimerange,
-      fieldNameToAxisCountMapper,
-      getChartDataSettingsWithCustomUnits,
-      unitFeatureEnabled,
-      unitTypeMapper,
-    ],
+    [barmode, getChartDataSettingsWithCustomUnits, unitFeatureEnabled],
   );
 };
 

graylog2-web-interface/src/views/components/visualizations/utils/__tests__/chartLayoutGenerators.test.ts

@@ -15,12 +15,9 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
-import type {
-  AdditionalSettings,
-  GenerateLayoutsParams,
-} from 'views/components/visualizations/utils/chartLayoutGenerators';
+import type { GenerateLayoutsParams } from 'views/components/visualizations/utils/chartLayoutGenerators';
 import {
-  getBarChartTraceOffsetSettings,
+  getBarChartTraceOffsetGroup,
   generateMappersForYAxis,
   generateLayouts,
   getHoverTemplateSettings,
@@ -41,77 +38,28 @@ import SeriesConfig from 'views/logic/aggregationbuilder/SeriesConfig';
 
 describe('Chart Layout Generators', () => {
   describe('getBarChartTraceOffsetSettings', () => {
-    const defaultProps: AdditionalSettings = {
-      yaxis: 'y3',
-      totalAxis: 4,
-      axisNumber: 1,
-      traceIndex: 2,
-      totalTraces: 4,
-      effectiveTimerange: {
-        from: '2024-08-11T14:56:10.000Z',
-        to: '2024-08-12T15:01:10.000Z',
-        type: 'absolute',
-      },
-      isTimeline: false,
-      xAxisItemsLength: 10,
-    };
-
     it('return correct offset for barmode, mode group, non timeline', () => {
-      const result = getBarChartTraceOffsetSettings('group', defaultProps);
+      const result = getBarChartTraceOffsetGroup('group', 'y3', 2);
 
-      expect(result).toEqual({
-        offsetgroup: 2,
-        width: 0.25,
-        offset: 0.125,
-      });
+      expect(result).toEqual(2);
     });
 
     it('return correct offset for barmode, mode group, timeline', () => {
-      const result = getBarChartTraceOffsetSettings('group', {
-        ...defaultProps,
-        isTimeline: true,
-      });
+      const result = getBarChartTraceOffsetGroup('group', 'y3', 2);
 
-      expect(result).toEqual({
-        offsetgroup: 2,
-        width: 2167500,
-        offset: 1083750,
-      });
+      expect(result).toEqual(2);
     });
 
     it('return correct offset for barmode, mode stack, non timeline', () => {
-      const result = getBarChartTraceOffsetSettings('stack', {
-        ...defaultProps,
-        yaxis: 'y2',
-        totalAxis: 2,
-        axisNumber: 2,
-        traceIndex: 1,
-        totalTraces: 2,
-      });
+      const result = getBarChartTraceOffsetGroup('stack', 'y2', 1);
 
-      expect(result).toEqual({
-        offsetgroup: 'y2',
-        width: 0.5,
-        offset: 0.25,
-      });
+      expect(result).toEqual('y2');
     });
 
     it('return correct offset for barmode, mode stack, timeline', () => {
-      const result = getBarChartTraceOffsetSettings('stack', {
-        ...defaultProps,
-        isTimeline: true,
-        yaxis: 'y2',
-        totalAxis: 2,
-        axisNumber: 2,
-        traceIndex: 1,
-        totalTraces: 2,
-      });
+      const result = getBarChartTraceOffsetGroup('stack', 'y2', 1);
 
-      expect(result).toEqual({
-        offsetgroup: 'y2',
-        width: 4335000,
-        offset: 2167500,
-      });
+      expect(result).toEqual('y2');
     });
   });
 

graylog2-web-interface/src/views/components/visualizations/utils/chartLayoutGenerators.ts

@@ -18,7 +18,6 @@
 import zipWith from 'lodash/zipWith';
 import sum from 'lodash/sum';
 import flattenDeep from 'lodash/flattenDeep';
-import moment from 'moment';
 import type { DefaultTheme } from 'styled-components';
 
 import type { FieldUnitType } from 'views/types';
@@ -34,7 +33,6 @@ import {
 } from 'views/components/visualizations/utils/unitConverters';
 import type { ChartDefinition } from 'views/components/visualizations/ChartData';
 import type FieldUnit from 'views/logic/aggregationbuilder/FieldUnit';
-import type { AbsoluteTimeRange } from 'views/logic/queries/Query';
 import {
   DEFAULT_AXIS_KEY,
   TIME_AXIS_LABELS_QUANTITY,
@@ -158,79 +156,22 @@ const getUnitLayoutWithData = (
 type SeriesName = string;
 type AxisName = string;
 
-const getWidth = (total: number, offsetMultiplier: number) => (total <= 1 ? undefined : offsetMultiplier / total);
-
-const getOffset = (offsetNumber: number, totalOffsets: number, offsetMultiplier: number) => {
-  const width = getWidth(totalOffsets, offsetMultiplier);
-  if (!width) return undefined;
-  const firstOffset = (width / 2) * (1 - totalOffsets);
-
-  return firstOffset + width * (offsetNumber - 1);
-};
-
-export type AdditionalSettings = {
-  yaxis: string /**  y axis name y, y2 etc */;
-  totalAxis: number /**  total number of y-axis */;
-  axisNumber: number /**  number of y-axis (1...N) */;
-  totalTraces: number /**  total number of traces for each x value (in fact total amount of series) */;
-  traceIndex: number /**  number (0...N) */;
-  effectiveTimerange?: AbsoluteTimeRange;
-  isTimeline?: boolean;
-  xAxisItemsLength?: number /** total amount of x values */;
-};
-
-type BarChartTraceOffsetSettings = {
-  /** Needs to group traces. In case if barmode: 'stack' | 'relative' | 'overlay'
-   * we are grouping by y-axis to join traces into same trace on chart */
-  offsetgroup: number | string;
-  /** In case if barmode: 'stack' | 'relative' | 'overlay'we are divide whole possible
-   * width for traces by total axis. In other case we divide by total traces */
-  width: number;
-  /** alignment is relative to the trace center */
-  offset: number;
-};
-
-export const getBarChartTraceOffsetSettings = (
+/** Needs to group traces. In case if barmode: 'stack' | 'relative' | 'overlay'
+ * we are grouping by y-axis to join traces into same trace on chart */
+export const getBarChartTraceOffsetGroup = (
   barmode: BarMode,
-  {
-    yaxis,
-    totalAxis,
-    axisNumber,
-    traceIndex,
-    totalTraces,
-    effectiveTimerange,
-    isTimeline,
-    xAxisItemsLength,
-  }: AdditionalSettings,
-): BarChartTraceOffsetSettings | {} => {
-  const offsetMultiplier =
-    xAxisItemsLength && isTimeline && effectiveTimerange
-      ? moment(effectiveTimerange.to).diff(effectiveTimerange.from) / xAxisItemsLength
-      : 1;
-
+  yaxis: string,
+  traceIndex: number,
+): string | number | undefined => {
   if (barmode === 'stack' || barmode === 'relative' || barmode === 'overlay') {
-    const width = getWidth(totalAxis, offsetMultiplier);
-    const offset = getOffset(axisNumber, totalAxis, offsetMultiplier);
-
-    return {
-      offsetgroup: yaxis,
-      width,
-      offset,
-    };
+    return yaxis;
   }
 
   if (barmode === 'group') {
-    const width = getWidth(totalTraces, offsetMultiplier);
-    const offset = getOffset(traceIndex + 1, totalTraces, offsetMultiplier);
-
-    return {
-      offsetgroup: traceIndex,
-      width,
-      offset,
-    };
+    return traceIndex;
   }
 
-  return {};
+  return undefined;
 };
 
 export type UnitTypeMapper = {} | Record<FieldUnitType, { axisKeyName: string; axisCount: number }>;