@cdc/editor 4.25.11 → 4.26.2

package/src/components/DataImport/components/samples/valid-horizon-chart.json

@@ -0,0 +1,373 @@
+[
+    {
+        "Date": "01/01/2022",
+        "Data 1": "2",
+        "Data 2": "3",
+        "Data 3": "2",
+        "Data 4": "2"
+    },
+    {
+        "Date": "01/08/2022",
+        "Data 1": "3",
+        "Data 2": "4",
+        "Data 3": "3",
+        "Data 4": "2"
+    },
+    {
+        "Date": "01/15/2022",
+        "Data 1": "4",
+        "Data 2": "5",
+        "Data 3": "4",
+        "Data 4": "3"
+    },
+    {
+        "Date": "01/22/2022",
+        "Data 1": "6",
+        "Data 2": "7",
+        "Data 3": "6",
+        "Data 4": "5"
+    },
+    {
+        "Date": "01/29/2022",
+        "Data 1": "8",
+        "Data 2": "10",
+        "Data 3": "8",
+        "Data 4": "7"
+    },
+    {
+        "Date": "02/05/2022",
+        "Data 1": "15",
+        "Data 2": "18",
+        "Data 3": "14",
+        "Data 4": "12"
+    },
+    {
+        "Date": "02/12/2022",
+        "Data 1": "25",
+        "Data 2": "28",
+        "Data 3": "22",
+        "Data 4": "20"
+    },
+    {
+        "Date": "02/19/2022",
+        "Data 1": "45",
+        "Data 2": "40",
+        "Data 3": "35",
+        "Data 4": "32"
+    },
+    {
+        "Date": "02/26/2022",
+        "Data 1": "80",
+        "Data 2": "55",
+        "Data 3": "60",
+        "Data 4": "58"
+    },
+    {
+        "Date": "03/05/2022",
+        "Data 1": "150",
+        "Data 2": "70",
+        "Data 3": "85",
+        "Data 4": "95"
+    },
+    {
+        "Date": "03/12/2022",
+        "Data 1": "230",
+        "Data 2": "85",
+        "Data 3": "110",
+        "Data 4": "120"
+    },
+    {
+        "Date": "03/19/2022",
+        "Data 1": "300",
+        "Data 2": "95",
+        "Data 3": "130",
+        "Data 4": "145"
+    },
+    {
+        "Date": "03/26/2022",
+        "Data 1": "260",
+        "Data 2": "105",
+        "Data 3": "145",
+        "Data 4": "160"
+    },
+    {
+        "Date": "04/02/2022",
+        "Data 1": "230",
+        "Data 2": "120",
+        "Data 3": "165",
+        "Data 4": "175"
+    },
+    {
+        "Date": "04/09/2022",
+        "Data 1": "210",
+        "Data 2": "135",
+        "Data 3": "185",
+        "Data 4": "190"
+    },
+    {
+        "Date": "04/16/2022",
+        "Data 1": "190",
+        "Data 2": "150",
+        "Data 3": "205",
+        "Data 4": "205"
+    },
+    {
+        "Date": "04/23/2022",
+        "Data 1": "175",
+        "Data 2": "165",
+        "Data 3": "225",
+        "Data 4": "215"
+    },
+    {
+        "Date": "04/30/2022",
+        "Data 1": "160",
+        "Data 2": "180",
+        "Data 3": "245",
+        "Data 4": "225"
+    },
+    {
+        "Date": "05/07/2022",
+        "Data 1": "145",
+        "Data 2": "200",
+        "Data 3": "265",
+        "Data 4": "240"
+    },
+    {
+        "Date": "05/14/2022",
+        "Data 1": "135",
+        "Data 2": "220",
+        "Data 3": "285",
+        "Data 4": "255"
+    },
+    {
+        "Date": "05/21/2022",
+        "Data 1": "125",
+        "Data 2": "240",
+        "Data 3": "305",
+        "Data 4": "270"
+    },
+    {
+        "Date": "05/28/2022",
+        "Data 1": "115",
+        "Data 2": "260",
+        "Data 3": "325",
+        "Data 4": "285"
+    },
+    {
+        "Date": "06/04/2022",
+        "Data 1": "105",
+        "Data 2": "280",
+        "Data 3": "345",
+        "Data 4": "300"
+    },
+    {
+        "Date": "06/11/2022",
+        "Data 1": "95",
+        "Data 2": "300",
+        "Data 3": "365",
+        "Data 4": "315"
+    },
+    {
+        "Date": "06/18/2022",
+        "Data 1": "90",
+        "Data 2": "320",
+        "Data 3": "385",
+        "Data 4": "330"
+    },
+    {
+        "Date": "06/25/2022",
+        "Data 1": "85",
+        "Data 2": "340",
+        "Data 3": "405",
+        "Data 4": "340"
+    },
+    {
+        "Date": "07/02/2022",
+        "Data 1": "80",
+        "Data 2": "360",
+        "Data 3": "420",
+        "Data 4": "350"
+    },
+    {
+        "Date": "07/09/2022",
+        "Data 1": "75",
+        "Data 2": "380",
+        "Data 3": "435",
+        "Data 4": "360"
+    },
+    {
+        "Date": "07/16/2022",
+        "Data 1": "70",
+        "Data 2": "400",
+        "Data 3": "450",
+        "Data 4": "365"
+    },
+    {
+        "Date": "07/23/2022",
+        "Data 1": "65",
+        "Data 2": "420",
+        "Data 3": "460",
+        "Data 4": "370"
+    },
+    {
+        "Date": "07/30/2022",
+        "Data 1": "60",
+        "Data 2": "440",
+        "Data 3": "470",
+        "Data 4": "372"
+    },
+    {
+        "Date": "08/06/2022",
+        "Data 1": "55",
+        "Data 2": "470",
+        "Data 3": "460",
+        "Data 4": "370"
+    },
+    {
+        "Date": "08/13/2022",
+        "Data 1": "50",
+        "Data 2": "495",
+        "Data 3": "445",
+        "Data 4": "365"
+    },
+    {
+        "Date": "08/20/2022",
+        "Data 1": "48",
+        "Data 2": "480",
+        "Data 3": "430",
+        "Data 4": "355"
+    },
+    {
+        "Date": "08/27/2022",
+        "Data 1": "45",
+        "Data 2": "455",
+        "Data 3": "410",
+        "Data 4": "345"
+    },
+    {
+        "Date": "09/03/2022",
+        "Data 1": "42",
+        "Data 2": "420",
+        "Data 3": "380",
+        "Data 4": "325"
+    },
+    {
+        "Date": "09/10/2022",
+        "Data 1": "38",
+        "Data 2": "380",
+        "Data 3": "345",
+        "Data 4": "300"
+    },
+    {
+        "Date": "09/17/2022",
+        "Data 1": "34",
+        "Data 2": "330",
+        "Data 3": "300",
+        "Data 4": "270"
+    },
+    {
+        "Date": "09/24/2022",
+        "Data 1": "30",
+        "Data 2": "280",
+        "Data 3": "255",
+        "Data 4": "240"
+    },
+    {
+        "Date": "10/01/2022",
+        "Data 1": "25",
+        "Data 2": "230",
+        "Data 3": "210",
+        "Data 4": "205"
+    },
+    {
+        "Date": "10/08/2022",
+        "Data 1": "20",
+        "Data 2": "185",
+        "Data 3": "165",
+        "Data 4": "170"
+    },
+    {
+        "Date": "10/15/2022",
+        "Data 1": "15",
+        "Data 2": "140",
+        "Data 3": "120",
+        "Data 4": "130"
+    },
+    {
+        "Date": "10/22/2022",
+        "Data 1": "10",
+        "Data 2": "95",
+        "Data 3": "80",
+        "Data 4": "90"
+    },
+    {
+        "Date": "10/29/2022",
+        "Data 1": "8",
+        "Data 2": "70",
+        "Data 3": "55",
+        "Data 4": "65"
+    },
+    {
+        "Date": "11/05/2022",
+        "Data 1": "6",
+        "Data 2": "45",
+        "Data 3": "35",
+        "Data 4": "40"
+    },
+    {
+        "Date": "11/12/2022",
+        "Data 1": "5",
+        "Data 2": "30",
+        "Data 3": "22",
+        "Data 4": "28"
+    },
+    {
+        "Date": "11/19/2022",
+        "Data 1": "4",
+        "Data 2": "18",
+        "Data 3": "12",
+        "Data 4": "15"
+    },
+    {
+        "Date": "11/26/2022",
+        "Data 1": "3",
+        "Data 2": "10",
+        "Data 3": "6",
+        "Data 4": "8"
+    },
+    {
+        "Date": "12/03/2022",
+        "Data 1": "3",
+        "Data 2": "8",
+        "Data 3": "5",
+        "Data 4": "6"
+    },
+    {
+        "Date": "12/10/2022",
+        "Data 1": "2",
+        "Data 2": "6",
+        "Data 3": "4",
+        "Data 4": "4"
+    },
+    {
+        "Date": "12/17/2022",
+        "Data 1": "2",
+        "Data 2": "5",
+        "Data 3": "3",
+        "Data 4": "3"
+    },
+    {
+        "Date": "12/24/2022",
+        "Data 1": "1",
+        "Data 2": "3",
+        "Data 3": "2",
+        "Data 4": "2"
+    },
+    {
+        "Date": "12/31/2022",
+        "Data 1": "1",
+        "Data 2": "2",
+        "Data 3": "1",
+        "Data 4": "1"
+    }
+]

package/src/components/DataImport/components/samples/valid-radar-chart.csv

@@ -0,0 +1,3 @@
+Program,Reach,Engagement,Effectiveness,Adoption,Maintenance,Cost Efficiency
+Program A,85,70,90,65,75,80
+Program B,60,85,70,90,80,55

package/src/components/PreviewDataTable.tsx

@@ -260,36 +260,43 @@ const PreviewDataTable = () => {
     <div className='table-responsive'>
       <table className='mt-2 w-100 table table-striped data-table table-sm ' aria-hidden='true' {...getTableProps}>
         <thead>
-          {headerGroups.map(headerGroup => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => {
-                const { key, ...headerProps } = column.getHeaderProps(column.getSortByToggleProps())
-                return (
-                  <th
-                    key={key}
-                    scope='col'
-                    {...headerProps}
-                    className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''}
-                    title={column.Header}
-                  >
-                    {column.render('Header')}
-                    <div {...column.getResizerProps()} className='resizer' />
-                  </th>
-                )
-              })}
-            </tr>
-          ))}
+          {headerGroups.map(headerGroup => {
+            const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps()
+            return (
+              <tr key={key} {...headerGroupProps}>
+                {headerGroup.headers.map(column => {
+                  const { key: columnKey, ...headerProps } = column.getHeaderProps(column.getSortByToggleProps())
+                  return (
+                    <th
+                      key={columnKey}
+                      scope='col'
+                      {...headerProps}
+                      className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''}
+                      title={column.Header}
+                    >
+                      {column.render('Header')}
+                      <div {...column.getResizerProps()} className='resizer' />
+                    </th>
+                  )
+                })}
+              </tr>
+            )
+          })}
         </thead>
         <tbody {...getTableBodyProps()}>
           {page.map(row => {
             prepareRow(row)
+            const { key, ...rowProps } = row.getRowProps()
             return (
-              <tr {...row.getRowProps()}>
-                {row.cells.map(cell => (
-                  <td {...cell.getCellProps()} title={cell.value}>
-                    {cell.render('Cell')}
-                  </td>
-                ))}
+              <tr key={key} {...rowProps}>
+                {row.cells.map(cell => {
+                  const { key: cellKey, ...cellProps } = cell.getCellProps()
+                  return (
+                    <td key={cellKey} {...cellProps} title={cell.value}>
+                      {cell.render('Cell')}
+                    </td>
+                  )
+                })}
               </tr>
             )
           })}

package/src/components/modal/Modal.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react'
-// import FocusLock from "react-focus-lock";
 import ReactDOM from 'react-dom'
 import CloseIcon from '../../assets/icons/close.svg'
 
@@ -21,7 +20,6 @@ export const Modal = ({ isShown, hide, modalContent, headerText }) => {
   const modal = (
     <>
       <div className='modal-backdrop' onClick={hide} />
-      {/* <FocusLock> */}
       <div className='modal-wrapper' aria-modal aria-labelledby={headerText} tabIndex={-1} role='dialog'>
         <div className='modal'>
           <div className='modal-header'>
@@ -31,7 +29,6 @@ export const Modal = ({ isShown, hide, modalContent, headerText }) => {
           <div className='modal-content'>{modalContent}</div>
         </div>
       </div>
-      {/* </FocusLock> */}
     </>
   )
 

package/src/scss/choose-vis-tab.scss

@@ -12,64 +12,85 @@
     margin-top: 1em;
     list-style: none;
     display: grid;
+    gap: 1em;
     &.category_general {
-      grid-template-columns: repeat(5, 180px);
+      grid-template-columns: repeat(6, 160px);
     }
     &.category_charts {
-      grid-template-columns: repeat(7, 180px);
-      grid-row-gap: 50px;
+      grid-template-columns: repeat(7, 160px);
     }
     &.category_maps {
-      grid-template-columns: repeat(5, 180px);
+      grid-template-columns: repeat(5, 160px);
+    }
+
+    li {
+      display: flex;
     }
 
     button {
       background-color: #fff;
       color: var(--baseColor);
-      border: solid 1px;
+      border: solid 2px;
       border-color: rgb(199, 199, 199);
-      padding: 1.3em $gbl-padding;
-      height: 100%;
+      border-radius: 8px;
+      padding: 1.5em 1em;
+      width: 160px;
+      height: 160px;
       align-items: center;
+      justify-content: center;
       display: flex;
-      border: var(--lightGray) 1px solid;
-      margin-right: 1em;
       cursor: pointer;
-      transition: 0.1s all;
+      transition: all 0.2s ease;
       flex-direction: column;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
       span {
         text-transform: none;
-        font-size: 1em;
+        font-size: 0.9em;
+        font-weight: 500;
+        text-align: center;
+        line-height: 1.3;
+        margin-top: auto;
       }
+
       &:hover {
-        background: #f2f2f2;
-        border-color: #949494;
-        transition: 0.1s all;
+        background: #f8f9fa;
+        border-color: #005eaa;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        transition: all 0.2s ease;
       }
+
       &.active {
-        background: #fff;
+        background: #f0f7ff;
         border-color: #005eaa;
         color: #005eaa;
         position: relative;
+        box-shadow: 0 4px 12px rgba(0, 94, 170, 0.15);
+
         path {
           fill: #005eaa;
         }
+
         &:before {
           content: ' ';
-          width: 5px;
+          width: 4px;
           background: #005eaa;
           left: 0;
           top: 0;
           bottom: 0;
           position: absolute;
+          border-radius: 8px 0 0 8px;
         }
       }
+
       svg {
         display: block;
-        margin: 0 auto 0.5em;
+        margin: 0 auto;
         box-sizing: border-box;
-        width: 100px;
-        height: 75px;
+        width: 80px;
+        height: 80px;
+        flex-shrink: 0;
       }
     }
   }

package/vite.config.js

@@ -1,4 +1,5 @@
 import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
-export default GenerateViteConfig(moduleName)
+// Editor doesn't want the default padding CSS
+export default GenerateViteConfig(moduleName, {}, {}, { css: '' })