@cdc/chart 4.24.4 → 4.24.5

package/index.html

@@ -46,7 +46,7 @@
   -->
 
     <!-- GENERIC CHART TYPES -->
-    <div class="react-container" data-config="/examples/test.json"></div>
+    <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/private/rvr.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
@@ -58,7 +58,7 @@
     <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
-    <div class="react-container" data-config=/examples/feature/regions/index.json></div>
+    <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
@@ -76,7 +76,7 @@
     <!-- BAR -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
-    <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div>
+    <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
@@ -117,7 +117,7 @@
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
-    <div class="react-container" data-config="/examples/region-issue.json"></div>
+    <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
     <!-- TESTS CUTOFF -->
@@ -135,7 +135,7 @@
 
     <!-- GENERIC CHART TYPES  -->
     <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
-    <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div>
+    <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
 
     <!-- HORIZONTAL BAR CHARTS -->
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
@@ -143,9 +143,9 @@
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
 
     <!-- VERTICAL BAR CHARTS -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
+    <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div>
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
-    <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div>
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
     <!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -60,7 +60,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "1843b4632140d582af6a87606374cbd4fe25ad5c",
+  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95",
   "devDependencies": {
     "@types/d3-sankey": "^0.12.4",
     "resize-observer-polyfill": "^1.5.1"

package/src/CdcChart.tsx

@@ -36,7 +36,6 @@ import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
 import { lineOptions } from './helpers/lineOptions'
 import { handleLineType } from './helpers/handleLineType'
 import { generateColorsArray } from './helpers/generateColorsArray'
-import { computeMarginBottom } from './helpers/computeMarginBottom'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -78,6 +77,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
+  const [brushConfig, setBrushConfig] = useState({
+    data: [],
+    isActive: false,
+    isBrushing: false
+  })
   type Config = typeof config
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
@@ -240,8 +244,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
-    newConfig.series.map(series => {
-      if (!series.tooltip) series.tooltip = true
+    newConfig.series.forEach(series => {
+      if (series.tooltip === undefined || series.tooltip === null) {
+        series.tooltip = true
+      }
       if (!series.axis) series.axis = 'Left'
     })
 
@@ -749,7 +755,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   // function calculates the width of given text and its font-size
-  function getTextWidth(text, font) {
+  function getTextWidth(text: string, font: string): number | undefined {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
     if (!context) {
@@ -1133,11 +1139,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
               {/* Visualization */}
               {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
-
-              <div style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }} className={getChartWrapperClasses().join(' ')}>
+              <div className={getChartWrapperClasses().join(' ')}>
                 {/* All charts except sparkline */}
                 {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
-
                 {/* Sparkline */}
                 {config.visualizationType === 'Spark Line' && (
                   <>
@@ -1163,22 +1167,19 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               </div>
               {/* Link */}
               {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
-
               {/* Description */}
               {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
-
               {/* buttons */}
               <MediaControls.Section classes={['download-buttons']}>
                 {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
                 {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
               </MediaControls.Section>
-
               {/* Data Table */}
               {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
                 <DataTable
                   config={config}
                   rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
-                  runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : transform.applySuppression(filteredData || excludedData, config.suppressedData)}
+                  runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : filteredData || excludedData}
                   expandDataTable={config.table.expanded}
                   columns={config.columns}
                   displayDataAsText={displayDataAsText}
@@ -1207,9 +1208,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const capitalize = str => {
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
+
   const contextValues = {
+    brushConfig,
+    setBrushConfig,
     capitalize,
-    computeMarginBottom,
     getXAxisData,
     getYAxisData,
     config,
@@ -1254,7 +1257,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setSharedFilter,
     setSharedFilterValue,
     dashboardConfig,
-    debugSvg: isDebug
+    debugSvg: isDebug,
+    clean
   }
 
   return (

package/src/_stories/Chart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import SuppressedConfig from './_mock/bar-chart-suppressed.json'
 
 import Chart from '../CdcChart'
 
@@ -185,4 +186,11 @@ export const Lollipop: Story = {
   }
 }
 
+export const Suppression: Story = {
+  args: {
+    config: SuppressedConfig,
+    isEditor: false
+  }
+}
+
 export default meta

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

@@ -0,0 +1,474 @@
+{
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "Combo Bar-Line Chart",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-purple",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "showDownloadButton": false
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [
+    {
+      "type": "suppression",
+      "seriesKey": "",
+      "label": "Suppressed",
+      "column": "Data 2",
+      "value": "ABC",
+      "style": "",
+      "displayTooltip": true,
+      "displayLegend": true,
+      "displayTable": true,
+      "symbol": "Dagger",
+      "iconCode": "†",
+      "lineCode": ""
+    }
+  ],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "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"
+    }
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 750
+  },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "showSuppressedSymbol": true,
+    "showSuppressedLine": true,
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "dateParseFormat": "%d/%m/%Y",
+    "dateDisplayFormat": "%d/%m/%Y",
+    "tickWidthMax": 91,
+    "padding": 6
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": false,
+    "dateDisplayFormat": "",
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "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,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "seriesHighlight": [],
+    "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": []
+  },
+  "palette": "qualitative-soft",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": true,
+  "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",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
+  },
+  "forestPlot": {
+    "startAt": 0,
+    "colors": {
+      "line": "",
+      "shape": ""
+    },
+    "lineOfNoEffect": {
+      "show": true
+    },
+    "type": "",
+    "pooledResult": {
+      "diamondHeight": 5,
+      "column": ""
+    },
+    "estimateField": "",
+    "estimateRadius": "",
+    "shape": "",
+    "rowHeight": 20,
+    "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,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": "",
+    "hideDateCategoryCol": false
+  },
+  "area": {
+    "isStacked": false
+  },
+  "sankey": {
+    "title": {
+      "defaultColor": "black"
+    },
+    "iterations": 1,
+    "rxValue": 0.9,
+    "overallSize": {
+      "width": 900,
+      "height": 700
+    },
+    "margin": {
+      "margin_y": 25,
+      "margin_x": 0
+    },
+    "nodeSize": {
+      "nodeWidth": 26,
+      "nodeHeight": 40
+    },
+    "nodePadding": 55,
+    "nodeFontColor": "black",
+    "nodeColor": {
+      "default": "#ff8500",
+      "inactive": "#808080"
+    },
+    "linkColor": {
+      "default": "#ffc900",
+      "inactive": "#D3D3D3"
+    },
+    "opacity": {
+      "nodeOpacityDefault": 1,
+      "nodeOpacityInactive": 0.1,
+      "LinkOpacityDefault": 1,
+      "LinkOpacityInactive": 0.1
+    },
+    "storyNodeFontColor": "#006778",
+    "storyNodeText": [],
+    "nodeValueStyle": {
+      "textBefore": "(",
+      "textAfter": ")"
+    },
+    "data": []
+  },
+  "suppressedData": [],
+  "height": "332",
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "$1,000",
+      "Data 2": "ABC",
+      "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": "",
+      "Data 3": "120",
+      "Data 4": "150",
+      "Monthly-Goal": "140"
+    }
+  ],
+  "visualizationType": "Bar",
+  "filters": [],
+  "validated": 4.23,
+  "dynamicMarginTop": 0,
+  "version": "4.24.4"
+}

package/src/components/AreaChart/components/AreaChart.jsx

@@ -14,8 +14,8 @@ import { bisector } from 'd3-array'
 const AreaChart = props => {
   const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, children } = props
   // import data from context
-  let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
-  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+  let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData, brushConfig } = useContext(ConfigContext)
+  const data = config.brush.active && brushConfig.data?.length ? brushConfig.data : transformedData
 
   if (!data) return