Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Refactor the tooltip positioning logic #1799

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

WIP: Refactor the tooltip positioning logic #1799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/polaris-viz-core/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export interface DataGroup {
yAxisOptions?: YAxisOptions;
}

export type Shape = 'Line' | 'Bar' | 'Donut';
export type Shape = 'Line' | 'Bar' | 'Default';

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

Expand Down
1 change: 1 addition & 0 deletions packages/polaris-viz/src/components/Arc/Arc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ export function Arc({
height={radius * 4}
width={radius * 4}
gradient={gradient}
index={index}
/>
</g>
</Fragment>
Expand Down
281 changes: 281 additions & 0 deletions packages/polaris-viz/src/components/BarChart/stories/TooltipOrama.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,281 @@
import type {Story} from '@storybook/react';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This story won't stay around, it's just for testing/development


// export {META as default} from './meta';

export default {
title: 'polaris-viz/Playground/Tooltip-o-rama',
parameters: {},
decorators: [(Story) => <div>{Story()}</div>],
argTypes: {},
};

import type {BarChartProps} from '../../../components';
import {
BarChart,
LineChart,
SimpleBarChart,
StackedAreaChart,
} from '../../../components';

import {DataSeries} from '@shopify/polaris-viz-core';
import {useState} from 'react';

const CHART_TYPES = {
BarChart: BarChart,
HorizontalBarChart: BarChart,
LineChart: LineChart,
SimpleBarChart: SimpleBarChart,
StackedAreaChart: StackedAreaChart,
};

const Template: Story<BarChartProps> = (args: BarChartProps) => {
const [isSingle, setIsSingle] = useState(true);
const [chartType, setChartType] = useState('SimpleBarChart');

const Element = CHART_TYPES[chartType];
const direction = chartType === 'BarChart' ? 'vertical' : 'horizontal';

return (
<div style={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
<div>
<button onClick={() => setIsSingle(!isSingle)}>
{isSingle ? 'Set Multiple' : 'Set Single'}
</button>
<select onChange={(e) => setChartType(e.target.value)}>
{Object.keys(CHART_TYPES).map((key) => (
<option key={key} value={key}>
{key}
</option>
))}
</select>
</div>
<Div title="Positive">
<Element
{...args}
data={isSingle ? SINGLE_SERIES_POSITIVE : MULTIPLE_SERIES_POSITIVE}
direction={direction}
/>
</Div>
<Div title="Negative">
<Element
{...args}
data={isSingle ? SINGLE_SERIES_NEGATIVE : MULTIPLE_SERIES_NEGATIVE}
direction={direction}
/>
</Div>
<Div title="Mixed">
<Element
{...args}
data={isSingle ? SINGLE_SERIES_MIXED : MULTIPLE_SERIES_MIXED}
direction={direction}
/>
</Div>
<Div title="Positive Stacked">
<Element
{...args}
data={isSingle ? SINGLE_SERIES_POSITIVE : MULTIPLE_SERIES_POSITIVE}
type="stacked"
direction={direction}
/>
</Div>
<Div title="Negative Stacked">
<Element
{...args}
data={isSingle ? SINGLE_SERIES_NEGATIVE : MULTIPLE_SERIES_NEGATIVE}
type="stacked"
direction={direction}
/>
</Div>
<Div title="Mixed Stacked">
<Element
{...args}
data={isSingle ? SINGLE_SERIES_MIXED : MULTIPLE_SERIES_MIXED}
type="stacked"
direction={direction}
/>
</Div>
</div>
);
};

function Div({title, children}: {title: string; children: React.ReactNode}) {
return (
<div>
<h2 style={{color: 'black'}}>{title}</h2>
<div style={{height: 400}}>{children}</div>
</div>
);
}

const SINGLE_SERIES_POSITIVE: DataSeries[] = [
{
name: 'Breakfast',
data: [
{key: 'Monday', value: 3},
{key: 'Tuesday', value: 7},
{key: 'Wednesday', value: 7},
{key: 'Thursday', value: 8},
{key: 'Friday', value: 45},
{key: 'Saturday', value: 0},
{key: 'Sunday', value: 0.1},
],
},
];

const SINGLE_SERIES_NEGATIVE: DataSeries[] = [
{
name: 'Breakfast',
data: [
{key: 'Monday', value: -3},
{key: 'Tuesday', value: -7},
{key: 'Wednesday', value: -7},
{key: 'Thursday', value: -8},
{key: 'Friday', value: -45},
{key: 'Saturday', value: -0},
{key: 'Sunday', value: -0.1},
],
},
];

const SINGLE_SERIES_MIXED: DataSeries[] = [
{
name: 'Breakfast',
data: [
{key: 'Monday', value: 3},
{key: 'Tuesday', value: -7},
{key: 'Wednesday', value: -7},
{key: 'Thursday', value: -8},
{key: 'Friday', value: 45},
{key: 'Saturday', value: 0},
{key: 'Sunday', value: 0.1},
],
},
];

const MULTIPLE_SERIES_POSITIVE: DataSeries[] = [
{
name: 'Breakfast',
data: [
{key: 'Monday', value: 3},
{key: 'Tuesday', value: 7},
{key: 'Wednesday', value: 7},
{key: 'Thursday', value: 8},
{key: 'Friday', value: 45},
{key: 'Saturday', value: 0},
{key: 'Sunday', value: 0.1},
],
},
{
name: 'Lunch',
data: [
{key: 'Monday', value: 4},
{key: 'Tuesday', value: 0},
{key: 'Wednesday', value: 10},
{key: 'Thursday', value: 15},
{key: 'Friday', value: 8},
{key: 'Saturday', value: 45},
{key: 'Sunday', value: 0.1},
],
},
{
name: 'Dinner',
data: [
{key: 'Monday', value: 7},
{key: 'Tuesday', value: 0},
{key: 'Wednesday', value: 15},
{key: 'Thursday', value: 12},
{key: 'Friday', value: 45},
{key: 'Saturday', value: 5},
{key: 'Sunday', value: 0.1},
],
},
];

const MULTIPLE_SERIES_NEGATIVE: DataSeries[] = [
{
name: 'Breakfast',
data: [
{key: 'Monday', value: -3},
{key: 'Tuesday', value: -7},
{key: 'Wednesday', value: -7},
{key: 'Thursday', value: -8},
{key: 'Friday', value: 45},
{key: 'Saturday', value: -0},
{key: 'Sunday', value: -0.1},
],
},
{
name: 'Lunch',
data: [
{key: 'Monday', value: -4},
{key: 'Tuesday', value: -0},
{key: 'Wednesday', value: -10},
{key: 'Thursday', value: 15},
{key: 'Friday', value: 8},
{key: 'Saturday', value: 45},
{key: 'Sunday', value: 0.1},
],
},
{
name: 'Dinner',
data: [
{key: 'Monday', value: -7},
{key: 'Tuesday', value: -0},
{key: 'Wednesday', value: -15},
{key: 'Thursday', value: -12},
{key: 'Friday', value: -45},
{key: 'Saturday', value: -5},
{key: 'Sunday', value: -0.1},
],
},
];

const MULTIPLE_SERIES_MIXED: DataSeries[] = [
{
name: 'Breakfast',
data: [
{key: 'Monday', value: 3},
{key: 'Tuesday', value: -7},
{key: 'Wednesday', value: -7},
{key: 'Thursday', value: -8},
{key: 'Friday', value: 45},
{key: 'Saturday', value: 0},
{key: 'Sunday', value: 0.1},
],
},
{
name: 'Lunch',
data: [
{key: 'Monday', value: 4},
{key: 'Tuesday', value: 0},
{key: 'Wednesday', value: -10},
{key: 'Thursday', value: 15},
{key: 'Friday', value: 8},
{key: 'Saturday', value: 45},
{key: 'Sunday', value: 0.1},
],
},
{
name: 'Dinner',
data: [
{key: 'Monday', value: 7},
{key: 'Tuesday', value: 0},
{key: 'Wednesday', value: -15},
{key: 'Thursday', value: -12},
{key: 'Friday', value: 45},
{key: 'Saturday', value: 5},
{key: 'Sunday', value: 0.1},
],
},
];

export const TooltipOrama: Story<BarChartProps> = Template.bind({
height: 100,
});

TooltipOrama.args = {
data: [],
onError: (a, b) => {
console.log({a, b});
},
};
9 changes: 9 additions & 0 deletions packages/polaris-viz/src/components/ChartElements/ChartSVG.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import type {AriaRole, Dispatch, ReactNode, SetStateAction} from 'react';
import {XMLNS} from '@shopify/polaris-viz-core';

import {getTooltipDataAttr} from '../TooltipWrapper';

import styles from './ChartElements.scss';

interface ChartSVGProps {
Expand Down Expand Up @@ -33,6 +35,13 @@ export function ChartSVG({
aria-label={emptyState ? emptyStateText : undefined}
ref={setRef}
>
<rect
height={height}
width={width}
{...getTooltipDataAttr({
index: -1,
})}
/>
{children}
</svg>
);
Expand Down
19 changes: 0 additions & 19 deletions packages/polaris-viz/src/components/ComboChart/Chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import {useState} from 'react';
import * as React from 'react';
import {
ChartMargin,
DataType,
COLOR_VISION_SINGLE_ITEM,
useTheme,
useChartPositions,
LINE_HEIGHT,
InternalChartType,
} from '@shopify/polaris-viz-core';
import type {
DataGroup,
Expand All @@ -23,7 +20,6 @@ import {
checkAvailableAnnotations,
YAxisAnnotations,
} from '../Annotations';
import {TooltipWrapper} from '../TooltipWrapper';
import type {
AnnotationLookupTable,
RenderLegendContent,
Expand Down Expand Up @@ -317,21 +313,6 @@ export function Chart({
)}
</ChartElements.Svg>

<TooltipWrapper
bandwidth={labelWidth}
chartBounds={chartBounds}
chartType={InternalChartType.Bar}
data={barChartData.series}
focusElementDataType={DataType.BarGroup}
getMarkup={getTooltipMarkup}
longestSeriesIndex={0}
margin={ChartMargin}
onIndexChange={(index) => setActiveIndex(index)}
parentElement={svgRef}
xScale={barXScale}
yScale={barYScale}
/>

{showLegend && (
<LegendContainer
colorVisionType={COLOR_VISION_SINGLE_ITEM}
Expand Down
Loading
Loading