Skip to content

Commit da1eac7

Browse files
envexenvex
committed
Focus and tooltip placement around unsafe are
1 parent 1ba736d commit da1eac7

File tree

24 files changed

+507
-605
lines changed

24 files changed

+507
-605
lines changed

Diff for: ‎packages/polaris-viz-core/src/utilities/getColorVisionEventAttrs.ts

-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,5 @@ export function getColorVisionEventAttrs({type, index, watch = true}: Props) {
1111
[`${COLOR_VISION_EVENT.dataAttribute}-watch`]: watch,
1212
[`${COLOR_VISION_EVENT.dataAttribute}-type`]: type,
1313
[`${COLOR_VISION_EVENT.dataAttribute}-index`]: index,
14-
['data-tooltip-type']: 'blah',
1514
};
1615
}

Diff for: ‎packages/polaris-viz/src/components/BarChart/stories/data.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const DEFAULT_DATA: DataSeries[] = [
1212
{
1313
name: 'Breakfast',
1414
data: [
15-
{key: 'Monday', value: 3},
15+
{key: 'Monday', value: 20},
1616
{key: 'Tuesday', value: -7},
1717
{key: 'Wednesday', value: -7},
1818
{key: 'Thursday', value: -8},

Diff for: ‎packages/polaris-viz/src/components/BarChart/stories/playground/ExternalTooltip.stories.tsx

+37-6
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,31 @@ import type {BarChartProps} from '../../BarChart';
44
import {BarChart} from '../../BarChart';
55
import {META} from '../meta';
66
import {useState} from 'react';
7+
import {LineChart} from '../../../LineChart';
8+
import {DonutChart} from '../../../DonutChart';
9+
import {SimpleBarChart} from '../../../SimpleBarChart';
710

811
export default {
912
...META,
1013
title: `${META.title}/Playground`,
1114
decorators: [],
1215
};
1316

14-
function Card(args: BarChartProps) {
17+
const CHART_TYPES = {
18+
BarChart: BarChart,
19+
LineChart: LineChart,
20+
DonutChart: DonutChart,
21+
HorizontalBarChart: BarChart,
22+
SimpleBarChart: SimpleBarChart,
23+
};
24+
25+
interface CardProps extends BarChartProps {
26+
chartType?: string;
27+
}
28+
29+
function Card(args: CardProps) {
30+
const Chart = CHART_TYPES[args.chartType ?? 'BarChart'];
31+
1532
return (
1633
<div
1734
style={{
@@ -22,20 +39,34 @@ function Card(args: BarChartProps) {
2239
padding: 10,
2340
}}
2441
>
25-
<BarChart {...args} />
42+
<Chart
43+
{...args}
44+
direction={args.chartType === 'BarChart' ? 'vertical' : 'horizontal'}
45+
/>
2646
</div>
2747
);
2848
}
2949

3050
const Template: Story<BarChartProps> = (args: BarChartProps) => {
51+
const [chartType, setChartType] = useState<string>('BarChart');
52+
3153
return (
3254
<div style={{overflow: 'auto'}}>
33-
<Card {...args} />
55+
<div style={{position: 'fixed', top: 0, right: 0}}>
56+
<select onChange={(e) => setChartType(e.target.value)}>
57+
<option>BarChart</option>
58+
<option>LineChart</option>
59+
<option>DonutChart</option>
60+
<option>HorizontalBarChart</option>
61+
<option>SimpleBarChart</option>
62+
</select>
63+
</div>
64+
<Card {...args} chartType={chartType} />
3465
<div style={{height: 700, width: 10}} />
3566
<div style={{display: 'flex', justifyContent: 'space-between'}}>
36-
<Card {...args} />
37-
<Card {...args} />
38-
<Card {...args} />
67+
<Card {...args} chartType={chartType} />
68+
<Card {...args} chartType={chartType} />
69+
<Card {...args} chartType={chartType} />
3970
</div>
4071
</div>
4172
);

Diff for: ‎packages/polaris-viz/src/components/ComboChart/Chart.tsx

-19
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import {useState} from 'react';
22
import * as React from 'react';
33
import {
4-
ChartMargin,
5-
DataType,
64
COLOR_VISION_SINGLE_ITEM,
75
useTheme,
86
useChartPositions,
97
LINE_HEIGHT,
10-
InternalChartType,
118
} from '@shopify/polaris-viz-core';
129
import type {
1310
DataGroup,
@@ -23,7 +20,6 @@ import {
2320
checkAvailableAnnotations,
2421
YAxisAnnotations,
2522
} from '../Annotations';
26-
import {TooltipWrapper} from '../TooltipWrapper';
2723
import type {
2824
AnnotationLookupTable,
2925
RenderLegendContent,
@@ -317,21 +313,6 @@ export function Chart({
317313
)}
318314
</ChartElements.Svg>
319315

320-
<TooltipWrapper
321-
bandwidth={labelWidth}
322-
chartBounds={chartBounds}
323-
chartType={InternalChartType.Bar}
324-
data={barChartData.series}
325-
focusElementDataType={DataType.BarGroup}
326-
getMarkup={getTooltipMarkup}
327-
longestSeriesIndex={0}
328-
margin={ChartMargin}
329-
onIndexChange={(index) => setActiveIndex(index)}
330-
parentElement={svgRef}
331-
xScale={barXScale}
332-
yScale={barYScale}
333-
/>
334-
335316
{showLegend && (
336317
<LegendContainer
337318
colorVisionType={COLOR_VISION_SINGLE_ITEM}

Diff for: ‎packages/polaris-viz/src/components/ConicGradientWithStops/ConicGradientWithStops.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type {GradientStop} from '@shopify/polaris-viz-core';
22
import {Fragment} from 'react';
33

4+
import {getTooltipDataAttr} from '../TooltipWrapper';
45
import {createCSSConicGradient} from '../../utilities';
56

67
export interface ConicGradientWithStopsProps {
@@ -34,8 +35,9 @@ export function ConicGradientWithStops({
3435
/>
3536
</foreignObject>
3637
<rect
37-
data-tooltip-type="donut"
38-
data-tooltip-index={index}
38+
{...getTooltipDataAttr({
39+
index,
40+
})}
3941
width={width}
4042
height={height}
4143
x={x}

Diff for: ‎packages/polaris-viz/src/components/DonutChart/Chart.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
THIN_ARC_CORNER_THICKNESS,
1212
isInfinity,
1313
InternalChartType,
14-
DataType,
1514
} from '@shopify/polaris-viz-core';
1615
import type {
1716
DataPoint,
@@ -20,7 +19,7 @@ import type {
2019
Direction,
2120
} from '@shopify/polaris-viz-core';
2221

23-
import {TooltipWrapperNext} from '../../components/TooltipWrapper/TooltipWrapperNext';
22+
import {TooltipWrapperNext} from '../../components/TooltipWrapper';
2423
import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems';
2524
import {getContainerAlignmentForLegend} from '../../utilities';
2625
import type {ComparisonMetricProps} from '../ComparisonMetric';
@@ -319,7 +318,6 @@ export function Chart({
319318
)}
320319
<TooltipWrapperNext
321320
chartType={InternalChartType.Donut}
322-
focusElementDataType={DataType.Point}
323321
getMarkup={getTooltipMarkup}
324322
parentElement={svgRef}
325323
/>

Diff for: ‎packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type {ReactNode} from 'react';
22
import {useMemo, useState} from 'react';
33
import {
44
uniqueId,
5-
DataType,
65
COLOR_VISION_SINGLE_ITEM,
76
HORIZONTAL_SPACE_BETWEEN_CHART_AND_AXIS,
87
useAriaLabel,
@@ -19,7 +18,7 @@ import type {
1918
} from '@shopify/polaris-viz-core';
2019
import {animated} from '@react-spring/web';
2120

22-
import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
21+
import {TooltipWrapperNext} from '../TooltipWrapper';
2322
import {ChartElements} from '../ChartElements';
2423
import {checkAvailableAnnotations} from '../../components/Annotations';
2524
import {useFormattedLabels} from '../../hooks/useFormattedLabels';
@@ -286,7 +285,6 @@ export function Chart({
286285
{highestValueForSeries.length !== 0 && (
287286
<TooltipWrapperNext
288287
chartType={InternalChartType.HorizontalBar}
289-
focusElementDataType={DataType.BarGroup}
290288
getMarkup={getTooltipMarkup}
291289
parentElement={svgRef}
292290
/>

Diff for: ‎packages/polaris-viz/src/components/LineChart/Chart.tsx

+16-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type {ReactNode} from 'react';
22
import {useState, useRef, Fragment} from 'react';
33
import {
44
uniqueId,
5-
DataType,
65
useYScale,
76
LineSeries,
87
COLOR_VISION_SINGLE_ITEM,
@@ -17,7 +16,6 @@ import type {
1716
XAxisOptions,
1817
YAxisOptions,
1918
LineChartDataSeriesWithDefaults,
20-
BoundingRect,
2119
LabelFormatter,
2220
} from '@shopify/polaris-viz-core';
2321

@@ -53,7 +51,10 @@ import {VisuallyHiddenRows} from '../VisuallyHiddenRows';
5351
import {YAxis} from '../YAxis';
5452
import {HorizontalGridLines} from '../HorizontalGridLines';
5553
import {ChartElements} from '../ChartElements';
56-
import {TooltipWrapperNext} from '../../components/TooltipWrapper/TooltipWrapperNext';
54+
import {
55+
getTooltipDataAttr,
56+
TooltipWrapperNext,
57+
} from '../../components/TooltipWrapper';
5758

5859
import {useLineChartTooltipContent} from './hooks/useLineChartTooltipContent';
5960
import {PointsAndCrosshair} from './components';
@@ -297,20 +298,23 @@ export function Chart({
297298
})}
298299

299300
{[...Array(longestSeriesLength + 1).keys()].map((_, index) => {
301+
const x =
302+
index * (drawableWidth / longestSeriesLength) -
303+
drawableWidth / longestSeriesLength / 2;
304+
const width = drawableWidth / longestSeriesLength;
305+
300306
return (
301307
<rect
302308
key={`${index}-tooltip-area`}
309+
{...getTooltipDataAttr({
310+
index,
311+
x: containerBounds.x + chartXPosition + x + width,
312+
y: containerBounds.y + Number(scrollY) + chartYPosition,
313+
})}
303314
height={drawableHeight}
304-
width={drawableWidth / longestSeriesLength}
305-
x={
306-
index * (drawableWidth / longestSeriesLength) -
307-
drawableWidth / longestSeriesLength / 2
308-
}
315+
width={width}
316+
x={x}
309317
fill="rgba(255,0,0,0.2)"
310-
data-tooltip-type="line"
311-
data-tooltip-index={index}
312-
data-tooltip-x={xScale(index)}
313-
data-tooltip-y={yScale(index)}
314318
/>
315319
);
316320
})}
@@ -384,7 +388,6 @@ export function Chart({
384388
{longestSeriesLength !== -1 && (
385389
<TooltipWrapperNext
386390
chartType={InternalChartType.Line}
387-
focusElementDataType={DataType.Point}
388391
getMarkup={getTooltipMarkup}
389392
id={tooltipId.current}
390393
onIndexChange={(index) => {

Diff for: ‎packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
useAriaLabel,
77
useChartContext,
88
InternalChartType,
9-
DataType,
109
} from '@shopify/polaris-viz-core';
1110
import type {
1211
ChartType,
@@ -16,7 +15,7 @@ import type {
1615
} from '@shopify/polaris-viz-core';
1716
import {animated} from '@react-spring/web';
1817

19-
import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
18+
import {TooltipWrapperNext} from '../TooltipWrapper';
2019
import {getFontSize} from '../../utilities/getFontSize';
2120
import {ChartElements} from '../ChartElements';
2221
import {LegendContainer, useLegend} from '../../components/LegendContainer';
@@ -221,7 +220,6 @@ export function Chart({
221220
{highestValueForSeries.length !== 0 && (
222221
<TooltipWrapperNext
223222
chartType={InternalChartType.HorizontalBar}
224-
focusElementDataType={DataType.BarGroup}
225223
getMarkup={getTooltipMarkup}
226224
parentElement={svgRef}
227225
/>

Diff for: ‎packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import type {
1111
import {
1212
useUniqueId,
1313
curveStepRounded,
14-
DataType,
1514
useYScale,
1615
COLOR_VISION_SINGLE_ITEM,
1716
useChartPositions,
@@ -21,7 +20,7 @@ import {
2120
useChartContext,
2221
} from '@shopify/polaris-viz-core';
2322

24-
import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
23+
import {getTooltipDataAttr, TooltipWrapperNext} from '../TooltipWrapper';
2524
import {ChartElements} from '../ChartElements';
2625
import {
2726
Annotations,
@@ -304,6 +303,11 @@ export function Chart({
304303
return (
305304
<rect
306305
key={`${index}-tooltip-area`}
306+
{...getTooltipDataAttr({
307+
index,
308+
x: xScale(index),
309+
y: yScale(index),
310+
})}
307311
height={drawableHeight}
308312
width={drawableWidth / longestSeriesLength}
309313
x={
@@ -312,10 +316,6 @@ export function Chart({
312316
}
313317
stroke="blue"
314318
fill="rgba(255,0,0,0.2)"
315-
data-tooltip-type="line"
316-
data-tooltip-index={index}
317-
data-tooltip-x={xScale(index)}
318-
data-tooltip-y={yScale(index)}
319319
/>
320320
);
321321
})}
@@ -387,7 +387,6 @@ export function Chart({
387387
{longestSeriesLength !== -1 && (
388388
<TooltipWrapperNext
389389
chartType={InternalChartType.Line}
390-
focusElementDataType={DataType.Point}
391390
getMarkup={getTooltipMarkup}
392391
id={tooltipId}
393392
onIndexChange={(index) =>

0 commit comments

Comments
 (0)