feat(annotations): Update annotations UI to display label as tooltip …

…on hover (#27) * Update annotations UI to display label as tooltip on hover * fix annotation label overlap * formatting
pinterest · Aug 1, 2024 · faab80a · faab80a
1 parent 714fae9
commit faab80a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
@@ -60,6 +60,7 @@ import {
   evalFormula,
   extractRecordAnnotations,
   formatAnnotationLabel,
+  formatAnnotationTooltipLabel,
   parseAnnotationOpacity,
 } from '../utils/annotation';
 import { getChartPadding } from '../utils/series';
@@ -412,16 +413,8 @@ export function transformIntervalAnnotation(
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
-          // @ts-ignore
-          emphasis: {
-            fontWeight: 'bold',
-            show: true,
-            position: 'insideTop',
-            verticalAlign: 'top',
-            backgroundColor: theme.colors.grayscale.light5,
-          },
         };
+
     series.push({
       id: `Interval - ${label}`,
       type: 'line',
@@ -437,6 +430,12 @@ export function transformIntervalAnnotation(
         } as ItemStyleOption,
         label: intervalLabel,
         data: intervalData,
+        tooltip: {
+          show: !showLabel,
+          trigger: 'item',
+          formatter: () =>
+            formatAnnotationTooltipLabel(name, title, descriptions),
+        },
       },
     });
   });
@@ -489,15 +488,6 @@ export function transformEventAnnotation(
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
-          position: 'insideEndTop',
-          // @ts-ignore
-          emphasis: {
-            formatter: (params: CallbackDataParams) => params.name,
-            fontWeight: 'bold',
-            show: true,
-            backgroundColor: theme.colors.grayscale.light5,
-          },
         };
 
     series.push({
@@ -510,6 +500,12 @@ export function transformEventAnnotation(
         lineStyle,
         label: eventLabel,
         data: eventData,
+        tooltip: {
+          show: !showLabel,
+          trigger: 'item',
+          formatter: () =>
+            formatAnnotationTooltipLabel(name, title, descriptions),
+        },
       },
     });
   });

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts
@@ -120,6 +120,26 @@ export function formatAnnotationLabel(
   return labels.join('\n\n');
 }
 
+export function formatAnnotationTooltipLabel(
+  name?: string,
+  title?: string,
+  descriptions: string[] = [],
+): string {
+  const tooltipParts: string[] = [];
+
+  const titleParts = [name, title].filter(val => !!val);
+  if (titleParts.length) {
+    const titleSection = `<strong>${titleParts.join(' - ')}</strong>`;
+    tooltipParts.push(titleSection);
+  }
+
+  const filteredDescriptions: string[] = descriptions.filter(
+    description => !!description,
+  );
+  tooltipParts.push(...filteredDescriptions);
+
+  return `<div>${tooltipParts.join('<br/>')}</div>`;
+}
 export function extractAnnotationLabels(
   layers: AnnotationLayer[],
   data: AnnotationData,

diff --git a/superset/tasks/database.py b/superset/tasks/database.py
@@ -12,7 +12,7 @@
 
 
 @celery_app.task(name="db_tables_cache_warm_up")
-def db_tables_cache_warm_up(database_id: str, schema_name: str):
+def db_tables_cache_warm_up(database_id: str, schema_name: str) -> None:
     """
     Warm up tables in a database schema