UNPKG

lucid-ui

Version:

A UI component library from AppNexus.

github.com/appnexus/lucid

appnexus/lucid

107 lines • 4.7 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import _map from "lodash/map"; import React from 'react'; import createClass from 'create-react-class'; import { Legend, ToolTip, chartConstants } from '../../../index'; var Item = Legend.Item; export default createClass({ render: function render() { return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Legend, null, _map(chartConstants.PALETTE_7, function (color, i) { return /*#__PURE__*/React.createElement(Item, { key: color, hasPoint: true, color: color }, "Partner ".concat(i)); })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Legend, null, _map(chartConstants.PALETTE_7, function (color, i) { return /*#__PURE__*/React.createElement(Item, { key: color, hasPoint: true, pointKind: i, color: color }, "Partner ".concat(i)); })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Legend, null, _map(chartConstants.PALETTE_7, function (color, i) { return /*#__PURE__*/React.createElement(Item, { key: color, hasLine: true, color: color }, "Partner ".concat(i)); })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Legend, null, _map(chartConstants.PALETTE_7, function (color, i) { return /*#__PURE__*/React.createElement(Item, { key: color, hasPoint: true, hasLine: true, pointKind: i, color: color }, "Partner ".concat(i)); })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Legend, { isReversed: true }, _map(chartConstants.PALETTE_7, function (color, i) { return /*#__PURE__*/React.createElement(Item, { key: color, hasPoint: true, hasLine: true, pointKind: i, color: color }, "Partner ".concat(i)); })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Legend, { orient: "horizontal" }, /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Legend, { orient: "horizontal", isReversed: true }, /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Legend, null, /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ToolTip, { isExpanded: true, direction: "right", alignment: "end", isLight: true }, /*#__PURE__*/React.createElement(ToolTip.Target, null, "Tooltip example"), /*#__PURE__*/React.createElement(ToolTip.Body, null, /*#__PURE__*/React.createElement(Legend, { hasBorders: false }, /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"), /*#__PURE__*/React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"), /*#__PURE__*/React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1"))))); } });