fix(highlighter): show default highlighted radius with hidden dots (#926

)

This commit fixed the highlighted radius on a line/area point when the markAccessor is configured by
the point visibility on the series is turned off

fix #679

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',
+        },
+      );
+    });
+  });
 });

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,

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 (
+    <Chart className="story-chart">
+      <Settings
+        showLegend
+        theme={{
+          markSizeRatio,
+          lineSeriesStyle: {
+            point: {
+              visible,
+            },
+          },
+        }}
+        debug={boolean('debug', false)}
+      />
+      <Axis id="bottom" position={Position.Bottom} title="Bottom axis" />
+      <Axis
+        id="left2"
+        title="Left axis"
+        position={Position.Left}
+        tickFormat={(d) => Number(d).toFixed(2)}
+        domain={{ max: 5 }}
+      />
+
+      <LineSeries
+        id="lines"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor="x"
+        yAccessors={['y']}
+        markSizeAccessor="z"
+        data={bubbleData}
+      />
+    </Chart>
+  );
+};
+
+Example.text = 'testing';

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';