@pingux/astro 2.20.0-alpha.1 → 2.20.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/lib/cjs/recipes/RowLineChart.stories.js +0 -578
  3. package/lib/recipes/RowLineChart.stories.js +0 -565
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.20.0-alpha.1",
3
+ "version": "2.20.0-alpha.2",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",
package/lib/cjs/recipes/RowLineChart.stories.js DELETED
@@ -1,578 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
11
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
12
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
13
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
- _Object$defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- exports["default"] = exports.Default = void 0;
18
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
20
- var _react = _interopRequireWildcard(require("react"));
21
- var _reactAria = require("react-aria");
22
- var _addonActions = require("@storybook/addon-actions");
23
- var _recharts = require("recharts");
24
- var _useResizeObserver2 = _interopRequireDefault(require("use-resize-observer"));
25
- var _index = require("../index");
26
- var _colors = require("../styles/colors");
27
- var _react2 = require("@emotion/react");
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
30
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
31
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
32
- var _default = {
33
- title: 'Recipes/Row Line Chart',
34
- parameters: {
35
- chromatic: {
36
- diffThreshold: 0.9
37
- }
38
- }
39
- };
40
- exports["default"] = _default;
41
- var chartData = [{
42
- id: 1,
43
- emptyData: 0,
44
- fullData: 1
45
- }, {
46
- id: 2,
47
- emptyData: 0,
48
- fullData: 5
49
- }, {
50
- id: 3,
51
- emptyData: 0,
52
- fullData: 3
53
- }, {
54
- id: 4,
55
- emptyData: 0,
56
- fullData: 2
57
- }, {
58
- id: 5,
59
- emptyData: 0,
60
- fullData: 5
61
- }, {
62
- id: 6,
63
- emptyData: 0,
64
- fullData: 1
65
- }, {
66
- id: 7,
67
- emptyData: 0,
68
- fullData: 5
69
- }, {
70
- id: 8,
71
- emptyData: 0,
72
- fullData: 5
73
- }, {
74
- id: 9,
75
- emptyData: 0,
76
- fullData: 1
77
- }, {
78
- id: 10,
79
- emptyData: 0,
80
- fullData: 2
81
- }, {
82
- id: 11,
83
- emptyData: 0,
84
- fullData: 4
85
- }, {
86
- id: 12,
87
- emptyData: 0,
88
- fullData: 11
89
- }];
90
- var partialDataData = [{
91
- id: 1
92
- }, {
93
- id: 2
94
- }, {
95
- id: 3
96
- }, {
97
- id: 4
98
- }, {
99
- id: 5
100
- }, {
101
- id: 6
102
- }, {
103
- id: 7,
104
- value: 6
105
- }, {
106
- id: 8,
107
- value: 5
108
- }, {
109
- id: 9,
110
- value: 4
111
- }, {
112
- id: 10,
113
- value: 3
114
- }, {
115
- id: 11,
116
- value: 2
117
- }, {
118
- id: 12,
119
- value: 1
120
- }];
121
- var zeroValuesData = [{
122
- id: 1,
123
- value: 0
124
- }, {
125
- id: 2,
126
- value: 0
127
- }, {
128
- id: 3,
129
- value: 0
130
- }, {
131
- id: 4,
132
- value: 0
133
- }];
134
- var zeroData = [{
135
- id: 1
136
- }, {
137
- id: 2
138
- }, {
139
- id: 3
140
- }, {
141
- id: 4
142
- }, {
143
- id: 5
144
- }, {
145
- id: 6
146
- }, {
147
- id: 7
148
- }, {
149
- id: 8,
150
- value: 0
151
- }, {
152
- id: 9,
153
- value: 0
154
- }, {
155
- id: 10,
156
- value: 0
157
- }, {
158
- id: 11,
159
- value: 0
160
- }, {
161
- id: 12,
162
- value: 0
163
- }];
164
- var expandableRowSharedStyle = {
165
- textOverflow: 'ellipsis',
166
- overflow: 'hidden',
167
- whiteSpace: 'nowrap'
168
- };
169
- var alignCellRightWrapper = {
170
- display: 'flex',
171
- flexDirection: 'column',
172
- alignItems: 'flex-end'
173
- };
174
- var sx = {
175
- container: {
176
- backgroundColor: 'accent.99',
177
- alignItems: 'center',
178
- justifyContent: 'space-between',
179
- pr: '20px'
180
- },
181
- chartTitleContainer: {},
182
- chartContainer: {
183
- width: '100%',
184
- height: '100%'
185
- },
186
- chart: {
187
- width: '50',
188
- height: '18'
189
- },
190
- chartTrendContainer: {
191
- ml: 'md',
192
- width: '50px'
193
- },
194
- expandableRow: {
195
- titleWrapper: {
196
- maxWidth: '50%',
197
- p: 'md'
198
- },
199
- lineChart: {
200
- title: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
201
- ml: '20px',
202
- pr: 'md'
203
- }),
204
- content: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
205
- width: 100
206
- }),
207
- chart: {
208
- width: '50px',
209
- height: '18px'
210
- },
211
- chartWrapper: {
212
- '&:hover': {
213
- backgroundColor: '#4462ED1A'
214
- }
215
- },
216
- divider: {
217
- backgroundColor: 'neutral.80',
218
- height: '35px',
219
- width: '1px'
220
- }
221
- }
222
- },
223
- expandableRowButton: {
224
- chartWrapper: {
225
- display: 'flex',
226
- flexDirection: 'row',
227
- alignItems: 'center',
228
- color: 'black',
229
- background: 'none',
230
- cursor: 'pointer',
231
- height: 60,
232
- padding: 0,
233
- ml: 'md',
234
- pr: 'md',
235
- border: 'none',
236
- '&:hover': {
237
- backgroundColor: '#4462ED1A'
238
- }
239
- }
240
- },
241
- expandableRowText: {
242
- title: _objectSpread({
243
- fontSize: 'lg',
244
- color: 'neutral.20'
245
- }, expandableRowSharedStyle),
246
- subtitle: _objectSpread({
247
- fontSize: 'sm',
248
- color: 'neutral.60'
249
- }, expandableRowSharedStyle),
250
- lineChart: {
251
- title: _objectSpread({
252
- fontSize: 'sm',
253
- color: 'neutral.40',
254
- maxWidth: '100%'
255
- }, expandableRowSharedStyle),
256
- count: {
257
- color: 'neutral.20',
258
- fontSize: 22,
259
- fontWeight: 2
260
- },
261
- countLabel: {
262
- fontSize: 'xs',
263
- color: 'neutral.50'
264
- },
265
- chartLabel: {
266
- fontSize: 'xs',
267
- color: 'neutral.50',
268
- minWidth: '60px'
269
- },
270
- trend: {
271
- color: 'neutral.20',
272
- fontSize: 'sm',
273
- fontWeight: 3,
274
- whiteSpace: 'nowrap'
275
- }
276
- }
277
- }
278
- };
279
- var Default = function Default() {
280
- var _useResizeObserver = (0, _useResizeObserver2["default"])(),
281
- ref = _useResizeObserver.ref,
282
- width = _useResizeObserver.width;
283
- var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
284
- visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
285
- var isTablet = (0, _react.useMemo)(function () {
286
- return width <= 605;
287
- }, [width]);
288
- var isMobile = (0, _react.useMemo)(function () {
289
- return width <= 350;
290
- }, [width]);
291
- var hideIfTablet = (0, _react.useCallback)(function () {
292
- return isTablet && visuallyHiddenProps;
293
- }, [isTablet]);
294
- var hideIfMobile = (0, _react.useCallback)(function () {
295
- return isMobile && visuallyHiddenProps;
296
- }, [isMobile]);
297
- var EmptyData = (0, _react2.jsx)(_index.Box, {
298
- isRow: true,
299
- sx: sx.container,
300
- ref: ref
301
- }, (0, _react2.jsx)(_index.Box, {
302
- sx: sx.expandableRow.titleWrapper
303
- }, (0, _react2.jsx)(_index.Text, {
304
- sx: sx.expandableRowText.title
305
- }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
306
- sx: sx.expandableRowText.subtitle
307
- }, "Empty Data")), (0, _react2.jsx)(_index.Box, {
308
- isRow: true,
309
- alignItems: "center"
310
- }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
311
- sx: sx.expandableRow.lineChart.title
312
- }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
313
- sx: sx.expandableRowText.lineChart.title
314
- }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
315
- sx: sx.expandableRow.lineChart.content
316
- }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
317
- sx: sx.expandableRowText.lineChart.count
318
- }, "0"), (0, _react2.jsx)(_index.Text, {
319
- sx: sx.expandableRowText.lineChart.countLabel
320
- }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
321
- sx: sx.expandableRowButton.chartWrapper,
322
- onPress: (0, _addonActions.action)('seeContributingDataAction'),
323
- "aria-label": "line-chart button"
324
- }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
325
- sx: sx.expandableRow.lineChart.divider
326
- }), (0, _react2.jsx)(_index.Box, {
327
- ml: 15
328
- }, (0, _react2.jsx)(_index.Box, {
329
- sx: sx.expandableRow.lineChart.chart
330
- }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
331
- sx: sx.chartContainer
332
- }, (0, _react2.jsx)(_recharts.LineChart, {
333
- sx: sx.chart,
334
- data: chartData
335
- }, (0, _react2.jsx)(_recharts.Line, {
336
- type: "monotone",
337
- dataKey: "emptyData",
338
- dot: false,
339
- stroke: _colors.neutral[20]
340
- })))), (0, _react2.jsx)(_index.Text, {
341
- sx: sx.expandableRowText.lineChart.chartLabel
342
- }, "No data yet")), (0, _react2.jsx)(_index.Box, {
343
- size: "sm",
344
- sx: sx.chartTrendContainer
345
- }, (0, _react2.jsx)(_index.Text, {
346
- sx: sx.expandableRowText.lineChart.trend
347
- }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
348
- size: "sm"
349
- }, (0, _react2.jsx)(_index.SwitchField, {
350
- "aria-label": "line-chart switch-field"
351
- }))));
352
- var FullData = (0, _react2.jsx)(_index.Box, {
353
- isRow: true,
354
- sx: sx.container,
355
- mt: 20
356
- }, (0, _react2.jsx)(_index.Box, {
357
- sx: sx.expandableRow.titleWrapper
358
- }, (0, _react2.jsx)(_index.Text, {
359
- sx: sx.expandableRowText.title
360
- }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
361
- sx: sx.expandableRowText.subtitle
362
- }, "Full Data")), (0, _react2.jsx)(_index.Box, {
363
- isRow: true,
364
- alignItems: "center"
365
- }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
366
- sx: sx.expandableRow.lineChart.title
367
- }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
368
- sx: sx.expandableRowText.lineChart.title
369
- }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
370
- sx: sx.expandableRow.lineChart.content
371
- }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
372
- sx: sx.expandableRowText.lineChart.count
373
- }, "1,234,234"), (0, _react2.jsx)(_index.Text, {
374
- sx: sx.expandableRowText.lineChart.countLabel
375
- }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
376
- sx: sx.expandableRowButton.chartWrapper,
377
- onPress: (0, _addonActions.action)('seeContributingDataAction'),
378
- "aria-label": "line-chart button"
379
- }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
380
- sx: sx.expandableRow.lineChart.divider
381
- }), (0, _react2.jsx)(_index.Box, {
382
- ml: 15
383
- }, (0, _react2.jsx)(_index.Box, {
384
- sx: sx.expandableRow.lineChart.chart,
385
- width: 50
386
- }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
387
- sx: sx.chartContainer
388
- }, (0, _react2.jsx)(_recharts.LineChart, {
389
- sx: sx.chart,
390
- data: chartData
391
- }, (0, _react2.jsx)(_recharts.Line, {
392
- type: "monotone",
393
- dataKey: "fullData",
394
- dot: false,
395
- stroke: _colors.neutral[20]
396
- })))), (0, _react2.jsx)(_index.Text, {
397
- sx: sx.expandableRowText.lineChart.chartLabel
398
- }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
399
- size: "sm",
400
- sx: sx.chartTrendContainer
401
- }, (0, _react2.jsx)(_index.Text, {
402
- sx: sx.expandableRowText.lineChart.trend
403
- }, "+ 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
404
- size: "sm"
405
- }, (0, _react2.jsx)(_index.SwitchField, {
406
- "aria-label": "line-chart switch-field"
407
- }))));
408
- var PartialData = (0, _react2.jsx)(_index.Box, {
409
- isRow: true,
410
- sx: sx.container,
411
- mt: 20
412
- }, (0, _react2.jsx)(_index.Box, {
413
- sx: sx.expandableRow.titleWrapper
414
- }, (0, _react2.jsx)(_index.Text, {
415
- sx: sx.expandableRowText.title
416
- }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
417
- sx: sx.expandableRowText.subtitle
418
- }, "Partial Data")), (0, _react2.jsx)(_index.Box, {
419
- isRow: true,
420
- alignItems: "center"
421
- }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
422
- sx: sx.expandableRow.lineChart.title
423
- }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
424
- sx: sx.expandableRowText.lineChart.title
425
- }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
426
- sx: sx.expandableRow.lineChart.content
427
- }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
428
- sx: sx.expandableRowText.lineChart.count
429
- }, "234,234"), (0, _react2.jsx)(_index.Text, {
430
- sx: sx.expandableRowText.lineChart.countLabel
431
- }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
432
- sx: sx.expandableRowButton.chartWrapper,
433
- onPress: (0, _addonActions.action)('seeContributingDataAction'),
434
- "aria-label": "line-chart button"
435
- }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
436
- sx: sx.expandableRow.lineChart.divider
437
- }), (0, _react2.jsx)(_index.Box, {
438
- ml: 15
439
- }, (0, _react2.jsx)(_index.Box, {
440
- sx: sx.expandableRow.lineChart.chart,
441
- width: 50
442
- }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
443
- sx: sx.chartContainer
444
- }, (0, _react2.jsx)(_recharts.LineChart, {
445
- sx: sx.chart,
446
- data: partialDataData
447
- }, (0, _react2.jsx)(_recharts.Line, {
448
- type: "monotone",
449
- dataKey: "value",
450
- dot: false,
451
- stroke: _colors.neutral[20]
452
- })))), (0, _react2.jsx)(_index.Text, {
453
- sx: sx.expandableRowText.lineChart.chartLabel
454
- }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
455
- size: "sm",
456
- sx: sx.chartTrendContainer
457
- }, (0, _react2.jsx)(_index.Text, {
458
- sx: sx.expandableRowText.lineChart.trend
459
- }, "- 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
460
- size: "sm"
461
- }, (0, _react2.jsx)(_index.SwitchField, {
462
- "aria-label": "line-chart switch-field"
463
- }))));
464
- var ZeroData = (0, _react2.jsx)(_index.Box, {
465
- isRow: true,
466
- sx: sx.container,
467
- mt: 20
468
- }, (0, _react2.jsx)(_index.Box, {
469
- sx: sx.expandableRow.titleWrapper
470
- }, (0, _react2.jsx)(_index.Text, {
471
- sx: sx.expandableRowText.title
472
- }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
473
- sx: sx.expandableRowText.subtitle
474
- }, "Zero Data")), (0, _react2.jsx)(_index.Box, {
475
- isRow: true,
476
- alignItems: "center"
477
- }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
478
- sx: sx.expandableRow.lineChart.title
479
- }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
480
- sx: sx.expandableRowText.lineChart.title
481
- }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
482
- sx: sx.expandableRow.lineChart.content
483
- }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
484
- sx: sx.expandableRowText.lineChart.count
485
- }, "0"), (0, _react2.jsx)(_index.Text, {
486
- sx: sx.expandableRowText.lineChart.countLabel
487
- }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
488
- sx: sx.expandableRowButton.chartWrapper,
489
- onPress: (0, _addonActions.action)('seeContributingDataAction'),
490
- "aria-label": "line-chart button"
491
- }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
492
- sx: sx.expandableRow.lineChart.divider
493
- }), (0, _react2.jsx)(_index.Box, {
494
- ml: 15
495
- }, (0, _react2.jsx)(_index.Box, {
496
- sx: sx.expandableRow.lineChart.chart,
497
- width: 50
498
- }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
499
- sx: sx.chartContainer
500
- }, (0, _react2.jsx)(_recharts.LineChart, {
501
- sx: sx.chart,
502
- data: zeroData
503
- }, (0, _react2.jsx)(_recharts.Line, {
504
- type: "monotone",
505
- dataKey: "value",
506
- dot: false,
507
- stroke: _colors.neutral[20]
508
- })))), (0, _react2.jsx)(_index.Text, {
509
- sx: sx.expandableRowText.lineChart.chartLabel
510
- }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
511
- size: "sm",
512
- sx: sx.chartTrendContainer
513
- }, (0, _react2.jsx)(_index.Text, {
514
- sx: sx.expandableRowText.lineChart.trend
515
- }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
516
- size: "sm"
517
- }, (0, _react2.jsx)(_index.SwitchField, {
518
- "aria-label": "line-chart switch-field"
519
- }))));
520
- var ZeroValues = (0, _react2.jsx)(_index.Box, {
521
- isRow: true,
522
- sx: sx.container,
523
- mt: 20
524
- }, (0, _react2.jsx)(_index.Box, {
525
- sx: sx.expandableRow.titleWrapper
526
- }, (0, _react2.jsx)(_index.Text, {
527
- sx: sx.expandableRowText.title
528
- }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
529
- sx: sx.expandableRowText.subtitle
530
- }, "Zero Values")), (0, _react2.jsx)(_index.Box, {
531
- isRow: true,
532
- alignItems: "center"
533
- }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
534
- sx: sx.expandableRow.lineChart.title
535
- }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
536
- sx: sx.expandableRowText.lineChart.title
537
- }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
538
- sx: sx.expandableRow.lineChart.content
539
- }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
540
- sx: sx.expandableRowText.lineChart.count
541
- }, "0"), (0, _react2.jsx)(_index.Text, {
542
- sx: sx.expandableRowText.lineChart.countLabel
543
- }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
544
- sx: sx.expandableRowButton.chartWrapper,
545
- onPress: (0, _addonActions.action)('seeContributingDataAction'),
546
- "aria-label": "line-chart button"
547
- }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
548
- sx: sx.expandableRow.lineChart.divider
549
- }), (0, _react2.jsx)(_index.Box, {
550
- ml: 15
551
- }, (0, _react2.jsx)(_index.Box, {
552
- sx: sx.expandableRow.lineChart.chart,
553
- width: 50
554
- }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
555
- sx: sx.chartContainer
556
- }, (0, _react2.jsx)(_recharts.LineChart, {
557
- sx: sx.chart,
558
- data: zeroValuesData
559
- }, (0, _react2.jsx)(_recharts.Line, {
560
- type: "monotone",
561
- dataKey: "value",
562
- dot: false,
563
- stroke: _colors.neutral[20]
564
- })))), (0, _react2.jsx)(_index.Text, {
565
- sx: sx.expandableRowText.lineChart.chartLabel
566
- }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
567
- size: "sm",
568
- sx: sx.chartTrendContainer
569
- }, (0, _react2.jsx)(_index.Text, {
570
- sx: sx.expandableRowText.lineChart.trend
571
- }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
572
- size: "sm"
573
- }, (0, _react2.jsx)(_index.SwitchField, {
574
- "aria-label": "line-chart switch-field"
575
- }))));
576
- return (0, _react2.jsx)(_react["default"].Fragment, null, EmptyData, FullData, PartialData, ZeroData, ZeroValues);
577
- };
578
- exports.Default = Default;
package/lib/recipes/RowLineChart.stories.js DELETED
@@ -1,565 +0,0 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
10
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
11
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
12
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
13
- import React, { useCallback, useMemo } from 'react';
14
- import { useVisuallyHidden } from 'react-aria';
15
- import { action } from '@storybook/addon-actions';
16
- import { Line, LineChart, ResponsiveContainer } from 'recharts';
17
- import useResizeObserver from 'use-resize-observer';
18
- import { Box, Button, SwitchField, Text, Tooltip, TooltipTrigger } from '../index';
19
- import { neutral } from '../styles/colors';
20
- import { jsx as ___EmotionJSX } from "@emotion/react";
21
- export default {
22
- title: 'Recipes/Row Line Chart',
23
- parameters: {
24
- chromatic: {
25
- diffThreshold: 0.9
26
- }
27
- }
28
- };
29
- var chartData = [{
30
- id: 1,
31
- emptyData: 0,
32
- fullData: 1
33
- }, {
34
- id: 2,
35
- emptyData: 0,
36
- fullData: 5
37
- }, {
38
- id: 3,
39
- emptyData: 0,
40
- fullData: 3
41
- }, {
42
- id: 4,
43
- emptyData: 0,
44
- fullData: 2
45
- }, {
46
- id: 5,
47
- emptyData: 0,
48
- fullData: 5
49
- }, {
50
- id: 6,
51
- emptyData: 0,
52
- fullData: 1
53
- }, {
54
- id: 7,
55
- emptyData: 0,
56
- fullData: 5
57
- }, {
58
- id: 8,
59
- emptyData: 0,
60
- fullData: 5
61
- }, {
62
- id: 9,
63
- emptyData: 0,
64
- fullData: 1
65
- }, {
66
- id: 10,
67
- emptyData: 0,
68
- fullData: 2
69
- }, {
70
- id: 11,
71
- emptyData: 0,
72
- fullData: 4
73
- }, {
74
- id: 12,
75
- emptyData: 0,
76
- fullData: 11
77
- }];
78
- var partialDataData = [{
79
- id: 1
80
- }, {
81
- id: 2
82
- }, {
83
- id: 3
84
- }, {
85
- id: 4
86
- }, {
87
- id: 5
88
- }, {
89
- id: 6
90
- }, {
91
- id: 7,
92
- value: 6
93
- }, {
94
- id: 8,
95
- value: 5
96
- }, {
97
- id: 9,
98
- value: 4
99
- }, {
100
- id: 10,
101
- value: 3
102
- }, {
103
- id: 11,
104
- value: 2
105
- }, {
106
- id: 12,
107
- value: 1
108
- }];
109
- var zeroValuesData = [{
110
- id: 1,
111
- value: 0
112
- }, {
113
- id: 2,
114
- value: 0
115
- }, {
116
- id: 3,
117
- value: 0
118
- }, {
119
- id: 4,
120
- value: 0
121
- }];
122
- var zeroData = [{
123
- id: 1
124
- }, {
125
- id: 2
126
- }, {
127
- id: 3
128
- }, {
129
- id: 4
130
- }, {
131
- id: 5
132
- }, {
133
- id: 6
134
- }, {
135
- id: 7
136
- }, {
137
- id: 8,
138
- value: 0
139
- }, {
140
- id: 9,
141
- value: 0
142
- }, {
143
- id: 10,
144
- value: 0
145
- }, {
146
- id: 11,
147
- value: 0
148
- }, {
149
- id: 12,
150
- value: 0
151
- }];
152
- var expandableRowSharedStyle = {
153
- textOverflow: 'ellipsis',
154
- overflow: 'hidden',
155
- whiteSpace: 'nowrap'
156
- };
157
- var alignCellRightWrapper = {
158
- display: 'flex',
159
- flexDirection: 'column',
160
- alignItems: 'flex-end'
161
- };
162
- var sx = {
163
- container: {
164
- backgroundColor: 'accent.99',
165
- alignItems: 'center',
166
- justifyContent: 'space-between',
167
- pr: '20px'
168
- },
169
- chartTitleContainer: {},
170
- chartContainer: {
171
- width: '100%',
172
- height: '100%'
173
- },
174
- chart: {
175
- width: '50',
176
- height: '18'
177
- },
178
- chartTrendContainer: {
179
- ml: 'md',
180
- width: '50px'
181
- },
182
- expandableRow: {
183
- titleWrapper: {
184
- maxWidth: '50%',
185
- p: 'md'
186
- },
187
- lineChart: {
188
- title: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
189
- ml: '20px',
190
- pr: 'md'
191
- }),
192
- content: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
193
- width: 100
194
- }),
195
- chart: {
196
- width: '50px',
197
- height: '18px'
198
- },
199
- chartWrapper: {
200
- '&:hover': {
201
- backgroundColor: '#4462ED1A'
202
- }
203
- },
204
- divider: {
205
- backgroundColor: 'neutral.80',
206
- height: '35px',
207
- width: '1px'
208
- }
209
- }
210
- },
211
- expandableRowButton: {
212
- chartWrapper: {
213
- display: 'flex',
214
- flexDirection: 'row',
215
- alignItems: 'center',
216
- color: 'black',
217
- background: 'none',
218
- cursor: 'pointer',
219
- height: 60,
220
- padding: 0,
221
- ml: 'md',
222
- pr: 'md',
223
- border: 'none',
224
- '&:hover': {
225
- backgroundColor: '#4462ED1A'
226
- }
227
- }
228
- },
229
- expandableRowText: {
230
- title: _objectSpread({
231
- fontSize: 'lg',
232
- color: 'neutral.20'
233
- }, expandableRowSharedStyle),
234
- subtitle: _objectSpread({
235
- fontSize: 'sm',
236
- color: 'neutral.60'
237
- }, expandableRowSharedStyle),
238
- lineChart: {
239
- title: _objectSpread({
240
- fontSize: 'sm',
241
- color: 'neutral.40',
242
- maxWidth: '100%'
243
- }, expandableRowSharedStyle),
244
- count: {
245
- color: 'neutral.20',
246
- fontSize: 22,
247
- fontWeight: 2
248
- },
249
- countLabel: {
250
- fontSize: 'xs',
251
- color: 'neutral.50'
252
- },
253
- chartLabel: {
254
- fontSize: 'xs',
255
- color: 'neutral.50',
256
- minWidth: '60px'
257
- },
258
- trend: {
259
- color: 'neutral.20',
260
- fontSize: 'sm',
261
- fontWeight: 3,
262
- whiteSpace: 'nowrap'
263
- }
264
- }
265
- }
266
- };
267
- export var Default = function Default() {
268
- var _useResizeObserver = useResizeObserver(),
269
- ref = _useResizeObserver.ref,
270
- width = _useResizeObserver.width;
271
- var _useVisuallyHidden = useVisuallyHidden(),
272
- visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
273
- var isTablet = useMemo(function () {
274
- return width <= 605;
275
- }, [width]);
276
- var isMobile = useMemo(function () {
277
- return width <= 350;
278
- }, [width]);
279
- var hideIfTablet = useCallback(function () {
280
- return isTablet && visuallyHiddenProps;
281
- }, [isTablet]);
282
- var hideIfMobile = useCallback(function () {
283
- return isMobile && visuallyHiddenProps;
284
- }, [isMobile]);
285
- var EmptyData = ___EmotionJSX(Box, {
286
- isRow: true,
287
- sx: sx.container,
288
- ref: ref
289
- }, ___EmotionJSX(Box, {
290
- sx: sx.expandableRow.titleWrapper
291
- }, ___EmotionJSX(Text, {
292
- sx: sx.expandableRowText.title
293
- }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
294
- sx: sx.expandableRowText.subtitle
295
- }, "Empty Data")), ___EmotionJSX(Box, {
296
- isRow: true,
297
- alignItems: "center"
298
- }, ___EmotionJSX(Box, _extends({
299
- sx: sx.expandableRow.lineChart.title
300
- }, hideIfMobile()), ___EmotionJSX(Text, {
301
- sx: sx.expandableRowText.lineChart.title
302
- }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
303
- sx: sx.expandableRow.lineChart.content
304
- }, hideIfTablet()), ___EmotionJSX(Text, {
305
- sx: sx.expandableRowText.lineChart.count
306
- }, "0"), ___EmotionJSX(Text, {
307
- sx: sx.expandableRowText.lineChart.countLabel
308
- }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
309
- sx: sx.expandableRowButton.chartWrapper,
310
- onPress: action('seeContributingDataAction'),
311
- "aria-label": "line-chart button"
312
- }, hideIfTablet()), ___EmotionJSX(Box, {
313
- sx: sx.expandableRow.lineChart.divider
314
- }), ___EmotionJSX(Box, {
315
- ml: 15
316
- }, ___EmotionJSX(Box, {
317
- sx: sx.expandableRow.lineChart.chart
318
- }, ___EmotionJSX(ResponsiveContainer, {
319
- sx: sx.chartContainer
320
- }, ___EmotionJSX(LineChart, {
321
- sx: sx.chart,
322
- data: chartData
323
- }, ___EmotionJSX(Line, {
324
- type: "monotone",
325
- dataKey: "emptyData",
326
- dot: false,
327
- stroke: neutral[20]
328
- })))), ___EmotionJSX(Text, {
329
- sx: sx.expandableRowText.lineChart.chartLabel
330
- }, "No data yet")), ___EmotionJSX(Box, {
331
- size: "sm",
332
- sx: sx.chartTrendContainer
333
- }, ___EmotionJSX(Text, {
334
- sx: sx.expandableRowText.lineChart.trend
335
- }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
336
- size: "sm"
337
- }, ___EmotionJSX(SwitchField, {
338
- "aria-label": "line-chart switch-field"
339
- }))));
340
- var FullData = ___EmotionJSX(Box, {
341
- isRow: true,
342
- sx: sx.container,
343
- mt: 20
344
- }, ___EmotionJSX(Box, {
345
- sx: sx.expandableRow.titleWrapper
346
- }, ___EmotionJSX(Text, {
347
- sx: sx.expandableRowText.title
348
- }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
349
- sx: sx.expandableRowText.subtitle
350
- }, "Full Data")), ___EmotionJSX(Box, {
351
- isRow: true,
352
- alignItems: "center"
353
- }, ___EmotionJSX(Box, _extends({
354
- sx: sx.expandableRow.lineChart.title
355
- }, hideIfMobile()), ___EmotionJSX(Text, {
356
- sx: sx.expandableRowText.lineChart.title
357
- }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
358
- sx: sx.expandableRow.lineChart.content
359
- }, hideIfTablet()), ___EmotionJSX(Text, {
360
- sx: sx.expandableRowText.lineChart.count
361
- }, "1,234,234"), ___EmotionJSX(Text, {
362
- sx: sx.expandableRowText.lineChart.countLabel
363
- }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
364
- sx: sx.expandableRowButton.chartWrapper,
365
- onPress: action('seeContributingDataAction'),
366
- "aria-label": "line-chart button"
367
- }, hideIfTablet()), ___EmotionJSX(Box, {
368
- sx: sx.expandableRow.lineChart.divider
369
- }), ___EmotionJSX(Box, {
370
- ml: 15
371
- }, ___EmotionJSX(Box, {
372
- sx: sx.expandableRow.lineChart.chart,
373
- width: 50
374
- }, ___EmotionJSX(ResponsiveContainer, {
375
- sx: sx.chartContainer
376
- }, ___EmotionJSX(LineChart, {
377
- sx: sx.chart,
378
- data: chartData
379
- }, ___EmotionJSX(Line, {
380
- type: "monotone",
381
- dataKey: "fullData",
382
- dot: false,
383
- stroke: neutral[20]
384
- })))), ___EmotionJSX(Text, {
385
- sx: sx.expandableRowText.lineChart.chartLabel
386
- }, "12 wk trend")), ___EmotionJSX(Box, {
387
- size: "sm",
388
- sx: sx.chartTrendContainer
389
- }, ___EmotionJSX(Text, {
390
- sx: sx.expandableRowText.lineChart.trend
391
- }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
392
- size: "sm"
393
- }, ___EmotionJSX(SwitchField, {
394
- "aria-label": "line-chart switch-field"
395
- }))));
396
- var PartialData = ___EmotionJSX(Box, {
397
- isRow: true,
398
- sx: sx.container,
399
- mt: 20
400
- }, ___EmotionJSX(Box, {
401
- sx: sx.expandableRow.titleWrapper
402
- }, ___EmotionJSX(Text, {
403
- sx: sx.expandableRowText.title
404
- }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
405
- sx: sx.expandableRowText.subtitle
406
- }, "Partial Data")), ___EmotionJSX(Box, {
407
- isRow: true,
408
- alignItems: "center"
409
- }, ___EmotionJSX(Box, _extends({
410
- sx: sx.expandableRow.lineChart.title
411
- }, hideIfMobile()), ___EmotionJSX(Text, {
412
- sx: sx.expandableRowText.lineChart.title
413
- }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
414
- sx: sx.expandableRow.lineChart.content
415
- }, hideIfTablet()), ___EmotionJSX(Text, {
416
- sx: sx.expandableRowText.lineChart.count
417
- }, "234,234"), ___EmotionJSX(Text, {
418
- sx: sx.expandableRowText.lineChart.countLabel
419
- }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
420
- sx: sx.expandableRowButton.chartWrapper,
421
- onPress: action('seeContributingDataAction'),
422
- "aria-label": "line-chart button"
423
- }, hideIfTablet()), ___EmotionJSX(Box, {
424
- sx: sx.expandableRow.lineChart.divider
425
- }), ___EmotionJSX(Box, {
426
- ml: 15
427
- }, ___EmotionJSX(Box, {
428
- sx: sx.expandableRow.lineChart.chart,
429
- width: 50
430
- }, ___EmotionJSX(ResponsiveContainer, {
431
- sx: sx.chartContainer
432
- }, ___EmotionJSX(LineChart, {
433
- sx: sx.chart,
434
- data: partialDataData
435
- }, ___EmotionJSX(Line, {
436
- type: "monotone",
437
- dataKey: "value",
438
- dot: false,
439
- stroke: neutral[20]
440
- })))), ___EmotionJSX(Text, {
441
- sx: sx.expandableRowText.lineChart.chartLabel
442
- }, "12 wk trend")), ___EmotionJSX(Box, {
443
- size: "sm",
444
- sx: sx.chartTrendContainer
445
- }, ___EmotionJSX(Text, {
446
- sx: sx.expandableRowText.lineChart.trend
447
- }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
448
- size: "sm"
449
- }, ___EmotionJSX(SwitchField, {
450
- "aria-label": "line-chart switch-field"
451
- }))));
452
- var ZeroData = ___EmotionJSX(Box, {
453
- isRow: true,
454
- sx: sx.container,
455
- mt: 20
456
- }, ___EmotionJSX(Box, {
457
- sx: sx.expandableRow.titleWrapper
458
- }, ___EmotionJSX(Text, {
459
- sx: sx.expandableRowText.title
460
- }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
461
- sx: sx.expandableRowText.subtitle
462
- }, "Zero Data")), ___EmotionJSX(Box, {
463
- isRow: true,
464
- alignItems: "center"
465
- }, ___EmotionJSX(Box, _extends({
466
- sx: sx.expandableRow.lineChart.title
467
- }, hideIfMobile()), ___EmotionJSX(Text, {
468
- sx: sx.expandableRowText.lineChart.title
469
- }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
470
- sx: sx.expandableRow.lineChart.content
471
- }, hideIfTablet()), ___EmotionJSX(Text, {
472
- sx: sx.expandableRowText.lineChart.count
473
- }, "0"), ___EmotionJSX(Text, {
474
- sx: sx.expandableRowText.lineChart.countLabel
475
- }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
476
- sx: sx.expandableRowButton.chartWrapper,
477
- onPress: action('seeContributingDataAction'),
478
- "aria-label": "line-chart button"
479
- }, hideIfTablet()), ___EmotionJSX(Box, {
480
- sx: sx.expandableRow.lineChart.divider
481
- }), ___EmotionJSX(Box, {
482
- ml: 15
483
- }, ___EmotionJSX(Box, {
484
- sx: sx.expandableRow.lineChart.chart,
485
- width: 50
486
- }, ___EmotionJSX(ResponsiveContainer, {
487
- sx: sx.chartContainer
488
- }, ___EmotionJSX(LineChart, {
489
- sx: sx.chart,
490
- data: zeroData
491
- }, ___EmotionJSX(Line, {
492
- type: "monotone",
493
- dataKey: "value",
494
- dot: false,
495
- stroke: neutral[20]
496
- })))), ___EmotionJSX(Text, {
497
- sx: sx.expandableRowText.lineChart.chartLabel
498
- }, "12 wk trend")), ___EmotionJSX(Box, {
499
- size: "sm",
500
- sx: sx.chartTrendContainer
501
- }, ___EmotionJSX(Text, {
502
- sx: sx.expandableRowText.lineChart.trend
503
- }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
504
- size: "sm"
505
- }, ___EmotionJSX(SwitchField, {
506
- "aria-label": "line-chart switch-field"
507
- }))));
508
- var ZeroValues = ___EmotionJSX(Box, {
509
- isRow: true,
510
- sx: sx.container,
511
- mt: 20
512
- }, ___EmotionJSX(Box, {
513
- sx: sx.expandableRow.titleWrapper
514
- }, ___EmotionJSX(Text, {
515
- sx: sx.expandableRowText.title
516
- }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
517
- sx: sx.expandableRowText.subtitle
518
- }, "Zero Values")), ___EmotionJSX(Box, {
519
- isRow: true,
520
- alignItems: "center"
521
- }, ___EmotionJSX(Box, _extends({
522
- sx: sx.expandableRow.lineChart.title
523
- }, hideIfMobile()), ___EmotionJSX(Text, {
524
- sx: sx.expandableRowText.lineChart.title
525
- }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
526
- sx: sx.expandableRow.lineChart.content
527
- }, hideIfTablet()), ___EmotionJSX(Text, {
528
- sx: sx.expandableRowText.lineChart.count
529
- }, "0"), ___EmotionJSX(Text, {
530
- sx: sx.expandableRowText.lineChart.countLabel
531
- }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
532
- sx: sx.expandableRowButton.chartWrapper,
533
- onPress: action('seeContributingDataAction'),
534
- "aria-label": "line-chart button"
535
- }, hideIfTablet()), ___EmotionJSX(Box, {
536
- sx: sx.expandableRow.lineChart.divider
537
- }), ___EmotionJSX(Box, {
538
- ml: 15
539
- }, ___EmotionJSX(Box, {
540
- sx: sx.expandableRow.lineChart.chart,
541
- width: 50
542
- }, ___EmotionJSX(ResponsiveContainer, {
543
- sx: sx.chartContainer
544
- }, ___EmotionJSX(LineChart, {
545
- sx: sx.chart,
546
- data: zeroValuesData
547
- }, ___EmotionJSX(Line, {
548
- type: "monotone",
549
- dataKey: "value",
550
- dot: false,
551
- stroke: neutral[20]
552
- })))), ___EmotionJSX(Text, {
553
- sx: sx.expandableRowText.lineChart.chartLabel
554
- }, "12 wk trend")), ___EmotionJSX(Box, {
555
- size: "sm",
556
- sx: sx.chartTrendContainer
557
- }, ___EmotionJSX(Text, {
558
- sx: sx.expandableRowText.lineChart.trend
559
- }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
560
- size: "sm"
561
- }, ___EmotionJSX(SwitchField, {
562
- "aria-label": "line-chart switch-field"
563
- }))));
564
- return ___EmotionJSX(React.Fragment, null, EmptyData, FullData, PartialData, ZeroData, ZeroValues);
565
- };