@cdc/chart 4.22.11 → 4.23.2

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@cdc/chart",
-  "version": "4.22.11",
+  "version": "4.23.2",
   "description": "React component for visualizing tabular data in various types of charts",
+  "moduleName": "CdcChart",
   "main": "dist/cdcchart",
+  "type": "module",
   "scripts": {
-    "start": "npx webpack serve --mode development -c ../../webpack.config.js",
-    "build": "npx webpack --mode production --env packageName=CdcChart --env folderName=chart -c ../../webpack.config.js",
+    "start": "vite --open",
+    "build": "vite build",
+    "preview": "vite preview",
+    "graph": "nx graph",
     "prepublishOnly": "lerna run --scope @cdc/chart build"
   },
   "repository": {
@@ -19,36 +23,39 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^1.1.4",
-    "@visx/axis": "^1.0.0",
-    "@visx/curve": "^1.0.0",
-    "@visx/gradient": "^1.0.0",
-    "@visx/group": "^1.0.0",
-    "@visx/legend": "^1.1.0",
-    "@visx/marker": "^1.1.0",
-    "@visx/mock-data": "^1.0.0",
-    "@visx/scale": "^1.0.0",
-    "@visx/shape": "^1.0.0",
-    "@visx/tooltip": "^1.1.0",
+    "@hello-pangea/dnd": "^16.2.0",
+    "@visx/axis": "^3.0.0",
+    "@visx/curve": "^3.0.0",
+    "@visx/gradient": "^3.0.0",
+    "@visx/group": "^3.0.0",
+    "@visx/legend": "^3.0.0",
+    "@visx/marker": "^3.0.0",
+    "@visx/mock-data": "^3.0.0",
+    "@visx/scale": "^3.0.0",
+    "@visx/shape": "^3.0.0",
+    "@visx/stats": "^3.0.0",
+    "@visx/text": "^3.0.0",
+    "@visx/tooltip": "^3.0.0",
     "chroma-js": "^2.1.2",
     "d3-array": "^2.8.0",
+    "d3-format": "^3.1.0",
     "d3-time-format": "^3.0.0",
-    "html-react-parser": "1.4.9",
+    "html-react-parser": "^3.0.8",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
     "react-spring": "^8.0.27",
     "react-table": "^7.5.0",
-    "react-tooltip": "4.2.8",
+    "react-tooltip": "5.8.2-beta.3",
     "use-debounce": "^6.0.1",
     "whatwg-fetch": "^3.6.2"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "resolutions": {
-    "@types/react": "17.x"
-  },
-  "gitHead": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
+  "gitHead": "cd4216f47b1c41bfbc1de3b704f70c52cc7293c2",
+  "devDependencies": {
+    "resize-observer-polyfill": "^1.5.1"
+  }
 }

package/src/{CdcChart.tsx → CdcChart.jsx}

@@ -1,19 +1,22 @@
 import React, { useState, useEffect, useCallback } from 'react'
 
 // IE11
-import 'core-js/stable'
 import ResizeObserver from 'resize-observer-polyfill'
 import 'whatwg-fetch'
+import * as d3 from 'd3-array'
 
 // External Libraries
 import { scaleOrdinal } from '@visx/scale'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
 import { timeParse, timeFormat } from 'd3-time-format'
+import { format } from 'd3-format'
 import Papa from 'papaparse'
 import parse from 'html-react-parser'
+import { Base64 } from 'js-base64'
+import 'react-tooltip/dist/react-tooltip.css'
 
 // Primary Components
-import Context from './context'
+import ConfigContext from './ConfigContext'
 import PieChart from './components/PieChart'
 import LinearChart from './components/LinearChart'
 
@@ -29,39 +32,42 @@ import DataTable from './components/DataTable'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import Loading from '@cdc/core/components/Loading'
+import Filters from './components/Filters'
+import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
-// helpers
+// Helpers
 import numberFromString from '@cdc/core/helpers/numberFromString'
 import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
+import isNumber from '@cdc/core/helpers/isNumber'
+import cleanData from '@cdc/core/helpers/cleanData'
 
 import './scss/main.scss'
 
-export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }: { configUrl?: string; config?: any; isEditor?: boolean; isDashboard?: boolean; setConfig?; setEditing?; hostname?; link?: any }) {
+export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
   const transform = new DataTransform()
 
-  interface keyable {
-    [key: string]: any
-  }
-
-  const [loading, setLoading] = useState<Boolean>(true)
-  const [colorScale, setColorScale] = useState<any>(null)
-  const [config, setConfig] = useState<keyable>({})
-  const [stateData, setStateData] = useState<Array<Object>>(config.data || [])
-  const [excludedData, setExcludedData] = useState<Array<Object>>()
-  const [filteredData, setFilteredData] = useState<Array<Object>>()
-  const [seriesHighlight, setSeriesHighlight] = useState<Array<String>>([])
-  const [currentViewport, setCurrentViewport] = useState<String>('lg')
-  const [dimensions, setDimensions] = useState<Array<Number>>([])
+  const [loading, setLoading] = useState(true)
+  const [colorScale, setColorScale] = useState(null)
+  const [config, setConfig] = useState({})
+  const [stateData, setStateData] = useState(config.data || [])
+  const [excludedData, setExcludedData] = useState()
+  const [filteredData, setFilteredData] = useState()
+  const [seriesHighlight, setSeriesHighlight] = useState([])
+  const [currentViewport, setCurrentViewport] = useState('lg')
+  const [dimensions, setDimensions] = useState([])
   const [externalFilters, setExternalFilters] = useState(null)
   const [container, setContainer] = useState()
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState([])
+  const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
   const legendGlyphSize = 15
   const legendGlyphSizeHalf = legendGlyphSize / 2
 
+  // Destructure items from config for more readable JSX
+  const { legend, title, description, visualizationType } = config
   const { barBorderClass, lineDatapointClass, contentClasses, innerContainerClasses, sparkLineStyles } = useDataVizClasses(config)
 
   const handleChartTabbing = config.showSidebar ? `#legend` : config?.title ? `#dataTableSection__${config.title.replace(/\s/g, '')}` : `#dataTableSection`
@@ -211,6 +217,71 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         : []
     }
 
+    if (newConfig.visualizationType === 'Box Plot' && newConfig.series) {
+      // stats
+      let allKeys = data.map(d => d[newConfig.xAxis.dataKey])
+      let allValues = data.map(d => Number(d[newConfig?.series[0]?.dataKey]))
+
+      const uniqueArray = function (arrArg) {
+        return arrArg.filter(function (elem, pos, arr) {
+          return arr.indexOf(elem) === pos
+        })
+      }
+
+      const groups = uniqueArray(allKeys)
+      let tableData = []
+      const plots = []
+
+      // group specific statistics
+      // prevent re-renders
+      groups.forEach((g, index) => {
+        if (!g) return
+        // filter data by group
+        let filteredData = data.filter(item => item[newConfig.xAxis.dataKey] === g)
+        let filteredDataValues = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
+        // let filteredDataValues = filteredData.map(item => Number(item[newConfig.yAxis.dataKey]))
+        const q1 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.firstQuartilePercentage) / 100)
+        const q3 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.thirdQuartilePercentage) / 100)
+        const iqr = q3 - q1
+        const lowerBounds = q1 - (q3 - q1) * 1.5
+        const upperBounds = q3 + (q3 - q1) * 1.5
+        const outliers = filteredDataValues.filter(v => v < lowerBounds || v > upperBounds)
+        let nonOutliers = filteredDataValues
+
+        nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
+
+        plots.push({
+          columnCategory: g,
+          columnMax: Number(q3 + 1.5 * iqr).toFixed(2),
+          columnThirdQuartile: q3.toFixed(2),
+          columnMedian: d3.median(filteredDataValues),
+          columnFirstQuartile: q1.toFixed(2),
+          columnMin: Number(q1 - 1.5 * iqr).toFixed(2),
+          columnCount: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
+          columnSd: d3.deviation(filteredDataValues).toFixed(2),
+          columnMean: d3.mean(filteredDataValues).toFixed(2),
+          columnIqr: iqr.toFixed(2),
+          columnOutliers: outliers,
+          values: filteredDataValues,
+          nonOutlierValues: nonOutliers
+        })
+      })
+
+      // make deep copy so we can remove some fields for data
+      // this appears to be the easiest option instead of running logic against the datatable cell...
+      tableData = JSON.parse(JSON.stringify(plots))
+      tableData.map(table => {
+        delete table.columnIqr
+        delete table.nonOutlierValues
+      })
+
+      // any other data we can add to boxplots
+      newConfig.boxplot['allValues'] = allValues
+      newConfig.boxplot['categories'] = groups
+      newConfig.boxplot.plots = plots
+      newConfig.boxplot.tableData = tableData
+    }
+
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
       newConfig.runtime.barSeriesKeys = []
       newConfig.runtime.lineSeriesKeys = []
@@ -261,6 +332,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     data.forEach(row => {
       const value = row[columnName]
+      //@ts-ignore
       if (value && false === values.includes(value)) {
         values.push(value)
       }
@@ -285,7 +357,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   // Observes changes to outermost container and changes viewport size in state
-  const resizeObserver: ResizeObserver = new ResizeObserver(entries => {
+  const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
       let newViewport = getViewport(width)
@@ -341,13 +413,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
    * Another useEffect listens to externalFilterChanges and updates the config.
    */
   useEffect(() => {
-    const handleFilterData = (e: CustomEvent) => {
+    const handleFilterData = e => {
       let tmp = []
       tmp.push(e.detail)
       setExternalFilters(tmp)
     }
 
-    subscribe('cove_filterData', (e: CustomEvent) => handleFilterData(e))
+    subscribe('cove_filterData', e => handleFilterData(e))
 
     return () => {
       unsubscribe('cove_filterData', handleFilterData)
@@ -380,6 +452,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Load data when configObj data changes
   if (configObj) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       loadConfig()
     }, [configObj.data])
@@ -456,7 +529,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
 
-  const parseDate = (dateString: string) => {
+  const parseDate = dateString => {
     let date = timeParse(config.runtime[section].dateParseFormat)(dateString)
     if (!date) {
       config.runtime.editorErrorMessage = `Error parsing date "${dateString}". Try reviewing your data and date parse settings in the X Axis section.`
@@ -466,32 +539,75 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
-  const formatDate = (date: Date) => {
+  const formatDate = date => {
     return timeFormat(config.runtime[section].dateDisplayFormat)(date)
   }
 
+  const DownloadButton = ({ data }, type = 'link') => {
+    const fileName = `${config.title.substring(0, 50)}.csv`
+
+    const csvData = Papa.unparse(data)
+
+    const saveBlob = () => {
+      if (typeof window.navigator.msSaveBlob === 'function') {
+        const dataBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
+        window.navigator.msSaveBlob(dataBlob, fileName)
+      }
+    }
+
+    if (type === 'download') {
+      return (
+        <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
+          Download Data (CSV)
+        </a>
+      )
+    } else {
+      return (
+        <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn no-border`}>
+          Download Data (CSV)
+        </a>
+      )
+    }
+  }
+
+  // function calculates the width of given text and its font-size
+  function getTextWidth(text, font) {
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
+
+    context.font = font || getComputedStyle(document.body).font
+
+    return Math.ceil(context.measureText(text).width)
+  }
+
   // Format numeric data based on settings in config
   const formatNumber = (num, axis) => {
-    // check if value contains comma and remove it. later will add comma below.
-    if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
     // if num is NaN return num
     if (isNaN(num) || !num) return num
 
+    // destructure dataFormat values
+    let {
+      dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, rightPrefix, rightSuffix }
+    } = config
+    let formatSuffix = format('.2s')
+
+    // check if value contains comma and remove it. later will add comma below.
+    if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
+
     let original = num
-    let prefix = config.dataFormat.prefix
     let stringFormattingOptions
 
     if (axis !== 'right') {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.commas ? true : false,
-        minimumFractionDigits: config.dataFormat.roundTo ? Number(config.dataFormat.roundTo) : 0,
-        maximumFractionDigits: config.dataFormat.roundTo ? Number(config.dataFormat.roundTo) : 0
+        minimumFractionDigits: roundTo ? Number(roundTo) : 0,
+        maximumFractionDigits: roundTo ? Number(roundTo) : 0
       }
     } else {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.rightCommas ? true : false,
-        minimumFractionDigits: config.dataFormat.rightRoundTo ? Number(config.dataFormat.rightRoundTo) : 0,
-        maximumFractionDigits: config.dataFormat.rightRoundTo ? Number(config.dataFormat.rightRoundTo) : 0
+        minimumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0,
+        maximumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0
       }
     }
 
@@ -510,109 +626,56 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         num = cutoff
       }
     }
-    num = num.toLocaleString('en-US', stringFormattingOptions)
 
+    // When we're formatting the left axis
+    // Use commas also updates bars and the data table
+    // We can't use commas when we're formatting the dataFormatted number
+    // Example: commas -> 12,000; abbreviated -> 12k (correct); abbreviated & commas -> 12 (incorrect)
+    if ((axis === 'left' && commas && abbreviated) || (axis === 'bottom' && commas && abbreviated)) {
+      num = num
+    } else {
+      num = num.toLocaleString('en-US', stringFormattingOptions)
+    }
     let result = ''
 
+    if (abbreviated && axis === 'left') {
+      num = formatSuffix(parseFloat(num)).replace('G', 'B')
+    }
+
+    if (abbreviated && axis === 'bottom') {
+      num = formatSuffix(parseFloat(num)).replace('G', 'B')
+    }
+
     if (prefix && axis !== 'right') {
       result += prefix
     }
 
-    if (config.dataFormat.rightPrefix && axis === 'right') {
-      result += config.dataFormat.rightPrefix
+    if (rightPrefix && axis === 'right') {
+      result += rightPrefix
     }
 
     result += num
 
-    if (config.dataFormat.suffix && axis !== 'right') {
-      result += config.dataFormat.suffix
+    if (suffix && axis !== 'right') {
+      result += suffix
     }
 
-    if (config.dataFormat.rightSuffix && axis === 'right') {
-      result += config.dataFormat.rightSuffix
+    if (rightSuffix && axis === 'right') {
+      result += rightSuffix
     }
 
     return String(result)
   }
 
-  // Destructure items from config for more readable JSX
-  const { legend, title, description, visualizationType } = config
-
   // Select appropriate chart type
   const chartComponents = {
     'Paired Bar': <LinearChart />,
     Bar: <LinearChart />,
     Line: <LinearChart />,
     Combo: <LinearChart />,
-    Pie: <PieChart />
-  }
-
-  const Filters = () => {
-    const changeFilterActive = (index, value) => {
-      let newFilters = config.filters
-
-      newFilters[index].active = value
-
-      setConfig({ ...config, filters: newFilters })
-
-      setFilteredData(filterData(newFilters, excludedData))
-    }
-
-    const announceChange = text => {}
-
-    let filterList = ''
-    if (config.filters) {
-      filterList = config.filters.map((singleFilter, index) => {
-        const values = []
-        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 })
-        }
-
-        if (!singleFilter.order || singleFilter.order === '') {
-          singleFilter.order = 'asc'
-        }
-
-        if (singleFilter.order === 'desc') {
-          singleFilter.values = singleFilter.values.sort(sortDesc)
-        }
-
-        if (singleFilter.order === 'asc') {
-          singleFilter.values = singleFilter.values.sort(sortAsc)
-        }
-
-        singleFilter.values.forEach((filterOption, index) => {
-          values.push(
-            <option key={index} value={filterOption}>
-              {filterOption}
-            </option>
-          )
-        })
-
-        return (
-          <div className='single-filter' key={index}>
-            <label htmlFor={`filter-${index}`}>{singleFilter.label}</label>
-            <select
-              id={`filter-${index}`}
-              className='filter-select'
-              data-index='0'
-              value={singleFilter.active}
-              onChange={val => {
-                changeFilterActive(index, val.target.value)
-                announceChange(`Filter ${singleFilter.label} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
-              }}
-            >
-              {values}
-            </select>
-          </div>
-        )
-      })
-    }
-
-    return <section className='filters-section'>{filterList}</section>
+    Pie: <PieChart />,
+    'Box Plot': <LinearChart />,
+    'Scatter Plot': <LinearChart />
   }
 
   const missingRequiredSections = () => {
@@ -656,11 +719,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {/* Filters */}
             {config.filters && !externalFilters && <Filters />}
             {/* Visualization */}
-            {config?.introText && <section className="introText">{parse(config.introText)}</section>}
+            {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
             <div
-              className={`chart-container ${config.legend.position==='bottom'? "bottom":""
-              }${config.legend.hide ? " legend-hidden" : "" 
-              }${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
+              style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
+              className={`chart-container  ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
             >
               {/* All charts except sparkline */}
               {config.visualizationType !== 'Spark Line' && chartComponents[visualizationType]}
@@ -686,18 +748,25 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {link && link}
             {/* Description */}
             {description && config.visualizationType !== 'Spark Line' && <div className='subtext'>{parse(description)}</div>}
-            {/* Data Table */}
 
+            {/* buttons */}
+            <CoveMediaControls.Section classes={['download-buttons']}>
+              {config.table.showDownloadImgButton && <CoveMediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
+              {config.table.showDownloadPdfButton && <CoveMediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
+            </CoveMediaControls.Section>
+
+            {/* Data Table */}
             {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && <DataTable />}
             {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
+            {/* show pdf or image button */}
           </div>
         )}
       </>
     )
   }
 
-  const getXAxisData = (d: any) => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
-  const getYAxisData = (d: any, seriesKey: string) => d[seriesKey]
+  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getYAxisData = (d, seriesKey) => d[seriesKey]
 
   const contextValues = {
     getXAxisData,
@@ -729,7 +798,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     legend,
     setSeriesHighlight,
     dynamicLegendItems,
-    setDynamicLegendItems
+    setDynamicLegendItems,
+    filterData,
+    isNumber,
+    cleanData,
+    imageId,
+    getTextWidth
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]
@@ -739,10 +813,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   isEditor && classes.push('isEditor')
 
   return (
-    <Context.Provider value={contextValues}>
-      <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart}>
+    <ConfigContext.Provider value={contextValues}>
+      <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart} data-download-id={imageId}>
         {body}
       </div>
-    </Context.Provider>
+    </ConfigContext.Provider>
   )
 }