136 lines
4.3 KiB
JavaScript
136 lines
4.3 KiB
JavaScript
import Chart from './../base';
|
|
|
|
class BarLineChart extends Chart {
|
|
|
|
get chart_options(){
|
|
return Object.assign(Chart.DEFAULTS, {
|
|
});
|
|
}
|
|
|
|
afterAxes(){
|
|
var chart = this;
|
|
line_chart.fnLine = d3.svg.line()
|
|
.interpolate(line_chart.chart_options.interpolation)
|
|
.x(function(d){ return line_chart.x_scale(d[line_chart.domain_attr]); })
|
|
.y(function(d){ return line_chart.y_scale_right(d[line_chart.line_attr]); });
|
|
}
|
|
|
|
defineAxes(){
|
|
var chart = this;
|
|
|
|
// Axes Left
|
|
chart.y_scale_left = d3.scale.linear()
|
|
.range([chart.height, 0]);
|
|
chart.y_axis_left = d3.svg.axis()
|
|
.scale(chart.y_scale_left)
|
|
.orient("left")
|
|
.outerTickSize(0);
|
|
|
|
// Axes Right
|
|
chart.y_scale_right = d3.scale.linear()
|
|
.range([chart.height, 0]);
|
|
chart.y_axis_left = d3.svg.axis()
|
|
.scale(chart.y_scale_right)
|
|
.orient("right")
|
|
.outerTickSize(0);
|
|
|
|
chart.x_scale = d3.scale.ordinal()
|
|
.rangeRoundBands([chart.height, 0], 0.1);
|
|
|
|
chart.x_axis = d3.svg.axis()
|
|
.scale(chart.x_scale)
|
|
.orient("bottom")
|
|
.outerTickSize(0)
|
|
//chart.x_axis.tickFormat(d3.time.format('%b %d at %H'))
|
|
//chart.x_axis.ticks(d3.time.hour, 12);
|
|
|
|
// append axis groups.
|
|
chart.svg.append("g")
|
|
.attr("class", "d3-chart-range d3-chart-range-left d3-chart-axis");
|
|
chart.svg.append("g")
|
|
.attr("class", "d3-chart-range d3-chart-range-right d3-chart-axis");
|
|
chart.svg.append("g")
|
|
.attr("class", "d3-chart-domain d3-chart-axis")
|
|
.attr("transform", "translate(0, " + (chart.height) + ")");
|
|
}
|
|
|
|
defineDomain(domain){
|
|
var chart = this;
|
|
|
|
chart.domain = domain;
|
|
chart.x_scale.domain(domain);
|
|
chart.svg.select(".d3-chart-domain")
|
|
.call(chart.x_axis);
|
|
.selectAll("text")
|
|
.attr("transform", function(){
|
|
var elem = this,
|
|
bbox = elem.getBBox(),
|
|
middleX = bbox.x + (bbox.width / 2),
|
|
middleY = bbox.y + (bbox.height / 2);
|
|
return "rotate(-30," + middleX + "," + middleY + ")";
|
|
});
|
|
}
|
|
|
|
drawBarData(data){
|
|
var chart = this;
|
|
data = chart.serializeBarData(data);
|
|
|
|
chart.y_scale_left.domain(data.range_extent);
|
|
chart.svg.select(".d3-chart-range").call(chart.y_axis_left);
|
|
|
|
data.series.forEach(function(series){
|
|
var filtered_values = series.values.filter((value){ return chart.domain.indexOf(value[chart.domain_attr]) < 0; })
|
|
bars = chart.svg.selectAll(".d3-chart-bar")
|
|
.data(series.values);
|
|
chart.applyData(series, bars.enter().append("rect"));
|
|
chart.applyData(series, bars.transition());
|
|
bars.exit().remove();
|
|
});
|
|
}
|
|
|
|
// helper method for drawData
|
|
applyBarData(series, elements){
|
|
var chart = this,
|
|
series_class = "d3-chart-bar " + series.css_class;
|
|
elements
|
|
.attr("class", function(d){ return series_class + " " + d.css_class; })
|
|
.attr("title", function(d){ return d.title; })
|
|
.attr("width", chart.x_scale.rangeBand())
|
|
.attr("x", chart.x_scale(series.title))
|
|
.attr("height", return chart.y_scale(d[chart.bar_attr]))
|
|
.attr("y", function(d) { return chart.y_scale(d.cummulative); })
|
|
.attr('fill', function(d){ return chart.fnColor(d.title); });
|
|
}
|
|
|
|
drawLineData(data){
|
|
var chart = this,
|
|
nested_extent = chart.nestedExtent(data.series, 'values', chart.domain_attr, chart.line_attr);
|
|
|
|
// calibrate axes
|
|
bar_chart.y_scale_right.domain([Math.min(0, nested_extent.range_min), nested_extent.range_max]);
|
|
bar_chart.svg.select(".d3-chart-range-right")
|
|
.call(bar_chart.y_axis_right);
|
|
|
|
// draw lines
|
|
var line = g.selectAll(".d3-chart-line")
|
|
.data(data.series);
|
|
|
|
[line.enter().append('g'), line.transition()].forEach((groups)=>{
|
|
line_chart.applyLineData(groups, data.series);
|
|
});
|
|
line.exit().remove();
|
|
}
|
|
|
|
applyLineData(groups){
|
|
var chart = this;
|
|
groups
|
|
.attr('class', function(series){ return "d3-chart-line " + chart.cssClass(series); })
|
|
.attr("title", function(series){ return series.title; })
|
|
.append("path")
|
|
.attr("d", function(series){ return chart.fnLine(series.values.filter((value)=>{ return chart.domain.indexOf(value[chart.domain_attr]) < 0; })); })
|
|
.style("stroke", function(series){ return line_chart.fnColor(series.title); });
|
|
|
|
}
|
|
|
|
}
|