@cdc/chart 4.25.6 → 4.25.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.25.6",
+  "version": "4.25.7",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -26,6 +26,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@cdc/core": "^4.25.7",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@visx/axis": "3.12.0",
@@ -53,7 +54,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
+  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d",
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
     "@types/d3-format": "^3.0.4",

package/src/CdcChartComponent.tsx

@@ -65,6 +65,7 @@ import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import EditorContext from '../../editor/src/ConfigContext'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
+import { extractCoveData, updateVegaData } from '@cdc/core/helpers/vegaConfig'
 // Local helpers
 import { isConvertLineToBarGraph } from './helpers/isConvertLineToBarGraph'
 import { getBoxPlotConfig } from './helpers/getBoxPlotConfig'
@@ -124,8 +125,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     coveLoadedEventRan,
     imageId,
     seriesHighlight,
-    colorScale,
-    brushConfig
+    colorScale
   } = state
   const { description, visualizationType } = config
   const svgRef = useRef(null)
@@ -261,6 +261,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       const [plots, categories] = getBoxPlotConfig(newConfig, stateData)
       newConfig.boxplot['categories'] = categories
       newConfig.boxplot.plots = plots
+      newConfig.yAxis.labelPlacement = 'On Date/Category Axis'
     }
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
       newConfig.runtime = getComboChartConfig(newConfig)
@@ -286,7 +287,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
 
     if (
-      (newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') ||
+      ((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Box Plot') &&
+        newConfig.orientation === 'horizontal') ||
       ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)
     ) {
       newConfig.runtime.xAxis = _.cloneDeep(newConfig.yAxis.yAxis || newConfig.yAxis)
@@ -298,7 +300,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       // remove after  COVE supports categorical axis on horizonatal bars
       newConfig.yAxis.type = newConfig.yAxis.type === 'categorical' ? 'linear' : newConfig.yAxis.type
     } else if (
-      ['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
+      ['Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
       !convertLineToBarGraph
     ) {
       newConfig.runtime.xAxis = newConfig.xAxis
@@ -409,6 +411,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
         if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
         let newData = await fetchRemoteData(newConfig.dataUrl)
 
+        if (newConfig.vegaConfig) {
+          newData = extractCoveData(updateVegaData(newConfig.vegaConfig, newData))
+        }
+
         if (newData && newConfig.dataDescription) {
           newData = transform.autoStandardize(newData)
           newData = transform.developerStandardize(newData, newConfig.dataDescription)
@@ -840,7 +846,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (legend?.hide) classes.push('legend-hidden')
     if (lineDatapointClass) classes.push(lineDatapointClass)
     if (!config.barHasBorder) classes.push('chart-bar--no-border')
-    if (config.brush?.active && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || legend.hide))
+    if (config.xAxis.brushActive && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || legend.hide))
       classes.push('dashboard-brush')
     classes.push(...contentClasses)
     return classes
@@ -851,8 +857,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
 
     if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
-    if (config.brush?.active && !isLegendOnBottom) classes.push('subtext--brush-active ')
-    if (config.brush?.active && config.legend.hide) classes.push('subtext--brush-active ')
+    if (config.xAxis.brushActive && !isLegendOnBottom) classes.push('subtext--brush-active ')
+    if (config.xAxis.brushActive && config.legend.hide) classes.push('subtext--brush-active ')
     return classes
   }
 
@@ -862,7 +868,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
         {config.dataKey} (Go to Table)
       </a>
     )
-
     body = (
       <>
         {isEditor && <EditorPanel datasets={datasets} />}
@@ -1102,7 +1107,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   const contextValues = {
     ...state,
-    brushConfig,
     capitalize,
     convertLineToBarGraph,
     clean,

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import boxPlotConfig from './_mock/boxplot_multiseries.json'
+import Chart from '../CdcChartComponent'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Box Plot',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const BoxPlot_Vertical: Story = {
+  args: {
+    config: {
+      ...boxPlotConfig,
+      orientation: 'vertical',
+      title: 'Vertical Multiseries Box Plot',
+      isEditor: false
+    }
+  }
+}
+
+export const BoxPlot_Horizontal: Story = {
+  args: {
+    config: {
+      ...boxPlotConfig,
+      orientation: 'horizontal',
+      title: 'Horizontal Multiseries Box Plot',
+      yAxis: { ...boxPlotConfig.yAxis, labelPlacement: 'Above Bar' }
+    },
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/Chart.stories.tsx

@@ -10,7 +10,6 @@ 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'
@@ -82,12 +81,6 @@ export const Paired_Bar: Story = {
     config: pairedBar
   }
 }
-export const BoxPlot_Multiseries: Story = {
-  args: {
-    config: boxPlotConfig,
-    isEditor: false
-  }
-}
 
 export const Area_Chart_stacked: Story = {
   args: {

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import Chart from '../CdcChartComponent'
-
+import barChartStacked from './_mock/barchart_labels.mock.json'
+import barChartSuppressed from './_mock/bar-chart-suppressed.json'
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Tooltip',
   component: Chart
@@ -9,294 +10,53 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+export const Increased_Tooltip_Range: Story = {
+  args: {
+    config: {
+      ...barChartSuppressed,
+      title: 'Increased Tooltip hovers range for missing and suppressed bars',
+      tooltips: {
+        ...barChartSuppressed.tooltips,
+        singleSeries: true
+      }
+    }
+  }
+}
+
 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',
+      ...barChartStacked,
+      title: 'Stacked Bar Chart with Additional Tooltip Column',
       showTitle: true,
-      showDownloadMediaButton: false,
-      theme: 'theme-orange',
-      animate: false,
-      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'
+      series: [
+        ...barChartStacked.series,
+        {
+          dataKey: 'White, non-Hispanic',
+          type: 'Bar',
+          axis: 'Left',
+          tooltip: true
         }
-      },
-      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,
+        'American Indian/Alaska Native': {
+          label: 'Additional Tooltip',
+          dataTable: true,
           tooltips: true,
           prefix: '',
           suffix: '',
           forestPlot: false,
           startingPoint: '0',
           forestPlotAlignRight: false,
-          name: 'Data 1'
+          roundToPlace: 0,
+          commas: true,
+          showInViz: false,
+          forestPlotStartingPoint: 0,
+          name: 'American Indian/Alaska Native',
+          series: 'Hispanic'
         }
-      },
-      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
+      }
     }
   }
 }

package/src/_stories/_mock/bar-chart-suppressed.json

@@ -178,84 +178,7 @@
     "position": "right",
     "label": "Data Type"
   },
-  "brush": {
-    "height": 25,
-    "active": false,
-    "data": [
-      {
-        "Date": "1/15/2016",
-        "Data 1": "1000",
-        "Data 2": "110",
-        "Data 3": "100",
-        "Data 4": "90",
-        "Monthly-Goal": "100"
-      },
-      {
-        "Date": "2/15/2016",
-        "Data 1": "100",
-        "Data 2": "110",
-        "Data 3": "100",
-        "Data 4": "100",
-        "Monthly-Goal": "100"
-      },
-      {
-        "Date": "3/15/2016",
-        "Data 1": "80",
-        "Data 2": "90",
-        "Data 3": "100",
-        "Data 4": "120",
-        "Monthly-Goal": "110"
-      },
-      {
-        "Date": "4/15/2016",
-        "Data 1": "80",
-        "Data 2": "90",
-        "Data 3": "110",
-        "Data 4": "120",
-        "Monthly-Goal": "110"
-      },
-      {
-        "Date": "5/15/2016",
-        "Data 1": "70",
-        "Data 2": "90",
-        "Data 3": "110",
-        "Data 4": "130",
-        "Monthly-Goal": "120"
-      },
-      {
-        "Date": "6/15/2016",
-        "Data 1": "100",
-        "Data 2": "120",
-        "Data 3": "120",
-        "Data 4": "130",
-        "Monthly-Goal": "120"
-      },
-      {
-        "Date": "7/15/2016",
-        "Data 1": "110",
-        "Data 2": "140",
-        "Data 3": "120",
-        "Data 4": "130",
-        "Monthly-Goal": "130"
-      },
-      {
-        "Date": "8/15/2016",
-        "Data 1": "110",
-        "Data 2": "130",
-        "Data 3": "120",
-        "Data 4": "140",
-        "Monthly-Goal": "130"
-      },
-      {
-        "Date": "9/15/2016",
-        "Data 1": "120",
-        "Data 2": "130",
-        "Data 3": "120",
-        "Data 4": "150",
-        "Monthly-Goal": "140"
-      }
-    ]
-  },
+
   "exclusions": {
     "active": false,
     "keys": []
@@ -390,7 +313,6 @@
     },
     "data": []
   },
-  "suppressedData": [],
   "height": "332",
   "data": [
     {
@@ -460,7 +382,7 @@
     {
       "Date": "9/15/2016",
       "Data 1": "120",
-      "Data 2": "",
+      "Data 2": "Aza",
       "Data 3": "120",
       "Data 4": "150",
       "Monthly-Goal": "140"