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

feat(xy): specify pixel width for bars #1114

Merged
merged 11 commits into from
Apr 13, 2021
Merged

feat(xy): specify pixel width for bars #1114

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7d756de
feat(xy): specify pixel width for bars
markov00 Apr 12, 2021
25bf96a
refactor: split ratio and pixel sizes
markov00 Apr 12, 2021
a9f2c83
Merge branch 'master' into 2021_04_12-fixed_bar_width
markov00 Apr 12, 2021
ee6a011
fix: story example
markov00 Apr 12, 2021
ae3a966
Merge branch '2021_04_12-fixed_bar_width' of github.com:markov00/elas…
markov00 Apr 12, 2021
aa3d523
test: add VRT tests
markov00 Apr 12, 2021
a0106fe
fix: remove useless mutation
markov00 Apr 12, 2021
c78044d
Merge branch 'master' into 2021_04_12-fixed_bar_width
monfera Apr 12, 2021
27f5971
docs: update description for rectStyle
markov00 Apr 13, 2021
e3a5176
Merge branch '2021_04_12-fixed_bar_width' of github.com:markov00/elas…
markov00 Apr 13, 2021
379f60b
Merge branch 'master' into 2021_04_12-fixed_bar_width
markov00 Apr 13, 2021
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
2 changes: 2 additions & 0 deletions api/charts.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1561,6 +1561,8 @@ export interface RectBorderStyle {
export interface RectStyle {
fill?: Color | ColorVariant;
opacity: number;
widthPixel?: Pixels;
widthRatio?: Ratio;
}

// @public
Expand Down
Binary file added ...ies-test-ts-bar-series-stories-custom-bar-width-pixel-and-ratio-size-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ..._/bar-stories-test-ts-bar-series-stories-custom-bar-width-pixel-size-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ..._/bar-stories-test-ts-bar-series-stories-custom-bar-width-ratio-size-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions integration/tests/bar_stories.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,4 +227,21 @@ describe('Bar series stories', () => {
);
});
});
describe('custom bar width', () => {
it('pixel size', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/stylings--custom-series-styles-bars&knob-apply bar style (bar 1 series)_Chart Global Theme=true&knob-enable custom rect width (px)_Bar width=true&knob-rect width (px)_Bar width=15&knob-enable custom rect width (ratio)_Bar width=&knob-rect width (ratio)_Bar width=0.5&knob-border stroke_Bar 1 Style=blue&knob-border strokeWidth_Bar 1 Style=2&knob-border visible_Bar 1 Style=true&knob-rect fill_Bar 1 Style=#22C61A&knob-rect opacity_Bar 1 Style=0.3&knob-theme border stroke_Chart Global Theme=red&knob-theme border strokeWidth_Chart Global Theme=2&knob-theme border visible_Chart Global Theme=true&knob-theme opacity _Chart Global Theme=0.9',
);
});
it('ratio size', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/stylings--custom-series-styles-bars&knob-apply bar style (bar 1 series)_Chart Global Theme=true&knob-enable custom rect width (px)_Bar width=&knob-rect width (px)_Bar width=30&knob-enable custom rect width (ratio)_Bar width=true&knob-rect width (ratio)_Bar width=0.5&knob-border stroke_Bar 1 Style=blue&knob-border strokeWidth_Bar 1 Style=2&knob-border visible_Bar 1 Style=true&knob-rect fill_Bar 1 Style=#22C61A&knob-rect opacity_Bar 1 Style=0.3&knob-theme border stroke_Chart Global Theme=red&knob-theme border strokeWidth_Chart Global Theme=2&knob-theme border visible_Chart Global Theme=true&knob-theme opacity _Chart Global Theme=0.9',
);
});
it('pixel and ratio size', async () => {
await common.expectChartAtUrlToMatchScreenshot(
'http://localhost:9001/?path=/story/stylings--custom-series-styles-bars&knob-apply bar style (bar 1 series)_Chart Global Theme=true&knob-enable custom rect width (px)_Bar width=true&knob-rect width (px)_Bar width=40&knob-enable custom rect width (ratio)_Bar width=true&knob-rect width (ratio)_Bar width=0.2&knob-border stroke_Bar 1 Style=blue&knob-border strokeWidth_Bar 1 Style=2&knob-border visible_Bar 1 Style=true&knob-rect fill_Bar 1 Style=#22C61A&knob-rect opacity_Bar 1 Style=0.3&knob-theme border stroke_Chart Global Theme=red&knob-theme border strokeWidth_Chart Global Theme=2&knob-theme border visible_Chart Global Theme=true&knob-theme opacity _Chart Global Theme=0.9',
);
});
});
});
34 changes: 19 additions & 15 deletions src/chart_types/xy_chart/rendering/bars.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { Scale } from '../../../scales';
import { ScaleType } from '../../../scales/constants';
import { CanvasTextBBoxCalculator } from '../../../utils/bbox/canvas_text_bbox_calculator';
import { Color, mergePartial } from '../../../utils/common';
import { clamp, Color, mergePartial } from '../../../utils/common';
markov00 marked this conversation as resolved.
Show resolved Hide resolved
import { Dimensions } from '../../../utils/dimensions';
import { BandedAccessorType, BarGeometry } from '../../../utils/geometry';
import { BarSeriesStyle, DisplayValueStyle } from '../../../utils/themes/theme';
Expand Down Expand Up @@ -107,8 +107,24 @@ export function renderBars(
return;
}

const x = xScaled + xScale.bandwidth * orderIndex;
const width = xScale.bandwidth;
const seriesIdentifier: XYChartSeriesIdentifier = {
key: dataSeries.key,
specId: dataSeries.specId,
yAccessor: dataSeries.yAccessor,
splitAccessors: dataSeries.splitAccessors,
seriesKeys: dataSeries.seriesKeys,
smHorizontalAccessorValue: dataSeries.smHorizontalAccessorValue,
smVerticalAccessorValue: dataSeries.smVerticalAccessorValue,
};

const seriesStyle = getBarStyleOverrides(datum, seriesIdentifier, sharedSeriesStyle, styleAccessor);

const maxPixelWidth = clamp(seriesStyle.rect.widthRatio ?? 1, 0, 1) * xScale.bandwidth;
const minPixelWidth = clamp(seriesStyle.rect.widthPixel ?? 0, 0, maxPixelWidth);

const width = clamp(seriesStyle.rect.widthPixel ?? xScale.bandwidth, minPixelWidth, maxPixelWidth);
markov00 marked this conversation as resolved.
Show resolved Hide resolved
const x = xScaled + xScale.bandwidth * orderIndex + xScale.bandwidth / 2 - width / 2;

const originalY1Value = stackMode === StackMode.Percentage ? y1 - (y0 ?? 0) : initialY1;
const formattedDisplayValue =
displayValueSettings && displayValueSettings.valueFormatter
Expand Down Expand Up @@ -156,18 +172,6 @@ export function renderBars(
}
: undefined;

const seriesIdentifier: XYChartSeriesIdentifier = {
key: dataSeries.key,
specId: dataSeries.specId,
yAccessor: dataSeries.yAccessor,
splitAccessors: dataSeries.splitAccessors,
seriesKeys: dataSeries.seriesKeys,
smHorizontalAccessorValue: dataSeries.smHorizontalAccessorValue,
smVerticalAccessorValue: dataSeries.smVerticalAccessorValue,
};

const seriesStyle = getBarStyleOverrides(datum, seriesIdentifier, sharedSeriesStyle, styleAccessor);

const barGeometry: BarGeometry = {
displayValue,
x,
Expand Down
5 changes: 5 additions & 0 deletions src/utils/themes/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

import { $Values } from 'utility-types';

import { Pixels, Ratio } from '../../common/geometry';
import { Color, ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment } from '../common';
import { Margins, SimplePadding } from '../dimensions';

Expand Down Expand Up @@ -398,6 +399,10 @@ export interface RectStyle {
fill?: Color | ColorVariant;
/** the opacity of each rect on the theme/series */
opacity: number;
/** The width of the rect in pixel */
widthPixel?: Pixels;
/** The ratio of the width limited to [0,1] */
widthRatio?: Ratio;
markov00 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a comment here about using both?

If both are expressed, then the widthRatio will express the max available size, where the widthPixel express the derired/min width.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done 27f5971

}

/** @public */
Expand Down
11 changes: 8 additions & 3 deletions stories/stylings/10_custom_bars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { boolean, color, number } from '@storybook/addon-knobs';
import React from 'react';

import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src';
import { Axis, BarSeries, Chart, Position, ScaleType, Settings, RecursivePartial, Theme } from '../../src';
import * as TestDatasets from '../../src/utils/data_samples/test_dataset';

function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
Expand All @@ -39,7 +39,10 @@ function range(title: string, min: number, max: number, value: number, groupId?:

export const Example = () => {
const applyBarStyle = boolean('apply bar style (bar 1 series)', true, 'Chart Global Theme');

const changeRectWidthPixel = boolean('enable custom rect width (px)', false, 'Bar width');
const rectWidthPixel = range('rect width (px)', 0, 100, 30, 'Bar width', 1);
const changeRectWidthRatio = boolean('enable custom rect width (ratio)', false, 'Bar width');
const rectWidthRatio = range('rect width (ratio)', 0, 1, 0.5, 'Bar width', 0.01);
const barSeriesStyle = {
rectBorder: {
stroke: color('border stroke', 'blue', 'Bar 1 Style'),
Expand All @@ -52,7 +55,7 @@ export const Example = () => {
},
};

const theme = {
const theme: RecursivePartial<Theme> = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit

Suggested change
const theme: RecursivePartial<Theme> = {
const theme: PartialTheme = {

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done 27f5971

barSeriesStyle: {
rectBorder: {
stroke: color('theme border stroke', 'red', 'Chart Global Theme'),
Expand All @@ -61,6 +64,8 @@ export const Example = () => {
},
rect: {
opacity: range('theme opacity ', 0, 1, 0.9, 'Chart Global Theme', 0.1),
widthPixel: changeRectWidthPixel ? rectWidthPixel : undefined,
widthRatio: changeRectWidthRatio ? rectWidthRatio : undefined,
},
},
};
Expand Down