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

feat(bar_chart): add shadow prop for value labels #785

Merged
merged 13 commits into from
Oct 13, 2020
Merged

feat(bar_chart): add shadow prop for value labels #785

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9c0d1be
feat(bar_chart): add shadow prop for value labels
dej611 Aug 18, 2020
f2d0f69
docs: sync API with new labels shadow feature
dej611 Sep 28, 2020
7051c92
feat: implement textInverted logic for value labels
dej611 Oct 7, 2020
8570d67
chore: remove shadow reference in demo
dej611 Oct 7, 2020
e42ad56
docs: sync new API for fill value
dej611 Oct 7, 2020
0499acc
test: add missing test snapshot
dej611 Oct 7, 2020
14a26f2
feat: implemented various suggestions from review
dej611 Oct 12, 2020
0035949
Merge remote-tracking branch 'upstream/master' into feature/value-lab…
dej611 Oct 12, 2020
bf9b841
docs: updated api changes
dej611 Oct 12, 2020
5857623
test: remade snapshot image
dej611 Oct 12, 2020
86dad5d
Merge remote-tracking branch 'upstream/master' into feature/value-lab…
dej611 Oct 13, 2020
58a5651
refactor: armonize with latest master and alignment pr
dej611 Oct 13, 2020
5777029
test: fixing visual snapshots for new features
dej611 Oct 13, 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
1 change: 1 addition & 0 deletions api/charts.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -538,6 +538,7 @@ export interface DisplayValueSpec {
export type DisplayValueStyle = TextStyle & {
offsetX: number;
offsetY: number;
shadowColor?: Color;
};

// @public (undocumented)
Expand Down
7 changes: 7 additions & 0 deletions src/chart_types/xy_chart/renderer/canvas/primitives/text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export function renderText(
fontSize: number;
align: TextAlign;
baseline: TextBaseline;
shadow?: string;
},
degree: number = 0,
translation?: Partial<Point>,
Expand All @@ -49,6 +50,12 @@ export function renderText(
if (translation?.x || translation?.y) {
ctx.translate(translation?.x ?? 0, translation?.y ?? 0);
}
if (font.shadow) {
ctx.lineWidth = 1.5;
ctx.strokeStyle = font.shadow;
ctx.strokeText(text, origin.x, origin.y);
ctx.shadowBlur = 0;
Copy link
Member

Choose a reason for hiding this comment

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

shadowBlur is by default 0, probably you want to disable the shadowBlur if configured in the context somewhere else and probably before writing the stroke, so moving this before the strokeText call or before the if statement you want to apply that reset also to the fillText

}
ctx.fillText(text, origin.x, origin.y);
});
});
Expand Down
3 changes: 2 additions & 1 deletion src/chart_types/xy_chart/renderer/canvas/values/bar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ interface BarValuesProps {
/** @internal */
export function renderBarValues(ctx: CanvasRenderingContext2D, props: BarValuesProps) {
const { bars, debug, chartRotation, chartDimensions, theme } = props;
const { fontFamily, fontStyle, fill, fontSize } = theme.barSeriesStyle.displayValue;
const { fontFamily, fontStyle, fill, fontSize, shadowColor } = theme.barSeriesStyle.displayValue;
const barsLength = bars.length;
for (let i = 0; i < barsLength; i++) {
const { displayValue } = bars[i];
Expand Down Expand Up @@ -93,6 +93,7 @@ export function renderBarValues(ctx: CanvasRenderingContext2D, props: BarValuesP
fontSize,
align,
baseline,
shadow: shadowColor,
},
-chartRotation,
);
Expand Down
1 change: 1 addition & 0 deletions src/utils/themes/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,7 @@ export type PartialTheme = RecursivePartial<Theme>;
export type DisplayValueStyle = TextStyle & {
offsetX: number;
offsetY: number;
shadowColor?: Color;
};

export interface PointStyle {
Expand Down
1 change: 1 addition & 0 deletions stories/bar/2_label_value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const Example = () => {
fontStyle: 'normal',
padding: 0,
fill: color('value color', '#000'),
Copy link
Contributor

@miukimiu miukimiu Sep 28, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I've been testing and I think for the example white fill color looks better with a dark shadow:

Suggested change
fill: color('value color', '#000'),
fill: color('value color', '#fff'),

bars charts value@2x

Copy link
Contributor

@miukimiu miukimiu Sep 28, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I also increased the size of the value font size to 12.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Do you think it should be a default setting or just a better starting point for this example?

Copy link
Contributor

Choose a reason for hiding this comment

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

I was seeing the other charts where we have labels/values on top and normally they are black or with textInvertible: true

Screenshot 2020-09-28 at 14 42 08

So for consistency, I think we should keep the value labels black and just increase the size to 12.

How do you feel of then creating a second example to show that the value label can be customized? In this new example, you would use white value labels with a shadow.

Copy link
Collaborator

Choose a reason for hiding this comment

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

@miukimiu which would you prefer?

  1. Changing color contrast of the shadow
  2. Changing color contrast of the text itself
  3. Either of the above depending on if a shadow is enabled

Copy link
Contributor Author

Choose a reason for hiding this comment

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

From my understanding when it flips the color on text the shadow should change too.
But you are right, there is also the additional scenario where the shadow is not enabled (transparent?) and only the text changes.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yeah thats true but I was actually thinking that the shadow be null or undefined, as it's not needed when the text contrast is dynamic.

shadowColor: color('shadow color', 'transparent'),
Copy link
Contributor

@miukimiu miukimiu Sep 28, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I think we should enforce the use of a shadow:

Suggested change
shadowColor: color('shadow color', 'transparent'),
shadowColor: color('shadow color', 'rgba(0,0,0,1)'),

Copy link
Collaborator

Choose a reason for hiding this comment

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

by default in the chart config or just on this one story?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Forgotten to report here, just the story.

offsetX: number('offsetX', 0),
offsetY: number('offsetY', 0),
},
Expand Down