Skip to content

Commit 196341b

Browse files
markov00markov00
authored
fix: reduce opacity for points when hovering over legend items (#322)
This commit reduce the opacity of points in areas and lines series when hovering over a series in the legend fix #291
1 parent b8dc9e1 commit 196341b

File tree

4 files changed

+111
-55
lines changed

4 files changed

+111
-55
lines changed

‎src/components/react_canvas/area_geometries.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,16 @@ export class AreaGeometries extends React.PureComponent<AreaGeometriesDataProps,
8888
}
8989
});
9090
areas.forEach((glyph, i) => {
91-
const { seriesPointStyle } = glyph;
91+
const { seriesPointStyle, geometryId } = glyph;
9292
if (seriesPointStyle.visible) {
93-
const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle);
93+
const customOpacity = seriesPointStyle ? seriesPointStyle.opacity : undefined;
94+
const geometryStyle = getGeometryStyle(
95+
geometryId,
96+
this.props.highlightedLegendItem,
97+
sharedStyle,
98+
customOpacity,
99+
);
100+
const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle, geometryStyle);
94101
elements.push(...this.renderPoints(glyph.points, i, pointStyleProps, glyph.geometryId));
95102
}
96103
});
@@ -102,15 +109,22 @@ export class AreaGeometries extends React.PureComponent<AreaGeometriesDataProps,
102109
highlightedLegendItem: LegendItem | null,
103110
): JSX.Element[] => {
104111
return areas.reduce<JSX.Element[]>((acc, glyph, i) => {
105-
const { seriesAreaLineStyle, seriesAreaStyle, seriesPointStyle } = glyph;
112+
const { seriesAreaLineStyle, seriesAreaStyle, seriesPointStyle, geometryId } = glyph;
106113
if (seriesAreaStyle.visible) {
107114
acc.push(this.renderArea(glyph, sharedStyle, highlightedLegendItem));
108115
}
109116
if (seriesAreaLineStyle.visible) {
110117
acc.push(...this.renderAreaLines(glyph, i, sharedStyle, highlightedLegendItem));
111118
}
112119
if (seriesPointStyle.visible) {
113-
const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle);
120+
const customOpacity = seriesPointStyle ? seriesPointStyle.opacity : undefined;
121+
const geometryStyle = getGeometryStyle(
122+
geometryId,
123+
this.props.highlightedLegendItem,
124+
sharedStyle,
125+
customOpacity,
126+
);
127+
const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle, geometryStyle);
114128
acc.push(...this.renderPoints(glyph.points, i, pointStyleProps, glyph.geometryId));
115129
}
116130
return acc;

‎src/components/react_canvas/line_geometries.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export class LineGeometries extends React.PureComponent<LineGeometriesDataProps,
7272
}
7373

7474
if (seriesPointStyle.visible) {
75-
acc.push(...this.getPointToRender(glyph, key));
75+
acc.push(...this.getPointToRender(glyph, sharedStyle, key));
7676
}
7777
return acc;
7878
}, []);
@@ -86,10 +86,11 @@ export class LineGeometries extends React.PureComponent<LineGeometriesDataProps,
8686
return <Path {...lineProps} key={key} />;
8787
}
8888

89-
getPointToRender(glyph: LineGeometry, key: string) {
90-
const { points, color, seriesPointStyle } = glyph;
91-
92-
const pointStyleProps = buildPointStyleProps(color, seriesPointStyle);
89+
getPointToRender(glyph: LineGeometry, sharedStyle: SharedGeometryStyle, key: string) {
90+
const { points, color, geometryId, seriesPointStyle } = glyph;
91+
const customOpacity = seriesPointStyle ? seriesPointStyle.opacity : undefined;
92+
const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle, customOpacity);
93+
const pointStyleProps = buildPointStyleProps(color, seriesPointStyle, geometryStyle);
9394
return this.renderPoints(points, key, pointStyleProps);
9495
}
9596
}

‎src/components/react_canvas/utils/rendering_props_utils.test.ts‎

Lines changed: 81 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,18 @@ import {
1313

1414
describe('[canvas] Area Geometries props', () => {
1515
test('can build area point props', () => {
16-
const pointStyleProps = buildPointStyleProps('red', {
17-
visible: true,
18-
radius: 30,
19-
strokeWidth: 2,
20-
opacity: 0.5,
21-
});
16+
const pointStyleProps = buildPointStyleProps(
17+
'red',
18+
{
19+
visible: true,
20+
radius: 30,
21+
strokeWidth: 2,
22+
opacity: 0.5,
23+
},
24+
{
25+
opacity: 0.2,
26+
},
27+
);
2228

2329
const props = buildPointRenderProps(10, 20, pointStyleProps);
2430
expect(props).toEqual({
@@ -29,19 +35,25 @@ describe('[canvas] Area Geometries props', () => {
2935
strokeEnabled: true,
3036
stroke: 'red',
3137
fill: 'red',
32-
opacity: 0.5,
38+
opacity: 0.2,
3339
strokeHitEnabled: false,
3440
perfectDrawEnabled: false,
3541
listening: false,
3642
});
3743

38-
const noStrokePointStyleProps = buildPointStyleProps('blue', {
39-
visible: true,
40-
radius: 30,
41-
stroke: 'red',
42-
strokeWidth: 0,
43-
opacity: 0.5,
44-
});
44+
const noStrokePointStyleProps = buildPointStyleProps(
45+
'blue',
46+
{
47+
visible: true,
48+
radius: 30,
49+
stroke: 'red',
50+
strokeWidth: 0,
51+
opacity: 0.5,
52+
},
53+
{
54+
opacity: 0.2,
55+
},
56+
);
4557

4658
const propsNoStroke = buildPointRenderProps(10, 20, noStrokePointStyleProps);
4759
expect(propsNoStroke).toEqual({
@@ -52,19 +64,25 @@ describe('[canvas] Area Geometries props', () => {
5264
strokeEnabled: false,
5365
stroke: 'red',
5466
fill: 'blue',
55-
opacity: 0.5,
67+
opacity: 0.2,
5668
strokeHitEnabled: false,
5769
perfectDrawEnabled: false,
5870
listening: false,
5971
});
6072

61-
const seriesPointStyleProps = buildPointStyleProps('violet', {
62-
visible: true,
63-
fill: 'pink',
64-
radius: 123,
65-
strokeWidth: 456,
66-
opacity: 789,
67-
});
73+
const seriesPointStyleProps = buildPointStyleProps(
74+
'violet',
75+
{
76+
visible: true,
77+
fill: 'pink',
78+
radius: 123,
79+
strokeWidth: 456,
80+
opacity: 789,
81+
},
82+
{
83+
opacity: 0.2,
84+
},
85+
);
6886
const seriesPointStyle = buildPointRenderProps(10, 20, seriesPointStyleProps);
6987
expect(seriesPointStyle).toEqual({
7088
x: 10,
@@ -74,7 +92,7 @@ describe('[canvas] Area Geometries props', () => {
7492
strokeEnabled: true,
7593
stroke: 'violet',
7694
fill: 'pink',
77-
opacity: 789,
95+
opacity: 0.2,
7896
strokeHitEnabled: false,
7997
perfectDrawEnabled: false,
8098
listening: false,
@@ -194,12 +212,18 @@ describe('[canvas] Area Geometries props', () => {
194212

195213
describe('[canvas] Line Geometries', () => {
196214
test('can build line point props', () => {
197-
const pointStyleProps = buildPointStyleProps('pink', {
198-
visible: true,
199-
radius: 30,
200-
strokeWidth: 2,
201-
opacity: 0.5,
202-
});
215+
const pointStyleProps = buildPointStyleProps(
216+
'pink',
217+
{
218+
visible: true,
219+
radius: 30,
220+
strokeWidth: 2,
221+
opacity: 0.5,
222+
},
223+
{
224+
opacity: 0.2,
225+
},
226+
);
203227

204228
const props = buildPointRenderProps(10, 20, pointStyleProps);
205229
expect(props).toEqual({
@@ -210,18 +234,24 @@ describe('[canvas] Line Geometries', () => {
210234
strokeEnabled: true,
211235
stroke: 'pink',
212236
fill: 'pink',
213-
opacity: 0.5,
237+
opacity: 0.2,
214238
strokeHitEnabled: false,
215239
perfectDrawEnabled: false,
216240
listening: false,
217241
});
218242

219-
const noStrokeStyleProps = buildPointStyleProps('pink', {
220-
visible: true,
221-
radius: 30,
222-
strokeWidth: 0,
223-
opacity: 0.5,
224-
});
243+
const noStrokeStyleProps = buildPointStyleProps(
244+
'pink',
245+
{
246+
visible: true,
247+
radius: 30,
248+
strokeWidth: 0,
249+
opacity: 0.5,
250+
},
251+
{
252+
opacity: 0.2,
253+
},
254+
);
225255
const propsNoStroke = buildPointRenderProps(10, 20, noStrokeStyleProps);
226256
expect(propsNoStroke).toEqual({
227257
x: 10,
@@ -231,19 +261,25 @@ describe('[canvas] Line Geometries', () => {
231261
strokeEnabled: false,
232262
stroke: 'pink',
233263
fill: 'pink',
234-
opacity: 0.5,
264+
opacity: 0.2,
235265
strokeHitEnabled: false,
236266
perfectDrawEnabled: false,
237267
listening: false,
238268
});
239269

240-
const seriesPointStyleProps = buildPointStyleProps('pink', {
241-
stroke: 'series-stroke',
242-
strokeWidth: 6,
243-
visible: true,
244-
radius: 12,
245-
opacity: 18,
246-
});
270+
const seriesPointStyleProps = buildPointStyleProps(
271+
'pink',
272+
{
273+
stroke: 'series-stroke',
274+
strokeWidth: 6,
275+
visible: true,
276+
radius: 12,
277+
opacity: 18,
278+
},
279+
{
280+
opacity: 0.2,
281+
},
282+
);
247283
const seriesPointStyle = buildPointRenderProps(10, 20, seriesPointStyleProps);
248284
expect(seriesPointStyle).toEqual({
249285
x: 10,
@@ -253,7 +289,7 @@ describe('[canvas] Line Geometries', () => {
253289
strokeEnabled: true,
254290
stroke: 'series-stroke',
255291
fill: 'pink',
256-
opacity: 18,
292+
opacity: 0.2,
257293
strokeHitEnabled: false,
258294
perfectDrawEnabled: false,
259295
listening: false,

‎src/components/react_canvas/utils/rendering_props_utils.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,11 @@ export function buildBarValueProps({
240240
* @param color the series color
241241
* @param pointStyle the merged point style
242242
*/
243-
export function buildPointStyleProps(color: string, pointStyle: PointStyle): PointStyleProps {
243+
export function buildPointStyleProps(
244+
color: string,
245+
pointStyle: PointStyle,
246+
geometryStyle: GeometryStyle,
247+
): PointStyleProps {
244248
const { strokeWidth, opacity } = pointStyle;
245249
const stroke = pointStyle.stroke || color;
246250
const fill = pointStyle.fill || color;
@@ -251,6 +255,7 @@ export function buildPointStyleProps(color: string, pointStyle: PointStyle): Poi
251255
strokeEnabled: strokeWidth !== 0,
252256
fill: fill,
253257
opacity,
258+
...geometryStyle,
254259
};
255260
}
256261

0 commit comments

Comments
 (0)