@cdc/chart 4.25.11 → 4.26.1

package/src/CdcChartComponent.tsx

@@ -37,6 +37,7 @@ import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
 
 import SparkLine from './components/Sparkline'
 import Legend from './components/Legend'
+import WarmingStripesGradientLegend from './components/WarmingStripes/WarmingStripesGradientLegend'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import { abbreviateNumber } from './helpers/abbreviateNumber'
@@ -239,6 +240,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
+  // Declaratively calculate series keys for pie charts based on filtered data
+  const pieSeriesKeys = useMemo(() => {
+    if (config.visualizationType !== 'Pie' || !config.xAxis?.dataKey) return null
+    const data = filteredData?.length > 0 ? filteredData : excludedData
+    if (!data) return null
+    return _.uniq(data.map(d => d[config.xAxis.dataKey]))
+  }, [config.visualizationType, config.xAxis?.dataKey, filteredData, excludedData])
+
   const prepareConfig = (loadedConfig: ChartConfig) => {
     // Create defaults without version to avoid overriding legacy configs
     const defaultsWithoutPalette = { ...defaults }
@@ -375,6 +384,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       const pieData = currentData.length > 0 ? currentData : newExcludedData
       newConfig.runtime.seriesKeys = _.uniq(pieData.map(d => d[newConfig.xAxis.dataKey]))
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
+      newConfig.runtime.isPieChart = true // Flag to know when to use derived keys
     } else {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
       newConfig.runtime.seriesKeys = (newConfig.runtime.series || []).flatMap(series => {
@@ -559,7 +569,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     for (let entry of entries) {
       let { width, height } = entry.contentRect
 
-      const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
+      const editorIsOpen = isEditor
       width = editorIsOpen ? width - EDITOR_WIDTH : width
 
       const newViewport = getViewport(width)
@@ -709,6 +719,19 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }, [externalFilters]) // eslint-disable-line
 
+  // Declaratively update runtime series keys for pie charts when derived value changes
+  if (config.runtime?.isPieChart && pieSeriesKeys && !_.isEqual(pieSeriesKeys, config.runtime?.seriesKeys)) {
+    const newConfig = {
+      ...config,
+      runtime: {
+        ...config.runtime,
+        seriesKeys: pieSeriesKeys,
+        seriesLabelsAll: pieSeriesKeys
+      }
+    }
+    setConfig(newConfig)
+  }
+
   // Generates color palette to pass to child chart component
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime?.seriesKeys) {
@@ -819,15 +842,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const formatDate = (date, i, ticks) => {
-    let formattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(date)
+    const displayFormat =
+      config.runtime[section].dateDisplayFormat || config.runtime[section].dateParseFormat || '%Y-%m-%d'
+    let formattedDate = timeFormat(displayFormat)(date)
     // Handle the case where all months work with '%b.' except for May
-    if (config.runtime[section].dateDisplayFormat?.includes('%b.') && formattedDate.includes('May.')) {
+    if (displayFormat?.includes('%b.') && formattedDate.includes('May.')) {
       formattedDate = formattedDate.replace(/May\./g, 'May')
     }
     // Show years only once
-    if (config.xAxis.showYearsOnce && config.runtime[section].dateDisplayFormat?.includes('%Y') && ticks) {
+    if (config.xAxis.showYearsOnce && displayFormat?.includes('%Y') && ticks) {
       const prevDate = ticks[i - 1] ? ticks[i - 1].value : null
-      const prevFormattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(prevDate)
+      const prevFormattedDate = timeFormat(displayFormat)(prevDate)
       const year = formattedDate.match(/\d{4}/)
       const prevYear = prevFormattedDate.match(/\d{4}/)
       if (year && prevYear && year[0] === prevYear[0]) {
@@ -1125,8 +1150,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
 
     if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
-    if (config.xAxis.brushActive && !isLegendOnBottom) classes.push('subtext--brush-active ')
-    if (config.xAxis.brushActive && config.legend.hide) classes.push('subtext--brush-active ')
     return classes
   }
 
@@ -1154,6 +1177,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 isDashboard={isDashboard}
                 title={title}
                 superTitle={processedSuperTitle}
+                titleStyle={config.titleStyle}
                 classes={['chart-title', `${config.theme}`, 'cove-component__header', 'mb-3']}
                 style={undefined}
                 config={config}
@@ -1305,13 +1329,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   {/* Legend */}
                   {!config.legend.hide &&
                     config.visualizationType !== 'Spark Line' &&
-                    config.visualizationType !== 'Sankey' && (
+                    config.visualizationType !== 'Sankey' &&
+                    !(config.visualizationType === 'Warming Stripes' && config.legend?.style === 'gradient') &&
+                    !(config.visualizationType === 'Warming Stripes' && config.smallMultiples?.mode) && (
                       <Legend
                         ref={legendRef}
                         skipId={handleChartTabbing(config, legendId)}
                         interactionLabel={interactionLabel}
                       />
                     )}
+                  {config.visualizationType === 'Warming Stripes' &&
+                    config.legend?.style === 'gradient' &&
+                    !config.smallMultiples?.mode && <WarmingStripesGradientLegend />}
                 </LegendWrapper>
                 {/* Link */}
                 {isDashboard && config.table && config.table.show && config.table.showDataTableLink
@@ -1323,79 +1352,86 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   <div className={getChartSubTextClasses().join(' ')}>{parse(processedDescription)}</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}
-                      interactionLabel={interactionLabel}
-                    />
-                  )}
-                  {config.table.showDownloadPdfButton && (
-                    <MediaControls.Button
-                      text='Download PDF'
-                      title='Download Chart as PDF'
-                      type='pdf'
-                      state={config}
-                      elementToCapture={imageId}
-                      interactionLabel={interactionLabel}
-                    />
-                  )}
-                </MediaControls.Section>
                 {/* Data Table */}
-                {((config.xAxis.dataKey &&
+                {(config.xAxis.dataKey &&
                   config.table.show &&
                   config.visualizationType !== 'Spark Line' &&
                   config.visualizationType !== 'Sankey') ||
-                  (config.visualizationType === 'Sankey' && config.table.show)) &&
-                  (() => {
-                    let dataTableConfig = pivotDynamicSeries(config)
-                    let dataTableColumns = config.columns
-                    let dataTableRuntimeData = getTableRuntimeData()
-                    let dataTableRawData =
-                      config.visualizationType === 'Sankey'
-                        ? config?.data?.[0]?.tableData
-                        : config.table.customTableConfig
-                        ? filterVizData(config.filters, config.data)
-                        : config.data
-
-                    if (config.smallMultiples?.mode) {
-                      const prepared = prepareSmallMultiplesDataTable(config, config.columns, dataTableRuntimeData)
-                      dataTableConfig = prepared.config
-                      dataTableColumns = prepared.columns
-                      dataTableRuntimeData = prepared.runtimeData
-                      if (config.smallMultiples.mode === 'by-column') {
-                        dataTableRawData = prepared.config.data
+                (config.visualizationType === 'Sankey' && config.table.show)
+                  ? (() => {
+                      let dataTableConfig = pivotDynamicSeries(config)
+                      let dataTableColumns = config.columns
+                      let dataTableRuntimeData = getTableRuntimeData()
+                      let dataTableRawData =
+                        config.visualizationType === 'Sankey'
+                          ? config?.data?.[0]?.tableData
+                          : config.table.customTableConfig
+                          ? filterVizData(config.filters, config.data)
+                          : config.data
+
+                      if (config.smallMultiples?.mode) {
+                        const prepared = prepareSmallMultiplesDataTable(config, config.columns, dataTableRuntimeData)
+                        dataTableConfig = prepared.config
+                        dataTableColumns = prepared.columns
+                        dataTableRuntimeData = prepared.runtimeData
+                        if (config.smallMultiples.mode === 'by-column') {
+                          dataTableRawData = prepared.config.data
+                        }
                       }
-                    }
 
-                    return (
-                      <DataTable
-                        /* changing the "key" will force the table to re-render
-                                    when the default sort changes while editing */
-                        key={dataTableDefaultSortBy}
-                        config={dataTableConfig}
-                        rawData={dataTableRawData}
-                        runtimeData={dataTableRuntimeData}
-                        expandDataTable={config.table.expanded}
-                        columns={dataTableColumns}
-                        defaultSortBy={dataTableDefaultSortBy}
-                        displayGeoName={name => name}
-                        applyLegendToRow={applyLegendToRow}
-                        tableTitle={config.table.label}
-                        indexTitle={config.table.indexLabel}
-                        vizTitle={title}
-                        viewport={currentViewport}
-                        tabbingId={handleChartTabbing(config, legendId)}
-                        colorScale={colorScale}
-                        interactionLabel={interactionLabel}
-                      />
-                    )
-                  })()}
+                      return (
+                        <DataTable
+                          /* changing the "key" will force the table to re-render
+                                  when the default sort changes while editing */
+                          key={dataTableDefaultSortBy}
+                          config={dataTableConfig}
+                          rawData={dataTableRawData}
+                          runtimeData={dataTableRuntimeData}
+                          expandDataTable={config.table.expanded}
+                          columns={dataTableColumns}
+                          defaultSortBy={dataTableDefaultSortBy}
+                          displayGeoName={name => name}
+                          applyLegendToRow={applyLegendToRow}
+                          tableTitle={config.table.label}
+                          indexTitle={config.table.indexLabel}
+                          vizTitle={title}
+                          viewport={currentViewport}
+                          tabbingId={handleChartTabbing(config, legendId)}
+                          colorScale={colorScale}
+                          imageRef={imageId}
+                          showDownloadImgButton={config.table.showDownloadImgButton}
+                          showDownloadPdfButton={config.table.showDownloadPdfButton}
+                          includeContextInDownload={config.table?.includeContextInDownload}
+                          interactionLabel={interactionLabel}
+                        />
+                      )
+                    })()
+                  : (config.table.showDownloadImgButton || config.table.showDownloadPdfButton) && (
+                      <div className='w-100 d-flex justify-content-end'>
+                        <MediaControls.Section classes={['download-links', 'mt-4', 'mb-2']}>
+                          {config.table.showDownloadImgButton && (
+                            <MediaControls.DownloadLink
+                              type='image'
+                              title='Download Chart as Image'
+                              state={config}
+                              elementToCapture={imageId}
+                              interactionLabel={interactionLabel}
+                              includeContextInDownload={config.table?.includeContextInDownload}
+                            />
+                          )}
+                          {config.table.showDownloadPdfButton && (
+                            <MediaControls.DownloadLink
+                              type='pdf'
+                              title='Download Chart as PDF'
+                              state={config}
+                              elementToCapture={imageId}
+                              interactionLabel={interactionLabel}
+                              includeContextInDownload={config.table?.includeContextInDownload}
+                            />
+                          )}
+                        </MediaControls.Section>
+                      </div>
+                    )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
                 {processedLegacyFootnotes && (

package/src/_stories/Chart.Regions.Categorical.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Regions/Categorical',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const categoricalData = [
+  { category: 'Jan 1', value: 10 },
+  { category: 'Jan 8', value: 25 },
+  { category: 'Jan 15', value: 35 },
+  { category: 'Jan 22', value: 45 },
+  { category: 'Jan 29', value: 55 },
+  { category: 'Feb 5', value: 40 },
+  { category: 'Feb 12', value: 60 },
+  { category: 'Feb 19', value: 75 },
+  { category: 'Feb 26', value: 65 },
+  { category: 'Mar 4', value: 80 }
+]
+
+const baseCategoricalConfig = {
+  type: 'chart',
+  visualizationType: 'Line',
+  orientation: 'vertical',
+  showTitle: true,
+  theme: 'theme-blue',
+  animate: false,
+  xAxis: {
+    type: 'categorical',
+    dataKey: 'category',
+    size: '0',
+    hideAxis: false,
+    hideTicks: false
+  },
+  yAxis: {
+    size: '50',
+    hideAxis: false,
+    hideTicks: false,
+    gridLines: true,
+    min: '0',
+    max: '100'
+  },
+  series: [{ dataKey: 'value', type: 'Line', axis: 'Left', tooltip: true, name: 'Value' }],
+  legend: { hide: true },
+  data: categoricalData,
+  regions: []
+}
+
+// LINE CHARTS
+
+export const Line_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      title: 'Categorical - Line: Fixed From + Fixed To',
+      regions: [
+        {
+          from: 'Jan 15',
+          to: 'Feb 12',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Line_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      title: 'Categorical - Line: Fixed From + Last Date',
+      regions: [
+        {
+          from: 'Feb 5',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+// BAR CHARTS
+
+export const Bar_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Categorical - Bar: Fixed From + Fixed To',
+      regions: [
+        {
+          from: 'Jan 15',
+          to: 'Feb 12',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Bar_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Categorical - Bar: Fixed From + Last Date',
+      regions: [
+        {
+          from: 'Feb 5',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export default meta

package/src/_stories/Chart.Regions.DateScale.stories.tsx

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Regions/Date Scale (Band)',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const dateData = [
+  { date: '2024-01-01', value: 10 },
+  { date: '2024-01-08', value: 25 },
+  { date: '2024-01-15', value: 35 },
+  { date: '2024-01-22', value: 45 },
+  { date: '2024-01-29', value: 55 },
+  { date: '2024-02-05', value: 40 },
+  { date: '2024-02-12', value: 60 },
+  { date: '2024-02-19', value: 75 },
+  { date: '2024-02-26', value: 65 },
+  { date: '2024-03-04', value: 80 }
+]
+
+const baseDateConfig = {
+  type: 'chart',
+  visualizationType: 'Line',
+  orientation: 'vertical',
+  showTitle: true,
+  theme: 'theme-blue',
+  animate: false,
+  xAxis: {
+    type: 'date',
+    dataKey: 'date',
+    dateParseFormat: '%Y-%m-%d',
+    dateDisplayFormat: '%b %-d',
+    size: '0',
+    hideAxis: false,
+    hideTicks: false,
+    numTicks: '6'
+  },
+  yAxis: {
+    size: '50',
+    hideAxis: false,
+    hideTicks: false,
+    gridLines: true,
+    min: '0',
+    max: '100'
+  },
+  series: [{ dataKey: 'value', type: 'Line', axis: 'Left', tooltip: true, name: 'Value' }],
+  legend: { hide: true },
+  data: dateData,
+  regions: []
+}
+
+// LINE CHARTS
+
+export const Line_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseDateConfig,
+      title: 'Date Scale - Line: Fixed From + Fixed To',
+      regions: [
+        {
+          from: '2024-01-15',
+          to: '2024-02-12',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Line_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateConfig,
+      title: 'Date Scale - Line: Fixed From + Last Date',
+      regions: [
+        {
+          from: '2024-02-05',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Line_Previous_Days_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateConfig,
+      title: 'Date Scale - Line: Previous Days + Last Date',
+      regions: [
+        {
+          from: '28',
+          to: '',
+          fromType: 'Previous Days',
+          toType: 'Last Date',
+          label: 'Last 28 Days',
+          background: '#aa0077',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+// BAR CHARTS
+
+export const Bar_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseDateConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Date Scale - Bar: Fixed From + Fixed To',
+      regions: [
+        {
+          from: '2024-01-15',
+          to: '2024-02-12',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Bar_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Date Scale - Bar: Fixed From + Last Date',
+      regions: [
+        {
+          from: '2024-02-05',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Bar_Previous_Days_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Date Scale - Bar: Previous Days + Last Date',
+      regions: [
+        {
+          from: '28',
+          to: '',
+          fromType: 'Previous Days',
+          toType: 'Last Date',
+          label: 'Last 28 Days',
+          background: '#aa0077',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export default meta