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

fix: missing dash style in line annotation #692

Merged
merged 2 commits into from
Jun 1, 2020
Merged

fix: missing dash style in line annotation #692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3cc5715
fix: missing dash style in line annotation
markov00 Jun 1, 2020
217f713
docs: update API report
markov00 Jun 1, 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
19 changes: 6 additions & 13 deletions api/charts.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -764,14 +764,11 @@ export type LineAnnotationSpec = BaseAnnotationSpec<typeof AnnotationTypes.Line,
zIndex?: number;
};

// Warning: (ae-missing-release-tag) "LineAnnotationStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
// @public
export interface LineAnnotationStyle {
// (undocumented)
// @deprecated
details: TextStyle;
// (undocumented)
line: StrokeStyle & Opacity;
line: StrokeStyle & Opacity & Partial<StrokeDashArray>;
}

// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
Expand Down Expand Up @@ -1073,7 +1070,7 @@ export type RectAnnotationSpec = BaseAnnotationSpec<typeof AnnotationTypes.Recta
// Warning: (ae-missing-release-tag) "RectAnnotationStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity;
export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity & Partial<StrokeDashArray>;

// Warning: (ae-missing-release-tag) "RectBorderStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
Expand Down Expand Up @@ -1370,16 +1367,12 @@ export const SpecTypes: Readonly<{
// @public (undocumented)
export type SpecTypes = $Values<typeof SpecTypes>;

// Warning: (ae-missing-release-tag) "StrokeDashArray" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
markov00 marked this conversation as resolved.
Show resolved Hide resolved
//
// @public (undocumented)
// @public
export interface StrokeDashArray {
dash: number[];
}

// Warning: (ae-missing-release-tag) "StrokeStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
// @public
export interface StrokeStyle<C = Color> {
stroke: C;
strokeWidth: number;
Expand Down
Binary file modified ...sts-for-all-stories-annotations-lines-styling-visually-looks-correct-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.
1 change: 1 addition & 0 deletions src/chart_types/xy_chart/renderer/canvas/annotations/lines.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export function renderLineAnnotations(
const stroke: Stroke = {
color: strokeColor,
width: lineStyle.line.strokeWidth,
dash: lineStyle.line.dash,
};

renderMultiLine(ctx, lines, stroke);
Expand Down
24 changes: 22 additions & 2 deletions src/utils/themes/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ export interface SharedGeometryStateStyle {
unhighlighted: GeometryStateStyle;
}

/**
* The stroke color style
* @public
*/
export interface StrokeStyle<C = Color> {
/** The stroke color in hex, rgba, hsl */
stroke: C;
Expand All @@ -67,6 +71,10 @@ export interface StrokeStyle<C = Color> {

export type TickStyle = StrokeStyle & Visible;

/**
* The dash array for a stroke
* @public
*/
export interface StrokeDashArray {
/** The dash array for dashed strokes */
dash: number[];
Expand Down Expand Up @@ -303,12 +311,24 @@ export interface CrosshairStyle {
line: StrokeStyle & Visible & Partial<StrokeDashArray>;
}

/**
* The style for a linear annotation
* @public
*/
export interface LineAnnotationStyle {
line: StrokeStyle & Opacity;
/**
* The style for the line geometry
*/
line: StrokeStyle & Opacity & Partial<StrokeDashArray>;
/**
* The style for the text shown on the tooltip.
* @deprecated This style is not currently used and will
* soon be removed.
*/
details: TextStyle;
}

export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity;
export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity & Partial<StrokeDashArray>;

export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle = {
line: {
Expand Down
13 changes: 7 additions & 6 deletions stories/annotations/lines/5_styling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
LineAnnotationDatum,
ScaleType,
Settings,
LineAnnotationStyle,
} from '../../../src';
import { Icon } from '../../../src/components/icons/icon';
import { getChartRotationKnob } from '../../utils/knobs';
Expand All @@ -43,15 +44,15 @@ export const Example = () => {
const data = [2.5, 7.2];
const dataValues = generateAnnotationData(data);

const dashWidth = number('dash line width', 1);
const dashGapWidth = number('dash gap width', 0);
const dashWidth = number('dash line width', 5);
const dashGapWidth = number('dash gap width', 8);

const style = {
const style: Partial<LineAnnotationStyle> = {
line: {
strokeWidth: number('line stroke width', 3),
stroke: color('line & marker color', '#f00'),
strokeWidth: number('line stroke width', 5),
stroke: color('line & marker color', 'blue'),
dash: [dashWidth, dashGapWidth],
opacity: number('line opacity', 1, {
opacity: number('line opacity', 0.5, {
range: true,
min: 0,
max: 1,
Expand Down