Skip to content
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

Jump to bottom

[Lens]Do not enable histogram mode for multiple un-stacked bar series #78525

Merged
merged 5 commits into from
Oct 2, 2020
Merged

[Lens]Do not enable histogram mode for multiple un-stacked bar series #78525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ba1be1
Do not enable histogram mode for multiple layers
PavithraCP Sep 25, 2020
9b06824
Modify logic to disable histogram mode for unstacked bar chart
PavithraCP Sep 29, 2020
6743b8b
Replace chartHasMoreThanOneSeries with chartHasMoreThanOneBarSeries i…
PavithraCP Oct 1, 2020
ae31d2c
Modify chartHasMoreThanOneBarSeries logic to match ChartHasMoreThanOn…
PavithraCP Oct 1, 2020
d057806
Merge branch 'master' into fix/72243
elasticmachine Oct 2, 2020
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
50 changes: 48 additions & 2 deletions x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -896,7 +896,12 @@ describe('xy_expression', () => {

test('it applies histogram mode to the series for single series', () => {
const { data, args } = sampleArgs();
const firstLayer: LayerArgs = { ...args.layers[0], seriesType: 'bar', isHistogram: true };
const firstLayer: LayerArgs = {
...args.layers[0],
accessors: ['b'],
seriesType: 'bar',
isHistogram: true,
};
delete firstLayer.splitAccessor;
const component = shallow(
<XYChart
Expand All @@ -911,7 +916,48 @@ describe('xy_expression', () => {
/>
);
expect(component.find(BarSeries).at(0).prop('enableHistogramMode')).toEqual(true);
expect(component.find(BarSeries).at(1).prop('enableHistogramMode')).toEqual(true);
});

test('it does not apply histogram mode to more than one bar series for unstacked bar chart', () => {
const { data, args } = sampleArgs();
const firstLayer: LayerArgs = { ...args.layers[0], seriesType: 'bar', isHistogram: true };
delete firstLayer.splitAccessor;
const component = shallow(
<XYChart
data={data}
args={{ ...args, layers: [firstLayer] }}
formatFactory={getFormatSpy}
timeZone="UTC"
chartsThemeService={chartsThemeService}
histogramBarTarget={50}
onClickValue={onClickValue}
onSelectRange={onSelectRange}
/>
);
expect(component.find(BarSeries).at(0).prop('enableHistogramMode')).toEqual(false);
expect(component.find(BarSeries).at(1).prop('enableHistogramMode')).toEqual(false);
});

test('it applies histogram mode to more than one the series for unstacked line/area chart', () => {
const { data, args } = sampleArgs();
const firstLayer: LayerArgs = { ...args.layers[0], seriesType: 'line', isHistogram: true };
delete firstLayer.splitAccessor;
const secondLayer: LayerArgs = { ...args.layers[0], seriesType: 'line', isHistogram: true };
delete secondLayer.splitAccessor;
const component = shallow(
<XYChart
data={data}
args={{ ...args, layers: [firstLayer, secondLayer] }}
formatFactory={getFormatSpy}
timeZone="UTC"
chartsThemeService={chartsThemeService}
histogramBarTarget={50}
onClickValue={onClickValue}
onSelectRange={onSelectRange}
/>
);
expect(component.find(LineSeries).at(0).prop('enableHistogramMode')).toEqual(true);
expect(component.find(LineSeries).at(1).prop('enableHistogramMode')).toEqual(true);
});

test('it applies histogram mode to the series for stacked series', () => {
Expand Down
14 changes: 13 additions & 1 deletion x-pack/plugins/lens/public/xy_visualization/expression.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,13 @@ export function XYChart({
yRight: true,
};

const filteredBarLayers = filteredLayers.filter((layer) => layer.seriesType.includes('bar'));

const chartHasMoreThanOneBarSeries =
filteredBarLayers.length > 1 ||
filteredBarLayers.some((layer) => layer.accessors.length > 1) ||
filteredBarLayers.some((layer) => layer.splitAccessor);

function calculateMinInterval() {
// check all the tables to see if all of the rows have the same timestamp
// that would mean that chart will draw a single bar
Expand Down Expand Up @@ -599,7 +606,12 @@ export function XYChart({
groupId: yAxesConfiguration.find((axisConfiguration) =>
axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor)
)?.groupId,
enableHistogramMode: isHistogram && (seriesType.includes('stacked') || !splitAccessor),
enableHistogramMode:
isHistogram &&
(seriesType.includes('stacked') || !splitAccessor) &&
(seriesType.includes('stacked') ||
!seriesType.includes('bar') ||
!chartHasMoreThanOneBarSeries),
stackMode: seriesType.includes('percentage') ? StackMode.Percentage : undefined,
timeZone,
areaSeriesStyle: {
Expand Down