polish energy/power data view interactions
This commit is contained in:
13
client/d3/grid/calendar_grid.js
vendored
13
client/d3/grid/calendar_grid.js
vendored
@@ -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));
|
||||
};
|
||||
|
||||
|
||||
10
client/d3/line/spline_stack.js
vendored
10
client/d3/line/spline_stack.js
vendored
@@ -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); })
|
||||
|
||||
Reference in New Issue
Block a user