Skip to content

Commit 6512950

Browse files
nickofthymenickofthyme
authored
feat(tooltip): improve positioning with popperjs (#651)
- configurable placement - configurable fallback placement - configurable tooltip boundary element - improved placement options - custom tooltip component related to #596
1 parent cc15667 commit 6512950

File tree

323 files changed

+2070
-1613
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

323 files changed

+2070
-1613
lines changed

‎.eslintrc.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ module.exports = {
66
'plugin:prettier/recommended',
77
'plugin:react/recommended',
88
],
9-
plugins: ['@typescript-eslint', 'import', 'jest', 'unicorn', 'file-header'],
9+
plugins: ['@typescript-eslint', 'import', 'jest', 'unicorn', 'file-header', 'react-hooks'],
1010

1111
env: {
1212
es6: true,
@@ -104,6 +104,8 @@ module.exports = {
104104
'block',
105105
['-\\*-(.*)-\\*-', 'eslint(.*)', '@jest-environment'],
106106
],
107+
'react-hooks/rules-of-hooks': 'error',
108+
'react-hooks/exhaustive-deps': 'warn',
107109
},
108110
settings: {
109111
'import/resolver': {
@@ -127,11 +129,26 @@ module.exports = {
127129
files: ['stories/**/*.tsx', 'stories/**/*.ts', '*.test.ts', '*.test.tsx'],
128130
rules: {
129131
'no-restricted-properties': [
130-
2,
132+
process.env.NODE_ENV === 'production' ? 2 : 1,
131133
{
132134
object: 'Math',
133135
property: 'random',
134-
message: 'Please use the `getRandomNumber` to create seeded random function in `stories/` and `tests/`',
136+
message: 'Please use the `getRandomNumber` to create seeded random function in `stories/` and `tests/`.',
137+
},
138+
{
139+
object: 'describe',
140+
property: 'only',
141+
message: 'Please remove before committing changes.',
142+
},
143+
{
144+
object: 'it',
145+
property: 'only',
146+
message: 'Please remove before committing changes.',
147+
},
148+
{
149+
object: 'test',
150+
property: 'only',
151+
message: 'Please remove before committing changes.',
135152
},
136153
],
137154
},

‎.playground/index.html‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,49 @@
99
html,
1010
body {
1111
background: blanchedalmond !important;
12+
/*margin-left: 8px !important;*/
13+
/*padding: 8px !important;*/
14+
/*height: 100%;*/
15+
/*width: 2000px;
16+
}
17+
#root {
18+
position: absolute;
19+
/*
20+
top: 0;
21+
left: 0;
22+
*/
23+
/* width: 100%;
24+
height: 100%;*/
25+
/* overflow-x: hidden; */
1226
}
1327
.chart {
1428
background: white;
15-
width: 800px;
16-
height: 300px;
17-
margin: 20px;
29+
/*display: inline-block;
30+
position: relative;
31+
*/
32+
width: 100%;
33+
height: 500px;
34+
overflow: auto;
35+
}
36+
37+
.testing {
38+
background: aquamarine;
39+
position: relative;
40+
width: 100%;
41+
overflow: auto;
42+
}
43+
.page {
44+
padding: 100px;
1845
}
1946
label {
2047
display: block;
2148
}
2249
</style>
2350
</head>
2451
<body>
25-
<div id="root"></div>
52+
<div class="page">
53+
<div id="root"></div>
54+
</div>
2655
<script src="bundle.js" type="text/javascript"></script>
2756
</body>
2857
</html>

‎.playground/playground.tsx‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,45 +17,13 @@
1717
* under the License. */
1818

1919
import React from 'react';
20-
import { Chart, Axis, Position, Settings, AreaSeries, ScaleType, DataGenerator } from '../src';
21-
import { getRandomNumberGenerator } from '../src/mocks/utils';
20+
import { Example } from '../stories/treemap/6_custom_style';
2221

23-
const dg = new DataGenerator(500, getRandomNumberGenerator());
24-
const basicData = dg.generateBasicSeries();
2522
export class Playground extends React.Component {
26-
state = {
27-
data: basicData,
28-
};
29-
onBrushEnd = () => {
30-
this.setState({ data: [] });
31-
setTimeout(() => {
32-
this.setState({
33-
data: dg.generateBasicSeries(),
34-
});
35-
}, 100);
36-
};
3723
render() {
3824
return (
3925
<div className="testing">
40-
<div className="chart">
41-
<Chart className="story-chart">
42-
<Settings onBrushEnd={this.onBrushEnd} />
43-
<Axis id="bottom" position={Position.Bottom} title="bottom" showOverlappingTicks={true} />
44-
<Axis id="left" title="left" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
45-
<Axis id="top" position={Position.Top} title="top" showOverlappingTicks={true} />
46-
<Axis id="right" title="right" position={Position.Right} tickFormat={(d) => Number(d).toFixed(2)} />
47-
{this.state.data.length > 0 && (
48-
<AreaSeries
49-
id="lines"
50-
xScaleType={ScaleType.Linear}
51-
yScaleType={ScaleType.Linear}
52-
xAccessor="x"
53-
yAccessors={['y']}
54-
data={this.state.data}
55-
/>
56-
)}
57-
</Chart>
58-
</div>
26+
<div className="chart">{Example()}</div>
5927
</div>
6028
);
6129
}

‎api/charts.api.md‎

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
```ts
66

77
import { $Values } from 'utility-types';
8+
import { ComponentType } from 'react';
89
import React from 'react';
910

1011
// @public
@@ -403,6 +404,9 @@ export const CurveType: Readonly<{
403404
// @public (undocumented)
404405
export type CurveType = $Values<typeof CurveType>;
405406

407+
// @public
408+
export type CustomTooltip = ComponentType<TooltipInfo>;
409+
406410
// Warning: (ae-missing-release-tag) "DARK_THEME" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
407411
//
408412
// @public (undocumented)
@@ -493,14 +497,10 @@ export const DEFAULT_MISSING_COLOR = "red";
493497
// @public (undocumented)
494498
export const DEFAULT_SETTINGS_SPEC: SettingsSpec;
495499

496-
// Warning: (ae-missing-release-tag) "DEFAULT_TOOLTIP_SNAP" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
497-
//
498-
// @public (undocumented)
500+
// @public
499501
export const DEFAULT_TOOLTIP_SNAP = true;
500502

501-
// Warning: (ae-missing-release-tag) "DEFAULT_TOOLTIP_TYPE" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
502-
//
503-
// @public (undocumented)
503+
// @public
504504
export const DEFAULT_TOOLTIP_TYPE: "vertical";
505505

506506
// Warning: (ae-missing-release-tag) "DefaultSettingsProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -678,9 +678,9 @@ export type HistogramModeAlignment = 'start' | 'center' | 'end';
678678
//
679679
// @public (undocumented)
680680
export const HistogramModeAlignments: Readonly<{
681-
Start: HistogramModeAlignment;
682-
Center: HistogramModeAlignment;
683-
End: HistogramModeAlignment;
681+
Start: LineAlignSetting;
682+
Center: LineAlignSetting;
683+
End: LineAlignSetting;
684684
}>;
685685

686686
// Warning: (ae-forgotten-export) The symbol "BinaryAccessorFn" needs to be exported by the entry point index.d.ts
@@ -931,6 +931,28 @@ export const PartitionLayout: Readonly<{
931931
// @public (undocumented)
932932
export type PartitionLayout = $Values<typeof PartitionLayout>;
933933

934+
// @public
935+
export const Placement: Readonly<{
936+
Top: "top";
937+
Bottom: "bottom";
938+
Left: "left";
939+
Right: "right";
940+
TopStart: "top-start";
941+
TopEnd: "top-end";
942+
BottomStart: "bottom-start";
943+
BottomEnd: "bottom-end";
944+
RightStart: "right-start";
945+
RightEnd: "right-end";
946+
LeftStart: "left-start";
947+
LeftEnd: "left-end";
948+
Auto: "auto";
949+
AutoStart: "auto-start";
950+
AutoEnd: "auto-end";
951+
}>;
952+
953+
// @public
954+
export type Placement = $Values<typeof Placement>;
955+
934956
// Warning: (ae-missing-release-tag) "PointerEvent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
935957
//
936958
// @public (undocumented)
@@ -1296,7 +1318,7 @@ export interface SettingsSpec extends Spec {
12961318
showLegend: boolean;
12971319
showLegendExtra: boolean;
12981320
theme?: PartialTheme | PartialTheme[];
1299-
tooltip: TooltipType | TooltipProps;
1321+
tooltip: TooltipSettings;
13001322
// Warning: (ae-forgotten-export) The symbol "Domain" needs to be exported by the entry point index.d.ts
13011323
//
13021324
// (undocumented)
@@ -1428,23 +1450,28 @@ export type TickStyle = StrokeStyle & Visible;
14281450
// @public (undocumented)
14291451
export function timeFormatter(format: string): TickFormatter;
14301452

1431-
// Warning: (ae-missing-release-tag) "TooltipProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
1432-
//
1433-
// @public (undocumented)
1453+
// @public
1454+
export interface TooltipInfo {
1455+
header: TooltipValue | null;
1456+
values: TooltipValue[];
1457+
}
1458+
1459+
// @public
14341460
export interface TooltipProps {
1435-
// (undocumented)
1461+
boundary?: HTMLElement | 'chart';
1462+
customTooltip?: CustomTooltip;
1463+
fallbackPlacements?: Placement[];
14361464
headerFormatter?: TooltipValueFormatter;
1437-
// (undocumented)
1465+
placement?: Placement;
14381466
snap?: boolean;
1439-
// (undocumented)
14401467
type?: TooltipType;
1441-
// (undocumented)
1468+
// @alpha
14421469
unit?: string;
14431470
}
14441471

1445-
// Warning: (ae-missing-release-tag) "TooltipType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
1446-
// Warning: (ae-missing-release-tag) "TooltipType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
1447-
//
1472+
// @public
1473+
export type TooltipSettings = TooltipType | TooltipProps;
1474+
14481475
// @public
14491476
export const TooltipType: Readonly<{
14501477
VerticalCursor: "vertical";
@@ -1453,12 +1480,10 @@ export const TooltipType: Readonly<{
14531480
None: "none";
14541481
}>;
14551482

1456-
// @public (undocumented)
1483+
// @public
14571484
export type TooltipType = $Values<typeof TooltipType>;
14581485

1459-
// Warning: (ae-missing-release-tag) "TooltipValue" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
1460-
//
1461-
// @public (undocumented)
1486+
// @public
14621487
export interface TooltipValue {
14631488
color: Color;
14641489
isHighlighted: boolean;
@@ -1470,9 +1495,7 @@ export interface TooltipValue {
14701495
valueAccessor?: Accessor;
14711496
}
14721497

1473-
// Warning: (ae-missing-release-tag) "TooltipValueFormatter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
1474-
//
1475-
// @public (undocumented)
1498+
// @public
14761499
export type TooltipValueFormatter = (data: TooltipValue) => JSX.Element | string;
14771500

14781501
// @public

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-tooltip-and-rotation-visually-looks-correct-1-snap.png‎

3 Bytes
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-0-shows-tooltip-on-first-x-value-bottom-1-snap.png‎

923 Bytes
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-0-shows-tooltip-on-first-x-value-top-1-snap.png‎

-1.19 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-0-shows-tooltip-on-last-x-value-bottom-1-snap.png‎

877 Bytes
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-0-shows-tooltip-on-last-x-value-top-1-snap.png‎

-1.62 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-90-shows-tooltip-on-first-x-value-bottom-1-snap.png‎

-25 Bytes
Loading

0 commit comments

Comments
 (0)