old-spike/client/d3/sliders/date_range.js

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;