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

@cdc/data-bite 4.24.2 → 4.24.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/cdcdatabite.js +2676 -2659
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 +1 -1
package/package.json +3 -3
package/src/CdcDataBite.tsx +16 -4
package/src/components/EditorPanel.jsx +2 -39
package/src/components/GradientBite.jsx +19 -0
package/src/scss/kpi.scss +68 -0

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

@@ -11,7 +11,7 @@
   </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> -->

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "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.3",
     "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": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf"
 }

package/src/CdcDataBite.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ 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'
 // external
 import ResizeObserver from 'resize-observer-polyfill'
@@ -507,9 +508,19 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
   return (
     <Context.Provider value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard }}>
-      <div className={classNames.join(' ')} ref={outerContainerRef}>
-        {body}
-      </div>
+      {biteStyle !== 'gradient' && (
+        <div className={classNames.join(' ')} ref={outerContainerRef}>
+          {body}
+        </div>
+      )}
+      {'gradient' === biteStyle && (
+        <div className={classNames.join(' ')} ref={outerContainerRef}>
+          {isEditor && <EditorPanel />}
+          <div className={isEditor ? 'spacing-wrapper' : ''}>
+            <GradientBite label={config.title} value={calculateDataBite()} />
+          </div>
+        </div>
+      )}
     </Context.Provider>
   )
 }
@@ -535,7 +546,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,6 +8,7 @@ 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'
 const TextField = memo(({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, tooltip, type = 'input', i = null, min = null, max = null, ...attributes }) => {
@@ -131,46 +132,8 @@ const EditorPanel = memo(() => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard } = 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

package/src/components/GradientBite.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import '../scss/kpi.scss';
+export const KPIComponent = ({label, value}) => {
+    return (
+        <div className="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/kpi.scss ADDED Viewed

@@ -0,0 +1,68 @@
+.kpi-container {
+    border-radius: 10px;
+    border: 1px solid rgba(0,0,0,.25) !important;
+    box-sizing: border-box;
+    box-shadow: 0 4px 4px rgba(0,0,0,.25);
+    display: flex;
+    padding: 5px !important;
+    height: 70px;
+    width: 100%;
+}
+.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;
+    }
+}