diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-line-with-mark-accessor-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-line-with-mark-accessor-visually-looks-correct-1-snap.png new file mode 100644 index 00000000000..0bc5f8e2df5 Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-line-with-mark-accessor-visually-looks-correct-1-snap.png differ diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-line-with-mark-accessor-with-hidden-points-default-point-highlighter-size-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-line-with-mark-accessor-with-hidden-points-default-point-highlighter-size-1-snap.png new file mode 100644 index 00000000000..0b41883545b Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-line-with-mark-accessor-with-hidden-points-default-point-highlighter-size-1-snap.png differ diff --git a/packages/osd-charts/integration/tests/line_stories.test.ts b/packages/osd-charts/integration/tests/line_stories.test.ts index b6059c20eaa..9e9b137fbea 100644 --- a/packages/osd-charts/integration/tests/line_stories.test.ts +++ b/packages/osd-charts/integration/tests/line_stories.test.ts @@ -69,4 +69,16 @@ describe('Line series stories', () => { ); }); }); + + describe('Line with mark accessor', () => { + it('with hidden points, default point highlighter size', async () => { + await common.expectChartWithMouseAtUrlToMatchScreenshot( + 'http://localhost:9001/?path=/story/line-chart--line-with-mark-accessor&knob-markSizeRatio=10&knob-show line points=false&knob-debug=', + { left: 115, top: 170 }, + { + screenshotSelector: '#story-root', + }, + ); + }); + }); }); diff --git a/packages/osd-charts/src/chart_types/xy_chart/state/utils/utils.ts b/packages/osd-charts/src/chart_types/xy_chart/state/utils/utils.ts index a4df37f610c..bcf579410b1 100644 --- a/packages/osd-charts/src/chart_types/xy_chart/state/utils/utils.ts +++ b/packages/osd-charts/src/chart_types/xy_chart/state/utils/utils.ts @@ -544,7 +544,7 @@ function renderGeometries( xScaleOffset, lineSeriesStyle, { - enabled: spec.markSizeAccessor !== undefined, + enabled: spec.markSizeAccessor !== undefined && lineSeriesStyle.point.visible, ratio: chartTheme.markSizeRatio, }, spec.pointStyleAccessor, @@ -577,7 +577,7 @@ function renderGeometries( xScaleOffset, areaSeriesStyle, { - enabled: spec.markSizeAccessor !== undefined, + enabled: spec.markSizeAccessor !== undefined && areaSeriesStyle.point.visible, ratio: chartTheme.markSizeRatio, }, spec.stackAccessors ? spec.stackAccessors.length > 0 : false, diff --git a/packages/osd-charts/stories/line/13_line_mark_accessor.tsx b/packages/osd-charts/stories/line/13_line_mark_accessor.tsx new file mode 100644 index 00000000000..fdeb40c0b5b --- /dev/null +++ b/packages/osd-charts/stories/line/13_line_mark_accessor.tsx @@ -0,0 +1,79 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { number, boolean } from '@storybook/addon-knobs'; +import React from 'react'; + +import { Axis, Chart, Position, ScaleType, Settings, LineSeries } from '../../src'; +import { getRandomNumberGenerator } from '../../src/mocks/utils'; + +const rng = getRandomNumberGenerator(); +const bubbleData = new Array(30).fill(0).map((_, i) => ({ + x: i, + y: rng(2, 3, 2), + z: rng(0, 20), +})); + +export const Example = () => { + const markSizeRatio = number('markSizeRatio', 10, { + range: true, + min: 1, + max: 20, + step: 1, + }); + + const visible = boolean('show line points', true); + + return ( + + + + Number(d).toFixed(2)} + domain={{ max: 5 }} + /> + + + + ); +}; + +Example.text = 'testing'; diff --git a/packages/osd-charts/stories/line/line.stories.tsx b/packages/osd-charts/stories/line/line.stories.tsx index 813bd5a73a6..af10bcfeeef 100644 --- a/packages/osd-charts/stories/line/line.stories.tsx +++ b/packages/osd-charts/stories/line/line.stories.tsx @@ -38,3 +38,4 @@ export { Example as multiSeriesWithLogValues } from './9_multi_series'; export { Example as discontinuousDataPoints } from './11_discontinuous_data_points'; export { Example as testOrphanDataPoints } from './12_orphan_data_points'; export { Example as testPathOrdering } from './10_test_path_ordering'; +export { Example as lineWithMarkAccessor } from './13_line_mark_accessor';