Skip to content

Commit 8eb4ede

Browse files
authored
fix(waffle): remove alpha artifacts (#2139)
This commit fixes artifacts when rendering the waffle chart using semi-opaque colors.
1 parent bfa4125 commit 8eb4ede

7 files changed

Lines changed: 21 additions & 14 deletions

File tree

-216 Bytes
Loading
-207 Bytes
Loading
10.6 KB
Loading
-172 Bytes
Loading

e2e/tests/waffle_stories.test.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,9 @@ test.describe('Waffle', () => {
1616
'http://localhost:9001/?path=/story/waffle-alpha--simple&globals=theme:light&knob-show table for debugging=&knob-ascending sort=true',
1717
);
1818
});
19+
test('no stroke artifacts when using semi-transparent colors', async ({ page }) => {
20+
await common.expectChartAtUrlToMatchScreenshot(page)(
21+
'http://localhost:9001/?path=/story/waffle-alpha--test&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;theme:light&knob-use alpha=true',
22+
);
23+
});
1924
});

packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,23 +41,22 @@ export function renderWrappedPartitionCanvas2d(
4141

4242
const fWidth = x1 - x0;
4343
const fPadding = Math.min(padding, MAX_PADDING_RATIO * fWidth);
44-
const paintedWidth = fWidth - fPadding;
45-
const paintedHeight = y1 - y0 - padding;
46-
const cornerRadius = 2 * cornerRatio * Math.min(paintedWidth, paintedHeight);
47-
const halfRadius = cornerRadius / 2;
44+
const w = fWidth - fPadding;
45+
const h = y1 - y0 - padding;
46+
const x = x0 + fPadding;
47+
const y = y0 + padding / 2;
48+
const r = cornerRatio * Math.min(w, h);
4849

4950
ctx.fillStyle = fillColor;
50-
ctx.strokeStyle = fillColor;
51-
ctx.lineWidth = cornerRadius;
51+
5252
ctx.beginPath();
53-
ctx.rect(
54-
x0 + fPadding + halfRadius,
55-
y0 + padding / 2 + halfRadius,
56-
paintedWidth - cornerRadius,
57-
paintedHeight - cornerRadius,
58-
);
53+
ctx.moveTo(x + r, y);
54+
ctx.arcTo(x + w, y, x + w, y + h, r);
55+
ctx.arcTo(x + w, y + h, x, y + h, r);
56+
ctx.arcTo(x, y + h, x, y, r);
57+
ctx.arcTo(x, y, x + w, y, r);
58+
ctx.closePath();
5959
ctx.fill();
60-
ctx.stroke();
6160
});
6261

6362
ctx.restore();

storybook/stories/waffle/2_test.story.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* Side Public License, v 1.
77
*/
88

9+
import { boolean } from '@storybook/addon-knobs';
910
import React from 'react';
1011

1112
import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
@@ -15,6 +16,7 @@ import { useBaseTheme } from '../../use_base_theme';
1516
import { colorBrewerCategoricalStark9, discreteColor, productPriceLookup } from '../utils/utils';
1617

1718
export const Example: ChartsStory = (_, { title, description }) => {
19+
const useOpaqueColor = boolean('use alpha', false);
1820
return (
1921
<Chart title={title} description={description} className="story-chart">
2022
<Settings
@@ -45,7 +47,8 @@ export const Example: ChartsStory = (_, { title, description }) => {
4547
groupByRollup: (d: Datum) => d.products_price,
4648
nodeLabel: (d: Datum) => productPriceLookup[d].name,
4749
shape: {
48-
fillColor: (nodeKey, sortIndex) => discreteColor(colorBrewerCategoricalStark9.slice(1))(sortIndex),
50+
fillColor: (nodeKey, sortIndex) =>
51+
discreteColor(colorBrewerCategoricalStark9.slice(1), useOpaqueColor ? 0.5 : 1)(sortIndex),
4952
},
5053
},
5154
]}

0 commit comments

Comments
 (0)