diff --git a/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx index df32792335da..d6be113ec139 100644 --- a/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx @@ -108,7 +108,6 @@ const BarVisualization = makeVisualization( const getBarChartDataSettingsWithCustomUnits = useBarChartDataSettingsWithCustomUnits({ config, - effectiveTimerange, barmode, }); diff --git a/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.test.ts b/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.test.ts index 3762f2fd766c..ade5b4f63982 100644 --- a/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.test.ts +++ b/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.test.ts @@ -107,11 +107,7 @@ 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 () => { @@ -119,11 +115,6 @@ describe('useBarChartDataSettingsWithCustomUnits', () => { 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', }); diff --git a/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.ts b/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.ts index 790be987d7ec..fa7f696c85a0 100644 --- a/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.ts +++ b/graylog2-web-interface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.ts @@ -14,45 +14,30 @@ * along with this program. If not, see * . */ -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 => { 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], ); }; diff --git a/graylog2-web-interface/src/views/components/visualizations/utils/__tests__/chartLayoutGenerators.test.ts b/graylog2-web-interface/src/views/components/visualizations/utils/__tests__/chartLayoutGenerators.test.ts index 326723583173..a04930e234dc 100644 --- a/graylog2-web-interface/src/views/components/visualizations/utils/__tests__/chartLayoutGenerators.test.ts +++ b/graylog2-web-interface/src/views/components/visualizations/utils/__tests__/chartLayoutGenerators.test.ts @@ -15,12 +15,9 @@ * . */ 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'); }); }); diff --git a/graylog2-web-interface/src/views/components/visualizations/utils/chartLayoutGenerators.ts b/graylog2-web-interface/src/views/components/visualizations/utils/chartLayoutGenerators.ts index e7193b8100e4..e6db36b4dfea 100644 --- a/graylog2-web-interface/src/views/components/visualizations/utils/chartLayoutGenerators.ts +++ b/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;