@cdc/chart 4.23.10 → 4.24.1

package/src/_stories/Chart.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Lollipop: Story = {
+  args: {
+    config: {
+      type: 'chart',
+      title: 'Lollipop Style Horizontal Bar Chart - Number of Spills Occurring in the Home',
+      showTitle: true,
+      showDownloadMediaButton: false,
+      theme: 'theme-blue',
+      animate: true,
+      fontSize: 'medium',
+      lineDatapointStyle: 'hover',
+      barHasBorder: 'false',
+      isLollipopChart: true,
+      lollipopShape: 'circle',
+      lollipopColorStyle: 'two-tone',
+      visualizationSubType: 'horizontal',
+      barStyle: '',
+      roundingStyle: 'standard',
+      tipRounding: 'top',
+      isResponsiveTicks: false,
+      general: { showDownloadButton: false },
+      padding: { left: 5, right: 5 },
+      yAxis: {
+        hideAxis: true,
+        displayNumbersOnBar: true,
+        hideLabel: false,
+        hideTicks: false,
+        size: '13',
+        gridLines: false,
+        enablePadding: false,
+        min: '',
+        max: '',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        rightHideAxis: true,
+        rightAxisSize: 50,
+        rightLabel: '',
+        rightLabelOffsetSize: 0,
+        rightAxisLabelColor: '#333',
+        rightAxisTickLabelColor: '#333',
+        rightAxisTickColor: '#333',
+        numTicks: '9',
+        axisPadding: 0,
+        tickRotation: 0,
+        anchors: [],
+        type: 'chart',
+        title: 'Lollipop Style Horizontal Bar Chart',
+        theme: 'theme-blue',
+        fontSize: 'medium',
+        lineDatapointStyle: 'hover',
+        barHasBorder: 'false',
+        isLollipopChart: false,
+        lollipopShape: 'circle',
+        lollipopColorStyle: 'two-tone',
+        visualizationSubType: 'horizontal',
+        padding: { left: 5, right: 5 },
+        yAxis: { size: 50, gridLines: false },
+        barThickness: 0.35,
+        height: 260,
+        xAxis: { type: 'categorical', size: 75, tickRotation: 0, dataKey: 'Vehicle' },
+        table: { label: 'Data Table', expanded: true, show: true },
+        legend: { behavior: 'isolate', position: 'right' },
+        exclusions: { active: false, keys: [] },
+        palette: 'qualitative-bold',
+        labels: false,
+        dataFormat: {},
+        confidenceKeys: {},
+        data: [
+          { Group: 'Combined Total of Group A', Vehicle: '100', Home: '120', Work: '140', Office: '120' },
+          { Group: 'Combined Total of Group B', Vehicle: '150', Home: '140', Work: '100', Office: '90' },
+          { Group: 'Combined Total of Group C', Vehicle: '90', Home: '90', Work: '80', Office: '80' },
+          { Group: 'Combined Total of Group D', Vehicle: '70', Home: '60', Work: '50', Office: '70' }
+        ],
+        dataFileName: 'CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv',
+        dataFileSourceType: 'file',
+        visualizationType: 'Bar',
+        runtime: {
+          seriesLabels: { Vehicle: 'Vehicle' },
+          seriesLabelsAll: ['Vehicle'],
+          originalXAxis: { type: 'categorical', size: 75, tickRotation: 0, dataKey: 'Vehicle' },
+          seriesKeys: ['Vehicle'],
+          xAxis: { size: 50, gridLines: false },
+          yAxis: { type: 'categorical', size: 75, tickRotation: 0, dataKey: 'Vehicle' },
+          horizontal: true,
+          uniqueId: 1651765968212,
+          editorErrorMessage: ''
+        },
+        description: 'Subtext can be added here for options like citing data sources or insight into reading the bar chart.',
+        series: [{ dataKey: 'Vehicle', type: 'Bar' }],
+        barHeight: 25,
+        barPadding: 40,
+        labelPlacement: 'Below Bar',
+        label: 'Number of Accidents'
+      },
+      boxplot: [],
+      topAxis: { hasLine: false },
+      isLegendValue: false,
+      barThickness: 0.35,
+      barHeight: 6,
+      barSpace: 15,
+      heights: { vertical: 300, horizontal: 170.39999999999998 },
+      xAxis: {
+        anchors: [],
+        type: 'categorical',
+        showTargetLabel: true,
+        targetLabel: 'Target',
+        hideAxis: true,
+        hideLabel: true,
+        hideTicks: true,
+        size: '16',
+        tickRotation: 0,
+        min: '',
+        max: '160',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        numTicks: '',
+        labelOffset: 65,
+        axisPadding: 0,
+        target: 0,
+        maxTickRotation: 0,
+        dataKey: 'Group'
+      },
+      table: { label: 'Data Table', expanded: false, limitHeight: false, height: '', caption: '', showDownloadUrl: false, showDataTableLink: true, indexLabel: 'Group', download: false, showVertical: true, show: true },
+      orientation: 'horizontal',
+      color: 'pinkpurple',
+      columns: {},
+      legend: {
+        behavior: 'isolate',
+        singleRow: false,
+        colorCode: '',
+        reverseLabelOrder: false,
+        description: '',
+        dynamicLegend: false,
+        dynamicLegendDefaultText: 'Show All',
+        dynamicLegendItemLimit: 5,
+        dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
+        dynamicLegendChartMessage: 'Select Options from the Legend',
+        position: 'right',
+        hide: true,
+        label: 'Accident Location'
+      },
+      exclusions: { active: false, keys: [] },
+      palette: 'qualitative-bold',
+      isPaletteReversed: false,
+      twoColor: { palette: 'monochrome-1', isPaletteReversed: false },
+      labels: false,
+      dataFormat: { commas: false, prefix: '', suffix: '', abbreviated: false, bottomSuffix: '', bottomPrefix: '', bottomAbbreviated: false },
+      confidenceKeys: {},
+      visual: { border: true, accent: true, background: true, verticalHoverLine: false, horizontalHoverLine: false },
+      useLogScale: false,
+      filterBehavior: 'Filter Change',
+      highlightedBarValues: [],
+      series: [{ dataKey: 'Home', type: 'Bar', tooltip: true }],
+      tooltips: { opacity: 90 },
+      height: 212,
+      data: [
+        { Group: 'Combined Total of Group A', Vehicle: '100', Home: '120', Work: '140', Office: '120' },
+        { Group: 'Combined Total of Group B', Vehicle: '150', Home: '140', Work: '100', Office: '90' },
+        { Group: 'Combined Total of Group C', Vehicle: '90', Home: '90', Work: '80', Office: '80' },
+        { Group: 'Combined Total of Group D', Vehicle: '70', Home: '60', Work: '50', Office: '70' }
+      ],
+      dataFileName: 'CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv',
+      dataFileSourceType: 'file',
+      visualizationType: 'Bar',
+      description: 'Subtext can be added here for options like citing data sources or insight into reading the bar chart.',
+      barPadding: 47,
+      filters: [],
+      lollipopSize: 'medium',
+      validated: 4.23,
+      dynamicMarginTop: 0
+    }
+  }
+}
+
+export default meta

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

@@ -0,0 +1,305 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Tooltip',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Additional_Tooltip: Story = {
+  args: {
+    config: {
+      type: 'chart',
+      debugSvg: false,
+      chartMessage: {
+        noData: 'No Data Available'
+      },
+      title: 'Example Stacked Bar Chart with Additional tolltip column',
+      showTitle: true,
+      showDownloadMediaButton: false,
+      theme: 'theme-orange',
+      animate: false,
+      fontSize: 'medium',
+      lineDatapointStyle: 'hover',
+      barHasBorder: 'false',
+      isLollipopChart: false,
+      lollipopShape: 'circle',
+      lollipopColorStyle: 'two-tone',
+      visualizationSubType: 'stacked',
+      barStyle: '',
+      roundingStyle: 'standard',
+      tipRounding: 'top',
+      isResponsiveTicks: false,
+      general: {
+        showDownloadButton: false
+      },
+      padding: {
+        left: 5,
+        right: 5
+      },
+      yAxis: {
+        hideAxis: false,
+        displayNumbersOnBar: false,
+        hideLabel: false,
+        hideTicks: false,
+        size: '64',
+        gridLines: false,
+        enablePadding: false,
+        min: '',
+        max: '',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        rightHideAxis: true,
+        rightAxisSize: 0,
+        rightLabel: '',
+        rightLabelOffsetSize: 0,
+        rightAxisLabelColor: '#333',
+        rightAxisTickLabelColor: '#333',
+        rightAxisTickColor: '#333',
+        numTicks: '',
+        axisPadding: 0,
+        tickRotation: 0,
+        anchors: [],
+        label: 'Y-Axis Label Example'
+      },
+      boxplot: {
+        plots: [],
+        borders: 'true',
+        firstQuartilePercentage: 25,
+        thirdQuartilePercentage: 75,
+        boxWidthPercentage: 40,
+        plotOutlierValues: false,
+        plotNonOutlierValues: true,
+        legend: {
+          showHowToReadText: false,
+          howToReadText: ''
+        },
+        labels: {
+          q1: 'Lower Quartile',
+          q2: 'q2',
+          q3: 'Upper Quartile',
+          q4: 'q4',
+          minimum: 'Minimum',
+          maximum: 'Maximum',
+          mean: 'Mean',
+          median: 'Median',
+          sd: 'Standard Deviation',
+          iqr: 'Interquartile Range',
+          total: 'Total',
+          outliers: 'Outliers',
+          values: 'Values',
+          lowerBounds: 'Lower Bounds',
+          upperBounds: 'Upper Bounds'
+        }
+      },
+      topAxis: {
+        hasLine: false
+      },
+      isLegendValue: false,
+      barThickness: 0.35,
+      barHeight: 25,
+      barSpace: 15,
+      heights: {
+        vertical: 300,
+        horizontal: 750
+      },
+      xAxis: {
+        sortDates: false,
+        anchors: [],
+        type: 'categorical',
+        showTargetLabel: true,
+        targetLabel: 'Target',
+        hideAxis: false,
+        hideLabel: false,
+        hideTicks: false,
+        size: '67',
+        tickRotation: '25',
+        min: '',
+        max: '',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        numTicks: '',
+        labelOffset: 65,
+        axisPadding: 0,
+        target: 0,
+        maxTickRotation: 0,
+        dataKey: 'Year',
+        label: 'X-Axis Label Example',
+        tickWidthMax: 41
+      },
+      table: {
+        label: 'Data Table',
+        expanded: true,
+        limitHeight: false,
+        height: '',
+        caption: '',
+        showDownloadUrl: false,
+        showDataTableLink: true,
+        indexLabel: '',
+        download: true,
+        showVertical: false,
+        show: true
+      },
+      orientation: 'vertical',
+      color: 'pinkpurple',
+      columns: {
+        additionalColumn1: {
+          label: 'New Column',
+          dataTable: false,
+          tooltips: true,
+          prefix: '',
+          suffix: '',
+          forestPlot: false,
+          startingPoint: '0',
+          forestPlotAlignRight: false,
+          name: 'Data 1'
+        }
+      },
+      legend: {
+        hide: false,
+        behavior: 'isolate',
+        singleRow: false,
+        colorCode: '',
+        reverseLabelOrder: false,
+        description: '',
+        dynamicLegend: false,
+        dynamicLegendDefaultText: 'Show All',
+        dynamicLegendItemLimit: 5,
+        dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
+        dynamicLegendChartMessage: 'Select Options from the Legend',
+        lineMode: false,
+        verticalSorted: false,
+        position: 'right',
+        label: 'Data Type'
+      },
+      brush: {
+        height: 25,
+        data: [],
+        active: false
+      },
+      exclusions: {
+        active: false,
+        keys: []
+      },
+      palette: 'qualitative-bold',
+      isPaletteReversed: false,
+      twoColor: {
+        palette: 'monochrome-1',
+        isPaletteReversed: false
+      },
+      labels: false,
+      dataFormat: {
+        commas: false,
+        prefix: '',
+        suffix: '%',
+        abbreviated: false,
+        bottomSuffix: '',
+        bottomPrefix: '',
+        bottomAbbreviated: false
+      },
+      confidenceKeys: {},
+      visual: {
+        border: true,
+        accent: true,
+        background: true,
+        verticalHoverLine: false,
+        horizontalHoverLine: false
+      },
+      useLogScale: false,
+      filterBehavior: 'Filter Change',
+      highlightedBarValues: [],
+      series: [
+        {
+          dataKey: 'Data 2',
+          type: 'Bar',
+          tooltip: true
+        },
+        {
+          dataKey: 'Data 3',
+          type: 'Bar',
+          tooltip: true
+        }
+      ],
+      tooltips: {
+        opacity: 90
+      },
+      forestPlot: {
+        startAt: 0,
+        width: 'auto',
+        colors: {
+          line: '',
+          shape: ''
+        },
+        estimateField: '',
+        estimateRadius: '',
+        lowerCiField: '',
+        upperCiField: '',
+        shape: '',
+        rowHeight: 20,
+        showZeroLine: false,
+        description: {
+          show: true,
+          text: 'description',
+          location: 0
+        },
+        result: {
+          show: true,
+          text: 'result',
+          location: 100
+        },
+        radius: {
+          min: 1,
+          max: 8,
+          scalingColumn: ''
+        },
+        regression: {
+          lower: 0,
+          upper: 0,
+          estimateField: 0
+        },
+        leftWidthOffset: 0,
+        rightWidthOffset: 0
+      },
+      area: {
+        isStacked: false
+      },
+      height: '375',
+      data: [
+        {
+          Year: '2015',
+          'Data 1': '25',
+          'Data 2': '20',
+          'Data 3': '55'
+        },
+        {
+          Year: '2016',
+          'Data 1': '35',
+          'Data 2': '30',
+          'Data 3': '35'
+        },
+        {
+          Year: '2017',
+          'Data 1': '22',
+          'Data 2': '38',
+          'Data 3': '40'
+        },
+        {
+          Year: '2018',
+          'Data 1': '40',
+          'Data 2': '40',
+          'Data 3': '20'
+        }
+      ],
+      visualizationType: 'Bar',
+      validated: 4.23,
+      dynamicMarginTop: 0
+    }
+  }
+}
+
+export default meta

package/src/_stories/ChartBrush.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import chartBrushConfig from './_mock/brush_mock.json'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Brush',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Area_Brush: Story = {
+  args: {
+    config: chartBrushConfig
+  }
+}
+
+export default meta

package/src/_stories/ChartEditor.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chart from '../CdcChart'
+
+import pieChartExample from './_mock/pie_config.json'
+import pieData from './_mock/pie_data.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Editor/Chart',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Primary: Story = {
+  args: {
+    config: { ...pieChartExample, data: pieData },
+    isEditor: true
+  }
+}
+
+export default meta

package/src/_stories/ChartLine.preliminary.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import chartLinepreliminary from './_mock/preliminary_mock.json'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Line/Preliminary',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Line_Chart: Story = {
+  args: {
+    config: chartLinepreliminary
+  }
+}
+
+export default meta

package/src/_stories/ChartSuppress.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import suppressMock from './_mock/suppress_mock.json'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Suppress',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Horizontal_Chart: Story = {
+  args: {
+    config: suppressMock
+  }
+}
+
+export default meta