@cdc/chart 4.25.5-1 → 4.25.6-1

package/src/_stories/Chart.stories.tsx

@@ -1,93 +1,99 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-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 barChartLabels from './_mock/barchart_labels.mock.json'
-import pieConfig from './_mock/pie_with_data.json'
-import boxPlotConfig from './_mock/boxplot_multiseries.json'
-import areaChartStacked from './_mock/area_chart_stacked.json'
-import multipleLines from './_mock/short_dates.json'
-import { editConfigKeys } from '../helpers/configHelpers'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart',
-  component: Chart
-}
-
-type Story = StoryObj<typeof Chart>
-
-export const line_Chart_Two_Points_Regression_Test: Story = {
-  args: {
-    config: lineChartTwoPointsRegressionTest,
-    isEditor: false
-  }
-}
-export const line_Chart_Two_Points_New_Chart: Story = {
-  args: {
-    config: lineChartTwoPointsNewChart,
-    isEditor: false
-  }
-}
-
-export const multiple_lines: Story = {
-  args: {
-    config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
-  }
-}
-
-export const Lollipop: Story = {
-  args: {
-    config: lollipop,
-    isEditor: false
-  }
-}
-
-export const Forest_Plot: Story = {
-  args: {
-    config: forestPlot
-  }
-}
-
-export const Horizontal_Bar: Story = {
-  args: {
-    config: horizontalBarConfig
-  }
-}
-
-export const BarChart_Labels: Story = {
-  args: {
-    config: barChartLabels
-  }
-}
-
-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
-  }
-}
-
-export const Area_Chart_stacked: Story = {
-  args: {
-    config: areaChartStacked,
-    isEditor: false
-  }
-}
-
-export default meta
+import type { Meta, StoryObj } from '@storybook/react'
+
+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 barChartLabels from './_mock/barchart_labels.mock.json'
+import pieConfig from './_mock/pie_with_data.json'
+import pieCalculatedArea from './_mock/pie_calculated_area.json'
+import boxPlotConfig from './_mock/boxplot_multiseries.json'
+import areaChartStacked from './_mock/area_chart_stacked.json'
+import multipleLines from './_mock/short_dates.json'
+import { editConfigKeys } from '../helpers/configHelpers'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const line_Chart_Two_Points_Regression_Test: Story = {
+  args: {
+    config: lineChartTwoPointsRegressionTest,
+    isEditor: false
+  }
+}
+export const line_Chart_Two_Points_New_Chart: Story = {
+  args: {
+    config: lineChartTwoPointsNewChart,
+    isEditor: false
+  }
+}
+
+export const multiple_lines: Story = {
+  args: {
+    config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
+  }
+}
+
+export const Lollipop: Story = {
+  args: {
+    config: lollipop,
+    isEditor: false
+  }
+}
+
+export const Forest_Plot: Story = {
+  args: {
+    config: forestPlot
+  }
+}
+
+export const Horizontal_Bar: Story = {
+  args: {
+    config: horizontalBarConfig
+  }
+}
+
+export const BarChart_Labels: Story = {
+  args: {
+    config: barChartLabels
+  }
+}
+
+export const Pie: Story = {
+  args: {
+    config: pieConfig
+  }
+}
+export const Pie_Calculated_Area: Story = {
+  args: {
+    config: pieCalculatedArea
+  }
+}
+
+export const Paired_Bar: Story = {
+  args: {
+    config: pairedBar
+  }
+}
+export const BoxPlot_Multiseries: Story = {
+  args: {
+    config: boxPlotConfig,
+    isEditor: false
+  }
+}
+
+export const Area_Chart_stacked: Story = {
+  args: {
+    config: areaChartStacked,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/ChartPrefixSuffix.stories.tsx

@@ -15,49 +15,55 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
-export const Top_Suffix: Story = {
+export const Inline_Label: Story = {
   args: {
     config: editConfigKeys(barConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
-      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'inlineLabel'], value: ' Somethings per Something' },
       { path: ['yAxis', 'gridLines'], value: true }
     ])
   }
 }
-
-export const Top_Suffix_Worst_Case: Story = {
+export const Inline_Label_With_Suffix: Story = {
   args: {
-    config: editConfigKeys(annotationConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
-      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' }
+    config: editConfigKeys(barConfig, [
+      { path: ['yAxis', 'inlineLabel'], value: ' Somethings per Something' },
+      { path: ['dataFormat', 'suffix'], value: '%' },
+      { path: ['yAxis', 'gridLines'], value: true }
     ])
   }
 }
 
-export const Top_Suffix_With_Options: Story = {
+export const Inline_Label_Worst_Case: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [{ path: ['yAxis', 'inlineLabel'], value: ' Somethings per Something' }])
+  }
+}
+
+export const Inline_Label_With_Options: Story = {
   args: {
     config: editConfigKeys(annotationConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['yAxis', 'inlineLabel'], value: ' units' },
+      { path: ['dataFormat', 'suffix'], value: '' },
       { path: ['yAxis', 'tickRotation'], value: 45 },
       { path: ['yAxis', 'tickLabelColor'], value: 'red' }
     ])
   }
 }
 
-export const Top_Suffix_No_Space: Story = {
+export const Inline_Label_No_Space: Story = {
   args: {
     config: editConfigKeys(annotationConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
-      { path: ['dataFormat', 'suffix'], value: 'lbs' }
+      { path: ['yAxis', 'inlineLabel'], value: 'lbs' },
+      { path: ['dataFormat', 'suffix'], value: '' }
     ])
   }
 }
 
-export const Top_Suffix_With_Space: Story = {
+export const Inline_Label_With_Space: Story = {
   args: {
     config: editConfigKeys(annotationConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
-      { path: ['dataFormat', 'suffix'], value: 'lbs of something' }
+      { path: ['yAxis', 'inlineLabel'], value: 'lbs of something' },
+      { path: ['dataFormat', 'suffix'], value: '' }
     ])
   }
 }
@@ -67,15 +73,7 @@ export const Suffix: Story = {
     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, [
@@ -85,10 +83,10 @@ export const Prefix: Story = {
   }
 }
 
-export const Top_Prefix_And_Suffix: Story = {
+export const Prefix_Suffix_And_Inline_Title: Story = {
   args: {
     config: editConfigKeys(annotationConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['yAxis', 'inlineLabel'], value: 'lbs of something' },
       { path: ['dataFormat', 'prefix'], value: '$' }
     ])
   }
@@ -102,11 +100,11 @@ export const Horizontal_Bar: Story = {
   }
 }
 
-export const Top_Suffix_On_Line: Story = {
+export const Inline_Title_On_Line: Story = {
   args: {
     config: editConfigKeys(barConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
-      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'inlineLabel'], value: 'lbs of something' },
+      { path: ['dataFormat', 'suffix'], value: '' },
       { path: ['yAxis', 'gridLines'], value: true },
       { path: ['yAxis', 'labelsAboveGridlines'], value: true },
       { path: ['yAxis', 'hideAxis'], value: true }
@@ -128,9 +126,8 @@ export const Values_On_Line_All_Suffix: Story = {
 export const Values_on_Line_Top_Suffix_Only_Area_Worst_Case: Story = {
   args: {
     config: editConfigKeys(annotationConfig, [
-      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['yAxis', 'inlineLabel'], value: ' of something' },
       { path: ['dataFormat', 'prefix'], value: 'pre' },
-      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
       { path: ['yAxis', 'labelsAboveGridlines'], value: true },
       { path: ['yAxis', 'gridLines'], value: true }
     ])