dont know what happened
This commit is contained in:
Eric Hulburd
48
client/d3/bar/base.js
vendored
Normal file
48
client/d3/bar/base.js
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
import extend from 'extend';
|
||||
|
||||
// This class is inspired by // http://bl.ocks.org/mbostock/3885304.
|
||||
class BarChart {
|
||||
|
||||
get chart_options(){
|
||||
return {
|
||||
series_opacity_gradient: true,
|
||||
margin: {top: 0, left: 70, bottom: 50, right: 20}
|
||||
};
|
||||
}
|
||||
|
||||
serializeData(data){
|
||||
var bar_chart = this,
|
||||
serialized_data = {
|
||||
max: undefined,
|
||||
series: []
|
||||
};
|
||||
|
||||
data.forEach(function(data_set){
|
||||
var series = extend({
|
||||
css_class: bar_chart.toClass ? bar_chart.toClass(data_set) : "",
|
||||
title: bar_chart.titleize ? bar_chart.titleize(data_set) : ""
|
||||
}, data_set);
|
||||
series.total = 0;
|
||||
series.values = [];
|
||||
data_set.values.forEach(function(datum, j){
|
||||
var series_datum = extend({
|
||||
name: datum.name,
|
||||
value: datum.value,
|
||||
cummulative: series.total,
|
||||
css_class: bar_chart.toClass ? bar_chart.toClass(data_set, datum) : "",
|
||||
title: bar_chart.titleize ? bar_chart.titleize(data_set, datum) : "",
|
||||
opacity: 1.0 - 0.5 * (j / data_set.values.length)
|
||||
}, datum);
|
||||
series_datum.series = series;
|
||||
series.total += datum.value;
|
||||
series.values.push(series_datum);
|
||||
});
|
||||
serialized_data.series.push(series);
|
||||
serialized_data.max = serialized_data.max === undefined ?
|
||||
series.total :
|
||||
Math.max(serialized_data.max, Math.abs(series.total));
|
||||
});
|
||||
return serialized_data;
|
||||
};
|
||||
|
||||
}
|
||||
135
client/d3/bar/composite.js
vendored
Normal file
135
client/d3/bar/composite.js
vendored
Normal file
@@ -0,0 +1,135 @@
|
||||
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); });
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
76
client/d3/bar/horizontal.js
vendored
Normal file
76
client/d3/bar/horizontal.js
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
import BarChart from './bar.base';
|
||||
|
||||
class HorizontalBarChart extends BarChart {
|
||||
|
||||
defineAxes(){
|
||||
var bar_chart = this;
|
||||
bar_chart.y_scale = d3.scale.ordinal()
|
||||
.rangeRoundBands([bar_chart.height, 0], 0.1);
|
||||
|
||||
bar_chart.y_axis = d3.svg.axis()
|
||||
.scale(bar_chart.y_scale)
|
||||
.orient("left");
|
||||
|
||||
bar_chart.x_scale = d3.scale.linear()
|
||||
.range([0, bar_chart.width]);
|
||||
|
||||
bar_chart.x_axis = d3.svg.axis()
|
||||
.scale(bar_chart.x_scale)
|
||||
.orient("bottom")
|
||||
.ticks(bar_chart.range_ticks)
|
||||
.outerTickSize(0);
|
||||
|
||||
// append axes
|
||||
bar_chart.svg.append("g")
|
||||
.attr("class", "d3-chart-domain d3-chart-axis");
|
||||
bar_chart.svg.append("g")
|
||||
.attr("class", "d3-chart-range d3-chart-axis")
|
||||
.attr("transform", "translate(0, " + (bar_chart.height - bar_chart.margin.top) + ")");
|
||||
}
|
||||
|
||||
drawData(data){
|
||||
var bar_chart = this;
|
||||
data = bar_chart.serializeData(data);
|
||||
|
||||
// calibrate axes
|
||||
bar_chart.y_scale.domain(data.series.reverse().map(function(d) { return d.name; }));
|
||||
bar_chart.svg.select(".d3-chart-domain.d3-chart-axis")
|
||||
.call(bar_chart.y_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+")";
|
||||
});
|
||||
|
||||
bar_chart.x_scale.domain([0, data.max]);
|
||||
bar_chart.svg.select(".d3-chart-range.d3-chart-axis").call(bar_chart.x_axis);
|
||||
|
||||
data.series.forEach(function(series){
|
||||
var bars = bar_chart.svg.selectAll("d3-chart-rect.d3-chart-bar." + series.css_class)
|
||||
.data(series.values);
|
||||
bar_chart.applyData(series, bars.enter().append("rect"));
|
||||
bar_chart.applyData(series, bars.transition());
|
||||
bars.exit().remove();
|
||||
});
|
||||
}
|
||||
|
||||
// helper method for drawData.
|
||||
applyData(series, elements){
|
||||
var bar_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("y", function(d) { return bar_chart.y_scale(series.name); })
|
||||
.attr("height", bar_chart.y_scale.rangeBand())
|
||||
.attr("x", function(d) { return bar_chart.x_scale(d.cummulative); })
|
||||
.attr("width", function(d) { return bar_chart.x_scale(d.value); })
|
||||
.attr("opacity", function(d) { return d.opacity; });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default HorizontalBarChart;
|
||||
76
client/d3/bar/vertical.js
vendored
Normal file
76
client/d3/bar/vertical.js
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
import BarChart from './bar.base';
|
||||
|
||||
class VerticalBarChart extends BarChart {
|
||||
|
||||
defineAxes(){
|
||||
var bar_chart = this;
|
||||
bar_chart.y_scale = d3.scale.ordinal()
|
||||
.rangeRoundBands([bar_chart.height, 0], 0.1);
|
||||
|
||||
bar_chart.y_axis = d3.svg.axis()
|
||||
.scale(bar_chart.y_scale)
|
||||
.ticks(bar_chart.range_ticks)
|
||||
.orient("left")
|
||||
.outerTickSize(0);
|
||||
|
||||
bar_chart.x_scale = d3.scale.linear()
|
||||
.range([0, bar_chart.width]);
|
||||
|
||||
bar_chart.x_axis = d3.svg.axis()
|
||||
.scale(bar_chart.x_scale)
|
||||
.orient("bottom");
|
||||
|
||||
// append axes
|
||||
bar_chart.svg.append("g")
|
||||
.attr("class", "d3-chart-range d3-chart-axis");
|
||||
bar_chart.svg.append("g")
|
||||
.attr("class", "d3-chart-domain d3-chart-axis")
|
||||
.attr("transform", "translate(0, " + (bar_chart.height - bar_chart.margin.top) + ")");
|
||||
}
|
||||
|
||||
drawData(data){
|
||||
var bar_chart = this;
|
||||
data = bar_chart.serializeData(data);
|
||||
|
||||
// calibrate axes
|
||||
bar_chart.x_scale.domain(data.series.reverse().map((d)=>{ return d.name; }));
|
||||
bar_chart.svg.select(".d3-chart-domain.d3-chart-axis")
|
||||
.call(bar_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+")";
|
||||
});
|
||||
|
||||
bar_chart.y_scale.domain([data.min, data.max]);
|
||||
bar_chart.svg.select(".d3-chart-range.d3-chart-axis").call(bar_chart.y_axis);
|
||||
|
||||
data.series.forEach(function(series){
|
||||
var bars = bar_chart.svg.selectAll(".d3-chart-rect.d3-chart-bar." + series.css_class)
|
||||
.data(series.values);
|
||||
bar_chart.applyData(series, bars.enter().append("rect"));
|
||||
bar_chart.applyData(series, bars.transition());
|
||||
bars.exit().remove();
|
||||
});
|
||||
}
|
||||
|
||||
// helper method for drawData
|
||||
applyData(series, elements){
|
||||
var bar_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", function(d) { return bar_chart.x_scale.rangeBand(); })
|
||||
.attr("x", function(d) { return bar_chart.x_scale(series.name); })
|
||||
.attr("height", return bar_chart.y_scale(d.value))
|
||||
.attr("y", function(d) { return bar_chart.y_scale(d.cummulative); })
|
||||
.attr("opacity", function(d) { return d.opacity; });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default VerticalBarChart;
|
||||
Reference in New Issue
Block a user