polish energy/power data view interactions

This commit is contained in:
Eric Hulburd
2016-02-22 13:45:43 -06:00
parent c1fddd944e
commit df3152443a
16 changed files with 338 additions and 156 deletions

View File

@@ -6,7 +6,7 @@ class CalendarGridChart extends Chart{
get chart_options(){
var chart = this;
return extend(Chart.DEFAULTS, {
return extend(Object.assign({}, Chart.DEFAULTS), {
margin: {top: 30, left: 150, bottom: 0, right: 0},
grid_padding: 0.05,
parse_date_format: '%Y-%m-%d',
@@ -103,6 +103,7 @@ class CalendarGridChart extends Chart{
drawData(data){
var grid_chart = this;
grid_chart.i = grid_chart.i || 1;
data = grid_chart.serializeData(data);
// calibrate axes
@@ -118,9 +119,9 @@ class CalendarGridChart extends Chart{
var grid_units = grid_chart.svg.selectAll(".d3-chart-grid-unit")
.data(data.values);
grid_chart.applyData(data, grid_units.enter().append("rect"));
grid_chart.applyData(data, grid_units.transition());
grid_units.exit().remove();
grid_chart.applyData(data, grid_units.enter().append("rect"));
grid_chart.applyData(data, grid_units);
}
// helper method for drawData.
@@ -128,7 +129,7 @@ class CalendarGridChart extends Chart{
var grid_chart = this,
series_class = "d3-chart-grid-unit " + data.css_class;
elements
.attr("class", function(d){ return series_class; })
.attr("class", series_class)
.attr("y", function(d) {
var bottom = grid_chart.y_scale(grid_chart.toMonthString(d)),
middle = grid_chart.y_scale.rangeBand() / 2 - grid_chart.grid_unit_size / 2;
@@ -140,10 +141,10 @@ class CalendarGridChart extends Chart{
})
.attr("width", function(d) { return grid_chart.grid_unit_size; })
.attr('fill', grid_chart.color)
.attr("opacity", function(d) { return grid_chart.applyOpacity(grid_chart.rangeValue(d), data.range); });
.attr("opacity", function(d) { return grid_chart.calculateOpacity(75, data.range); });
}
applyOpacity(value, range){
calculateOpacity(value, range){
return Math.max(0, Math.min(1, 1 - (range.max - (value - range.min)) / range.diff));
};

View File

@@ -6,7 +6,7 @@ const INTERPOLATION = 'cardinal';
class SplineStackChart extends LineChart {
get chart_options(){
return Object.assign(LineChart.DEFAULTS, {
return Object.assign(Object.assign({}, LineChart.DEFAULTS), {
interpolation: INTERPOLATION
});
}
@@ -63,7 +63,7 @@ class SplineStackChart extends LineChart {
var stack = spline_stack.svg.selectAll(".d3-chart-spline-stack")
.data(data.series);
[stack.enter().append("path"), stack.transition()].forEach((paths)=>{
[stack.enter().append("path"), stack].forEach((paths)=>{
spline_stack.applyData(paths);
});
stack.exit().remove();
@@ -72,7 +72,7 @@ class SplineStackChart extends LineChart {
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)=>{
[dots.enter().append("circle"), dots].forEach((circles)=>{
spline_stack.applyDots(series, circles);
});
dots.exit().remove();
@@ -83,7 +83,7 @@ class SplineStackChart extends LineChart {
applyData(paths){
var spline_stack = this;
paths
.attr("class", function(series){"d3-chart-spline-stack " + series.css_class;})
.attr("class", function(series){ return "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); })
.attr('opacity', 1);
@@ -92,7 +92,7 @@ class SplineStackChart extends LineChart {
applyDots(series, circles){
var spline_stack = this;
circles
.attr('class', 'd3-chart-spline-dot' + series.css_class)
.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); })