Skip to content

Commit

Permalink
opt-out subchart handling and generated svg if not enabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@panthony
panthony committed Feb 27, 2018
1 parent c394ce8 commit 33b7a85
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 79 deletions.
14 changes: 10 additions & 4 deletions src/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,9 @@ c3_axis_fn.updateXAxisTickValues = function updateXAxisTickValues(targets, axis)
axis.tickValues(tickValues);
} else {
$$.xAxis.tickValues(tickValues);
$$.subXAxis.tickValues(tickValues);
if ($$.subXAxis) {
$$.subXAxis.tickValues(tickValues);
}
}
return tickValues;
};
Expand Down Expand Up @@ -761,17 +763,21 @@ c3_axis_fn.generateTransitions = function generateTransitions(duration) {
axisX: duration ? axes.x.transition().duration(duration) : axes.x,
axisY: duration ? axes.y.transition().duration(duration) : axes.y,
axisY2: duration ? axes.y2.transition().duration(duration) : axes.y2,
axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx
axisSubX: axes.subx ? (duration ? axes.subx.transition().duration(duration) : axes.subx) : null
};
};
c3_axis_fn.redraw = function redraw(transitions, isHidden) {
var $$ = this.owner;
$$.axes.x.style("opacity", isHidden ? 0 : 1);
$$.axes.y.style("opacity", isHidden ? 0 : 1);
$$.axes.y2.style("opacity", isHidden ? 0 : 1);
$$.axes.subx.style("opacity", isHidden ? 0 : 1);
if ($$.axes.subx) {
$$.axes.subx.style("opacity", isHidden ? 0 : 1);
}
transitions.axisX.call($$.xAxis);
transitions.axisY.call($$.yAxis);
transitions.axisY2.call($$.y2Axis);
transitions.axisSubX.call($$.subXAxis);
if ($$.subXAxis) {
transitions.axisSubX.call($$.subXAxis);
}
};
41 changes: 29 additions & 12 deletions src/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,15 +209,22 @@ c3_chart_internal_fn.initWithData = function (data) {
$$.x.domain(d3.extent($$.getXDomain($$.data.targets)));
$$.y.domain($$.getYDomain($$.data.targets, 'y'));
$$.y2.domain($$.getYDomain($$.data.targets, 'y2'));
$$.subX.domain($$.x.domain());
$$.subY.domain($$.y.domain());
$$.subY2.domain($$.y2.domain());

if ($$.subX) {
$$.subX.domain($$.x.domain());
}
if ($$.subY) {
$$.subY.domain($$.y.domain());
}
if ($$.subY2) {
$$.subY2.domain($$.y2.domain());
}

// Save original x domain for zoom update
$$.orgXDomain = $$.x.domain();

// Set initialized scales to brush and zoom
if ($$.brush) { $$.brush.scale($$.subX); }
if ($$.brush && $$.subX) { $$.brush.scale($$.subX); }
if (config.zoom_enabled) { $$.zoom.scale($$.x); }

/*-- Basic Elements --*/
Expand All @@ -238,13 +245,15 @@ c3_chart_internal_fn.initWithData = function (data) {
$$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
$$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
$$.clipSubchart = $$.appendClip(defs, $$.clipIdForSubchart);
if (config.subchart_show) {
$$.clipSubchart = $$.appendClip(defs, $$.clipIdForSubchart);
}
$$.updateSvgSize();

// Define regions
main = $$.main = $$.svg.append("g").attr("transform", $$.getTranslate('main'));

if ($$.initSubchart) { $$.initSubchart(); }
if ($$.initSubchart && config.subchart_show) { $$.initSubchart(); }
if ($$.initTooltip) { $$.initTooltip(); }
if ($$.initLegend) { $$.initLegend(); }
if ($$.initTitle) { $$.initTitle(); }
Expand Down Expand Up @@ -424,7 +433,7 @@ c3_chart_internal_fn.updateTargets = function (targets) {

/*-- Sub --*/

if ($$.updateTargetsForSubchart) { $$.updateTargetsForSubchart(targets); }
if ($$.updateTargetsForSubchart && $$.config.subchart_show) { $$.updateTargetsForSubchart(targets); }

// Fade-in each chart
$$.showTargets();
Expand Down Expand Up @@ -491,7 +500,9 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
}
} else {
$$.xAxis.tickValues([]);
$$.subXAxis.tickValues([]);
if ($$.subXAxis) {
$$.subXAxis.tickValues([]);
}
}

if (config.zoom_rescale && !options.flow) {
Expand Down Expand Up @@ -543,8 +554,12 @@ c3_chart_internal_fn.redraw = function (options, transitions) {

// Update sub domain
if (withY) {
$$.subY.domain($$.getYDomain(targetsToShow, 'y'));
$$.subY2.domain($$.getYDomain(targetsToShow, 'y2'));
if ($$.subY) {
$$.subY.domain($$.getYDomain(targetsToShow, 'y'));
}
if ($$.subY2) {
$$.subY2.domain($$.getYDomain(targetsToShow, 'y2'));
}
}

// xgrid focus
Expand Down Expand Up @@ -584,7 +599,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
if ($$.redrawArc) { $$.redrawArc(duration, durationForExit, withTransform); }

// subchart
if ($$.redrawSubchart) {
if ($$.redrawSubchart && config.subchart_show) {
$$.redrawSubchart(withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices);
}

Expand Down Expand Up @@ -859,7 +874,9 @@ c3_chart_internal_fn.updateDimension = function (withoutAxis) {
if (!withoutAxis) {
if ($$.config.axis_rotated) {
$$.axes.x.call($$.xAxis);
$$.axes.subx.call($$.subXAxis);
if ($$.subXAxis) {
$$.axes.subx.call($$.subXAxis);
}
} else {
$$.axes.y.call($$.yAxis);
$$.axes.y2.call($$.y2Axis);
Expand Down
18 changes: 15 additions & 3 deletions src/domain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,11 +210,23 @@ c3_chart_internal_fn.updateXDomain = function (targets, withUpdateXDomain, withU
$$.x.domain(domain ? domain : $$.d3.extent($$.getXDomain(targets)));
$$.orgXDomain = $$.x.domain();
if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); }
$$.subX.domain($$.x.domain());
if ($$.brush) { $$.brush.scale($$.subX); }
if ($$.subX) {
$$.subX.domain($$.x.domain());
if ($$.brush) {
$$.brush.scale($$.subX);
}
}
}
if (withUpdateXDomain) {
$$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.extent());
if (!domain) {
if ($$.brush && !$$.brush.empty()) {
domain = $$.brush.extent();
}
if (!domain) {
domain = $$.orgXDomain;
}
}
$$.x.domain(domain);
if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); }
}

Expand Down
17 changes: 12 additions & 5 deletions src/scale.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,23 +166,30 @@ c3_chart_internal_fn.updateScales = function () {
$$.x = $$.getX($$.xMin, $$.xMax, forInit ? undefined : $$.x.orgDomain(), function () { return $$.xAxis.tickOffset(); });
$$.y = $$.getY(config.axis_y_type, config.axis_y_scale, [ $$.yMin, $$.yMax ], forInit ? config.axis_y_default : $$.y.domain());
$$.y2 = $$.getY(null, config.axis_y2_scale, [ $$.yMin, $$.yMax ], forInit ? config.axis_y2_default : $$.y2.domain());
$$.subX = $$.getX($$.xMin, $$.xMax, $$.orgXDomain, function (d) { return d % 1 ? 0 : $$.subXAxis.tickOffset(); });
$$.subY = $$.getY(config.axis_y_type, config.axis_y_scale, [ $$.subYMin, $$.subYMax ], forInit ? config.axis_y_default : $$.subY.domain());
$$.subY2 = $$.getY(null, config.axis_y2_scale, [ $$.subYMin, $$.subYMax ], forInit ? config.axis_y2_default : $$.subY2.domain());

if (config.subchart_show) {
$$.subX = $$.getX($$.xMin, $$.xMax, $$.orgXDomain, function (d) { return d % 1 ? 0 : $$.subXAxis.tickOffset(); });
$$.subY = $$.getY(config.axis_y_type, config.axis_y_scale, [ $$.subYMin, $$.subYMax ], forInit ? config.axis_y_default : $$.subY.domain());
$$.subY2 = $$.getY(null, config.axis_y2_scale, [ $$.subYMin, $$.subYMax ], forInit ? config.axis_y2_default : $$.subY2.domain());
}

// update axes
$$.xAxisTickFormat = $$.axis.getXAxisTickFormat();
$$.xAxisTickValues = $$.axis.getXAxisTickValues();
$$.yAxisTickValues = $$.axis.getYAxisTickValues();
$$.y2AxisTickValues = $$.axis.getY2AxisTickValues();

$$.xAxis = $$.axis.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
$$.subXAxis = $$.axis.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
$$.yAxis = $$.axis.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer);
$$.y2Axis = $$.axis.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer);

if ($$.subX) {
$$.subXAxis = $$.axis.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
}

// Set initialized scales to brush and zoom
if (!forInit) {
if ($$.brush) { $$.brush.scale($$.subX); }
if ($$.brush && $$.subX) { $$.brush.scale($$.subX); }
if (config.zoom_enabled) { $$.zoom.scale($$.x); }
}
// update for arc
Expand Down
102 changes: 47 additions & 55 deletions src/subchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@ c3_chart_internal_fn.initBrush = function () {
};
c3_chart_internal_fn.initSubchart = function () {
var $$ = this, config = $$.config,
context = $$.context = $$.svg.append("g").attr("transform", $$.getTranslate('context')),
visibility = config.subchart_show ? 'visible' : 'hidden';
context = $$.context = $$.svg.append("g").attr("transform", $$.getTranslate('context'));

context.style('visibility', visibility);
context.style('visibility', 'visible');

// Define g for chart area
context.append('g')
Expand All @@ -45,7 +44,7 @@ c3_chart_internal_fn.initSubchart = function () {
.attr("class", CLASS.axisX)
.attr("transform", $$.getTranslate('subx'))
.attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis)
.style("visibility", config.subchart_axis_x_show ? visibility : 'hidden');
.style("visibility", config.subchart_axis_x_show ? 'visible' : 'hidden');
};
c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
var $$ = this, context = $$.context, config = $$.config,
Expand All @@ -56,36 +55,34 @@ c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
classLines = $$.classLines.bind($$),
classAreas = $$.classAreas.bind($$);

if (config.subchart_show) {
//-- Bar --//
contextBarUpdate = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
.data(targets)
.attr('class', classChartBar);
contextBarEnter = contextBarUpdate.enter().append('g')
.style('opacity', 0)
.attr('class', classChartBar);
// Bars for each data
contextBarEnter.append('g')
.attr("class", classBars);
//-- Bar --//
contextBarUpdate = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
.data(targets)
.attr('class', classChartBar);
contextBarEnter = contextBarUpdate.enter().append('g')
.style('opacity', 0)
.attr('class', classChartBar);
// Bars for each data
contextBarEnter.append('g')
.attr("class", classBars);

//-- Line --//
contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets)
.attr('class', classChartLine);
contextLineEnter = contextLineUpdate.enter().append('g')
.style('opacity', 0)
.attr('class', classChartLine);
// Lines for each data
contextLineEnter.append("g")
.attr("class", classLines);
// Area
contextLineEnter.append("g")
.attr("class", classAreas);
//-- Line --//
contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets)
.attr('class', classChartLine);
contextLineEnter = contextLineUpdate.enter().append('g')
.style('opacity', 0)
.attr('class', classChartLine);
// Lines for each data
contextLineEnter.append("g")
.attr("class", classLines);
// Area
contextLineEnter.append("g")
.attr("class", classAreas);

//-- Brush --//
context.selectAll('.' + CLASS.brush + ' rect')
.attr(config.axis_rotated ? "width" : "height", config.axis_rotated ? $$.width2 : $$.height2);
}
//-- Brush --//
context.selectAll('.' + CLASS.brush + ' rect')
.attr(config.axis_rotated ? "width" : "height", config.axis_rotated ? $$.width2 : $$.height2);
};
c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) {
var $$ = this;
Expand Down Expand Up @@ -148,34 +145,29 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
var $$ = this, d3 = $$.d3, config = $$.config,
drawAreaOnSub, drawBarOnSub, drawLineOnSub;

$$.context.style('visibility', config.subchart_show ? 'visible' : 'hidden');
// reflect main chart to extent on subchart if zoomed
if (d3.event && d3.event.type === 'zoom') {
$$.brush.extent($$.x.orgDomain()).update();
}
// update subchart elements if needed
if (withSubchart) {

// subchart
if (config.subchart_show) {
// reflect main chart to extent on subchart if zoomed
if (d3.event && d3.event.type === 'zoom') {
// extent rect
if (!$$.brush.empty()) {
$$.brush.extent($$.x.orgDomain()).update();
}
// update subchart elements if needed
if (withSubchart) {

// extent rect
if (!$$.brush.empty()) {
$$.brush.extent($$.x.orgDomain()).update();
}
// setup drawer - MEMO: this must be called after axis updated
drawAreaOnSub = $$.generateDrawArea(areaIndices, true);
drawBarOnSub = $$.generateDrawBar(barIndices, true);
drawLineOnSub = $$.generateDrawLine(lineIndices, true);
// setup drawer - MEMO: this must be called after axis updated
drawAreaOnSub = $$.generateDrawArea(areaIndices, true);
drawBarOnSub = $$.generateDrawBar(barIndices, true);
drawLineOnSub = $$.generateDrawLine(lineIndices, true);

$$.updateBarForSubchart(duration);
$$.updateLineForSubchart(duration);
$$.updateAreaForSubchart(duration);
$$.updateBarForSubchart(duration);
$$.updateLineForSubchart(duration);
$$.updateAreaForSubchart(duration);

$$.redrawBarForSubchart(drawBarOnSub, duration, duration);
$$.redrawLineForSubchart(drawLineOnSub, duration, duration);
$$.redrawAreaForSubchart(drawAreaOnSub, duration, duration);
}
$$.redrawBarForSubchart(drawBarOnSub, duration, duration);
$$.redrawLineForSubchart(drawLineOnSub, duration, duration);
$$.redrawAreaForSubchart(drawAreaOnSub, duration, duration);
}
};
c3_chart_internal_fn.redrawForBrush = function () {
Expand Down

0 comments on commit 33b7a85

Please sign in to comment.