feat: add tooltip.strategy = 'drag' (#145)

gravity-ui · Sep 11, 2023 · 2d102f0 · 2d102f0
1 parent 2f01d75
commit 2d102f0
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 2 deletions.
diff --git a/demo/examples/tooltip-pin-strategies.html b/demo/examples/tooltip-pin-strategies.html
@@ -0,0 +1,91 @@
+<html>
+    <head>
+        <title>Yagr:: Tooltip Pin Strategies</title>
+        <script type="module" src="../../dist/yagr.esm.min.js"></script>
+        <link rel="stylesheet" href="../../dist/index.css" />
+        <style>
+            .container {
+                margin-bottom: 26px;
+                height: 400px;
+                width: 100%;
+            }
+            .grid {
+                height: 400px;
+                display: flex;
+                width: 100%;
+                flex-direction: row;
+                justify-content: space-between;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Tooltip pin strategies</h1>
+        <div class="grid">
+            <div id="chart1" class="container"></div>
+        </div>
+
+        <div class="grid">
+            <div id="chart2" class="container"></div>
+        </div>
+
+        <div class="grid">
+            <div id="chart3" class="container"></div>
+        </div>
+
+        <div class="grid">
+            <div id="chart4" class="container"></div>
+        </div>
+
+        <script type="module">
+            const y1 = new Yagr(chart1, {
+                title: {text: 'No pin'},
+                timeline: [1, 2, 3, 4, 5],
+                series: [
+                    {data: [1, 2, 3, 2, 4], color: 'red'},
+                ],
+                tooltip: {
+                    strategy: 'none'
+                },
+            });
+
+            const y2 = new Yagr(chart2, {
+                title: {text: 'Pin on click'},
+                timeline: [1, 2, 3, 4, 5],
+                series: [
+                    {data: [1, 2, 3, 2, 4], color: 'red'},
+                ],
+                tooltip: {
+                    strategy: 'pin'
+                },
+            });
+
+            const y3 = new Yagr(chart3, {
+                title: {text: 'Pin on drag'},
+                timeline: [1, 2, 3, 4, 5],
+                series: [
+                    {data: [1, 2, 3, 2, 4], color: 'red'},
+                ],
+                chart: {
+                    select: {zoom: false},
+                },
+                tooltip: {
+                    strategy: 'drag'
+                },
+            });
+
+            const y4 = new Yagr(chart4, {
+                title: {text: 'Pin both drag and click'},
+                timeline: [1, 2, 3, 4, 5],
+                series: [
+                    {data: [1, 2, 3, 2, 4], color: 'red'},
+                ],
+                chart: {
+                    select: {zoom: false},
+                },
+                tooltip: {
+                    strategy: 'all'
+                },
+            });
+        </script>
+    </body>
+</html>
diff --git a/src/YagrCore/plugins/tooltip/tooltip.ts b/src/YagrCore/plugins/tooltip/tooltip.ts
@@ -568,7 +568,12 @@ class YagrTooltip {
         const click = from && from.clientX === cursor?.clientX;
         const drag = from && from.clientX !== cursor?.clientX;
 
-        if ((click && !this.skipNextMouseUp) || (drag && this.opts.strategy === 'all')) {
+        const strategy = this.opts.strategy;
+
+        if (
+            (click && !this.skipNextMouseUp && strategy !== 'drag') ||
+            (drag && (strategy === 'all' || strategy === 'drag'))
+        ) {
             this.pin(!this.state.pinned);
             this.show();
             this.renderTooltipCloses();

diff --git a/src/YagrCore/plugins/tooltip/types.ts b/src/YagrCore/plugins/tooltip/types.ts
@@ -106,9 +106,10 @@ export interface TooltipOptions {
      * Tooltip pin strategy:
      *  - none : tooltip is not pinable
      *  - pin  : tooltip is pinable only on click
+     *  - drag : tooltip is pinable on drag
      *  - all  : tooltip is pinable on drag and click
      */
-    strategy: 'none' | 'pin' | 'all';
+    strategy: 'none' | 'pin' | 'drag' | 'all';
     /** Value formatter */
     value: PerScale<ValueFormatter>;
     /** Show DataSeries index */