Skip to content

Remove no longer needed offset and width calculation for bars in bar chart. #22792

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maxiadlovskii merged 1 commit into from
Jun 5, 2025
Merged

Remove no longer needed offset and width calculation for bars in bar chart. #22792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ const BarVisualization = makeVisualization(

const getBarChartDataSettingsWithCustomUnits = useBarChartDataSettingsWithCustomUnits({
config,
effectiveTimerange,
barmode,
});

Expand Down
35 changes: 2 additions & 33 deletions .../src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
}),
);

Expand All @@ -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',
});
Expand Down
48 changes: 6 additions & 42 deletions ...rface/src/views/components/visualizations/hooks/useBarChartDataSettingsWithCustomUnits.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}: {
Expand All @@ -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],
);
};

Expand Down
72 changes: 10 additions & 62 deletions ...terface/src/views/components/visualizations/utils/__tests__/chartLayoutGenerators.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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');
});
});

Expand Down
77 changes: 9 additions & 68 deletions graylog2-web-interface/src/views/components/visualizations/utils/chartLayoutGenerators.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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 }>;
Expand Down
Loading