From d99d64e763f2c015961989209dbfae05e4628876 Mon Sep 17 00:00:00 2001 From: JASINSKI Emil Date: Fri, 22 Sep 2017 15:36:11 +0200 Subject: [PATCH] create computedMargins and use it instead of internal margins modifications --- spec/bar-chart-spec.js | 2 +- spec/composite-chart-spec.js | 4 +-- spec/coordinate-grid-chart-spec.js | 2 +- spec/line-chart-spec.js | 2 +- src/composite-chart.js | 19 +++++++++--- src/coordinate-grid-mixin.js | 50 +++++++++++++++++------------- src/heatmap.js | 2 +- src/line-chart.js | 2 +- src/margin-mixin.js | 23 ++++++++++++-- src/row-chart.js | 2 +- 10 files changed, 71 insertions(+), 37 deletions(-) diff --git a/spec/bar-chart-spec.js b/spec/bar-chart-spec.js index 9fd1923e9..08dfbef35 100644 --- a/spec/bar-chart-spec.js +++ b/spec/bar-chart-spec.js @@ -712,7 +712,7 @@ describe('dc.barChart', function () { describe('when a brush is defined', function () { it('should position the brush with an offset', function () { - expect(chart.select('g.brush').attr('transform')).toMatchTranslate(chart.margins().left, 10); + expect(chart.select('g.brush').attr('transform')).toMatchTranslate(chart.computedMargins().left, 10); }); it('should create a fancy brush resize handle', function () { diff --git a/spec/composite-chart-spec.js b/spec/composite-chart-spec.js index a3b7fb488..70d0c30a0 100644 --- a/spec/composite-chart-spec.js +++ b/spec/composite-chart-spec.js @@ -65,7 +65,7 @@ describe('dc.compositeChart', function () { }); it('should set the margins of the chart', function () { - expect(chart.margins()).not.toBeNull(); + expect(chart.computedMargins()).not.toBeNull(); }); it('should set a domain', function () { @@ -232,7 +232,7 @@ describe('dc.compositeChart', function () { describe('the chart brush', function () { it('should be positioned with the chart left margin', function () { - expect(chart.select('g.brush').attr('transform')).toMatchTranslate(chart.margins().left, 10); + expect(chart.select('g.brush').attr('transform')).toMatchTranslate(chart.computedMargins().left, 10); }); it('should have a resize handle', function () { diff --git a/spec/coordinate-grid-chart-spec.js b/spec/coordinate-grid-chart-spec.js index 41160e53b..08d32bdfc 100644 --- a/spec/coordinate-grid-chart-spec.js +++ b/spec/coordinate-grid-chart-spec.js @@ -69,7 +69,7 @@ describe('dc.coordinateGridChart', function () { }); it('should set the margins of the chart', function () { - expect(chart.margins()).not.toBeNull(); + expect(chart.computedMargins()).not.toBeNull(); }); it('should set an x domain', function () { diff --git a/spec/line-chart-spec.js b/spec/line-chart-spec.js index c7f7875a0..8f06fd564 100644 --- a/spec/line-chart-spec.js +++ b/spec/line-chart-spec.js @@ -669,7 +669,7 @@ describe('dc.lineChart', function () { describe('when a brush is defined', function () { it('should position the brush with an offset', function () { - expect(chart.select('g.brush').attr('transform')).toMatchTranslate(chart.margins().left, 10); + expect(chart.select('g.brush').attr('transform')).toMatchTranslate(chart.computedMargins().left, 10); }); it('should create a fancy brush resize handle', function () { diff --git a/src/composite-chart.js b/src/composite-chart.js index de1cb352d..ef61cba22 100644 --- a/src/composite-chart.js +++ b/src/composite-chart.js @@ -41,6 +41,16 @@ dc.compositeChart = function (parent, chartGroup) { _chart.transitionDuration(500); _chart.transitionDelay(0); + dc.override(_chart, '__computeMargins', function () { + var margins = _chart.___computeMargins(); + return { + top: margins.top, + right: margins.right + _rightYAxisLabelPadding, + bottom: margins.bottom, + left: margins.left + }; + }); + dc.override(_chart, '_generateG', function () { var g = this.__generateG(); @@ -94,12 +104,12 @@ dc.compositeChart = function (parent, chartGroup) { _chart.renderYAxis = function () { if (leftYAxisChildren().length !== 0) { - _chart.renderYAxisAt('y', _chart.yAxis(), _chart.margins().left); + _chart.renderYAxisAt('y', _chart.yAxis(), _chart.computedMargins().left); _chart.renderYAxisLabel('y', _chart.yAxisLabel(), -90); } if (rightYAxisChildren().length !== 0) { - _chart.renderYAxisAt('yr', _chart.rightYAxis(), _chart.width() - _chart.margins().right); + _chart.renderYAxisAt('yr', _chart.rightYAxis(), _chart.width() - _chart.computedMargins().right); _chart.renderYAxisLabel('yr', _chart.rightYAxisLabel(), 90, _chart.width() - _rightYAxisLabelPadding); } }; @@ -283,9 +293,8 @@ dc.compositeChart = function (parent, chartGroup) { return _rightYAxisLabel; } _rightYAxisLabel = rightYAxisLabel; - _chart.margins().right -= _rightYAxisLabelPadding; _rightYAxisLabelPadding = (padding === undefined) ? DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING : padding; - _chart.margins().right += _rightYAxisLabelPadding; + _chart.computedMargins(_chart._computeMargins()); return _chart; }; @@ -320,7 +329,7 @@ dc.compositeChart = function (parent, chartGroup) { _children.forEach(function (child) { child.height(_chart.height()); child.width(_chart.width()); - child.margins(_chart.margins()); + child.margins(_chart.computedMargins()); if (_shareTitle) { child.title(_chart.title()); diff --git a/src/coordinate-grid-mixin.js b/src/coordinate-grid-mixin.js index 2e91f0cbb..5036ca3be 100644 --- a/src/coordinate-grid-mixin.js +++ b/src/coordinate-grid-mixin.js @@ -72,6 +72,16 @@ dc.coordinateGridMixin = function (_chart) { var _useRightYAxis = false; + dc.override(_chart, '_computeMargins', function () { + var margins = _chart.__computeMargins(); + return { + top: margins.top, + right: margins.right, + bottom: margins.bottom + _xAxisLabelPadding, + left: margins.left + _yAxisLabelPadding + }; + }); + /** * When changing the domain of the x or y scale, it is necessary to tell the chart to recalculate * and redraw the axes. (`.rescale()` is called automatically when the x or y scale is replaced @@ -163,7 +173,7 @@ dc.coordinateGridMixin = function (_chart) { _g = _parent.append('g'); _chartBodyG = _g.append('g').attr('class', 'chart-body') - .attr('transform', 'translate(' + _chart.margins().left + ', ' + _chart.margins().top + ')') + .attr('transform', 'translate(' + _chart.computedMargins().left + ', ' + _chart.computedMargins().top + ')') .attr('clip-path', 'url(' + href + '#' + getClipPathId() + ')'); return _g; @@ -490,14 +500,14 @@ dc.coordinateGridMixin = function (_chart) { if (axisXG.empty()) { axisXG = g.append('g') .attr('class', 'axis x') - .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart._xAxisY() + ')'); + .attr('transform', 'translate(' + _chart.computedMargins().left + ',' + _chart._xAxisY() + ')'); } var axisXLab = g.select('text.' + X_AXIS_LABEL_CLASS); if (axisXLab.empty() && _chart.xAxisLabel()) { axisXLab = g.append('text') .attr('class', X_AXIS_LABEL_CLASS) - .attr('transform', 'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) + ',' + + .attr('transform', 'translate(' + (_chart.computedMargins().left + _chart.xAxisLength() / 2) + ',' + (_chart.height() - _xAxisLabelPadding) + ')') .attr('text-anchor', 'middle'); } @@ -506,10 +516,10 @@ dc.coordinateGridMixin = function (_chart) { } dc.transition(axisXG, _chart.transitionDuration(), _chart.transitionDelay()) - .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart._xAxisY() + ')') + .attr('transform', 'translate(' + _chart.computedMargins().left + ',' + _chart._xAxisY() + ')') .call(_xAxis); dc.transition(axisXLab, _chart.transitionDuration(), _chart.transitionDelay()) - .attr('transform', 'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) + ',' + + .attr('transform', 'translate(' + (_chart.computedMargins().left + _chart.xAxisLength() / 2) + ',' + (_chart.height() - _xAxisLabelPadding) + ')'); }; @@ -520,7 +530,7 @@ dc.coordinateGridMixin = function (_chart) { if (gridLineG.empty()) { gridLineG = g.insert('g', ':first-child') .attr('class', GRID_LINE_CLASS + ' ' + VERTICAL_CLASS) - .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')'); + .attr('transform', 'translate(' + _chart.computedMargins().left + ',' + _chart.computedMargins().top + ')'); } var ticks = _xAxis.tickValues() ? _xAxis.tickValues() : @@ -535,7 +545,7 @@ dc.coordinateGridMixin = function (_chart) { .attr('x1', function (d) { return _x(d); }) - .attr('y1', _chart._xAxisY() - _chart.margins().top) + .attr('y1', _chart._xAxisY() - _chart.computedMargins().top) .attr('x2', function (d) { return _x(d); }) @@ -549,7 +559,7 @@ dc.coordinateGridMixin = function (_chart) { .attr('x1', function (d) { return _x(d); }) - .attr('y1', _chart._xAxisY() - _chart.margins().top) + .attr('y1', _chart._xAxisY() - _chart.computedMargins().top) .attr('x2', function (d) { return _x(d); }) @@ -563,7 +573,7 @@ dc.coordinateGridMixin = function (_chart) { } _chart._xAxisY = function () { - return (_chart.height() - _chart.margins().bottom); + return (_chart.height() - _chart.computedMargins().bottom); }; _chart.xAxisLength = function () { @@ -585,9 +595,8 @@ dc.coordinateGridMixin = function (_chart) { return _xAxisLabel; } _xAxisLabel = labelText; - _chart.margins().bottom -= _xAxisLabelPadding; _xAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding; - _chart.margins().bottom += _xAxisLabelPadding; + _chart.computedMargins(_chart._computeMargins()); return _chart; }; @@ -615,7 +624,7 @@ dc.coordinateGridMixin = function (_chart) { labelXPosition = labelXPosition || _yAxisLabelPadding; var axisYLab = _chart.g().select('text.' + Y_AXIS_LABEL_CLASS + '.' + axisClass + '-label'); - var labelYPosition = (_chart.margins().top + _chart.yAxisHeight() / 2); + var labelYPosition = (_chart.computedMargins().top + _chart.yAxisHeight() / 2); if (axisYLab.empty() && text) { axisYLab = _chart.g().append('text') .attr('transform', 'translate(' + labelXPosition + ',' + labelYPosition + '),rotate(' + rotation + ')') @@ -635,16 +644,16 @@ dc.coordinateGridMixin = function (_chart) { if (axisYG.empty()) { axisYG = _chart.g().append('g') .attr('class', 'axis ' + axisClass) - .attr('transform', 'translate(' + position + ',' + _chart.margins().top + ')'); + .attr('transform', 'translate(' + position + ',' + _chart.computedMargins().top + ')'); } dc.transition(axisYG, _chart.transitionDuration(), _chart.transitionDelay()) - .attr('transform', 'translate(' + position + ',' + _chart.margins().top + ')') + .attr('transform', 'translate(' + position + ',' + _chart.computedMargins().top + ')') .call(axis); }; _chart.renderYAxis = function () { - var axisPosition = _useRightYAxis ? (_chart.width() - _chart.margins().right) : _chart._yAxisX(); + var axisPosition = _useRightYAxis ? (_chart.width() - _chart.computedMargins().right) : _chart._yAxisX(); _chart.renderYAxisAt('y', _yAxis, axisPosition); var labelPosition = _useRightYAxis ? (_chart.width() - _yAxisLabelPadding) : _yAxisLabelPadding; var rotation = _useRightYAxis ? 90 : -90; @@ -660,7 +669,7 @@ dc.coordinateGridMixin = function (_chart) { if (gridLineG.empty()) { gridLineG = g.insert('g', ':first-child') .attr('class', GRID_LINE_CLASS + ' ' + HORIZONTAL_CLASS) - .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')'); + .attr('transform', 'translate(' + _chart.computedMargins().left + ',' + _chart.computedMargins().top + ')'); } var lines = gridLineG.selectAll('line') @@ -700,7 +709,7 @@ dc.coordinateGridMixin = function (_chart) { }; _chart._yAxisX = function () { - return _chart.useRightYAxis() ? _chart.width() - _chart.margins().right : _chart.margins().left; + return _chart.useRightYAxis() ? _chart.width() - _chart.computedMargins().right : _chart.computedMargins().left; }; /** @@ -719,9 +728,8 @@ dc.coordinateGridMixin = function (_chart) { return _yAxisLabel; } _yAxisLabel = labelText; - _chart.margins().left -= _yAxisLabelPadding; _yAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding; - _chart.margins().left += _yAxisLabelPadding; + _chart.computedMargins(_chart._computeMargins()); return _chart; }; @@ -965,7 +973,7 @@ dc.coordinateGridMixin = function (_chart) { }; function brushHeight () { - return _chart._xAxisY() - _chart.margins().top; + return _chart._xAxisY() - _chart.computedMargins().top; } _chart.renderBrush = function (g) { @@ -976,7 +984,7 @@ dc.coordinateGridMixin = function (_chart) { var gBrush = g.append('g') .attr('class', 'brush') - .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')') + .attr('transform', 'translate(' + _chart.computedMargins().left + ',' + _chart.computedMargins().top + ')') .call(_brush.x(_chart.x())); _chart.setBrushY(gBrush, false); _chart.setHandlePaths(gBrush); diff --git a/src/heatmap.js b/src/heatmap.js index 6a802cca2..72669056e 100644 --- a/src/heatmap.js +++ b/src/heatmap.js @@ -184,7 +184,7 @@ dc.heatMap = function (parent, chartGroup) { _chartBody = _chart.svg() .append('g') .attr('class', 'heatmap') - .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')'); + .attr('transform', 'translate(' + _chart.computedMargins().left + ',' + _chart.computedMargins().top + ')'); return _chart._doRedraw(); }; diff --git a/src/line-chart.js b/src/line-chart.js index b8f0b9410..f16a9aef6 100644 --- a/src/line-chart.js +++ b/src/line-chart.js @@ -366,7 +366,7 @@ dc.lineChart = function (parent, chartGroup) { function showRefLines (dot, g) { var x = dot.attr('cx'); var y = dot.attr('cy'); - var yAxisX = (_chart._yAxisX() - _chart.margins().left); + var yAxisX = (_chart._yAxisX() - _chart.computedMargins().left); var yAxisRefPathD = 'M' + yAxisX + ' ' + y + 'L' + (x) + ' ' + (y); var xAxisRefPathD = 'M' + x + ' ' + _chart.yAxisHeight() + 'L' + x + ' ' + y; g.select('path.' + Y_AXIS_REF_LINE_CLASS).style('display', '').attr('d', yAxisRefPathD); diff --git a/src/margin-mixin.js b/src/margin-mixin.js index 97d7f9dcd..d41b4a2b9 100644 --- a/src/margin-mixin.js +++ b/src/margin-mixin.js @@ -8,7 +8,8 @@ * @returns {dc.marginMixin} */ dc.marginMixin = function (_chart) { - var _margin = {top: 10, right: 50, bottom: 30, left: 30}; + var _margin; + var _computedMargins; /** * Get or set the margins for a particular coordinate grid chart instance. The margins is stored as @@ -28,16 +29,32 @@ dc.marginMixin = function (_chart) { return _margin; } _margin = margins; + _chart.computedMargins(_chart._computeMargins()); return _chart; }; + _chart.computedMargins = function (computedMargins) { + if (!arguments.length) { + return _computedMargins; + } + _computedMargins = computedMargins; + return _chart; + }; + + _chart._computeMargins = function () { + var margins = _chart.margins(); + return {top: margins.top, right: margins.right, bottom: margins.bottom, left: margins.left}; + }; + _chart.effectiveWidth = function () { - return _chart.width() - _chart.margins().left - _chart.margins().right; + return _chart.width() - _chart.computedMargins().left - _chart.computedMargins().right; }; _chart.effectiveHeight = function () { - return _chart.height() - _chart.margins().top - _chart.margins().bottom; + return _chart.height() - _chart.computedMargins().top - _chart.computedMargins().bottom; }; + _chart.margins({top: 10, right: 50, bottom: 30, left: 30}); + return _chart; }; diff --git a/src/row-chart.js b/src/row-chart.js index a89cc19fd..0adf7bf29 100644 --- a/src/row-chart.js +++ b/src/row-chart.js @@ -84,7 +84,7 @@ dc.rowChart = function (parent, chartGroup) { _g = _chart.svg() .append('g') - .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')'); + .attr('transform', 'translate(' + _chart.computedMargins().left + ',' + _chart.computedMargins().top + ')'); drawChart();