@cdc/core 4.23.10-alpha → 4.23.11

package/components/_stories/styles.scss

@@ -0,0 +1,9 @@
+@import '../../styles/_variables';
+@import '../../styles/_mixins';
+@import '../../styles/_data-table';
+@import '../../styles/_global.scss';
+
+.visually-hidden {
+  position: fixed;
+  left: -10000px;
+}

package/components/managers/{DataDesigner.jsx → DataDesigner.tsx}

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect } from 'react'
 
 import Button from '../elements/Button'
 import Card from '../elements/Card'
@@ -6,77 +6,109 @@ import Card from '../elements/Card'
 import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../templates/dataDesignerTables'
 import '../../styles/v2/components/data-designer.scss'
 
-const DataDesigner = props => {
+type DataDesignerProps = {
+  configureData?: any // todo: add description here when understood better
+  updateDescriptionProp?: () => void // used to update data description fields
+  visualizationKey?: any // todo: add description here when understood better
+  dataKey?: string // appears to be the data file name, ie valid-data.csv
+  config?: any // can be one of many different types of chart configs that aren't fully established yet
+  setConfig?: (newConfig: any) => void
+}
+
+const DataDesigner = (props: DataDesignerProps) => {
   const { configureData, updateDescriptionProp, visualizationKey, dataKey, config, setConfig } = props
+  const hasDataOrientation = config?.visualizationType !== 'Forest Plot'
+  const hasMultipleSeries = config?.visualizationType !== 'Forest Plot'
+  const hasRowSelection = config?.visualizationType !== 'Forest Plot'
+
+  useEffect(() => {
+    if (config?.visualizationType === 'Forest Plot') {
+      // needed to properly set data up?
+      setConfig({
+        ...config,
+        dataDescription: {
+          series: true,
+          horizontal: false,
+          singleRow: true
+        }
+      })
+    }
+  }, [])
 
   return (
     <div className='cove-data-designer__container'>
       <div className='mb-2'>
         <div className='cove-heading--3 fw-bold mb-1'>Describe Data</div>
-        <div className='cove-heading--3 fw-normal mb-1'>Data Orientation</div>
-        <div className='grid grid-gap-2 mb-4'>
-          <div className='column'>
-            <button
-              className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
-              onClick={() => {
-                updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
-              }}
-            >
-              <Card>
-                <strong className='cove-heading--3'>Vertical</strong>
-                <p className='mb-1'>
-                  Values for map geography or chart date/category axis are contained in a single <em>column</em>.
-                </p>
-                {DATA_TABLE_VERTICAL}
-              </Card>
-            </button>
-          </div>
-          <div className='column'>
-            <button
-              className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
-              onClick={() => {
-                updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
-              }}
-            >
-              <Card>
-                <strong className='cove-heading--3'>Horizontal</strong>
-                <p className='mb-1'>
-                  Values for map geography or chart date/category axis are contained in a single <em>row</em>
-                </p>
-                {DATA_TABLE_HORIZONTAL}
-              </Card>
-            </button>
-          </div>
-        </div>
+        {hasDataOrientation && (
+          <>
+            <div className='cove-heading--3 fw-normal mb-1'>Data Orientation</div>
+            <div className='grid grid-gap-2 mb-4'>
+              <div className='column'>
+                <button
+                  className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
+                  }}
+                >
+                  <Card>
+                    <strong className='cove-heading--3'>Vertical</strong>
+                    <p className='mb-1'>
+                      Values for map geography or chart date/category axis are contained in a single <em>column</em>.
+                    </p>
+                    {DATA_TABLE_VERTICAL}
+                  </Card>
+                </button>
+              </div>
+              <div className='column'>
+                <button
+                  className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
+                  }}
+                >
+                  <Card>
+                    <strong className='cove-heading--3'>Horizontal</strong>
+                    <p className='mb-1'>
+                      Values for map geography or chart date/category axis are contained in a single <em>row</em>
+                    </p>
+                    {DATA_TABLE_HORIZONTAL}
+                  </Card>
+                </button>
+              </div>
+            </div>
+          </>
+        )}
       </div>
       {configureData.dataDescription && (
         <>
-          <div className='mb-2'>
-            <div className='mb-1'>Are there multiple series represented in your data?</div>
-            <div>
-              <Button
-                style={{ backgroundColor: '#00345d' }}
-                hoverStyle={{ backgroundColor: '#015daa' }}
-                className='mr-1'
-                onClick={() => {
-                  updateDescriptionProp(visualizationKey, dataKey, 'series', true)
-                }}
-                active={configureData.dataDescription.series === true}
-              >
-                Yes
-              </Button>
-              <Button
-                style={{ backgroundColor: '#00345d' }}
-                hoverStyle={{ backgroundColor: '#015daa' }}
-                onClick={() => {
-                  updateDescriptionProp(visualizationKey, dataKey, 'series', false)
-                }}
-                active={configureData.dataDescription.series === false}
-              >
-                No
-              </Button>
+          {hasMultipleSeries && (
+            <div className='mb-2'>
+              <div className='mb-1'>Are there multiple series represented in your data?</div>
+              <div>
+                <Button
+                  style={{ backgroundColor: '#00345d' }}
+                  hoverStyle={{ backgroundColor: '#015daa' }}
+                  className='mr-1'
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'series', true)
+                  }}
+                  active={configureData.dataDescription.series === true}
+                >
+                  Yes
+                </Button>
+                <Button
+                  style={{ backgroundColor: '#00345d' }}
+                  hoverStyle={{ backgroundColor: '#015daa' }}
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'series', false)
+                  }}
+                  active={configureData.dataDescription.series === false}
+                >
+                  No
+                </Button>
+              </div>
             </div>
-          </div>
+          )}
           {configureData.dataDescription.horizontal === true && configureData.dataDescription.series === true && (
             <div className='mb-2'>
               <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
@@ -95,7 +127,7 @@ const DataDesigner = props => {
               </select>
             </div>
           )}
-          {configureData.dataDescription.horizontal === false && configureData.dataDescription.series === true && (
+          {configureData.dataDescription.horizontal === false && configureData.dataDescription.series === true && hasRowSelection && (
             <>
               <div className='mb-2'>
                 <div className='mb-1'>Are the series values in your data represented in a single row, or across multiple rows?</div>
@@ -247,7 +279,7 @@ const DataDesigner = props => {
           {config?.visualizationType === 'Forest Plot' && (
             <>
               <div className='mb-2'>
-                <div className='mb-1'>Which column represents the date/category column?</div>
+                <div className='mb-1'>Which column represents the Study ID?</div>
                 <select
                   onChange={e => {
                     setConfig({
@@ -337,29 +369,6 @@ const DataDesigner = props => {
                   ))}
                 </select>
               </div>
-
-              <div className='mb-2'>
-                <div className='mb-1'>Which shape do you want to use in your forest plot?</div>
-                <select
-                  onChange={e => {
-                    setConfig({
-                      ...config,
-                      forestPlot: {
-                        ...config.forestPlot,
-                        shape: e.target.value
-                      }
-                    })
-                  }}
-                  defaultValue={'Select'}
-                >
-                  <option value=''>Choose an option</option>
-                  {['text', 'circle', 'square', 'diamond'].map((value, index) => (
-                    <option value={value} key={index}>
-                      {value}
-                    </option>
-                  ))}
-                </select>
-              </div>
             </>
           )}
         </>

package/components/ui/Title/Title.scss

@@ -0,0 +1,95 @@
+.cove-component__header {
+  position: relative;
+  padding: 0.6em 0.8em;
+  margin: 0;
+  color: #fff;
+  font-size: 1.1em;
+
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+
+  &.mb-0 {
+    margin-bottom: 0 !important;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  &:not(:empty) {
+    padding: 0.6em 0.8em;
+    border-bottom-width: 4px;
+    border-bottom-style: solid;
+  }
+
+  &.bite-header {
+    margin-bottom: 0 !important;
+  }
+
+  // THEMES
+  &.theme-purple {
+    background: #712177;
+    border-bottom-color: #b890bb;
+  }
+  &.theme-brown {
+    background: #705043;
+    border-bottom-color: #ad907b;
+  }
+  &.theme-teal {
+    background: #00695c;
+    border-bottom-color: #4ebaaa;
+  }
+  &.theme-pink {
+    background: #af4448;
+    border-bottom-color: #e57373;
+  }
+  &.theme-orange {
+    background: #bb4d00;
+    border-bottom-color: #ffad42;
+  }
+  &.theme-slate {
+    background: #29434e;
+    border-bottom-color: #7e9ba5;
+  }
+  &.theme-indigo {
+    background: #26418f;
+    border-bottom-color: #92a6dd;
+  }
+  &.theme-cyan {
+    background: #007b91;
+    border-bottom-color: #65b0bd;
+  }
+  &.theme-green {
+    background: #4b830d;
+    border-bottom-color: #84bc49;
+  }
+  &.theme-amber {
+    background: #fbab18;
+    border-bottom-color: #ffd54f;
+  }
+  &.theme-blue {
+    background: #005eaa;
+    border-bottom-color: #88c3ea;
+  }
+
+  &.mb-0 {
+    margin-bottom: 0 !important;
+  }
+}
+
+// add additional space below title if needed
+.map-title.cove-component__header,
+.type-chart .cove-component__header {
+  &:not(:empty) {
+    margin: 0 0 1rem 0 !important;
+  }
+}
+
+// fix sparkline bottom margin gap
+.type-sparkline.type-chart .cove-component__header {
+  margin: 0px !important;
+}

package/components/ui/Title/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import parse from 'html-react-parser'
+import './Title.scss'
+
+type HeaderProps = {
+  title?: string
+  isDashboard?: boolean
+  superTitle?: string
+  classes?: string[]
+  style?: React.CSSProperties
+  showTitle?: boolean
+  ariaLevel?: number
+}
+
+const Title = (props: HeaderProps) => {
+  const { isDashboard, title, superTitle, classes = [], showTitle = true, ariaLevel = 2 } = props
+
+  // standard classes every vis should have
+  const updatedClasses = ['cove-component__header', 'component__header', ...classes]
+
+  return (
+    title &&
+    showTitle && (
+      <header className={updatedClasses.join(' ')} aria-hidden='true' style={props.style} aria-level={ariaLevel}>
+        {superTitle && <sup>{parse(superTitle)}</sup>}
+        <div>
+          {parse(title)} {isDashboard}
+        </div>
+      </header>
+    )
+  )
+}
+
+export default Title

package/components/ui/_stories/Title.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Title from '../Title'
+
+const meta: Meta = {
+  title: 'Components/Atoms/Title',
+  component: Title
+}
+
+type Story = StoryObj
+
+export const Primary: Story = {
+  args: {
+    title: 'My Title',
+    superTitle: 'My super title',
+    isDashboard: false,
+    classes: ['theme-blue']
+  }
+}
+
+export default meta

package/helpers/DataTransform.ts

@@ -1,4 +1,4 @@
-type DataArray = Record<string,any>[]
+type DataArray = Record<string, any>[]
 
 export class DataTransform {
   constants: any
@@ -49,10 +49,10 @@ export class DataTransform {
 
   //Performs standardizations based on developer provided description of the data
   developerStandardize(data, description) {
-    if(!data){
+    if (!data) {
       return []
     }
-    
+
     //Validate the description object
     if (!description) {
       return undefined
@@ -102,7 +102,7 @@ export class DataTransform {
 
         return standardized
       } else {
-        let standardized: {key: string, value: any}[] = []
+        let standardized: { key: string; value: any }[] = []
 
         data.forEach(row => {
           let nonNumericKeys: string[] = []
@@ -222,7 +222,7 @@ export class DataTransform {
     */
   cleanData(data: DataArray, excludeKey, testing = false): DataArray {
     let cleanedupData: DataArray = []
-    if(!Array.isArray(data)) debugger;
+    if (!Array.isArray(data)) debugger
     if (testing) console.log('## Data to clean=', data)
     if (excludeKey === undefined) {
       console.log('COVE: cleanData excludeKey undefined')
@@ -232,7 +232,7 @@ export class DataTransform {
       if (testing) console.log('clean', i, ' d', d)
       let cleaned = {}
       Object.keys(d).forEach(function (key) {
-        const value = d[key];
+        const value = d[key]
         if (key === excludeKey) {
           // pass thru
           cleaned[key] = value
@@ -263,21 +263,44 @@ export class DataTransform {
     return cleanedupData
   }
 
-  // clean out %, $, commas from numbers when needing to do sorting!
-  cleanDataPoint(data, testing = false) {
-      if (testing) console.log('clean', data)
-      let cleaned = ''
+  applySuppression = (data, suppressedData) => {
+    if (!suppressedData || suppressedData.length === 0) return data
 
-      // remove comma and dollar signs
-      let tmp = ''
-      if (typeof data === 'string') {
-        tmp = data!== null && data !== '' ? data.replace(/[,\$\%]/g, '') : ''
-      } else {
-        tmp = data !== null && data !== '' ? data : ''
+    // Create a new array to store the result without modifying the original data
+    const result = data.map(item => {
+      // Create a new object to store the updated item without modifying the original item
+      const newItem = { ...item }
+
+      // For each suppressedData item
+      for (let i = 0; i < suppressedData.length; i++) {
+        // If the object contains the column and its value matches the suppressed one
+        if (newItem[suppressedData[i].column] && newItem[suppressedData[i].column] === suppressedData[i].value) {
+          // Replace the value with the label in the new object
+          newItem[suppressedData[i].column] = suppressedData[i].label
+        }
       }
 
-      if (testing) console.log('## cleanedData =', tmp)
-      return tmp
+      return newItem
+    })
+
+    return result
+  }
+
+  // clean out %, $, commas from numbers when needing to do sorting!
+  cleanDataPoint(data, testing = false) {
+    if (testing) console.log('clean', data)
+    let cleaned = ''
+
+    // remove comma and dollar signs
+    let tmp = ''
+    if (typeof data === 'string') {
+      tmp = data !== null && data !== '' ? data.replace(/[,\$\%]/g, '') : ''
+    } else {
+      tmp = data !== null && data !== '' ? data : ''
+    }
+
+    if (testing) console.log('## cleanedData =', tmp)
+    return tmp
   }
 }
 

package/helpers/cove/string.ts

@@ -0,0 +1,11 @@
+/**
+ * regex
+ * - /\w\S* replaces zero or more whitespace characters
+ * - g makes it find all matches in the string
+ * - the callback function capitalizes the word
+ * */
+export const capitalizeSplitAndJoin = function (splittingCharacter: string = ' ', joiningCharacter: string = '') {
+  return this.split(splittingCharacter)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(joiningCharacter)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.10-alpha",
+  "version": "4.23.11",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -30,5 +30,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "47278535fb20bb4e6b3320f8075051bedc5bca8e"
+  "gitHead": "ecad213667a3cb96c921eaddba43a31c84caaa08"
 }

package/styles/_data-table.scss

@@ -64,6 +64,7 @@ table.data-table {
       background: none;
       font-size: initial;
       color: #fff;
+      border: 0;
     }
 
     tr {

package/styles/heading-colors.scss

@@ -1,6 +1,3 @@
-div.dashboard-title,
-div.chart-title,
-div.map-title,
 .color-palette li,
 .btn {
   &.theme-purple {

package/styles/v2/layout/_component.scss

@@ -3,17 +3,6 @@
   // box-shadow: rgba(0, 0, 0, 0.2) 3px 6px 10px; // no box shadows
 }
 
-.cove-component__header {
-  width: 100%;
-  padding: 0.6rem 0.8rem;
-  border-bottom-width: 3px;
-  border-bottom-style: solid;
-  border-radius: 3px 3px 0 0;
-  font-size: 1.1rem;
-  transition: background-color 200ms ease, border-color 200ms ease;
-  color: #fff;
-}
-
 .cove-component__content {
   padding-top: 1rem;
   border: solid 1px #ccc;

package/types/Axis.ts

@@ -0,0 +1,6 @@
+export type Axis = {
+  dataKey: string
+  type: string
+  dateParseFormat: string
+  dateDisplayFormat: string
+}

package/types/Color.ts

@@ -0,0 +1,5 @@
+type RGB = `rgb(${number}, ${number}, ${number})`
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
+type HEX = `#${string}`
+
+type Color = RGB | RGBA | HEX

package/types/ComponentStyles.ts

@@ -0,0 +1,7 @@
+export type ComponentStyles = {
+  border: boolean
+  accent: boolean
+  background: boolean
+  hideBackgroundColor: boolean
+  borderColorTheme: boolean
+}

package/types/ComponentThemes.ts

@@ -0,0 +1,13 @@
+// prettier-ignore
+export type ComponentThemes =
+  | 'theme-amber'
+  | 'theme-blue'
+  | 'theme-brown'
+  | 'theme-cyan'
+  | 'theme-green'
+  | 'theme-indigo'
+  | 'theme-orange'
+  | 'theme-pink'
+  | 'theme-purple'
+  | 'theme-slate'
+  | 'theme-teal'

package/types/EditorColumnProperties.ts

@@ -0,0 +1,8 @@
+export type EditorColumnProperties = {
+  dataTable: boolean
+  label: string
+  name: string
+  prefix: string
+  suffix: string
+  tooltip: boolean
+}

package/types/Runtime.ts

@@ -0,0 +1,9 @@
+export type Runtime = {
+  originalXAxis: {
+    dataKey: string
+    name: string
+    axis: string
+  }
+  seriesKeys: []
+  editorErrorMessage: string
+}

package/types/Series.ts

@@ -0,0 +1 @@
+export type Series = { dataKey: string; name: string; axis: string }[]

package/types/Visualization.ts

@@ -0,0 +1,21 @@
+export type Visualization = {
+  visualizationType: string
+  dataKey: string
+  formattedData: any
+  dataDescription: Object
+  data: any
+  originalFormattedData: any
+  editing: boolean
+  type: 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'filter-dropdowns'
+  newViz: boolean
+  openModal: boolean
+  hide: any[]
+  autoLoad: boolean
+  table: {
+    showDataTableLink: boolean
+  }
+  general: any
+  title: string
+  uid: string
+  usesSharedFilter: any
+}