Merge pull request #77 from looker/richard/task/hide-null-points-sunb…

…urst

Richard/task/hide null points sunburst

package.json

@@ -37,12 +37,12 @@
   },
   "dependencies": {
     "@types/d3": "^5.0.0",
-    "@types/d3-sankey": "^0.7.2",
+    "@types/d3-sankey": "^0.7.4",
     "babel-core": "^6.26.3",
     "babel-loader": "7.1.5",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
-    "d3-sankey": "^0.7.1",
+    "d3-sankey": "^0.10.4",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }

src/examples/sankey/sankey.ts

@@ -1,5 +1,5 @@
 import * as d3 from 'd3'
-import { sankey, sankeyLinkHorizontal } from 'd3-sankey'
+import { sankey, sankeyLinkHorizontal, sankeyLeft } from 'd3-sankey'
 import { handleErrors } from '../common/utils'
 
 import {
@@ -27,6 +27,11 @@ const vis: Sankey = {
       label: 'Color Range',
       display: 'colors',
       default: ['#dd3333', '#80ce5d', '#f78131', '#369dc1', '#c572d3', '#36c1b3', '#b57052', '#ed69af']
+    },
+    show_null_points: {
+      type: 'boolean',
+      label: 'Plot Null Values',
+      default: true
     }
   },
   // Set up the initial state of the visualization
@@ -70,10 +75,15 @@ const vis: Sankey = {
     const defs = svg.append('defs')
 
     const sankeyInst = sankey()
+      .nodeAlign(sankeyLeft)
       .nodeWidth(10)
       .nodePadding(12)
       .extent([[1, 1], [width - 1, height - 6]])
 
+    // TODO: Placeholder until @types catches up with sankey
+    const newSankeyProps: any = sankeyInst
+    newSankeyProps.nodeSort(null)
+
     let link = svg.append('g')
       .attr('class', 'links')
       .attr('fill', 'none')
@@ -95,7 +105,11 @@ const vis: Sankey = {
 
     data.forEach(function (d: any) {
       // variable number of dimensions
-      const path: any = dimensions.map(function (dim) { return d[dim.name].value + '' })
+      const path: any[] = []
+      for(const dim of dimensions) {
+        if(d[dim.name].value === null && !config.show_null_points) break
+        path.push(d[dim.name].value + '')
+      }
       path.forEach(function (p: any, i: number) {
         if (i === path.length - 1) return
         const source: any = path.slice(i, i + 1)[0] + i

src/examples/sunburst/sunburst.ts

@@ -4,7 +4,8 @@ import { formatType, handleErrors } from '../common/utils'
 import {
   Row,
   Looker,
-  VisualizationDefinition
+  VisualizationDefinition,
+  VisConfig
 } from '../types/types'
 
 // Global values provided via the API
@@ -34,7 +35,7 @@ function descend(obj: any, depth: number = 0) {
   return arr
 }
 
-function burrow(table: Row[]) {
+function burrow(table: Row[], config: VisConfig) {
   // create nested object
   const obj: any = {}
 
@@ -44,6 +45,9 @@ function burrow(table: Row[]) {
 
     // create children as nested objects
     row.taxonomy.value.forEach((key: any) => {
+      if(key === null && !config.show_null_points) {
+        return
+      }
       layer[key] = key in layer ? layer[key] : {}
       layer = layer[key]
     })
@@ -67,6 +71,11 @@ const vis: SunburstVisualization = {
       label: 'Color Range',
       display: 'colors',
       default: ['#dd3333', '#80ce5d', '#f78131', '#369dc1', '#c572d3', '#36c1b3', '#b57052', '#ed69af']
+    },
+    show_null_points: {
+      type: 'boolean',
+      label: 'Plot Null Values',
+      default: true
     }
   },
   // Set up the initial state of the visualization
@@ -120,7 +129,7 @@ const vis: SunburstVisualization = {
 
     const label = svg.append('text').attr('y', -height / 2 + 20).attr('x', -width / 2 + 20)
 
-    const root = d3.hierarchy(burrow(data)).sum((d: any) => {
+    const root = d3.hierarchy(burrow(data, config)).sum((d: any) => {
       return 'data' in d ? d.data[measure.name].value : 0
     })
     partition(root)