Merge pull request #160 from redbearsam/feature/sunburst-color-range

Use the same color range for all charts when split
finos · Apr 5, 2019 · 114fa5d · 114fa5d
2 parents ffc0c13 + bf5725a
commit 114fa5d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 45 deletions.
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/sunburst.js b/packages/perspective-viewer-d3fc/src/js/charts/sunburst.js
@@ -12,12 +12,22 @@ import {treeData} from "../data/treeData";
 import {sunburstSeries, treeColor} from "../series/sunburst/sunburstSeries";
 import {colorRangeLegend} from "../legend/colorRangeLegend";
 import {tooltip} from "../tooltip/tooltip";
+import {getOrCreateElement} from "../utils/utils";
 
 function sunburst(container, settings) {
     if (settings.crossValues.length === 0) return;
 
     const sunburstData = treeData(settings);
-    const {width: containerWidth, height: containerHeight} = container.node().getBoundingClientRect();
+    const innerContainer = getOrCreateElement(container, "div.inner-container", () => container.append("div").attr("class", "inner-container"));
+    const color = treeColor(settings, sunburstData.map(d => d.extents));
+
+    const innerRect = innerContainer.node().getBoundingClientRect();
+    const containerHeight = innerRect.height;
+    const containerWidth = innerRect.width - (color ? 70 : 0);
+    if (color) {
+        const legend = colorRangeLegend().scale(color);
+        container.call(legend);
+    }
 
     const minSize = 500;
     const cols = Math.min(sunburstData.length, Math.floor(containerWidth / minSize));
@@ -30,10 +40,10 @@ function sunburst(container, settings) {
         containerSize.height = containerHeight / rows;
     }
 
-    container.style("grid-template-columns", `repeat(${cols}, ${containerSize.width}px)`);
-    container.style("grid-template-rows", `repeat(${rows}, ${containerSize.height}px)`);
+    innerContainer.style("grid-template-columns", `repeat(${cols}, ${containerSize.width}px)`);
+    innerContainer.style("grid-template-rows", `repeat(${rows}, ${containerSize.height}px)`);
 
-    const sunburstDiv = container.selectAll("div.sunburst-container").data(treeData(settings), d => d.split);
+    const sunburstDiv = innerContainer.selectAll("div.sunburst-container").data(treeData(settings), d => d.split);
     sunburstDiv.exit().remove();
 
     const sunburstEnter = sunburstDiv
@@ -68,21 +78,13 @@ function sunburst(container, settings) {
             title.attr("transform", `translate(0, ${-(height / 2 - 5)})`);
 
             const radius = (Math.min(width, height) - 120) / 6;
-            const color = treeColor(settings, split, data.data.children);
             sunburstSeries()
                 .settings(settings)
                 .split(split)
                 .data(data)
                 .color(color)
                 .radius(radius)(sunburstElement);
 
-            if (color) {
-                const legend = colorRangeLegend().scale(color);
-                select(svgNode.parentNode)
-                    .call(legend)
-                    .select("div.legend-container");
-            }
-
             tooltip().settings(settings)(sunburstElement.selectAll("g.segment"));
         });
 }

diff --git a/packages/perspective-viewer-d3fc/src/js/data/treeData.js b/packages/perspective-viewer-d3fc/src/js/data/treeData.js
@@ -57,14 +57,22 @@ export function treeData(settings) {
             d.key = set[0];
         });
 
-        return {split: set[0], data: chartData};
+        return {split: set[0], data: chartData, extents: getExtents(settings, set)};
     });
 
     return data;
 }
 
 export const getDataValue = (d, aggregate, split) => (split.length ? d[`${split}|${aggregate.name}`] : d[aggregate.name]);
 
+function getExtents(settings, [split, data]) {
+    if (settings.mainValues.length > 1) {
+        const min = Math.min(...settings.data.map(d => getDataValue(d, settings.mainValues[1], split)));
+        const max = Math.max(...data.map(d => d.color));
+        return [min, max];
+    }
+}
+
 function getSplitNames(d) {
     const splits = [];
     Object.keys(d).forEach(key => {

diff --git a/packages/perspective-viewer-d3fc/src/js/series/sunburst/sunburstSeries.js b/packages/perspective-viewer-d3fc/src/js/series/sunburst/sunburstSeries.js
@@ -7,7 +7,7 @@
  *
  */
 
-import {getDataValue} from "../../data/treeData";
+import {flattenExtent} from "../../axis/flatten";
 import {seriesColorRange} from "../../series/seriesRange";
 import {drawArc, arcVisible} from "./sunburstArc";
 import {labelVisible, labelTransform, cropLabel} from "./sunburstLabel";
@@ -113,10 +113,8 @@ export function sunburstSeries() {
     return _sunburstSeries;
 }
 
-export function treeColor(settings, split, data) {
+export function treeColor(settings, extents) {
     if (settings.mainValues.length > 1) {
-        const min = Math.min(...settings.data.map(d => getDataValue(d, settings.mainValues[1], split)));
-        const max = Math.max(...data.map(d => d.color));
-        return seriesColorRange(settings, null, null, [min, max]);
+        return seriesColorRange(settings, null, null, flattenExtent(extents));
     }
 }
diff --git a/packages/perspective-viewer-d3fc/src/less/chart.less b/packages/perspective-viewer-d3fc/src/less/chart.less
@@ -24,41 +24,42 @@
         }
 
         &.d3_sunburst {
-            display: inline-grid;
             padding: 0;
-            overflow-y: auto;
 
-            & div {
-                overflow: hidden;
-            }
-
-            & svg {
+            & .inner-container {
                 width: 100%;
                 height: 100%;
-            }
-
-            & path {
-                fill: var(--d3fc-series, rgba(31, 119, 180, 0.5));
-            }
+                display: inline-grid;
+                padding: 0;
+                margin: 0;
+                overflow-x: hidden;
+                overflow-y: auto;
+
+                & div {
+                    overflow: hidden;
+                }
 
-            & text.title,
-            & text.segment,
-            & text.parent {
-                text-anchor: middle;
-                user-select: none;
-                pointer-events: none;
-                fill: var(--d3fc-sunburst--labels, rgb(51, 51, 51));
+                & svg {
+                    width: 100%;
+                    height: 100%;
+                }
 
-                &.title {
-                    dominant-baseline: hanging;
+                & path {
+                    fill: var(--d3fc-series, rgba(31, 119, 180, 0.5));
                 }
-            }
 
-            .legend-container {
-                display: inline-flex;
-                top: unset;
-                right: unset;
-                transform: translate(-100px, 5px);
+                & text.title,
+                & text.segment,
+                & text.parent {
+                    text-anchor: middle;
+                    user-select: none;
+                    pointer-events: none;
+                    fill: var(--d3fc-sunburst--labels, rgb(51, 51, 51));
+
+                    &.title {
+                        dominant-baseline: hanging;
+                    }
+                }
             }
         }