@cdc/data-bite 4.23.10-alpha → 4.23.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.23.10-alpha",
+  "version": "4.23.11",
   "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.23.10-alpha",
+    "@cdc/core": "^4.23.11",
     "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": "47278535fb20bb4e6b3320f8075051bedc5bca8e"
+  "gitHead": "ecad213667a3cb96c921eaddba43a31c84caaa08"
 }

package/src/{CdcDataBite.jsx → CdcDataBite.tsx}

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback, useReducer } from 'react'
 import { Fragment } from 'react'
 
 // contexts & initial state
@@ -8,6 +8,7 @@ import Context from './context'
 // internal components
 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'
 
 // external
@@ -23,45 +24,47 @@ import { publish } from '@cdc/core/helpers/events'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
+import { Config } from './types/Config'
+import dataBiteReducer from './store/db.reducer'
 
 // styles
 import './scss/main.scss'
 
-const CdcDataBite = props => {
+type CdcDataBiteProps = {
+  config: Config
+  configUrl: string
+  isDashboard: boolean
+  isEditor: boolean
+  setConfig: () => {}
+  link: any
+}
+
+const CdcDataBite = (props: CdcDataBiteProps) => {
   const { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig, link } = props
 
-  const [config, setConfig] = useState({ ...defaults })
-  const [loading, setLoading] = useState(true)
-
-  const {
-    title,
-    dataColumn,
-    dataFunction,
-    imageData,
-    biteBody,
-    biteFontSize,
-    dataFormat,
-    biteStyle,
-    filters,
-    subtext,
-    general: { isCompactStyle }
-  } = config
+  const initialState = {
+    config: configObj ?? defaults,
+    loading: true,
+    currentViewport: 'lg',
+    coveLoadedHasRan: false,
+    container: null
+  }
 
-  const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
+  const [state, dispatch] = useReducer(dataBiteReducer, initialState)
 
-  const transform = new DataTransform()
+  const { config, loading, currentViewport, coveLoadedHasRan, container } = state
 
-  const [currentViewport, setCurrentViewport] = useState('lg')
+  const { title, dataColumn, dataFunction, imageData, biteBody, biteFontSize, dataFormat, biteStyle, filters, subtext } = config
 
-  const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
+  const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
 
-  const [container, setContainer] = useState()
+  const transform = new DataTransform()
 
   //Observes changes to outermost container and changes viewport size in state
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let newViewport = getViewport(entry.contentRect.width * 2) // Data bite is usually presented as small, so we scale it up for responsive calculations
-      setCurrentViewport(newViewport)
+      dispatch({ type: 'SET_CURRENT_VIEWPORT', payload: newViewport })
     }
   })
 
@@ -79,7 +82,7 @@ const CdcDataBite = props => {
 
     //Check things that are needed and set error messages if needed
     newConfig.runtime.editorErrorMessage = ''
-    setConfig(newConfig)
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
   }
 
   //@ts-ignore
@@ -108,8 +111,7 @@ const CdcDataBite = props => {
     const processedConfig = { ...(await coveUpdateWorker(response)) }
 
     updateConfig({ ...defaults, ...processedConfig })
-
-    setLoading(false)
+    dispatch({ type: 'SET_LOADING', payload: false })
   }
 
   const calculateDataBite = (includePrefixSuffix = true) => {
@@ -337,7 +339,7 @@ const CdcDataBite = props => {
     if (node !== null) {
       resizeObserver.observe(node)
     }
-    setContainer(node)
+    dispatch({ type: 'SET_CONTAINER', payload: node })
   }, [])
 
   // Initial load
@@ -349,7 +351,7 @@ const CdcDataBite = props => {
   useEffect(() => {
     if (config && !coveLoadedHasRan && container) {
       publish('cove_loaded', { config: config })
-      setCoveLoadedHasRan(true)
+      dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
     }
   }, [config, container])
 
@@ -452,7 +454,7 @@ const CdcDataBite = props => {
         {isEditor && <EditorPanel />}
         <div className={isEditor ? 'spacing-wrapper' : ''}>
           <div className={innerContainerClasses.join(' ')}>
-            {title && <div className={`bite-header cove-component__header component__header ${config.theme}`}>{parse(title)}</div>}
+            <Title config={config} title={title} isDashboard={isDashboard} classes={['bite-header', `${config.theme}`]} />
             <div className={`bite ${biteClasses.join(' ')}`}>
               <div className={`bite-content-container ${contentClasses.join(' ')}`}>
                 {showBite && 'graphic' === biteStyle && isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} />}
@@ -483,7 +485,7 @@ const CdcDataBite = props => {
                           {calculateDataBite()}
                         </span>
                       )}
-                      {subtext && !isCompactStyle && <p className='bite-subtext'>{parse(subtext)}</p>}
+                      {subtext && !config.general.isCompactStyle && <p className='bite-subtext'>{parse(subtext)}</p>}
                     </div>
                   </Fragment>
                 </div>

package/src/_stories/DataBite.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import DataBite from '../CdcDataBite'
+import { Config } from '../types/Config'
+
+const meta: Meta<typeof DataBite> = {
+  title: 'Components/Templates/Data Bite',
+  component: DataBite
+}
+
+type Story = StoryObj<typeof DataBite>
+
+export const Data_Bite_Circle_Average: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json'
+  }
+}
+
+export const Data_Bite_Text_Max_Pic: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json'
+  }
+}
+
+export const Data_Bite_Circle_Sum: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json'
+  }
+}
+export const Data_Bite_Text_Average_Pic: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json'
+  }
+}
+
+export default meta

package/src/scss/bite.scss

@@ -11,111 +11,66 @@
   .bite-value {
     color: $primary;
   }
-
-  .cove-component__header {
-    background-color: $primary;
-  }
 }
 
 &.theme-purple {
   .bite-value {
     color: $purple-primary;
   }
-  .cove-component__header {
-    background-color: $purple-primary;
-  }
 }
 
 &.theme-amber {
   .bite-value {
     color: $amber-primary;
   }
-  .cove-component__header {
-    background-color: $amber-primary;
-  }
 }
 
 &.theme-orange {
   .bite-value {
     color: $orange-primary;
   }
-  .cove-component__header {
-    background-color: $orange-primary;
-  }
 }
 
 &.theme-brown {
   .bite-value {
     color: $brown-primary;
   }
-  .cove-component__header {
-    background-color: $brown-primary;
-  }
 }
 
 &.theme-teal {
   .bite-value {
     color: $teal-primary;
   }
-  .cove-component__header {
-    background-color: $teal-primary;
-  }
 }
 
 &.theme-pink {
   .bite-value {
     color: $pink-primary;
   }
-  .cove-component__header {
-    background-color: $pink-primary;
-  }
 }
 
 &.theme-slate {
   .bite-value {
     color: $slate-primary;
   }
-  .cove-component__header {
-    background-color: $slate-primary;
-  }
 }
 
 &.theme-indigo {
   .bite-value {
     color: $indigo-primary;
   }
-  .cove-component__header {
-    background-color: $indigo-primary;
-  }
 }
 
 &.theme-cyan {
   .bite-value {
     color: $cyan-primary;
   }
-  .cove-component__header {
-    background-color: $cyan-primary;
-  }
 }
 
 &.theme-green {
   .bite-value {
     color: $green-primary;
   }
-  .cove-component__header {
-    background-color: $green-primary;
-  }
-}
-.cove-component__header {
-  padding: 0 1em;
-  left: 0;
-  top: 0;
-  padding: 0.6rem 0.8rem;
-  color: white;
-  font-size: 1.1em;
-  &:empty {
-    min-height: 5px;
-  }
 }
 
 // TODO after v2 refactor remove header reference colors
@@ -200,100 +155,66 @@
       .bite-value {
         color: $primary;
       }
-
-      .cove-component__header {
-        background-color: $primary;
-      }
     }
 
     &.theme-purple {
       .bite-value {
         color: $purple-primary;
       }
-      .cove-component__header {
-        background-color: $purple-primary;
-      }
     }
 
     &.theme-amber {
       .bite-value {
         color: $amber-primary;
       }
-      .cove-component__header {
-        background-color: $amber-primary;
-      }
     }
 
     &.theme-orange {
       .bite-value {
         color: $orange-primary;
       }
-      .cove-component__header {
-        background-color: $orange-primary;
-      }
     }
 
     &.theme-brown {
       .bite-value {
         color: $brown-primary;
       }
-      .cove-component__header {
-        background-color: $brown-primary;
-      }
     }
 
     &.theme-teal {
       .bite-value {
         color: $teal-primary;
       }
-      .cove-component__header {
-        background-color: $teal-primary;
-      }
     }
 
     &.theme-pink {
       .bite-value {
         color: $pink-primary;
       }
-      .cove-component__header {
-        background-color: $pink-primary;
-      }
     }
 
     &.theme-slate {
       .bite-value {
         color: $slate-primary;
       }
-      .cove-component__header {
-        background-color: $slate-primary;
-      }
     }
 
     &.theme-indigo {
       .bite-value {
         color: $indigo-primary;
       }
-      .cove-component__header {
-        background-color: $indigo-primary;
-      }
     }
 
     &.theme-cyan {
       .bite-value {
         color: $cyan-primary;
       }
-      .cove-component__header {
-        background-color: $cyan-primary;
-      }
     }
 
     &.theme-green {
       .bite-value {
         color: $green-primary;
       }
-      .cove-component__header {
-        background-color: $green-primary;
-      }
     }
 
     h3 {

package/src/store/db.actions.ts

@@ -0,0 +1,19 @@
+import type { Config } from '../types/Config'
+
+type Action<T, P> = { type: T; payload: P }
+
+type SET_CONFIG = Action<'SET_CONFIG', Config>
+type SET_LOADING = Action<'SET_LOADING', boolean>
+type SET_CURRENT_VIEWPORT = Action<'SET_CURRENT_VIEWPORT', string>
+type SET_COVE_LOADED_HAS_RAN = Action<'SET_COVE_LOADED_HAS_RAN', boolean>
+type SET_CONTAINER = Action<'SET_CONTAINER', any>
+
+// prettier-ignore
+type DataBiteActions =
+  | SET_CONFIG
+  | SET_LOADING
+  | SET_CURRENT_VIEWPORT
+  | SET_COVE_LOADED_HAS_RAN
+  | SET_CONTAINER
+
+export default DataBiteActions

package/src/store/db.reducer.ts

@@ -0,0 +1,32 @@
+import { Config } from '../types/Config'
+import DataBiteActions from './db.actions'
+
+export type DataBiteState = {
+  config?: Config
+  loading: boolean
+  currentViewport: string
+  coveLoadedHasRan: boolean
+  container: any
+}
+
+const reducer = (state: DataBiteState, action: DataBiteActions): DataBiteState => {
+  switch (action.type) {
+    case 'SET_CONFIG': {
+      return { ...state, config: action.payload }
+    }
+    case 'SET_LOADING': {
+      return { ...state, loading: action.payload }
+    }
+    case 'SET_CURRENT_VIEWPORT': {
+      return { ...state, currentViewport: action.payload }
+    }
+    case 'SET_COVE_LOADED_HAS_RAN': {
+      return { ...state, coveLoadedHasRan: action.payload }
+    }
+    case 'SET_CONTAINER': {
+      return { ...state, container: action.payload }
+    }
+  }
+}
+
+export default reducer

package/src/types/Config.ts

@@ -0,0 +1,39 @@
+export type Config = {
+  type: string
+  data: Object[]
+  dataBite: string
+  dataFunction: string
+  dataColumn: string
+  bitePosition: string
+  biteFontSize: number
+  fontSize: string
+  biteBody: string
+  imageData: {
+    display: string
+    url: string
+    alt: string
+    options: Object[]
+  }
+  dataFormat: {
+    roundToPlace: number
+    commas: boolean
+    prefix: string
+    suffix: string
+  }
+  biteStyle: string
+  filters: Object[]
+  subtext: string
+  title: string
+  theme: string
+  shadow: boolean
+  visual: {
+    border: boolean
+    accent: boolean
+    background: boolean
+    hideBackgroundColor: boolean
+    borderColorTheme: boolean
+  }
+  general: {
+    isCompactStyle: boolean
+  }
+}