@cdc/chart 4.25.10 → 4.26.1

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

@@ -0,0 +1,220 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Preserve Original Decimals',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+// Mock data with mixed decimal precision
+const mixedDecimalData = [
+  { Year: '2020', Value: '1000' },
+  { Year: '2021', Value: '45.7' },
+  { Year: '2022', Value: '12' },
+  { Year: '2023', Value: '89.23' },
+  { Year: '2024', Value: '156' },
+  { Year: '2025', Value: '23.5' }
+]
+
+const baseConfig: any = {
+  type: 'chart',
+  visualizationType: 'Bar',
+  data: mixedDecimalData,
+  xAxis: {
+    dataKey: 'Year',
+    type: 'categorical'
+  },
+  yAxis: {
+    label: 'Value'
+  },
+  series: [
+    {
+      dataKey: 'Value'
+    }
+  ],
+  dataFormat: {
+    commas: true
+  }
+}
+
+export const Default_With_Forced_Rounding: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dataFormat: {
+        commas: true,
+        roundTo: 1
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Default behavior forces all numbers to 1 decimal place. Notice how whole numbers like 1000 become "1,000.0" and 89.23 gets rounded to "89.2".'
+      }
+    }
+  }
+}
+
+export const Preserve_Original_Decimals_Enabled: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dataFormat: {
+        commas: true,
+        roundTo: 1,
+        preserveOriginalDecimals: true
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'With "Preserve Original Decimals" enabled, numbers display exactly as they appear in the data: 1000 shows as "1,000", 45.7 shows as "45.7", and 89.23 shows as "89.23". The roundTo setting is ignored.'
+      }
+    }
+  }
+}
+
+export const Comparison_No_Decimals: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dataFormat: {
+        commas: true,
+        roundTo: 0
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Forcing 0 decimal places rounds everything to whole numbers: 45.7 becomes "46", 89.23 becomes "89". This loses precision from the original data.'
+      }
+    }
+  }
+}
+
+export const Comparison_Two_Decimals: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dataFormat: {
+        commas: true,
+        roundTo: 2
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Forcing 2 decimal places adds unnecessary zeros: 1000 becomes "1,000.00", 45.7 becomes "45.70". This can look cluttered for whole numbers.'
+      }
+    }
+  }
+}
+
+export const With_Prefix_And_Suffix: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dataFormat: {
+        commas: true,
+        prefix: '$',
+        suffix: ' USD',
+        preserveOriginalDecimals: true
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Preserve Original Decimals works seamlessly with prefix and suffix formatting. Numbers show as "$1,000 USD", "$45.7 USD", etc.'
+      }
+    }
+  }
+}
+
+export const Percentage_Data_Mixed_Precision: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      data: [
+        { Year: 'Region 1', Value: '25' },
+        { Year: 'Region 2', Value: '33.3' },
+        { Year: 'Region 3', Value: '50' },
+        { Year: 'Region 4', Value: '12.75' },
+        { Year: 'Region 5', Value: '8.5' }
+      ],
+      dataFormat: {
+        suffix: '%',
+        preserveOriginalDecimals: true,
+        commas: false
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Perfect for percentage data where some values are whole (25%, 50%) and others need decimals (33.3%, 12.75%). Each value displays naturally without forced rounding.'
+      }
+    }
+  }
+}
+
+export const Line_Chart_With_Table: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      visualizationType: 'Line',
+      dataFormat: {
+        commas: true,
+        preserveOriginalDecimals: true
+      },
+      table: {
+        show: true,
+        label: 'Data Table',
+        expanded: true
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When enabled, the preserve decimals setting applies to both the chart axis/tooltips AND the data table, ensuring consistency across all displays.'
+      }
+    }
+  }
+}
+
+export const Editor_Mode: Story = {
+  args: {
+    config: {
+      ...baseConfig,
+      dataFormat: {
+        commas: true,
+        roundTo: 1
+      }
+    },
+    isEditor: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'In editor mode, look for the "Preserve Original Decimal Places" checkbox in the Number Formatting section, right below the "Round to decimal point" field. Toggle it to see the effect in real-time.'
+      }
+    }
+  }
+}
+
+export default meta

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