Some styling and tooltip hover changes

Cleaner axis styling with more readable text More interactive tooltip behaviour
finos · Feb 18, 2019 · 4b4358b · 4b4358b
1 parent f9be12b
commit 4b4358b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/template.js b/packages/perspective-viewer-d3fc/src/js/plugin/template.js
@@ -41,7 +41,7 @@ class D3FCChartElement extends HTMLElement {
 
     draw() {
         if (this._settings.data) {
-            this._chart(d3.select(this._container), this._settings);
+            this._chart(d3.select(this._container).attr("class", `chart ${this._chart.plugin.type}`), this._settings);
         }
     }
 

diff --git a/packages/perspective-viewer-d3fc/src/js/tooltip/tooltip.js b/packages/perspective-viewer-d3fc/src/js/tooltip/tooltip.js
@@ -14,9 +14,11 @@ export function tooltip(selection, settings) {
         .on("mouseover", function(data) {
             generateHtml(tooltipDiv, data, settings);
             showTooltip(container.node(), this, tooltipDiv);
+            select(this).style("opacity", "0.7");
         })
         .on("mouseout", function() {
             hideTooltip(tooltipDiv);
+            select(this).style("opacity", "1");
         });
 }
 

diff --git a/packages/perspective-viewer-d3fc/src/less/chart.less b/packages/perspective-viewer-d3fc/src/less/chart.less
@@ -28,11 +28,20 @@
 
         & .y-axis text,
         & .x-axis text {
-            fill: var(--d3fc-axis--ticks, rgb(51, 51, 51));
+            fill: var(--d3fc-axis--ticks, rgb(80, 80, 80));
+            font-size: 11px;
         }
         & .y-axis path,
         & .x-axis path {
-            stroke: var(--d3fc-axis--ticks, rgb(51, 51, 51));
+            stroke: var(--d3fc-axis--lines, rgb(150, 160, 175));
+        }
+
+        &.d3_y_bar .y-axis path,
+        &.d3_y_line .y-axis path,
+        &.d3_xy_scatter .y-axis path,
+        &.d3_xy_scatter .x-axis path,
+        &.d3_x_bar .x-axis path {
+            visibility: hidden;
         }
 
         & .y-label {

diff --git a/packages/perspective-viewer/src/themes/material.dark.less b/packages/perspective-viewer/src/themes/material.dark.less
@@ -57,6 +57,7 @@ perspective-viewer {
 
     --d3fc-legend-text: rgb(187, 187, 187);
     --d3fc-axis--ticks: rgb(187, 187, 187);
+    --d3fc-axis--lines: rgb(100, 100, 100);
     --d3fc-tooltip--background: #333333;
     --d3fc-tooltip--color: rgb(207, 216, 220);