@cdc/markup-include 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.
- package/dist/cdcmarkupinclude.js +8997 -4945
- package/index.html +6 -5
- package/package.json +3 -3
- package/src/CdcMarkupInclude.tsx +92 -36
- package/src/ConfigContext.ts +16 -0
- package/src/_stories/MarkupInclude.stories.tsx +44 -5
- package/src/_stories/_mock/button-and-text.json +69 -0
- package/src/_stories/_mock/icon-no-text.json +59 -0
- package/src/_stories/_mock/image-with-text.json +59 -0
- package/src/_stories/_mock/no-conditions.json +61 -0
- package/src/_stories/_mock/primary.json +23 -0
- package/src/_stories/_mock/with-conditions.json +49 -0
- package/src/cdcMarkupInclude.style.css +39 -0
- package/src/components/Conditions.tsx +99 -0
- package/src/components/EditorPanel.tsx +201 -0
- package/src/components/Variables.tsx +171 -0
- package/src/components/editorPanel.style.css +17 -0
- package/src/data/initial-state.js +13 -4
- package/src/scss/main.scss +30 -2
- package/src/store/{mi.actions.ts → markupInclude.actions.ts} +2 -2
- package/src/store/{mi.reducer.ts → markupInclude.reducer.ts} +3 -3
- package/src/types/Condition.ts +5 -0
- package/src/types/Config.ts +18 -6
- package/src/types/Variable.ts +7 -0
- package/examples/example-config.json +0 -7
- package/examples/gallery/button-and-text.json +0 -31
- package/examples/gallery/icon-no-text.json +0 -31
- package/examples/gallery/image-with-text.json +0 -31
- package/src/ConfigContext.jsx +0 -5
- package/src/components/EditorPanel.jsx +0 -167
package/index.html
CHANGED
|
@@ -5,26 +5,27 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
6
6
|
<style>
|
|
7
7
|
body {
|
|
8
|
-
/* max-width: 1000px; */
|
|
9
8
|
margin: 0 auto !important;
|
|
10
9
|
display: flex;
|
|
11
10
|
flex-direction: column;
|
|
12
11
|
justify-content: center;
|
|
12
|
+
border-top: none !important;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.react-container + .react-container {
|
|
16
16
|
margin-top: 3rem;
|
|
17
17
|
}
|
|
18
18
|
</style>
|
|
19
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423" />
|
|
20
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
|
|
19
21
|
</head>
|
|
20
22
|
<body>
|
|
21
23
|
<!-- Original -->
|
|
22
|
-
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
23
24
|
|
|
24
25
|
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
|
|
25
|
-
<!-- <div class="react-container" data-config="/
|
|
26
|
-
<!-- <div class="react-container" data-config="/
|
|
27
|
-
|
|
26
|
+
<!-- <div class="react-container" data-config="/src/_stories/_mock/icon-no-text.json"></div> -->
|
|
27
|
+
<!-- <div class="react-container" data-config="/src/_stories/_mock/image-with-text.json"></div> -->
|
|
28
|
+
<div class="react-container" data-config="/src/_stories/_mock/button-and-text.json"></div>
|
|
28
29
|
<script type="module" src="./src/index.jsx"></script>
|
|
29
30
|
</body>
|
|
30
31
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/markup-include",
|
|
3
|
-
"version": "4.24.
|
|
3
|
+
"version": "4.24.5",
|
|
4
4
|
"description": "React component for displaying HTML content from an outside link",
|
|
5
5
|
"moduleName": "CdcMarkupInclude",
|
|
6
6
|
"main": "dist/cdcmarkupinclude",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"license": "Apache-2.0",
|
|
27
27
|
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@cdc/core": "^4.24.
|
|
29
|
+
"@cdc/core": "^4.24.5",
|
|
30
30
|
"axios": "^1.6.0",
|
|
31
31
|
"chroma": "0.0.1",
|
|
32
32
|
"chroma-js": "^2.1.0",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"react": "^18.2.0",
|
|
39
39
|
"react-dom": "^18.2.0"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
|
|
42
42
|
}
|
package/src/CdcMarkupInclude.tsx
CHANGED
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import { useEffect, useCallback, useRef, useReducer } from 'react'
|
|
2
|
-
|
|
1
|
+
import { useEffect, useCallback, useRef, useReducer, useState } from 'react'
|
|
2
|
+
import _ from 'lodash'
|
|
3
3
|
// external
|
|
4
4
|
import { Markup } from 'interweave'
|
|
5
5
|
import axios from 'axios'
|
|
6
6
|
|
|
7
7
|
// cdc
|
|
8
|
-
import {
|
|
8
|
+
import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
|
|
9
9
|
import { publish } from '@cdc/core/helpers/events'
|
|
10
10
|
import ConfigContext from './ConfigContext'
|
|
11
11
|
import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
|
|
12
|
+
import EditorPanel from '../src/components/EditorPanel'
|
|
12
13
|
import defaults from './data/initial-state'
|
|
13
|
-
import EditorPanel from './components/EditorPanel'
|
|
14
14
|
|
|
15
15
|
import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
|
|
16
16
|
import Loading from '@cdc/core/components/Loading'
|
|
17
17
|
import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
|
|
18
|
-
import markupIncludeReducer from './store/
|
|
19
|
-
|
|
18
|
+
import markupIncludeReducer from './store/markupInclude.reducer'
|
|
19
|
+
import Layout from '@cdc/core/components/Layout'
|
|
20
20
|
// styles
|
|
21
|
+
import './cdcMarkupInclude.style.css'
|
|
21
22
|
import './scss/main.scss'
|
|
22
23
|
|
|
23
24
|
type CdcMarkupIncludeProps = {
|
|
24
|
-
config:
|
|
25
|
+
config: MarkupIncludeConfig
|
|
25
26
|
configUrl: string
|
|
26
27
|
isDashboard: boolean
|
|
27
28
|
isEditor: boolean
|
|
@@ -30,9 +31,8 @@ type CdcMarkupIncludeProps = {
|
|
|
30
31
|
|
|
31
32
|
import Title from '@cdc/core/components/ui/Title'
|
|
32
33
|
|
|
33
|
-
const CdcMarkupInclude = (
|
|
34
|
-
const {
|
|
35
|
-
const initialState = { config: configObj ?? defaults, loading: true, urlMarkup: '', markupError: null, errorMessage: null, coveLoadedHasRan: false }
|
|
34
|
+
const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config: configObj, isDashboard = true, isEditor = true, setConfig: setParentConfig }) => {
|
|
35
|
+
const initialState = { config: configObj, loading: true, urlMarkup: '', markupError: null, errorMessage: null, coveLoadedHasRan: false }
|
|
36
36
|
|
|
37
37
|
const [state, dispatch] = useReducer(markupIncludeReducer, initialState)
|
|
38
38
|
|
|
@@ -41,9 +41,11 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
41
41
|
// Custom States
|
|
42
42
|
const container = useRef()
|
|
43
43
|
|
|
44
|
-
const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
|
|
44
|
+
const { innerContainerClasses, contentClasses } = useDataVizClasses(config || {})
|
|
45
|
+
const { contentEditor, theme } = config || {}
|
|
46
|
+
const data = configObj?.data
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML } = contentEditor || {}
|
|
47
49
|
|
|
48
50
|
// Default Functions
|
|
49
51
|
const updateConfig = newConfig => {
|
|
@@ -72,7 +74,7 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
72
74
|
response.data = responseData
|
|
73
75
|
const processedConfig = { ...(await coveUpdateWorker(response)) }
|
|
74
76
|
|
|
75
|
-
updateConfig({ ...
|
|
77
|
+
updateConfig({ ...configObj, ...processedConfig })
|
|
76
78
|
dispatch({ type: 'SET_LOADING', payload: false })
|
|
77
79
|
}, [])
|
|
78
80
|
|
|
@@ -80,10 +82,10 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
80
82
|
useEffect(() => {
|
|
81
83
|
if (markupError) {
|
|
82
84
|
let errorCode = markupError
|
|
83
|
-
let message = 'There was a problem retrieving the content from ' +
|
|
85
|
+
let message = 'There was a problem retrieving the content from ' + srcUrl + '. '
|
|
84
86
|
let protocolCheck = /https?:\/\//g
|
|
85
87
|
|
|
86
|
-
if (errorCode === 404 && !
|
|
88
|
+
if (errorCode === 404 && !srcUrl.match(protocolCheck)) {
|
|
87
89
|
errorCode = 'proto' //Capture 404 caused by missing protocols and adjust message
|
|
88
90
|
}
|
|
89
91
|
|
|
@@ -103,15 +105,15 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
103
105
|
const loadConfigMarkupData = useCallback(async () => {
|
|
104
106
|
dispatch({ type: 'SET_MARKUP_ERROR', payload: null })
|
|
105
107
|
|
|
106
|
-
if (
|
|
107
|
-
if (
|
|
108
|
+
if (srcUrl) {
|
|
109
|
+
if (srcUrl === '#example') {
|
|
108
110
|
let payload =
|
|
109
111
|
'<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Header</h1> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> <br> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. </p><br><p>She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek.</p></body></html>'
|
|
110
112
|
|
|
111
113
|
dispatch({ type: 'SET_URL_MARKUP', payload })
|
|
112
114
|
} else {
|
|
113
115
|
try {
|
|
114
|
-
await axios.get(
|
|
116
|
+
await axios.get(srcUrl).then(res => {
|
|
115
117
|
if (res.data) {
|
|
116
118
|
dispatch({ type: 'SET_URL_MARKUP', payload: res.data })
|
|
117
119
|
}
|
|
@@ -131,7 +133,47 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
131
133
|
} else {
|
|
132
134
|
dispatch({ type: 'SET_URL_MARKUP', payload: '' })
|
|
133
135
|
}
|
|
134
|
-
}, [
|
|
136
|
+
}, [srcUrl])
|
|
137
|
+
|
|
138
|
+
const filterOutConditions = (workingData, conditionList) => {
|
|
139
|
+
const { columnName, isOrIsNotEqualTo, value } = conditionList[0]
|
|
140
|
+
|
|
141
|
+
const newWorkingData = isOrIsNotEqualTo === 'is' ? workingData.filter(dataObject => dataObject[columnName] === value) : workingData.filter(dataObject => dataObject[columnName] !== value)
|
|
142
|
+
|
|
143
|
+
conditionList.shift()
|
|
144
|
+
return conditionList.length === 0 ? newWorkingData : filterOutConditions(newWorkingData, conditionList)
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
const convertVariablesInMarkup = inlineMarkup => {
|
|
148
|
+
if (_.isEmpty(markupVariables)) return inlineMarkup
|
|
149
|
+
const variableRegexPattern = /{{(.*?)}}/g
|
|
150
|
+
const convertedInlineMarkup = inlineMarkup.replace(variableRegexPattern, variableTag => {
|
|
151
|
+
const workingVariable = markupVariables.filter(variable => variable.tag === variableTag)[0]
|
|
152
|
+
if (workingVariable === undefined) return [variableTag]
|
|
153
|
+
const workingData = workingVariable && workingVariable.conditions.length === 0 ? data : filterOutConditions(data, [...workingVariable.conditions])
|
|
154
|
+
|
|
155
|
+
const variableValues: string[] = _.uniq(workingData?.map(dataObject => dataObject[workingVariable.columnName]))
|
|
156
|
+
const variableDisplay = []
|
|
157
|
+
|
|
158
|
+
const listConjunction = !isEditor ? 'and' : 'or'
|
|
159
|
+
|
|
160
|
+
const length = variableValues.length
|
|
161
|
+
if (length === 2) {
|
|
162
|
+
variableValues.push(variableValues.join(` ${listConjunction} `))
|
|
163
|
+
}
|
|
164
|
+
if (length > 2) {
|
|
165
|
+
variableValues[length - 1] = `${listConjunction} ${variableValues[length - 1]}`
|
|
166
|
+
}
|
|
167
|
+
variableDisplay.push(variableValues.join(', '))
|
|
168
|
+
|
|
169
|
+
const displayInfoMessage = '<span class="font-weight-bold display-Info-message">One or more of the following values will appear in the place of this variable placeholder:</span>'
|
|
170
|
+
|
|
171
|
+
const newReplacementForVariable = `<span class="cove-tooltip-variable">${variableTag}<span class="cove-tooltip-value">${displayInfoMessage}<br/>${variableDisplay[0]}</span></span><span class="cove-markup-include-variable-value">${variableDisplay[0].trim()}</span>`
|
|
172
|
+
|
|
173
|
+
return newReplacementForVariable
|
|
174
|
+
})
|
|
175
|
+
return convertedInlineMarkup
|
|
176
|
+
}
|
|
135
177
|
|
|
136
178
|
const parseBodyMarkup = markup => {
|
|
137
179
|
let parse
|
|
@@ -173,34 +215,48 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
173
215
|
|
|
174
216
|
let content = <Loading />
|
|
175
217
|
|
|
176
|
-
|
|
218
|
+
const markup = useInlineHTML ? convertVariablesInMarkup(inlineHTML) : parseBodyMarkup(urlMarkup)
|
|
177
219
|
|
|
178
220
|
if (loading === false) {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
<
|
|
183
|
-
<div className=
|
|
184
|
-
<div className=
|
|
185
|
-
{
|
|
186
|
-
|
|
221
|
+
content = (
|
|
222
|
+
<>
|
|
223
|
+
{isEditor && <EditorPanel />}
|
|
224
|
+
<Layout.Responsive isEditor={isEditor}>
|
|
225
|
+
<div className='markup-include-content-container cove-component__content no-borders'>
|
|
226
|
+
<div className={`markup-include-component ${contentClasses.join(' ')}`}>
|
|
227
|
+
<Title title={title} isDashboard={isDashboard} classes={[`${theme}`, 'mb-0']} />
|
|
228
|
+
<div className={`${innerContainerClasses.join(' ')}`}>
|
|
229
|
+
<div className='cove-component__content-wrap'>
|
|
230
|
+
{!markupError && <Markup allowElements={!!urlMarkup} content={markup} />}
|
|
231
|
+
{markupError && srcUrl && <div className='warning'>{errorMessage}</div>}
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
187
234
|
</div>
|
|
188
235
|
</div>
|
|
189
|
-
</
|
|
190
|
-
|
|
236
|
+
</Layout.Responsive>
|
|
237
|
+
</>
|
|
191
238
|
)
|
|
239
|
+
}
|
|
192
240
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
241
|
+
const Error = () => {
|
|
242
|
+
return (
|
|
243
|
+
<section className='waiting'>
|
|
244
|
+
<section className='waiting-container'>
|
|
245
|
+
<h3>Error With Configuration</h3>
|
|
246
|
+
<p>{config?.runtime.editorErrorMessage}</p>
|
|
247
|
+
</section>
|
|
248
|
+
</section>
|
|
198
249
|
)
|
|
199
250
|
}
|
|
200
251
|
|
|
201
252
|
return (
|
|
202
253
|
<ErrorBoundary component='CdcMarkupInclude'>
|
|
203
|
-
<ConfigContext.Provider value={{ config, updateConfig, loading, data:
|
|
254
|
+
<ConfigContext.Provider value={{ config, updateConfig, loading, data: data, setParentConfig, isDashboard }}>
|
|
255
|
+
{!config?.newViz && config?.runtime && config?.runtime.editorErrorMessage && <Error />}
|
|
256
|
+
<Layout.VisualizationWrapper config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
|
|
257
|
+
{content}
|
|
258
|
+
</Layout.VisualizationWrapper>
|
|
259
|
+
</ConfigContext.Provider>
|
|
204
260
|
</ErrorBoundary>
|
|
205
261
|
)
|
|
206
262
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { createContext } from 'react'
|
|
2
|
+
import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
|
|
3
|
+
|
|
4
|
+
type ConfigCTX = {
|
|
5
|
+
config: MarkupIncludeConfig
|
|
6
|
+
data: Object[]
|
|
7
|
+
isDashboard: boolean
|
|
8
|
+
loading: boolean
|
|
9
|
+
setParentConfig: Function
|
|
10
|
+
updateConfig: Function
|
|
11
|
+
showEditorPanel?: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const ConfigContext = createContext({} as unknown as ConfigCTX)
|
|
15
|
+
|
|
16
|
+
export default ConfigContext
|
|
@@ -1,18 +1,57 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
|
-
import ExampleConfig_1 from './../data/initial-state'
|
|
3
2
|
import CdcMarkupInclude from '../CdcMarkupInclude'
|
|
4
|
-
import
|
|
3
|
+
import primary from './_mock/primary.json'
|
|
4
|
+
import noConditions from './_mock/no-conditions.json'
|
|
5
|
+
import withConditions from './_mock/with-conditions.json'
|
|
6
|
+
import buttonAndText from './_mock/button-and-text.json'
|
|
7
|
+
import iconNoText from './_mock/icon-no-text.json'
|
|
8
|
+
import imageWithText from './_mock/image-with-text.json'
|
|
5
9
|
|
|
6
10
|
const meta: Meta<typeof CdcMarkupInclude> = {
|
|
7
|
-
title: 'Components/
|
|
11
|
+
title: 'Components/Pages/Markup Include',
|
|
8
12
|
component: CdcMarkupInclude
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
type Story = StoryObj<typeof CdcMarkupInclude>
|
|
12
16
|
|
|
13
|
-
export const
|
|
17
|
+
export const Primary: Story = {
|
|
14
18
|
args: {
|
|
15
|
-
config:
|
|
19
|
+
config: primary,
|
|
20
|
+
isEditor: false
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const No_Conditions: Story = {
|
|
25
|
+
args: {
|
|
26
|
+
config: noConditions,
|
|
27
|
+
isEditor: false
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export const With_conditions: Story = {
|
|
32
|
+
args: {
|
|
33
|
+
config: withConditions,
|
|
34
|
+
isEditor: false
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export const Button_and_text: Story = {
|
|
39
|
+
args: {
|
|
40
|
+
config: buttonAndText,
|
|
41
|
+
isEditor: false
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export const icon_no_text: Story = {
|
|
46
|
+
args: {
|
|
47
|
+
config: iconNoText,
|
|
48
|
+
isEditor: false
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
export const image_with_text: Story = {
|
|
52
|
+
args: {
|
|
53
|
+
config: imageWithText,
|
|
54
|
+
isEditor: false
|
|
16
55
|
}
|
|
17
56
|
}
|
|
18
57
|
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
{
|
|
2
|
+
"contentEditor": {
|
|
3
|
+
"inlineHTML": "<div>The age adjusted rate for {{race}} was 644.2, compared to Non-Hispanic American Indian, which was {{ageAdjustedRate}}.</div>",
|
|
4
|
+
"markupVariables": [
|
|
5
|
+
{
|
|
6
|
+
"name": "race",
|
|
7
|
+
"tag": "{{race}}",
|
|
8
|
+
"columnName": "Race",
|
|
9
|
+
"conditions": [
|
|
10
|
+
{
|
|
11
|
+
"columnName": "Age-adjusted rate",
|
|
12
|
+
"isOrIsNotEqualTo": "is",
|
|
13
|
+
"value": "644.2"
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "ageAdjustedRate",
|
|
19
|
+
"tag": "{{ageAdjustedRate}}",
|
|
20
|
+
"columnName": "Age-adjusted rate",
|
|
21
|
+
"conditions": [
|
|
22
|
+
{
|
|
23
|
+
"columnName": "Race",
|
|
24
|
+
"isOrIsNotEqualTo": "is",
|
|
25
|
+
"value": "Non-Hispanic American Indian"
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
],
|
|
30
|
+
"showHeader": false,
|
|
31
|
+
"srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Markup-Include-Button-and-Text.html",
|
|
32
|
+
"title": "",
|
|
33
|
+
"useInlineHTML": false
|
|
34
|
+
},
|
|
35
|
+
"data": [
|
|
36
|
+
{
|
|
37
|
+
"Race": "Hispanic or Latino",
|
|
38
|
+
"Age-adjusted rate": "644.2"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"Race": "Non-Hispanic American Indian",
|
|
42
|
+
"Age-adjusted rate": "636.1"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"Race": "Non-Hispanic Black",
|
|
46
|
+
"Age-adjusted rate": "563.7"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
50
|
+
"Age-adjusted rate": "202.5"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"Race": "Non-Hispanic White",
|
|
54
|
+
"Age-adjusted rate": "183.6"
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
"legend": {},
|
|
58
|
+
"newViz": true,
|
|
59
|
+
"theme": "theme-amber",
|
|
60
|
+
"type": "markup-include",
|
|
61
|
+
"runtime": null,
|
|
62
|
+
"visual": {
|
|
63
|
+
"border": false,
|
|
64
|
+
"accent": true,
|
|
65
|
+
"background": true,
|
|
66
|
+
"hideBackgroundColor": false,
|
|
67
|
+
"borderColorTheme": false
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"contentEditor": {
|
|
3
|
+
"inlineHTML": "<div>{{race}} did not have an age adjusted rate of 644.2.</div>",
|
|
4
|
+
"markupVariables": [
|
|
5
|
+
{
|
|
6
|
+
"name": "race",
|
|
7
|
+
"tag": "{{race}}",
|
|
8
|
+
"columnName": "Race",
|
|
9
|
+
"conditions": [
|
|
10
|
+
{
|
|
11
|
+
"columnName": "Age-adjusted rate",
|
|
12
|
+
"isOrIsNotEqualTo": "isNot",
|
|
13
|
+
"value": "644.2"
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
|
+
}
|
|
17
|
+
],
|
|
18
|
+
"showHeader": false,
|
|
19
|
+
"srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Example-Markup-Include.html",
|
|
20
|
+
"title": "",
|
|
21
|
+
"useInlineHTML": false
|
|
22
|
+
},
|
|
23
|
+
"data": [
|
|
24
|
+
{
|
|
25
|
+
"Race": "Hispanic or Latino",
|
|
26
|
+
"Age-adjusted rate": "644.2"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"Race": "Non-Hispanic American Indian",
|
|
30
|
+
"Age-adjusted rate": "636.1"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"Race": "Non-Hispanic Black",
|
|
34
|
+
"Age-adjusted rate": "563.7"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
38
|
+
"Age-adjusted rate": "202.5"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"Race": "Non-Hispanic White",
|
|
42
|
+
"Age-adjusted rate": "183.6"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"legend": {},
|
|
46
|
+
"newViz": true,
|
|
47
|
+
"theme": "theme-purple",
|
|
48
|
+
"type": "markup-include",
|
|
49
|
+
"runtime": null,
|
|
50
|
+
"visual": {
|
|
51
|
+
"border": true,
|
|
52
|
+
"accent": true,
|
|
53
|
+
"background": false,
|
|
54
|
+
"hideBackgroundColor": true,
|
|
55
|
+
"borderColorTheme": false
|
|
56
|
+
},
|
|
57
|
+
"isEditor": true,
|
|
58
|
+
"showEditorPanel": true
|
|
59
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"contentEditor": {
|
|
3
|
+
"inlineHTML": "<div>{{race}} did not have an age adjusted rate of 644.2.</div>",
|
|
4
|
+
"markupVariables": [
|
|
5
|
+
{
|
|
6
|
+
"name": "race",
|
|
7
|
+
"tag": "{{race}}",
|
|
8
|
+
"columnName": "Race",
|
|
9
|
+
"conditions": [
|
|
10
|
+
{
|
|
11
|
+
"columnName": "Age-adjusted rate",
|
|
12
|
+
"isOrIsNotEqualTo": "isNot",
|
|
13
|
+
"value": "644.2"
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
|
+
}
|
|
17
|
+
],
|
|
18
|
+
"showHeader": false,
|
|
19
|
+
"srcUrl": "/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Image-With-Text.html",
|
|
20
|
+
"title": "<strong>Markup Include</strong> - Image with Text",
|
|
21
|
+
"useInlineHTML": false
|
|
22
|
+
},
|
|
23
|
+
"data": [
|
|
24
|
+
{
|
|
25
|
+
"Race": "Hispanic or Latino",
|
|
26
|
+
"Age-adjusted rate": "644.2"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"Race": "Non-Hispanic American Indian",
|
|
30
|
+
"Age-adjusted rate": "636.1"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"Race": "Non-Hispanic Black",
|
|
34
|
+
"Age-adjusted rate": "563.7"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
38
|
+
"Age-adjusted rate": "202.5"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"Race": "Non-Hispanic White",
|
|
42
|
+
"Age-adjusted rate": "183.6"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"legend": {},
|
|
46
|
+
"newViz": true,
|
|
47
|
+
"theme": "theme-slate",
|
|
48
|
+
"type": "markup-include",
|
|
49
|
+
"runtime": null,
|
|
50
|
+
"visual": {
|
|
51
|
+
"border": false,
|
|
52
|
+
"accent": true,
|
|
53
|
+
"background": true,
|
|
54
|
+
"hideBackgroundColor": false,
|
|
55
|
+
"borderColorTheme": false
|
|
56
|
+
},
|
|
57
|
+
"isEditor": true,
|
|
58
|
+
"showEditorPanel": true
|
|
59
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"contentEditor": {
|
|
3
|
+
"inlineHTML": "<div>In the state of {{state}}, the overall rate was {{rate}} for {{location}}</div> <div>For more information visit {{url}}{{state}}/{{location}}</div>",
|
|
4
|
+
"markupVariables": [
|
|
5
|
+
{
|
|
6
|
+
"name": "state",
|
|
7
|
+
"tag": "{{state}}",
|
|
8
|
+
"columnName": "STATE",
|
|
9
|
+
"conditions": []
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"name": "rate",
|
|
13
|
+
"tag": "{{rate}}",
|
|
14
|
+
"columnName": "Rate",
|
|
15
|
+
"conditions": []
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "location",
|
|
19
|
+
"tag": "{{location}}",
|
|
20
|
+
"columnName": "Location",
|
|
21
|
+
"conditions": []
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "url",
|
|
25
|
+
"tag": "{{url}}",
|
|
26
|
+
"columnName": "URL",
|
|
27
|
+
"conditions": []
|
|
28
|
+
}
|
|
29
|
+
],
|
|
30
|
+
"showHeader": true,
|
|
31
|
+
"srcUrl": "#example",
|
|
32
|
+
"title": "Current Rate by Location",
|
|
33
|
+
"useInlineHTML": true
|
|
34
|
+
},
|
|
35
|
+
"data": [
|
|
36
|
+
{
|
|
37
|
+
"STATE": "Alabama",
|
|
38
|
+
"Rate": "130",
|
|
39
|
+
"Location": "Vehicle",
|
|
40
|
+
"URL": "https://www.cdc.gov/"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"STATE": "Alaska",
|
|
44
|
+
"Rate": "80",
|
|
45
|
+
"Location": "Home",
|
|
46
|
+
"URL": "https://www.cdc.gov/"
|
|
47
|
+
}
|
|
48
|
+
],
|
|
49
|
+
"legend": {},
|
|
50
|
+
"newViz": true,
|
|
51
|
+
"theme": "theme-blue",
|
|
52
|
+
"type": "markup-include",
|
|
53
|
+
"runtime": null,
|
|
54
|
+
"visual": {
|
|
55
|
+
"border": false,
|
|
56
|
+
"accent": false,
|
|
57
|
+
"background": false,
|
|
58
|
+
"hideBackgroundColor": false,
|
|
59
|
+
"borderColorTheme": false
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"contentEditor": {
|
|
3
|
+
"inlineHTML": "<h2>Inline HTML</h2>",
|
|
4
|
+
"markupVariables": [],
|
|
5
|
+
"showHeader": true,
|
|
6
|
+
"srcUrl": "#example",
|
|
7
|
+
"title": "Markup Include",
|
|
8
|
+
"useInlineHTML": false
|
|
9
|
+
},
|
|
10
|
+
"data": [],
|
|
11
|
+
"legend": {},
|
|
12
|
+
"newViz": true,
|
|
13
|
+
"theme": "theme-blue",
|
|
14
|
+
"type": "markup-include",
|
|
15
|
+
"runtime": null,
|
|
16
|
+
"visual": {
|
|
17
|
+
"border": false,
|
|
18
|
+
"accent": false,
|
|
19
|
+
"background": false,
|
|
20
|
+
"hideBackgroundColor": false,
|
|
21
|
+
"borderColorTheme": false
|
|
22
|
+
}
|
|
23
|
+
}
|