Skip to content

Commit 596cb09

Browse files
jsillljsilll
committed
fix: do not show tooltip on api highlights
1 parent 094f03b commit 596cb09

File tree

2 files changed

+101
-75
lines changed

2 files changed

+101
-75
lines changed

‎pages/03-core/core-line-chart.page.tsx‎

Lines changed: 95 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33

4+
import { useRef } from "react";
45
import Highcharts from "highcharts";
56
import { omit } from "lodash";
67

78
import Button from "@cloudscape-design/components/button";
89
import Link from "@cloudscape-design/components/link";
10+
import SpaceBetween from "@cloudscape-design/components/space-between";
911

10-
import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
12+
import CoreChart, { CoreChartProps } from "../../lib/components/internal-do-not-use/core-chart";
1113
import { dateFormatter, numberFormatter } from "../common/formatters";
1214
import { PageSettingsForm, useChartSettings } from "../common/page-settings";
1315
import { Page } from "../common/templates";
@@ -85,6 +87,20 @@ const series: Highcharts.SeriesOptionsType[] = [
8587

8688
export default function () {
8789
const { chartProps } = useChartSettings();
90+
const chartAPI = useRef<CoreChartProps.ChartAPI | null>(null);
91+
92+
const handleHighlightPoint = () => {
93+
if (chartAPI.current) {
94+
const chart = chartAPI.current.chart;
95+
if (chart && chart.series && chart.series[0] && chart.series[0].points) {
96+
const point = chart.series[0].points[2];
97+
if (point) {
98+
chartAPI.current.highlightChartPoint(point);
99+
}
100+
}
101+
}
102+
};
103+
88104
return (
89105
<Page
90106
title="Core chart demo"
@@ -95,83 +111,89 @@ export default function () {
95111
/>
96112
}
97113
>
98-
<CoreChart
99-
{...omit(chartProps.cartesian, "ref")}
100-
highcharts={Highcharts}
101-
options={{
102-
lang: {
103-
accessibility: {
104-
chartContainerLabel: "Line chart",
114+
<SpaceBetween size="m">
115+
<Button onClick={handleHighlightPoint}>Highlight Point</Button>
116+
<CoreChart
117+
callback={(api) => {
118+
chartAPI.current = api;
119+
}}
120+
{...omit(chartProps.cartesian, "ref")}
121+
highcharts={Highcharts}
122+
options={{
123+
lang: {
124+
accessibility: {
125+
chartContainerLabel: "Line chart",
126+
},
105127
},
106-
},
107-
series: series,
108-
xAxis: [
109-
{
110-
type: "datetime",
111-
title: { text: "Time (UTC)" },
112-
valueFormatter: dateFormatter,
128+
series: series,
129+
xAxis: [
130+
{
131+
type: "datetime",
132+
title: { text: "Time (UTC)" },
133+
valueFormatter: dateFormatter,
134+
},
135+
],
136+
yAxis: [{ title: { text: "Events" } }],
137+
chart: {
138+
zooming: {
139+
type: "x",
140+
},
113141
},
114-
],
115-
yAxis: [{ title: { text: "Events" } }],
116-
chart: {
117-
zooming: {
118-
type: "x",
142+
}}
143+
chartHeight={400}
144+
tooltip={{ placement: "outside" }}
145+
getTooltipContent={() => ({
146+
point({ item }) {
147+
const value = item ? (item.point.y ?? null) : null;
148+
return {
149+
value: (
150+
<div>
151+
{numberFormatter(value)} <Button variant="inline-icon" iconName="settings" />
152+
</div>
153+
),
154+
};
119155
},
120-
},
121-
}}
122-
chartHeight={400}
123-
tooltip={{ placement: "outside" }}
124-
getTooltipContent={() => ({
125-
point({ item }) {
126-
const value = item ? (item.point.y ?? null) : null;
127-
return {
128-
value: (
129-
<div>
130-
{numberFormatter(value)} <Button variant="inline-icon" iconName="settings" />
156+
footer() {
157+
return <Button>Footer action</Button>;
158+
},
159+
})}
160+
getLegendTooltipContent={({ legendItem }) => ({
161+
header: (
162+
<div>
163+
<div style={{ display: "flex" }}>
164+
{legendItem.marker}
165+
{legendItem.name}
131166
</div>
132-
),
133-
};
134-
},
135-
footer() {
136-
return <Button>Footer action</Button>;
137-
},
138-
})}
139-
getLegendTooltipContent={({ legendItem }) => ({
140-
header: (
141-
<div>
142-
<div style={{ display: "flex" }}>
143-
{legendItem.marker}
144-
{legendItem.name}
145167
</div>
146-
</div>
147-
),
148-
body: (
149-
<>
150-
<table>
151-
<tbody style={{ textAlign: "left" }}>
152-
<tr>
153-
<th scope="row">Period</th>
154-
<td>15 min</td>
155-
</tr>
156-
<tr>
157-
<th scope="row">Statistic</th>
158-
<td>Average</td>
159-
</tr>
160-
<tr>
161-
<th scope="row">Unit</th>
162-
<td>Count</td>
163-
</tr>
164-
</tbody>
165-
</table>
166-
</>
167-
),
168-
footer: (
169-
<Link external={true} href="https://example.com/" variant="primary">
170-
Learn more
171-
</Link>
172-
),
173-
})}
174-
/>
168+
),
169+
body: (
170+
<>
171+
<table>
172+
<tbody style={{ textAlign: "left" }}>
173+
<tr>
174+
<th scope="row">Period</th>
175+
<td>15 min</td>
176+
</tr>
177+
<tr>
178+
<th scope="row">Statistic</th>
179+
<td>Average</td>
180+
</tr>
181+
<tr>
182+
<th scope="row">Unit</th>
183+
<td>Count</td>
184+
</tr>
185+
</tbody>
186+
</table>
187+
</>
188+
),
189+
footer: (
190+
<Link external={true} href="https://example.com/" variant="primary">
191+
Learn more
192+
</Link>
193+
),
194+
})}
195+
/>
196+
</SpaceBetween>
175197
</Page>
176198
);
177199
}

‎src/core/chart-api/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -394,10 +394,14 @@ export class ChartAPI {
394394
// Update tooltip and legend state.
395395
if (point) {
396396
this.chartExtraLegend.onHighlightPoint(point);
397-
this.chartExtraTooltip.showTooltipOnPoint(point, group, overrideTooltipLock);
397+
if (!isApiCall) {
398+
this.chartExtraTooltip.showTooltipOnPoint(point, group, overrideTooltipLock);
399+
}
398400
} else {
399401
this.chartExtraLegend.onHighlightGroup(group);
400-
this.chartExtraTooltip.showTooltipOnGroup(group, overrideTooltipLock);
402+
if (!isApiCall) {
403+
this.chartExtraTooltip.showTooltipOnGroup(group, overrideTooltipLock);
404+
}
401405
}
402406

403407
// Notify the consumer that a highlight action was made.

0 commit comments

Comments
 (0)