Skip to content

Commit a49bfb7

Browse files
kuzmadomkuzmadom
committed
feat(scatter): add dataLabels to scatter series
1 parent 9093fc0 commit a49bfb7

24 files changed

+458
-207
lines changed

‎src/__snapshots__/scatter-series.visual.test.tsx-snapshots/Scatter-series-Data-labels-Basic-two-series-1-chromium-linux.png‎

11.6 KB
Loading

‎src/__snapshots__/scatter-series.visual.test.tsx-snapshots/Scatter-series-Data-labels-Custom-label-value-via-label-field-1-chromium-linux.png‎

6.14 KB
Loading

‎src/__snapshots__/scatter-series.visual.test.tsx-snapshots/Scatter-series-Data-labels-Html-labels-1-chromium-linux.png‎

5.38 KB
Loading

‎src/__snapshots__/scatter-series.visual.test.tsx-snapshots/Scatter-series-Data-labels-Overlapping-labels-hidden-by-default-1-chromium-linux.png‎

6.04 KB
Loading

‎src/__snapshots__/scatter-series.visual.test.tsx-snapshots/Scatter-series-Data-labels-Positioning-of-extreme-point-dataLabels-1-chromium-linux.png‎

5.72 KB
Loading

‎src/__snapshots__/scatter-series.visual.test.tsx-snapshots/Scatter-series-Data-labels-allowOverlap-shows-all-labels-1-chromium-linux.png‎

6.32 KB
Loading

‎src/__stories__/Scatter/Scatter.stories.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react';
22

33
import {Chart} from '../../components';
44
import {ChartStory} from '../ChartStory';
5-
import {scatterBasicData, scatterPlaygroundData} from '../__data__';
5+
import {scatterBasicData, scatterDataLabelsData, scatterPlaygroundData} from '../__data__';
66
import {scatterContinuousLegendData} from '../__data__/scatter/continuous-legend';
77

88
const meta: Meta<typeof Chart> = {
@@ -30,6 +30,13 @@ export const ScatterContinuousLegend = {
3030
},
3131
} satisfies Story;
3232

33+
export const ScatterDataLabels = {
34+
name: 'Data labels',
35+
args: {
36+
data: scatterDataLabelsData,
37+
},
38+
} satisfies Story;
39+
3340
export const ScatterPlayground = {
3441
name: 'Playground',
3542
args: {

‎src/__stories__/__data__/scatter/data-labels.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type {ChartData, ScatterSeries} from '../../../types';
2+
3+
function prepareData(): ChartData {
4+
return {
5+
series: {
6+
data: [
7+
{
8+
type: 'scatter',
9+
name: 'Series 1',
10+
data: [
11+
{x: 1, y: 10, label: 'A (10)'},
12+
{x: 2, y: 40, label: 'B (40)'},
13+
{x: 3, y: 25, label: 'C (25)'},
14+
{x: 4, y: 60, label: 'D (60)'},
15+
{x: 5, y: 15, label: 'E (15)'},
16+
],
17+
dataLabels: {
18+
enabled: true,
19+
},
20+
},
21+
{
22+
type: 'scatter',
23+
name: 'Series 2',
24+
data: [
25+
{x: 1, y: 50, label: 'F (50)'},
26+
{x: 2, y: 20, label: 'G (20)'},
27+
{x: 3, y: 70, label: 'H (70)'},
28+
{x: 4, y: 35, label: 'I (35)'},
29+
{x: 5, y: 55, label: 'J (55)'},
30+
],
31+
dataLabels: {
32+
enabled: true,
33+
},
34+
},
35+
] as ScatterSeries[],
36+
},
37+
};
38+
}
39+
40+
export const scatterDataLabelsData = prepareData();

‎src/__stories__/__data__/scatter/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './basic';
22
export * from './continuous-legend';
3+
export * from './data-labels';
34
export * from './linear-x-axis';
45
export * from './null-modes';
56
export * from './playground';

‎src/__tests__/scatter-series.visual.test.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {ChartTestStory} from '../../playwright/components/ChartTestStory';
88
import {
99
scatterBasicData,
1010
scatterContinuousLegendData,
11+
scatterDataLabelsData,
1112
scatterNullModeSkipLinearXData,
1213
scatterNullModeZeroLinearXData,
1314
} from '../__stories__/__data__';
@@ -175,4 +176,119 @@ test.describe('Scatter series', () => {
175176
const component = await mount(<ChartTestStory data={scatterNullModeZeroLinearXData} />);
176177
await expect(component.locator('svg')).toHaveScreenshot();
177178
});
179+
180+
test.describe('Data labels', () => {
181+
test('Basic (two series)', async ({mount}) => {
182+
const component = await mount(<ChartTestStory data={scatterDataLabelsData} />);
183+
await expect(component.locator('svg')).toHaveScreenshot();
184+
});
185+
186+
test('Positioning of extreme point dataLabels', async ({mount}) => {
187+
const data: ChartData = {
188+
series: {
189+
data: [
190+
{
191+
type: 'scatter',
192+
name: '',
193+
data: [
194+
{x: 0, y: 0, label: 'left-bottom'},
195+
{x: 0, y: 10, label: 'left-top'},
196+
{x: 10, y: 10, label: 'right-top'},
197+
{x: 10, y: 0, label: 'right-bottom'},
198+
],
199+
dataLabels: {enabled: true},
200+
},
201+
],
202+
},
203+
yAxis: [{maxPadding: 0}],
204+
xAxis: {maxPadding: 0},
205+
};
206+
const component = await mount(<ChartTestStory data={data} />);
207+
await expect(component.locator('svg')).toHaveScreenshot();
208+
});
209+
210+
test('Custom label value via label field', async ({mount}) => {
211+
const data: ChartData = {
212+
series: {
213+
data: [
214+
{
215+
type: 'scatter',
216+
name: 'Series',
217+
data: [
218+
{x: 1, y: 10, label: 'alpha'},
219+
{x: 2, y: 20, label: 'beta'},
220+
{x: 3, y: 15, label: 'gamma'},
221+
],
222+
dataLabels: {enabled: true},
223+
},
224+
],
225+
},
226+
};
227+
const component = await mount(<ChartTestStory data={data} />);
228+
await expect(component.locator('svg')).toHaveScreenshot();
229+
});
230+
231+
test('Html labels', async ({mount}) => {
232+
const data: ChartData = {
233+
series: {
234+
data: [
235+
{
236+
type: 'scatter',
237+
name: 'Series',
238+
data: [
239+
{x: 1, y: 10, label: '<b>A</b>'},
240+
{x: 2, y: 20, label: '<b>B</b>'},
241+
{x: 3, y: 15, label: '<b>C</b>'},
242+
],
243+
dataLabels: {enabled: true, html: true},
244+
},
245+
],
246+
},
247+
};
248+
const component = await mount(<ChartTestStory data={data} />);
249+
await expect(component.locator('svg')).toHaveScreenshot();
250+
});
251+
252+
test('Overlapping labels hidden by default', async ({mount}) => {
253+
const data: ChartData = {
254+
series: {
255+
data: [
256+
{
257+
type: 'scatter',
258+
name: 'Series',
259+
data: [
260+
{x: 1, y: 10, label: 'close-1'},
261+
{x: 1.05, y: 10.5, label: 'close-2'},
262+
{x: 5, y: 50, label: 'far'},
263+
],
264+
dataLabels: {enabled: true},
265+
},
266+
],
267+
},
268+
};
269+
const component = await mount(<ChartTestStory data={data} />);
270+
await expect(component.locator('svg')).toHaveScreenshot();
271+
});
272+
273+
test('allowOverlap shows all labels', async ({mount}) => {
274+
const data: ChartData = {
275+
series: {
276+
data: [
277+
{
278+
type: 'scatter',
279+
name: 'Series',
280+
data: [
281+
{x: 1, y: 10, label: 'close-1'},
282+
{x: 1.05, y: 10.5, label: 'close-2'},
283+
{x: 5, y: 50, label: 'far'},
284+
],
285+
dataLabels: {enabled: true, allowOverlap: true},
286+
},
287+
],
288+
},
289+
};
290+
const component = await mount(<ChartTestStory data={data} />);
291+
await expect(component.locator('svg')).toHaveScreenshot();
292+
});
293+
});
178294
});

0 commit comments

Comments
 (0)