lucid-ui
Version:
A UI component library from AppNexus.
595 lines (533 loc) • 28.8 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
import _isEmpty from "lodash/isEmpty";
import _isNil from "lodash/isNil";
import _get from "lodash/get";
import _identity from "lodash/identity";
import _toNumber from "lodash/toNumber";
import _keys from "lodash/keys";
import _map from "lodash/map";
import _set from "lodash/set";
import _each from "lodash/each";
import _reduce from "lodash/reduce";
import _compact from "lodash/compact";
import _isString from "lodash/isString";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst, omitProps } from '../../util/component-types';
import { minByFields, maxByFields, maxByFieldsStacked, formatDate, nearest } from '../../util/chart-helpers';
import * as d3Scale from 'd3-scale';
import * as d3TimeFormat from 'd3-time-format';
import * as chartConstants from '../../constants/charts';
import Axis from '../Axis/Axis';
import AxisLabel from '../AxisLabel/AxisLabel';
import Legend from '../Legend/Legend';
import Lines from '../Lines/Lines';
import Points from '../Points/Points';
import { ToolTipDumb as ToolTip } from '../ToolTip/ToolTip';
import ContextMenu from '../ContextMenu/ContextMenu';
import EmptyStateWrapper from '../EmptyStateWrapper/EmptyStateWrapper';
var cx = lucidClassNames.bind('&-LineChart');
var arrayOf = PropTypes.arrayOf,
func = PropTypes.func,
instanceOf = PropTypes.instanceOf,
number = PropTypes.number,
object = PropTypes.object,
shape = PropTypes.shape,
string = PropTypes.string,
bool = PropTypes.bool,
oneOfType = PropTypes.oneOfType,
oneOf = PropTypes.oneOf;
var LineChart = /*#__PURE__*/function (_React$Component) {
_inherits(LineChart, _React$Component);
var _super = _createSuper(LineChart);
function LineChart() {
var _this;
_classCallCheck(this, LineChart);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
isHovering: false,
mouseX: undefined
});
_defineProperty(_assertThisInitialized(_this), "handleToolTipHoverZone", function (_ref, xPoints) {
var clientX = _ref.clientX,
target = _ref.target;
var mouseX = nearest(xPoints, clientX - target.getBoundingClientRect().left);
if (!_this.state.isHovering || _this.state.mouseX !== mouseX) {
_this.setState({
isHovering: true,
mouseX: nearest(xPoints, clientX - target.getBoundingClientRect().left)
});
}
});
_defineProperty(_assertThisInitialized(_this), "renderY2Axis", function (xScale, y2Scale, y2AxisFinalFormatter, margin) {
var _ref2 = _this.props,
y2AxisFields = _ref2.y2AxisFields,
yAxisFields = _ref2.yAxisFields,
y2AxisTickCount = _ref2.y2AxisTickCount,
y2AxisTitle = _ref2.y2AxisTitle,
y2AxisTitleColor = _ref2.y2AxisTitleColor,
palette = _ref2.palette,
xAxisField = _ref2.xAxisField,
y2AxisMax = _ref2.y2AxisMax,
data = _ref2.data,
y2AxisIsStacked = _ref2.y2AxisIsStacked,
y2AxisColorOffset = _ref2.y2AxisColorOffset,
colorMap = _ref2.colorMap,
y2AxisHasPoints = _ref2.y2AxisHasPoints;
/* y2 axis */
var axis = y2AxisFields ? /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left + innerWidth, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Axis, {
orient: "right",
scale: y2Scale,
tickFormat: y2AxisFinalFormatter,
tickCount: y2AxisTickCount
})) : null;
/* y2 axis title */
var axisTitle = y2AxisTitle ? /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left + innerWidth, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(AxisLabel, {
orient: "right",
width: margin.right,
height: innerHeight,
label: y2AxisTitle,
color: _isString(y2AxisTitleColor) ? y2AxisTitleColor : palette[y2AxisTitleColor % palette.length]
})) : null;
var axisLines = y2AxisFields ? /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Lines, {
xScale: xScale,
yScale: y2Scale,
xField: xAxisField,
yFields: y2AxisFields,
yStackedMax: y2AxisMax,
data: data || {},
isStacked: y2AxisIsStacked,
colorOffset: y2AxisColorOffset + yAxisFields.length,
colorMap: colorMap,
palette: palette
})) : null;
var axisPoints = y2AxisFields && y2AxisHasPoints ? /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Points, {
xScale: xScale,
yScale: y2Scale,
xField: xAxisField,
yFields: y2AxisFields,
yStackedMax: y2AxisMax,
data: data || {},
isStacked: y2AxisIsStacked,
colorOffset: y2AxisColorOffset + yAxisFields.length,
colorMap: colorMap,
palette: palette
})) : null;
return {
title: axisTitle,
lines: axisLines,
points: axisPoints,
axis: axis
};
});
return _this;
}
_createClass(LineChart, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
className = _this$props.className,
height = _this$props.height,
width = _this$props.width,
marginOriginal = _this$props.margin,
data = _this$props.data,
legend = _this$props.legend,
isLoading = _this$props.isLoading,
hasToolTips = _this$props.hasToolTips,
hasLegend = _this$props.hasLegend,
palette = _this$props.palette,
colorMap = _this$props.colorMap,
xAxisField = _this$props.xAxisField,
xAxisTickCount = _this$props.xAxisTickCount,
xAxisTicks = _this$props.xAxisTicks,
xAxisTitle = _this$props.xAxisTitle,
xAxisTitleColor = _this$props.xAxisTitleColor,
xAxisFormatter = _this$props.xAxisFormatter,
xAxisTooltipFormatter = _this$props.xAxisTooltipFormatter,
_this$props$xAxisMin = _this$props.xAxisMin,
xAxisMin = _this$props$xAxisMin === void 0 ? minByFields(data, xAxisField) : _this$props$xAxisMin,
_this$props$xAxisMax = _this$props.xAxisMax,
xAxisMax = _this$props$xAxisMax === void 0 ? maxByFields(data, xAxisField) : _this$props$xAxisMax,
xAxisTextOrientation = _this$props.xAxisTextOrientation,
yAxisFields = _this$props.yAxisFields,
yAxisFormatter = _this$props.yAxisFormatter,
yAxisHasPoints = _this$props.yAxisHasPoints,
yAxisIsStacked = _this$props.yAxisIsStacked,
yAxisTickCount = _this$props.yAxisTickCount,
yAxisTitle = _this$props.yAxisTitle,
yAxisTitleColor = _this$props.yAxisTitleColor,
yAxisMin = _this$props.yAxisMin,
yAxisTooltipFormatter = _this$props.yAxisTooltipFormatter,
yAxisTooltipDataFormatter = _this$props.yAxisTooltipDataFormatter,
_this$props$yAxisMax = _this$props.yAxisMax,
yAxisMax = _this$props$yAxisMax === void 0 ? yAxisIsStacked ? maxByFieldsStacked(data, yAxisFields) : maxByFields(data, yAxisFields) : _this$props$yAxisMax,
yAxisColorOffset = _this$props.yAxisColorOffset,
y2AxisFields = _this$props.y2AxisFields,
y2AxisFormatter = _this$props.y2AxisFormatter,
y2AxisTooltipDataFormatter = _this$props.y2AxisTooltipDataFormatter,
y2AxisHasPoints = _this$props.y2AxisHasPoints,
y2AxisIsStacked = _this$props.y2AxisIsStacked,
y2AxisMin = _this$props.y2AxisMin,
_this$props$y2AxisMax = _this$props.y2AxisMax,
y2AxisMax = _this$props$y2AxisMax === void 0 ? y2AxisFields && y2AxisIsStacked ? maxByFieldsStacked(data, y2AxisFields) : maxByFields(data, y2AxisFields) : _this$props$y2AxisMax,
y2AxisColorOffset = _this$props.y2AxisColorOffset,
yAxisTextOrientation = _this$props.yAxisTextOrientation,
passThroughs = _objectWithoutProperties(_this$props, ["className", "height", "width", "margin", "data", "legend", "isLoading", "hasToolTips", "hasLegend", "palette", "colorMap", "xAxisField", "xAxisTickCount", "xAxisTicks", "xAxisTitle", "xAxisTitleColor", "xAxisFormatter", "xAxisTooltipFormatter", "xAxisMin", "xAxisMax", "xAxisTextOrientation", "yAxisFields", "yAxisFormatter", "yAxisHasPoints", "yAxisIsStacked", "yAxisTickCount", "yAxisTitle", "yAxisTitleColor", "yAxisMin", "yAxisTooltipFormatter", "yAxisTooltipDataFormatter", "yAxisMax", "yAxisColorOffset", "y2AxisFields", "y2AxisFormatter", "y2AxisTooltipDataFormatter", "y2AxisHasPoints", "y2AxisIsStacked", "y2AxisMin", "y2AxisMax", "y2AxisColorOffset", "yAxisTextOrientation"]);
var _this$state = this.state,
isHovering = _this$state.isHovering,
mouseX = _this$state.mouseX;
var margin = _objectSpread(_objectSpread({}, LineChart.MARGIN), marginOriginal);
var svgClasses = cx(className, '&');
var innerWidth = width - margin.left - margin.right;
var innerHeight = height - margin.top - margin.bottom;
/**
* x axis
*/
var xScale = d3Scale.scaleTime().domain([xAxisMin, xAxisMax]).range([0, innerWidth]);
var xFinalFormatter = xAxisFormatter ? xAxisFormatter : xScale.tickFormat();
var allYFields = _compact(yAxisFields.concat(y2AxisFields)); // This is used to map x mouse values back to data points.
var xPointMap = _reduce(data, function (acc, d) {
// `floor` to avoid rounding errors, it doesn't need to be super precise
// since we're dealing with pixels
var point = Math.floor(xScale(d[xAxisField]));
_each(allYFields, function (field) {
_set(acc, "".concat(point, ".y.").concat(field), d[field]);
_set(acc, "".concat(point, ".x"), d[xAxisField]);
});
return acc;
}, {});
var xPoints = _map(_keys(xPointMap), _toNumber);
/**
* y axis
*/
var yScale = d3Scale.scaleLinear().domain([yAxisMin, yAxisMax]).range([innerHeight, 0]);
var yAxisFinalFormatter = yAxisFormatter || yScale.tickFormat();
var yFinalFormatter = yAxisTooltipDataFormatter ? yAxisTooltipDataFormatter : yAxisFinalFormatter;
var yAxisHasLinesFinal = !(yAxisIsStacked && !yAxisHasPoints);
var yAxisHasPointsFinal = yAxisHasPoints || yAxisIsStacked;
/**
* y2 axis
*/
var y2Axis = {};
var y2AxisLegend = null;
var y2AxisToolTip = null;
if (y2AxisFields) {
var y2Scale = d3Scale.scaleLinear().domain([y2AxisMin, y2AxisMax]).range([innerHeight, 0]);
var y2AxisFinalFormatter = y2AxisFormatter ? y2AxisFormatter : y2Scale ? y2Scale.tickFormat() : _identity;
var y2FinalFormatter = y2AxisTooltipDataFormatter ? y2AxisTooltipDataFormatter : y2AxisFinalFormatter;
var y2AxisHasPointsFinal = y2AxisHasPoints || y2AxisIsStacked;
var y2AxisHasLinesFinal = !(y2AxisIsStacked && !y2AxisHasPoints);
y2Axis = this.renderY2Axis(xScale, y2Scale, y2AxisFinalFormatter, margin);
y2AxisLegend = _map(y2AxisFields, function (field, index) {
return /*#__PURE__*/React.createElement(Legend.Item, {
key: index,
hasPoint: y2AxisHasPointsFinal,
hasLine: y2AxisHasLinesFinal,
color: _get(colorMap, field, palette[y2AxisColorOffset + index + yAxisFields.length % palette.length]),
pointKind: y2AxisHasPoints ? y2AxisColorOffset + index + yAxisFields.length : 1
}, _get(legend, field, field));
});
y2AxisToolTip = _map(y2AxisFields, function (field, index) {
return !_isNil(_get(xPointMap, mouseX + '.y.' + field)) ? /*#__PURE__*/React.createElement(Legend.Item, {
key: index,
hasPoint: y2AxisHasPointsFinal,
hasLine: y2AxisHasLinesFinal,
color: _get(colorMap, field, palette[y2AxisColorOffset + index + yAxisFields.length % palette.length]),
pointKind: y2AxisHasPoints ? y2AxisColorOffset + index + yAxisFields.length : 1
}, yAxisTooltipFormatter(_get(legend, field, field), y2FinalFormatter(_get(xPointMap, mouseX + '.y.' + field)), _get(xPointMap, mouseX + '.y.' + field))) : null;
});
}
if (_isEmpty(data) || width < 1 || height < 1 || isLoading) {
var emptyStateWrapper = getFirst(this.props, LineChart.EmptyStateWrapper) || /*#__PURE__*/React.createElement(LineChart.EmptyStateWrapper, {
Title: "You have no data."
});
var emptyStateWrapperProps = _get(emptyStateWrapper, 'props', {});
var emptyStateWrapperChildren = _get(emptyStateWrapperProps, 'children', []);
return /*#__PURE__*/React.createElement(EmptyStateWrapper, _extends({}, emptyStateWrapperProps, {
isEmpty: _isEmpty(data),
isLoading: isLoading
}), emptyStateWrapperChildren, /*#__PURE__*/React.createElement("svg", _extends({}, omitProps(passThroughs, undefined, _keys(LineChart.propTypes)), {
className: svgClasses,
width: width,
height: height
}), /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Axis, {
orient: "left",
scale: yScale,
tickFormat: yAxisFormatter
})), /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(innerHeight + margin.top, ")")
}, /*#__PURE__*/React.createElement(Axis, {
orient: "bottom",
scale: xScale,
tickFormat: xFinalFormatter
}))));
}
return /*#__PURE__*/React.createElement("svg", _extends({}, omitProps(passThroughs, undefined, _keys(LineChart.propTypes)), {
className: svgClasses,
width: width,
height: height
}), /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, hasToolTips && isHovering && !_isNil(mouseX) ? /*#__PURE__*/React.createElement(ToolTip, {
isLight: true,
isExpanded: true,
flyOutMaxWidth: "none",
alignment: mouseX < innerWidth * 0.15 ? 'start' : mouseX > innerWidth * 0.85 ? 'end' : 'center'
}, /*#__PURE__*/React.createElement(ToolTip.Target, {
elementType: "g"
}, /*#__PURE__*/React.createElement("path", {
className: cx('&-tooltip-line'),
d: "M".concat(mouseX, ",0 L").concat(mouseX, ",").concat(innerHeight)
})), /*#__PURE__*/React.createElement(ToolTip.Title, null, xAxisTooltipFormatter(_get(xPointMap, "".concat(mouseX, ".x")))), /*#__PURE__*/React.createElement(ToolTip.Body, null, /*#__PURE__*/React.createElement(Legend, {
hasBorders: false,
isReversed: yAxisIsStacked
}, _map(yAxisFields, function (field, index) {
return !_isNil(_get(xPointMap, mouseX + '.y.' + field)) ? /*#__PURE__*/React.createElement(Legend.Item, {
key: index,
hasPoint: yAxisHasPointsFinal,
hasLine: yAxisHasLinesFinal,
color: _get(colorMap, field, palette[(index + yAxisColorOffset) % palette.length]),
pointKind: yAxisHasPoints ? index + yAxisColorOffset : 1
}, yAxisTooltipFormatter(_get(legend, field, field), yFinalFormatter(_get(xPointMap, mouseX + '.y.' + field)), _get(xPointMap, mouseX + '.y.' + field))) : null;
}), y2AxisToolTip))) : null), /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(innerHeight + margin.top, ")")
}, /*#__PURE__*/React.createElement(Axis, {
orient: "bottom",
scale: xScale,
outerTickSize: 0,
tickFormat: xFinalFormatter,
tickCount: xAxisTickCount,
ticks: xAxisTicks,
textOrientation: xAxisTextOrientation
}), hasLegend ? /*#__PURE__*/React.createElement(ContextMenu, {
direction: "down",
alignment: "center",
directonOffset: (margin.bottom / 2 + Legend.HEIGHT / 2) * -1
/* should center the legend in the bottom margin */
}, /*#__PURE__*/React.createElement(ContextMenu.Target, {
elementType: "g"
}, /*#__PURE__*/React.createElement("rect", {
className: cx('&-invisible'),
width: innerWidth,
height: margin.bottom
})), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, {
className: cx('&-legend-container')
}, /*#__PURE__*/React.createElement(Legend, {
orient: "horizontal"
}, _map(yAxisFields, function (field, index) {
return /*#__PURE__*/React.createElement(Legend.Item, {
key: index,
hasPoint: yAxisHasPointsFinal,
hasLine: yAxisHasLinesFinal,
color: _get(colorMap, field, palette[index + yAxisColorOffset % palette.length]),
pointKind: yAxisHasPoints ? index + yAxisColorOffset : 1
}, _get(legend, field, field));
}), y2AxisLegend))) : null), xAxisTitle ? /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top + innerHeight, ")")
}, /*#__PURE__*/React.createElement(AxisLabel, {
orient: "bottom",
width: innerWidth,
height: margin.bottom,
label: xAxisTitle,
color: _isString(xAxisTitleColor) ? xAxisTitleColor : palette[xAxisTitleColor % palette.length]
})) : null, /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Axis, {
orient: "left",
scale: yScale,
tickFormat: yAxisFinalFormatter,
tickCount: yAxisTickCount,
textOrientation: yAxisTextOrientation
})), yAxisTitle ? /*#__PURE__*/React.createElement("g", {
transform: "translate(0, ".concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(AxisLabel, {
orient: "left",
width: margin.left,
height: innerHeight,
label: yAxisTitle,
color: _isString(yAxisTitleColor) ? yAxisTitleColor : palette[yAxisTitleColor % palette.length]
})) : null, _get(y2Axis, 'axis', null), _get(y2Axis, 'title', null), /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Lines, {
xScale: xScale,
yScale: yScale,
xField: xAxisField,
yFields: yAxisFields,
yStackedMax: yAxisMax,
data: data || {},
isStacked: yAxisIsStacked,
colorMap: colorMap,
palette: palette,
colorOffset: yAxisColorOffset
})), yAxisHasPoints ? /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Points, {
xScale: xScale,
yScale: yScale,
xField: xAxisField,
yFields: yAxisFields,
yStackedMax: yAxisMax,
data: data,
isStacked: yAxisIsStacked,
colorMap: colorMap,
palette: palette,
colorOffset: yAxisColorOffset
})) : null, _get(y2Axis, 'lines', null), _get(y2Axis, 'points', null), hasToolTips ? /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement("rect", {
className: cx('&-invisible'),
width: innerWidth,
height: innerHeight,
onMouseMove: function onMouseMove(event) {
_this2.handleToolTipHoverZone(event, xPoints);
},
onMouseOut: function onMouseOut() {
_this2.setState({
isHovering: false
});
}
})) : null);
}
}]);
return LineChart;
}(React.Component);
_defineProperty(LineChart, "displayName", 'LineChart');
_defineProperty(LineChart, "peek", {
description: "\n\t\t\tThe line chart presents data over time. Currently only dates are\n\t\t\tsupported on the x axis and numeric values on the y. If you need\n\t\t\tdiscrete values on the x axis, consider using the `BarChart` instead.\n\t\t",
categories: ['visualizations', 'charts'],
madeFrom: ['ContextMenu', 'ToolTip']
});
_defineProperty(LineChart, "MARGIN", {
top: 10,
right: 80,
bottom: 65,
left: 80
});
_defineProperty(LineChart, "propTypes", {
className: string,
height: number,
width: number,
margin: shape({
top: number,
right: number,
bottom: number,
left: number
}),
data: arrayOf(object),
legend: object,
isLoading: bool,
hasToolTips: bool,
hasLegend: bool,
palette: arrayOf(string),
colorMap: object,
xAxisField: string,
xAxisMin: instanceOf(Date),
xAxisMax: instanceOf(Date),
xAxisFormatter: func,
xAxisTooltipFormatter: func,
xAxisTickCount: number,
xAxisTicks: arrayOf(instanceOf(Date)),
xAxisTitle: string,
xAxisTitleColor: oneOfType([number, string]),
xAxisTextOrientation: oneOf(['vertical', 'horizontal', 'diagonal']),
yAxisFields: arrayOf(string),
yAxisMin: number,
yAxisMax: number,
yAxisFormatter: func,
yAxisIsStacked: bool,
yAxisHasPoints: bool,
yAxisTickCount: number,
yAxisTitle: string,
yAxisTitleColor: oneOfType([number, string]),
yAxisTooltipFormatter: func,
yAxisTooltipDataFormatter: func,
yAxisColorOffset: number,
y2AxisFields: arrayOf(string),
y2AxisMin: number,
y2AxisMax: number,
y2AxisFormatter: func,
y2AxisTooltipDataFormatter: func,
y2AxisIsStacked: bool,
y2AxisHasPoints: bool,
y2AxisTickCount: number,
y2AxisTitle: string,
y2AxisTitleColor: oneOfType([number, string]),
y2AxisColorOffset: number,
yAxisTextOrientation: oneOf(['vertical', 'horizontal', 'diagonal'])
});
_defineProperty(LineChart, "defaultProps", {
height: 400,
width: 1000,
margin: {
top: 10,
right: 80,
bottom: 65,
left: 80
},
hasToolTips: true,
hasLegend: false,
palette: chartConstants.PALETTE_7,
xAxisField: 'x',
xAxisFormatter: formatDate,
// E.g. "Mon 06/06/2016 15:46:19"
xAxisTooltipFormatter: d3TimeFormat.timeFormat('%a %x %X'),
xAxisTickCount: null,
xAxisTicks: undefined,
// intentionally undefined so that `Axis` can default it correctly
xAxisTitle: null,
xAxisTitleColor: '#000',
xAxisTextOrientation: 'horizontal',
yAxisFields: ['y'],
yAxisMin: 0,
yAxisIsStacked: false,
yAxisHasPoints: true,
yAxisTickCount: null,
yAxisTitle: null,
yAxisTitleColor: '#000',
yAxisTooltipFormatter: function yAxisTooltipFormatter(yField, yValueFormatted) {
return "".concat(yField, ": ").concat(yValueFormatted);
},
yAxisColorOffset: 0,
y2AxisFields: [],
y2AxisMin: 0,
y2AxisIsStacked: false,
y2AxisHasPoints: true,
y2AxisTickCount: null,
y2AxisTitle: null,
y2AxisTitleColor: '#000',
y2AxisColorOffset: 1,
yAxisTextOrientation: 'horizontal'
});
_defineProperty(LineChart, "EmptyStateWrapper", EmptyStateWrapper);
export default LineChart;