Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

_prepareYAxis changes and Axis related documentation updates #1416

Closed
wants to merge 2 commits into from
Closed

_prepareYAxis changes and Axis related documentation updates #1416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3504645
Rearranged _prepareYAXis code as suggested in #1398. XAxis and YAxis …
kum-deepak Apr 17, 2018
c02a121
Changelog
kum-deepak Apr 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 3.0.0 alpha 10
* Streamlined creation of YAxis in coordinate grid charts, by Deepak Kumar ([#1416](https://github.com/dc-js/dc.js/pull/1416))
* Updated XAxis and YAxis documentation, by Deepak Kumar ([#1416](https://github.com/dc-js/dc.js/pull/1416))

## 3.0.0 alpha 9
* `numberDisplay` uses [d3.easeQuad](https://github.com/d3/d3-ease/blob/master/README.md#easeQuad) instead of [quad-out-in](https://github.com/d3/d3-3.x-api-reference/blob/master/Transitions.md#d3_ease), which didn't make sense. ([#1413](https://github.com/dc-js/dc.js/pull/1413))
* `dc.units.ordinal` is now purely a placeholder or magic value, and not called as a function. Previously dc.js would call the `xUnits` function with three arguments: the start, end, and domain array, but this was not compliant with d3 range functions. Now these functions are called with only the start and end, and `dc.units.ordinal` is detected with `===`. ([#1410](https://github.com/dc-js/dc.js/pull/1410))
Expand Down
15 changes: 6 additions & 9 deletions src/composite-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,29 +530,26 @@ dc.compositeChart = function (parent, chartGroup) {

/**
* Set or get the right y axis used by the composite chart. This function is most useful when y
* axis customization is required. The y axis in dc.js is an instance of a [d3 axis
* object](https://github.com/d3/d3-axis/blob/master/README.md) therefore it supports any valid
* axis customization is required. The y axis in dc.js is an instance of a
* [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight) therefore it supports any valid
* d3 axis manipulation.
*
* **Caution**: The y axis is usually generated internally by dc; resetting it may cause
* **Caution**: The right y axis is usually generated internally by dc; resetting it may cause
* unexpected results. Note also that when used as a getter, this function is not chainable: it
* returns the axis, not the chart,
* {@link https://github.com/dc-js/dc.js/wiki/FAQ#why-does-everything-break-after-a-call-to-xaxis-or-yaxis
* so attempting to call chart functions after calling `.yAxis()` will fail}.
* In addition, depending on whether you are going to use the axis on left or right
* you need to appropriately pass [d3.axisLeft](https://github.com/d3/d3-axis/blob/master/README.md#axisLeft)
* or [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight)
* @method rightYAxis
* @memberof dc.compositeChart
* @instance
* @see {@link https://github.com/d3/d3-axis/blob/master/README.md d3.axis}
* @see {@link https://github.com/d3/d3-axis/blob/master/README.md#axisRight}
* @example
* // customize y axis tick format
* chart.rightYAxis().tickFormat(function (v) {return v + '%';});
* // customize y axis tick values
* chart.rightYAxis().tickValues([0, 100, 200, 300]);
* @param {d3.svg.axis} [rightYAxis]
* @returns {d3.svg.axis|dc.compositeChart}
* @param {d3.axisRight} [rightYAxis]
* @returns {d3.axisRight|dc.compositeChart}
*/
_chart.rightYAxis = function (rightYAxis) {
if (!arguments.length) {
Expand Down
36 changes: 23 additions & 13 deletions src/coordinate-grid-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ dc.coordinateGridMixin = function (_chart) {
var _lastXDomain;

var _y;
var _yAxis = d3.axisLeft();
var _yAxis = null;
var _yAxisPadding = 0;
var _yElasticity = false;
var _yAxisLabel;
Expand Down Expand Up @@ -436,6 +436,14 @@ dc.coordinateGridMixin = function (_chart) {
if (!arguments.length) {
return _useRightYAxis;
}

// We need to warn if value is changing after _yAxis was created
if (_useRightYAxis !== useRightYAxis && _yAxis) {
dc.logger.warn('Value of useRightYAxis has been altered, after yAxis was created. ' +
'You might get unexpected yAxis behavior. ' +
'Make calls to useRightYAxis sooner in your chart creation process.');
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

_useRightYAxis = useRightYAxis;
return _chart;
};
Expand Down Expand Up @@ -611,6 +619,10 @@ dc.coordinateGridMixin = function (_chart) {
return _chart;
};

function createYAxis () {
return _useRightYAxis ? d3.axisRight() : d3.axisLeft();
}

_chart._prepareYAxis = function (g) {
if (_y === undefined || _chart.elasticY()) {
if (_y === undefined) {
Expand All @@ -623,17 +635,11 @@ dc.coordinateGridMixin = function (_chart) {

_y.range([_chart.yAxisHeight(), 0]);

// Ideally we should update the API so that if someone uses Right Y Axis
// they would need to pass _yAxis as well
if (!_yAxis) {
if (_useRightYAxis) {
_yAxis = d3.axisRight();
} else {
_yAxis = d3.axisLeft();
}
_yAxis = createYAxis();
}

_yAxis = _yAxis.scale(_y);
_yAxis.scale(_y);

_chart._renderHorizontalGridLinesForAxis(g, _y, _yAxis);
};
Expand Down Expand Up @@ -774,8 +780,9 @@ dc.coordinateGridMixin = function (_chart) {

/**
* Set or get the y axis used by the coordinate grid chart instance. This function is most useful
* when y axis customization is required. The y axis in dc.js is simply an instance of a [d3 axis
* object](https://github.com/d3/d3-axis/blob/master/README.md); therefore it supports any
* when y axis customization is required. Depending on `useRightYAxis` the y axis in dc.js is an instance of
* either [d3.axisLeft](https://github.com/d3/d3-axis/blob/master/README.md#axisLeft) or
* [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight); therefore it supports any
* valid d3 axis manipulation.
*
* **Caution**: The y axis is usually generated internally by dc; resetting it may cause
Expand All @@ -795,11 +802,14 @@ dc.coordinateGridMixin = function (_chart) {
* chart.yAxis().tickFormat(function(v) {return v + '%';});
* // customize y axis tick values
* chart.yAxis().tickValues([0, 100, 200, 300]);
* @param {d3.svg.axis} [yAxis=d3.svg.axis().orient('left')]
* @returns {d3.svg.axis|dc.coordinateGridMixin}
* @param {d3.axisLeft|d3.axisRight} [yAxis]
* @returns {d3.axisLeft|d3.axisRight|dc.coordinateGridMixin}
*/
_chart.yAxis = function (yAxis) {
if (!arguments.length) {
if (!_yAxis) {
_yAxis = createYAxis();
}
return _yAxis;
}
_yAxis = yAxis;
Expand Down
2 changes: 1 addition & 1 deletion src/row-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ dc.rowChart = function (parent, chartGroup) {
* chart.xAxis().tickFormat(function (v) {return v + '%';});
* // customize x axis tick values
* chart.xAxis().tickValues([0, 100, 200, 300]);
* @returns {d3.svg.axis}
* @returns {d3.axisBottom}
*/
_chart.xAxis = function () {
return _xAxis;
Expand Down