#3221: Charts | Tree: Use regular tooltip

datagrok-ai · Jan 15, 2025 · c9c7093 · c9c7093
1 parent 095d359
commit c9c7093
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/Charts/src/deprecated/viewers/chord/chord-viewer.ts b/packages/Charts/src/deprecated/viewers/chord/chord-viewer.ts
@@ -8,9 +8,7 @@ export class ChordViewer extends EChartViewer {
     super();
 
     this.top = this.string('top', '50px');
-    this.left = this.string('left', '100px');
     this.bottom = this.string('bottom', '50px');
-    this.right = this.string('right', '100px');
 
     this.animationDuration = this.int('animationDuration', 500);
     this.animationDurationUpdate = this.int('animationDurationUpdate', 750);

diff --git a/packages/Charts/src/viewers/tree/tree-viewer.ts b/packages/Charts/src/viewers/tree/tree-viewer.ts
@@ -1,5 +1,6 @@
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
 
 import { EChartViewer } from '../echart/echart-viewer';
 import { TreeUtils, TreeDataType } from '../../utils/tree-utils';
@@ -59,10 +60,6 @@ export class TreeViewer extends EChartViewer {
     this.fontSize = this.int('fontSize', 12);
 
     this.option = {
-      tooltip: {
-        trigger: 'item',
-        triggerOn: 'mousemove',
-      },
       series: [
         {
           type: 'tree',
@@ -105,6 +102,15 @@ export class TreeViewer extends EChartViewer {
         return isMatch;
       }
     }, params.event!.event, true));
+    this.chart.on('mouseover', (params: any) => {
+      const ancestors = params.treeAncestors.filter((item: any) => item.name).map((item: any) => item.name).join('.'); 
+      const div = ui.divV([
+        ui.divText(ancestors), 
+        ui.divText(params.value, { style: { fontWeight: 'bold' } })
+      ]);
+      ui.tooltip.show(div, params.event.event.x, params.event.event.y);
+    });
+    this.chart.on('mouseout', () => ui.tooltip.hide());
   }
 
   onPropertyChanged(p: DG.Property | null, render: boolean = true) {