Improved colour-legend display and labels (#143)

* Use a "nice" number range for display purpose only

* Improved colour-legend display

Cleaner numbers (reduces display of fractions), and better display of "clean" range
Give the colour legend a bit more height, but less width, which it doesn't need

* Make legend components non-global

Prevents legends from different charts interfering with each other
Stores `pageIndex` in settings to preserve page position

Author: andy-lee-eng

packages/perspective-viewer-d3fc/src/js/legend/colorRangeLegend.js

@@ -11,8 +11,8 @@ import * as fc from "d3fc";
 import {getOrCreateElement} from "../utils/utils";
 
 export function colorRangeLegend() {
-    const width = 100;
-    const height = 150;
+    const width = 90;
+    const height = 200;
     let scale = null;
 
     const xScale = d3
@@ -23,7 +23,10 @@ export function colorRangeLegend() {
     const formatFunc = d => (Number.isInteger(d) ? d3.format(",.0f")(d) : d3.format(",.2f")(d));
 
     function legend(container) {
-        const domain = scale.domain();
+        const domain = scale
+            .copy()
+            .nice()
+            .domain();
         const paddedDomain = fc
             .extentLinear()
             .pad([0.1, 0.1])
@@ -47,16 +50,19 @@ export function colorRangeLegend() {
                 selection.selectAll("path").style("fill", d => scale(d));
             });
 
+        const middle = domain[0] < 0 && domain[1] > 0 ? 0 : Math.round((domain[1] + domain[0]) / 2);
+        const tickValues = [...domain, middle];
+
         const axisLabel = fc
             .axisRight(yScale)
-            .tickValues([...domain, (domain[1] + domain[0]) / 2])
+            .tickValues(tickValues)
             .tickSizeOuter(0)
             .tickFormat(d => formatFunc(d));
 
         const legendSelection = getOrCreateElement(container, "div.legend-container", () =>
             container
                 .append("div")
-                .attr("class", "legend-container")
+                .attr("class", "legend-container legend-color")
                 .style("z-index", "2")
         );
 

packages/perspective-viewer-d3fc/src/js/legend/legend.js

@@ -15,18 +15,22 @@ import {getChartElement} from "../plugin/root";
 import {getOrCreateElement} from "../utils/utils";
 import {draggableComponent} from "./styling/draggableComponent";
 
-const scrollColorLegend = scrollableLegend(
-    d3Legend
-        .legendColor()
-        .shape("circle")
-        .shapeRadius(6)
-);
-const scrollSymbolLegend = scrollableLegend(
-    d3Legend
-        .legendSymbol()
-        .shapePadding(1)
-        .labelOffset(3)
-);
+const scrollColorLegend = settings =>
+    scrollableLegend(
+        d3Legend
+            .legendColor()
+            .shape("circle")
+            .shapeRadius(6),
+        settings
+    );
+const scrollSymbolLegend = settings =>
+    scrollableLegend(
+        d3Legend
+            .legendSymbol()
+            .shapePadding(1)
+            .labelOffset(3),
+        settings
+    );
 
 export const colorLegend = () => legendComponent(scrollColorLegend);
 export const symbolLegend = () => legendComponent(scrollSymbolLegend, symbolScale);
@@ -42,14 +46,15 @@ function symbolScale(fromScale) {
         .range(range);
 }
 
-function legendComponent(scrollLegend, scaleModifier) {
+function legendComponent(scrollLegendComponent, scaleModifier) {
     let settings = {};
     let scale = null;
     let color = null;
     let draggable = draggableComponent();
 
     function legend(container) {
         if (scale && scale.range().length > 1) {
+            const scrollLegend = scrollLegendComponent(settings);
             scrollLegend
                 .scale(scale)
                 .orient("vertical")
@@ -71,6 +76,25 @@ function legendComponent(scrollLegend, scaleModifier) {
 
             const legendSelection = getOrCreateElement(container, "div.legend-container", () => container.append("div"));
 
+            scrollLegend.decorate(selection => {
+                const isHidden = data => settings.hideKeys && settings.hideKeys.includes(data);
+
+                const cells = selection
+                    .select("g.legendCells")
+                    .attr("transform", "translate(20,20)")
+                    .selectAll("g.cell");
+
+                cells.classed("hidden", isHidden);
+                cells.append("title").html(d => d);
+
+                if (color) {
+                    cells
+                        .select("path")
+                        .style("fill", d => (isHidden(d) ? null : color(d)))
+                        .style("stroke", d => (isHidden(d) ? null : withoutOpacity(color(d))));
+                }
+            });
+
             // render the legend
             legendSelection
                 .attr("class", "legend-container")
@@ -82,25 +106,6 @@ function legendComponent(scrollLegend, scaleModifier) {
         }
     }
 
-    scrollLegend.decorate(selection => {
-        const isHidden = data => settings.hideKeys && settings.hideKeys.includes(data);
-
-        const cells = selection
-            .select("g.legendCells")
-            .attr("transform", "translate(20,20)")
-            .selectAll("g.cell");
-
-        cells.classed("hidden", isHidden);
-        cells.append("title").html(d => d);
-
-        if (color) {
-            cells
-                .select("path")
-                .style("fill", d => (isHidden(d) ? null : color(d)))
-                .style("stroke", d => (isHidden(d) ? null : withoutOpacity(color(d))));
-        }
-    });
-
     legend.settings = (...args) => {
         if (!args.length) {
             return settings;

packages/perspective-viewer-d3fc/src/js/legend/scrollableLegend.js

@@ -8,24 +8,19 @@
  */
 import * as d3Legend from "d3-svg-legend";
 import {rebindAll} from "d3fc";
-import {areArraysEqualSimple, getOrCreateElement} from "../utils/utils";
+import {getOrCreateElement} from "../utils/utils";
 import legendControlsTemplate from "../../html/legend-controls.html";
 import {cropCellContents} from "./styling/cropCellContents";
 
-export default fromLegend => {
+export default (fromLegend, settings) => {
     const legend = fromLegend || d3Legend.legendColor();
-    let domain = [];
     let pageCount = 1;
     let pageSize = 15;
-    let pageIndex = 0;
+    let pageIndex = settings.legend ? settings.legend.pageIndex : 0;
     let decorate = () => {};
 
     const scrollableLegend = selection => {
-        const newDomain = legend.scale().domain();
-        if (!areArraysEqualSimple(domain, newDomain)) {
-            pageIndex = 0;
-            domain = newDomain;
-        }
+        const domain = legend.scale().domain();
         pageCount = Math.ceil(domain.length / pageSize);
 
         render(selection);
@@ -48,7 +43,7 @@ export default fromLegend => {
             .attr("class", pageIndex === 0 ? "disabled" : "")
             .on("click", () => {
                 if (pageIndex > 0) {
-                    pageIndex--;
+                    setPage(pageIndex - 1);
                     render(selection);
                 }
             });
@@ -58,7 +53,7 @@ export default fromLegend => {
             .attr("class", pageIndex >= pageCount - 1 ? "disabled" : "")
             .on("click", () => {
                 if (pageIndex < pageCount - 1) {
-                    pageIndex++;
+                    setPage(pageIndex + 1);
                     render(selection);
                 }
             });
@@ -80,6 +75,11 @@ export default fromLegend => {
         decorate(selection);
     };
 
+    const setPage = index => {
+        pageIndex = index;
+        settings.legend = {pageIndex};
+    };
+
     const cellFilter = () => {
         return (_, i) => i >= pageSize * pageIndex && i < pageSize * pageIndex + pageSize;
     };
@@ -103,5 +103,6 @@ export default fromLegend => {
     };
 
     rebindAll(scrollableLegend, legend);
+
     return scrollableLegend;
 };

packages/perspective-viewer-d3fc/src/less/chart.less

@@ -20,7 +20,7 @@
         overflow: hidden;
 
         &.d3_heatmap {
-            padding-right: 165px;
+            padding-right: 105px;
         }
 
         &.d3_sunburst {
@@ -151,6 +151,10 @@
         left: auto;
         width: 150px;
 
+        &.legend-color {
+            width: 90px;
+        }
+
         &[borderbox-on-hover="true"] {
             &:hover {
                 box-shadow: 2px 2px 6px #000;