fix problems with rendering data

client/d3/line/spline_stack.js

@@ -30,10 +30,8 @@ class SplineStackChart extends LineChart {
     var spline_stack = this,
       serialized_data = {
         series: [] };
-
     data.series.forEach(function(series, i){
-      series.css_class = series.css_class || spline_stack.toClass ? spline_stack.toClass(series) : "";
-      series.title = series.title || spline_stack.toClass ? spline_stack.titleize(series) : "";
+      series.css_class = series.css_class || spline_stack.toClass ? spline_stack.toClass(series) : "series-" + i;
       if (spline_stack.domain_attr !== 'x' && spline_stack.range_attr !== 'y'){
         series.values = series.values.map((value)=>{
           return {x: value[spline_stack.domain_attr], y: value[spline_stack.range_attr], series: series};
@@ -41,6 +39,7 @@ class SplineStackChart extends LineChart {
       }
       serialized_data.series.push(series);
     });
+
     serialized_data.series = spline_stack.fnStack(serialized_data.series);
     // assume all series have same domain, use first series to establish extent.
     serialized_data.domain_extent = d3.extent(serialized_data.series[0].values.map((value)=>{ return value.x; }));
@@ -68,6 +67,17 @@ class SplineStackChart extends LineChart {
       spline_stack.applyData(paths);
     });
     stack.exit().remove();
+
+    if (spline_stack.include_dots){
+      data.series.forEach((series)=>{
+        var dots = spline_stack.svg.selectAll(".d3-chart-spline-dot." + series.css_class)
+            .data(series.values);
+        [dots.enter().append("circle"), dots.transition()].forEach((circles)=>{
+          spline_stack.applyDots(series, circles);
+        });
+        dots.exit().remove();
+      });
+    }
   }
 
   applyData(paths){
@@ -75,8 +85,24 @@ class SplineStackChart extends LineChart {
     paths
       .attr("class", function(series){"d3-chart-spline-stack " + series.css_class;})
       .attr("d", function(series){ return spline_stack.fnArea(series.values); })
-      .style("fill", function(series){ return spline_stack.fnColor(series.title); });
+      .style("fill", function(series){ return spline_stack.fnColor(series.title); })
+      .attr('opacity', 1);
   }
+
+  applyDots(series, circles){
+    var spline_stack = this;
+    circles
+      .attr('class', 'd3-chart-spline-dot' + series.css_class)
+      .attr("r", 2)
+      .attr("cx", function(d, i){ return spline_stack.x_scale(d.x); })
+      .attr("cy", function(d, i){ return spline_stack.y_scale(d.y + d.y0); })
+      .attr("title", function(d, i){ return spline_stack.titleizeDatum(series, d); })
+      .style("fill", spline_stack.fnColor(series.title))
+      .attr('opacity', 1)
+      .attr('stroke-width', 0)
+      .attr('stroke', '#fff');
+  }
+
 }
 
 export default SplineStackChart;

client/d3/sliders/date_range.js

@@ -0,0 +1,133 @@
+import Chart from './../base';
+
+class DateRange extends Chart {
+
+
+  get chart_options(){
+    return Object.assign(Object.assign({}, Chart.DEFAULTS), {
+      outer_width: 600,
+      outer_height: 250,
+      margin: {top: 20, left: 10, bottom: 20, right: 10},
+    });
+  }
+
+  defineAxes(){
+    var date_range = this;
+
+    date_range.x_scale = d3.time.scale()
+      .range([0, date_range.width])
+      .clamp(true);
+
+    date_range.x_axis = d3.svg.axis()
+      .scale(date_range.x_scale)
+      .orient("bottom")
+      .ticks(d3.time.weeks, 1)
+      //.tickFormat(function(d) { return d + "°"; })
+      .tickSize(1)
+      .outerTickSize(1)
+      .tickPadding(12)
+
+    date_range.svg.append("g")
+        .attr("class", "d3-chart-domain")
+        .attr("transform", "translate(0," + date_range.height / 2 + ")");
+  }
+
+  afterAxes(){
+    var date_range = this;
+
+    date_range.slider = date_range.svg.append("g")
+        .attr("class", "d3-chart-slider");
+
+    date_range.min_handle = date_range.slider.append("circle")
+      .attr("class", "d3-chart-min-handle")
+      .attr("transform", "translate(0," + date_range.height / 2 + ")")
+      .attr("r", 9);
+
+    date_range.max_handle = date_range.slider.append("circle")
+      .attr("class", "d3-chart-max-handle")
+      .attr("transform", "translate(0," + date_range.height / 2 + ")")
+      .attr("r", 9);
+
+    date_range.brush = d3.svg.brush()
+      .x(date_range.x_scale);
+
+    date_range.slider
+      .call(date_range.brush)
+      //.select(".background")
+      //  .attr("height", date_range.height);
+
+    date_range.slider.call(date_range.brush)
+      .selectAll(".extent,.resize")
+      .remove();
+  }
+
+  drawData(data){
+    var date_range = this;
+    date_range.x_scale.domain([data.abs_min, data.abs_max]);
+
+    date_range.svg.select(".d3-chart-domain")
+      .call(date_range.x_axis);
+
+    date_range.min_handle.attr('cx', date_range.x_scale(data.current_min));
+    date_range.max_handle.attr('cx', date_range.x_scale(data.current_max));
+
+    date_range.brush.extent([data.current_min, data.current_min])
+      .on("brush", ()=>{
+        DateRange.handleBrush(date_range, eval('this'));
+      });
+
+    date_range.slider
+        .call(date_range.brush.event)
+      .transition() // gratuitous intro!
+        .duration(750)
+        .call(date_range.brush.extent([data.current_min, data.current_min]))
+        .call(date_range.brush.event);
+
+  }
+
+  static handleBrush(date_range, elem){
+    var date = date_range.brush.extent()[0],
+      current_min = parseInt(date_range.min_handle.attr('cx')),
+      current_max = parseInt(date_range.max_handle.attr('cx'));
+
+    if (!current_min && !current_max) return false
+    if (d3.event.sourceEvent) { // not a programmatic event
+      date = date_range.x_scale.invert(d3.mouse(elem)[0]);
+      date_range.brush.extent([date, date]);
+    }
+
+    var value = date_range.x_scale(date);
+
+    if (value < current_max && value > current_min){
+      if (Math.abs(value - current_min) < Math.abs(value - current_max)){
+        date_range.min_handle.attr('cx', value);
+        current_min = value;
+      } else {
+        date_range.max_handle.attr('cx', value);
+        current_max = value;
+      }
+    } else if (value >= current_max){
+      date_range.max_handle.attr('cx', value);
+      current_max = value;
+      if (d3.event.sourceEvent && date_range.maxDelta){
+        var new_current_min = date_range.maxDelta(date, date_range.x_scale.invert(current_min));
+        if (new_current_min) date_range.min_handle.attr('cx', date_range.x_scale(new_current_min));
+      }
+    } else {
+      date_range.min_handle.attr('cx', value);
+      current_min = value;
+      if (d3.event.sourceEvent && date_range.maxDelta){
+        var new_current_max = date_range.maxDelta(date, date_range.x_scale.invert(current_max));
+        if (new_current_max) date_range.max_handle.attr('cx', date_range.x_scale(new_current_max));
+      }
+    }
+
+
+    if (d3.event.sourceEvent && date_range.onRangeUpdated) {
+      date_range.onRangeUpdated(date_range.x_scale.invert(current_min), date_range.x_scale.invert(current_max));
+    }
+  }
+
+}
+
+export default DateRange;