@cdc/chart 4.24.9 → 4.24.11

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Custom Colors',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const ScatterPlot: Story = {
+  args: {
+    config: scatterPlotCustomColorConfig,
+    isEditor: false
+  }
+}
+
+export default meta

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

@@ -0,0 +1,27 @@
+import DynamicSeriesConfig from './_mock/dynamic_series_config.json'
+import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
+import { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Dynamic Series',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Line: Story = {
+  args: {
+    config: DynamicSeriesConfig,
+    isEditor: false
+  }
+}
+
+export const Bar: Story = {
+  args: {
+    config: DynamicSeriesBarConfig,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/Chart.Legend.Gradient.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import chartGradientConfig from './_mock/legend.gradient_mock.json'
+import SimplifiedLineConfig from './_mock/simplified_line.json'
+
+import Chart from '../CdcChart'
+import { editConfigKeys } from '../helpers/configHelpers'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Legend',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Legend_Gradient_Smooth: Story = {
+  args: {
+    config: chartGradientConfig
+  }
+}
+
+export const Legend_Gradient_Linear_Blocks: Story = {
+  args: {
+    config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'subStyle'], value: 'linear blocks' }])
+  }
+}
+
+export const Labels_On_Line_Legend_On_Top: Story = {
+  args: {
+    config: editConfigKeys(chartGradientConfig, [{ path: ['yAxis', 'labelsAboveGridlines'], value: true }])
+  }
+}
+
+export const Legend_On_Right: Story = {
+  args: {
+    config: SimplifiedLineConfig
+  }
+}
+
+export const Legend_On_Right_With_Box: Story = {
+  args: {
+    config: editConfigKeys(SimplifiedLineConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  }
+}
+
+export const Legend_Gradient_With_box: Story = {
+  args: {
+    config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  }
+}
+
+export const Legend_Gradient_With_Text: Story = {
+  args: {
+    config: editConfigKeys(chartGradientConfig, [
+      { path: ['legend', 'title'], value: 'Title' },
+      { path: ['legend', 'description'], value: 'Description' },
+      { path: ['legend', 'hideBorder'], value: false }
+    ])
+  }
+}
+export const Legend_Gradient_Wrapping_Label: Story = {
+  args: {
+    config: JSON.parse(
+      JSON.stringify(
+        editConfigKeys(chartGradientConfig, [
+          { path: ['legend', 'title'], value: 'Title' },
+          { path: ['legend', 'description'], value: 'Description' },
+          { path: ['legend', 'hideBorder'], value: false }
+        ])
+      ).replace(/Data 1/g, 'This is a long string that should wrap')
+    )
+  }
+}
+
+export default meta

package/src/_stories/Chart.stories.tsx

@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import SuppressedConfig from './_mock/bar-chart-suppressed.json'
 
 import Chart from '../CdcChart'
 import lineChartTwoPointsRegressionTest from './_mock/line_chart_two_points_regression_test.json'
 import lineChartTwoPointsNewChart from './_mock/line_chart_two_points_new_chart.json'
 import lollipop from './_mock/lollipop.json'
+import forestPlot from '../../examples/feature/forest-plot/forest-plot.json'
+import pairedBar from './_mock/paired-bar.json'
+import horizontalBarConfig from './_mock/horizontal_bar.json'
+import pieConfig from './_mock/pie_with_data.json'
+import boxPlotConfig from './_mock/boxplot_multiseries.json'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -33,9 +37,32 @@ export const Lollipop: Story = {
   }
 }
 
-export const Suppression: Story = {
+export const Forest_Plot: Story = {
   args: {
-    config: SuppressedConfig,
+    config: forestPlot
+  }
+}
+
+export const Horizontal_Bar: Story = {
+  args: {
+    config: horizontalBarConfig
+  }
+}
+
+export const Pie: Story = {
+  args: {
+    config: pieConfig
+  }
+}
+
+export const Paired_Bar: Story = {
+  args: {
+    config: pairedBar
+  }
+}
+export const BoxPlot_Multiseries: Story = {
+  args: {
+    config: boxPlotConfig,
     isEditor: false
   }
 }

package/src/_stories/ChartAxisLabels.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import SimplifiedLineConfig from './_mock/simplified_line.json'
+
+import Chart from '../CdcChart'
+import { editConfigKeys } from '../helpers/configHelpers'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Axis Labels',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Abbreviated_Dates: Story = {
+  args: {
+    config: editConfigKeys(SimplifiedLineConfig, [{ path: ['xAxis', 'showYearsOnce'], value: true }])
+  }
+}
+
+export default meta

package/src/_stories/ChartAxisTitles.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+import longXLabelsConfig from './_mock/large_x_axis_labels.json'
+import pairedBarConfig from './_mock/paired-bar.json'
+import { editConfigKeys } from '../helpers/configHelpers'
+import { ChartConfig } from '../types/ChartConfig'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Axis Titles',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+export const Dynamic_Labels: Story = {
+  args: {
+    config: editConfigKeys(longXLabelsConfig, [{ path: ['xAxis', 'label'], value: 'This is the title' }])
+  }
+}
+
+export const Rotated_Labels: StoryObj<{ config: ChartConfig; tickRotation: number }> = {
+  args: {
+    tickRotation: 0, // Default value
+    config: longXLabelsConfig
+  },
+  argTypes: {
+    tickRotation: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 90,
+        step: 5
+      }
+    }
+  },
+  render: args => {
+    // Create a new config object with the updated tickRotation
+    const config = editConfigKeys(longXLabelsConfig, [
+      { path: ['xAxis', 'label'], value: 'This is the title This is the title This is the title' },
+      { path: ['xAxis', 'tickRotation'], value: args.tickRotation }
+    ])
+
+    return <Chart config={config} />
+  }
+}
+
+export const Paired_Bar: Story = {
+  args: {
+    config: pairedBarConfig
+  }
+}

package/src/_stories/ChartEditor.stories.tsx

@@ -4,6 +4,7 @@ import Chart from '../CdcChart'
 import pieChartExample from './_mock/pie_config.json'
 import pieData from './_mock/pie_data.json'
 import urlFilterExample from './_mock/url_filter.json'
+import mockScatterPlot from './_mock/scatterplot_mock.json'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Editor',
@@ -30,4 +31,30 @@ export const Url_Filter: Story = {
   }
 }
 
+export const ScatterPlot: Story = {
+  args: {
+    config: mockScatterPlot,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+    // play is running before full rendering is complete so sleep function
+    // is needed to delay the execution.
+    // possible related bug: https://github.com/storybookjs/storybook/issues/18258
+    await sleep(3000)
+    const dateCategoryAccordion = await canvas.findByRole('button', { name: /Date\/Category Axis/i })
+    user.click(dateCategoryAccordion)
+    await sleep(1000)
+    const minValueInput = await canvas.findByLabelText('min value')
+    const maxValueInput = await canvas.findByLabelText('max value')
+    await user.type(minValueInput, '0')
+    await user.type(maxValueInput, '100')
+    await sleep(1000)
+    // Scroll to the top of the screen
+    user.click(dateCategoryAccordion)
+    await canvasElement.scrollTo(0, 0)
+  }
+}
+
 export default meta

package/src/_stories/ChartLine.Suppression.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+import suppressionConfig from './_mock/suppression_mock.json'
+import SuppressedConfig from './_mock/bar-chart-suppressed.json'
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Suppression',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const SuppressedLines: Story = {
+  args: {
+    config: suppressionConfig,
+    isEditor: false
+  }
+}
+export const SuppressedBars: Story = {
+  args: {
+    config: SuppressedConfig,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/ChartPrefixSuffix.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import barConfig from './_mock/line_chart_two_points_new_chart.json'
+import annotationConfig from './_mock/annotation_category_mock.json'
+import areaPrefix from './_mock/annotation_category_mock.json'
+import horizontalBarConfig from './_mock/horizontal_bar.json'
+import scatterPlotConfig from './_mock/scatterplot_mock.json'
+
+import Chart from '../CdcChart'
+import { editConfigKeys } from '../helpers/configHelpers'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Prefix Suffix',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Top_Suffix: Story = {
+  args: {
+    config: editConfigKeys(barConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'gridLines'], value: true }
+    ])
+  }
+}
+
+export const Top_Suffix_Worst_Case: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' }
+    ])
+  }
+}
+
+export const Top_Suffix_With_Options: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['yAxis', 'tickRotation'], value: 45 },
+      { path: ['yAxis', 'tickLabelColor'], value: 'red' }
+    ])
+  }
+}
+
+export const Top_Suffix_No_Space: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: 'lbs' }
+    ])
+  }
+}
+
+export const Top_Suffix_With_Space: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: 'lbs of something' }
+    ])
+  }
+}
+
+export const Suffix: Story = {
+  args: {
+    config: annotationConfig
+  }
+}
+export const Top_Prefix: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'prefix'], value: '$' },
+      { path: ['dataFormat', 'suffix'], value: '' }
+    ])
+  }
+}
+export const Prefix: Story = {
+  args: {
+    config: editConfigKeys(areaPrefix, [
+      { path: ['dataFormat', 'prefix'], value: '$' },
+      { path: ['dataFormat', 'suffix'], value: '' }
+    ])
+  }
+}
+
+export const Top_Prefix_And_Suffix: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'prefix'], value: '$' }
+    ])
+  }
+}
+export const Horizontal_Bar: Story = {
+  args: {
+    config: editConfigKeys(horizontalBarConfig, [
+      { path: ['dataFormat', 'suffix'], value: ' suf' },
+      { path: ['dataFormat', 'prefix'], value: 'pre' }
+    ])
+  }
+}
+
+export const Top_Suffix_On_Line: Story = {
+  args: {
+    config: editConfigKeys(barConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'gridLines'], value: true },
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['yAxis', 'hideAxis'], value: true }
+    ])
+  }
+}
+
+export const Values_On_Line_All_Suffix: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' units' },
+      { path: ['yAxis', 'gridLines'], value: true },
+      { path: ['yAxis', 'hideAxis'], value: true }
+    ])
+  }
+}
+
+export const Values_on_Line_Top_Suffix_Only_Area_Worst_Case: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'prefix'], value: 'pre' },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['yAxis', 'gridLines'], value: true }
+    ])
+  }
+}
+
+export const Top_Suffix_Above_Gridlines_With_Options: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['yAxis', 'tickRotation'], value: 45 },
+      { path: ['yAxis', 'tickLabelColor'], value: 'red' },
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['yAxis', 'gridLines'], value: true },
+      { path: ['yAxis', 'hideAxis'], value: true }
+    ])
+  }
+}
+
+export const ScatterPlot_Bottom_Commas: Story = {
+  args: {
+    config: editConfigKeys(scatterPlotConfig, [{ path: ['dataFormat', 'bottomCommas'], value: true }])
+  },
+  isEditor: true
+}
+
+export default meta