@cdc/core 4.24.1 → 4.24.2

package/components/DataTable/DataTable.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useMemo } from 'react'
+import { timeParse } from 'd3-time-format'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -17,13 +18,12 @@ import regionCellMatrix from './helpers/regionCellMatrix'
 import boxplotCellMatrix from './helpers/boxplotCellMatrix'
 import customColumns from './helpers/customColumns'
 import { TableConfig } from './types/TableConfig'
+import { Column } from '../../types/Column'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
   colorScale?: Function
-  columns?: { navigate: { name: string } }
-  // determines if columns should be wrapped in the table
-  wrapColumns?: boolean
+  columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
   displayDataAsText?: Function
@@ -32,15 +32,22 @@ export type DataTableProps = {
   formatLegendLocation?: Function
   groupBy?: string
   headerColor?: string
+  imageRef?: string
   indexTitle?: string
+  isDebug?: boolean
+  isEditor?: boolean
   navigationHandler?: Function
+  outerContainerRef?: Function
   rawData: Object[]
   runtimeData: Object[] | Record<string, Object> // UNSAFE
   setFilteredCountryCode?: Function // used for Maps only
+  showDownloadButton?: boolean
   tabbingId: string
   tableTitle: string
   viewport: string
   vizTitle?: string
+  // determines if columns should be wrapped in the table
+  wrapColumns?: boolean
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
@@ -92,9 +99,9 @@ const DataTable = (props: DataTableProps) => {
       break
   }
 
-  const _runtimeData = config.table.customTableConfig ? customColumns(runtimeData, config.table.excludeColumns) : runtimeData
+  const _runtimeData = config.table.customTableConfig ? customColumns(rawData, config.table.excludeColumns) : runtimeData
 
-  const rawRows = Object.keys(_runtimeData)
+  const rawRows = Object.keys(_runtimeData).filter(column => column != 'columns')
   const rows = isVertical
     ? rawRows.sort((a, b) => {
         let dataA
@@ -108,6 +115,10 @@ const DataTable = (props: DataTableProps) => {
           dataA = _runtimeData[a][sortBy.column]
           dataB = _runtimeData[b][sortBy.column]
         }
+        if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date' && config.xAxis.sortDates) {
+          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(_runtimeData[a][config.xAxis.dataKey])
+          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(_runtimeData[b][config.xAxis.dataKey])
+        }
         return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
       })
     : rawRows
@@ -117,7 +128,7 @@ const DataTable = (props: DataTableProps) => {
     OverflowY: 'scroll'
   }
 
-  const hasRowType = !!Object.keys(rawData[0] || {}).find((v: string) => v.match(/row[_-]?type/i))
+  const hasRowType = !!Object.keys(rawData?.[0] || {}).find((v: string) => v.match(/row[_-]?type/i))
 
   const caption = useMemo(() => {
     if (config.type === 'map') {

package/components/DataTable/helpers/customSort.ts

@@ -8,7 +8,16 @@ export const customSort = (a, b, sortBy, config) => {
   if (config.type === 'map') {
     valueA = standardizeStateName(a)
     valueB = standardizeStateName(b)
+    // sort for Regions table for Map
+    if (String(valueA).toLowerCase().includes('region') && String(valueB).toLowerCase().includes('region')) {
+      const numberA = parseInt(a.match(/\d+$/)[0], 10)
+      const numberB = parseInt(b.match(/\d+$/)[0], 10)
+
+      // Compare the numeric parts
+      return !sortBy.asc ? Number(numberA) - Number(numberB) : Number(numberB) - Number(numberA)
+    }
   }
+
   // Treat booleans and nulls as an empty string
   valueA = valueA === false || valueA === true || valueA === null ? '' : valueA
   valueB = valueB === false || valueB === true || valueB === null ? '' : valueB

package/components/DataTable/helpers/getChartCellValue.ts

@@ -30,7 +30,7 @@ export const getChartCellValue = (row, column, config, runtimeData) => {
   let labelValue = rowObj[column] // just raw X axis string
   if (column === config.xAxis?.dataKey) {
     // not the prettiest, but helper functions work nicely here.
-    cellValue = config.xAxis?.type === 'date' ? formatDate(config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
+    cellValue = config.xAxis?.type === 'date' ? formatDate(config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
   } else {
     let resolvedAxis = 'left'
     let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -11,7 +11,7 @@ export const getDataSeriesColumns = (config, isVertical, runtimeData): string[]
       tmpSeriesColumns = Object.keys(runtimeData[0])
     }
   } else {
-    tmpSeriesColumns = [config.xAxis?.dataKey, config.yAxis?.dataKey] //Object.keys(runtimeData[0])
+    tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey, config.yAxis?.dataKey] : [config.yAxis?.dataKey]
   }
 
   // then add the additional Columns

package/components/DataTable/helpers/getSeriesName.ts

@@ -1,26 +1,21 @@
-const getLabel = (name, config) => {
-  let custLabel = ''
-  if (config.columns && Object.keys(config.columns).length > 0) {
-    Object.keys(config.columns).forEach(function (key) {
-      var tmpColumn = config.columns[key]
-      // add if not the index AND it is enabled to be added to data table
-      if (tmpColumn.name === name) {
-        custLabel = tmpColumn.label
-      }
-    })
-    return custLabel
+import { TableConfig } from '../types/TableConfig'
+
+const getLabel = (name: string, config: TableConfig) => {
+  const columns = Object.values(config.columns || {})
+  const matchingConfiguredColumn = columns.find(col => col.name === name)
+  if (matchingConfiguredColumn?.label) {
+    return matchingConfiguredColumn.label
   }
+  return name
 }
 
-export const getSeriesName = (column, config) => {
+export const getSeriesName = (column: string, config: TableConfig) => {
   // If a user sets the name on a series use that.
-  let userUpdatedSeriesName = config.series ? config.series.filter(series => series.dataKey === column)?.[0]?.name : ''
-  if (userUpdatedSeriesName) return userUpdatedSeriesName
-
+  const userDefinedSeries = config.series?.find(series => series.dataKey === column)
+  if (userDefinedSeries?.name) {
+    return userDefinedSeries.name
+  }
   if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
-
-  let custLabel = getLabel(column, config) ? getLabel(column, config) : column
-  let text = column === config.xAxis?.dataKey ? config.table.indexLabel : custLabel
-
-  return text
+  const columnIsDataKey = column === config.xAxis?.dataKey
+  return columnIsDataKey ? config.table.indexLabel : getLabel(column, config)
 }

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -21,7 +21,11 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           let labelValue
           const mapZoomHandler = config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
           if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
+            const capitalize = str => {
+              return str.charAt(0).toUpperCase() + str.slice(1)
+            }
             labelValue = displayGeoName(row)
+            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
           } else {
             labelValue = formatLegendLocation(row)
           }

package/components/DataTable/types/TableConfig.ts

@@ -2,43 +2,19 @@ import { Axis } from '@cdc/core/types/Axis'
 import { Series } from '@cdc/core/types/Series'
 import { Runtime } from '@cdc/core/types/Runtime'
 import { Table } from '@cdc/core/types/Table'
+import { BoxPlot } from '../../../types/BoxPlot'
+import { General } from '../../../types/General'
+import { Column } from '../../../types/Column'
 
 export type TableConfig = {
   type?: string
   table: Table
   xAxis?: Axis
   yAxis?: Axis
-  boxplot?: {
-    tableData: Object[]
-    labels: {
-      mean: string
-      maximum: string
-      minimum: string
-      iqr: string
-      median: string
-      q1: string
-      q3: string
-      outliers: string
-      values: string
-      total: string
-      lowerBounds: string
-      upperBounds: string
-    }
-    plots: []
-    categories: string[]
-  }
+  boxplot?: BoxPlot
   visualizationType?: string
-  general?: {
-    geoType: string
-    type: string
-    showDownloadButton: boolean
-    allowMapZoom?: boolean
-  }
-  columns?: {
-    geo: {
-      name: string
-    }
-  }
+  general?: General
+  columns?: Record<string, Column>
   legend?: {
     specialClasses?: { key: string; label: string; value: string }[]
     hide?: boolean

package/components/Filters.jsx

@@ -74,21 +74,16 @@ export const useFilters = props => {
   const changeFilterActive = (index, value) => {
     let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
 
-    newFilters[index].active = value
-    setConfig({ ...visualizationConfig })
-
-    // If this is a button filter type show the button.
     if (visualizationConfig.filterBehavior === 'Apply Button') {
+      newFilters[index].queuedActive = value
       setShowApplyButton(true)
+    } else {
+      newFilters[index].active = value
     }
-
-    // If we're not using the apply button we can set the filters right away.
-    if (visualizationConfig.filterBehavior !== 'Apply Button') {
-      setConfig({
-        ...visualizationConfig,
-        filters: newFilters
-      })
-    }
+    setConfig({ 
+      ...visualizationConfig,
+      filters: newFilters 
+    })
     
     // Used for setting active filter, fromHash breaks the filteredData functionality.
     if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
@@ -102,6 +97,13 @@ export const useFilters = props => {
   }
 
   const handleApplyButton = newFilters => {
+    newFilters.forEach(newFilter => {
+      if(newFilter.queuedActive){
+        newFilter.active = newFilter.queuedActive
+        delete newFilter.queuedActive
+      }
+    })
+    
     setConfig({ ...visualizationConfig, filters: newFilters })
 
     if (type === 'map') {

package/components/MultiSelect/MultiSelect.tsx

@@ -51,7 +51,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
     update(newItems)
   }
 
-  const handleItemRemove = (option: Option, caller: string) => {
+  const handleItemRemove = (option: Option) => {
     const newItems = selectedItems.filter(item => item.value !== option.value)
     setSelectedItems(newItems)
     update(newItems)
@@ -68,9 +68,9 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
 
       <div aria-labelledby={label ? multiID : undefined} className='selected'>
         {selectedItems.map(item => (
-          <div key={item.value} role='button' tabIndex={0} onClick={() => handleItemRemove(item, 'button click')} onKeyUp={() => handleItemRemove(item, 'button key up')}>
+          <div key={item.value} role='button' tabIndex={0} onClick={() => handleItemRemove(item)} onKeyUp={() => handleItemRemove(item)}>
             {item.label}
-            <button aria-label='Remove' onClick={() => handleItemRemove(item, 'X')}>
+            <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
               x
             </button>
           </div>

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+const COLORS = [
+  ['baseColor', '#333'],
+  ['blue', '#005eaa'],
+  ['lightestGray', '#f2f2f2'],
+  ['lightGray', '#c7c7c7'],
+  ['mediumGray', '#565656'],
+  ['darkGray', '#333'],
+  ['red', '#d8000c'],
+  ['white', '#fff'],
+
+  ['primary', '#005eaa'],
+  ['secondary', '#88c3ea'],
+  ['tertiary', '#c0e9ff'],
+  ['quaternary', '#edf9ff'],
+
+  ['purple-primary', '#712177'],
+  ['purple-secondary', '#b890bb'],
+  ['purple-tertiary', '#e3d3e4'],
+  ['purple-quaternary', '#f7f2f7'],
+
+  ['brown-primary', '#705043'],
+  ['brown-secondary', '#ad907b'],
+  ['brown-tertiary', '#d7ccc8'],
+  ['brown-quaternary', '#f2ebe8'],
+
+  ['teal-primary', '#00695c'],
+  ['teal-secondary', '#4ebaaa'],
+  ['teal-tertiary', '#ceece7'],
+  ['teal-quaternary', '#ebf7f5'],
+
+  ['pink-primary', '#af4448'],
+  ['pink-secondary', '#e57373'],
+  ['pink-tertiary', '#ffc2c2'],
+  ['pink-quaternary', '#ffe7e7'],
+
+  ['orange-primary', '#bb4d00'],
+  ['orange-secondary', '#ffad42'],
+  ['orange-tertiary', '#ffe97d'],
+  ['orange-quaternary', '#fff4cf'],
+
+  ['slate-primary', '#29434e'],
+  ['slate-secondary', '#7e9ba5'],
+  ['slate-tertiary', '#b6c6d2'],
+  ['slate-quaternary', '#e2e8ed'],
+
+  ['indigo-primary', '#26418f'],
+  ['indigo-secondary', '#92a6dd'],
+  ['indigo-tertiary', '#dee8ff'],
+  ['indigo-quaternary', '#f2f6ff'],
+
+  ['cyan-primary', '#006778'],
+  ['cyan-secondary', '#65b0bd'],
+  ['cyan-tertiary', '#cce5e9'],
+  ['cyan-quaternary', '#ebf5f6'],
+
+  ['green-primary', '#4b830d'],
+  ['green-secondary', '#84bc49'],
+  ['green-tertiary', '#dcedc8'],
+  ['green-quaternary', '#f1f8e9'],
+
+  ['amber-primary', '#fbab18'],
+  ['amber-secondary', '#ffd54f'],
+  ['amber-tertiary', '#ffecb3'],
+  ['amber-quaternary', '#fff7e1']
+]
+
+const ColorArray = () => {
+  return (
+    <table className='table'>
+      {COLORS.map(([name, hex]) => (
+        <tr>
+          <td style={{ background: hex, width: '60px' }}></td>
+          <td>{name}</td>
+          <td>{hex}</td>
+        </tr>
+      ))}
+    </table>
+  )
+}
+
+const meta: Meta<typeof ColorArray> = {
+  title: 'Components/Atoms/Colors',
+  component: ColorArray
+}
+
+type Story = StoryObj<typeof ColorArray>
+
+export const Primary: Story = {}
+
+export default meta

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

@@ -3,20 +3,27 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import Icon, { ICON_TYPES } from '../Icon'
 
-const meta: Meta<typeof Icon> = {
+const IconArray = () => {
+  return (
+    <>
+      {ICON_TYPES.map(name => (
+        <div>
+          <span>
+            <Icon display={name} /> {name}{' '}
+          </span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+const meta: Meta<typeof IconArray> = {
   title: 'Components/Atoms/Icon',
-  component: Icon,
-  parameters: {
-    display: ICON_TYPES
-  }
+  component: IconArray
 }
 
 type Story = StoryObj<typeof Icon>
 
-export const Primary: Story = {
-  args: {
-    display: 'question'
-  }
-}
+export const Primary: Story = {}
 
 export default meta

package/helpers/fetchRemoteData.js

@@ -1,14 +1,14 @@
 import Papa from 'papaparse'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 
-export default async function (url, visualizationType = '') {
+export default async function (_url, visualizationType = '') {
+  let url = new URL(_url, window.location.origin)
   try {
-    url = new URL(url, window.location.origin)
-
     const path = url.pathname
     const regex = /(?:\.([^.]+))?$/
     const ext = regex.exec(path)[1]
 
-    if ('csv' === ext) {
+    if ('csv' === ext || isSolrCsv(_url)) {
       return await fetch(url.href)
         .then(response => response.text())
         .then(responseText => {
@@ -30,7 +30,7 @@ export default async function (url, visualizationType = '') {
           return parsedCsv.data
         })
     } else {
-      return await fetch(url.href).then(response => response.json())
+      return await fetch(isSolrCsv(_url) ? _url : url.href).then(response => response.json())
     }
   } catch {
     // If we can't parse it, still attempt to fetch it

package/helpers/getViewport.ts

@@ -0,0 +1,23 @@
+import { ViewPort } from '../types/ViewPort'
+
+export const viewports = {
+  lg: 1200,
+  md: 992,
+  sm: 768,
+  xs: 576,
+  xxs: 350
+}
+
+export default function getViewport(size): ViewPort {
+  let result: ViewPort = 'lg'
+
+  if (size > 1200) return result
+
+  for (let viewport in viewports) {
+    if (size <= viewports[viewport]) {
+      result = viewport as ViewPort
+    }
+  }
+
+  return result
+}

package/helpers/isSolr.js

@@ -0,0 +1,13 @@
+export const isSolrCsv = dataUrl => {
+  if (dataUrl.includes('wt=csv')) {
+    return true
+  }
+  return false
+}
+
+export const isSolrJson = dataUrl => {
+  if (dataUrl?.includes('wt=json')) {
+    return true
+  }
+  return false
+}

package/helpers/withDevTools.ts

@@ -0,0 +1,50 @@
+// This package hooks into the Redux Dev Tools extension
+// It works as a wrapper for any reducer function
+
+// Based on: https://github.com/MacKentoch/react-bootstrap-webpack-starter/blob/master/front/src/contexts/withDevTools/index.ts
+
+// types
+type DevToolsMessageType = 'DISPATCH' | string
+
+type DevToolsMessagePayload = {
+  type?: string
+  state?: any
+}
+
+type DevToolsMessage = {
+  type?: DevToolsMessageType
+  payload?: DevToolsMessagePayload
+}
+
+type Action = {
+  type: string
+  payload?: any
+}
+
+// the only method the devToolsWrapper hooks into is .send()
+// all other type definitions are kept for reference.
+// it's possible there's a DevTools type in the Redux library
+// however this allows us to avoid another dependency as this project
+// doesn't use Redux.
+type DevTools = {
+  init: () => void
+  connect: () => any
+  subscribe: (message: DevToolsMessage) => any
+  send: (action: Action, newState: any) => any
+  unsubscribe: () => any
+  dispatch: (action: Action) => any
+  disconnect: () => any
+}
+
+// constants
+const withDevTools = typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION__
+const devTools: DevTools = !withDevTools ? null : (window as any).__REDUX_DEVTOOLS_EXTENSION__.connect()
+export const devToolsStore = !withDevTools ? null : devTools
+
+export const devToolsWrapper =
+  <StateType, ActionTypes>(_reducer: (s: StateType, a: ActionTypes) => StateType) =>
+  (state: StateType, action: ActionTypes): StateType => {
+    const newState = _reducer(state, action)
+    devToolsStore?.send(action as Action, newState)
+    return newState
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "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": "a352a3f74f4b681191e3244061dbb3621f36eec3"
+  "gitHead": "edde49c96dee146de5e3a4537880b1bcf4dbee08"
 }

package/styles/_data-table.scss

@@ -31,9 +31,6 @@ div.data-table-heading {
 }
 
 table.horizontal {
-  tr {
-    display: flex;
-  }
 
   th,
   td {
@@ -42,7 +39,7 @@ table.horizontal {
 }
 
 table.data-table {
-  width: 100%;
+  min-width: 100%;
   background: #fff;
   position: relative;
   border: none;
@@ -51,7 +48,6 @@ table.data-table {
   overflow: auto;
   appearance: none;
   table-layout: fixed;
-  display: grid;
   * {
     box-sizing: border-box;
   }
@@ -138,7 +134,6 @@ table.data-table {
   }
 
   tbody {
-    display: table-cell;
     tr {
       width: 100%;
       &:hover {
@@ -162,6 +157,7 @@ table.data-table {
 
   th,
   td {
+    width: 1% !important;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -170,7 +166,6 @@ table.data-table {
     }
   }
   tr {
-    display: flex;
     & > * {
       width: 100%;
     }

package/styles/_global-variables.scss

@@ -0,0 +1,75 @@
+$colors: (
+  'baseColor': #333,
+  'blue': #005eaa,
+  'lightestGray': #f2f2f2,
+  'lightGray': #c7c7c7,
+  'mediumGray': #565656,
+  'darkGray': #333,
+  'red': #d8000c,
+  'white': #fff,
+
+  'primary': #005eaa,
+  'secondary': #88c3ea,
+  'tertiary': #c0e9ff,
+  'quaternary': #edf9ff,
+
+  'purple-primary': #712177,
+  'purple-secondary': #b890bb,
+  'purple-tertiary': #e3d3e4,
+  'purple-quaternary': #f7f2f7,
+
+  'brown-primary': #705043,
+  'brown-secondary': #ad907b,
+  'brown-tertiary': #d7ccc8,
+  'brown-quaternary': #f2ebe8,
+
+  'teal-primary': #00695c,
+  'teal-secondary': #4ebaaa,
+  'teal-tertiary': #ceece7,
+  'teal-quaternary': #ebf7f5,
+
+  'pink-primary': #af4448,
+  'pink-secondary': #e57373,
+  'pink-tertiary': #ffc2c2,
+  'pink-quaternary': #ffe7e7,
+
+  'orange-primary': #bb4d00,
+  'orange-secondary': #ffad42,
+  'orange-tertiary': #ffe97d,
+  'orange-quaternary': #fff4cf,
+
+  'slate-primary': #29434e,
+  'slate-secondary': #7e9ba5,
+  'slate-tertiary': #b6c6d2,
+  'slate-quaternary': #e2e8ed,
+
+  'indigo-primary': #26418f,
+  'indigo-secondary': #92a6dd,
+  'indigo-tertiary': #dee8ff,
+  'indigo-quaternary': #f2f6ff,
+
+  'cyan-primary': #006778,
+  'cyan-secondary': #65b0bd,
+  'cyan-tertiary': #cce5e9,
+  'cyan-quaternary': #ebf5f6,
+
+  'green-primary': #4b830d,
+  'green-secondary': #84bc49,
+  'green-tertiary': #dcedc8,
+  'green-quaternary': #f1f8e9,
+
+  'amber-primary': #fbab18,
+  'amber-secondary': #ffd54f,
+  'amber-tertiary': #ffecb3,
+  'amber-quaternary': #fff7e1,
+);
+
+@mixin theme() {
+  :root {
+    @each $key, $value in $colors {
+      --#{$key}: #{$value};
+    }
+  }
+}
+
+@include theme();

package/styles/base.scss

@@ -51,6 +51,7 @@
 // Imports
 @import 'reset';
 @import 'variables';
+@import 'global-variables';
 @import 'mixins';
 @import 'filters';
 
@@ -58,6 +59,10 @@ body.post-type-cdc_visualization .visx-tooltip {
   z-index: 1000000;
 }
 
+body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
+  top: 0 !important;
+}
+
 .cdc-open-viz-module {
   position: relative;
   color: $baseColor;
@@ -71,73 +76,88 @@ body.post-type-cdc_visualization .visx-tooltip {
   @import 'button-section';
   @import 'series-list';
   @import 'typography';
-}
 
-$theme: (
-  'amber': (
-    '#fbab18',
-    '#ffd54f',
-    '#ffecb3',
-    '#fff7e1'
-  ),
-  'blue': (
-    '#005eaa',
-    '#88c3ea',
-    '#c0e9ff',
-    '#edf9ff'
-  ),
-  'brown': (
-    '#705043',
-    '#ad907b',
-    '#d7ccc8',
-    '#f2ebe8'
-  ),
-  'cyan': (
-    '#006778',
-    '#65b0bd',
-    '#cce5e9',
-    '#ebf5f6'
-  ),
-  'green': (
-    '#4b830d',
-    '#84bc49',
-    '#dcedc8',
-    '#f1f8e9'
-  ),
-  'indigo': (
-    '#26418f',
-    '#92a6dd',
-    '#dee8ff',
-    '#f2f6ff'
-  ),
-  'orange': (
-    '#bb4d00',
-    '#ffad42',
-    '#ffe97d',
-    '#fff4cf'
-  ),
-  'pink': (
-    '#af4448',
-    '#e57373',
-    '#ffc2c2',
-    '#ffe7e7'
-  ),
-  'purple': (
-    '#712177',
-    '#b890bb',
-    '#e3d3e4',
-    '#f7f2f7'
-  ),
-  'slate': (
-    '#29434e',
-    '#7e9ba5',
-    '#b6c6d2',
-    '#e2e8ed'
-  ),
-  'teal': (
-    '#00695c',
-    '#4ebaaa',
-    '#ceece7',
-    '#ebf7f5'
-  )
-);
+  .editor-panel.cove {
+    position: absolute;
+    height: 100vh;
+    top: 0;
+    .editor-toggle {
+      position: absolute !important;
+      top: 10px !important;
+    }
+
+    .editor-panel {
+      position: absolute !important;
+      top: 0 !important;
+    }
+  }
+
+  $theme: (
+    'amber': (
+      '#fbab18',
+      '#ffd54f',
+      '#ffecb3',
+      '#fff7e1'
+    ),
+    'blue': (
+      '#005eaa',
+      '#88c3ea',
+      '#c0e9ff',
+      '#edf9ff'
+    ),
+    'brown': (
+      '#705043',
+      '#ad907b',
+      '#d7ccc8',
+      '#f2ebe8'
+    ),
+    'cyan': (
+      '#006778',
+      '#65b0bd',
+      '#cce5e9',
+      '#ebf5f6'
+    ),
+    'green': (
+      '#4b830d',
+      '#84bc49',
+      '#dcedc8',
+      '#f1f8e9'
+    ),
+    'indigo': (
+      '#26418f',
+      '#92a6dd',
+      '#dee8ff',
+      '#f2f6ff'
+    ),
+    'orange': (
+      '#bb4d00',
+      '#ffad42',
+      '#ffe97d',
+      '#fff4cf'
+    ),
+    'pink': (
+      '#af4448',
+      '#e57373',
+      '#ffc2c2',
+      '#ffe7e7'
+    ),
+    'purple': (
+      '#712177',
+      '#b890bb',
+      '#e3d3e4',
+      '#f7f2f7'
+    ),
+    'slate': (
+      '#29434e',
+      '#7e9ba5',
+      '#b6c6d2',
+      '#e2e8ed'
+    ),
+    'teal': (
+      '#00695c',
+      '#4ebaaa',
+      '#ceece7',
+      '#ebf7f5'
+    )
+  );
+}

package/types/Action.ts

@@ -0,0 +1 @@
+export type Action<T, P> = { type: T; payload?: P }

package/types/Axis.ts

@@ -5,6 +5,7 @@ export type Anchor = {
 }
 
 export type Axis = {
+  scalePadding: number
   anchors?: Anchor[]
   dataKey: string
   dateDisplayFormat: string
@@ -31,6 +32,7 @@ export type Axis = {
   rightMax?: string
   rightNumTicks?: number
   sortDates?: boolean
+  sortKey?: string
   showTargetLabel?: boolean
   size?: number
   target?: number

package/types/BoxPlot.ts

@@ -0,0 +1,21 @@
+export type BoxPlot = {
+  tableData: Object[]
+  labels: {
+    mean: string
+    maximum: string
+    minimum: string
+    iqr: string
+    median: string
+    q1: string
+    q3: string
+    outliers: string
+    values: string
+    total: string
+    lowerBounds: string
+    upperBounds: string
+  }
+  plots: []
+  categories: string[]
+  firstQuartilePercentage: number
+  geoType: string
+}

package/types/Column.ts

@@ -6,6 +6,7 @@ export type Column = {
   roundToPlace: number
   commas: boolean
   dataTable: boolean
+  showInViz: boolean
   startingPoint: string
   series?: string
   tooltips: boolean

package/types/General.ts

@@ -0,0 +1,9 @@
+import { BoxPlot } from './BoxPlot'
+
+export type General = {
+  boxplot: BoxPlot
+  geoType: string
+  type: string
+  showDownloadButton: boolean
+  allowMapZoom?: boolean
+}

package/types/Runtime.ts

@@ -23,7 +23,7 @@ export type Runtime = {
   xAxis: Axis
   yAxis: Axis
   seriesKeys: any[]
-  seriesLabels: string[]
+  seriesLabels: Record<string, any>
   seriesLabelsAll: string[]
   editorErrorMessage: string
 }

package/types/Table.ts

@@ -11,8 +11,11 @@ export type Table = {
   showDataTableLink?: boolean
   showDownloadUrl?: boolean
   download?: boolean
-  showDownloadImgButton?: boolean
-  showDownloadPdfButton?: boolean
   customTableConfig?: boolean
   excludeColumns?: string[]
+  showDownloadImgButton?: boolean
+  showDownloadPdfButton?: boolean
+  downloadImageButton?: boolean
+  downloadPdfButton?: boolean
+  dateDisplayFormat: string
 }

package/types/ViewPort.ts

@@ -0,0 +1,2 @@
+import { viewports } from '../helpers/getViewport'
+export type ViewPort = keyof typeof viewports

package/types/Visualization.ts

@@ -2,20 +2,26 @@ export type Visualization = {
   autoLoad: boolean
   data: any
   dataDescription: Object
+  dataFileName: string
+  dataFileSourceType: string
   dataKey: string
+  datasets: Record<string, any>
   editing: boolean
-  formattedData: any
+  formattedData?: Object[]
   general: any
   hide: any[]
+  multiDashboards?: any[]
   newViz: boolean
   openModal: boolean
   originalFormattedData: any
+  orientation: 'vertical' | 'horizontal'
   table: {
     showDataTableLink: boolean
   }
   title: string
-  type: 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'filter-dropdowns'
+  type: 'dashboard' | 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'filter-dropdowns'
   uid: string
   usesSharedFilter: any
   visualizationType: string
+  visualizationSubType: string
 }

package/types/WCMSProps.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react'
+
+export type WCMSProps = {
+  config?: any
+  configUrl?: string
+  isEditor?: boolean
+  isDebug?: boolean
+  hostname?: string
+  containerEl?: ReactElement
+  sharepath?: string
+}

package/helpers/getViewport.js

@@ -1,21 +0,0 @@
-export default function getViewport(size) {
-  let result = 'lg'
-
-  const viewports = {
-    lg: 1200,
-    md: 992,
-    sm: 768,
-    xs: 576,
-    xxs: 350
-  }
-
-  if (size > 1200) return result
-
-  for (let viewport in viewports) {
-    if (size <= viewports[viewport]) {
-      result = viewport
-    }
-  }
-
-  return result
-}