UNPKG

lucid-ui

Version:

A UI component library from AppNexus.

github.com/appnexus/lucid

appnexus/lucid

49 lines (48 loc) • 4.01 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import _ from 'lodash'; import React from 'react'; import createClass from 'create-react-class'; import { Legend, ToolTip, chartConstants } from '../../../index'; const { Item } = Legend; export default createClass({ render() { return (React.createElement("div", null, React.createElement(Legend, null, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, color: color }, `Partner ${i}`)))), React.createElement("br", null), React.createElement(Legend, null, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, pointKind: i, color: color }, `Partner ${i}`)))), React.createElement("br", null), React.createElement(Legend, null, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasLine: true, color: color }, `Partner ${i}`)))), React.createElement("br", null), React.createElement(Legend, null, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, hasLine: true, pointKind: i, color: color }, `Partner ${i}`)))), React.createElement("br", null), React.createElement(Legend, { isReversed: true }, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, hasLine: true, pointKind: i, color: color }, `Partner ${i}`)))), React.createElement("br", null), React.createElement(Legend, { orient: 'horizontal' }, React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")), React.createElement("br", null), React.createElement(Legend, { orient: 'horizontal', isReversed: true }, React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")), React.createElement("br", null), React.createElement(Legend, null, React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")), React.createElement("br", null), React.createElement("br", null), React.createElement("br", null), React.createElement(ToolTip, { isExpanded: true, direction: 'right', alignment: 'end', isLight: true }, React.createElement(ToolTip.Target, null, "Tooltip example"), React.createElement(ToolTip.Body, null, React.createElement(Legend, { hasBorders: false }, React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")))))); }, });