lucid-ui
Version:
A UI component library from AppNexus.
376 lines • 43.2 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var chart_helpers_1 = require("../../util/chart-helpers");
var d3Scale = __importStar(require("d3-scale"));
var d3TimeFormat = __importStar(require("d3-time-format"));
var chartConstants = __importStar(require("../../constants/charts"));
var Axis_1 = __importDefault(require("../Axis/Axis"));
var AxisLabel_1 = __importDefault(require("../AxisLabel/AxisLabel"));
var Legend_1 = __importDefault(require("../Legend/Legend"));
var Lines_1 = __importDefault(require("../Lines/Lines"));
var Points_1 = __importDefault(require("../Points/Points"));
var ToolTip_1 = require("../ToolTip/ToolTip");
var ContextMenu_1 = __importDefault(require("../ContextMenu/ContextMenu"));
var EmptyStateWrapper_1 = __importDefault(require("../EmptyStateWrapper/EmptyStateWrapper"));
var cx = style_helpers_1.lucidClassNames.bind('&-LineChart');
var arrayOf = prop_types_1.default.arrayOf, func = prop_types_1.default.func, instanceOf = prop_types_1.default.instanceOf, number = prop_types_1.default.number, object = prop_types_1.default.object, shape = prop_types_1.default.shape, string = prop_types_1.default.string, bool = prop_types_1.default.bool, oneOfType = prop_types_1.default.oneOfType, oneOf = prop_types_1.default.oneOf;
var LineChart = /** @class */ (function (_super) {
__extends(LineChart, _super);
function LineChart() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isHovering: false,
mouseX: undefined,
};
_this.handleToolTipHoverZone = function (_a, xPoints) {
var clientX = _a.clientX, target = _a.target;
var mouseX = chart_helpers_1.nearest(xPoints, clientX - target.getBoundingClientRect().left);
if (!_this.state.isHovering || _this.state.mouseX !== mouseX) {
_this.setState({
isHovering: true,
mouseX: chart_helpers_1.nearest(xPoints, clientX - target.getBoundingClientRect().left),
});
}
};
_this.renderY2Axis = function (xScale, y2Scale, y2AxisFinalFormatter, margin) {
var _a = _this.props, y2AxisFields = _a.y2AxisFields, yAxisFields = _a.yAxisFields, y2AxisTickCount = _a.y2AxisTickCount, y2AxisTitle = _a.y2AxisTitle, y2AxisTitleColor = _a.y2AxisTitleColor, palette = _a.palette, xAxisField = _a.xAxisField, y2AxisMax = _a.y2AxisMax, data = _a.data, y2AxisIsStacked = _a.y2AxisIsStacked, y2AxisColorOffset = _a.y2AxisColorOffset, colorMap = _a.colorMap, y2AxisHasPoints = _a.y2AxisHasPoints;
/* y2 axis */
var axis = y2AxisFields ? (react_1.default.createElement("g", { transform: "translate(" + (margin.left + innerWidth) + ", " + margin.top + ")" },
react_1.default.createElement(Axis_1.default, { orient: 'right', scale: y2Scale, tickFormat: y2AxisFinalFormatter, tickCount: y2AxisTickCount }))) : null;
/* y2 axis title */
var axisTitle = y2AxisTitle ? (react_1.default.createElement("g", { transform: "translate(" + (margin.left + innerWidth) + ", " + margin.top + ")" },
react_1.default.createElement(AxisLabel_1.default, { orient: 'right', width: margin.right, height: innerHeight, label: y2AxisTitle, color: lodash_1.default.isString(y2AxisTitleColor)
? y2AxisTitleColor
: palette[y2AxisTitleColor % palette.length] }))) : null;
var axisLines = y2AxisFields ? (react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement(Lines_1.default, { 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 ? (react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement(Points_1.default, { 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;
}
LineChart.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, height = _a.height, width = _a.width, marginOriginal = _a.margin, data = _a.data, legend = _a.legend, isLoading = _a.isLoading, hasToolTips = _a.hasToolTips, hasLegend = _a.hasLegend, palette = _a.palette, colorMap = _a.colorMap, xAxisField = _a.xAxisField, xAxisTickCount = _a.xAxisTickCount, xAxisTicks = _a.xAxisTicks, xAxisTitle = _a.xAxisTitle, xAxisTitleColor = _a.xAxisTitleColor, xAxisFormatter = _a.xAxisFormatter, xAxisTooltipFormatter = _a.xAxisTooltipFormatter, _b = _a.xAxisMin, xAxisMin = _b === void 0 ? chart_helpers_1.minByFields(data, xAxisField) : _b, _c = _a.xAxisMax, xAxisMax = _c === void 0 ? chart_helpers_1.maxByFields(data, xAxisField) : _c, xAxisTextOrientation = _a.xAxisTextOrientation, yAxisFields = _a.yAxisFields, yAxisFormatter = _a.yAxisFormatter, yAxisHasPoints = _a.yAxisHasPoints, yAxisIsStacked = _a.yAxisIsStacked, yAxisTickCount = _a.yAxisTickCount, yAxisTitle = _a.yAxisTitle, yAxisTitleColor = _a.yAxisTitleColor, yAxisMin = _a.yAxisMin, yAxisTooltipFormatter = _a.yAxisTooltipFormatter, yAxisTooltipDataFormatter = _a.yAxisTooltipDataFormatter, _d = _a.yAxisMax, yAxisMax = _d === void 0 ? (yAxisIsStacked
? chart_helpers_1.maxByFieldsStacked(data, yAxisFields)
: chart_helpers_1.maxByFields(data, yAxisFields)) : _d, yAxisColorOffset = _a.yAxisColorOffset, y2AxisFields = _a.y2AxisFields, y2AxisFormatter = _a.y2AxisFormatter, y2AxisTooltipDataFormatter = _a.y2AxisTooltipDataFormatter, y2AxisHasPoints = _a.y2AxisHasPoints, y2AxisIsStacked = _a.y2AxisIsStacked, y2AxisMin = _a.y2AxisMin, _e = _a.y2AxisMax, y2AxisMax = _e === void 0 ? (y2AxisFields && y2AxisIsStacked
? chart_helpers_1.maxByFieldsStacked(data, y2AxisFields)
: chart_helpers_1.maxByFields(data, y2AxisFields)) : _e, y2AxisColorOffset = _a.y2AxisColorOffset, yAxisTextOrientation = _a.yAxisTextOrientation, passThroughs = __rest(_a, ["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 _f = this.state, isHovering = _f.isHovering, mouseX = _f.mouseX;
var margin = __assign(__assign({}, 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 = lodash_1.default.compact(yAxisFields.concat(y2AxisFields));
// This is used to map x mouse values back to data points.
var xPointMap = lodash_1.default.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]));
lodash_1.default.each(allYFields, function (field) {
lodash_1.default.set(acc, point + ".y." + field, d[field]);
lodash_1.default.set(acc, point + ".x", d[xAxisField]);
});
return acc;
}, {});
var xPoints = lodash_1.default.map(lodash_1.default.keys(xPointMap), lodash_1.default.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()
: lodash_1.default.identity;
var y2FinalFormatter_1 = y2AxisTooltipDataFormatter
? y2AxisTooltipDataFormatter
: y2AxisFinalFormatter;
var y2AxisHasPointsFinal_1 = y2AxisHasPoints || y2AxisIsStacked;
var y2AxisHasLinesFinal_1 = !(y2AxisIsStacked && !y2AxisHasPoints);
y2Axis = this.renderY2Axis(xScale, y2Scale, y2AxisFinalFormatter, margin);
y2AxisLegend = lodash_1.default.map(y2AxisFields, function (field, index) { return (react_1.default.createElement(Legend_1.default.Item, { key: index, hasPoint: y2AxisHasPointsFinal_1, hasLine: y2AxisHasLinesFinal_1, color: lodash_1.default.get(colorMap, field, palette[y2AxisColorOffset + index + (yAxisFields.length % palette.length)]), pointKind: y2AxisHasPoints ? y2AxisColorOffset + index + yAxisFields.length : 1 }, lodash_1.default.get(legend, field, field))); });
y2AxisToolTip = lodash_1.default.map(y2AxisFields, function (field, index) {
return !lodash_1.default.isNil(lodash_1.default.get(xPointMap, mouseX + '.y.' + field)) ? (react_1.default.createElement(Legend_1.default.Item, { key: index, hasPoint: y2AxisHasPointsFinal_1, hasLine: y2AxisHasLinesFinal_1, color: lodash_1.default.get(colorMap, field, palette[y2AxisColorOffset +
index +
(yAxisFields.length % palette.length)]), pointKind: y2AxisHasPoints
? y2AxisColorOffset + index + yAxisFields.length
: 1 }, yAxisTooltipFormatter(lodash_1.default.get(legend, field, field), y2FinalFormatter_1(lodash_1.default.get(xPointMap, mouseX + '.y.' + field)), lodash_1.default.get(xPointMap, mouseX + '.y.' + field)))) : null;
});
}
if (lodash_1.default.isEmpty(data) || width < 1 || height < 1 || isLoading) {
var emptyStateWrapper = component_types_1.getFirst(this.props, LineChart.EmptyStateWrapper) || react_1.default.createElement(LineChart.EmptyStateWrapper, { Title: 'You have no data.' });
var emptyStateWrapperProps = lodash_1.default.get(emptyStateWrapper, 'props', {});
var emptyStateWrapperChildren = lodash_1.default.get(emptyStateWrapperProps, 'children', []);
return (react_1.default.createElement(EmptyStateWrapper_1.default, __assign({}, emptyStateWrapperProps, { isEmpty: lodash_1.default.isEmpty(data), isLoading: isLoading }),
emptyStateWrapperChildren,
react_1.default.createElement("svg", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(LineChart.propTypes)), { className: svgClasses, width: width, height: height }),
react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement(Axis_1.default, { orient: 'left', scale: yScale, tickFormat: yAxisFormatter })),
react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + (innerHeight + margin.top) + ")" },
react_1.default.createElement(Axis_1.default, { orient: 'bottom', scale: xScale, tickFormat: xFinalFormatter })))));
}
return (react_1.default.createElement("svg", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(LineChart.propTypes)), { className: svgClasses, width: width, height: height }),
react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" }, hasToolTips && isHovering && !lodash_1.default.isNil(mouseX) ? (react_1.default.createElement(ToolTip_1.ToolTipDumb, { isLight: true, isExpanded: true, flyOutMaxWidth: 'none', alignment: mouseX < innerWidth * 0.15
? 'start'
: mouseX > innerWidth * 0.85
? 'end'
: 'center' },
react_1.default.createElement(ToolTip_1.ToolTipDumb.Target, { elementType: 'g' },
react_1.default.createElement("path", { className: cx('&-tooltip-line'), d: "M" + mouseX + ",0 L" + mouseX + "," + innerHeight })),
react_1.default.createElement(ToolTip_1.ToolTipDumb.Title, null, xAxisTooltipFormatter(lodash_1.default.get(xPointMap, mouseX + ".x"))),
react_1.default.createElement(ToolTip_1.ToolTipDumb.Body, null,
react_1.default.createElement(Legend_1.default, { hasBorders: false, isReversed: yAxisIsStacked },
lodash_1.default.map(yAxisFields, function (field, index) {
return !lodash_1.default.isNil(lodash_1.default.get(xPointMap, mouseX + '.y.' + field)) ? (react_1.default.createElement(Legend_1.default.Item, { key: index, hasPoint: yAxisHasPointsFinal, hasLine: yAxisHasLinesFinal, color: lodash_1.default.get(colorMap, field, palette[(index + yAxisColorOffset) % palette.length]), pointKind: yAxisHasPoints ? index + yAxisColorOffset : 1 }, yAxisTooltipFormatter(lodash_1.default.get(legend, field, field), yFinalFormatter(lodash_1.default.get(xPointMap, mouseX + '.y.' + field)), lodash_1.default.get(xPointMap, mouseX + '.y.' + field)))) : null;
}),
y2AxisToolTip)))) : null),
react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + (innerHeight + margin.top) + ")" },
react_1.default.createElement(Axis_1.default, { orient: 'bottom', scale: xScale, outerTickSize: 0, tickFormat: xFinalFormatter, tickCount: xAxisTickCount, ticks: xAxisTicks, textOrientation: xAxisTextOrientation }),
hasLegend ? (react_1.default.createElement(ContextMenu_1.default, { direction: 'down', alignment: 'center', directonOffset: (margin.bottom / 2 + Legend_1.default.HEIGHT / 2) *
-1 /* should center the legend in the bottom margin */ },
react_1.default.createElement(ContextMenu_1.default.Target, { elementType: 'g' },
react_1.default.createElement("rect", { className: cx('&-invisible'), width: innerWidth, height: margin.bottom })),
react_1.default.createElement(ContextMenu_1.default.FlyOut, { className: cx('&-legend-container') },
react_1.default.createElement(Legend_1.default, { orient: 'horizontal' },
lodash_1.default.map(yAxisFields, function (field, index) { return (react_1.default.createElement(Legend_1.default.Item, { key: index, hasPoint: yAxisHasPointsFinal, hasLine: yAxisHasLinesFinal, color: lodash_1.default.get(colorMap, field, palette[index + (yAxisColorOffset % palette.length)]), pointKind: yAxisHasPoints ? index + yAxisColorOffset : 1 }, lodash_1.default.get(legend, field, field))); }),
y2AxisLegend)))) : null),
xAxisTitle ? (react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + (margin.top + innerHeight) + ")" },
react_1.default.createElement(AxisLabel_1.default, { orient: 'bottom', width: innerWidth, height: margin.bottom, label: xAxisTitle, color: lodash_1.default.isString(xAxisTitleColor)
? xAxisTitleColor
: palette[xAxisTitleColor % palette.length] }))) : null,
react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement(Axis_1.default, { orient: 'left', scale: yScale, tickFormat: yAxisFinalFormatter, tickCount: yAxisTickCount, textOrientation: yAxisTextOrientation })),
yAxisTitle ? (react_1.default.createElement("g", { transform: "translate(0, " + margin.top + ")" },
react_1.default.createElement(AxisLabel_1.default, { orient: 'left', width: margin.left, height: innerHeight, label: yAxisTitle, color: lodash_1.default.isString(yAxisTitleColor)
? yAxisTitleColor
: palette[yAxisTitleColor % palette.length] }))) : null,
lodash_1.default.get(y2Axis, 'axis', null),
lodash_1.default.get(y2Axis, 'title', null),
react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement(Lines_1.default, { xScale: xScale, yScale: yScale, xField: xAxisField, yFields: yAxisFields, yStackedMax: yAxisMax, data: data || {}, isStacked: yAxisIsStacked, colorMap: colorMap, palette: palette, colorOffset: yAxisColorOffset })),
yAxisHasPoints ? (react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement(Points_1.default, { xScale: xScale, yScale: yScale, xField: xAxisField, yFields: yAxisFields, yStackedMax: yAxisMax, data: data, isStacked: yAxisIsStacked, colorMap: colorMap, palette: palette, colorOffset: yAxisColorOffset }))) : null,
lodash_1.default.get(y2Axis, 'lines', null),
lodash_1.default.get(y2Axis, 'points', null),
hasToolTips ? (react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement("rect", { className: cx('&-invisible'), width: innerWidth, height: innerHeight, onMouseMove: function (event) {
_this.handleToolTipHoverZone(event, xPoints);
}, onMouseOut: function () {
_this.setState({ isHovering: false });
} }))) : null));
};
LineChart.displayName = 'LineChart';
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'],
};
LineChart.MARGIN = {
top: 10,
right: 80,
bottom: 65,
left: 80,
};
LineChart.propTypes = {
className: string(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t"], ["\n\t\t\tAppended to the component-specific class names set on the root element.\n\t\t"]))),
height: number(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tHeight of the chart.\n\t\t"], ["\n\t\t\tHeight of the chart.\n\t\t"]))),
width: number(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\tWidth of the chart.\n\t\t"], ["\n\t\t\tWidth of the chart.\n\t\t"]))),
margin: shape({
top: number,
right: number,
bottom: number,
left: number,
})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\tAn object defining the margins of the chart. These margins will contain\n\t\t\tthe axis and labels.\n\t\t"], ["\n\t\t\tAn object defining the margins of the chart. These margins will contain\n\t\t\tthe axis and labels.\n\t\t"]))),
data: arrayOf(object)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\tData for the chart. E.g.\n\t\n\t\t\t\t[\n\t\t\t\t\t{ x: new Date('2015-01-01') , y: 1 } ,\n\t\t\t\t\t{ x: new Date('2015-01-02') , y: 2 } ,\n\t\t\t\t\t{ x: new Date('2015-01-03') , y: 3 } ,\n\t\t\t\t\t{ x: new Date('2015-01-04') , y: 2 } ,\n\t\t\t\t\t{ x: new Date('2015-01-05') , y: 5 } ,\n\t\t\t\t]\n\t\t"], ["\n\t\t\tData for the chart. E.g.\n\t\n\t\t\t\t[\n\t\t\t\t\t{ x: new Date('2015-01-01') , y: 1 } ,\n\t\t\t\t\t{ x: new Date('2015-01-02') , y: 2 } ,\n\t\t\t\t\t{ x: new Date('2015-01-03') , y: 3 } ,\n\t\t\t\t\t{ x: new Date('2015-01-04') , y: 2 } ,\n\t\t\t\t\t{ x: new Date('2015-01-05') , y: 5 } ,\n\t\t\t\t]\n\t\t"]))),
legend: object(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\tAn object with human readable names for fields that will be used for\n\t\t\tlegends and tooltips. E.g:\n\t\n\t\t\t\t{\n\t\t\t\t\tx: 'Date',\n\t\t\t\t\ty: 'Impressions',\n\t\t\t\t}\n\t\t"], ["\n\t\t\tAn object with human readable names for fields that will be used for\n\t\t\tlegends and tooltips. E.g:\n\t\n\t\t\t\t{\n\t\t\t\t\tx: 'Date',\n\t\t\t\t\ty: 'Impressions',\n\t\t\t\t}\n\t\t"]))),
isLoading: bool(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\tControls the visibility of the `LoadingMessage`.\n\t\t"], ["\n\t\t\tControls the visibility of the \\`LoadingMessage\\`.\n\t\t"]))),
hasToolTips: bool(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tShow tool tips on hover.\n\t\t"], ["\n\t\t\tShow tool tips on hover.\n\t\t"]))),
hasLegend: bool(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\t\tShow a legend at the bottom of the chart.\n\t\t"], ["\n\t\t\tShow a legend at the bottom of the chart.\n\t\t"]))),
palette: arrayOf(string)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n\t\t\tTakes one of the palettes exported from `lucid.chartConstants`.\n\t\t\tAvailable palettes:\n\t\n\t\t\t- `PALETTE_7` (default)\n\t\t\t- `PALETTE_30`\n\t\t\t- `PALETTE_MONOCHROME_0_5`\n\t\t\t- `PALETTE_MONOCHROME_1_5`\n\t\t\t- `PALETTE_MONOCHROME_2_5`\n\t\t\t- `PALETTE_MONOCHROME_3_5`\n\t\t\t- `PALETTE_MONOCHROME_4_5`\n\t\t\t- `PALETTE_MONOCHROME_5_5`\n\t\t\t- `PALETTE_MONOCHROME_6_5`\n\t\t"], ["\n\t\t\tTakes one of the palettes exported from \\`lucid.chartConstants\\`.\n\t\t\tAvailable palettes:\n\t\n\t\t\t- \\`PALETTE_7\\` (default)\n\t\t\t- \\`PALETTE_30\\`\n\t\t\t- \\`PALETTE_MONOCHROME_0_5\\`\n\t\t\t- \\`PALETTE_MONOCHROME_1_5\\`\n\t\t\t- \\`PALETTE_MONOCHROME_2_5\\`\n\t\t\t- \\`PALETTE_MONOCHROME_3_5\\`\n\t\t\t- \\`PALETTE_MONOCHROME_4_5\\`\n\t\t\t- \\`PALETTE_MONOCHROME_5_5\\`\n\t\t\t- \\`PALETTE_MONOCHROME_6_5\\`\n\t\t"]))),
colorMap: object(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tYou can pass in an object if you want to map fields to\n\t\t\t`lucid.chartConstants` or custom colors:\n\t\n\t\t\t\t{\n\t\t\t\t\t'imps': COLOR_0,\n\t\t\t\t\t'rev': COLOR_3,\n\t\t\t\t\t'clicks': '#abc123',\n\t\t\t\t}\n\t\t"], ["\n\t\t\tYou can pass in an object if you want to map fields to\n\t\t\t\\`lucid.chartConstants\\` or custom colors:\n\t\n\t\t\t\t{\n\t\t\t\t\t'imps': COLOR_0,\n\t\t\t\t\t'rev': COLOR_3,\n\t\t\t\t\t'clicks': '#abc123',\n\t\t\t\t}\n\t\t"]))),
xAxisField: string(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tThe field we should look up your x data by. The data must be valid\n\t\t\tjavascript dates.\n\t\t"], ["\n\t\t\tThe field we should look up your x data by. The data must be valid\n\t\t\tjavascript dates.\n\t\t"]))),
xAxisMin: instanceOf(Date)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\t\t\tThe minimum date the x axis should display. Typically this will be the\n\t\t\tsmallest items from your dataset.\n\t\t"], ["\n\t\t\tThe minimum date the x axis should display. Typically this will be the\n\t\t\tsmallest items from your dataset.\n\t\t"]))),
xAxisMax: instanceOf(Date)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\t\tThe maximum date the x axis should display. This should almost always be\n\t\t\tthe largest date from your dataset.\n\t\t"], ["\n\t\t\tThe maximum date the x axis should display. This should almost always be\n\t\t\tthe largest date from your dataset.\n\t\t"]))),
xAxisFormatter: func(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n\t\t\tAn optional function used to format your x axis data. If you don't\n\t\t\tprovide anything, we use the default D3 date variable formatter.\n\t\t"], ["\n\t\t\tAn optional function used to format your x axis data. If you don't\n\t\t\tprovide anything, we use the default D3 date variable formatter.\n\t\t"]))),
xAxisTooltipFormatter: func(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n\t\t\tAn optional function used to format your x axis dates in the tooltips.\n\t\t"], ["\n\t\t\tAn optional function used to format your x axis dates in the tooltips.\n\t\t"]))),
xAxisTickCount: number(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n\t\t\tThere are some cases where you need to only show a \"sampling\" of ticks on\n\t\t\tthe x axis. This number will control that.\n\t\t"], ["\n\t\t\tThere are some cases where you need to only show a \"sampling\" of ticks on\n\t\t\tthe x axis. This number will control that.\n\t\t"]))),
xAxisTicks: arrayOf(instanceOf(Date))(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n\t\t\tIn some cases xAxisTickCount is not enough and you want to specify\n\t\t\texactly where the tick marks should appear on the x axis. This prop takes\n\t\t\tan array of dates (currently only dates are supported for the x axis).\n\t\t\tThis prop will override the `xAxisTickCount` prop.\n\t\t"], ["\n\t\t\tIn some cases xAxisTickCount is not enough and you want to specify\n\t\t\texactly where the tick marks should appear on the x axis. This prop takes\n\t\t\tan array of dates (currently only dates are supported for the x axis).\n\t\t\tThis prop will override the \\`xAxisTickCount\\` prop.\n\t\t"]))),
xAxisTitle: string(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n\t\t\tSet a title for the x axis.\n\t\t"], ["\n\t\t\tSet a title for the x axis.\n\t\t"]))),
xAxisTitleColor: oneOfType([number, string])(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\t\t\tSet a color for the x axis title. Use the color constants exported off\n\t\t\t`lucid.chartConstants`. E.g.:\n\t\n\t\t\t- `COLOR_0`\n\t\t\t- `COLOR_GOOD`\n\t\t\t- `'#123abc'` // custom color hex\n\t\n\t\t\t`number` is supported only for backwards compatability.\n\t\t"], ["\n\t\t\tSet a color for the x axis title. Use the color constants exported off\n\t\t\t\\`lucid.chartConstants\\`. E.g.:\n\t\n\t\t\t- \\`COLOR_0\\`\n\t\t\t- \\`COLOR_GOOD\\`\n\t\t\t- \\`'#123abc'\\` // custom color hex\n\t\n\t\t\t\\`number\\` is supported only for backwards compatability.\n\t\t"]))),
xAxisTextOrientation: oneOf(['vertical', 'horizontal', 'diagonal'])(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n\t\t\tDetermines the orientation of the tick text. This may override what the orient prop\n\t\t\ttries to determine.\n\t\t"], ["\n\t\t\tDetermines the orientation of the tick text. This may override what the orient prop\n\t\t\ttries to determine.\n\t\t"]))),
yAxisFields: arrayOf(string)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n\t\t\tAn array of your y axis fields. Typically this will just be a single item\n\t\t\tunless you need to display multiple lines. The order of the array\n\t\t\tdetermines the series order in the chart.\n\t\t"], ["\n\t\t\tAn array of your y axis fields. Typically this will just be a single item\n\t\t\tunless you need to display multiple lines. The order of the array\n\t\t\tdetermines the series order in the chart.\n\t\t"]))),
yAxisMin: number(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n\t\t\tThe minimum number the y axis should display. Typically this should be\n\t\t\t`0`.\n\t\t"], ["\n\t\t\tThe minimum number the y axis should display. Typically this should be\n\t\t\t\\`0\\`.\n\t\t"]))),
yAxisMax: number(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n\t\t\tThe maximum number the y axis should display. This should almost always\n\t\t\tbe the largest number from your dataset.\n\t\t"], ["\n\t\t\tThe maximum number the y axis should display. This should almost always\n\t\t\tbe the largest number from your dataset.\n\t\t"]))),
yAxisFormatter: func(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n\t\t\tAn optional function used to format your y axis data. If you don't\n\t\t\tprovide anything, we use the default D3 formatter.\n\t\t"], ["\n\t\t\tAn optional function used to format your y axis data. If you don't\n\t\t\tprovide anything, we use the default D3 formatter.\n\t\t"]))),
yAxisIsStacked: bool(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n\t\t\tStack the y axis data. This is only useful if you have multiple\n\t\t\t`yAxisFields`. Stacking will cause the chart to be aggregated by sum.\n\t\t"], ["\n\t\t\tStack the y axis data. This is only useful if you have multiple\n\t\t\t\\`yAxisFields\\`. Stacking will cause the chart to be aggregated by sum.\n\t\t"]))),
yAxisHasPoints: bool(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n\t\t\tDisplay points along with the y axis lines.\n\t\t"], ["\n\t\t\tDisplay points along with the y axis lines.\n\t\t"]))),
yAxisTickCount: number(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n\t\t\tThere are some cases where you need to only show a \"sampling\" of ticks on\n\t\t\tthe y axis. This number will control that.\n\t\t"], ["\n\t\t\tThere are some cases where you need to only show a \"sampling\" of ticks on\n\t\t\tthe y axis. This number will control that.\n\t\t"]))),
yAxisTitle: string(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n\t\t\tSet a title for the y axis.\n\t\t"], ["\n\t\t\tSet a title for the y axis.\n\t\t"]))),
yAxisTitleColor: oneOfType([number, string])(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n\t\t\tSet a color for the y axis title. Use the color constants exported off\n\t\t\t`lucid.chartConstants`. E.g.:\n\t\n\t\t\t- `COLOR_0`\n\t\t\t- `COLOR_GOOD`\n\t\t\t- `'#123abc'` // custom color hex\n\t\n\t\t\t`number` is supported only for backwards compatability.\n\t\t"], ["\n\t\t\tSet a color for the y axis title. Use the color constants exported off\n\t\t\t\\`lucid.chartConstants\\`. E.g.:\n\t\n\t\t\t- \\`COLOR_0\\`\n\t\t\t- \\`COLOR_GOOD\\`\n\t\t\t- \\`'#123abc'\\` // custom color hex\n\t\n\t\t\t\\`number\\` is supported only for backwards compatability.\n\t\t"]))),
yAxisTooltipFormatter: func(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n\t\t\tAn optional function used to format your y axis titles and data in the\n\t\t\ttooltips. The first value is the name of your y field, the second value\n\t\t\tis your post-formatted y value, and the third value is your non-formatted\n\t\t\ty-value. Signature: `(yField, yValueFormatted, yValue) => {}`\n\t\t"], ["\n\t\t\tAn optional function used to format your y axis titles and data in the\n\t\t\ttooltips. The first value is the name of your y field, the second value\n\t\t\tis your post-formatted y value, and the third value is your non-formatted\n\t\t\ty-value. Signature: \\`(yField, yValueFormatted, yValue) => {}\\`\n\t\t"]))),
yAxisTooltipDataFormatter: func(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n\t\t\tAn optional function used to format data in the tooltips.\n\t\t"], ["\n\t\t\tAn optional function used to format data in the tooltips.\n\t\t"]))),
yAxisColorOffset: number(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n\t\t\tSet the starting index where colors start rotating for points and lines\n\t\t\talong the y axis.\n\t\t"], ["\n\t\t\tSet the starting index where colors start rotating for points and lines\n\t\t\talong the y axis.\n\t\t"]))),
y2AxisFields: arrayOf(string)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n\t\t\tAn array of your y2 axis fields. Typically this will just be a single\n\t\t\titem unless you need to display multiple lines. The order of the array\n\t\t\tdetermines the series order in the chart.\n\t\t"], ["\n\t\t\tAn array of your y2 axis fields. Typically this will just be a single\n\t\t\titem unless you need to display multiple lines. The order of the array\n\t\t\tdetermines the series order in the chart.\n\t\t"]))),
y2AxisMin: number(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n\t\t\tThe minimum number the y2 axis should display. Typically this should be\n\t\t\t`0`.\n\t\t"], ["\n\t\t\tThe minimum number the y2 axis should display. Typically this should be\n\t\t\t\\`0\\`.\n\t\t"]))),
y2AxisMax: number(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n\t\t\tThe maximum number the y2 axis should display. This should almost always\n\t\t\tbe the largest number from your dataset.\n\t\t"], ["\n\t\t\tThe maximum number the y2 axis should display. This should almost always\n\t\t\tbe the largest number from your dataset.\n\t\t"]))),
y2AxisFormatter: func(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n\t\t\tAn optional function used to format your y2 axis data. If you don't\n\t\t\tprovide anything, we use the default D3 formatter.\n\t\t"], ["\n\t\t\tAn optional function used to format your y2 axis data. If you don't\n\t\t\tprovide anything, we use the default D3 formatter.\n\t\t"]))),
y2AxisTooltipDataFormatter: func(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n\t\t\tAn optional function used to format data in the tooltips.\n\t\t"], ["\n\t\t\tAn optional function used to format data in the tooltips.\n\t\t"]))),
y2AxisIsStacked: bool(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n\t\t\tStack the y2 axis data. This is only useful if you have multiple\n\t\t\t`y2AxisFields`. Stacking will cause the chart to be aggregated by sum.\n\t\t"], ["\n\t\t\tStack the y2 axis data. This is only useful if you have multiple\n\t\t\t\\`y2AxisFields\\`. Stacking will cause the chart to be aggregated by sum.\n\t\t"]))),
y2AxisHasPoints: bool(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n\t\t\tDisplay points along with the y2 axis lines.\n\t\t"], ["\n\t\t\tDisplay points along with the y2 axis lines.\n\t\t"]))),
y2AxisTickCount: number(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n\t\t\tThere are some cases where you need to only show a \"sampling\" of ticks on\n\t\t\tthe y2 axis. This number will control that.\n\t\t"], ["\n\t\t\tThere are some cases where you need to only show a \"sampling\" of ticks on\n\t\t\tthe y2 axis. This number will control that.\n\t\t"]))),
y2AxisTitle: string(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n\t\t\tSet a title for the y2 axis.\n\t\t"], ["\n\t\t\tSet a title for the y2 axis.\n\t\t"]))),
y2AxisTitleColor: oneOfType([number, string])(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n\t\t\tSet a color for the y2 axis title. Use the color constants exported off\n\t\t\t`lucid.chartConstants`. E.g.:\n\t\n\t\t\t- `COLOR_0`\n\t\t\t- `COLOR_GOOD`\n\t\t\t- `'#123abc'` // custom color hex\n\t\n\t\t\t`number` is supported only for backwards compatability.\n\t\t"], ["\n\t\t\tSet a color for the y2 axis title. Use the color constants exported off\n\t\t\t\\`lucid.chartConstants\\`. E.g.:\n\t\n\t\t\t- \\`COLOR_0\\`\n\t\t\t- \\`COLOR_GOOD\\`\n\t\t\t- \\`'#123abc'\\` // custom color hex\n\t\n\t\t\t\\`number\\` is supported only for backwards compatability.\n\t\t"]))),
y2AxisColorOffset: number(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n\t\t\tSet the starting index where colors start rotating for points and lines\n\t\t\talong the y2 axis.\n\t\t"], ["\n\t\t\tSet the starting index where colors start rotating for points and lines\n\t\t\talong the y2 axis.\n\t\t"]))),
yAxisTextOrientation: oneOf(['vertical', 'horizontal', 'diagonal'])(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n\t\t\tDetermines the orientation of the tick text. This may override what the orient prop\n\t\t\ttries to determine.\n\t\t"], ["\n\t\t\tDetermines the orientation of the tick text. This may override what the orient prop\n\t\t\ttries to determine.\n\t\t"]))),
};
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: chart_helpers_1.formatDate,
// E.g. "Mon 06/06/2016 15:46:19"
xAxisTooltipFormatter: d3TimeFormat.timeFormat('%a %x %X'),
xAxisTickCount: null,
xAxisTicks: undefined,
xAxisTitle: null,
xAxisTitleColor: '#000',
xAxisTextOrientation: 'horizontal',
yAxisFields: ['y'],
yAxisMin: 0,
yAxisIsStacked: false,
yAxisHasPoints: true,
yAxisTickCount: null,
yAxisTitle: null,
yAxisTitleColor: '#000',
yAxisTooltipFormatter: function (yField, yValueFormatted) {
return yField + ": " + yValueFormatted;
},
yAxisColorOffset: 0,
y2AxisFields: [],
y2AxisMin: 0,
y2AxisIsStacked: false,
y2AxisHasPoints: true,
y2AxisTickCount: null,
y2AxisTitle: null,
y2AxisTitleColor: '#000',
y2AxisColorOffset: 1,
yAxisTextOrientation: 'horizontal',
};
LineChart.EmptyStateWrapper = EmptyStateWrapper_1.default;
return LineChart;
}(react_1.default.Component));
exports.default = LineChart;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45;
//# sourceMappingURL=LineChart.js.map