lucid-ui
Version:
A UI component library from AppNexus.
197 lines • 16.9 kB
JavaScript
"use strict";
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 });
exports.PieChartDumb = void 0;
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 d3Shape = __importStar(require("d3-shape"));
var chartConstants = __importStar(require("../../constants/charts"));
var state_management_1 = require("../../util/state-management");
var Line_1 = __importDefault(require("../../components/Line/Line"));
var ToolTip_1 = require("../../components/ToolTip/ToolTip");
var PieChart_reducers_1 = __importDefault(require("./PieChart.reducers"));
var cx = style_helpers_1.lucidClassNames.bind('&-PieChart');
var string = prop_types_1.default.string, number = prop_types_1.default.number, arrayOf = prop_types_1.default.arrayOf, bool = prop_types_1.default.bool, shape = prop_types_1.default.shape, object = prop_types_1.default.object, func = prop_types_1.default.func;
var DONUT_WIDTH = 15;
var HOVER_SCALE = 1.1; // duplicated in .less file
var INNER_RADIUS = 0.5;
var defaultProps = {
height: 200,
width: 200,
// duplicated because `statics` aren't available during getDefaultProps
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10,
},
palette: chartConstants.PALETTE_7,
hasToolTips: true,
hasStroke: true,
isDonut: false,
donutWidth: DONUT_WIDTH,
ToolTip: ToolTip_1.ToolTipDumb.defaultProps,
isHovering: false,
hoveringIndex: 0,
onMouseOver: lodash_1.default.noop,
onMouseOut: lodash_1.default.noop,
xAxisField: 'x',
xAxisFormatter: lodash_1.default.identity,
yAxisField: 'y',
yAxisFormatter: lodash_1.default.identity,
};
var PieChart = function (props) {
var style = props.style, className = props.className, height = props.height, width = props.width, marginOriginal = props.margin, data = props.data, hasToolTips = props.hasToolTips, hasStroke = props.hasStroke, palette = props.palette, colorMap = props.colorMap, isDonut = props.isDonut, donutWidth = props.donutWidth, toolTipProps = props.ToolTip, isHovering = props.isHovering, hoveringIndex = props.hoveringIndex, xAxisField = props.xAxisField, xAxisFormatter = props.xAxisFormatter, yAxisField = props.yAxisField, yAxisFormatter = props.yAxisFormatter, passThroughs = __rest(props, ["style", "className", "height", "width", "margin", "data", "hasToolTips", "hasStroke", "palette", "colorMap", "isDonut", "donutWidth", "ToolTip", "isHovering", "hoveringIndex", "xAxisField", "xAxisFormatter", "yAxisField", "yAxisFormatter"]);
var margin = __assign(__assign({}, PieChart.MARGIN), marginOriginal);
var svgClasses = cx(className, '&');
var pieChartProps = component_types_1.omitProps(component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(ToolTip_1.ToolTipDumb.propTypes)), undefined, lodash_1.default.keys(PieChart.propTypes));
// TODO: Consider displaying something specific when there is no data,
// perhaps a loading indicator.
if (lodash_1.default.isEmpty(data) || width < 1 || height < 1) {
return (react_1.default.createElement("svg", __assign({}, pieChartProps, { style: style, className: svgClasses, width: width, height: height })));
}
var innerWidth = width - margin.left - margin.right;
var innerHeight = height - margin.top - margin.bottom;
var outerRadius = Math.min(innerWidth, innerHeight) / 2;
var pie = d3Shape.pie().sort(null); // needed to put the slices in proper order
var pieData = pie(lodash_1.default.map(data, yAxisField));
var arc = d3Shape
.arc()
.innerRadius(isDonut ? outerRadius - donutWidth : INNER_RADIUS)
.outerRadius(outerRadius);
// Useful for capturing hovers when we're in donut mode
var arcFull = d3Shape.arc().innerRadius(0).outerRadius(outerRadius);
var handleMouseOut = function (_a) {
var event = _a.event;
props.onMouseOut({
props: props,
event: event,
});
};
var handleMouseOver = function (index, event) {
props.onMouseOver(index, {
props: props,
event: event,
});
};
return (react_1.default.createElement("svg", __assign({}, pieChartProps, { style: style, className: svgClasses, width: width, height: height }),
react_1.default.createElement(ToolTip_1.ToolTipDumb, __assign({}, toolTipProps, { isLight: true, isExpanded: hasToolTips && isHovering, onMouseOver: lodash_1.default.noop, onMouseOut: handleMouseOut }),
react_1.default.createElement(ToolTip_1.ToolTipDumb.Target, { elementType: 'g' },
react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + margin.top + ")" },
react_1.default.createElement("g", { transform: "translate(" + innerWidth / 2 + ", " + innerHeight / 2 + ")" }, lodash_1.default.map(pieData, function (pieDatum, index) {
/* Even though innerRadius and outerRadius are set when
constructing arc and arcFull, these functions still expect a type
that includes innerRadius and outerRadius */
//@ts-ignore
var arcFullData = arcFull(pieDatum);
//@ts-ignore
var arcData = arc(pieDatum);
return (react_1.default.createElement("g", { key: index, className: cx('&-slice-group', {
'&-slice-group-is-hovering': isHovering && hoveringIndex === index,
}) },
react_1.default.createElement(Line_1.default, { key: index, className: cx('&-slice', {
'&-slice-has-stroke': hasStroke,
}), d: arcData, color: lodash_1.default.get(colorMap, (data && data[index][xAxisField]) || '', palette[index % palette.length]), transform: "scale(" + (isHovering && hoveringIndex === index ? HOVER_SCALE : 1) + ")" }),
react_1.default.createElement("path", { className: cx('&-slice-hover'), d: arcFullData, transform: "scale(" + HOVER_SCALE + ")", onMouseOver: lodash_1.default.partial(handleMouseOver, index), onMouseOut: hasToolTips ? lodash_1.default.noop : handleMouseOut })));
})))),
react_1.default.createElement(ToolTip_1.ToolTipDumb.Title, null, xAxisFormatter(lodash_1.default.get(data, "[" + hoveringIndex + "]." + xAxisField))),
react_1.default.createElement(ToolTip_1.ToolTipDumb.Body, null, yAxisFormatter(lodash_1.default.get(data, "[" + hoveringIndex + "]." + yAxisField))))));
};
exports.PieChartDumb = PieChart;
PieChart.displayName = 'PieChart';
PieChart.propTypes = {
style: object(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\tStyles that are passed through to the root container.\n\t\t"], ["\n\t\t\tStyles that are passed through to the root container.\n\t\t"]))),
className: string(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\tHeight of the chart.\n\t\t"], ["\n\t\t\tHeight of the chart.\n\t\t"]))),
width: number(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\tAn object defining the margins of the chart. These margins typically\n\t\t\tcontain the axis and labels.\n\t\t"], ["\n\t\t\tAn object defining the margins of the chart. These margins typically\n\t\t\tcontain the axis and labels.\n\t\t"]))),
data: arrayOf(object)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\tData for the chart. E.g.\n\n\t\t\t\t[\n\t\t\t\t\t{ x: 'Monday' , y: 1 } ,\n\t\t\t\t\t{ x: 'Tuesday' , y: 2 } ,\n\t\t\t\t\t{ x: 'Wednesday' , y: 3 } ,\n\t\t\t\t\t{ x: 'Thursday' , y: 2 } ,\n\t\t\t\t\t{ x: 'Friday' , y: 5 } ,\n\t\t\t\t]\n\t\t"], ["\n\t\t\tData for the chart. E.g.\n\n\t\t\t\t[\n\t\t\t\t\t{ x: 'Monday' , y: 1 } ,\n\t\t\t\t\t{ x: 'Tuesday' , y: 2 } ,\n\t\t\t\t\t{ x: 'Wednesday' , y: 3 } ,\n\t\t\t\t\t{ x: 'Thursday' , y: 2 } ,\n\t\t\t\t\t{ x: 'Friday' , y: 5 } ,\n\t\t\t\t]\n\t\t"]))),
hasToolTips: bool(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\tShow tool tips on hover.\n\t\t"], ["\n\t\t\tShow tool tips on hover.\n\t\t"]))),
hasStroke: bool(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tDetermines if the pie slices have a stroke around them.\n\t\t"], ["\n\t\t\tDetermines if the pie slices have a stroke around them.\n\t\t"]))),
palette: arrayOf(string)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\t\tTakes one of the palettes exported from `lucid.chartConstants`.\n\t\t\tAvailable palettes:\n\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\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_10 || (templateObject_10 = __makeTemplateObject(["\n\t\t\tYou can pass in an object if you want to map x values to\n\t\t\t`lucid.chartConstants` or custom colors:\n\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 x values to\n\t\t\t\\`lucid.chartConstants\\` or custom colors:\n\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"]))),
ToolTip: shape(ToolTip_1.ToolTipDumb.propTypes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tAn object of ToolTip props that are passed through to the underlying\n\t\t\tToolTip component.\n\t\t"], ["\n\t\t\tAn object of ToolTip props that are passed through to the underlying\n\t\t\tToolTip component.\n\t\t"]))),
isDonut: bool(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tShow the pie chart as a donut with a hollow center.\n\t\t"], ["\n\t\t\tShow the pie chart as a donut with a hollow center.\n\t\t"]))),
isHovering: bool(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\t\t\tControls the visibility of the tooltip and the size of the currently\n\t\t\thovered slice.\n\t\t"], ["\n\t\t\tControls the visibility of the tooltip and the size of the currently\n\t\t\thovered slice.\n\t\t"]))),
hoveringIndex: number(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\t\tDetermines which slice to scale up and which data to display in he\n\t\t\ttooltip.\n\t\t"], ["\n\t\t\tDetermines which slice to scale up and which data to display in he\n\t\t\ttooltip.\n\t\t"]))),
onMouseOver: func(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n\t\t\tCalled when the user hovers over a slice. Signature:\n\t\t"], ["\n\t\t\tCalled when the user hovers over a slice. Signature:\n\t\t"]))),
onMouseOut: func(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n\t\t\tCalled when the user hovers away from either the pie or the tooltip.\n\t\t"], ["\n\t\t\tCalled when the user hovers away from either the pie or the tooltip.\n\t\t"]))),
donutWidth: number(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n\t\t\tWidth of the donut in px.\n\t\t"], ["\n\t\t\tWidth of the donut in px.\n\t\t"]))),
xAxisField: string(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n\t\t\tThe field we should look up your x data by. The data should be strings.\n\t\t"], ["\n\t\t\tThe field we should look up your x data by. The data should be strings.\n\t\t"]))),
xAxisFormatter: func(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n\t\t\tAn optional function used to format your x axis data.\n\t\t"], ["\n\t\t\tAn optional function used to format your x axis data.\n\t\t"]))),
yAxisField: string(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\t\t\tThe field we should look up your y data by. The data should be numeric.\n\t\t"], ["\n\t\t\tThe field we should look up your y data by. The data should be numeric.\n\t\t"]))),
yAxisFormatter: func(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n\t\t\tAn optional function used to format your y axis data.\n\t\t"], ["\n\t\t\tAn optional function used to format your y axis data.\n\t\t"]))),
};
PieChart.peek = {
description: "\n\t\t\t\t\tPie charts are used for categorical data when you want to show the\n\t\t\t\t\trelative size of each category to the whole. We use similar \"x\" and \"y\"\n\t\t\t\t\tterms to keep parity with the other charts even though pie charts are\n\t\t\t\t\treally just key value based.\n\t\t\t\t",
categories: ['visualizations', 'charts'],
madeFrom: ['ToolTip'],
};
PieChart.MARGIN = {
top: 10,
right: 10,
bottom: 10,
left: 10,
};
PieChart.DONUT_WIDTH = DONUT_WIDTH;
PieChart.HOVER_SCALE = HOVER_SCALE;
PieChart.reducers = PieChart_reducers_1.default;
PieChart.defaultProps = defaultProps;
exports.default = state_management_1.buildModernHybridComponent(PieChart, { reducers: PieChart_reducers_1.default });
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;
//# sourceMappingURL=PieChart.js.map