@cdc/chart 4.24.3 → 4.24.5

package/index.html

@@ -5,16 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <style>
       body {
-        /* max-width: 1000px; */
-        margin: 0 auto !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+        margin: 0;
+        border-top: none !important;
       }
 
-      .react-container + .react-container {
-        margin-top: 3rem;
+      .cdc-map-outer-container {
+        min-height: 100vh;
       }
+
+      /* .react-container + .react-container {
+        margin-top: 3rem;
+      } */
     </style>
     <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423" />
     <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
@@ -45,6 +46,7 @@
   -->
 
     <!-- GENERIC CHART TYPES -->
+    <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/private/rvr.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
@@ -69,7 +71,7 @@
     <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
-    <div class="react-container" data-config="/examples/region-issue.json"></div>
+    <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
 
     <!-- BAR -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
@@ -115,7 +117,7 @@
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/feature/bar/lollipop.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
     <!-- TESTS CUTOFF -->
@@ -141,9 +143,9 @@
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
 
     <!-- VERTICAL BAR CHARTS -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
+    <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div>
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
-    <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div>
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
     <!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.24.3",
+  "version": "4.24.5",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -60,7 +60,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf",
+  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95",
   "devDependencies": {
     "@types/d3-sankey": "^0.12.4",
     "resize-observer-polyfill": "^1.5.1"

package/src/CdcChart.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useId } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
 import 'whatwg-fetch'
 import * as d3 from 'd3-array'
+import Layout from '@cdc/core/components/Layout'
+import Button from '@cdc/core/components/elements/Button'
 
 // External Libraries
 import { scaleOrdinal } from '@visx/scale'
@@ -34,7 +36,6 @@ import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
 import { lineOptions } from './helpers/lineOptions'
 import { handleLineType } from './helpers/handleLineType'
 import { generateColorsArray } from './helpers/generateColorsArray'
-import { computeMarginBottom } from './helpers/computeMarginBottom'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -76,6 +77,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
+  const [brushConfig, setBrushConfig] = useState({
+    data: [],
+    isActive: false,
+    isBrushing: false
+  })
   type Config = typeof config
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
@@ -94,8 +100,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   if (config.table && (!config.table?.label || config.table?.label === '')) config.table.label = 'Data Table'
 
   const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
-
-  const handleChartTabbing = !config.legend?.hide ? `legend` : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
+  const legendId = useId()
+  const handleChartTabbing = !config.legend?.hide ? legendId : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
 
   const reloadURLData = async () => {
     if (config.dataUrl) {
@@ -238,8 +244,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
-    newConfig.series.map(series => {
-      if (!series.tooltip) series.tooltip = true
+    newConfig.series.forEach(series => {
+      if (series.tooltip === undefined || series.tooltip === null) {
+        series.tooltip = true
+      }
       if (!series.axis) series.axis = 'Left'
     })
 
@@ -443,7 +451,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         if (series.type === 'Forecasting') {
           newConfig.runtime.forecastingSeriesKeys.push(series)
         }
-        if (series.type === 'Bar') {
+        if (series.type === 'Bar' || series.type === 'Combo') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
         if (series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg') {
@@ -747,7 +755,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   // function calculates the width of given text and its font-size
-  function getTextWidth(text, font) {
+  function getTextWidth(text: string, font: string): number | undefined {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
     if (!context) {
@@ -1008,6 +1016,63 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return formattedValue
   }
 
+  const Confirm = () => {
+    const confirmDone = e => {
+      if (e) {
+        e.preventDefault()
+      }
+
+      let newConfig = { ...config }
+      delete newConfig.newViz
+
+      updateConfig(newConfig)
+    }
+
+    const styles = {
+      position: 'relative',
+      height: '100vh',
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gridArea: 'content'
+    }
+
+    return (
+      <section className='waiting' style={styles}>
+        <section className='waiting-container'>
+          <h3>Finish Configuring</h3>
+          <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
+          <Button className='btn' style={{ margin: '1em auto' }} disabled={missingRequiredSections()} onClick={e => confirmDone(e)}>
+            I'm Done
+          </Button>
+        </section>
+      </section>
+    )
+  }
+
+  const Error = () => {
+    const styles = {
+      position: 'absolute',
+      background: 'white',
+      zIndex: '999',
+      height: '100vh',
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gridArea: 'content'
+    }
+    return (
+      <section className='waiting' style={styles}>
+        <section className='waiting-container'>
+          <h3>Error With Configuration</h3>
+          <p>{config.runtime.editorErrorMessage}</p>
+        </section>
+      </section>
+    )
+  }
+
   // this is passed DOWN into the various components
   // then they do a lookup based on the bin number as index into here (TT)
   const applyLegendToRow = rowObj => {
@@ -1042,6 +1107,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Prevent render if loading
   let body = <Loading />
 
+  const getChartWrapperClasses = () => {
+    const classes = ['chart-container', 'p-relative']
+    if (config.legend.position === 'bottom') classes.push('bottom')
+    if (config.legend.hide) classes.push('legend-hidden')
+    if (lineDatapointClass) classes.push(lineDatapointClass)
+    if (!config.barHasBorder) classes.push('chart-bar--no-border')
+    if (isDebug) classes.push('debug')
+    classes.push(...contentClasses)
+    return classes
+  }
+
   if (!loading) {
     const tableLink = (
       <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
@@ -1051,80 +1127,77 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     body = (
       <>
         {isEditor && <EditorPanel />}
-        {!missingRequiredSections() && !config.newViz && (
-          <div className='cdc-chart-inner-container' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
-            <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
-            <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
-
-            {/* Filters */}
-            {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
-            {/* Visualization */}
-            {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
-            <div
-              style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }}
-              className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')} ${isDebug ? 'debug' : ''}`}
-            >
-              {/* All charts except sparkline */}
-              {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
-
-              {/* Sparkline */}
-              {config.visualizationType === 'Spark Line' && (
-                <>
-                  <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />
-                  {config?.introText && (
-                    <section className='introText' style={{ padding: '0px 0 35px' }}>
-                      {parse(config.introText)}
-                    </section>
-                  )}
-                  <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
-                    <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
-                  </div>
-                  {description && (
-                    <div className='subtext' style={{ padding: '35px 0 15px' }}>
-                      {parse(description)}
+        <Layout.Responsive isEditor={isEditor}>
+          {config.newViz && <Confirm />}
+          {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && <Error />}
+          {!missingRequiredSections() && !config.newViz && (
+            <div className='cdc-chart-inner-container cove-component__content' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
+              <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
+
+              {/* Filters */}
+              {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
+              <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
+              {/* Visualization */}
+              {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
+              <div className={getChartWrapperClasses().join(' ')}>
+                {/* All charts except sparkline */}
+                {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
+                {/* Sparkline */}
+                {config.visualizationType === 'Spark Line' && (
+                  <>
+                    <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />
+                    {config?.introText && (
+                      <section className='introText' style={{ padding: '0px 0 35px' }}>
+                        {parse(config.introText)}
+                      </section>
+                    )}
+                    <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
+                      <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
                     </div>
-                  )}
-                </>
+                    {description && (
+                      <div className='subtext' style={{ padding: '35px 0 15px' }}>
+                        {parse(description)}
+                      </div>
+                    )}
+                  </>
+                )}
+                {/* Sankey */}
+                {config.visualizationType === 'Sankey' && <ParentSize aria-hidden='true'>{parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}</ParentSize>}
+                {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} />}
+              </div>
+              {/* Link */}
+              {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
+              {/* Description */}
+              {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
+              {/* buttons */}
+              <MediaControls.Section classes={['download-buttons']}>
+                {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
+                {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
+              </MediaControls.Section>
+              {/* Data Table */}
+              {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
+                <DataTable
+                  config={config}
+                  rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
+                  runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : filteredData || excludedData}
+                  expandDataTable={config.table.expanded}
+                  columns={config.columns}
+                  displayDataAsText={displayDataAsText}
+                  displayGeoName={displayGeoName}
+                  applyLegendToRow={applyLegendToRow}
+                  tableTitle={config.table.label}
+                  indexTitle={config.table.indexLabel}
+                  vizTitle={title}
+                  viewport={currentViewport}
+                  tabbingId={handleChartTabbing}
+                  colorScale={colorScale}
+                />
               )}
-              {/* Sankey */}
-              {config.visualizationType === 'Sankey' && <ParentSize aria-hidden='true'>{parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}</ParentSize>}
-              {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} />}
+              {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
+              {/* show pdf or image button */}
             </div>
-            {/* Link */}
-            {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
-
-            {/* Description */}
-            {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
-
-            {/* buttons */}
-            <MediaControls.Section classes={['download-buttons']}>
-              {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
-              {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
-            </MediaControls.Section>
-
-            {/* Data Table */}
-            {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
-              <DataTable
-                config={config}
-                rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
-                runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : transform.applySuppression(filteredData || excludedData, config.suppressedData)}
-                expandDataTable={config.table.expanded}
-                columns={config.columns}
-                displayDataAsText={displayDataAsText}
-                displayGeoName={displayGeoName}
-                applyLegendToRow={applyLegendToRow}
-                tableTitle={config.table.label}
-                indexTitle={config.table.indexLabel}
-                vizTitle={title}
-                viewport={currentViewport}
-                tabbingId={handleChartTabbing}
-                colorScale={colorScale}
-              />
-            )}
-            {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
-            {/* show pdf or image button */}
-          </div>
-        )}
+          )}
+        </Layout.Responsive>
       </>
     )
   }
@@ -1135,9 +1208,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const capitalize = str => {
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
+
   const contextValues = {
+    brushConfig,
+    setBrushConfig,
     capitalize,
-    computeMarginBottom,
     getXAxisData,
     getYAxisData,
     config,
@@ -1182,20 +1257,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setSharedFilter,
     setSharedFilterValue,
     dashboardConfig,
-    debugSvg: isDebug
+    debugSvg: isDebug,
+    clean
   }
 
-  const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]
-
-  config.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)
-  isEditor && classes.push('spacing-wrapper')
-  isEditor && classes.push('isEditor')
-
   return (
     <ConfigContext.Provider value={contextValues}>
-      <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart} data-download-id={imageId}>
+      <Layout.VisualizationWrapper config={config} isEditor={isEditor} currentViewport={currentViewport} ref={outerContainerRef} imageId={imageId} showEditorPanel={config?.showEditorPanel}>
         {body}
-      </div>
+      </Layout.VisualizationWrapper>
     </ConfigContext.Provider>
   )
 }

package/src/_stories/Chart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import SuppressedConfig from './_mock/bar-chart-suppressed.json'
 
 import Chart from '../CdcChart'
 
@@ -185,4 +186,11 @@ export const Lollipop: Story = {
   }
 }
 
+export const Suppression: Story = {
+  args: {
+    config: SuppressedConfig,
+    isEditor: false
+  }
+}
+
 export default meta