@cdc/editor 4.24.9 → 4.24.11

package/src/components/ConfigureTab.tsx

@@ -1,12 +1,10 @@
 import React, { useContext } from 'react'
 
-import CdcMap from '@cdc/map' // TODO: Lazy load this
-import CdcChart from '@cdc/chart' // TODO: Lazy load this
-import CdcDataBite from '@cdc/data-bite'
-import CdcWaffleChart from '@cdc/waffle-chart'
-import CdcMarkupInclude from '@cdc/markup-include'
-
-import '../scss/configure-tab.scss'
+import CdcMap from '@cdc/map/src/CdcMap' // TODO: Lazy load this
+import CdcChart from '../../../chart/src/CdcChart' // TODO: Lazy load this
+import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
+import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
+import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
@@ -21,7 +19,14 @@ export default function ConfigureTab({ containerEl }) {
     case 'map':
       return (
         <ErrorBoundary component='CdcMap'>
-          <CdcMap isEditor={true} isDebug={isDebug} config={config} hostname={hostname} setConfig={setTempConfig} containerEl={containerEl} />
+          <CdcMap
+            isEditor={true}
+            isDebug={isDebug}
+            config={config}
+            hostname={hostname}
+            setConfig={setTempConfig}
+            containerEl={containerEl}
+          />
         </ErrorBoundary>
       )
     case 'waffle-chart':

package/src/components/DataImport.tsx

@@ -40,7 +40,9 @@ export default function DataImport() {
   }
   const transform = new DataTransform()
 
-  const [externalURL, setExternalURL] = useState(config.dataFileSourceType === 'url' ? config.dataFileName : config.dataUrl || '')
+  const [externalURL, setExternalURL] = useState(
+    config.dataFileSourceType === 'url' ? config.dataFileName : config.dataUrl || ''
+  )
 
   const [keepURL, setKeepURL] = useState(!!config.dataUrl)
 
@@ -59,13 +61,13 @@ export default function DataImport() {
     if (size === undefined) return ''
 
     if (size > Math.pow(1024, 3)) {
-      return Math.round((size / Math.pow(1024, 3)) * 100) / 100 + ' GB'
+      return Math.round((size / Math.pow(1024, 3)) * 100) / 100 + 'GB'
     } else if (size > Math.pow(1024, 2)) {
-      return Math.round((size / Math.pow(1024, 2)) * 100) / 100 + ' MB'
+      return Math.round((size / Math.pow(1024, 2)) * 100) / 100 + 'MB'
     } else if (size > 1024) {
-      return Math.round((size / 1024) * 100) / 100 + ' KB'
+      return Math.round((size / 1024) * 100) / 100 + 'KB'
     } else {
-      return size + ' B'
+      return size + 'B'
     }
   }
 
@@ -88,7 +90,11 @@ export default function DataImport() {
   }
 
   const getFileExtension = (url: URL) => {
-    return isSolrCsv(externalURL) ? '.csv' : isSolrJson(externalURL) ? '.json' : Object.keys(supportedDataTypes).find(extension => url.pathname.endsWith(extension))
+    return isSolrCsv(externalURL)
+      ? '.csv'
+      : isSolrJson(externalURL)
+      ? '.json'
+      : Object.keys(supportedDataTypes).find(extension => url.pathname.endsWith(extension))
   }
 
   const loadExternal = async () => {
@@ -96,7 +102,8 @@ export default function DataImport() {
     // Is URL valid?
 
     try {
-      dataURL = isSolrCsv(externalURL) || isSolrJson(externalURL) ? externalURL : new URL(externalURL, window.location.origin)
+      dataURL =
+        isSolrCsv(externalURL) || isSolrJson(externalURL) ? externalURL : new URL(externalURL, window.location.origin)
     } catch {
       throw errorMessages.urlInvalid
     }
@@ -116,7 +123,11 @@ export default function DataImport() {
           const csvTypes = ['text/csv', 'text/plain']
           if ((fileExtension === '.csv' && csvTypes.includes(responseBlob.type)) || isSolrCsv(externalURL)) {
             responseBlob = responseBlob.slice(0, responseBlob.size, 'text/csv')
-          } else if (responseBlob.type === 'application/json' || (fileExtension === '.json' && responseBlob.type === 'text/plain') || isSolrJson(externalURL)) {
+          } else if (
+            responseBlob.type === 'application/json' ||
+            (fileExtension === '.json' && responseBlob.type === 'text/plain') ||
+            isSolrJson(externalURL)
+          ) {
             responseBlob = responseBlob.slice(0, responseBlob.size, 'application/json')
           }
         })
@@ -146,7 +157,8 @@ export default function DataImport() {
    */
   const loadData = async (fileBlob = null, fileName, editingDatasetKey) => {
     let fileData = fileBlob
-    const fileSource = fileData?.path ?? fileName ?? externalURL
+    let fileSource = fileData?.path ?? fileName ?? externalURL
+    if (fileSource && typeof fileSource === 'string') fileSource = fileSource.trim()
     const fileSourceType = fileBlob ? 'file' : 'url'
 
     // Get the raw data as text from the file
@@ -332,19 +344,43 @@ export default function DataImport() {
   }
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
-  const { getRootProps: getRootProps2, getInputProps: getInputProps2, isDragActive: isDragActive2 } = useDropzone({ onDrop })
+  const {
+    getRootProps: getRootProps2,
+    getInputProps: getInputProps2,
+    isDragActive: isDragActive2
+  } = useDropzone({ onDrop })
 
   const loadDataFromUrl = () => {
     return (
       <>
         <form className='input-group d-flex' onSubmit={e => e.preventDefault()}>
-          <input id='external-data' type='text' className='form-control flex-grow-1 border-right-0' placeholder='e.g., https://data.cdc.gov/resources/file.json' aria-label='Load data from external URL' aria-describedby='load-data' value={externalURL} onChange={e => setExternalURL(e.target.value)} />
-          <button className='input-group-text btn btn-primary px-4' type='submit' id='load-data' onClick={() => loadData(null, externalURL, editingDataset)}>
+          <input
+            id='external-data'
+            type='text'
+            className='form-control flex-grow-1 border-right-0'
+            placeholder='e.g., https://data.cdc.gov/resources/file.json'
+            aria-label='Load data from external URL'
+            aria-describedby='load-data'
+            value={externalURL}
+            onChange={e => setExternalURL(e.target.value)}
+          />
+          <button
+            className='rounded-0 border-0 btn btn-primary px-4'
+            type='submit'
+            id='load-data'
+            onClick={() => loadData(null, externalURL, editingDataset)}
+          >
             Load
           </button>
         </form>
         <label htmlFor='keep-url' className='mt-1 d-flex keep-url'>
-          <input type='checkbox' id='keep-url' checked={keepURL} onChange={() => changeKeepURL(!keepURL, editingDataset)} /> Always load from URL (normally will only pull once)
+          <input
+            type='checkbox'
+            id='keep-url'
+            checked={keepURL}
+            onChange={() => changeKeepURL(!keepURL, editingDataset)}
+          />{' '}
+          Always load from URL (normally will only pull once)
         </label>
       </>
     )
@@ -365,7 +401,15 @@ export default function DataImport() {
     return (
       //todo convert to modal
       <>
-        <button className='btn danger' onClick={() => resetEditor({ type: config.type, visualizationType: config.visualizationType } as Visualization, 'Resetting will remove your data and settings. Do you want to continue?')}>
+        <button
+          className='btn danger'
+          onClick={() =>
+            resetEditor(
+              { type: config.type, visualizationType: config.visualizationType } as Visualization,
+              'Resetting will remove your data and settings. Do you want to continue?'
+            )
+          }
+        >
           Clear
           <CloseIcon />
         </button>
@@ -444,7 +488,8 @@ export default function DataImport() {
     readyToConfigure = Object.keys(config.datasets).length > 0
   } else {
     configureData = config
-    readyToConfigure = !!config.formattedData || (config.data && config.dataDescription && transform.autoStandardize(config.data))
+    readyToConfigure =
+      !!config.formattedData || (config.data && config.dataDescription && transform.autoStandardize(config.data))
   }
 
   if (config.visualizationType === 'Sankey' && config.data) {
@@ -504,7 +549,10 @@ export default function DataImport() {
                       <Icon display='question' />
                     </Tooltip.Target>
                     <Tooltip.Content>
-                      <p style={{ padding: '0.5rem' }}>Name of the query string parameter that will be appended to the URL above with the values provided below.</p>
+                      <p style={{ padding: '0.5rem' }}>
+                        Name of the query string parameter that will be appended to the URL above with the values
+                        provided below.
+                      </p>
                     </Tooltip.Content>
                   </Tooltip>
                 </span>{' '}
@@ -560,7 +608,10 @@ export default function DataImport() {
               <form
                 onSubmit={e => {
                   e.preventDefault()
-                  if (!config.filters[i].orderedValues || config.filters[i].orderedValues.indexOf(e.target[0].value) === -1) {
+                  if (
+                    !config.filters[i].orderedValues ||
+                    config.filters[i].orderedValues.indexOf(e.target[0].value) === -1
+                  ) {
                     let newFilters = [...config.filters]
                     newFilters[i].orderedValues = newFilters[i].orderedValues || []
                     newFilters[i].orderedValues.push(e.target[0].value)
@@ -582,7 +633,12 @@ export default function DataImport() {
       <button
         className='btn full-width'
         onClick={() => {
-          setConfig({ ...config, filters: config.filters ? [...config.filters, { type: 'url', key: Date.now() }] : [{ type: 'url', key: Date.now() }] })
+          setConfig({
+            ...config,
+            filters: config.filters
+              ? [...config.filters, { type: 'url', key: Date.now() }]
+              : [{ type: 'url', key: Date.now() }]
+          })
         }}
       >
         Add New URL Filter
@@ -604,7 +660,7 @@ export default function DataImport() {
                   <th>Name</th>
                   <th>Size</th>
                   <th>Type</th>
-                  <th colSpan={4}>Actions</th>
+                  <th colSpan={3}>Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -613,18 +669,26 @@ export default function DataImport() {
                     config.datasets[datasetKey].dataFileName && (
                       <tr key={`tr-${datasetKey}`}>
                         <td>
-                          <input className='dataset-name-input' type='text' defaultValue={datasetKey} onBlur={e => renameDataset(datasetKey, e.target.value)} />
+                          <input
+                            className='dataset-name-input'
+                            type='text'
+                            defaultValue={datasetKey}
+                            onBlur={e => renameDataset(datasetKey, e.target.value)}
+                          />
                         </td>
-                        <td>{displaySize(config.datasets[datasetKey].dataFileSize)}</td>
-                        <td>{config.datasets[datasetKey].dataFileFormat}</td>
+                        <td className='p-1'>{displaySize(config.datasets[datasetKey].dataFileSize)}</td>
+                        <td className='p-1'>{config.datasets[datasetKey].dataFileFormat}</td>
                         <td>
-                          <button className='btn btn-primary' onClick={() => setGlobalDatasetProp(datasetKey, 'preview', true)}>
-                            Preview Data
+                          <button
+                            className='btn btn-link p-1'
+                            onClick={() => setGlobalDatasetProp(datasetKey, 'preview', true)}
+                          >
+                            Preview
                           </button>
                         </td>
                         <td>
                           <button
-                            className='btn btn-primary'
+                            className='btn btn-link p-1'
                             onClick={() => {
                               if (editingDataset === datasetKey) {
                                 setEditingDataset(undefined)
@@ -632,16 +696,18 @@ export default function DataImport() {
                                 setKeepURL(false)
                               } else {
                                 setEditingDataset(datasetKey)
-                                setExternalURL(config.datasets[datasetKey].dataUrl || config.datasets[datasetKey].dataFileName)
+                                setExternalURL(
+                                  config.datasets[datasetKey].dataUrl || config.datasets[datasetKey].dataFileName
+                                )
                                 setKeepURL(!!config.datasets[datasetKey].dataUrl)
                               }
                             }}
                           >
-                            Edit Data
+                            Edit
                           </button>
                         </td>
                         <td>
-                          <button className='btn btn-primary' onClick={() => removeDataset(datasetKey)}>
+                          <button className='btn btn-danger' onClick={() => removeDataset(datasetKey)}>
                             X
                           </button>
                         </td>
@@ -661,7 +727,14 @@ export default function DataImport() {
                 <div className='file-loaded-area'>
                   {(config.dataFileSourceType === 'file' || !config.dataFileSourceType) && (
                     <div className='data-source-options'>
-                      <div className={isDragActive2 ? 'drag-active cdcdataviz-file-selector loaded-file' : 'cdcdataviz-file-selector loaded-file'} {...getRootProps2()}>
+                      <div
+                        className={
+                          isDragActive2
+                            ? 'drag-active cdcdataviz-file-selector loaded-file'
+                            : 'cdcdataviz-file-selector loaded-file'
+                        }
+                        {...getRootProps2()}
+                      >
                         <input {...getInputProps2()} />
                         {isDragActive2 ? (
                           <p>Drop file here</p>
@@ -688,7 +761,15 @@ export default function DataImport() {
               </>
             )}
 
-            {showDataDesigner && <DataDesigner visualizationKey={null} configureData={configureData} updateDescriptionProp={(key, value) => updateDescriptionProp(configureData.dataFileName, key, value)} config={config} setConfig={setConfig} />}
+            {showDataDesigner && (
+              <DataDesigner
+                visualizationKey={null}
+                configureData={configureData}
+                updateDescriptionProp={(key, value) => updateDescriptionProp(configureData.dataFileName, key, value)}
+                config={config}
+                setConfig={setConfig}
+              />
+            )}
           </>
         )}
 
@@ -698,7 +779,10 @@ export default function DataImport() {
             <Tabs startingTab={editingDataset && config.datasets[editingDataset].dataFileSourceType === 'url' ? 1 : 0}>
               <TabPane title='Upload File' icon={<FileUploadIcon className='inline-icon' />}>
                 {sharepath && <p className='alert--info'>The share path set for this website is: {sharepath}</p>}
-                <div className={isDragActive ? 'drag-active cdcdataviz-file-selector' : 'cdcdataviz-file-selector'} {...getRootProps()}>
+                <div
+                  className={isDragActive ? 'drag-active cdcdataviz-file-selector' : 'cdcdataviz-file-selector'}
+                  {...getRootProps()}
+                >
                   <input {...getInputProps()} />
                   {isDragActive ? (
                     <p>Drop file here</p>
@@ -720,7 +804,11 @@ export default function DataImport() {
               (Array.isArray(errors)
                 ? errors.map((message, index) => (
                     <div className='error-box slim mt-2' key={`error-${message}`}>
-                      <span>{message}</span> <CloseIcon className='inline-icon dismiss-error' onClick={() => setErrors(errors.filter((val, i) => i !== index))} />
+                      <span>{message}</span>{' '}
+                      <CloseIcon
+                        className='inline-icon dismiss-error'
+                        onClick={() => setErrors(errors.filter((val, i) => i !== index))}
+                      />
                     </div>
                   ))
                 : errors.message)}
@@ -733,22 +821,30 @@ export default function DataImport() {
         )}
 
         {config.type === 'dashboard' && !addingDataset && (
-          <p>
+          <div className='mt-2'>
             <button className='btn btn-primary' onClick={() => setAddingDataset(true)}>
               + Add More Files
             </button>
-          </p>
+          </div>
         )}
 
         {readyToConfigure && (
-          <p>
-            <button className='btn btn-primary' onClick={() => dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 2 })}>
+          <div className='mt-2'>
+            <button
+              className='btn btn-primary'
+              onClick={() => dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 2 })}
+            >
               Configure your visualization
             </button>
-          </p>
+          </div>
         )}
 
-        <a href='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html' target='_blank' rel='noopener noreferrer' className='guidance-link'>
+        <a
+          href='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='guidance-link'
+        >
           <div>
             <h3>Get Help</h3>
             <p>Documentation and examples on formatting data and configuring visualizations.</p>

package/src/components/PreviewDataTable.tsx

@@ -1,13 +1,24 @@
 import React, { useState, useContext, useMemo, useCallback, useEffect, memo } from 'react'
-import { useTable, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination } from 'react-table'
+import {
+  useTable,
+  useBlockLayout,
+  useFlexLayout,
+  useGlobalFilter,
+  useSortBy,
+  useResizeColumns,
+  usePagination
+} from 'react-table'
 import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
 import { useDebounce } from 'use-debounce'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { MdNavigateNext } from 'react-icons/md'
+import { GrFormPrevious } from 'react-icons/gr'
 
 // Core
 import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength'
 import { errorMessages } from '../helpers/errorMessages'
 import { DataSet } from '@cdc/dashboard/src/types/DataSet'
+import Icon from '@cdc/core/components/ui/Icon'
 
 const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }: any) => {
   const [filterValue, setFilterValue] = useState(globalFilter)
@@ -24,7 +35,16 @@ const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }: a
     setFilterValue(e.target.value)
   }
 
-  return <input className='filter' value={filterValue} onChange={onChange} type='search' placeholder='Filter...' disabled={disabled} />
+  return (
+    <input
+      className='filter'
+      value={filterValue}
+      onChange={onChange}
+      type='search'
+      placeholder='Filter...'
+      disabled={disabled}
+    />
+  )
 })
 
 const Header = memo(({ globalFilter, data, setGlobalFilter }: any) => (
@@ -35,13 +55,28 @@ const Header = memo(({ globalFilter, data, setGlobalFilter }: any) => (
 ))
 
 const Footer = memo(({ previousPage, nextPage, canPreviousPage, canNextPage, pageNumber, totalPages }: any) => (
-  <footer className='data-table-pagination'>
+  <footer className='data-table-pagination mt-2'>
     <ul>
       <li>
-        <button onClick={() => previousPage()} className='btn btn-prev' disabled={!canPreviousPage} title='Previous Page'></button>
+        <button
+          onClick={() => previousPage()}
+          className='btn btn-prev display-flex align-items-center justify-content-center'
+          disabled={!canPreviousPage}
+          title='Previous Page'
+        >
+          {' '}
+          <GrFormPrevious />
+        </button>
       </li>
-      <li>
-        <button onClick={() => nextPage()} className='btn btn-next' disabled={!canNextPage} title='Next Page'></button>
+      <li className='mr-2'>
+        <button
+          onClick={() => nextPage()}
+          className='btn btn-next display-flex align-items-center justify-content-center'
+          disabled={!canNextPage}
+          title='Next Page'
+        >
+          <MdNavigateNext />
+        </button>
       </li>
     </ul>
     <span>
@@ -124,8 +159,7 @@ const PreviewDataTable = () => {
       const columnConfig = {
         id: `column-${columnName}`,
         accessor: row => row[columnName],
-        Header: columnName,
-        width: 250
+        Header: columnName
       }
 
       return columnConfig
@@ -167,7 +201,14 @@ const PreviewDataTable = () => {
     pageOptions,
     nextPage,
     previousPage
-  } = useTable({ columns: tableColumns, data: tableData, initialState: { pageSize: 25 } }, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination)
+  } = useTable(
+    { columns: tableColumns, data: tableData, initialState: { pageSize: 25 } },
+    useFlexLayout,
+    useGlobalFilter,
+    useSortBy,
+    useResizeColumns,
+    usePagination
+  )
 
   const PlaceholderTable = () => {
     return (
@@ -178,7 +219,7 @@ const PreviewDataTable = () => {
             <p>Import data to preview</p>
           </section>
         </section>
-        <div className='table-container'>
+        <div className='table-container mt-2'>
           <table className='editor data-table' role='table'>
             <thead>
               <tr>
@@ -206,47 +247,58 @@ const PreviewDataTable = () => {
 
   if (!tableData) return [<Header key='header' />, <PlaceholderTable key='table' />]
 
-  const footerProps = { previousPage, nextPage, canPreviousPage, canNextPage, pageNumber: pageIndex + 1, totalPages: pageOptions.length }
+  const footerProps = {
+    previousPage,
+    nextPage,
+    canPreviousPage,
+    canNextPage,
+    pageNumber: pageIndex + 1,
+    totalPages: pageOptions.length
+  }
 
   const Table = () => (
-    <>
-      <section className='data-table-container'>
-        <div className='table-container'>
-          <table className='data-table' {...getTableProps()} aria-hidden='true'>
-            <thead>
-              {headerGroups.map(headerGroup => (
-                <tr {...headerGroup.getHeaderGroupProps()}>
-                  {headerGroup.headers.map(column => (
-                    <th scope='col' {...column.getHeaderProps(column.getSortByToggleProps())} className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''} title={column.Header}>
-                      {column.render('Header')}
-                      <div {...column.getResizerProps()} className='resizer' />
-                    </th>
-                  ))}
-                </tr>
+    <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 => (
+                <th
+                  scope='col'
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''}
+                  title={column.Header}
+                >
+                  {column.render('Header')}
+                  <div {...column.getResizerProps()} className='resizer' />
+                </th>
               ))}
-            </thead>
-            <tbody {...getTableBodyProps()}>
-              {page.map(row => {
-                prepareRow(row)
-                return (
-                  <tr {...row.getRowProps()}>
-                    {row.cells.map(cell => (
-                      <td {...cell.getCellProps()} title={cell.value}>
-                        {cell.render('Cell')}
-                      </td>
-                    ))}
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-        </div>
-      </section>
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {page.map(row => {
+            prepareRow(row)
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => (
+                  <td {...cell.getCellProps()} title={cell.value}>
+                    {cell.render('Cell')}
+                  </td>
+                ))}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
       <Footer {...footerProps} />
-    </>
+    </div>
   )
 
-  return [<Header key='header' data={tableData} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key='table' />]
+  return [
+    <Header key='header' data={tableData} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />,
+    <Table key='table' />
+  ]
 }
 
 export default PreviewDataTable

package/src/coreStyles_editor.scss

@@ -0,0 +1,2 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/variables';

package/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import CdcEditor from './CdcEditor'
+import './coreStyles_editor.scss'
 
 // Allow URL query to preselect a tab in standalone mode
 const standaloneParams = new URLSearchParams(window.location.search)

package/src/scss/_variables.scss

@@ -1,5 +1,3 @@
-@import '@cdc/core/styles/variables';
-
 $xxs: 350px;
 $xs: 576px;
 $sm: 768px;

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

@@ -8,25 +8,31 @@
   ul + .heading-2 {
     margin-top: 1em;
   }
-  .grid {
+  .visualization-grid {
     margin-top: 1em;
     list-style: none;
-    display: flex;
-    li {
-      margin-right: 1rem;
-      margin-bottom: 1rem;
-      width: 165px;
+    display: grid;
+    &.category_general {
+      grid-template-columns: repeat(4, 180px);
     }
+    &.category_charts {
+      grid-template-columns: repeat(7, 180px);
+      grid-row-gap: 50px;
+    }
+    &.category_maps {
+      grid-template-columns: repeat(5, 180px);
+    }
+
     button {
       background-color: #fff;
-      color: $baseColor;
+      color: var(--baseColor);
       border: solid 1px;
       border-color: rgb(199, 199, 199);
       padding: 1.3em $gbl-padding;
       height: 100%;
       align-items: center;
       display: flex;
-      border: $lightGray 1px solid;
+      border: var(--lightGray) 1px solid;
       margin-right: 1em;
       cursor: pointer;
       transition: 0.1s all;