Calendar input (#61)

* cleaning up

* fix handle errors

* clean checks

Author: jdavidson

examples/calendar/calendar.js

@@ -26,36 +26,52 @@ looker.plugins.visualizations.add({
 
     // [{x.name: value, y.name: value}, ]
     let series = []
-    data.forEach(function(datum) {
+    data.filter(function(d) {
+      return d3v4.timeParse("%Y-%m-%d")(d[x.name]["value"])
+    }).forEach(function(d) {
       let point = {}
-      point[x.name] = datum[x.name]["value"]
-      point[y.name] = datum[y.name]["value"]
+      point[x.name] = d[x.name]["value"]
+      point[y.name] = d[y.name]["value"]
       series.push(point)
     })
 
     // {date: value, }
     let formattedData = d3v4.nest()
-      .key(function(d) { return d[x.name]; })
-      .rollup(function(d) { return d[0][y.name]; })
-      .map(series);
+      .key(function(d) { return d[x.name] })
+      .rollup(function(d) { return d[0][y.name] })
+      .map(series)
 
-    let formatter = formatType(y.value_format);
+    let formatter = formatType(y.value_format)
 
     return {
       data: formattedData,
       formatter: formatter,
     }
   },
-
+  handleErrors(queryResponse) {
+    if (!(queryResponse.fields.dimensions[0].is_timeframe &&
+          queryResponse.fields.dimensions[0].time_interval.name === "day")) {
+      this.addError({
+        group: "date-req",
+        title: "Incompatible Data",
+        message: "Calendar Visualization Requires a Date Dimension",
+      })
+      return false
+    } else {
+      this.clearErrors("date-req")
+    }
+    return true
+  },
   // Render in response to the data or settings changing
   update: function(data, element, config, queryResponse) {
     if (!handleErrors(this, queryResponse, {
       min_pivots: 0, max_pivots: 0,
       min_dimensions: 1, max_dimensions: 1,
       min_measures: 1, max_measures: 1,
-    })) return;
-    this.create(element, config);
-    let formattedData = this.prepare(data, queryResponse);
-    return calendarView(element, formattedData, config.color_range);
+    })) return
+    if (!this.handleErrors(queryResponse)) return
+    this.create(element, config)
+    let formattedData = this.prepare(data, queryResponse)
+    return calendarView(element, formattedData, config.color_range)
   }
-});
+})

examples/calendar/calendar_view.js

@@ -1,106 +1,104 @@
 function calendarView(element, formattedData, colorRange) {
-  let d3 = d3v4;
-
-  let data = formattedData.data;
+  let data = formattedData.data
 
   function monthPath(t0) {
     let t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
-        d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0)
-        d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
+        d0 = t0.getDay(), w0 = d3v4.timeWeek.count(d3v4.timeYear(t0), t0)
+        d1 = t1.getDay(), w1 = d3v4.timeWeek.count(d3v4.timeYear(t1), t1)
     return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
         + "H" + w0 * cellSize + "V" + 7 * cellSize
         + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
         + "H" + (w1 + 1) * cellSize + "V" + 0
-        + "H" + (w0 + 1) * cellSize + "Z";
+        + "H" + (w0 + 1) * cellSize + "Z"
   }
 
-  let format = d3.timeFormat("%Y-%m-%d");
-  let parseDate = d3.timeParse("%Y-%m-%d");
+  let format = d3v4.timeFormat("%Y-%m-%d")
+  let parseDate = d3v4.timeParse("%Y-%m-%d")
 
-  let minYear = d3.min(data.keys(), function(d) { return parseDate(d).getFullYear(); })
-  let maxYear = d3.max(data.keys(), function(d) { return parseDate(d).getFullYear(); })
+  let minYear = d3v4.min(data.keys(), function(d) { return parseDate(d).getFullYear() })
+  let maxYear = d3v4.max(data.keys(), function(d) { return parseDate(d).getFullYear() })
 
   let yearLength = maxYear - minYear + 1
 
-  let minY = d3.min(data.values(), function(d) { return d; })
-  let maxY = d3.max(data.values(), function(d) { return d; })
+  let minY = d3v4.min(data.values(), function(d) { return d })
+  let maxY = d3v4.max(data.values(), function(d) { return d })
 
   let heightCellRatio = 9
-      widthCellRatio = 55;
+      widthCellRatio = 55
 
-  let cellSize = d3.max([d3.min([(element.offsetWidth - 20) / widthCellRatio, element.offsetHeight / yearLength / heightCellRatio]), 1])
+  let cellSize = d3v4.max([d3v4.min([(element.offsetWidth - 20) / widthCellRatio, element.offsetHeight / yearLength / heightCellRatio]), 1])
       width = cellSize * widthCellRatio
       yearHeight = cellSize * heightCellRatio
-      height = yearHeight * yearLength;
+      height = yearHeight * yearLength
 
-  let color = d3.scaleQuantize()
+  let color = d3v4.scaleQuantize()
       .domain([minY, maxY])
-      .range(colorRange);
+      .range(colorRange)
 
-  let svg = d3.select(element)
+  let svg = d3v4.select(element)
     .selectAll("svg")
-      .data(d3.range(minYear, maxYear + 1))
+      .data(d3v4.range(minYear, maxYear + 1))
     .enter().append("svg")
       .style("display", "block")
       .style("margin", "0 auto")
       .attr("width", width)
       .attr("height", yearHeight)
-      .attr("year", function(d) { return d; })
+      .attr("year", function(d) { return d })
     .append("g")
-      .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + ",0)");
+      .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + ",0)")
 
   svg.append("text")
       .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
       .style("font-family", "sans-serif")
       .style("font-size", 10)
       .style("text-anchor", "middle")
-      .text(function(d) { return d; });
+      .text(function(d) { return d })
 
   let rect = svg.append("g")
       .attr("fill", "none")
       .attr("stroke", "#ccc")
     .selectAll("rect")
-    .data(function(d) { return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
+    .data(function(d) { return d3v4.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)) })
     .enter().append("rect")
       .attr("width", cellSize)
       .attr("height", cellSize)
-      .attr("x", function(d) { return d3.timeWeek.count(d3.timeYear(d), d) * cellSize; })
-      .attr("y", function(d) { return d.getDay() * cellSize; })
-      .datum(format);
+      .attr("x", function(d) { return d3v4.timeWeek.count(d3v4.timeYear(d), d) * cellSize })
+      .attr("y", function(d) { return d.getDay() * cellSize })
+      .datum(format)
 
   svg.append("g")
       .attr("fill", "none")
       .attr("stroke", "#000")
     .selectAll("path")
-    .data(function(d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
+    .data(function(d) { return d3v4.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)) })
     .enter().append("path")
-      .attr("d", monthPath);
+      .attr("d", monthPath)
 
-  let tooltip = d3.select(element)
+  let tooltip = d3v4.select(element)
     .append("div").attr("id", "tooltip")
     .style("position", "absolute")
     .style("z-index", "10")
     .style("visibility", "hidden")
 
-  rect.filter(function(d) { return data.has(d); })
-      .attr("fill", function(d) { return color(data.get(d)); })
+  rect.filter(function(d) { return data.has(d) })
+      .attr("fill", function(d) { return color(data.get(d)) })
     .append("title")
-      .text(function(d) { return d + ": " + formattedData.formatter(data.get(d)); })
+      .text(function(d) { return d + ": " + formattedData.formatter(data.get(d)) })
     .on("mouseenter", function(d) {
-      tooltip.style("visibility", "visible");
-      d.style("fill-opacity", .15);
+      tooltip.style("visibility", "visible")
+      d.style("fill-opacity", .15)
       tooltip.transition()
         .duration(10)
         .style("opacity", .9)
-        .style("visibility", "visible");
-      tooltip.text(function(d) { return d + ": " + formattedData.formatter(data.get(d)); })
-        .style("left",  (d3.event.pageX)+30 + "px")
-        .style("top", (d3.event.pageY) + "px");
+        .style("visibility", "visible")
+      tooltip.text(function(d) { return d + ": " + formattedData.formatter(data.get(d)) })
+        .style("left",  (d3v4.event.pageX)+30 + "px")
+        .style("top", (d3v4.event.pageY) + "px")
     })
     .on("mouseleave", function(d) {
       console.log("leave")
       tooltip.text("")
-        .style("visibility", "hidden");
-      d.style("fill-opacity", 1);
-    });
+        .style("visibility", "hidden")
+      d.style("fill-opacity", 1)
+    })
 }