Merge pull request #25 from 4mile/ian/fixes-2

Near-final custom vis fixes

src/examples/chord/README.md

@@ -18,7 +18,7 @@ https://looker-custom-viz-a.lookercdn.com/master/chord.js
 
 **How it works**
 
-Create a look with one measure and two dimensions. The order of the dimensions does not really matter as the color will fall with the higher affinity direction.
+Create a Look with one measure and two dimensions. The order of the dimensions does not really matter as the color will fall with the higher affinity direction.
 
 For example, in the chord diagram featured above, more flights occur from LAX to ORD compared to ORD to LAX, so the chord color is associated with LAX.
 

src/examples/chord/chord.ts

@@ -128,8 +128,6 @@ const vis: ChordVisualization = {
     const innerRadius = outerRadius - thickness
 
     // Stop if radius is < 0
-    // TODO: show warning to user ???
-    // TODO: Set a min-radius ???
     if (innerRadius < 0) return
 
     const valueFormatter = formatType(measure.value_format) || defaultFormatter

src/examples/collapsible_tree/README.md

@@ -17,7 +17,7 @@ https://looker-custom-viz-a.lookercdn.com/master/collapsible_tree.js
 
 **How it works**
 
-Create a look with two or more dimensions.
+Create a Look with two or more dimensions.
 
 For example, in the collapsible tree diagram featured above, you can see the nested relationship between department, category and brand in an ecommerce catalog.
 

src/examples/collapsible_tree/collapsible_tree.ts

@@ -62,30 +62,23 @@ function burrow(table: any, taxonomy: any[]) {
 const vis: CollapsibleTreeVisualization = {
   id: 'collapsible_tree', // id/label not required, but nice for testing and keeping manifests in sync
   label: 'Collapsible Tree',
-  options: {},
+  options: {
+    color_with_children: {
+      label: 'Node Color With Children',
+      default: '#36c1b3',
+      type: 'string',
+      display: 'color'
+    },
+    color_empty: {
+      label: 'Empty Node Color',
+      default: '#fff',
+      type: 'string',
+      display: 'color'
+    }
+  },
+
   // Set up the initial state of the visualization
   create(element, config) {
-    element.innerHTML = `
-      <style>
-        .node circle {
-          fill: ${config.color_empty};
-          stroke: ${config.color_with_children};
-          stroke-width: 1.5px;
-        }
-
-        .node text {
-          font-family: sans-serif;
-          fill: #333;
-        }
-
-        .link {
-          fill: none;
-          stroke: #ccc;
-          stroke-width: 1.5px;
-        }
-      </style>
-    `
-
     this.svg = d3.select(element).append('svg')
   },
 
@@ -99,8 +92,8 @@ const vis: CollapsibleTreeVisualization = {
 
     let i = 0
     const nodeColors = {
-      children: config.color_with_children,
-      empty: config.color_empty
+      children: (config && config.color_with_children) || this.options.color_with_children.default,
+      empty: (config && config.color_empty) || this.options.color_empty.default
     }
     const textSize = 10
     const nodeRadius = 4
@@ -199,13 +192,6 @@ const vis: CollapsibleTreeVisualization = {
       nodeEnter.append('circle')
         .attr('class', 'node')
         .attr('r', 1e-6)
-        .style('fill', (d: any) => {
-          return (
-            d._children
-              ? nodeColors.children
-              : nodeColors.empty
-          )
-        })
 
       // Add labels for the nodes
       nodeEnter.append('text')
@@ -216,6 +202,7 @@ const vis: CollapsibleTreeVisualization = {
         .attr('text-anchor', (d: any) => {
           return d.children || d._children ? 'end' : 'start'
         })
+        .style('font-family', "'Open Sans', Helvetica, sans-serif")
         .style('font-size', textSize + 'px')
         .text((d: any) => d.data.name)
 
@@ -232,9 +219,9 @@ const vis: CollapsibleTreeVisualization = {
       // Update the node attributes and style
       nodeUpdate.select('circle.node')
         .attr('r', nodeRadius)
-        .style('fill', (d: any) => {
-          return d._children ? nodeColors.children : nodeColors.empty
-        })
+        .style('fill', (d: any) => d._children ? nodeColors.children : nodeColors.empty)
+        .style('stroke', nodeColors.children)
+        .style('stroke-width', 1.5)
         .attr('cursor', 'pointer')
 
       // Remove any exiting nodes
@@ -268,6 +255,9 @@ const vis: CollapsibleTreeVisualization = {
           .enter()
           .insert('path', 'g')
           .attr('class', 'link')
+          .style('fill', 'none')
+          .style('stroke', '#ddd')
+          .style('stroke-width', 1.5)
           .attr('d', (d) => {
             const o = { x: source.x0, y: source.y0 }
             return diagonal(o, o)

src/examples/common/utils.ts

@@ -6,10 +6,6 @@ import {
   VisualizationDefinition
 } from '../types/types'
 
-export function log(...args: any[]) {
-  console.log.apply(console, args)
-}
-
 export const formatType = (valueFormat: string) => {
   if (!valueFormat) return undefined
   let format = ''
@@ -28,7 +24,9 @@ export const formatType = (valueFormat: string) => {
   format += '.'
   format += splitValueFormat.length > 1 ? splitValueFormat[1].length : 0
 
-  switch (valueFormat.slice(-1)) { case '%': format += '%'; break
+  switch (valueFormat.slice(-1)) {
+    case '%':
+      format += '%'; break
     case '0':
       format += 'f'; break
   }

src/examples/liquid_fill_gauge/liquid_fill_gauge.ts

@@ -9,12 +9,7 @@ import * as LiquidFillGauge from './liquid_fill_gauge.js'
 // @ts-ignore
 LiquidFillGauge.initialize(d3)
 
-import {
-  Looker,
-  VisualizationDefinition,
-  VisConfig,
-  VisQueryResponse
-} from '../types/types'
+import { Looker, VisualizationDefinition } from '../types/types'
 
 interface LiquidFillGaugeVisualization extends VisualizationDefinition {
   svg?: any
@@ -47,10 +42,7 @@ const vis: LiquidFillGaugeVisualization = {
       default: defaults.maxValue,
       section: 'Value',
       type: 'number',
-      placeholder: 'Any positive number',
-      hidden(config: VisConfig, queryResponse: VisQueryResponse) {
-        return config.showComparison
-      }
+      placeholder: 'Any positive number'
     },
     circleThickness: {
       label: 'Circle Thickness',
@@ -226,6 +218,15 @@ const vis: LiquidFillGaugeVisualization = {
     // @ts-ignore
     const gaugeConfig = Object.assign(LiquidFillGauge.defaultConfig, config)
 
+    if (this.addError && this.clearErrors) {
+      if (gaugeConfig.maxValue <= 0) {
+        this.addError({ group: 'config', title: 'Max value must be greater than zero.' })
+        return
+      } else {
+        this.clearErrors('config')
+      }
+    }
+
     const datumField = queryResponse.fields.measure_like[0]
     const datum = data[0][datumField.name]
     let value = datum.value

src/examples/subtotal/README.md

@@ -16,6 +16,6 @@ https://looker-custom-viz-a.lookercdn.com/master/subtotal.js
 
 **How it works**
 
-Create a look with at least one dimension and one measure.
+Create a Look with at least one dimension and one measure.
 
 For example, in the example above, we have grouped products by category and brand and by the year they were ordered. We've also pivoted by department to show the number of orders of those products by department. Row totals appear on the right side of the table.

src/examples/subtotal/subtotal.ts

@@ -72,9 +72,9 @@ const vis: Subtotal = {
         throw new Error(`Unknown theme: ${theme}`)
     }
 
-    const pivots = config.query_fields.pivots.map((d: any) => d.name)
-    const dimensions = config.query_fields.dimensions.map((d: any) => d.name)
-    const measures = config.query_fields.measures
+    const pivots: string[] = queryResponse.fields.pivots.map((d: any) => d.name)
+    const dimensions: string[] = queryResponse.fields.dimensions.map((d: any) => d.name)
+    const measures = queryResponse.fields.measures
 
     const labels: { [key: string]: any } = {}
     for (const key of Object.keys(config.query_fields)) {
@@ -85,12 +85,17 @@ const vis: Subtotal = {
       }
     }
 
+    const pivotSet: { [key: string]: boolean } = {}
+    for (const pivot of pivots) {
+      pivotSet[pivot] = true
+    }
+
     const ptData = []
     for (const row of data) {
       const ptRow: { [key: string]: any } = {}
       for (const key of Object.keys(row)) {
         const obj = row[key]
-        if (pivots.includes(key)) continue
+        if (pivotSet[key]) continue
         ptRow[key] = obj.value
       }
       if (pivots.length === 0) {

src/examples/sunburst/README.md

@@ -17,7 +17,7 @@ https://looker-custom-viz-a.lookercdn.com/master/sunburst.js
 
 **How it works**
 
-Create a look with any number of dimensions and exactly one measure.
+Create a Look with any number of dimensions and exactly one measure.
 
 For example, in the sunburst featured above, you can see event counts by the hierarchical sequence of events.
 

src/examples/sunburst/sunburst.ts

@@ -98,7 +98,6 @@ const vis: SunburstVisualization = {
         value: dimensions.map((dimension) => row[dimension.name].value)
       }
     })
-    // row[dimension].value.split("-");
 
     const partition = d3.partition().size([2 * Math.PI, radius * radius])
 

src/examples/treemap/README.md

@@ -17,7 +17,7 @@ https://looker-custom-viz-a.lookercdn.com/master/treemap.js
 
 **How it works**
 
-Create a look with any amount of dimensions and one measure.
+Create a Look with any amount of dimensions and one measure.
 
 For example, in the treemap featured above, you can see event counts by the hierarchical sequence of events.
 

src/examples/types/types.ts

@@ -111,7 +111,6 @@ export interface VisOption {
   max?: number
   step?: number
   required?: boolean
-  hidden?: (config: VisConfig, queryResponse: VisQueryResponse) => boolean
 }
 
 export interface VisualizationError {