@cdc/markup-include 4.24.4 → 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 +8652 -8437
- package/index.html +3 -5
- package/package.json +3 -3
- package/src/CdcMarkupInclude.tsx +79 -65
- 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/{examples/test.json → src/_stories/_mock/icon-no-text.json} +32 -34
- 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 +0 -1
- 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 -11
- 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 -159
package/index.html
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
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;
|
|
@@ -22,12 +21,11 @@
|
|
|
22
21
|
</head>
|
|
23
22
|
<body>
|
|
24
23
|
<!-- Original -->
|
|
25
|
-
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
26
24
|
|
|
27
25
|
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
|
|
28
|
-
<!-- <div class="react-container" data-config="/
|
|
29
|
-
<!-- <div class="react-container" data-config="/
|
|
30
|
-
|
|
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>
|
|
31
29
|
<script type="module" src="./src/index.jsx"></script>
|
|
32
30
|
</body>
|
|
33
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
1
|
import { useEffect, useCallback, useRef, useReducer, useState } from 'react'
|
|
2
|
-
|
|
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/
|
|
18
|
+
import markupIncludeReducer from './store/markupInclude.reducer'
|
|
19
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,21 +31,21 @@ 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
|
-
const [showConfigConfirm, setShowConfigConfirm] = useState(false)
|
|
39
38
|
|
|
40
39
|
const { config, loading, urlMarkup, markupError, errorMessage, coveLoadedHasRan } = state
|
|
41
40
|
|
|
42
41
|
// Custom States
|
|
43
42
|
const container = useRef()
|
|
44
43
|
|
|
45
|
-
const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
|
|
44
|
+
const { innerContainerClasses, contentClasses } = useDataVizClasses(config || {})
|
|
45
|
+
const { contentEditor, theme } = config || {}
|
|
46
|
+
const data = configObj?.data
|
|
46
47
|
|
|
47
|
-
|
|
48
|
+
const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML } = contentEditor || {}
|
|
48
49
|
|
|
49
50
|
// Default Functions
|
|
50
51
|
const updateConfig = newConfig => {
|
|
@@ -73,7 +74,7 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
73
74
|
response.data = responseData
|
|
74
75
|
const processedConfig = { ...(await coveUpdateWorker(response)) }
|
|
75
76
|
|
|
76
|
-
updateConfig({ ...
|
|
77
|
+
updateConfig({ ...configObj, ...processedConfig })
|
|
77
78
|
dispatch({ type: 'SET_LOADING', payload: false })
|
|
78
79
|
}, [])
|
|
79
80
|
|
|
@@ -81,10 +82,10 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
81
82
|
useEffect(() => {
|
|
82
83
|
if (markupError) {
|
|
83
84
|
let errorCode = markupError
|
|
84
|
-
let message = 'There was a problem retrieving the content from ' +
|
|
85
|
+
let message = 'There was a problem retrieving the content from ' + srcUrl + '. '
|
|
85
86
|
let protocolCheck = /https?:\/\//g
|
|
86
87
|
|
|
87
|
-
if (errorCode === 404 && !
|
|
88
|
+
if (errorCode === 404 && !srcUrl.match(protocolCheck)) {
|
|
88
89
|
errorCode = 'proto' //Capture 404 caused by missing protocols and adjust message
|
|
89
90
|
}
|
|
90
91
|
|
|
@@ -104,15 +105,15 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
104
105
|
const loadConfigMarkupData = useCallback(async () => {
|
|
105
106
|
dispatch({ type: 'SET_MARKUP_ERROR', payload: null })
|
|
106
107
|
|
|
107
|
-
if (
|
|
108
|
-
if (
|
|
108
|
+
if (srcUrl) {
|
|
109
|
+
if (srcUrl === '#example') {
|
|
109
110
|
let payload =
|
|
110
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>'
|
|
111
112
|
|
|
112
113
|
dispatch({ type: 'SET_URL_MARKUP', payload })
|
|
113
114
|
} else {
|
|
114
115
|
try {
|
|
115
|
-
await axios.get(
|
|
116
|
+
await axios.get(srcUrl).then(res => {
|
|
116
117
|
if (res.data) {
|
|
117
118
|
dispatch({ type: 'SET_URL_MARKUP', payload: res.data })
|
|
118
119
|
}
|
|
@@ -132,7 +133,47 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
132
133
|
} else {
|
|
133
134
|
dispatch({ type: 'SET_URL_MARKUP', payload: '' })
|
|
134
135
|
}
|
|
135
|
-
}, [
|
|
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
|
+
}
|
|
136
177
|
|
|
137
178
|
const parseBodyMarkup = markup => {
|
|
138
179
|
let parse
|
|
@@ -174,30 +215,25 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
174
215
|
|
|
175
216
|
let content = <Loading />
|
|
176
217
|
|
|
177
|
-
|
|
178
|
-
let body = (
|
|
179
|
-
<Layout.Responsive isEditor={isEditor}>
|
|
180
|
-
<div className={`cove-component__content ${contentClasses.join(' ')}`}>
|
|
181
|
-
<Title title={title} isDashboard={isDashboard} classes={[`${config.theme}`, 'mb-0']} />
|
|
182
|
-
<div className={`${innerContainerClasses.join(' ')}`}>
|
|
183
|
-
<div className='cove-component__content-wrap'>
|
|
184
|
-
{!markupError && urlMarkup && <Markup content={parseBodyMarkup(urlMarkup)} />}
|
|
185
|
-
{markupError && config.srcUrl && <div className='warning'>{errorMessage}</div>}
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
189
|
-
</Layout.Responsive>
|
|
190
|
-
)
|
|
218
|
+
const markup = useInlineHTML ? convertVariablesInMarkup(inlineHTML) : parseBodyMarkup(urlMarkup)
|
|
191
219
|
|
|
220
|
+
if (loading === false) {
|
|
192
221
|
content = (
|
|
193
222
|
<>
|
|
194
|
-
{isEditor &&
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
{
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
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>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
</Layout.Responsive>
|
|
201
237
|
</>
|
|
202
238
|
)
|
|
203
239
|
}
|
|
@@ -207,28 +243,7 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
207
243
|
<section className='waiting'>
|
|
208
244
|
<section className='waiting-container'>
|
|
209
245
|
<h3>Error With Configuration</h3>
|
|
210
|
-
<p>{config
|
|
211
|
-
</section>
|
|
212
|
-
</section>
|
|
213
|
-
)
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
const Confirm = () => {
|
|
217
|
-
const confirmDone = e => {
|
|
218
|
-
e.preventDefault()
|
|
219
|
-
let newConfig = { ...config }
|
|
220
|
-
delete newConfig.newViz
|
|
221
|
-
updateConfig(newConfig)
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
return (
|
|
225
|
-
<section className='waiting'>
|
|
226
|
-
<section className='waiting-container'>
|
|
227
|
-
<h3>Finish Configuring</h3>
|
|
228
|
-
<p>Set all required options to the left and confirm below to display a preview of the markup.</p>
|
|
229
|
-
<button className='btn' style={{ margin: '1em auto' }} onClick={confirmDone}>
|
|
230
|
-
I'm Done
|
|
231
|
-
</button>
|
|
246
|
+
<p>{config?.runtime.editorErrorMessage}</p>
|
|
232
247
|
</section>
|
|
233
248
|
</section>
|
|
234
249
|
)
|
|
@@ -236,10 +251,9 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
236
251
|
|
|
237
252
|
return (
|
|
238
253
|
<ErrorBoundary component='CdcMarkupInclude'>
|
|
239
|
-
<ConfigContext.Provider value={{ config, updateConfig, loading, data:
|
|
240
|
-
{!config
|
|
241
|
-
{config
|
|
242
|
-
<Layout.VisualizationWrapper config={config} isEditor={isEditor} ref={container} showEditorPanel={config?.showEditorPanel}>
|
|
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}>
|
|
243
257
|
{content}
|
|
244
258
|
</Layout.VisualizationWrapper>
|
|
245
259
|
</ConfigContext.Provider>
|
|
@@ -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
|
+
}
|
|
@@ -1,6 +1,25 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
|
|
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
|
+
},
|
|
4
23
|
"data": [
|
|
5
24
|
{
|
|
6
25
|
"Race": "Hispanic or Latino",
|
|
@@ -23,39 +42,18 @@
|
|
|
23
42
|
"Age-adjusted rate": "183.6"
|
|
24
43
|
}
|
|
25
44
|
],
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
"markupVariables": [
|
|
32
|
-
{
|
|
33
|
-
"columnName": "Race",
|
|
34
|
-
"conditions": [
|
|
35
|
-
{
|
|
36
|
-
"columnName": "Age-adjusted rate",
|
|
37
|
-
"isOrIsNotEqualTo": "is",
|
|
38
|
-
"value": "636.1"
|
|
39
|
-
}
|
|
40
|
-
],
|
|
41
|
-
"name": "test",
|
|
42
|
-
"tag": "{{test}}"
|
|
43
|
-
}
|
|
44
|
-
],
|
|
45
|
-
"showHeader": false,
|
|
46
|
-
"srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Example-Markup-Include.html",
|
|
47
|
-
"title": "",
|
|
48
|
-
"useInlineHTML": true
|
|
49
|
-
},
|
|
45
|
+
"legend": {},
|
|
46
|
+
"newViz": true,
|
|
47
|
+
"theme": "theme-purple",
|
|
48
|
+
"type": "markup-include",
|
|
49
|
+
"runtime": null,
|
|
50
50
|
"visual": {
|
|
51
|
-
"border":
|
|
52
|
-
"accent":
|
|
51
|
+
"border": true,
|
|
52
|
+
"accent": true,
|
|
53
53
|
"background": false,
|
|
54
|
-
"hideBackgroundColor":
|
|
54
|
+
"hideBackgroundColor": true,
|
|
55
55
|
"borderColorTheme": false
|
|
56
56
|
},
|
|
57
|
-
"
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
}
|
|
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
|
+
}
|