@cdc/chart 4.25.10 → 4.26.1

package/src/_stories/Chart.Combo.stories.tsx

@@ -0,0 +1,18 @@
+// generate a combo chart story
+import React from 'react'
+import { Meta, Story } from '@storybook/react'
+import CdcChart from '@cdc/chart/src/CdcChart'
+import comboChartConfig from './_mock/combo.json'
+
+export default {
+  title: 'Components/Templates/Chart/Combo Chart',
+  component: CdcChart
+} as Meta
+
+const Template: Story = args => <CdcChart {...args} />
+
+export const ComboChart = Template.bind({})
+ComboChart.args = {
+  config: comboChartConfig,
+  isEditor: true
+}

package/src/_stories/Chart.Forecast.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import Chart from '../CdcChart'
+import forecastComboWithGaps from './_mock/forecast_combo_with_gaps.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Forecast Chart',
+  component: Chart,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Forecast charts with gap handling. This story demonstrates how forecast charts properly handle gaps in data by filtering invalid values (NA) and splitting segments at gaps.'
+      }
+    }
+  }
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Forecast_Combo_With_Gaps: Story = {
+  args: {
+    config: forecastComboWithGaps,
+    isEditor: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A combo chart with forecast confidence intervals that demonstrates proper gap handling. The forecast areas and lines are split into separate segments when gaps are detected, preventing misleading connections across missing data periods. Invalid data points (NA values) are automatically filtered out.'
+      }
+    }
+  }
+}
+
+export default meta

package/src/_stories/Chart.HTMLInDataTable.stories.tsx

@@ -0,0 +1,520 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+import CdcChart from '../CdcChartComponent'
+
+const meta: Meta<typeof CdcChart> = {
+  title: 'Components/Templates/Chart/HTML in Data Table',
+  component: CdcChart,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Demonstrates charts with HTML content rendered in data table columns, including footnotes, links, and formatted text.'
+      }
+    }
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcChart>
+
+// Sample data with HTML footnotes as a column
+const sampleDataWithHTMLFootnotes = [
+  {
+    State: 'California',
+    VaccinationRate: 82.4,
+    Year: 2023,
+    Category: 'High',
+    Footnote: 'Data from <strong>CDC National Immunization Survey</strong>'
+  },
+  {
+    State: 'Connecticut',
+    VaccinationRate: 85.6,
+    Year: 2023,
+    Category: 'High',
+    Footnote: 'Coverage rate includes <em>all age groups</em>'
+  },
+  {
+    State: 'Massachusetts',
+    VaccinationRate: 87.3,
+    Year: 2023,
+    Category: 'High',
+    Footnote: 'Highest rate in <strong>2023</strong> survey'
+  },
+  {
+    State: 'New York',
+    VaccinationRate: 81.2,
+    Year: 2023,
+    Category: 'High',
+    Footnote: 'See <a href="https://www.cdc.gov" target="_blank">CDC.gov</a> for details'
+  },
+  {
+    State: 'Washington',
+    VaccinationRate: 80.5,
+    Year: 2023,
+    Category: 'High',
+    Footnote: 'Rate increased <strong>5%</strong> from previous year'
+  },
+  {
+    State: 'Alabama',
+    VaccinationRate: 72.5,
+    Year: 2023,
+    Category: 'Medium',
+    Footnote: 'Medium coverage: <em>60-79%</em> range'
+  },
+  {
+    State: 'Arizona',
+    VaccinationRate: 75.8,
+    Year: 2023,
+    Category: 'Medium',
+    Footnote: 'Improving from <strong>previous surveys</strong>'
+  },
+  {
+    State: 'Colorado',
+    VaccinationRate: 79.1,
+    Year: 2023,
+    Category: 'Medium',
+    Footnote: 'Near <em>high coverage</em> threshold'
+  }
+]
+
+// Base chart configuration
+const baseChartConfig: any = {
+  type: 'chart',
+  visualizationType: 'Bar',
+  title: 'State Vaccination Coverage Rates',
+  showTitle: true,
+  theme: 'theme-blue',
+  fontSize: 'medium',
+  orientation: 'vertical',
+  filterBehavior: 'Filter Change',
+  filters: [],
+  xAxis: {
+    label: 'State',
+    dataKey: 'State',
+    type: 'categorical'
+  },
+  yAxis: {
+    label: 'Vaccination Rate (%)',
+    dataKey: 'VaccinationRate',
+    type: 'linear'
+  },
+  series: [
+    {
+      dataKey: 'VaccinationRate',
+      type: 'Bar',
+      name: 'Coverage Rate'
+    }
+  ],
+  table: {
+    label: 'Data Table',
+    expanded: true,
+    show: true,
+    download: true
+  },
+  dataFormat: {
+    commas: false,
+    abbreviated: false,
+    roundTo: 1
+  },
+  data: sampleDataWithHTMLFootnotes
+}
+
+// Story 1: Basic HTML in footnote column
+export const BasicHTMLInFootnoteColumn: Story = {
+  name: 'Basic HTML in Footnote Column',
+  args: {
+    config: {
+      ...baseChartConfig,
+      columns: {
+        State: {
+          name: 'State',
+          label: 'State',
+          dataTable: true
+        },
+        VaccinationRate: {
+          name: 'VaccinationRate',
+          label: 'Vaccination Rate (%)',
+          dataTable: true,
+          suffix: '%',
+          roundToPlace: 1
+        },
+        Footnote: {
+          name: 'Footnote',
+          label: 'Notes',
+          dataTable: true,
+          tooltips: false
+        }
+      }
+    },
+    isEditor: true
+  }
+}
+
+// Story 2: HTML with links and formatting
+export const HTMLWithLinksAndFormatting: Story = {
+  name: 'HTML with Links and Formatting',
+  args: {
+    config: {
+      ...baseChartConfig,
+      data: [
+        {
+          State: 'California',
+          VaccinationRate: 82.4,
+          Footnote:
+            'Source: <strong>CDC</strong> - <a href="https://www.cdc.gov/vaccines" target="_blank">Vaccine Data</a>\nReporting Period: January - December 2023'
+        },
+        {
+          State: 'Connecticut',
+          VaccinationRate: 85.6,
+          Footnote: 'Includes <em>all demographics</em>\nContact: <a href="mailto:health@ct.gov">health@ct.gov</a>'
+        },
+        {
+          State: 'Massachusetts',
+          VaccinationRate: 87.3,
+          Footnote:
+            '<strong style="color: #005ea2;">Leading state</strong> in vaccination coverage\nHighest rate in region'
+        },
+        {
+          State: 'New York',
+          VaccinationRate: 81.2,
+          Footnote: 'Data validated by <em>NYS Department of Health</em>\nSee full report for methodology'
+        },
+        {
+          State: 'Texas',
+          VaccinationRate: 69.8,
+          Footnote:
+            'More info: <a href="https://dshs.texas.gov" target="_blank">TX DSHS</a>\nOutreach programs available'
+        }
+      ],
+      columns: {
+        State: {
+          name: 'State',
+          label: 'State',
+          dataTable: true
+        },
+        VaccinationRate: {
+          name: 'VaccinationRate',
+          label: 'Coverage Rate (%)',
+          dataTable: true,
+          suffix: '%',
+          roundToPlace: 1
+        },
+        Footnote: {
+          name: 'Footnote',
+          label: 'Additional Information',
+          dataTable: true
+        }
+      }
+    },
+    isEditor: true
+  }
+}
+
+// Story 3: HTML with line breaks
+export const HTMLWithLineBreaks: Story = {
+  name: 'HTML with Line Breaks',
+  args: {
+    config: {
+      ...baseChartConfig,
+      data: [
+        {
+          State: 'California',
+          VaccinationRate: 82.4,
+          Footnote: '<strong>Data Source:</strong> CDC Survey<br><em>Collection Period:</em> Jan-Dec 2023'
+        },
+        {
+          State: 'Connecticut',
+          VaccinationRate: 85.6,
+          Footnote: 'Coverage includes:<br>• Ages 6 months+<br>• All vaccine types'
+        },
+        {
+          State: 'Massachusetts',
+          VaccinationRate: 87.3,
+          Footnote: 'Leading state for:<br>1. Overall coverage<br>2. Equity metrics'
+        },
+        {
+          State: 'New York',
+          VaccinationRate: 81.2,
+          Footnote: '<strong>Note:</strong> Excludes NYC<br>See separate report'
+        },
+        {
+          State: 'Washington',
+          VaccinationRate: 80.5,
+          Footnote: 'Trend: ↑ 5% YoY<br>Target: <strong>85%</strong> by 2024'
+        }
+      ],
+      columns: {
+        State: {
+          name: 'State',
+          label: 'State',
+          dataTable: true
+        },
+        VaccinationRate: {
+          name: 'VaccinationRate',
+          label: 'Rate (%)',
+          dataTable: true,
+          suffix: '%',
+          roundToPlace: 1
+        },
+        Footnote: {
+          name: 'Footnote',
+          label: 'Detailed Notes',
+          dataTable: true
+        }
+      }
+    },
+    isEditor: true
+  }
+}
+
+// Story 4: Complex HTML with lists
+export const ComplexHTMLWithLists: Story = {
+  name: 'Complex HTML with Lists',
+  args: {
+    config: {
+      ...baseChartConfig,
+      data: [
+        {
+          State: 'California',
+          VaccinationRate: 82.4,
+          Footnote:
+            '<strong>Program Details:</strong><ul style="margin:0;padding-left:20px;"><li>State-funded clinics</li><li>Mobile vaccination units</li></ul>'
+        },
+        {
+          State: 'Connecticut',
+          VaccinationRate: 85.6,
+          Footnote:
+            '<em>Success Factors:</em><br><ol style="margin:0;padding-left:20px;"><li>Community outreach</li><li>School programs</li></ol>'
+        },
+        {
+          State: 'Massachusetts',
+          VaccinationRate: 87.3,
+          Footnote:
+            'Achievements:<ul style="margin:0;padding-left:20px;"><li><strong>Highest rate</strong> in region</li><li>Improved <em>accessibility</em></li></ul>'
+        }
+      ],
+      columns: {
+        State: {
+          name: 'State',
+          label: 'State',
+          dataTable: true
+        },
+        VaccinationRate: {
+          name: 'VaccinationRate',
+          label: 'Coverage (%)',
+          dataTable: true,
+          suffix: '%',
+          roundToPlace: 1
+        },
+        Footnote: {
+          name: 'Footnote',
+          label: 'Program Information',
+          dataTable: true
+        }
+      }
+    },
+    isEditor: true
+  }
+}
+
+// Story 5: HTML with inline styles
+export const HTMLWithInlineStyles: Story = {
+  name: 'HTML with Inline Styles',
+  args: {
+    config: {
+      ...baseChartConfig,
+      data: [
+        {
+          State: 'California',
+          VaccinationRate: 82.4,
+          Footnote:
+            '<span style="color: #005ea2; font-weight: bold;">High Priority State</span> - Continued improvement needed'
+        },
+        {
+          State: 'Connecticut',
+          VaccinationRate: 85.6,
+          Footnote: '<span style="background-color: #f0f0f0; padding: 2px 5px;">Exemplary Performance</span>'
+        },
+        {
+          State: 'Massachusetts',
+          VaccinationRate: 87.3,
+          Footnote: '<strong style="color: #2e8540;">✓ Target Achieved</strong> - Maintaining high coverage'
+        },
+        {
+          State: 'Texas',
+          VaccinationRate: 69.8,
+          Footnote: '<span style="color: #d54309;">⚠ Below Target</span> - Outreach initiatives underway'
+        }
+      ],
+      columns: {
+        State: {
+          name: 'State',
+          label: 'State',
+          dataTable: true
+        },
+        VaccinationRate: {
+          name: 'VaccinationRate',
+          label: 'Rate (%)',
+          dataTable: true,
+          suffix: '%',
+          roundToPlace: 1
+        },
+        Footnote: {
+          name: 'Footnote',
+          label: 'Status',
+          dataTable: true
+        }
+      }
+    },
+    isEditor: true
+  }
+}
+
+// Story 6: Line chart with HTML footnotes
+export const LineChartWithHTMLFootnotes: Story = {
+  name: 'Line Chart with HTML Footnotes',
+  args: {
+    config: {
+      ...baseChartConfig,
+      visualizationType: 'Line',
+      title: 'Vaccination Rate Trends',
+      data: [
+        {
+          Year: '2019',
+          Rate: 72.5,
+          Footnote: 'Baseline year - <strong>Pre-pandemic</strong> data'
+        },
+        {
+          Year: '2020',
+          Rate: 68.3,
+          Footnote: '<em style="color: #d54309;">Pandemic impact</em> - Reduced access to healthcare'
+        },
+        {
+          Year: '2021',
+          Rate: 75.8,
+          Footnote: 'Recovery begins - <strong>Vaccination campaigns</strong> launched'
+        },
+        {
+          Year: '2022',
+          Rate: 80.1,
+          Footnote: 'Significant improvement - See <a href="https://www.cdc.gov" target="_blank">CDC report</a>'
+        },
+        {
+          Year: '2023',
+          Rate: 82.4,
+          Footnote: '<strong style="color: #2e8540;">Target exceeded</strong> - Continued success'
+        }
+      ],
+      xAxis: {
+        label: 'Year',
+        dataKey: 'Year',
+        type: 'categorical'
+      },
+      yAxis: {
+        label: 'Vaccination Rate (%)',
+        dataKey: 'Rate',
+        type: 'linear'
+      },
+      series: [
+        {
+          dataKey: 'Rate',
+          type: 'Line',
+          name: 'Coverage Rate'
+        }
+      ],
+      columns: {
+        Year: {
+          name: 'Year',
+          label: 'Year',
+          dataTable: true
+        },
+        Rate: {
+          name: 'Rate',
+          label: 'Rate (%)',
+          dataTable: true,
+          suffix: '%',
+          roundToPlace: 1
+        },
+        Footnote: {
+          name: 'Footnote',
+          label: 'Context & Notes',
+          dataTable: true
+        }
+      }
+    },
+    isEditor: true
+  }
+}
+
+// Story 7: Pie chart with HTML footnotes
+export const PieChartWithHTMLFootnotes: Story = {
+  name: 'Pie Chart with HTML Footnotes',
+  args: {
+    config: {
+      type: 'chart',
+      visualizationType: 'Pie',
+      title: 'Coverage by Category',
+      showTitle: true,
+      theme: 'theme-blue',
+      fontSize: 'medium',
+      filterBehavior: 'Filter Change',
+      filters: [],
+      data: [
+        {
+          Category: 'High Coverage',
+          Count: 5,
+          Percentage: 42,
+          Footnote: '<strong>5 states</strong> with ≥80% coverage<br>Leading examples: <em>MA, CT, NY</em>'
+        },
+        {
+          Category: 'Medium Coverage',
+          Count: 7,
+          Percentage: 58,
+          Footnote: '<strong>7 states</strong> with 60-79% coverage<br>Target: Move to <em>high category</em>'
+        }
+      ],
+      series: [
+        {
+          dataKey: 'Percentage',
+          type: 'Pie',
+          name: 'Coverage Distribution'
+        }
+      ],
+      table: {
+        label: 'Coverage Distribution Data',
+        expanded: true,
+        show: true,
+        download: true
+      },
+      columns: {
+        Category: {
+          name: 'Category',
+          label: 'Coverage Category',
+          dataTable: true
+        },
+        Count: {
+          name: 'Count',
+          label: 'Number of States',
+          dataTable: true
+        },
+        Percentage: {
+          name: 'Percentage',
+          label: 'Percentage',
+          dataTable: true,
+          suffix: '%'
+        },
+        Footnote: {
+          name: 'Footnote',
+          label: 'Details',
+          dataTable: true
+        }
+      },
+      dataFormat: {
+        commas: false,
+        abbreviated: false
+      }
+    },
+    isEditor: true
+  }
+}

package/src/_stories/Chart.Patterns.stories.tsx

@@ -12,7 +12,8 @@ type Story = StoryObj<typeof Chart>
 
 export const Stacked_Bar_Pattern: Story = {
   args: {
-    config: StackedPattern
+    config: StackedPattern,
+    isEditor: true
   }
 }