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

Value Axis Style #449

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Value Axis Style #449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4e4e549
add style props to Value Axis
gbirman Aug 23, 2020
15785dc
testing
gbirman Aug 23, 2020
03acc39
added value axis styling
gbirman Aug 23, 2020
0a81363
changed comment
gbirman Aug 23, 2020
c2980ba
get style as variable not prop
gbirman Aug 23, 2020
279d121
testing
gbirman Aug 23, 2020
9af64ef
built
gbirman Aug 23, 2020
0098b66
allow copyover merge of style object
gbirman Aug 23, 2020
1f0bcdb
built
gbirman Aug 23, 2020
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
63 changes: 42 additions & 21 deletions lib/components/ValueAxis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _merge = require("merge");

var _merge2 = _interopRequireDefault(_merge);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
Expand All @@ -28,32 +32,38 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
* end of the row and supply it with the current value. See the cycling example
* for how that would all work.
*/
/**
* Copyright (c) 2015-present, The Regents of the University of California,
* through Lawrence Berkeley National Laboratory (subject to receipt
* of any required approvals from the U.S. Dept. of Energy).
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

var ValueAxis = function ValueAxis(_ref) {
var width = _ref.width,
height = _ref.height,
value = _ref.value,
detail = _ref.detail;

var labelStyle = {
var defaultStyle = {
label: {
fill: "#666",
fontSize: 20,
textAnchor: "middle"
};
var detailStyle = {
},
detail: {
fontSize: 12,
textAnchor: "middle",
fill: "#9a9a9a"
};
}
}; /**
* Copyright (c) 2015-present, The Regents of the University of California,
* through Lawrence Berkeley National Laboratory (subject to receipt
* of any required approvals from the U.S. Dept. of Energy).
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

var ValueAxis = function ValueAxis(_ref) {
var width = _ref.width,
height = _ref.height,
value = _ref.value,
detail = _ref.detail,
style = _ref.style;

var labelStyle = (0, _merge2.default)(true, defaultStyle.label, style.label ? style.label : {});
var detailStyle = (0, _merge2.default)(true, defaultStyle.label, style.detail ? style.detail : {});

return _react2.default.createElement(
"g",
null,
Expand Down Expand Up @@ -109,11 +119,22 @@ ValueAxis.propTypes = {
/**
* [Internal] The height of the axis
*/
height: _propTypes2.default.number
height: _propTypes2.default.number,
/**
* Object specifying the CSS by which the label axis can be styled. The object can contain:
* "label", "detail". Each of these is an inline CSS style applied
* to the text label and detail, respectively.
*
*/
style: _propTypes2.default.shape({
label: _propTypes2.default.object, // eslint-disable-line
detail: _propTypes2.default.object // esline-disable-line
})
};

ValueAxis.defaultProps = {
visible: true
visible: true,
style: defaultStyle
};

exports.default = ValueAxis;
Loading