value: function style(column, event) {
var style = void 0;
var styleMap = this.providedStyleMap(column, event);
var isHighlighted =
this.props.highlighted &&
((column === this.props.highlighted.column &&
_pondjs.Event.is(this.props.highlighted.event, event)) ||
(this.props.highlightEntireEvent &&
_pondjs.Event.is(this.props.highlighted.event, event)));
var isSelected =
this.props.selected &&
column === this.props.selected.column &&
_pondjs.Event.is(this.props.selected.event, event);
if (this.props.selected) {
if (isSelected) {
style = (0, _merge2.default)(
true,
defaultStyle.selected,
styleMap.selected ? styleMap.selected : {}
);
} else if (isHighlighted) {
style = (0, _merge2.default)(
true,
defaultStyle.highlighted,
styleMap.highlighted ? styleMap.highlighted : {}
);
} else {
style = (0, _merge2.default)(
true,
defaultStyle.muted,
styleMap.muted ? styleMap.muted : {}
);
}
} else if (isHighlighted) {
style = (0, _merge2.default)(
true,
defaultStyle.highlighted,
styleMap.highlighted ? styleMap.highlighted : {}
);
} else {
style = (0, _merge2.default)(
true,
defaultStyle.normal,
styleMap.normal ? styleMap.normal : {}
);
}
return style;
}
var _loop2 = function _loop2() {
var column = _step2.value;
var index = event.index();
var key = series.name() + "-" + index + "-" + column;
var value = event.get(column);
var style = _this2.style(column, event);
var height = yScale(0) - yScale(value);
// Allow negative values. Minimum bar height = 1 pixel.
// Stack negative bars below X-axis and positive above X-Axis
var positiveBar = height >= 0;
height = Math.max(Math.abs(height), minBarHeight);
var y = positiveBar ? yposPositive - height : yposNegative;
// Don't draw a rect when height and minBarHeight are both 0
if (height === 0) return "break";
// Event marker if info provided and hovering
var isHighlighted =
_this2.props.highlighted &&
column === _this2.props.highlighted.column &&
_pondjs.Event.is(_this2.props.highlighted.event, event);
if (isHighlighted && _this2.props.info) {
eventMarker = _react2.default.createElement(
_EventMarker2.default,
_extends({}, _this2.props, {
event: event,
column: column,
offsetX: offset,
offsetY:
yBase -
(positiveBar ? yposPositive : yposNegative)
})
);
}
var box = { x: x, y: y, width: width, height: height };
var barProps = _extends({ key: key }, box, { style: style });
if (_this2.props.onSelectionChange) {
barProps.onClick = function(e) {
return _this2.handleClick(e, event, column);
};
}
if (_this2.props.onHighlightChange) {
barProps.onMouseMove = function(e) {
return _this2.handleHover(e, event, column);
};
barProps.onMouseLeave = function() {
return _this2.handleHoverLeave();
};
}
bars.push(_react2.default.createElement("rect", barProps));
if (positiveBar) {
yposPositive -= height;
} else {
yposNegative += height;
}
};
value: function style(column, event, level) {
var style = void 0;
if (!this.providedStyle) {
this.providedStyle = this.providedStyleArray(this.props.column);
}
if (
!_underscore2.default.isNull(this.providedStyle) &&
(!_underscore2.default.isArray(this.providedStyle) ||
this.providedStyle.length !== 3)
) {
console.warn("Provided style to BandChart should be an array of 3 objects");
return defaultStyle;
}
var isHighlighted =
this.props.highlighted && _pondjs.Event.is(this.props.highlighted, event);
var isSelected =
this.props.selected && _pondjs.Event.is(this.props.selected, event);
if (this.props.selected) {
if (isSelected) {
if (!this.selectedStyle || !this.selectedStyle[level]) {
if (!this.selectedStyle) {
this.selectedStyle = [];
}
this.selectedStyle[level] = (0, _merge2.default)(
true,
defaultStyle[level].selected,
this.providedStyle[level].selected
? this.providedStyle[level].selected
: {}
);
}
style = this.selectedStyle[level];
} else if (isHighlighted) {
if (!this.highlightedStyle || !this.highlightedStyle[level]) {
if (!this.highlightedStyle) {
this.highlightedStyle = [];
}
this.highlightedStyle[level] = (0, _merge2.default)(
true,
defaultStyle[level].highlighted,
this.providedStyle[level].highlighted
? this.providedStyle[level].highlighted
: {}
);
}
style = this.highlightedStyle[level];
} else {
if (!this.mutedStyle) {
this.mutedStyle = [];
}
if (!this.mutedStyle[level]) {
this.mutedStyle[level] = (0, _merge2.default)(
true,
defaultStyle[level].muted,
this.providedStyle[level].muted
? this.providedStyle[level].muted
: {}
);
}
style = this.mutedStyle[level];
}
} else if (isHighlighted) {
style = (0, _merge2.default)(
true,
defaultStyle[level].highlighted,
this.providedStyle[level].highlighted
? this.providedStyle[level].highlighted
: {}
);
} else {
if (!this.normalStyle) {
this.normalStyle = [];
}
if (!this.normalStyle[level]) {
this.normalStyle[level] = (0, _merge2.default)(
true,
defaultStyle[level].normal,
this.providedStyle[level].normal ? this.providedStyle[level].normal : {}
);
}
style = this.normalStyle[level];
}
return style;
}
var _loop = function _loop() {
var event = _step.value;
var begin = event.begin();
var end = event.end();
var beginPos = scale(begin) >= 0 ? scale(begin) : 0;
var endPos =
scale(end) <= _this2.props.width ? scale(end) : _this2.props.width;
var transform = "translate(" + beginPos + ",0)";
var isHover = _this2.state.hover
? _pondjs.Event.is(event, _this2.state.hover)
: false;
var state = void 0;
if (isHover) {
state = "hover";
} else {
state = "normal";
}
var barNormalStyle = {};
var barStyle = {};
if (_this2.props.style) {
barNormalStyle = _this2.props.style(event, "normal");
barStyle = _this2.props.style(event, state);
}
var label = "";
if (_this2.props.label) {
if (_underscore2.default.isString(_this2.props.label)) {
label = _this2.props.label;
} else if (_underscore2.default.isFunction(_this2.props.label)) {
label = _this2.props.label(event);
}
}
var x = _this2.props.spacing;
var y = 0;
var width = endPos - beginPos - 2 * _this2.props.spacing;
width = width < 0 ? 0 : width;
var height = _this2.props.size;
var eventLabelStyle = {
fontWeight: 100,
fontSize: 11
};
var text = null;
if (isHover) {
text = _react2.default.createElement(
"g",
null,
_react2.default.createElement("rect", {
className: "eventchart-marker",
x: x,
y: y,
width: hoverMarkerWidth,
height: height + 4,
style: (0, _merge2.default)(true, barNormalStyle, {
pointerEvents: "none"
})
}),
_react2.default.createElement(
"text",
{
style: _extends(
{
pointerEvents: "none",
fill: "#444"
},
eventLabelStyle
),
x: 8 + textOffsetX,
y: 15 + textOffsetY
},
label
)
);
}
eventMarkers.push(
_react2.default.createElement(
"g",
{ transform: transform, key: i },
_react2.default.createElement("rect", {
className: "eventchart-marker",
x: x,
y: y,
width: width,
height: height,
style: barStyle,
onClick: function onClick(e) {
return _this2.handleClick(e, event);
},
onMouseLeave: function onMouseLeave() {
return _this2.onMouseLeave();
},
onMouseOver: function onMouseOver(e) {
return _this2.onMouseOver(e, event);
}
}),
text
)
);
i += 1;
};