From 4b4358b6b8b586162e1252cdf258355ad1e22bae Mon Sep 17 00:00:00 2001
From: Andy <alee@scottlogic.co.uk>
Date: Mon, 18 Feb 2019 17:08:41 +0000
Subject: [PATCH] Some styling and tooltip hover changes

Cleaner axis styling with more readable text
More interactive tooltip behaviour
---
 .../src/js/plugin/template.js                       |  2 +-
 .../src/js/tooltip/tooltip.js                       |  2 ++
 .../perspective-viewer-d3fc/src/less/chart.less     | 13 +++++++++++--
 .../src/themes/material.dark.less                   |  1 +
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/template.js b/packages/perspective-viewer-d3fc/src/js/plugin/template.js
index 60749763be..5ad5297d94 100644
--- 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
index ad66de1390..33c7c8a4cb 100644
--- 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
index 8f82e7ea72..ed3c7889f3 100644
--- 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
index 35c2b3b10d..4633fd3f59 100644
--- 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);