@cdc/chart 4.26.6 → 4.26.10

package/src/_stories/Chart.Sankey.smoke.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import Chart from '../CdcChartComponent'
-import sankeyConfig from './_mock/sankey_mock.json'
-import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart/Sankey',
-  component: Chart
-}
-
-export default meta
-type Story = StoryObj<typeof Chart>
-
-export const Sankey_Basic: Story = {
-  args: {
-    config: {
-      ...sankeyConfig,
-      title: 'Patient Care Pathway'
-    },
-    isEditor: false
-  },
-  play: async ({ canvasElement }) => {
-    await assertVisualizationRendered(canvasElement)
-  }
-}
-
-export const Sankey_WithStoryNodes: Story = {
-  args: {
-    config: {
-      ...sankeyConfig,
-      title: 'Care Pathway with Story Nodes',
-      data: [
-        {
-          links: sankeyConfig.data[0].links,
-          tooltips: true,
-          storyNodeText: [
-            { StoryNode: 'Screened', segmentTextBefore: 'Total Screened', segmentTextAfter: 'participants' },
-            { StoryNode: 'Recovered', segmentTextBefore: 'Fully', segmentTextAfter: 'patients' }
-          ]
-        }
-      ]
-    },
-    isEditor: false
-  },
-  play: async ({ canvasElement }) => {
-    await assertVisualizationRendered(canvasElement)
-  }
-}
-
-export const Sankey_TooltipsDisabled: Story = {
-  args: {
-    config: {
-      ...sankeyConfig,
-      title: 'Sankey — Tooltips Disabled',
-      enableTooltips: false
-    },
-    isEditor: false
-  },
-  play: async ({ canvasElement }) => {
-    await assertVisualizationRendered(canvasElement)
-  }
-}

package/src/components/Sankey/components/ColumnList.tsx

@@ -1,19 +0,0 @@
-interface ColumnData {
-  label: string
-  value: string
-  additional_info: string
-}
-
-const ColumnList = ({ columnData }) => {
-  return (
-    <ul>
-      {columnData?.map((entry, index) => (
-        <li key={index}>
-          {entry.label}: {entry.value} ({entry.additional_info}%)
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-export default ColumnList

package/src/components/Sankey/helpers/getSankeyTooltip.tsx

@@ -1,34 +0,0 @@
-import ReactDOMServer from 'react-dom/server'
-import ColumnList from '../components/ColumnList'
-
-export const getSankeyTooltip = (data: Object, tooltipID: string) => {
-  const tooltips = Array.isArray(data?.tooltips) ? data.tooltips : []
-  const tooltipVal = `${(tooltips.find(item => item.node === tooltipID) || {}).value}`
-  const tooltipSummary = `${(tooltips.find(item => item.node === tooltipID) || {}).summary}`
-  const tooltipColumn1Label = (tooltips.find(item => item.node === tooltipID) || {}).column1Label
-  const tooltipColumn2Label = (tooltips.find(item => item.node === tooltipID) || {}).column2Label
-  const tooltipColumn1 = (tooltips.find(item => item.node === tooltipID) || {}).column1
-  const tooltipColumn2 = (tooltips.find(item => item.node === tooltipID) || {}).column2
-
-  const tooltipColumn1Data = ReactDOMServer.renderToString(<ColumnList columnData={tooltipColumn1} />)
-  const tooltipColumn2Data = ReactDOMServer.renderToString(<ColumnList columnData={tooltipColumn2} />)
-
-  return `<div class="sankey-chart__tooltip">
-    <span class="sankey-chart__tooltip--tooltip-header">${tooltipID}</span>
-    <span class="sankey-chart__tooltip--tooltip-header">${tooltipVal}</span>
-    <div class="divider"></div>
-    <span><strong>Summary: </strong>${tooltipSummary}</span>
-    <div class="divider"></div>
-    <div class="sankey-chart__tooltip--info-section">
-      <div>
-        <span><strong>${tooltipColumn1Label}</strong></span>
-        ${tooltipColumn1Data}
-      </div>
-      <div>
-        <span><strong>${tooltipColumn2Label}</strong></span>
-        ${tooltipColumn2Data}
-      </div>
-    </div>
-  </div>
-`
-}

package/src/components/Sankey/useSankeyAlert.tsx

@@ -1,60 +0,0 @@
-import { useState, useEffect, useContext } from 'react'
-import { ChartContext } from '../../types/ChartContext'
-import ConfigContext from '../../ConfigContext'
-
-const useSankeyAlert = () => {
-  const { config, handleChartTabbing, legendId } = useContext<ChartContext>(ConfigContext)
-
-  //Mobile Pop Up
-  const [showAlert, setShowAlert] = useState(false)
-  const alertMessage = (
-    <>
-      For best viewing we recommend portrait mode. If you are unable to put your device in portrait mode, please review
-      the <a href={`#${handleChartTabbing(config, legendId)}`}>data table</a> below.{' '}
-      <a onClick={() => setShowAlert(false)} href={'#!'}>
-        Close this alert
-      </a>{' '}
-      to continue viewing the chart.
-    </>
-  )
-
-  const handleCloseModal = () => {
-    setShowAlert(false)
-  }
-
-  const alert = showAlert ? (
-    <div className='alert alert-warning alert-dismissible' role='alert'>
-      <p style={{ padding: '35px' }}>{alertMessage}</p>
-      <button type='button' className='close' data-dismiss='alert' aria-label='Close' onClick={handleCloseModal}>
-        <span aria-hidden='true'>&times;</span>
-      </button>
-    </div>
-  ) : null
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 768 && window.innerHeight > window.innerWidth) {
-        setShowAlert(true)
-      } else {
-        setShowAlert(false)
-      }
-    }
-
-    window.addEventListener('resize', handleResize)
-    handleResize() // Call the function initially to set the state based on the initial window size
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
-  return {
-    setShowAlert,
-    showAlert,
-    handleCloseModal,
-    alertMessage,
-    alert
-  }
-}
-
-export default useSankeyAlert

package/src/data/legacy-defaults.ts

@@ -1,18 +0,0 @@
-// Preserves the OLD default values for properties changed in initial-state.js.
-// When the backfill loop fills a missing property, it uses these values instead
-// of the current defaults so that existing configs aren't visually affected.
-//
-// - Changed defaults: record the ORIGINAL value before any changes.
-// - New properties:   set to `undefined` so they are not backfilled at all.
-//
-// See backfillDefaults() in @cdc/core for the shared fill logic.
-export const LEGACY_CHART_DEFAULTS: Record<string, Record<string, unknown>> = {
-  general: { useIntelligentLineChartLabels: undefined },
-  yAxis: { hideAxis: false, hideTicks: false, gridLines: false, numTicks: '' },
-  xAxis: { numTicks: '', dateDisplayFormat: undefined, viewportNumTicks: undefined },
-  table: { expanded: true, dateDisplayFormat: '' },
-  legend: { position: 'right' },
-  dataFormat: { commas: false },
-  tooltips: { dateDisplayFormat: '' },
-  visual: { border: false, accent: false, background: false }
-}

package/src/helpers/ensureSpecialChartAxisTypes.ts

@@ -1,11 +0,0 @@
-import { type ChartConfig } from '../types/ChartConfig'
-
-export const ensureSpecialChartAxisTypes = <T extends Pick<ChartConfig, 'visualizationType' | 'xAxis'>>(
-  config: T
-): T => {
-  if (config.visualizationType === 'Bump Chart' && config.xAxis) {
-    config.xAxis.type = 'date-time'
-  }
-
-  return config
-}

package/src/helpers/tests/ensureSpecialChartAxisTypes.test.ts

@@ -1,30 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { ensureSpecialChartAxisTypes } from '../ensureSpecialChartAxisTypes'
-
-describe('ensureSpecialChartAxisTypes', () => {
-  it('forces bump charts to use a date-time x-axis', () => {
-    const config = {
-      visualizationType: 'Bump Chart',
-      xAxis: {
-        type: 'categorical',
-        dataKey: 'Timestamp',
-        dateParseFormat: '%m/%d/%Y',
-        dateDisplayFormat: '%Y'
-      }
-    }
-
-    expect(ensureSpecialChartAxisTypes(config as any).xAxis.type).toBe('date-time')
-  })
-
-  it('leaves non-bump chart axis types unchanged', () => {
-    const config = {
-      visualizationType: 'Line',
-      xAxis: {
-        type: 'categorical',
-        dataKey: 'Category'
-      }
-    }
-
-    expect(ensureSpecialChartAxisTypes(config as any).xAxis.type).toBe('categorical')
-  })
-})