Skip to content

Commit f760a2b

Browse files
jsillljsilll
committed
feat: add trigger argument to api events
1 parent 413c0f4 commit f760a2b

File tree

11 files changed

+43
-39
lines changed

11 files changed

+43
-39
lines changed

‎pages/03-core/simple-zooming.page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ function Charts() {
216216
});
217217
const onScatterClearHighlight = () =>
218218
withLock(() => {
219-
getScatterChart().clearChartHighlight();
219+
getScatterChart().clearChartHighlight("page");
220220
highlightedPoint.current = null;
221221
});
222222
const onNavigatorHighlight: CoreChartProps["onHighlight"] = ({ group }) =>
@@ -226,7 +226,7 @@ function Charts() {
226226
});
227227
const onNavigatorClearHighlight = () =>
228228
withLock(() => {
229-
getScatterChart().clearChartHighlight();
229+
getScatterChart().clearChartHighlight("page");
230230
highlightedPoint.current = null;
231231
});
232232

@@ -325,5 +325,5 @@ function highlightChartGroup(targetPoint: Highcharts.Point, api: CoreChartAPI) {
325325
}
326326
}
327327
}
328-
api.highlightChartGroup(group);
328+
api.highlightChartGroup(group, "page");
329329
}

‎pages/06-visual-tests/cartesian-tooltip.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function () {
5858
setTimeout(() => {
5959
if (api.chart.series) {
6060
const point = api.chart.series[0].data.find((p) => p.x === 1600990200000)!;
61-
api.highlightChartPoint(point);
61+
api.highlightChartPoint(point, "page");
6262
}
6363
}, 0);
6464
}}

‎pages/06-visual-tests/column-hover.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
8080
if (api.chart.series) {
8181
const seriesIndex = Math.min(api.chart.series.length - 1, 1);
8282
const point = api.chart.series[seriesIndex].data.find((p) => p.x === 2)!;
83-
api.highlightChartPoint(point);
83+
api.highlightChartPoint(point, "page");
8484
}
8585
}, 0);
8686
}}

‎pages/06-visual-tests/pie-tooltip.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function () {
4141
setTimeout(() => {
4242
if (api.chart.series) {
4343
const point = api.chart.series[0].data.find((p) => p.y === 30)!;
44-
api.highlightChartPoint(point);
44+
api.highlightChartPoint(point, "page");
4545
}
4646
}, 0);
4747
}}

‎src/core/chart-api/chart-extra-context.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ export namespace ChartExtraContext {
3232
}
3333

3434
export interface Handlers {
35-
onHighlight?(props: ChartHighlightProps): void;
36-
onClearHighlight?(): void;
37-
onVisibleItemsChange?: (legendItems: readonly CoreLegendItem[]) => void;
35+
onHighlight?(props: ChartHighlightProps, trigger: string): void;
36+
onClearHighlight?(trigger: string): void;
37+
onVisibleItemsChange?: (legendItems: readonly CoreLegendItem[], trigger: string) => void;
3838
}
3939

4040
export interface State {

‎src/core/chart-api/chart-extra-legend.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,14 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
4242
};
4343

4444
// A callback to be called when items visibility changes from the outside or from the legend.
45-
public onItemVisibilityChange = (visibleItems: readonly string[]) => {
45+
public onItemVisibilityChange = (visibleItems: readonly string[], trigger: string) => {
4646
const currentItems = this.get().items;
4747
const updatedItems = currentItems.map((i) => ({ ...i, visible: visibleItems.includes(i.id) }));
4848
if (this.visibilityMode === "internal") {
4949
this.updateLegendItems(updatedItems);
5050
updateItemsVisibility(this.context.chart(), this.get().items, visibleItems);
5151
}
52-
this.context.handlers.onVisibleItemsChange?.(updatedItems);
52+
this.context.handlers.onVisibleItemsChange?.(updatedItems, trigger);
5353
};
5454

5555
// Updates legend highlight state when chart's point is highlighted.

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

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -206,22 +206,22 @@ export class ChartAPI {
206206

207207
// Callbacks used for hover and keyboard navigation, and also exposed to the public API to give the ability
208208
// to highlight and show tooltip for the given point or group manually.
209-
public setItemsVisible = (visibleItemsIds: readonly string[]) => {
210-
this.chartExtraLegend.onItemVisibilityChange(visibleItemsIds);
209+
public setItemsVisible = (visibleItemsIds: readonly string[], trigger: string = "user") => {
210+
this.chartExtraLegend.onItemVisibilityChange(visibleItemsIds, trigger);
211211
};
212-
public highlightChartPoint = (point: Highcharts.Point) => {
212+
public highlightChartPoint = (point: Highcharts.Point, trigger: string = "user") => {
213213
if (!this.isTooltipPinned) {
214-
this.highlightActions(point);
214+
this.highlightActions(point, trigger);
215215
}
216216
};
217-
public highlightChartGroup = (group: readonly Highcharts.Point[]) => {
217+
public highlightChartGroup = (group: readonly Highcharts.Point[], trigger: string = "user") => {
218218
if (!this.isTooltipPinned) {
219-
this.highlightActions(group as Writeable<Highcharts.Point[]>);
219+
this.highlightActions(group as Writeable<Highcharts.Point[]>, trigger);
220220
}
221221
};
222-
public clearChartHighlight = () => {
222+
public clearChartHighlight = (trigger: string = "user") => {
223223
if (!this.isTooltipPinned) {
224-
this.clearHighlightActions();
224+
this.clearHighlightActions(trigger);
225225
}
226226
};
227227

@@ -233,12 +233,12 @@ export class ChartAPI {
233233
this.chartExtraNavigation.announceChart(getChartAccessibleDescription(this.context.chart()));
234234
},
235235
onFocusGroup: (group: Highcharts.Point[]) => {
236-
this.highlightActions(group, true);
236+
this.highlightActions(group, "user", true);
237237
this.chartExtraNavigation.announceElement(getGroupAccessibleDescription(group), false);
238238
},
239239
onFocusPoint: (point: Highcharts.Point) => {
240240
const labels = this.context.settings.labels;
241-
this.highlightActions(point, true);
241+
this.highlightActions(point, "user", true);
242242
this.chartExtraNavigation.announceElement(getPointAccessibleDescription(point, labels), false);
243243
},
244244
onBlur: () => this.clearChartHighlight(),
@@ -338,13 +338,13 @@ export class ChartAPI {
338338
// If the previously hovered and now clicked positions match, and the the tooltip wasn't
339339
// dismissed just a moment ago, we make the tooltip pinned in this position.
340340
if (positionsMatch && !this.chartExtraTooltip.tooltipLock) {
341-
this.highlightActions(point);
341+
this.highlightActions(point, "user");
342342
this.chartExtraTooltip.pinTooltip();
343343
}
344344
// If the tooltip was just dismissed, it means this happened by clicking somewhere in the plot area.
345345
// If the clicked position differs from the one that was pinned - we show tooltip in the new position.
346346
else if (!positionsMatch && this.chartExtraTooltip.tooltipLock) {
347-
this.highlightActions(point, true);
347+
this.highlightActions(point, "user", true);
348348
}
349349
};
350350

@@ -356,17 +356,21 @@ export class ChartAPI {
356356
// If the previously hovered and now clicked positions match, and the the tooltip wasn't
357357
// dismissed just a moment ago, we make the tooltip pinned in this position.
358358
if (positionsMatch && !this.chartExtraTooltip.tooltipLock) {
359-
this.highlightActions(group);
359+
this.highlightActions(group, "user");
360360
this.chartExtraTooltip.pinTooltip();
361361
}
362362
// If the tooltip was just dismissed, it means this happened by clicking somewhere in the plot area.
363363
// If the clicked position differs from the one that was pinned - we show tooltip in the new position.
364364
else if (!positionsMatch && this.chartExtraTooltip.tooltipLock) {
365-
this.highlightActions(group, true);
365+
this.highlightActions(group, "user", true);
366366
}
367367
};
368368

369-
private highlightActions(target: Highcharts.Point | Highcharts.Point[], overrideTooltipLock = false) {
369+
private highlightActions(
370+
target: Highcharts.Point | Highcharts.Point[],
371+
trigger: string,
372+
overrideTooltipLock = false,
373+
) {
370374
const point = Array.isArray(target) ? null : target;
371375
const group = Array.isArray(target) ? target : this.context.derived.getPointsByX(target.x);
372376

@@ -388,11 +392,11 @@ export class ChartAPI {
388392
}
389393

390394
// Notify the consumer that a highlight action was made.
391-
this.context.handlers.onHighlight?.({ point, group });
395+
this.context.handlers.onHighlight?.({ point, group }, trigger);
392396
}
393397
}
394398

395-
private clearHighlightActions = () => {
399+
private clearHighlightActions = (trigger: string) => {
396400
if (!this.isTooltipPinned) {
397401
// Update Highcharts elements state.
398402
this.chartExtraHighlight.clearChartItemsHighlight();
@@ -402,7 +406,7 @@ export class ChartAPI {
402406
this.chartExtraLegend.onClearHighlight();
403407

404408
// Notify the consumer that a clear-highlight action was made.
405-
this.context.handlers.onClearHighlight?.();
409+
this.context.handlers.onClearHighlight?.(trigger);
406410
}
407411
};
408412

‎src/core/chart-core.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -296,10 +296,10 @@ export function InternalCoreChart({
296296
callback?.({
297297
chart,
298298
highcharts: highcharts as typeof Highcharts,
299-
setItemsVisible: (visibleItemIds) => api.setItemsVisible(visibleItemIds),
300-
highlightChartPoint: (point) => api.highlightChartPoint(point),
301-
highlightChartGroup: (group) => api.highlightChartGroup(group),
302-
clearChartHighlight: () => api.clearChartHighlight(),
299+
setItemsVisible: (visibleItemIds, trigger) => api.setItemsVisible(visibleItemIds, trigger),
300+
highlightChartPoint: (point, trigger) => api.highlightChartPoint(point, trigger),
301+
highlightChartGroup: (group, trigger) => api.highlightChartGroup(group, trigger),
302+
clearChartHighlight: (trigger) => api.clearChartHighlight(trigger),
303303
});
304304
}}
305305
/>

‎src/core/components/core-filters.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function ChartSeriesFilter({ api, i18nStrings }: { api: ChartAPI; i18nStrings?:
4343
<InternalChartSeriesFilter
4444
items={legendItems}
4545
selectedItems={legendItems.filter((i) => i.visible).map((i) => i.id)}
46-
onChange={({ detail }) => api.onItemVisibilityChange(detail.selectedItems)}
46+
onChange={({ detail }) => api.onItemVisibilityChange(detail.selectedItems, "user")}
4747
i18nStrings={{
4848
filterLabel: i18n("i18nStrings.filterLabel", i18nStrings?.seriesFilterLabel),
4949
filterPlaceholder: i18n("i18nStrings.filterPlaceholder", i18nStrings?.seriesFilterPlaceholder),

‎src/core/components/core-legend.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function ChartLegend({
3838
items={legendItems}
3939
actions={actions}
4040
position={position}
41-
onItemVisibilityChange={api.onItemVisibilityChange}
41+
onItemVisibilityChange={(hiddenItems) => api.onItemVisibilityChange(hiddenItems, "user")}
4242
onItemHighlightEnter={(itemId) => api.onHighlightChartItems([itemId])}
4343
onItemHighlightExit={api.onClearChartItemsHighlight}
4444
getTooltipContent={(props) => {

0 commit comments

Comments
 (0)