Skip to content

Commit 1ba736d

Browse files
envexenvex
committed
More broken, but good
1 parent 1a5bb27 commit 1ba736d

26 files changed

+330
-1296
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface DataGroup {
3939
yAxisOptions?: YAxisOptions;
4040
}
4141

42-
export type Shape = 'Line' | 'Bar';
42+
export type Shape = 'Line' | 'Bar' | 'Default';
4343

4444
export type LineStyle = 'solid' | 'dotted' | 'dashed';
4545

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

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface ConicGradientWithStopsProps {
77
gradient: GradientStop[];
88
height: number;
99
width: number;
10+
index: number;
1011
x?: number;
1112
y?: number;
1213
}

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

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type {ReactNode} from 'react';
12
import {Fragment, useState} from 'react';
23
import {pie} from 'd3-shape';
34
import {
@@ -36,11 +37,13 @@ import type {
3637
RenderHiddenLegendLabel,
3738
RenderInnerValueContent,
3839
RenderLegendContent,
40+
RenderTooltipContentData,
3941
} from '../../types';
4042
import {ChartSkeleton} from '../../components/ChartSkeleton';
4143

4244
import styles from './DonutChart.scss';
4345
import {InnerValue, LegendValues} from './components';
46+
import {useDonutChartTooltipContent} from './hooks/useDonutChartToolltipContent';
4447

4548
const FULL_CIRCLE = Math.PI * 2;
4649
const RADIUS_PADDING = 20;
@@ -62,6 +65,7 @@ export interface ChartProps {
6265
renderInnerValueContent?: RenderInnerValueContent;
6366
renderLegendContent?: RenderLegendContent;
6467
renderHiddenLegendLabel?: RenderHiddenLegendLabel;
68+
renderTooltipContent(data: RenderTooltipContentData): ReactNode;
6569
total?: number;
6670
}
6771

@@ -80,6 +84,7 @@ export function Chart({
8084
renderInnerValueContent,
8185
renderLegendContent,
8286
renderHiddenLegendLabel,
87+
renderTooltipContent,
8388
seriesNameFormatter,
8489
total,
8590
}: ChartProps) {
@@ -129,6 +134,13 @@ export function Chart({
129134
},
130135
});
131136

137+
const getTooltipMarkup = useDonutChartTooltipContent({
138+
renderTooltipContent,
139+
data,
140+
seriesColors: seriesColor,
141+
seriesNameFormatter,
142+
});
143+
132144
if (!width || !height) {
133145
return null;
134146
}
@@ -308,9 +320,7 @@ export function Chart({
308320
<TooltipWrapperNext
309321
chartType={InternalChartType.Donut}
310322
focusElementDataType={DataType.Point}
311-
getMarkup={(index) => {
312-
return <div>Tooltip {index}</div>;
313-
}}
323+
getMarkup={getTooltipMarkup}
314324
parentElement={svgRef}
315325
/>
316326
</div>

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

+11
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import {
44
usePolarisVizContext,
55
} from '@shopify/polaris-viz-core';
66

7+
import {getTooltipContentRenderer} from '../../utilities/getTooltipContentRenderer';
78
import {ChartContainer} from '../ChartContainer';
89
import type {ComparisonMetricProps} from '../ComparisonMetric';
910
import type {
1011
LegendPosition,
1112
RenderHiddenLegendLabel,
1213
RenderInnerValueContent,
1314
RenderLegendContent,
15+
TooltipOptions,
1416
} from '../../types';
1517
import {bucketDataSeries} from '../../utilities/bucketDataSeries';
1618

@@ -31,6 +33,7 @@ export type DonutChartProps = {
3133
renderHiddenLegendLabel?: RenderHiddenLegendLabel;
3234
renderBucketLegendLabel?: () => string;
3335
seriesNameFormatter?: LabelFormatter;
36+
tooltipOptions?: TooltipOptions;
3437
} & ChartProps;
3538

3639
export function DonutChart(props: DonutChartProps) {
@@ -56,6 +59,7 @@ export function DonutChart(props: DonutChartProps) {
5659
renderHiddenLegendLabel,
5760
renderBucketLegendLabel,
5861
seriesNameFormatter = (value) => `${value}`,
62+
tooltipOptions,
5963
} = {
6064
...DEFAULT_CHART_PROPS,
6165
...props,
@@ -65,6 +69,12 @@ export function DonutChart(props: DonutChartProps) {
6569
? bucketDataSeries({dataSeries, maxSeries, renderBucketLegendLabel})
6670
: dataSeries;
6771

72+
const renderTooltip = getTooltipContentRenderer({
73+
tooltipOptions,
74+
theme,
75+
data,
76+
});
77+
6878
return (
6979
<ChartContainer
7080
skeletonType="Donut"
@@ -87,6 +97,7 @@ export function DonutChart(props: DonutChartProps) {
8797
renderInnerValueContent={renderInnerValueContent}
8898
renderLegendContent={renderLegendContent}
8999
renderHiddenLegendLabel={renderHiddenLegendLabel}
100+
renderTooltipContent={renderTooltip}
90101
seriesNameFormatter={seriesNameFormatter}
91102
theme={theme}
92103
/>

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

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import type {ReactNode} from 'react';
2+
import {useCallback} from 'react';
3+
import type {
4+
Color,
5+
DataSeries,
6+
LabelFormatter,
7+
} from '@shopify/polaris-viz-core';
8+
import {useChartContext} from '@shopify/polaris-viz-core';
9+
10+
import type {RenderTooltipContentData} from '../../../types';
11+
12+
export interface Props {
13+
data: DataSeries[];
14+
seriesColors: Color[];
15+
renderTooltipContent: (data: RenderTooltipContentData) => ReactNode;
16+
seriesNameFormatter: LabelFormatter;
17+
}
18+
19+
export function useDonutChartTooltipContent({
20+
data,
21+
renderTooltipContent,
22+
seriesColors,
23+
seriesNameFormatter,
24+
}: Props) {
25+
const {theme} = useChartContext();
26+
27+
return useCallback(
28+
(activeIndex: number) => {
29+
if (activeIndex === -1) {
30+
return null;
31+
}
32+
33+
const {name, data: seriesData, color} = data[activeIndex];
34+
const {value} = seriesData[0];
35+
36+
const tooltipData: RenderTooltipContentData['data'] = [
37+
{
38+
shape: 'Default',
39+
data: [
40+
{
41+
key: `${seriesNameFormatter(name ?? '')}`,
42+
value,
43+
color: color ?? seriesColors[activeIndex],
44+
},
45+
],
46+
},
47+
];
48+
49+
return renderTooltipContent({
50+
data: tooltipData,
51+
activeIndex,
52+
dataSeries: data,
53+
theme,
54+
});
55+
},
56+
[data, seriesColors, theme, renderTooltipContent, seriesNameFormatter],
57+
);
58+
}

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

+12-27
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ import type {
1515
ChartType,
1616
XAxisOptions,
1717
YAxisOptions,
18-
BoundingRect,
1918
LabelFormatter,
2019
} from '@shopify/polaris-viz-core';
2120
import {animated} from '@react-spring/web';
2221

22+
import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
2323
import {ChartElements} from '../ChartElements';
2424
import {checkAvailableAnnotations} from '../../components/Annotations';
2525
import {useFormattedLabels} from '../../hooks/useFormattedLabels';
@@ -45,7 +45,6 @@ import {
4545
} from '../../hooks';
4646
import {ChartMargin, ANNOTATIONS_LABELS_OFFSET} from '../../constants';
4747
import {formatDataIntoGroups} from '../../utilities';
48-
import {TooltipWrapper} from '../TooltipWrapper';
4948

5049
import {
5150
VerticalGridLines,
@@ -91,8 +90,7 @@ export function Chart({
9190
const [xAxisHeight, setXAxisHeight] = useState(LINE_HEIGHT);
9291
const [annotationsHeight, setAnnotationsHeight] = useState(0);
9392

94-
const {longestSeriesCount, seriesColors, longestSeriesIndex} =
95-
useHorizontalSeriesColors(data);
93+
const {longestSeriesCount, seriesColors} = useHorizontalSeriesColors(data);
9694

9795
const {legend, setLegendDimensions, height, width} = useLegend({
9896
data: [
@@ -148,15 +146,14 @@ export function Chart({
148146
longestLabel,
149147
});
150148

151-
const {barHeight, chartHeight, groupBarsAreaHeight, groupHeight} =
152-
useHorizontalBarSizes({
153-
chartDimensions: {width: drawableWidth, height: drawableHeight},
154-
isSimple: xAxisOptions.hide,
155-
isStacked,
156-
seriesLength: longestSeriesCount,
157-
singleBarCount: data.length,
158-
xAxisHeight,
159-
});
149+
const {barHeight, chartHeight, groupHeight} = useHorizontalBarSizes({
150+
chartDimensions: {width: drawableWidth, height: drawableHeight},
151+
isSimple: xAxisOptions.hide,
152+
isStacked,
153+
seriesLength: longestSeriesCount,
154+
singleBarCount: data.length,
155+
xAxisHeight,
156+
});
160157

161158
const annotationsDrawableHeight =
162159
chartYPosition + chartHeight + ANNOTATIONS_LABELS_OFFSET;
@@ -177,12 +174,6 @@ export function Chart({
177174
const zeroPosition = longestLabel.negative + xScale(0);
178175

179176
const labelWidth = drawableWidth / ticks.length;
180-
const chartBounds: BoundingRect = {
181-
width,
182-
height,
183-
x: chartXPosition,
184-
y: 0,
185-
};
186177

187178
const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
188179
annotationsLookupTable,
@@ -250,6 +241,7 @@ export function Chart({
250241
containerWidth={width}
251242
data={data}
252243
groupHeight={groupHeight}
244+
highestValueForSeries={highestValueForSeries}
253245
id={id}
254246
index={index}
255247
isSimple={false}
@@ -292,18 +284,11 @@ export function Chart({
292284
</ChartElements.Svg>
293285

294286
{highestValueForSeries.length !== 0 && (
295-
<TooltipWrapper
296-
bandwidth={groupBarsAreaHeight}
297-
chartBounds={chartBounds}
287+
<TooltipWrapperNext
298288
chartType={InternalChartType.HorizontalBar}
299-
data={data}
300289
focusElementDataType={DataType.BarGroup}
301290
getMarkup={getTooltipMarkup}
302-
margin={ChartMargin}
303291
parentElement={svgRef}
304-
longestSeriesIndex={longestSeriesIndex}
305-
xScale={xScale}
306-
type={type}
307292
/>
308293
)}
309294

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

+2-12
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,13 @@ import type {
3838
import {useFormattedLabels} from '../../hooks/useFormattedLabels';
3939
import {XAxis} from '../XAxis';
4040
import {useLegend, LegendContainer} from '../LegendContainer';
41-
import {TooltipWrapper} from '../../components/TooltipWrapper';
4241
import {
4342
useTheme,
4443
useColorVisionEvents,
4544
useWatchColorVisionEvents,
4645
useLinearLabelsAndDimensions,
4746
} from '../../hooks';
4847
import {
49-
ChartMargin,
5048
ANNOTATIONS_LABELS_OFFSET,
5149
Y_AXIS_LABEL_OFFSET,
5250
CROSSHAIR_ID,
@@ -230,21 +228,12 @@ export function Chart({
230228
);
231229
}
232230

233-
const chartBounds: BoundingRect = {
234-
width,
235-
height,
236-
x: chartXPosition,
237-
y: chartYPosition,
238-
};
239-
240231
const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
241232
annotationsLookupTable,
242233
);
243234

244235
const halfXAxisLabelWidth = xAxisDetails.labelWidth / 2;
245236

246-
console.log({longestSeriesLength});
247-
248237
return (
249238
<Fragment>
250239
<ChartElements.Svg
@@ -307,9 +296,10 @@ export function Chart({
307296
theme,
308297
})}
309298

310-
{[...Array(longestSeriesLength).keys()].map((series, index) => {
299+
{[...Array(longestSeriesLength + 1).keys()].map((_, index) => {
311300
return (
312301
<rect
302+
key={`${index}-tooltip-area`}
313303
height={drawableHeight}
314304
width={drawableWidth / longestSeriesLength}
315305
x={

0 commit comments

Comments
 (0)