Merge pull request #167 from jpmorganchase/material-tooltip

Material tooltip

Author: texodus

packages/perspective-viewer-highcharts/src/js/config.js

@@ -118,7 +118,7 @@ export function default_config(aggregates, mode) {
     const that = this,
         config = that._view._config;
 
-    const axis_titles = get_axis_titles(config.aggregate);
+    const axis_titles = get_axis_titles(config.aggregate, config.sort);
     const pivot_titles = get_pivot_titles(config.row_pivot, config.column_pivot);
 
     return {
@@ -248,10 +248,14 @@ export function default_config(aggregates, mode) {
     }
 }
 
-function get_axis_titles(aggs) {
+function get_axis_titles(aggs, sort) {
+    const sort_titles = sort.map(row => row[0]);
     let titles = [];
+
     for (let i = 0; i < aggs.length; i++) {
-        titles.push(aggs[i].column);
+        let axis_title = aggs[i].column;
+        if(!sort_titles.includes(axis_title))
+            titles.push(aggs[i].column);
     }
     return titles;
 }

packages/perspective-viewer-highcharts/src/js/tooltip.js

@@ -15,8 +15,7 @@ export function format_tooltip(context, type, schema, axis_titles, pivot_titles)
         has_column_pivot = column_pivot_titles.length > 0;
 
     if(type === 'area' || type === 'line' || type === 'column') {
-        // pivots do not have a type mapping
-        // check for pivot
+        // pivots cannot be type-mapped
         let row_pivot_text = '',
             column_pivot_text = '';
 
@@ -90,7 +89,7 @@ export function format_tooltip(context, type, schema, axis_titles, pivot_titles)
     } else if (type === 'heatmap') {
         return `<span>${format_value(context.point.value)}</span>`
     } else if (type === 'treemap' || type === 'sunburst') {
-        return `<b>${ context.point.id }: </b><span>${format_value(context.x)}</span>`
+        return `<span>${ context.point.id }: </span><b>${format_value(context.x)}</b>`
     }
 
     let default_value;

packages/perspective-viewer/src/less/default.less

@@ -7,7 +7,9 @@
  *
  */
 
+
 @border-color: #ccc;
+@sans-serif-fonts: Arial, sans-serif;
 
 .psp-text-field {
     position: relative;
@@ -92,6 +94,8 @@
 
 perspective-viewer {
 
+    font-family: @sans-serif-fonts;
+
     .awesomplete > ul {
         border-radius: 0px;
         margin: 0px;
@@ -166,7 +170,6 @@ perspective-viewer {
         font-family: monospace;
     }
 
-
     perspective-row {
         border: 0px solid rgba(0,0,0,0);
 
@@ -219,9 +222,6 @@ perspective-viewer {
         }
     }
 
-
-    font-family: Arial;
-
     .noselect {
         -webkit-touch-callout: none; /* iOS Safari */
         -webkit-user-select: none; /* Safari */
@@ -230,16 +230,13 @@ perspective-viewer {
         -ms-user-select: none; /* Internet Explorer/Edge */
         user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
     }
+
     svg text {
-        font-family: Arial !important;
+        font-family: @sans-serif-fonts !important;
     }
 
-    svg text { 
-        font-family: Arial !important;
-
-    }
     svg .highcharts-axis-title, svg .highcharts-axis-title {
-        font-family: Arial !important;
+        font-family: @sans-serif-fonts !important;
     }
     svg .highcharts-legend-box {
         fill: none;

packages/perspective-viewer/src/less/material.dark.less

@@ -11,6 +11,8 @@
 
 @border-color: #3B3F46;
 
+@coolgrey100: #ECEFF1;
+@coolgrey200: #CFD8DC;
 @coolgrey800: #2A2C2F;
 @coolgrey900: #242526;
 @coolgrey700: #2F3136;
@@ -81,7 +83,7 @@ perspective-viewer #app {
     border-top-color: @coolgrey900 !important;
 
     select:focus {
-        color: #FFF !important;
+        color: @coolgrey200 !important;
     }
 
     .highcharts-heatmap-gradient-full {
@@ -106,7 +108,7 @@ perspective-viewer #app {
     }
 
     svg g.highcharts-axis-labels text {
-        fill: #FFF !important;
+        fill: @coolgrey200 !important;
     }
 
     rect.highcharts-background {
@@ -128,7 +130,7 @@ perspective-viewer #app {
         background-color: @coolgrey700;
 
         tspan, text {
-            fill: #FFF !important;
+            fill: @coolgrey200 !important;
         }
 
         rect, image {
@@ -143,7 +145,7 @@ perspective-viewer #app {
     input, select, ul, #filters {
         border-right: 0px;
         background-color: @coolgrey800;
-        color: #fff;
+        color: @coolgrey200;
         border-color: #666;
     }
 
@@ -166,7 +168,7 @@ perspective-viewer #app {
     perspective-row {
 
         #psp_row {
-            color: #fff;
+            color: @coolgrey200;
         }
     }
 
@@ -180,7 +182,7 @@ perspective-viewer #app {
 
                 .row_draggable {                            
                     border-color: #666;
-                    color: #fff;
+                    color: @coolgrey200;
                 }
             }
         }
@@ -238,7 +240,7 @@ perspective-viewer #app {
                 }
 
                 #name {
-                    color: #fff;
+                    color: @coolgrey200;
                 }
 
                 #name:before {