npm - @cdc/data-bite - Versions diffs - 4.24.2 → 4.24.4 - Mend

@cdc/data-bite 4.24.2 → 4.24.4

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 (13) hide show

package/dist/cdcdatabite.js +9158 -5287
package/examples/sankey/data-2.json +6 -0
package/examples/sankey/data.json +6 -0
package/examples/sankey-example-data.json +110 -0
package/index.html +9 -2
package/package.json +3 -3
package/src/CdcDataBite.tsx +85 -13
package/src/components/EditorPanel.jsx +10 -79
package/src/components/GradientBite.jsx +23 -0
package/src/scss/bite.scss +16 -11
package/src/scss/editor-panel.scss +1 -1
package/src/scss/kpi.scss +68 -0
package/src/scss/main.scss +1 -1

package/examples/sankey/data-2.json ADDED Viewed

@@ -0,0 +1,6 @@
+[
+  {
+    "Text": "Number of Deaths",
+    "Value": "4736"
+  }
+]

package/examples/sankey/data.json ADDED Viewed

@@ -0,0 +1,6 @@
+[
+  {
+    "Text": "Number of EMS Responses",
+    "Value": "467136"
+  }
+]

package/examples/sankey-example-data.json ADDED Viewed

@@ -0,0 +1,110 @@
+{
+  "type": "data-bite",
+  "data": [
+    {
+      "Text": "Number of EMS Responses",
+      "Value": "467136"
+    }
+  ],
+  "dataBite": "",
+  "dataFunction": "Max",
+  "dataColumn": "Value",
+  "bitePosition": "Left",
+  "biteFontSize": 24,
+  "fontSize": "medium",
+  "biteBody": "",
+  "imageData": {
+    "display": "none",
+    "url": "",
+    "alt": "",
+    "options": []
+  },
+  "dataFormat": {
+    "roundToPlace": "",
+    "commas": true,
+    "prefix": "",
+    "suffix": ""
+  },
+  "biteStyle": "gradient",
+  "filters": [],
+  "subtext": "",
+  "title": "Total number of suicide EMS responses",
+  "theme": "theme-blue",
+  "shadow": false,
+  "visual": {
+    "border": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false
+  },
+  "general": {
+    "isCompactStyle": false
+  },
+  "showTitle": true,
+  "enableTooltips": true,
+  "enableStoryNodes": true,
+  "legend": {
+    "hide": true
+  },
+  "heights": {
+    "vertical": 300,
+    "horizontal": 369.59999999999997
+  },
+  "xAxis": {
+    "anchors": [],
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": true,
+    "hideLabel": true,
+    "hideTicks": true,
+    "size": "59",
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 180,
+    "axisPadding": 0,
+    "target": 0,
+    "dataKey": "Disposition",
+    "label": "X Axis Example Label"
+  },
+  "series": [
+    {
+      "dataKey": "Type of Treatment",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Final Outcome",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Number of Patients",
+      "type": "Bar"
+    }
+  ],
+  "table": {
+    "label": "Sankey Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": true,
+    "showDataTableLink": true,
+    "indexLabel": "Disposition",
+    "download": true,
+    "showVertical": true,
+    "show": true
+  },
+  "footnotes": "**Counts fewer than 20 are suppressed for confidentiality reasons.<br></br><br><strong>Footnotes</strong></br> 2022 Biospatial Emergency Medical Services (EMS) records. Biospatial combines electronic EMS patient care records with other electronic healthcare data. EMS records are generated by medics to document prehospital care and collected according to the National EMS Information System (NEMSIS) standard. Currently the Biospatial platform receives EMS data from 24 full states and 18 partial states.",
+  "visualizationType": "Sankey",
+  "validated": 4.23,
+  "runtime": {
+    "uniqueId": 1706633133063,
+    "editorErrorMessage": ""
+  }
+}

package/index.html CHANGED Viewed

@@ -6,15 +6,22 @@
     <style>
       body {
         margin: 0;
+        border-top: none !important;
+      }
+      .cdc-open-viz-module {
+        min-height: 100vh;
       }
     </style>
+    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423" />
+    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
   </head>
   <body>
     <!-- Original -->
-    <div class="react-container" data-config="/examples/example-config.json"></div>
+    <!-- <div class="react-container" data-config="/examples/sankey-example-data.json"></div> -->
     <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data_bites.html#examples -->
-    <!-- <div class="react-container" data-config="/examples/gallery/calculated-average.json"></div> -->
+    <div class="react-container" data-config="/examples/gallery/calculated-average.json"></div>
     <!-- <div class="react-container" data-config="/examples/gallery/calculated-with-pic.json"></div> -->
     <div class="react-container" data-config="/examples/gallery/max-value.json"></div>
     <!-- <div class="react-container" data-config="/examples/gallery/sum-of-data.json"></div> -->

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.24.2",
+  "version": "4.24.4",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcDataBite",
   "main": "dist/cdcdatabite",
@@ -26,7 +26,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.24.2",
+    "@cdc/core": "^4.24.4",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
     "html-react-parser": "^3.0.8",
@@ -39,5 +39,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "edde49c96dee146de5e3a4537880b1bcf4dbee08"
+  "gitHead": "1843b4632140d582af6a87606374cbd4fe25ad5c"
 }

package/src/CdcDataBite.tsx CHANGED Viewed

@@ -10,6 +10,8 @@ import EditorPanel from './components/EditorPanel'
 import Loading from '@cdc/core/components/Loading'
 import Title from '@cdc/core/components/ui/Title'
 import CircleCallout from './components/CircleCallout'
+import GradientBite from './components/GradientBite'
+import Layout from '@cdc/core/components/Layout'
 // external
 import ResizeObserver from 'resize-observer-polyfill'
@@ -447,13 +449,75 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
         break
     }
-    const showBite = undefined !== dataColumn && undefined !== dataFunction
+    const missingRequiredSections = () => {
+      //Whether to show error message if something is required to show a data-bite and isn't filled in
+      return false
+    }
+    const Error = () => {
+      const styles = {
+        position: 'absolute',
+        background: 'white',
+        zIndex: '999',
+        height: '100vh',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gridArea: 'content'
+      }
+      return (
+        <section className='waiting' style={styles}>
+          <section className='waiting-container'>
+            <h3>Error With Configuration</h3>
+            <p>{config.runtime.editorErrorMessage}</p>
+          </section>
+        </section>
+      )
+    }
+    const Confirm = () => {
+      const styles = {
+        position: 'absolute',
+        background: 'white',
+        zIndex: '999',
+        height: '100vh',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gridArea: 'content'
+      }
+      return (
+        <section className='waiting' style={styles}>
+          <section className='waiting-container'>
+            <h3>Finish Configuring</h3>
+            <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
+            <button
+              className='btn'
+              style={{ margin: '1em auto' }}
+              disabled={missingRequiredSections()}
+              onClick={e => {
+                e.preventDefault()
+                updateConfig({ ...config, newViz: false })
+              }}
+            >
+              I'm Done
+            </button>
+          </section>
+        </section>
+      )
+    }
+    const showBite = undefined !== dataColumn && undefined !== dataFunction
     body = (
       <>
         {isEditor && <EditorPanel />}
-        <div className={isEditor ? 'spacing-wrapper' : ''}>
-          <div className={innerContainerClasses.join(' ')}>
+        <Layout.Responsive isEditor={isEditor}>
+          <div className={`${contentClasses.join(' ')}`}>
+            {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
+            {(!config.dataColumn || !config.dataFunction) && <Confirm />}
             <Title config={config} title={title} isDashboard={isDashboard} classes={['bite-header', `${config.theme}`]} />
             <div className={`bite ${biteClasses.join(' ')}`}>
               <div className={`bite-content-container ${contentClasses.join(' ')}`}>
@@ -495,21 +559,28 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
             </div>
           </div>
           {link && link}
-        </div>
+        </Layout.Responsive>
       </>
     )
   }
-  let classNames = ['cove', 'cdc-open-viz-module', 'type-data-bite', currentViewport, config.theme, 'font-' + config.fontSize]
-  if (isEditor) {
-    classNames.push('is-editor')
-  }
   return (
     <Context.Provider value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard }}>
-      <div className={classNames.join(' ')} ref={outerContainerRef}>
-        {body}
-      </div>
+      {biteStyle !== 'gradient' && (
+        <Layout.VisualizationWrapper ref={outerContainerRef} config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+          {body}
+        </Layout.VisualizationWrapper>
+      )}
+      {'gradient' === biteStyle && (
+        <Layout.VisualizationWrapper ref={outerContainerRef} config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+          {isEditor && <EditorPanel />}
+          <Layout.Responsive isEditor={isEditor}>
+            {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
+            {(!config.dataColumn || !config.dataFunction) && <Confirm />}
+            <GradientBite label={config.title} value={calculateDataBite()} />
+          </Layout.Responsive>
+        </Layout.VisualizationWrapper>
+      )}
     </Context.Provider>
   )
 }
@@ -535,7 +606,8 @@ export const BITE_LOCATIONS = {
   split: 'Split Graphic and Message',
   title: 'Value above Message',
   body: 'Value before Message',
-  end: 'Value after Message'
+  end: 'Value after Message',
+  gradient: 'Gradient'
 }
 export const IMAGE_POSITION_LEFT = 'Left'

package/src/components/EditorPanel.jsx CHANGED Viewed

@@ -8,7 +8,9 @@ import WarningImage from '@cdc/core/assets/icon-warning-circle.svg'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { BITE_LOCATIONS, DATA_FUNCTIONS, IMAGE_POSITIONS, DATA_OPERATORS } from '../CdcDataBite'
+import Layout from '@cdc/core/components/Layout'
 const TextField = memo(({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, tooltip, type = 'input', i = null, min = null, max = null, ...attributes }) => {
   const [value, setValue] = useState(stateValue)
@@ -128,49 +130,11 @@ const Select = memo(({ label, value, options, fieldName, section = null, subsect
 const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
 const EditorPanel = memo(() => {
-  const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(Context)
+  const { config, updateConfig, loading, data, setParentConfig, isDashboard, isEditor } = useContext(Context)
   const [displayPanel, setDisplayPanel] = useState(true)
-  const enforceRestrictions = updatedConfig => {
-    //If there are any dependencies between fields, etc../
-  }
-  const updateField = (section, subsection, fieldName, newValue) => {
-    // Top level
-    if (null === section && null === subsection) {
-      let updatedConfig = { ...config, [fieldName]: newValue }
-      if ('filterColumn' === fieldName) {
-        updatedConfig.filterValue = ''
-      }
-      enforceRestrictions(updatedConfig)
-      updateConfig(updatedConfig)
-      return
-    }
-    const isArray = Array.isArray(config[section])
-    let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
-    if (null !== subsection) {
-      if (isArray) {
-        sectionValue = [...config[section]]
-        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
-      } else if (typeof newValue === 'string') {
-        sectionValue[subsection] = newValue
-      } else {
-        sectionValue = { ...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue } }
-      }
-    }
-    let updatedConfig = { ...config, [section]: sectionValue }
-    enforceRestrictions(updatedConfig)
-    updateConfig(updatedConfig)
-  }
+  const updateField = updateFieldFactory(config, updateConfig, true)
   const missingRequiredSections = () => {
     //Whether to show error message if something is required to show a data-bite and isn't filled in
@@ -190,39 +154,10 @@ const EditorPanel = memo(() => {
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
-  }
-  const Error = () => {
-    return (
-      <section className='waiting'>
-        <section className='waiting-container'>
-          <h3>Error With Configuration</h3>
-          <p>{config.runtime.editorErrorMessage}</p>
-        </section>
-      </section>
-    )
-  }
-  const Confirm = () => {
-    return (
-      <section className='waiting'>
-        <section className='waiting-container'>
-          <h3>Finish Configuring</h3>
-          <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
-          <button
-            className='btn'
-            style={{ margin: '1em auto' }}
-            disabled={missingRequiredSections()}
-            onClick={e => {
-              e.preventDefault()
-              updateConfig({ ...config, newViz: false })
-            }}
-          >
-            I'm Done
-          </button>
-        </section>
-      </section>
-    )
+    updateConfig({
+      ...config,
+      showEditorPanel: !displayPanel
+    })
   }
   const convertStateToConfig = () => {
@@ -339,11 +274,7 @@ const EditorPanel = memo(() => {
   return (
     <ErrorBoundary component='EditorPanel'>
-      {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
-      {(!config.dataColumn || !config.dataFunction) && <Confirm />}
-      <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
-      <section className={displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'}>
-        <div className='heading-2'>Configure Data Bite</div>
+      <Layout.Sidebar isEditor={true} config={config} title='Configure Data Bites' onBackClick={onBackClick} displayPanel={displayPanel}>
         <section className='form-container'>
           <form>
             <Accordion allowZeroExpanded={true}>
@@ -701,7 +632,7 @@ const EditorPanel = memo(() => {
             </Accordion>
           </form>
         </section>
-      </section>
+      </Layout.Sidebar>
     </ErrorBoundary>
   )
 })

package/src/components/GradientBite.jsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React from 'react'
+import '../scss/kpi.scss'
+export const KPIComponent = ({ label, value }) => {
+  return (
+    <div className='cove-component__content kpi-container'>
+      <div className='kpi-content'>
+        <div className='label-container'>
+          <span className='label'>
+            <strong>{label}</strong>
+          </span>
+        </div>
+        <div className='value-container'>
+          <span className='value'>
+            <strong>{value}</strong>
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default KPIComponent

package/src/scss/bite.scss CHANGED Viewed

@@ -1,12 +1,5 @@
 @import '../../../core/styles/variables';
-&.is-editor {
-  position: relative;
-  .cove-component__inner {
-    margin: 3em auto 0;
-    max-width: 35em;
-  }
-}
 &.theme-blue {
   .bite-value {
     color: $primary;
@@ -76,14 +69,27 @@
 // TODO after v2 refactor remove header reference colors
 // Use .font-color/.bg-color, etc. in color definitions or something similar
 // Remove box shadows if we're no longer using them
-.cove-component__inner {
+.sidebar + .cove-component__content .bite-content-container:not(.component--hide-background-color) {
+  margin: 3em auto 0;
+  max-width: 35em;
+}
+.sidebar + .cove-component__content .bite-content-container:not(.component--hide-background-color) {
+  background-color: white;
+}
+.cove-component__content {
   // Visual: Shadow
   &.shadow {
     box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px;
   }
+  .cove-component__inner {
+    padding: 1rem !important;
+  }
   // General: Bite Style > Graphic
-  .bite__style--graphic {
+  &.bite__style--graphic {
     .bite-content {
       flex: 1;
     }
@@ -135,7 +141,6 @@
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
     }
     .bite-content-container.component--hideBackgroundColor {
       background: transparent;
     }
@@ -231,7 +236,7 @@
     .cove-component__content {
       display: flex;
-      padding: 1em;
+      padding: 1em !important;
       justify-content: space-between;
       .bite-content {

package/src/scss/editor-panel.scss CHANGED Viewed

@@ -58,7 +58,7 @@
     }
   }
   background: #fff;
-  width: $editorWidth;
+  // width: $editorWidth;
   overflow-y: overlay;
   position: absolute;
   z-index: 8;

package/src/scss/kpi.scss ADDED Viewed

@@ -0,0 +1,68 @@
+.kpi-container {
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.25) !important;
+  box-sizing: border-box;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  display: flex;
+  padding: 5px !important;
+  height: 70px;
+  width: 100%;
+  position: relative;
+  display: flex;
+}
+.kpi-content {
+  background: linear-gradient(90deg, rgba(8, 132, 136, 1) 19%, rgba(255, 255, 255, 1) 74%);
+  border-radius: 10px;
+  display: flex;
+  flex: 1;
+}
+.label-container,
+.value-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+.label-container {
+  padding-left: 30px !important;
+}
+.value-container {
+  justify-content: center;
+}
+.label {
+  color: white;
+  font-size: 18px;
+}
+.value {
+  color: brown;
+  font-size: 24px;
+}
+//small
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .label {
+    font-size: 14px;
+  }
+  .value {
+    font-size: 20px;
+  }
+}
+//xs
+@media only screen and (max-width: 767px) {
+  .label-container {
+    justify-content: flex-start;
+    padding-left: 10px !important;
+  }
+  .label {
+    font-size: 10px;
+  }
+  .value {
+    font-size: 14px;
+  }
+}

package/src/scss/main.scss CHANGED Viewed

@@ -5,7 +5,7 @@
 .cdc-open-viz-module.type-data-bite {
   @import 'bite';
-  @import 'editor-panel';
+  // @import 'editor-panel';
   .visually-hidden {
     position: fixed;
     left: -10000px;