@cdc/chart 4.24.3 → 4.24.5

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 (39) hide show
  1. package/dist/cdcchart.js +34377 -33726
  2. package/examples/feature/line/line-chart.json +361 -37
  3. package/examples/region-issue.json +2065 -0
  4. package/examples/test.json +5409 -0
  5. package/index.html +13 -11
  6. package/package.json +2 -2
  7. package/src/CdcChart.tsx +159 -89
  8. package/src/_stories/Chart.stories.tsx +8 -0
  9. package/src/_stories/_mock/bar-chart-suppressed.json +474 -0
  10. package/src/components/AreaChart/components/AreaChart.jsx +2 -2
  11. package/src/components/BarChart/components/BarChart.Horizontal.tsx +61 -63
  12. package/src/components/BarChart/components/BarChart.Vertical.tsx +79 -94
  13. package/src/components/DeviationBar.jsx +4 -2
  14. package/src/components/EditorPanel/EditorPanel.tsx +1580 -1924
  15. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +19 -2
  16. package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +0 -1
  17. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +4 -5
  18. package/src/components/EditorPanel/editor-panel.scss +0 -724
  19. package/src/components/EditorPanel/useEditorPermissions.js +4 -1
  20. package/src/components/Legend/Legend.Component.tsx +82 -58
  21. package/src/components/Legend/Legend.tsx +5 -1
  22. package/src/components/LineChart/LineChartProps.ts +13 -6
  23. package/src/components/LineChart/components/LineChart.Circle.tsx +22 -11
  24. package/src/components/LineChart/helpers.ts +134 -10
  25. package/src/components/LineChart/index.tsx +69 -42
  26. package/src/components/LinearChart.jsx +156 -139
  27. package/src/components/ZoomBrush.tsx +40 -21
  28. package/src/data/initial-state.js +4 -4
  29. package/src/hooks/useBarChart.js +47 -22
  30. package/src/hooks/useMinMax.ts +21 -2
  31. package/src/hooks/useScales.ts +33 -1
  32. package/src/hooks/useTooltip.tsx +11 -11
  33. package/src/scss/main.scss +80 -5
  34. package/src/types/ChartConfig.ts +3 -13
  35. package/src/types/ChartContext.ts +4 -0
  36. package/src/_stories/ChartLine.preliminary.tsx +0 -19
  37. package/src/_stories/ChartSuppress.stories.tsx +0 -19
  38. package/src/_stories/_mock/suppress_mock.json +0 -911
  39. package/src/helpers/computeMarginBottom.ts +0 -56
@@ -1,44 +1,392 @@
1
1
  {
2
2
  "type": "chart",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
3
7
  "title": "Example Line Chart",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
4
10
  "theme": "theme-green",
11
+ "animate": false,
5
12
  "fontSize": "medium",
6
- "height": "375",
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
+ },
7
27
  "padding": {
8
28
  "left": 5,
9
29
  "right": 5
10
30
  },
31
+ "suppressedData": [],
32
+ "preliminaryData": [],
11
33
  "yAxis": {
34
+ "hideAxis": false,
35
+ "displayNumbersOnBar": false,
36
+ "hideLabel": false,
37
+ "hideTicks": false,
12
38
  "size": "75",
13
39
  "gridLines": false,
14
- "label": "Y-Axis Example Label",
15
- "numTicks": "9"
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
16
100
  },
17
- "barThickness": 0.35,
18
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,
19
110
  "size": "77",
20
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,
21
122
  "dataKey": "Date",
22
123
  "label": "X-Axis Example Label",
23
- "type": "date",
24
124
  "dateParseFormat": "%m/%d/%Y",
25
- "sortDates": true,
26
- "dateDisplayFormat": "%m/%d/%Y"
125
+ "dateDisplayFormat": "%m/%d/%Y",
126
+ "tickWidthMax": 91,
127
+ "padding": 6
27
128
  },
28
129
  "table": {
29
130
  "label": "Data Table",
30
- "expanded": true,
31
- "download": true
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
32
142
  },
143
+ "orientation": "vertical",
144
+ "color": "pinkpurple",
145
+ "columns": {},
33
146
  "legend": {
147
+ "hide": false,
34
148
  "behavior": "isolate",
35
- "position": "right",
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",
36
164
  "label": "Type of Data"
37
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
+ },
38
230
  "palette": "qualitative-bold",
231
+ "isPaletteReversed": false,
232
+ "twoColor": {
233
+ "palette": "monochrome-1",
234
+ "isPaletteReversed": false
235
+ },
39
236
  "labels": false,
40
- "dataFormat": {},
237
+ "dataFormat": {
238
+ "commas": false,
239
+ "prefix": "",
240
+ "suffix": "",
241
+ "abbreviated": false,
242
+ "bottomSuffix": "",
243
+ "bottomPrefix": "",
244
+ "bottomAbbreviated": false
245
+ },
41
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",
42
390
  "data": [
43
391
  {
44
392
  "Date": "1/15/2016",
@@ -96,30 +444,6 @@
96
444
  }
97
445
  ],
98
446
  "visualizationType": "Line",
99
- "series": [
100
- {
101
- "dataKey": "Data 1",
102
- "type": "Line"
103
- },
104
- {
105
- "dataKey": "Data 2",
106
- "type": "Line"
107
- },
108
- {
109
- "dataKey": "Data 3",
110
- "type": "Line"
111
- },
112
- {
113
- "dataKey": "Data 4",
114
- "type": "Line"
115
- },
116
- {
117
- "dataKey": "Data 5",
118
- "type": "Line"
119
- },
120
- {
121
- "dataKey": "Data 6",
122
- "type": "Line"
123
- }
124
- ]
447
+ "validated": "4.24.3",
448
+ "dynamicMarginTop": 0
125
449
  }