Skip to content

Commit 0fb4716

Browse files
pjm17971pjm17971
authored
Format timeaxis (esnet#165)
* Adds a formatting option to the time axis, either a d3 time format string or a callback function. * Time axis formatting improvements: * Cleanup of formatting code, and mirror change into the TimeTracker code so that it works the same. (This addresses esnet#164). * Fixes the undefined time that would sometimes be seen above the tracker info box (fixes esnet#147) * Fixes esnet#140, where the format specified on the ChartContainer would be stale if it changed * Add back in docs for ChartContainer that got lost in merge * Rebuild * Add propType back in
1 parent ac216bd commit 0fb4716

File tree

15 files changed

+3035
-3067
lines changed

15 files changed

+3035
-3067
lines changed

‎lib/components/Baseline.js‎

Lines changed: 111 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use strict";
22

33
Object.defineProperty(exports, "__esModule", {
4-
value: true
4+
value: true
55
});
66

77
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -39,18 +39,18 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
3939
*/
4040

4141
var defaultStyle = {
42-
label: {
43-
fill: "#8B7E7E", // Default label color
44-
fontWeight: 100,
45-
fontSize: 11,
46-
pointerEvents: "none"
47-
},
48-
line: {
49-
stroke: "#626262",
50-
strokeWidth: 1,
51-
strokeDasharray: "5,3",
52-
pointerEvents: "none"
53-
}
42+
label: {
43+
fill: "#8B7E7E", // Default label color
44+
fontWeight: 100,
45+
fontSize: 11,
46+
pointerEvents: "none"
47+
},
48+
line: {
49+
stroke: "#626262",
50+
strokeWidth: 1,
51+
strokeDasharray: "5,3",
52+
pointerEvents: "none"
53+
}
5454
};
5555

5656
/**
@@ -81,113 +81,113 @@ var defaultStyle = {
8181
*/
8282

8383
var Baseline = function (_React$Component) {
84-
_inherits(Baseline, _React$Component);
85-
86-
function Baseline() {
87-
_classCallCheck(this, Baseline);
88-
89-
return _possibleConstructorReturn(this, (Baseline.__proto__ || Object.getPrototypeOf(Baseline)).apply(this, arguments));
90-
}
91-
92-
_createClass(Baseline, [{
93-
key: "render",
94-
value: function render() {
95-
if (!this.props.yScale || _underscore2.default.isUndefined(this.props.value)) {
96-
return null;
97-
}
98-
99-
var y = this.props.yScale(this.props.value);
100-
var transform = "translate(0 " + y + ")";
101-
var textAnchor = void 0;
102-
var textPositionX = void 0;
103-
var pts = [];
104-
105-
var textPositionY = -3;
106-
107-
if (this.props.position === "left") {
108-
textAnchor = "start";
109-
textPositionX = 5;
110-
}
111-
if (this.props.position === "right") {
112-
textAnchor = "end";
113-
textPositionX = this.props.width - 5;
114-
}
115-
116-
pts.push("0 0");
117-
pts.push(this.props.width + " 0");
118-
var points = pts.join(" ");
119-
120-
//
121-
// Style
122-
//
123-
124-
var labelStyle = (0, _merge2.default)(true, defaultStyle.label, this.props.style.label ? this.props.style.label : {});
125-
var lineStyle = (0, _merge2.default)(true, defaultStyle.line, this.props.style.line ? this.props.style.line : {});
126-
127-
return _react2.default.createElement(
128-
"g",
129-
{ className: "baseline", transform: transform },
130-
_react2.default.createElement("polyline", { points: points, style: lineStyle }),
131-
_react2.default.createElement(
132-
"text",
133-
{
134-
style: labelStyle,
135-
x: textPositionX,
136-
y: textPositionY,
137-
textAnchor: textAnchor
138-
},
139-
this.props.label
140-
)
141-
);
84+
_inherits(Baseline, _React$Component);
85+
86+
function Baseline() {
87+
_classCallCheck(this, Baseline);
88+
89+
return _possibleConstructorReturn(this, (Baseline.__proto__ || Object.getPrototypeOf(Baseline)).apply(this, arguments));
14290
}
143-
}]);
14491

145-
return Baseline;
92+
_createClass(Baseline, [{
93+
key: "render",
94+
value: function render() {
95+
if (!this.props.yScale || _underscore2.default.isUndefined(this.props.value)) {
96+
return null;
97+
}
98+
99+
var y = this.props.yScale(this.props.value);
100+
var transform = "translate(0 " + y + ")";
101+
var textAnchor = void 0;
102+
var textPositionX = void 0;
103+
var pts = [];
104+
105+
var textPositionY = -3;
106+
107+
if (this.props.position === "left") {
108+
textAnchor = "start";
109+
textPositionX = 5;
110+
}
111+
if (this.props.position === "right") {
112+
textAnchor = "end";
113+
textPositionX = this.props.width - 5;
114+
}
115+
116+
pts.push("0 0");
117+
pts.push(this.props.width + " 0");
118+
var points = pts.join(" ");
119+
120+
//
121+
// Style
122+
//
123+
124+
var labelStyle = (0, _merge2.default)(true, defaultStyle.label, this.props.style.label ? this.props.style.label : {});
125+
var lineStyle = (0, _merge2.default)(true, defaultStyle.line, this.props.style.line ? this.props.style.line : {});
126+
127+
return _react2.default.createElement(
128+
"g",
129+
{ className: "baseline", transform: transform },
130+
_react2.default.createElement("polyline", { points: points, style: lineStyle }),
131+
_react2.default.createElement(
132+
"text",
133+
{
134+
style: labelStyle,
135+
x: textPositionX,
136+
y: textPositionY,
137+
textAnchor: textAnchor
138+
},
139+
this.props.label
140+
)
141+
);
142+
}
143+
}]);
144+
145+
return Baseline;
146146
}(_react2.default.Component);
147147

148148
exports.default = Baseline;
149149

150150

151151
Baseline.defaultProps = {
152-
value: 0,
153-
label: "",
154-
position: "left",
155-
style: defaultStyle
152+
value: 0,
153+
label: "",
154+
position: "left",
155+
style: defaultStyle
156156
};
157157

158158
Baseline.propTypes = {
159-
/**
160-
* Reference to the axis which provides the vertical scale for drawing. e.g.
161-
* specifying axis="trafficRate" would refer the y-scale to the YAxis of id="trafficRate".
162-
*/
163-
axis: _propTypes2.default.string.isRequired, // eslint-disable-line
164-
/**
165-
* An object describing the style of the baseline of the form
166-
* { label, line }. "label" and "line" are both objects containing
167-
* the inline CSS for that part of the baseline.
168-
*/
169-
style: _propTypes2.default.shape({
170-
label: _propTypes2.default.object, // eslint-disable-line
171-
line: _propTypes2.default.object // eslint-disable-line
172-
}),
173-
/**
174-
* The y-value to display the line at.
175-
*/
176-
value: _propTypes2.default.number,
177-
/**
178-
* The label to display with the axis.
179-
*/
180-
label: _propTypes2.default.string,
181-
/**
182-
* Whether to display the label on the "left" or "right".
183-
*/
184-
position: _propTypes2.default.oneOf(["left", "right"]),
185-
/**
186-
* [Internal] The yScale supplied by the associated YAxis
187-
*/
188-
yScale: _propTypes2.default.func,
189-
/**
190-
* [Internal] The width supplied by the surrounding ChartContainer
191-
*/
192-
width: _propTypes2.default.number
159+
/**
160+
* Reference to the axis which provides the vertical scale for drawing. e.g.
161+
* specifying axis="trafficRate" would refer the y-scale to the YAxis of id="trafficRate".
162+
*/
163+
axis: _propTypes2.default.string.isRequired, // eslint-disable-line
164+
/**
165+
* An object describing the style of the baseline of the form
166+
* { label, line }. "label" and "line" are both objects containing
167+
* the inline CSS for that part of the baseline.
168+
*/
169+
style: _propTypes2.default.shape({
170+
label: _propTypes2.default.object, // eslint-disable-line
171+
line: _propTypes2.default.object // eslint-disable-line
172+
}),
173+
/**
174+
* The y-value to display the line at.
175+
*/
176+
value: _propTypes2.default.number,
177+
/**
178+
* The label to display with the axis.
179+
*/
180+
label: _propTypes2.default.string,
181+
/**
182+
* Whether to display the label on the "left" or "right".
183+
*/
184+
position: _propTypes2.default.oneOf(["left", "right"]),
185+
/**
186+
* [Internal] The yScale supplied by the associated YAxis
187+
*/
188+
yScale: _propTypes2.default.func,
189+
/**
190+
* [Internal] The width supplied by the surrounding ChartContainer
191+
*/
192+
width: _propTypes2.default.number
193193
};

0 commit comments

Comments
 (0)