@cdc/chart 4.24.7 → 4.24.9

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 (51) hide show
  1. package/dist/cdcchart.js +40313 -37543
  2. package/examples/cases-year.json +13379 -0
  3. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +76 -15
  4. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +5 -5
  5. package/index.html +17 -8
  6. package/package.json +2 -2
  7. package/src/CdcChart.tsx +383 -133
  8. package/src/_stories/Chart.Legend.Gradient.tsx +19 -0
  9. package/src/_stories/_mock/legend.gradient_mock.json +236 -0
  10. package/src/components/Annotations/components/AnnotationDraggable.tsx +64 -11
  11. package/src/components/Axis/Categorical.Axis.tsx +145 -0
  12. package/src/components/BarChart/components/BarChart.Horizontal.tsx +4 -3
  13. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +1 -1
  14. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +2 -5
  15. package/src/components/BarChart/components/BarChart.Vertical.tsx +17 -8
  16. package/src/components/BarChart/helpers/index.ts +5 -16
  17. package/src/components/BrushChart.tsx +205 -0
  18. package/src/components/EditorPanel/EditorPanel.tsx +1766 -509
  19. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +19 -5
  20. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +190 -37
  21. package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +43 -7
  22. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +4 -4
  23. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +1 -11
  24. package/src/components/EditorPanel/editor-panel.scss +16 -3
  25. package/src/components/EditorPanel/{useEditorPermissions.js → useEditorPermissions.ts} +90 -19
  26. package/src/components/Legend/Legend.Component.tsx +185 -193
  27. package/src/components/Legend/Legend.Suppression.tsx +146 -0
  28. package/src/components/Legend/Legend.tsx +21 -5
  29. package/src/components/Legend/helpers/index.ts +33 -3
  30. package/src/components/LegendWrapper.tsx +26 -0
  31. package/src/components/LineChart/LineChartProps.ts +1 -18
  32. package/src/components/LineChart/components/LineChart.BumpCircle.tsx +103 -0
  33. package/src/components/LineChart/components/LineChart.Circle.tsx +47 -8
  34. package/src/components/LineChart/helpers.ts +55 -11
  35. package/src/components/LineChart/index.tsx +113 -38
  36. package/src/components/LinearChart.tsx +1366 -0
  37. package/src/components/PieChart/PieChart.tsx +74 -17
  38. package/src/components/Sankey/index.tsx +22 -16
  39. package/src/components/Sparkline/components/SparkLine.tsx +2 -2
  40. package/src/data/initial-state.js +13 -3
  41. package/src/hooks/useLegendClasses.ts +52 -15
  42. package/src/hooks/useMinMax.ts +4 -4
  43. package/src/hooks/useScales.ts +34 -24
  44. package/src/hooks/useTooltip.tsx +85 -22
  45. package/src/scss/DataTable.scss +2 -1
  46. package/src/scss/main.scss +107 -14
  47. package/src/types/ChartConfig.ts +34 -8
  48. package/src/types/ChartContext.ts +5 -4
  49. package/examples/feature/line/line-chart.json +0 -449
  50. package/src/components/BrushHandle.jsx +0 -17
  51. package/src/components/LineChart/index.scss +0 -1
@@ -1,449 +0,0 @@
1
- {
2
- "type": "chart",
3
- "debugSvg": false,
4
- "chartMessage": {
5
- "noData": "No Data Available"
6
- },
7
- "title": "Example Line Chart",
8
- "showTitle": true,
9
- "showDownloadMediaButton": false,
10
- "theme": "theme-green",
11
- "animate": false,
12
- "fontSize": "medium",
13
- "lineDatapointStyle": "hover",
14
- "lineDatapointColor": "Same as Line",
15
- "barHasBorder": "false",
16
- "isLollipopChart": false,
17
- "lollipopShape": "circle",
18
- "lollipopColorStyle": "two-tone",
19
- "visualizationSubType": "regular",
20
- "barStyle": "",
21
- "roundingStyle": "standard",
22
- "tipRounding": "top",
23
- "isResponsiveTicks": false,
24
- "general": {
25
- "showDownloadButton": false
26
- },
27
- "padding": {
28
- "left": 5,
29
- "right": 5
30
- },
31
- "suppressedData": [],
32
- "preliminaryData": [],
33
- "yAxis": {
34
- "hideAxis": false,
35
- "displayNumbersOnBar": false,
36
- "hideLabel": false,
37
- "hideTicks": false,
38
- "size": "75",
39
- "gridLines": false,
40
- "enablePadding": false,
41
- "min": "",
42
- "max": "",
43
- "labelColor": "#333",
44
- "tickLabelColor": "#333",
45
- "tickColor": "#333",
46
- "rightHideAxis": true,
47
- "rightAxisSize": 0,
48
- "rightLabel": "",
49
- "rightLabelOffsetSize": 0,
50
- "rightAxisLabelColor": "#333",
51
- "rightAxisTickLabelColor": "#333",
52
- "rightAxisTickColor": "#333",
53
- "numTicks": "9",
54
- "axisPadding": 0,
55
- "scalePadding": 10,
56
- "tickRotation": 0,
57
- "anchors": [],
58
- "label": "Y-Axis Example Label"
59
- },
60
- "boxplot": {
61
- "plots": [],
62
- "borders": "true",
63
- "firstQuartilePercentage": 25,
64
- "thirdQuartilePercentage": 75,
65
- "boxWidthPercentage": 40,
66
- "plotOutlierValues": false,
67
- "plotNonOutlierValues": true,
68
- "legend": {
69
- "showHowToReadText": false,
70
- "howToReadText": ""
71
- },
72
- "labels": {
73
- "q1": "Lower Quartile",
74
- "q2": "q2",
75
- "q3": "Upper Quartile",
76
- "q4": "q4",
77
- "minimum": "Minimum",
78
- "maximum": "Maximum",
79
- "mean": "Mean",
80
- "median": "Median",
81
- "sd": "Standard Deviation",
82
- "iqr": "Interquartile Range",
83
- "total": "Total",
84
- "outliers": "Outliers",
85
- "values": "Values",
86
- "lowerBounds": "Lower Bounds",
87
- "upperBounds": "Upper Bounds"
88
- }
89
- },
90
- "topAxis": {
91
- "hasLine": false
92
- },
93
- "isLegendValue": false,
94
- "barThickness": 0.035,
95
- "barHeight": 25,
96
- "barSpace": 15,
97
- "heights": {
98
- "vertical": 300,
99
- "horizontal": 750
100
- },
101
- "xAxis": {
102
- "sortDates": false,
103
- "anchors": [],
104
- "type": "date-time",
105
- "showTargetLabel": true,
106
- "targetLabel": "Target",
107
- "hideAxis": false,
108
- "hideLabel": false,
109
- "hideTicks": false,
110
- "size": "77",
111
- "tickRotation": "25",
112
- "min": "",
113
- "max": "",
114
- "labelColor": "#333",
115
- "tickLabelColor": "#333",
116
- "tickColor": "#333",
117
- "numTicks": "",
118
- "labelOffset": 65,
119
- "axisPadding": 200,
120
- "target": 0,
121
- "maxTickRotation": 0,
122
- "dataKey": "Date",
123
- "label": "X-Axis Example Label",
124
- "dateParseFormat": "%m/%d/%Y",
125
- "dateDisplayFormat": "%m/%d/%Y",
126
- "tickWidthMax": 91,
127
- "padding": 6
128
- },
129
- "table": {
130
- "label": "Data Table",
131
- "expanded": false,
132
- "limitHeight": false,
133
- "height": "",
134
- "caption": "",
135
- "showDownloadUrl": false,
136
- "showDataTableLink": true,
137
- "indexLabel": "",
138
- "download": false,
139
- "showVertical": false,
140
- "dateDisplayFormat": "",
141
- "show": true
142
- },
143
- "orientation": "vertical",
144
- "color": "pinkpurple",
145
- "columns": {},
146
- "legend": {
147
- "hide": false,
148
- "behavior": "isolate",
149
- "axisAlign": true,
150
- "singleRow": true,
151
- "colorCode": "",
152
- "reverseLabelOrder": false,
153
- "description": "",
154
- "dynamicLegend": false,
155
- "dynamicLegendDefaultText": "Show All",
156
- "dynamicLegendItemLimit": 5,
157
- "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
158
- "dynamicLegendChartMessage": "Select Options from the Legend",
159
- "lineMode": false,
160
- "verticalSorted": false,
161
- "highlightOnHover": false,
162
- "seriesHighlight": [],
163
- "position": "bottom",
164
- "label": "Type of Data"
165
- },
166
- "brush": {
167
- "height": 25,
168
- "data": [
169
- {
170
- "Date": "1/15/2016",
171
- "Data 1": "",
172
- "Data 2": "1350",
173
- "Data 3": "300",
174
- "Data 4": "950",
175
- "Data 5": "1200",
176
- "Data 6": "3100"
177
- },
178
- {
179
- "Date": "2/15/2016",
180
- "Data 1": "40",
181
- "Data 2": "900",
182
- "Data 3": "240",
183
- "Data 4": "60",
184
- "Data 5": "1600",
185
- "Data 6": "2000"
186
- },
187
- {
188
- "Date": "3/15/2016",
189
- "Data 1": "50",
190
- "Data 2": "300",
191
- "Data 3": "2900",
192
- "Data 4": "100",
193
- "Data 5": "2000",
194
- "Data 6": "250"
195
- },
196
- {
197
- "Date": "4/15/2016",
198
- "Data 1": "",
199
- "Data 2": "160",
200
- "Data 3": "230",
201
- "Data 4": "1800",
202
- "Data 5": "160",
203
- "Data 6": "220"
204
- },
205
- {
206
- "Date": "5/15/2016",
207
- "Data 1": "80",
208
- "Data 2": "350",
209
- "Data 3": "300",
210
- "Data 4": "150",
211
- "Data 5": "130",
212
- "Data 6": "100"
213
- },
214
- {
215
- "Date": "6/15/2016",
216
- "Data 1": "90",
217
- "Data 2": "220",
218
- "Data 3": "320",
219
- "Data 4": "100",
220
- "Data 5": "220",
221
- "Data 6": "300"
222
- }
223
- ],
224
- "active": false
225
- },
226
- "exclusions": {
227
- "active": false,
228
- "keys": []
229
- },
230
- "palette": "qualitative-bold",
231
- "isPaletteReversed": false,
232
- "twoColor": {
233
- "palette": "monochrome-1",
234
- "isPaletteReversed": false
235
- },
236
- "labels": false,
237
- "dataFormat": {
238
- "commas": false,
239
- "prefix": "",
240
- "suffix": "",
241
- "abbreviated": false,
242
- "bottomSuffix": "",
243
- "bottomPrefix": "",
244
- "bottomAbbreviated": false
245
- },
246
- "confidenceKeys": {},
247
- "visual": {
248
- "border": true,
249
- "accent": true,
250
- "background": true,
251
- "verticalHoverLine": false,
252
- "horizontalHoverLine": false
253
- },
254
- "useLogScale": false,
255
- "filterBehavior": "Filter Change",
256
- "highlightedBarValues": [],
257
- "series": [
258
- {
259
- "dataKey": "Data 1",
260
- "type": "Line",
261
- "tooltip": true,
262
- "axis": "Left"
263
- },
264
- {
265
- "dataKey": "Data 2",
266
- "type": "Line",
267
- "tooltip": true,
268
- "axis": "Left"
269
- },
270
- {
271
- "dataKey": "Data 3",
272
- "type": "Line",
273
- "tooltip": true,
274
- "axis": "Left"
275
- },
276
- {
277
- "dataKey": "Data 4",
278
- "type": "Line",
279
- "tooltip": true,
280
- "axis": "Left"
281
- },
282
- {
283
- "dataKey": "Data 5",
284
- "type": "Line",
285
- "tooltip": true,
286
- "axis": "Left"
287
- },
288
- {
289
- "dataKey": "Data 6",
290
- "type": "Line",
291
- "tooltip": true,
292
- "axis": "Left"
293
- }
294
- ],
295
- "tooltips": {
296
- "opacity": 90,
297
- "singleSeries": false,
298
- "dateDisplayFormat": ""
299
- },
300
- "forestPlot": {
301
- "startAt": 0,
302
- "colors": {
303
- "line": "",
304
- "shape": ""
305
- },
306
- "lineOfNoEffect": {
307
- "show": true
308
- },
309
- "type": "",
310
- "pooledResult": {
311
- "diamondHeight": 5,
312
- "column": ""
313
- },
314
- "estimateField": "",
315
- "estimateRadius": "",
316
- "shape": "square",
317
- "rowHeight": 20,
318
- "description": {
319
- "show": true,
320
- "text": "description",
321
- "location": 0
322
- },
323
- "result": {
324
- "show": true,
325
- "text": "result",
326
- "location": 100
327
- },
328
- "radius": {
329
- "min": 2,
330
- "max": 10,
331
- "scalingColumn": ""
332
- },
333
- "regression": {
334
- "lower": 0,
335
- "upper": 0,
336
- "estimateField": 0
337
- },
338
- "leftWidthOffset": 0,
339
- "rightWidthOffset": 0,
340
- "showZeroLine": false,
341
- "leftLabel": "",
342
- "rightLabel": ""
343
- },
344
- "area": {
345
- "isStacked": false
346
- },
347
- "sankey": {
348
- "title": {
349
- "defaultColor": "black"
350
- },
351
- "iterations": 1,
352
- "rxValue": 0.9,
353
- "overallSize": {
354
- "width": 900,
355
- "height": 700
356
- },
357
- "margin": {
358
- "margin_y": 25,
359
- "margin_x": 0
360
- },
361
- "nodeSize": {
362
- "nodeWidth": 26,
363
- "nodeHeight": 40
364
- },
365
- "nodePadding": 55,
366
- "nodeFontColor": "black",
367
- "nodeColor": {
368
- "default": "#ff8500",
369
- "inactive": "#808080"
370
- },
371
- "linkColor": {
372
- "default": "#ffc900",
373
- "inactive": "#D3D3D3"
374
- },
375
- "opacity": {
376
- "nodeOpacityDefault": 1,
377
- "nodeOpacityInactive": 0.1,
378
- "LinkOpacityDefault": 1,
379
- "LinkOpacityInactive": 0.1
380
- },
381
- "storyNodeFontColor": "#006778",
382
- "storyNodeText": [],
383
- "nodeValueStyle": {
384
- "textBefore": "(",
385
- "textAfter": ")"
386
- },
387
- "data": []
388
- },
389
- "height": "375",
390
- "data": [
391
- {
392
- "Date": "1/15/2016",
393
- "Data 1": "foo",
394
- "Data 2": "1350",
395
- "Data 3": "300",
396
- "Data 4": "950",
397
- "Data 5": "1200",
398
- "Data 6": "3100"
399
- },
400
- {
401
- "Date": "2/15/2016",
402
- "Data 1": "40",
403
- "Data 2": "900",
404
- "Data 3": "240",
405
- "Data 4": "60",
406
- "Data 5": "1600",
407
- "Data 6": "2000"
408
- },
409
- {
410
- "Date": "3/15/2016",
411
- "Data 1": "50",
412
- "Data 2": "300",
413
- "Data 3": "2900",
414
- "Data 4": "100",
415
- "Data 5": "2000",
416
- "Data 6": "250"
417
- },
418
- {
419
- "Date": "4/15/2016",
420
- "Data 1": "",
421
- "Data 2": "160",
422
- "Data 3": "230",
423
- "Data 4": "1800",
424
- "Data 5": "160",
425
- "Data 6": "220"
426
- },
427
- {
428
- "Date": "5/15/2016",
429
- "Data 1": "80",
430
- "Data 2": "350",
431
- "Data 3": "300",
432
- "Data 4": "150",
433
- "Data 5": "130",
434
- "Data 6": "100"
435
- },
436
- {
437
- "Date": "6/15/2016",
438
- "Data 1": "90",
439
- "Data 2": "220",
440
- "Data 3": "320",
441
- "Data 4": "100",
442
- "Data 5": "220",
443
- "Data 6": "300"
444
- }
445
- ],
446
- "visualizationType": "Line",
447
- "validated": "4.24.3",
448
- "dynamicMarginTop": 0
449
- }
@@ -1,17 +0,0 @@
1
- import { Group } from '@visx/group'
2
-
3
- const BrushHandle = props => {
4
- const { x, height, isBrushActive } = props
5
- const pathWidth = 8
6
- const pathHeight = 15
7
- if (!isBrushActive) {
8
- return null
9
- }
10
- return (
11
- <Group left={x + pathWidth / 2} top={(height - pathHeight) / 2}>
12
- <path fill='#f2f2f2' d='M -4.5 0.5 L 3.5 0.5 L 3.5 15.5 L -4.5 15.5 L -4.5 0.5 M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12' stroke='#999999' strokeWidth='1' style={{ cursor: 'ew-resize' }} />
13
- </Group>
14
- )
15
- }
16
-
17
- export default BrushHandle
@@ -1 +0,0 @@
1
- // Line Chart Styles...