@cdc/core 4.24.3 → 4.24.4

package/components/Table/components/Row.tsx

@@ -7,15 +7,19 @@ type RowProps = {
   wrapColumns: boolean
   isTotal?: boolean
   cellMinWidth?: number
+  fontSize: 'small' | 'medium' | 'large'
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
 }
 
-const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal }: RowProps) => {
+const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport }: RowProps) => {
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
+  const fontSizes = { small: 16, medium: 18, large: 20 }
+  const cellFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '11px' : `${fontSizes[fontSize]}px`
   return (
     <tr>
       {childRow.map((child, i) => (
-        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth }} isBold={isTotal}>
+        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth, fontSize: cellFontSize }} isBold={isTotal}>
           {child}
         </Cell>
       ))}

package/components/Table/types/RowType.ts

@@ -3,3 +3,6 @@ export enum RowType {
   total = 'total',
   row_group_total = 'row_group_total'
 }
+
+// The only distinction between total and row_group_total is the way the UI renders it.
+// They function otherwise the same a regular row.

package/components/Waiting.jsx

@@ -1,8 +1,18 @@
 import React from 'react'
 import '../styles/waiting.scss'
 
+const styles = {
+  position: 'relative',
+  height: '100vh',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gridArea: 'content'
+}
+
 export default ({ requiredColumns, className }) => (
-  <section className={className}>
+  <section className={className} style={styles}>
     <section className='waiting-container'>
       <h3>Configuration Required</h3>
       <p>

package/components/_stories/styles.scss

@@ -1,3 +1,4 @@
+@import '../../styles/base.scss';
 @import '../../styles/_variables';
 @import '../../styles/_mixins';
 @import '../../styles/_data-table';

package/components/createBarElement.jsx

@@ -1,6 +1,9 @@
 export default function createBarElement(props) {
   const { config, index, id, className, background, borderColor, borderWidth, width, height, x, y, onMouseOver, onMouseLeave, onClick, tooltipHtml, tooltipId, styleOverrides, seriesHighlight } = props
 
+  const adjustedWidth = Math.max(0, width);
+  const adjustedHeight = Math.max(0, height);
+
   const isHorizontal = config.orientation === 'horizontal'
   const isRounded = config.barStyle === 'rounded'
   const isStacked = config.visualizationSubType === 'stacked'
@@ -11,67 +14,67 @@ export default function createBarElement(props) {
   const stackCount = comboBarSeriesCount ? comboBarSeriesCount : isolateSeriesCount ? isolateSeriesCount : barSeriesCount
 
   let radius = config.roundingStyle === 'standard' ? 8 : config.roundingStyle === 'shallow' ? 5 : config.roundingStyle === 'finger' ? 15 : 0
-  if (radius > width / 2 || radius > height / 2) {
-    radius = Math.min(width / 2, height / 2)
+  if (radius > adjustedWidth / 2 || radius > adjustedHeight / 2) {
+    radius = Math.min(adjustedWidth / 2, adjustedHeight / 2)
   }
 
   const roundTop = () => {
-    return `M${x},${y + height}
+    return `M${x},${y + adjustedHeight}
       L${x},${y + radius}
       Q${x},${y} ${x + radius},${y}
-      L${x + width - radius},${y}
-      Q${x + width},${y} ${x + width},${y + radius}
-      L${x + width},${y + height}
-      L${x},${y + height}`
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}`
   }
 
   const roundRight = () => {
-    return `M${x},${y + height}
+    return `M${x},${y + adjustedHeight}
       L${x},${y}
-      L${x + width - radius},${y}
-      Q${x + width},${y} ${x + width},${y + radius}
-      L${x + width},${y + height - radius}
-      Q${x + width},${y + height} ${x + width - radius},${y + height}
-      L${x},${y + height}`
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}`
   }
 
   const roundBottom = () => {
-    return `M${x + radius},${y + height}
-      Q${x},${y + height} ${x},${y + height - radius}
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
       L${x},${y}
-      L${x + width},${y}
-      L${x + width},${y + height - radius}
-      Q${x + width},${y + height} ${x + width - radius},${y + height}
-      L${x + radius},${y + height}`
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
   }
 
   const roundLeft = () => {
-    return `M${x + radius},${y + height}
-      Q${x},${y + height} ${x},${y + height - radius}
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
       L${x},${y + radius}
       Q${x},${y} ${x + radius},${y}
-      L${x + width},${y}
-      L${x + width},${y + height}
-      L${x + radius},${y + height}`
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
   }
 
   const roundFull = () => {
-    return `M${x + radius},${y + height}
-      Q${x},${y + height} ${x},${y + height - radius}
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
       L${x},${y + radius}
       Q${x},${y} ${x + radius},${y}
-      L${x + width - radius},${y}
-      Q${x + width},${y} ${x + width},${y + radius}
-      L${x + width},${y + height - radius}
-      Q${x + width},${y + height} ${x + width - radius},${y + height}
-      L${x + radius},${y + height}`
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
   }
 
   const nonRounded = () => {
     return `M${x},${y}
-      L${x + width},${y}
-      L${x + width},${y + height}
-      L${x},${y + height}
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}
       L${x},${y}`
   }
 

package/components/elements/SkipTo.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react'
+
 type SkipToProps = {
   // id to skip to
   skipId: string
@@ -5,10 +7,40 @@ type SkipToProps = {
   skipMessage: string
 }
 
-const SkipTo: React.FC<SkipToProps> = ({ skipId, skipMessage }) => (
-  <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
-    {skipMessage}
-  </a>
-)
+const SkipTo: React.FC<SkipToProps> = ({ skipId, skipMessage }) => {
+  const accessibleId = useId()
+  const handleOnClick = () => {
+    // Navigate to the specific part of the page
+    const targetElement = document.getElementById(skipId)
+    if (targetElement) {
+      targetElement.scrollIntoView()
+      targetElement.setAttribute('tabIndex', '-1')
+      targetElement.focus()
+      // Setup to remove tabIndex on blur to maintain document flow
+      const blurListener = () => {
+        targetElement.removeAttribute('tabIndex')
+        targetElement.removeEventListener('blur', blurListener)
+      }
+      targetElement.addEventListener('blur', blurListener)
+    }
+  }
+  return (
+    <div
+      tabIndex={0}
+      id={`skip-nav--${accessibleId}`}
+      className='cdcdataviz-sr-only-focusable'
+      onClick={handleOnClick}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          handleOnClick()
+        }
+      }}
+      role='link'
+      aria-label={skipMessage}
+    >
+      {skipMessage}
+    </div>
+  )
+}
 
 export default SkipTo

package/components/managers/DataDesigner.tsx

@@ -5,18 +5,18 @@ 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'
+import { ConfigureData } from '../../types/ConfigureData'
 
 type DataDesignerProps = {
-  configureData?: any // todo: add description here when understood better
-  updateDescriptionProp?: (vizKey: string, dataKey: string, propName: string, value: any) => 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
+  configureData?: ConfigureData
+  updateDescriptionProp: (propName: string, value: any) => void // used to update data description fields
+  visualizationKey: string
   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 { configureData, updateDescriptionProp, config, setConfig } = props
   const hasDataOrientation = config?.visualizationType !== 'Forest Plot'
   const hasMultipleSeries = config?.visualizationType !== 'Forest Plot'
   const hasRowSelection = config?.visualizationType !== 'Forest Plot'
@@ -47,7 +47,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 <button
                   className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
+                    updateDescriptionProp('horizontal', false)
                   }}
                 >
                   <Card>
@@ -63,7 +63,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 <button
                   className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
+                    updateDescriptionProp('horizontal', true)
                   }}
                 >
                   <Card>
@@ -90,7 +90,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   hoverStyle={{ backgroundColor: '#015daa' }}
                   className='mr-1'
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'series', true)
+                    updateDescriptionProp('series', true)
                   }}
                   active={configureData.dataDescription.series === true}
                 >
@@ -100,7 +100,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   style={{ backgroundColor: '#00345d' }}
                   hoverStyle={{ backgroundColor: '#015daa' }}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'series', false)
+                    updateDescriptionProp('series', false)
                   }}
                   active={configureData.dataDescription.series === false}
                 >
@@ -114,7 +114,7 @@ const DataDesigner = (props: DataDesignerProps) => {
               <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
               <select
                 onChange={e => {
-                  updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                  updateDescriptionProp('seriesKey', e.target.value)
                 }}
                 defaultValue={configureData.dataDescription.seriesKey}
               >
@@ -136,7 +136,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === true ? ' active' : '')}
                       onClick={() => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', true)
+                        updateDescriptionProp('singleRow', true)
                       }}
                     >
                       <Card>
@@ -150,7 +150,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === false ? ' active' : '')}
                       onClick={() => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', false)
+                        updateDescriptionProp('singleRow', false)
                       }}
                     >
                       <Card>
@@ -168,7 +168,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
                     <select
                       onChange={e => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                        updateDescriptionProp('seriesKey', e.target.value)
                       }}
                       defaultValue={configureData.dataDescription.seriesKey}
                     >
@@ -184,7 +184,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <div className='mb-1'>Which property in the dataset represents the values for the category/date axis or map geography?</div>
                     <select
                       onChange={e => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'xKey', e.target.value)
+                        updateDescriptionProp('xKey', e.target.value)
                       }}
                       defaultValue={configureData.dataDescription.xKey}
                     >
@@ -207,7 +207,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                               onClick={() => {
                                 let newValueKeys = configureData.dataDescription.valueKeysTallSupport
                                 newValueKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', newValueKeys)
+                                updateDescriptionProp('valueKeysTallSupport', newValueKeys)
                               }}
                             >
                               X
@@ -219,7 +219,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <select
                       onChange={e => {
                         if (e.target.value && (!configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
+                          updateDescriptionProp('valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
                         }
                       }}
                     >
@@ -244,7 +244,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                               onClick={() => {
                                 let newIgnoredKeys = configureData.dataDescription.ignoredKeys
                                 newIgnoredKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', newIgnoredKeys)
+                                updateDescriptionProp('ignoredKeys', newIgnoredKeys)
                               }}
                             >
                               X
@@ -256,7 +256,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <select
                       onChange={e => {
                         if (e.target.value) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
+                          updateDescriptionProp('ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
                         }
                         e.target.value = ''
                       }}

package/components/ui/Icon.tsx

@@ -33,6 +33,8 @@ import iconPlus from '../../assets/icon-plus.svg'
 import iconMinus from '../../assets/icon-minus.svg'
 import iconTable from '../../assets/icon-table.svg'
 import iconSankey from '../../assets/icon-sankey.svg'
+import iconRotateLeft from '../../assets/icon-rotate-left.svg'
+import iconCommand from '../../assets/icon-command.svg'
 
 import '../../styles/v2/components/icon.scss'
 
@@ -68,7 +70,9 @@ const iconHash = {
   'filtered-text': iconText,
   'filter-dropdowns': iconDropdowns,
   table: iconTable,
-  sankey: iconSankey
+  sankey: iconSankey,
+  rotateLeft: iconRotateLeft,
+  command: iconCommand
 }
 
 export const ICON_TYPES = Object.keys(iconHash)

package/helpers/{coveUpdateWorker.js → coveUpdateWorker.ts}

@@ -1,19 +1,19 @@
 // If config key names or position in the config have been changed with a version change,
 // process those config entries and format old values into new
-import update_4_23 from './ver/4.23'
 import update_4_24_3 from './ver/4.24.3'
 
 // 4.23.6 ------------------------------------------------------
-const coveUpdateWorker = async config => {
+export const coveUpdateWorker = config => {
   let genConfig = config
 
-  // v4.23
-  genConfig = await update_4_23(genConfig)
-
   // v4.24.3
-  genConfig = await update_4_24_3(genConfig)
+  genConfig = update_4_24_3(genConfig)
 
   return genConfig
 }
 
-export default coveUpdateWorker
+const asyncWorker = async config => {
+  return await coveUpdateWorker(config)
+}
+
+export default asyncWorker

package/helpers/useDataVizClasses.js

@@ -1,7 +1,6 @@
 export default function useDataVizClasses(config, viewport = null) {
   const { legend } = config
   let lineDatapointClass = ''
-  let barBorderClass = ''
 
   if (config.lineDatapointStyle === 'hover') {
     lineDatapointClass = ' chart-line--hover'
@@ -9,9 +8,6 @@ export default function useDataVizClasses(config, viewport = null) {
   if (config.lineDatapointStyle === 'always show') {
     lineDatapointClass = ' chart-line--always'
   }
-  if (config.barHasBorder === 'false') {
-    barBorderClass = ' chart-bar--no-border'
-  }
 
   let innerContainerClasses = ['cove-component__inner']
   let contentClasses = ['cove-component__content']
@@ -22,6 +18,10 @@ export default function useDataVizClasses(config, viewport = null) {
     if (title && showTitle) contentClasses.push('component--has-title')
   }
 
+  if (config.type === 'markup-include') {
+    contentClasses = contentClasses.filter(item => item !== 'cove-component__content')
+  }
+
   config.showTitle && contentClasses.push('component--has-title')
   config.title && config.visualizationType !== 'chart' && config.visualizationType !== 'Spark Line' && contentClasses.push('component--has-title')
   config.subtext && innerContainerClasses.push('component--has-subtext')
@@ -69,5 +69,5 @@ export default function useDataVizClasses(config, viewport = null) {
     div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container']
   }
 
-  return { innerContainerClasses, contentClasses, barBorderClass, lineDatapointClass, sparkLineStyles, legendClasses }
+  return { innerContainerClasses, contentClasses, lineDatapointClass, sparkLineStyles, legendClasses }
 }

package/helpers/ver/4.24.3.ts

@@ -0,0 +1,56 @@
+import { ConfigRow } from '@cdc/dashboard/src/types/ConfigRow'
+import _ from 'lodash'
+
+const remapDashboardRows = config => {
+  if (config.type === 'dashboard') {
+    config.rows = config.rows.map(row => {
+      let newRow = undefined
+      if (row.columns === undefined) {
+        newRow = {} as ConfigRow
+        const newColumns = row.map(column => {
+          newRow.uuid = column.uuid
+          newRow.toggle = column.toggle
+          newRow.equalHeight = column.equalHeight
+          return _.pick(column, 'equalHeight', 'width', 'hide', 'widget', 'uuid')
+        })
+        newRow.columns = newColumns
+      }
+      return newRow ?? row
+    })
+  }
+}
+
+const chartUpdates = newConfig => {
+  if (newConfig.type === 'chart') {
+    if (newConfig.xAxis.sortDates) {
+      newConfig.xAxis.type = 'date-time'
+    }
+    newConfig.table.download = true
+
+    delete newConfig.xAxis.sortDates
+  }
+}
+
+const mapUpdates = newConfig => {
+  if (newConfig.type === 'map') {
+    newConfig.table.download = true
+    newConfig.general.showDownloadButton = true
+    // expandDataTable should be removed in the future....
+    newConfig.general.expandDataTable = newConfig.table.expanded
+  }
+}
+
+const update_4_24_3 = config => {
+  const ver = '4.24.3'
+
+  const newConfig = _.cloneDeep(config)
+
+  remapDashboardRows(newConfig)
+  chartUpdates(newConfig)
+  mapUpdates(newConfig)
+
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_24_3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.3",
+  "version": "4.24.4",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -31,5 +31,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf"
+  "gitHead": "1843b4632140d582af6a87606374cbd4fe25ad5c"
 }

package/styles/_data-table.scss

@@ -28,6 +28,9 @@ div.data-table-heading {
     z-index: 2;
     position: relative;
   }
+  @include breakpoint(xs) {
+    font-size: $font-small + 0.2em;
+  }
 }
 
 table.horizontal {
@@ -139,6 +142,7 @@ table.data-table {
 
   td {
     padding: 0.3em 0.7em;
+
     border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
 
@@ -151,6 +155,10 @@ table.data-table {
     &:last-child {
       border-right: 0 !important;
     }
+
+    @include breakpoint(xs) {
+      font-size: $font-small;
+    }
   }
   tr {
     & > * {

package/styles/_global.scss

@@ -38,7 +38,11 @@ strong {
   border: 0 !important;
   display: flex;
 }
-
+.cdcdataviz-sr-only-focusable:focus {
+  width: fit-content;
+  margin-bottom: 0.5em;
+  margin-left: 1em;
+}
 .inline-icon {
   width: 1em !important;
   height: auto !important;
@@ -80,9 +84,9 @@ strong {
   }
   &.danger {
     background-color: $red;
-    padding: 0em 0.6em 0.0em;
+    padding: 0em 0.6em 0em;
     height: 1.6em;
-    font-size: 0.8   em;
+    font-size: 0.8 em;
     color: #fff;
     &:hover {
       background-color: darken($red, 5%);
@@ -193,4 +197,3 @@ section.footnotes {
 .margin-left-href {
   margin-left: 15px;
 }
-

package/styles/_variables.scss

@@ -61,3 +61,6 @@ $amber-primary: #fbab18 !default;
 $amber-secondary: #ffd54f !default;
 $amber-tertiary: #ffecb3 !default;
 $amber-quaternary: #fff7e1 !default;
+
+/// Fonts
+$font-small: 0.7em;

package/styles/base.scss

@@ -82,24 +82,6 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   color-adjust: exact !important; /* Firefox 48 – 96 */
   print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
 
-  .editor-panel.cove {
-    position: absolute;
-    height: 100vh;
-    top: 0;
-    max-width: 350px;
-    width: 350px;
-
-    .editor-toggle {
-      position: absolute !important;
-      top: 10px !important;
-    }
-
-    .editor-panel {
-      position: absolute !important;
-      top: 0 !important;
-    }
-  }
-
   $theme: (
     'amber': (
       '#fbab18',

package/styles/v2/base/index.scss

@@ -1,4 +1,4 @@
-//@import "reset"; TODO: Enable after cove refactor
+// @import 'reset'; //TODO: Enable after cove refactor
 @import 'typography';
 
 @import 'general';

package/styles/v2/components/ui/tooltip.scss

@@ -27,27 +27,6 @@
     }
   }
 
-  // editor-panel
-  .editor-panel {
-    .cove-label + .cove-tooltip {
-      top: 1px;
-      margin-left: 0.5rem;
-      font-size: 0.75rem;
-    }
-
-    .cove-accordion__button .cove-tooltip {
-      display: inline-flex;
-      right: 1.5rem;
-      line-height: inherit;
-    }
-
-    .cove-list-group__item .cove-tooltip {
-      width: 100%;
-      display: block;
-      line-height: inherit;
-    }
-  }
-
   // begin actual tooltip styles
   .react-tooltip,
   .tooltip {

package/types/Axis.ts

@@ -19,6 +19,8 @@ export type Axis = {
   label?: string
   labelOffset?: number
   labelPlacement?: string
+  manual?: boolean
+  manualStep?: number
   max?: string
   maxTickRotation?: number
   min?: string

package/types/ConfigureData.ts

@@ -0,0 +1,8 @@
+import { DataDescription } from './DataDescription'
+
+export type ConfigureData = {
+  dataDescription: Partial<DataDescription>
+  data: Object[]
+  formattedData?: Object[]
+  dataKey: string // This is the key of the dataset in the config
+}