@cdc/chart 1.3.1 → 1.3.3

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 (56) hide show
  1. package/dist/cdcchart.js +85 -0
  2. package/examples/age-adjusted-rates.json +1218 -0
  3. package/examples/case-rate-example-config.json +36 -0
  4. package/examples/case-rate-example-data.json +33602 -0
  5. package/examples/covid-confidence-example-config.json +35 -0
  6. package/examples/covid-example-config.json +36 -0
  7. package/examples/covid-example-data-confidence.json +32 -0
  8. package/examples/covid-example-data.json +22 -0
  9. package/examples/cutoff-example-config.json +36 -0
  10. package/examples/cutoff-example-data.json +38 -0
  11. package/examples/date-exclusions-config.json +62 -0
  12. package/examples/date-exclusions-data.json +162 -0
  13. package/examples/horizontal-chart.json +35 -0
  14. package/examples/horizontal-stacked-bar-chart.json +36 -0
  15. package/examples/line-chart.json +76 -0
  16. package/examples/paired-bar-data.json +14 -0
  17. package/examples/paired-bar-example.json +48 -0
  18. package/examples/paired-bar-formatted.json +37 -0
  19. package/examples/planet-chart-horizontal-example-config.json +35 -0
  20. package/examples/planet-combo-example-config.json +31 -0
  21. package/examples/planet-example-config.json +35 -0
  22. package/examples/planet-example-data.json +56 -0
  23. package/examples/planet-pie-example-config.json +28 -0
  24. package/examples/private/newtest.csv +101 -0
  25. package/examples/private/test.json +10124 -0
  26. package/examples/temp-example-config.json +57 -0
  27. package/examples/temp-example-data.json +130 -0
  28. package/package.json +9 -8
  29. package/src/CdcChart.tsx +836 -0
  30. package/src/components/BarChart.tsx +571 -0
  31. package/src/components/BarStackVertical.js +0 -0
  32. package/src/components/DataTable.tsx +229 -0
  33. package/src/components/EditorPanel.js +1319 -0
  34. package/src/components/LineChart.tsx +76 -0
  35. package/src/components/LinearChart.tsx +459 -0
  36. package/src/components/PairedBarChart.tsx +144 -0
  37. package/src/components/PieChart.tsx +189 -0
  38. package/src/components/SparkLine.js +206 -0
  39. package/src/context.tsx +5 -0
  40. package/src/data/initial-state.js +61 -0
  41. package/src/hooks/useActiveElement.js +19 -0
  42. package/src/hooks/useColorPalette.ts +83 -0
  43. package/src/hooks/useReduceData.ts +43 -0
  44. package/src/images/active-checkmark.svg +1 -0
  45. package/src/images/asc.svg +1 -0
  46. package/src/images/desc.svg +1 -0
  47. package/src/images/inactive-checkmark.svg +1 -0
  48. package/src/images/warning.svg +1 -0
  49. package/src/index.html +68 -0
  50. package/src/index.tsx +21 -0
  51. package/src/scss/DataTable.scss +23 -0
  52. package/src/scss/LinearChart.scss +0 -0
  53. package/src/scss/editor-panel.scss +693 -0
  54. package/src/scss/main.scss +426 -0
  55. package/src/scss/mixins.scss +0 -0
  56. package/src/scss/variables.scss +1 -0
package/src/index.html ADDED
@@ -0,0 +1,68 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1, shrink-to-fit=no"
8
+ />
9
+ <style>
10
+ body {
11
+ /* max-width: 1000px; */
12
+ margin: 0 auto !important;
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: center;
16
+ }
17
+ .react-container + .react-container {
18
+ margin-top: 3rem;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
24
+
25
+ <!-- <select id="cove_select">
26
+ <option value=""">Choose An Option</option>
27
+ <option value="Non-Hispanic White">Non-Hispanic White</option>
28
+ <option value="Hispanic or Latino">Test 2</option>
29
+ </select> -->
30
+
31
+ <!-- <div class="react-container" data-config="/examples/covid-example-config.json"></div> -->
32
+ <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
33
+ <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
34
+ <div class="react-container" data-config="/examples/planet-example-config.json"></div>
35
+ <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
36
+ <!-- <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div> -->
37
+ <!-- <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div> -->
38
+ <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
39
+ <!--<div class="react-container" data-config="/examples/case-rate-example-config.json"></div>-->
40
+ <!-- <div class="react-container" data-config="/examples/private/example-bar-chart.json"></div> -->
41
+
42
+ <!-- LINE -->
43
+ <!-- <div class="react-container" data-config="/examples/line-chart.json"></div> -->
44
+
45
+ <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
46
+
47
+ <!-- HORIZONTAL BAR CHARTS -->
48
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
49
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
50
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
51
+
52
+
53
+ <!-- VERTICAL BAR CHARTS -->
54
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
55
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
56
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
57
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-with-confidence.json"></div> -->
58
+ <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
59
+
60
+ <!-- LOLLIPOP CHARTS -->
61
+ <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
62
+
63
+ <!-- PAIRED BAR CHARTS -->
64
+ <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
65
+
66
+ <noscript>You need to enable JavaScript to run this app.</noscript>
67
+ </body>
68
+ </html>
package/src/index.tsx ADDED
@@ -0,0 +1,21 @@
1
+ import { publish, subscribe } from '@cdc/core/helpers/events';
2
+ import React from 'react';
3
+ import { render } from 'react-dom';
4
+
5
+ import CdcChart from './CdcChart';
6
+
7
+ const domContainers = document.querySelectorAll('.react-container');
8
+
9
+ let isEditor = window.location.href.includes('editor=true');
10
+
11
+ domContainers.forEach((domContainer) => {
12
+ render(
13
+ <React.StrictMode>
14
+ <CdcChart
15
+ configUrl={domContainer.attributes['data-config'].value}
16
+ isEditor={isEditor}
17
+ />
18
+ </React.StrictMode>,
19
+ domContainer,
20
+ );
21
+ });
package/src/scss/DataTable.scss ADDED
@@ -0,0 +1,23 @@
1
+ @include breakpointClass(md) {
2
+ .data-table-container {
3
+ margin: 1em;
4
+ }
5
+ }
6
+
7
+ .data-table-container {
8
+ .region-table {
9
+ display: table;
10
+
11
+ thead, tbody {
12
+ display: table-row-group;
13
+
14
+ tr {
15
+ display: table-row;
16
+
17
+ td {
18
+ display: table-cell !important;
19
+ }
20
+ }
21
+ }
22
+ }
23
+ }
package/src/scss/LinearChart.scss ADDED
File without changes