@cdc/chart 4.23.11 → 4.24.1

package/index.html

@@ -34,12 +34,9 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <div class="react-container" data-config="/examples/private/highlight.json"></div>
-  <div class="react-container" data-config="/examples/private/aggregate.json"></div>
-  <!-- <div class="react-container" data-config="/examples/private/missing-color.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/combo.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/legend-highlights/highlights.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/prod-line-config.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/chart-t.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
   <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
@@ -50,6 +47,7 @@
   <!-- <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=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> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
@@ -125,6 +123,8 @@
 
   <!-- 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-preliminary.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> -->
@@ -134,7 +134,7 @@
   <!-- 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/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.23.11",
+  "version": "4.24.1",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -59,7 +59,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ecad213667a3cb96c921eaddba43a31c84caaa08",
+  "gitHead": "a352a3f74f4b681191e3244061dbb3621f36eec3",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/CdcChart.tsx

@@ -12,19 +12,27 @@ import { timeParse, timeFormat } from 'd3-time-format'
 import Papa from 'papaparse'
 import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
-import chroma from 'chroma-js'
 
 // Primary Components
 import ConfigContext from './ConfigContext'
-import PieChart from './components/PieChart'
+import PieChart from './components/PieChart/PieChart'
 import LinearChart from './components/LinearChart'
 
 import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 
-import SparkLine from './components/SparkLine'
+import SparkLine from './components/Sparkline'
 import Legend from './components/Legend'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
+import { abbreviateNumber } from './helpers/abbreviateNumber'
+import { getQuartiles } from './helpers/getQuartiles'
+import { sortAsc, sortDesc } from './helpers/sort'
+import { filterData } from './helpers/filterData'
+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'
@@ -45,13 +53,6 @@ import DataTable from '@cdc/core/components/DataTable'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import Title from '@cdc/core/components/ui/Title'
 
-const generateColorsArray = (color = '#000000', special = false) => {
-  let colorObj = chroma(color)
-  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
-
-  return [color, hoverColor, colorObj.darken(0.3).hex()]
-}
-
 export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link, setSharedFilter, setSharedFilterValue, dashboardConfig }) {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
@@ -88,34 +89,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const handleChartTabbing = config.showSidebar ? `#legend` : config?.title ? `#dataTableSection__${config.title.replace(/\s/g, '')}` : `#dataTableSection`
 
-  const sortAsc = (a, b) => {
-    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-  }
-
-  const sortDesc = (a, b) => {
-    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-  }
-
-  const handleChartAriaLabels = (state, testing = false) => {
-    if (testing) console.log(`handleChartAriaLabels Testing On:`, state) // eslint-disable-line
-    try {
-      if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
-      let ariaLabel = ''
-
-      if (state.visualizationType) {
-        ariaLabel += `${state.visualizationType} chart`
-      }
-
-      if (state.title && state.visualizationType) {
-        ariaLabel += ` with the title: ${state.title}`
-      }
-
-      return ariaLabel
-    } catch (e) {
-      console.error('COVE: ', e.message) // eslint-disable-line
-    }
-  }
-
   const reloadURLData = async () => {
     if (config.dataUrl) {
       const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl, window.location.origin)
@@ -143,7 +116,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let data: any[] = []
 
       try {
-        const ext = getFileExtension(dataUrl.pathname)
+        const ext = getFileExtension(dataUrl.href)
         if ('csv' === ext) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
@@ -182,44 +155,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
-  const handleLineType = lineType => {
-    switch (lineType) {
-      case 'dashed-sm':
-        return '5 5'
-      case 'Dashed Small':
-        return '5 5'
-      case 'dashed-md':
-        return '10 5'
-      case 'Dashed Medium':
-        return '10 5'
-      case 'dashed-lg':
-        return '15 5'
-      case 'Dashed Large':
-        return '15 5'
-      default:
-        return 0
-    }
-  }
-
-  const lineOptions = [
-    {
-      value: 'Dashed Small',
-      key: 'dashed-sm'
-    },
-    {
-      value: 'Dashed Medium',
-      key: 'dashed-md'
-    },
-    {
-      value: 'Dashed Large',
-      key: 'dashed-lg'
-    },
-    {
-      value: 'Solid Line',
-      key: 'solid-line'
-    }
-  ]
-
   const loadConfig = async () => {
     let response = configObj || (await (await fetch(configUrl)).json())
 
@@ -392,37 +327,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let tableData: any[] = []
       const plots: any[] = []
 
-      /**
-       * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
-       *
-       * @param {Array} arr - The array of integers or decimals.
-       * @returns {Object} An object containing the q1 and q3 values.
-       */
-      const getQuartiles = arr => {
-        arr.sort((a, b) => a - b)
-
-        // Calculate the index of the median value of the array
-        const medianIndex = Math.floor(arr.length / 2)
-
-        // Check if the length of the array is even or odd
-        const isEvenLength = arr.length % 2 === 0
-
-        // Split the array into two subarrays based on the median index
-        const q1Array = isEvenLength ? arr.slice(0, medianIndex) : arr.slice(0, medianIndex + 1)
-        const q3Array = isEvenLength ? arr.slice(medianIndex) : arr.slice(medianIndex + 1)
-
-        // Calculate the median of the first subarray to get the q1 value
-        const q1Index = Math.floor(q1Array.length / 2)
-        const q1 = isEvenLength ? (q1Array[q1Index - 1] + q1Array[q1Index]) / 2 : q1Array[q1Index]
-
-        // Calculate the median of the second subarray to get the q3 value
-        const q3Index = Math.floor(q3Array.length / 2)
-        const q3 = isEvenLength ? (q3Array[q3Index - 1] + q3Array[q3Index]) / 2 : q3Array[q3Index]
-
-        // Return an object containing the q1 and q3 values
-        return { q1, q3 }
-      }
-
       // group specific statistics
       // prevent re-renders
       if (!groups) return
@@ -547,11 +451,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
 
-      if (newConfig.visualizationType === 'Forest Plot') {
-        newConfig.runtime.xAxis.type = newConfig.forestPlot.type
-        newConfig.runtime.xAxis.tickRotation = newConfig.xAxis.tickRotation
-      }
-      newConfig.runtime.horizontal = true
+      newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
     } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.xAxis
@@ -569,25 +469,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setConfig(newConfig)
   }
 
-  const filterData = (filters, data) => {
-    let filteredData: any[] = []
-
-    data.forEach(row => {
-      let add = true
-      filters
-        .filter(filter => filter.type !== 'url')
-        .forEach(filter => {
-          if (row[filter.columnName] != filter.active) {
-            add = false
-          }
-        })
-
-      if (add) filteredData.push(row)
-    })
-
-    return filteredData
-  }
-
   // Gets filter values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
     const values: any[] = []
@@ -845,24 +726,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return Math.ceil(context.measureText(text).width)
   }
 
-  const abbreviateNumber = num => {
-    let unit = ''
-    let absNum = Math.abs(num)
-
-    if (absNum >= 1e9) {
-      unit = 'B'
-      num = num / 1e9
-    } else if (absNum >= 1e6) {
-      unit = 'M'
-      num = num / 1e6
-    } else if (absNum >= 1e3) {
-      unit = 'K'
-      num = num / 1e3
-    }
-
-    return num + unit
-  }
-
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
   // - use only for old horizontal data - newer formatNumber is in helper/formatNumber
   // TODO: we should combine various formatNumber functions across this project.
@@ -914,11 +777,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     }
 
+    const resolveBottomTickRounding = () => {
+      if (config.forestPlot.type === 'Logarithmic' && !bottomRoundTo) return 2
+      if (Number(bottomRoundTo)) return Number(bottomRoundTo)
+      return 0
+    }
+
     if (axis === 'bottom') {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.bottomCommas ? true : false,
-        minimumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0,
-        maximumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0
+        minimumFractionDigits: resolveBottomTickRounding(),
+        maximumFractionDigits: resolveBottomTickRounding()
       }
     }
 
@@ -1136,61 +1005,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return key
   }
 
-  const computeMarginBottom = (config: Config): string => {
-    const isLegendBottom = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
-    const isHorizontal = config.orientation === 'horizontal'
-    const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
-    const isBrush = config.brush.active
-    const offset = 20
-    const brushHeight = config.brush.height
-    let bottom = 0
-    if (!isLegendBottom && isHorizontal && !config.yAxis.label) {
-      bottom = Number(config.xAxis.labelOffset)
-    }
-    if (!isLegendBottom && isHorizontal && config.yAxis.label && !config.isResponsiveTicks) {
-      bottom = Number(config.runtime.xAxis.size) + Number(config.xAxis.labelOffset)
-    }
-    if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
-      bottom = config.dynamicMarginTop + offset
-    }
-    if (!isLegendBottom && isHorizontal && !config.yAxis.label && config.isResponsiveTicks) {
-      bottom = config.dynamicMarginTop ? config.dynamicMarginTop - offset : Number(config.xAxis.labelOffset) - offset
-    }
-    if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
-      bottom = config.dynamicMarginTop ? config.dynamicMarginTop + offset : Number(config.xAxis.labelOffset)
-    }
-
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.tickWidthMax + -config.xAxis.size + config.xAxis.labelOffset + offset : config.xAxis.tickWidthMax + offset + -config.xAxis.size + config.xAxis.labelOffset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
-      bottom = isBrush ? config.xAxis.tickWidthMax + brushHeight + offset + -config.xAxis.size : 0
-    }
-
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && !tickRotation && !config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset + offset : -config.xAxis.size + config.xAxis.labelOffset + offset
-    }
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size + offset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size - offset
-    }
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + 25 : config.xAxis.labelOffset + -config.xAxis.size + offset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = -config.xAxis.size + offset + config.xAxis.labelOffset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset : 0
-    }
-
-    return `${bottom}px`
-  }
-
   // Prevent render if loading
   let body = <Loading />
 
@@ -1214,7 +1028,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
             {/* Visualization */}
             {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
-            <div style={{ marginBottom: computeMarginBottom(config) }} className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}>
+            <div
+              style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }}
+              className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')} ${isDebug ? 'debug' : ''}`}
+            >
               {/* All charts except sparkline */}
               {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
 
@@ -1236,7 +1053,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                   )}
                 </>
               )}
-              {!config.legend.hide && config.visualizationType !== 'Spark Line' && <Legend />}
+              {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Forest Plot' && <Legend />}
             </div>
             {/* Link */}
             {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
@@ -1286,6 +1103,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const contextValues = {
     capitalize,
+    computeMarginBottom,
     getXAxisData,
     getYAxisData,
     config,
@@ -1328,7 +1146,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     isDebug,
     setSharedFilter,
     setSharedFilterValue,
-    dashboardConfig
+    dashboardConfig,
+    debugSvg: isDebug
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]

package/src/ConfigContext.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+import { ChartContext } from './types/ChartContext'
+
+const ConfigContext = createContext({} as ChartContext)
+
+export default ConfigContext

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/_mock/pie_config.json

@@ -0,0 +1,191 @@
+{
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "ARDI",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "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
+  },
+  "suppressedData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "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": [],
+    "dataKey": "males"
+  },
+  "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": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "dataKey": "cause_type"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "indexLabel": "",
+    "download": false,
+    "showVertical": true,
+    "show": true,
+    "customTableConfig": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "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,
+    "highlightOnHover": false
+  },
+  "brush": {
+    "height": 25,
+    "data": [],
+    "active": false
+  },
+  "exclusions": {
+    "active": true,
+    "keys": ["all_causes"]
+  },
+  "palette": "qualitative-soft",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false,
+    "roundTo": 1
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "males",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false
+  },
+  "dashboard": {
+    "theme": "theme-blue",
+    "title": "ARDI"
+  },
+  "animateReplay": true,
+  "aspectRatio": 1,
+  "validated": 4.23,
+  "visualizationType": "Pie",
+  "pieType": "Donut",
+  "filters": [
+    {
+      "values": ["age", "sex"],
+      "active": "age",
+      "filterStyle": "dropdown",
+      "order": "asc",
+      "columnName": "data_group"
+    }
+  ]
+}