diff --git a/demo/examples/realtime.html b/demo/examples/realtime.html index aa6d064..bf51a5c 100644 --- a/demo/examples/realtime.html +++ b/demo/examples/realtime.html @@ -58,6 +58,7 @@

Realtime updates

}, tooltip: { sum: true, + onUpdate: 'none', }, series: [ {data: timeline.map(id1), color: 'red', id: '1', interpolation: 'smooth'}, diff --git a/docs/en/plugins/tooltip.md b/docs/en/plugins/tooltip.md index 17384f9..2d54443 100644 --- a/docs/en/plugins/tooltip.md +++ b/docs/en/plugins/tooltip.md @@ -49,10 +49,12 @@ Configuration for this example: - `tooltip.maxLines: PerScale = 10;` - maximum number of lines per scale in the tooltip - `tooltip.sum: PerScale = false` - show the `Sum` row in the tooltip - `tooltip.sort?: PerScale` - row comparator -- `tooltip.pinable: boolean` - is tooltip pinable +- ~~`tooltip.pinable: boolean` - is tooltip pinable~~ (DEPRECATED) +- `tooltip.strategy: 'pin' | 'all' | 'none'` - tooltip strategy. `pin` - pin tooltip on click, `all` - pin both on click and drag, `none` - don't pin - `hideNoData?: PerScale` - hide rows if the Y value is equal to `null` - `tooltip.precision?: PerScale` - decimals count in numbers when formatting in the tooltip - `tooltip.value: PerScale`- formatter for line values +- `tooltip.onUpdate: 'none' | 'reset'` - how to update tooltip when data is updated. `none` - do nothing, `reset` - reset tooltip state ```ts type ValueFormatter = (value: string | number | null, precision?: number) => string; @@ -92,7 +94,7 @@ Tooltip instance is an EventEmitter, which supports the following events: - `render` - tooltip is rendered - `destroy` - tooltip is destroyed -Examplt: +Example: ```ts const yagr = new Yagr(...); diff --git a/src/YagrCore/mixins/dynamic-updates.ts b/src/YagrCore/mixins/dynamic-updates.ts index 785e17f..dab5d1f 100644 --- a/src/YagrCore/mixins/dynamic-updates.ts +++ b/src/YagrCore/mixins/dynamic-updates.ts @@ -396,6 +396,8 @@ function setSeriesImpl( shouldRecalcData = true; } + this._batch.fns.push(() => this.plugins?.tooltip?.reset()); + if (shouldRecalcData || timeline.length) { batch.recalc = true; batch.fns.push(() => { diff --git a/src/YagrCore/plugins/tooltip/tooltip.ts b/src/YagrCore/plugins/tooltip/tooltip.ts index 44e01fb..cf630bc 100644 --- a/src/YagrCore/plugins/tooltip/tooltip.ts +++ b/src/YagrCore/plugins/tooltip/tooltip.ts @@ -66,6 +66,7 @@ const DEFAULT_TOOLTIP_OPTIONS = { xOffset: TOOLTIP_X_OFFSET, yOffset: TOOLTIP_Y_OFFSET, virtual: false, + onUpdate: 'reset', } as const; export type TooltipPlugin = YagrPlugin< @@ -176,6 +177,11 @@ class YagrTooltip { }; reset = () => { + if (this.opts.onUpdate === 'none') { + this.yagr.plugins.cursor?.pin(false); + return; + } + if (this.state.visible) { this.hide(); } @@ -205,9 +211,7 @@ class YagrTooltip { this.state.pinned = pinState; const range = this.state.range || []; - if (range[1] === null || range.length < 2) { - this.yagr.plugins.cursor?.pin(pinState); - } + this.yagr.plugins.cursor?.pin(pinState && (range[1] === null || range.length < 2)); if (this.opts.virtual) { return this.emit(pinState ? 'pin' : 'unpin'); diff --git a/src/YagrCore/plugins/tooltip/types.ts b/src/YagrCore/plugins/tooltip/types.ts index 136e926..fefccab 100644 --- a/src/YagrCore/plugins/tooltip/types.ts +++ b/src/YagrCore/plugins/tooltip/types.ts @@ -138,6 +138,11 @@ export interface TooltipOptions { scales?: PerScale; /** Is tooltip virtual. Used for custom tooltips, which want to reuse common tooltip */ virtual?: boolean; + /** What to do with tooltip on data change + * - reset : reset tooltip + * - none : do nothing + */ + onUpdate?: 'reset' | 'none'; } export interface TooltipRow { diff --git a/src/react.tsx b/src/react.tsx index a497471..4a97e9d 100644 --- a/src/react.tsx +++ b/src/react.tsx @@ -18,6 +18,7 @@ export interface YagrChartProps { filename: string; }; + onChartInited?: (chart: Yagr, meta: YagrMeta) => void; /** Fires after chart has drawn */ onChartLoad?: (chart: Yagr, meta: YagrMeta) => void; /** Fires on every range selection */