fix: add container css for interval type annotation (#372)

* fix: add container css for interval type annotation * fix undefined case * make down arrow smaller
apache · Nov 26, 2021 · 2277583 · 2277583
1 parent 4f41e3d
commit 2277583
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/...plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css b/...plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
@@ -153,3 +153,22 @@
   font-size: 14px;
   font-weight: normal;
 }
+
+.d3-tip.nv-event-annotation-layer-table {
+  width: 200px;
+  border-radius: 2px;
+  background-color: #484848;
+  fill-opacity: 0.6;
+  margin: 8px;
+  padding: 8px;
+  color: #fff;
+}
+
+.d3-tip.nv-event-annotation-layer-table::after {
+  content: '\25BC';
+  font-size: 14px;
+  color: #484848;
+  position: absolute;
+  bottom: -14px;
+  left: 94px;
+}
diff --git a/.../plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/.../plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -972,7 +972,10 @@ function nvd3Vis(element, props) {
                 .attr('class', `nv-event-annotation-layer-${index}`);
               const aColor = e.color || getColor(cleanColorInput(e.name), colorScheme);
 
-              const tip = tipFactory(e);
+              const tip = tipFactory({
+                ...e,
+                annotationTipClass: `arrow-down nv-event-annotation-layer-${config.sourceType}`,
+              });
               const records = (annotationData[e.name].records || [])
                 .map(r => {
                   const timeValue = new Date(moment.utc(r[e.timeColumn]));

diff --git a/...ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/...ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
@@ -295,7 +295,7 @@ export function wrapTooltip(chart, maxWidth) {
 
 export function tipFactory(layer) {
   return d3tip()
-    .attr('class', 'd3-tip')
+    .attr('class', `d3-tip ${layer.annotationTipClass || ''}`)
     .direction('n')
     .offset([-5, 0])
     .html(d => {