@cdc/filtered-text 4.23.1 → 4.23.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.
- package/dist/cdcfilteredtext.js +5326 -0
- package/examples/example-config.json +7 -0
- package/examples/sex-ageGroup-no-values.json +86 -0
- package/examples/sex-ageGroup-with-values.json +86 -0
- package/examples/sex-no-values-markup-test.json +14 -0
- package/index.html +29 -0
- package/package.json +20 -27
- package/src/CdcFilteredText.jsx +153 -0
- package/src/ConfigContext.jsx +5 -0
- package/src/components/EditorPanel.jsx +299 -0
- package/src/data/initial-state.js +16 -0
- package/src/index.jsx +15 -0
- package/src/scss/main.scss +11 -0
- package/vite.config.js +4 -0
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"Sex": "Male",
|
|
4
|
+
"Age Group": "<15",
|
|
5
|
+
"Text": "Male <15 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END",
|
|
6
|
+
"": "Male <15 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"Sex": "Male",
|
|
10
|
+
"Age Group": "15-24",
|
|
11
|
+
"Text": "Male 15-24 Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<sup>14</sup> END",
|
|
12
|
+
"": "Male 15-24 Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<sup>14</sup> END"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"Sex": "Male",
|
|
16
|
+
"Age Group": "25-34",
|
|
17
|
+
"Text": "Male 25-34 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a>END",
|
|
18
|
+
"": "Male 25-34 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a>END"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"Sex": "Male",
|
|
22
|
+
"Age Group": "35-44",
|
|
23
|
+
"Text": "Male 35-44 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
|
|
24
|
+
"": "Male 35-44 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"Sex": "Male",
|
|
28
|
+
"Age Group": "45-54",
|
|
29
|
+
"Text": "Male 45-54 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
|
|
30
|
+
"": "Male 45-54 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"Sex": "Male",
|
|
34
|
+
"Age Group": "55-64",
|
|
35
|
+
"Text": "Male 55-64 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
|
|
36
|
+
"": "Male 55-64 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"Sex": "Male",
|
|
40
|
+
"Age Group": "65+",
|
|
41
|
+
"Text": "Male 65+ Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END",
|
|
42
|
+
"": "Male 65+ Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"Sex": "Female",
|
|
46
|
+
"Age Group": "<15",
|
|
47
|
+
"Text": "Female <15 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END",
|
|
48
|
+
"": "Female <15 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"Sex": "Female",
|
|
52
|
+
"Age Group": "15-24",
|
|
53
|
+
"Text": "Female 15-24 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a>END",
|
|
54
|
+
"": "Female 15-24 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a>END"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"Sex": "Female",
|
|
58
|
+
"Age Group": "25-34",
|
|
59
|
+
"Text": "Female 25-34 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
60
|
+
"": "Female 25-34 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"Sex": "Female",
|
|
64
|
+
"Age Group": "35-44",
|
|
65
|
+
"Text": "Female 35-44 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
|
|
66
|
+
"": "Female 35-44 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"Sex": "Female",
|
|
70
|
+
"Age Group": "45-54",
|
|
71
|
+
"Text": "Female 45-54 Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<sup>14</sup> END",
|
|
72
|
+
"": "Female 45-54 Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<sup>14</sup> END"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"Sex": "Female",
|
|
76
|
+
"Age Group": "55-64",
|
|
77
|
+
"Text": "Female 55-64 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END",
|
|
78
|
+
"": "Female 55-64 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"Sex": "Female",
|
|
82
|
+
"Age Group": "65+",
|
|
83
|
+
"Text": "Female 65+ Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END",
|
|
84
|
+
"": "Female 65+ Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
85
|
+
}
|
|
86
|
+
]
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"Sex": "Male",
|
|
4
|
+
"Age Group": "<15",
|
|
5
|
+
"Total Cases": "564",
|
|
6
|
+
"Text": "Male <15 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"Sex": "Male",
|
|
10
|
+
"Age Group": "15-24",
|
|
11
|
+
"Total Cases": "688",
|
|
12
|
+
"Text": "Male 15-24 Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<sup>14</sup> END"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"Sex": "Male",
|
|
16
|
+
"Age Group": "25-34",
|
|
17
|
+
"Total Cases": "672",
|
|
18
|
+
"Text": "Male 25-34 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a>END"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"Sex": "Male",
|
|
22
|
+
"Age Group": "35-44",
|
|
23
|
+
"Total Cases": "469",
|
|
24
|
+
"Text": "Male 35-44 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"Sex": "Male",
|
|
28
|
+
"Age Group": "45-54",
|
|
29
|
+
"Total Cases": "380",
|
|
30
|
+
"Text": "Male 45-54 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"Sex": "Male",
|
|
34
|
+
"Age Group": "55-64",
|
|
35
|
+
"Total Cases": "252",
|
|
36
|
+
"Text": "Male 55-64 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"Sex": "Male",
|
|
40
|
+
"Age Group": "65+",
|
|
41
|
+
"Total Cases": "248",
|
|
42
|
+
"Text": "Male 65+ Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"Sex": "Female",
|
|
46
|
+
"Age Group": "<15",
|
|
47
|
+
"Total Cases": "360",
|
|
48
|
+
"Text": "Female <15 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"Sex": "Female",
|
|
52
|
+
"Age Group": "15-24",
|
|
53
|
+
"Total Cases": "420",
|
|
54
|
+
"Text": "Female 15-24 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a>END"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"Sex": "Female",
|
|
58
|
+
"Age Group": "25-34",
|
|
59
|
+
"Total Cases": "542",
|
|
60
|
+
"Text": "Female 25-34 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"Sex": "Female",
|
|
64
|
+
"Age Group": "35-44",
|
|
65
|
+
"Total Cases": "422",
|
|
66
|
+
"Text": "Female 35-44 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"Sex": "Female",
|
|
70
|
+
"Age Group": "45-54",
|
|
71
|
+
"Total Cases": "220",
|
|
72
|
+
"Text": "Female 45-54 Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<sup>14</sup> END"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"Sex": "Female",
|
|
76
|
+
"Age Group": "55-64",
|
|
77
|
+
"Total Cases": "120",
|
|
78
|
+
"Text": "Female 55-64 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"Sex": "Female",
|
|
82
|
+
"Age Group": "65+",
|
|
83
|
+
"Total Cases": "65",
|
|
84
|
+
"Text": "Female 65+ Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
85
|
+
}
|
|
86
|
+
]
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"Sex": "Male",
|
|
4
|
+
"Text": "<strong>Male</strong> Text Test: Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<sub>Sub Text</sub> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<sup>14</sup> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
"Sex": "Female",
|
|
8
|
+
"Text": "<strong>Female</strong> Text Test: Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<sub>Sub Text</sub> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<sup>14</sup> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href=\"https://www.cdc.gov/wcms/4.0/cdc-wp/index.html\">Link Text</a> <sub>Sub Text</sub> END"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"Sex": "x",
|
|
12
|
+
"Text": ""
|
|
13
|
+
}
|
|
14
|
+
]
|
package/index.html
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
6
|
+
<style>
|
|
7
|
+
body {
|
|
8
|
+
margin: 0;
|
|
9
|
+
}
|
|
10
|
+
</style>
|
|
11
|
+
<style>
|
|
12
|
+
body {
|
|
13
|
+
/* max-width: 1000px; */
|
|
14
|
+
margin: 0 auto !important;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.react-container + .react-container {
|
|
21
|
+
margin-top: 3rem;
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
27
|
+
<script type="module" src="./src/index.jsx"></script>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,42 +1,35 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/filtered-text",
|
|
3
|
-
"version": "4.23.
|
|
3
|
+
"version": "4.23.2",
|
|
4
4
|
"description": "React component for adding filtered text on dashboards.",
|
|
5
|
-
"
|
|
6
|
-
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
7
|
-
"license": "Apache-2.0",
|
|
5
|
+
"moduleName": "CdcFilteredText",
|
|
8
6
|
"main": "dist/cdcfilteredtext",
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
"
|
|
7
|
+
"type": "module",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"start": "vite --open",
|
|
10
|
+
"build": "vite build",
|
|
11
|
+
"preview": "vite preview",
|
|
12
|
+
"graph": "nx graph",
|
|
13
|
+
"prepublishOnly": "lerna run --scope @cdc/filtered-text build"
|
|
12
14
|
},
|
|
13
|
-
"files": [
|
|
14
|
-
"lib"
|
|
15
|
-
],
|
|
16
15
|
"repository": {
|
|
17
16
|
"type": "git",
|
|
18
17
|
"url": "git+https://github.com/CDCgov/cdc-open-viz.git"
|
|
19
18
|
},
|
|
20
|
-
"
|
|
21
|
-
"start": "npx webpack serve --mode development -c ../../webpack.config.js",
|
|
22
|
-
"build": "npx webpack --mode production --env packageName=CdcFilteredText --env folderName=filtered-text -c ../../webpack.config.js",
|
|
23
|
-
"prepublishOnly": "lerna run --scope @cdc/filtered-text build"
|
|
24
|
-
},
|
|
19
|
+
"author": "Adam Doe <rsq2@cdc.gov>",
|
|
25
20
|
"bugs": {
|
|
26
21
|
"url": "https://github.com/CDCgov/cdc-open-viz/issues"
|
|
27
22
|
},
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
"react-dom": ">=16"
|
|
31
|
-
},
|
|
32
|
-
"resolutions": {
|
|
33
|
-
"@types/react": "17.x"
|
|
34
|
-
},
|
|
23
|
+
"license": "Apache-2.0",
|
|
24
|
+
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
35
25
|
"dependencies": {
|
|
36
|
-
"@cdc/core": "^4.23.
|
|
37
|
-
"html-react-parser": "^
|
|
38
|
-
"papaparse": "^5.3.2"
|
|
39
|
-
|
|
26
|
+
"@cdc/core": "^4.23.2",
|
|
27
|
+
"html-react-parser": "^3.0.8",
|
|
28
|
+
"papaparse": "^5.3.2"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"react": "^18.2.0",
|
|
32
|
+
"react-dom": "^18.2.0"
|
|
40
33
|
},
|
|
41
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "cd4216f47b1c41bfbc1de3b704f70c52cc7293c2"
|
|
42
35
|
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
|
|
4
|
+
import DataTransform from '@cdc/core/helpers/DataTransform'
|
|
5
|
+
import Loading from '@cdc/core/components/Loading'
|
|
6
|
+
import EditorPanel from './components/EditorPanel'
|
|
7
|
+
import defaults from './data/initial-state'
|
|
8
|
+
import ConfigContext from './ConfigContext'
|
|
9
|
+
import parse from 'html-react-parser'
|
|
10
|
+
import './scss/main.scss'
|
|
11
|
+
|
|
12
|
+
import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
|
|
13
|
+
|
|
14
|
+
const CdcFilteredText = ({ configObj, configUrl, isDashboard = false, isEditor = false, setConfig: setParentConfig }) => {
|
|
15
|
+
|
|
16
|
+
const transform = new DataTransform()
|
|
17
|
+
// Default States
|
|
18
|
+
const [config, setConfig] = useState(defaults)
|
|
19
|
+
const [loading, setLoading] = useState(true)
|
|
20
|
+
const [stateData, setStateData] = useState(config.data || [])
|
|
21
|
+
const [excludedData, setExcludedData] = useState()
|
|
22
|
+
let { title, filters } = config
|
|
23
|
+
const fontSize = config.fontSize === 'small' ? '16px' : config.fontSize === 'medium' ? '22px' : '27px'
|
|
24
|
+
|
|
25
|
+
const { contentClasses } = useDataVizClasses(config)
|
|
26
|
+
|
|
27
|
+
// Default Functions
|
|
28
|
+
|
|
29
|
+
const loadConfig = async () => {
|
|
30
|
+
let response = configObj || (await (await fetch(configUrl)).json())
|
|
31
|
+
// If data is included through a URL, fetch that and store
|
|
32
|
+
let data = response.formattedData || response.data || {}
|
|
33
|
+
|
|
34
|
+
if (response.dataUrl) {
|
|
35
|
+
const dataString = await fetch(response.dataUrl)
|
|
36
|
+
|
|
37
|
+
data = await dataString.json()
|
|
38
|
+
if (response.dataDescription) {
|
|
39
|
+
data = transform.autoStandardize(data)
|
|
40
|
+
data = transform.developerStandardize(data, response.dataDescription)
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (data) {
|
|
45
|
+
setStateData(data)
|
|
46
|
+
setExcludedData(data)
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
let newConfig = { ...config, ...response }
|
|
50
|
+
updateConfig(newConfig)
|
|
51
|
+
setLoading(false)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
const updateConfig = newConfig => {
|
|
55
|
+
Object.keys(defaults).forEach(key => {
|
|
56
|
+
if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
|
|
57
|
+
newConfig[key] = { ...defaults[key], ...newConfig[key] }
|
|
58
|
+
}
|
|
59
|
+
})
|
|
60
|
+
|
|
61
|
+
newConfig.runtime = {}
|
|
62
|
+
newConfig.runtime.uniqueId = Date.now()
|
|
63
|
+
|
|
64
|
+
newConfig.runtime.editorErrorMessage = ''
|
|
65
|
+
setConfig(newConfig)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const filterByTextColumn = () => {
|
|
69
|
+
let filteredData = []
|
|
70
|
+
|
|
71
|
+
if (filters.length) {
|
|
72
|
+
filters.map(filter => {
|
|
73
|
+
if (filter.columnName && filter.columnValue) {
|
|
74
|
+
return (filteredData = stateData.filter(function (e) {
|
|
75
|
+
return e[filter.columnName] === filter.columnValue
|
|
76
|
+
}))
|
|
77
|
+
} else {
|
|
78
|
+
return null
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
} else {
|
|
82
|
+
// filter by textColumn if selected
|
|
83
|
+
return (filteredData = stateData.filter((e, index) => {
|
|
84
|
+
return e[config.textColumn] && index === 0
|
|
85
|
+
}))
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
return filteredData
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
//Load initial config
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
loadConfig().catch(err => console.log(err))
|
|
94
|
+
}, []) // eslint-disable-line
|
|
95
|
+
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
if (configObj && !configObj.dataUrl) {
|
|
98
|
+
updateConfig({ ...defaults, ...configObj })
|
|
99
|
+
setStateData(configObj.data)
|
|
100
|
+
setExcludedData(configObj.data)
|
|
101
|
+
}
|
|
102
|
+
}, [configObj?.data]) // eslint-disable-line
|
|
103
|
+
|
|
104
|
+
let content = <Loading />
|
|
105
|
+
|
|
106
|
+
if (loading === false) {
|
|
107
|
+
let body = (
|
|
108
|
+
<>
|
|
109
|
+
{title && (
|
|
110
|
+
<header style={{ fontSize }} className={`cove-component__header ${config.theme} `}>
|
|
111
|
+
{parse(title)}
|
|
112
|
+
</header>
|
|
113
|
+
)}
|
|
114
|
+
<div className={contentClasses.join(' ')}>
|
|
115
|
+
<div className='cove-component__content-wrap'>
|
|
116
|
+
{filterByTextColumn()
|
|
117
|
+
.slice(0, 1)
|
|
118
|
+
.map((el, i) => (
|
|
119
|
+
<p style={{ fontSize }} key={i}>
|
|
120
|
+
{' '}
|
|
121
|
+
{parse(el[config.textColumn] || '')}{' '}
|
|
122
|
+
</p>
|
|
123
|
+
))}
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</>
|
|
127
|
+
)
|
|
128
|
+
|
|
129
|
+
content = (
|
|
130
|
+
<div className={`cove ${config.theme} `} style={isDashboard ? { marginTop: '3rem' } : null}>
|
|
131
|
+
{isEditor && <EditorPanel>{body}</EditorPanel>}
|
|
132
|
+
{!isEditor && body}
|
|
133
|
+
</div>
|
|
134
|
+
)
|
|
135
|
+
}
|
|
136
|
+
const values = {
|
|
137
|
+
config,
|
|
138
|
+
updateConfig,
|
|
139
|
+
loading,
|
|
140
|
+
setParentConfig,
|
|
141
|
+
isDashboard,
|
|
142
|
+
stateData,
|
|
143
|
+
unfilteredData: stateData
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
return (
|
|
147
|
+
<ErrorBoundary component='CdcFilteredText'>
|
|
148
|
+
<ConfigContext.Provider value={values}>{content}</ConfigContext.Provider>
|
|
149
|
+
</ErrorBoundary>
|
|
150
|
+
)
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
export default CdcFilteredText
|