feat: added tooltip on update strategy (#111)

* feat: added tooltip on update strategy
* fix: fixed tooltip's cursor pin
* fix: fixed cursor unpin on setSeries
* chore: updated docs

demo/examples/realtime.html

@@ -58,6 +58,7 @@ <h1>Realtime updates</h1>
                 },
                 tooltip: {
                     sum: true,
+                    onUpdate: 'none',
                 },
                 series: [
                     {data: timeline.map(id1), color: 'red', id: '1', interpolation: 'smooth'},

docs/en/plugins/tooltip.md

@@ -49,10 +49,12 @@ Configuration for this example:
 -   `tooltip.maxLines: PerScale<number> = 10;` - maximum number of lines per scale in the tooltip
 -   `tooltip.sum: PerScale<boolean> = false` - show the `Sum` row in the tooltip
 -   `tooltip.sort?: PerScale<SortFn>` - 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<boolean>` - hide rows if the Y value is equal to `null`
 -   `tooltip.precision?: PerScale<number>` - decimals count in numbers when formatting in the tooltip
 -   `tooltip.value: PerScale<ValueFormatter>`- 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(...);

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(() => {

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');

src/YagrCore/plugins/tooltip/types.ts

@@ -138,6 +138,11 @@ export interface TooltipOptions {
     scales?: PerScale<string>;
     /** 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 {

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 */