@cdc/chart 4.22.10 → 4.23.1

package/src/components/BoxPlot.js

@@ -0,0 +1,92 @@
+import React, { useContext, useEffect } from 'react'
+import { BoxPlot } from '@visx/stats'
+import { Group } from '@visx/group'
+import { scaleBand, scaleLinear } from '@visx/scale'
+import Context from '../context'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import ReactTooltip from 'react-tooltip'
+
+const CoveBoxPlot = ({ xScale, yScale }) => {
+  const { transformedData: data, config } = useContext(Context)
+
+  const {
+    boxplot: { columnFirstQuartile, columnThirdQuartile, columnMax, columnMin, columnMedian, columnOutliers },
+    width,
+    height
+  } = config
+
+  const yMax = config.height - config.runtime.xAxis.size
+  const xMax = config.width - config.runtime.yAxis.size - config.yAxis.rightAxisSize
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(20, boxWidth)
+  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
+
+  // tooltips
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  const handleTooltip = d => {
+    return `
+      <strong>${d.columnCategory}</strong></br>
+      Q1: ${d.columnFirstQuartile}<br/>
+      Q3: ${d.columnThirdQuartile}<br/>
+      IQR: ${d.columnIqr}<br/>
+      Median: ${d.columnMedian}
+    `
+  }
+  return (
+    <ErrorBoundary component='BoxPlot'>
+      <Group className='boxplot' key='boxplot-wrapper'>
+        {config.boxplot.map((d, i) => {
+          const offset = boxWidth - constrainedWidth
+          return (
+            <BoxPlot
+              key={`box-plot-${i}`}
+              min={d.columnMin}
+              max={d.columnMax}
+              left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+              firstQuartile={d.columnFirstQuartile}
+              thirdQuartile={d.columnThirdQuartile}
+              median={d.columnMedian}
+              boxWidth={constrainedWidth}
+              fill={color_0}
+              fillOpacity={0.5}
+              stroke='black'
+              strokeWidth={1}
+              valueScale={yScale}
+              outliers={d.columnOutliers}
+              outlierProps={{
+                style: {
+                  fill: `${color_0}`,
+                  opacity: 1
+                }
+              }}
+              medianProps={{
+                style: {
+                  stroke: 'black'
+                }
+              }}
+              boxProps={{
+                style: {
+                  stroke: 'black'
+                },
+                'data-tip': 'cool'
+              }}
+              maxProps={{
+                style: {
+                  stroke: 'black'
+                }
+              }}
+              container
+              containerProps={{
+                'data-tip': handleTooltip(d),
+                'data-for': tooltip_id
+              }}
+            />
+          )
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default CoveBoxPlot

package/src/components/DataTable.tsx

@@ -1,244 +1,229 @@
-import React, {
-  useContext,
-  useEffect,
-  useState,
-  useMemo,
-  memo, 
-  Fragment} from 'react';
-import {
-  useTable,
-  useSortBy,
-  useResizeColumns,
-  useBlockLayout
-} from 'react-table';
-import Papa from 'papaparse';
-import { Base64 } from 'js-base64';
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
-import LegendCircle from '@cdc/core/components/LegendCircle';
-
-import Context from '../context';
+import React, { useContext, useEffect, useState, useMemo, memo, Fragment } from 'react'
+import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
+import Papa from 'papaparse'
+import { Base64 } from 'js-base64'
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import LegendCircle from '@cdc/core/components/LegendCircle'
+
+import Context from '../context'
+
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
 
 export default function DataTable() {
-  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber:numberFormatter, colorPalettes } = useContext<any>(Context);
+  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, imageId } = useContext<any>(Context)
 
-  const legendGlyphSize = 15;
-  const legendGlyphSizeHalf = legendGlyphSize / 2;
-  const section = config.orientation ==='horizontal' ? 'yAxis' :'xAxis';
-  const [tableExpanded, setTableExpanded] = useState<boolean>(config.table.expanded);
-  const [accessibilityLabel, setAccessibilityLabel] = useState('');
+  // Debugging.
+  // if (config.visualizationType === 'Box Plot') return null
 
-  const DownloadButton = ({ data }: any) => {
-    const fileName = `${config.title.substring(0, 50)}.csv`;
+  const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
+  const [tableExpanded, setTableExpanded] = useState<boolean>(config.table.expanded)
+  const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
-    const csvData = Papa.unparse(data);
+  const DownloadButton = ({ data }: any, type) => {
+    const fileName = `${config.title.substring(0, 50)}.csv`
+
+    const csvData = Papa.unparse(data)
 
     const saveBlob = () => {
       //@ts-ignore
       if (typeof window.navigator.msSaveBlob === 'function') {
-        const dataBlob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
+        const dataBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
         //@ts-ignore
-        window.navigator.msSaveBlob(dataBlob, fileName);
+        window.navigator.msSaveBlob(dataBlob, fileName)
       }
     }
 
-    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>
-    )
-  };
-
-  // Creates columns structure for the table
-  const tableColumns = useMemo(() => {
-    const newTableColumns = config.visualizationType === 'Pie' ? [] : [{
-      Header: '',
-      Cell: ({ row }) => {
-        const seriesLabel = config.runtime.seriesLabels ? config.runtime.seriesLabels[row.original] : row.original;
+    switch (type) {
+      case 'download':
         return (
-          <Fragment>
-            {config.visualizationType !== 'Pie' && 
-              <LegendCircle 
-                fill={ 
-                  // non dynamic leged
-                  !config.legend.dynamicLegend ? colorScale(seriesLabel) 
-                  // dynamic legend
-                  : config.legend.dynamicLegend ? colorPalettes[config.palette][row.index] 
-                  // fallback
-                  : '#000'} />}
-            <span>{seriesLabel}</span>
-          </Fragment>
+          <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>
         )
-      },
-      id: 'series-label'
-    }];
-
-    data.forEach((d) => {
-        const newCol = {
-          Header: config.runtime[section].type === 'date' ? formatDate(parseDate(d[config.runtime.originalXAxis.dataKey])) : d[config.runtime.originalXAxis.dataKey],
-          Cell: ({ row }) => {
-            return (
-              <>
-                {numberFormatter(d[row.original])}
-              </>
-            );
-          },
-          id: d[config.runtime.originalXAxis.dataKey],
-          canSort: true
-        };
-
-        newTableColumns.push(newCol);
-    });
+      default:
+        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={`no-border`}>
+            Download Data (CSV)
+          </a>
+        )
+    }
+  }
 
-    return newTableColumns;
-  }, [config,colorScale]);
+  // Creates columns structure for the table
+  const tableColumns = useMemo(() => {
+    const newTableColumns =
+      config.visualizationType === 'Pie'
+        ? []
+        : [
+            {
+              Header: '',
+              Cell: ({ row }) => {
+                const seriesLabel = config.runtime.seriesLabels ? config.runtime.seriesLabels[row.original] : row.original
+                return (
+                  <Fragment>
+                    {config.visualizationType !== 'Pie' && (
+                      <LegendCircle
+                        fill={
+                          // non dynamic leged
+                          !config.legend.dynamicLegend
+                            ? colorScale(seriesLabel)
+                            : // dynamic legend
+                            config.legend.dynamicLegend
+                            ? colorPalettes[config.palette][row.index]
+                            : // fallback
+                              '#000'
+                        }
+                      />
+                    )}
+                    <span>{seriesLabel}</span>
+                  </Fragment>
+                )
+              },
+              id: 'series-label'
+            }
+          ]
+
+    data.forEach((d, index) => {
+      const newCol = {
+        Header: config.runtime[section].type === 'date' ? formatDate(parseDate(d[config.runtime.originalXAxis.dataKey])) : d[config.runtime.originalXAxis.dataKey],
+        Cell: ({ row }) => {
+          return <>{numberFormatter(d[row.original])}</>
+        },
+        id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
+        canSort: true
+      }
 
+      newTableColumns.push(newCol)
+    })
 
+    return newTableColumns
+  }, [config, colorScale])
 
-  const tableData = useMemo(
- () => config.visualizationType === 'Pie' ? [config.yAxis.dataKey] : config.runtime.seriesKeys,
-    [config.runtime.seriesKeys]
-  );
+  const tableData = useMemo(() => (config.visualizationType === 'Pie' ? [config.yAxis.dataKey] : config.runtime.seriesKeys), [config.runtime.seriesKeys])
 
   // Change accessibility label depending on expanded status
   useEffect(() => {
-    const expandedLabel = 'Accessible data table.';
-    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.';
+    const expandedLabel = 'Accessible data table.'
+    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
 
     if (tableExpanded === true && accessibilityLabel !== expandedLabel) {
-      setAccessibilityLabel(expandedLabel);
+      setAccessibilityLabel(expandedLabel)
     }
 
     if (tableExpanded === false && accessibilityLabel !== collapsedLabel) {
-      setAccessibilityLabel(collapsedLabel);
+      setAccessibilityLabel(collapsedLabel)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableExpanded]);
+  }, [tableExpanded])
 
   const defaultColumn = useMemo(
     () => ({
       minWidth: 150,
       width: 200,
-      maxWidth: 400,
+      maxWidth: 400
     }),
     []
-  );
-
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-  } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns);
+  )
+
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns)
   return (
-    <ErrorBoundary component="DataTable">
-      <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`}  className={`data-table-container`} aria-label={accessibilityLabel}>
-          <div
-            role="button"
-            className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-            tabIndex={0}
-            onClick={() => { setTableExpanded(!tableExpanded); }}
-            onKeyDown={(e) => { if (e.keyCode === 13) { setTableExpanded(!tableExpanded); } }}
-          >
-            {config.table.label}
-          </div>
-          <div 
-           className="table-container"
-           hidden={!tableExpanded} 
-           style={ { maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' } } 
-           >
-            <table  
-              className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}  
-              {...getTableProps()}
-              aria-rowcount={ config?.series?.length ? config?.series?.length : '-1' }
-              >
-              <caption className='cdcdataviz-sr-only'>{config.table.caption ?  config.table.caption : "" }</caption>
-              <caption className="visually-hidden">{config.table.label}</caption>
-              <thead>
-                {headerGroups.map((headerGroup,index) => (
-                  <tr {...headerGroup.getHeaderGroupProps()} key={`headerGroups--${index}`}>
-                    {headerGroup.headers.map((column, index) => (
-                      <th 
-                        tabIndex="0" 
-                        title={column.Header} 
-                        key={`trth--${index}`}
-                        role="columnheader"
-                        scope="col"
-                        {...column.getHeaderProps(column.getSortByToggleProps())} 
-                        className={column.isSorted ? column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc' : 'sort'} 
-                        {...(column.isSorted ? column.isSortedDesc ? { 'aria-sort': 'descending' } : { 'aria-sort': 'ascending' } : null)}
-                        >
-                        {index === 0
-                          ? config.table.indexLabel
-                            ? config.table.indexLabel : column.render('Header')
-                          : column.render('Header')
-                        }
-                        <button>
-                          <span className="cdcdataviz-sr-only">{`Sort by ${typeof column.render('Header') === 'string' ? column.render('Header').toLowerCase() : column.render('Header') } in ${ column.isSorted ? column.isSortedDesc ? 'descending' : 'ascending' : 'no'} `} order</span>
-                        </button>
-                        <div {...column.getResizerProps()} className="resizer" />
-                      </th>
-                    ))}
+    <ErrorBoundary component='DataTable'>
+      <CoveMediaControls.Section classes={['download-links']}>
+        <CoveMediaControls.Link config={config} />
+        {config.table.download && <DownloadButton data={rawData} type='link' />}
+      </CoveMediaControls.Section>
+
+      <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
+        <div
+          role='button'
+          className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+          tabIndex={0}
+          onClick={() => {
+            setTableExpanded(!tableExpanded)
+          }}
+          onKeyDown={e => {
+            if (e.keyCode === 13) {
+              setTableExpanded(!tableExpanded)
+            }
+          }}
+        >
+          {config.table.label}
+        </div>
+        <div className='table-container' hidden={!tableExpanded} style={{ maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
+          <table className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} {...getTableProps()} aria-rowcount={config?.series?.length ? config?.series?.length : '-1'}>
+            <caption className='cdcdataviz-sr-only'>{config.table.caption ? config.table.caption : ''}</caption>
+            <caption className='visually-hidden'>{config.table.label}</caption>
+            <thead>
+              {headerGroups.map((headerGroup, index) => (
+                <tr {...headerGroup.getHeaderGroupProps()} key={`headerGroups--${index}`}>
+                  {headerGroup.headers.map((column, index) => (
+                    <th
+                      tabIndex='0'
+                      title={column.Header}
+                      key={`trth--${index}`}
+                      role='columnheader'
+                      scope='col'
+                      {...column.getHeaderProps(column.getSortByToggleProps())}
+                      className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : 'sort'}
+                      {...(column.isSorted ? (column.isSortedDesc ? { 'aria-sort': 'descending' } : { 'aria-sort': 'ascending' }) : null)}
+                    >
+                      {index === 0 ? (config.table.indexLabel ? config.table.indexLabel : column.render('Header')) : column.render('Header')}
+                      <button>
+                        <span className='cdcdataviz-sr-only'>{`Sort by ${typeof column.render('Header') === 'string' ? column.render('Header').toLowerCase() : column.render('Header')} in ${column.isSorted ? (column.isSortedDesc ? 'descending' : 'ascending') : 'no'} `} order</span>
+                      </button>
+                      <div {...column.getResizerProps()} className='resizer' />
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody {...getTableBodyProps()}>
+              {rows.map((row, index) => {
+                prepareRow(row)
+                return (
+                  <tr {...row.getRowProps()} key={`tbody__tr-${index}`}>
+                    {row.cells.map((cell, index) => {
+                      return (
+                        <td tabIndex='0' {...cell.getCellProps()} key={`tbody__tr__td-${index}`} role='gridcell'>
+                          {cell.render('Cell')}
+                        </td>
+                      )
+                    })}
                   </tr>
-                ))}
+                )
+              })}
+            </tbody>
+          </table>
+          {config.regions && config.regions.length > 0 ? (
+            <table className='region-table data-table'>
+              <caption className='visually-hidden'>Table of the highlighted regions in the visualization</caption>
+              <thead>
+                <tr>
+                  <th>Region Name</th>
+                  <th>Start Date</th>
+                  <th>End Date</th>
+                </tr>
               </thead>
-              <tbody {...getTableBodyProps()}>
-                {rows.map((row, index) => {
-                  prepareRow(row);
+              <tbody>
+                {config.regions.map((region, index) => {
+                  if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
+
                   return (
-                    <tr {...row.getRowProps()} key={`tbody__tr-${index}`}>
-                      {row.cells.map((cell, index) => {
-                        return (
-                          <td 
-                            tabIndex="0" 
-                            {...cell.getCellProps()} 
-                            key={`tbody__tr__td-${index}`} 
-                            role="gridcell">
-                            { cell.render('Cell') }
-                          </td>
-                        )
-                      }
-                      )}
+                    <tr key={`row-${region.label}--${index}`}>
+                      <td>{region.label}</td>
+                      <td>{formatDate(parseDate(region.from))}</td>
+                      <td>{formatDate(parseDate(region.to))}</td>
                     </tr>
-                  );
+                  )
                 })}
               </tbody>
             </table>
-            {config.regions && config.regions.length > 0 ? (
-              <table className="region-table data-table">
-                <caption className="visually-hidden">Table of the highlighted regions in the visualization</caption>
-                <thead>
-                  <tr>
-                    <th>Region Name</th>
-                    <th>Start Date</th>
-                    <th>End Date</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {config.regions.map((region,index) => {
-                    if(!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
-
-                    return (
-                      <tr key={`row-${region.label}--${index}`}>
-                        <td>{region.label}</td>
-                        <td>{formatDate(parseDate(region.from))}</td>
-                        <td>{formatDate(parseDate(region.to))}</td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
-            ) : ''}
-          </div>
-          {config.table.download && <DownloadButton data={rawData} />}
+          ) : (
+            ''
+          )}
+        </div>
       </section>
     </ErrorBoundary>
-  );
+  )
 }