@cdc/chart 1.3.4 → 4.22.10

package/src/CdcChart.tsx

@@ -1,42 +1,47 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
 // IE11
-import 'core-js/stable'
-import ResizeObserver from 'resize-observer-polyfill'
-import 'whatwg-fetch'
+import 'core-js/stable';
+import ResizeObserver from 'resize-observer-polyfill';
+import 'whatwg-fetch';
 
-import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
+// External Libraries
 import { scaleOrdinal } from '@visx/scale';
 import ParentSize from '@visx/responsive/lib/components/ParentSize';
-
 import { timeParse, timeFormat } from 'd3-time-format';
 import Papa from 'papaparse';
 import parse from 'html-react-parser';
 
-import Loading from '@cdc/core/components/Loading';
-import DataTransform from '@cdc/core/components/DataTransform';
-import getViewport from '@cdc/core/helpers/getViewport';
 
+// Primary Components
+import Context from './context';
 import PieChart from './components/PieChart';
 import LinearChart from './components/LinearChart';
-import DataTable from './components/DataTable';
-import Context from './context';
-import defaults from './data/initial-state';
 
-import EditorPanel from './components/EditorPanel';
-import numberFromString from '@cdc/core/helpers/numberFromString'
-import LegendCircle from '@cdc/core/components/LegendCircle';
 import {colorPalettesChart as colorPalettes} from '../../core/data/colorPalettes';
 
 import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events';
 
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses';
+
 import SparkLine from './components/SparkLine';
+import Legend from './components/Legend';
+import DataTable from './components/DataTable';
+import defaults from './data/initial-state';
+import EditorPanel from './components/EditorPanel';
+import Loading from '@cdc/core/components/Loading';
+
+// 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 './scss/main.scss';
 
 export default function CdcChart(
-  { configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname} :
-  { configUrl?: string, config?: any, isEditor?: boolean, isDashboard?: boolean, setConfig?, setEditing?, hostname? }
+  { 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 }
 ) {
 
   const transform = new DataTransform();
@@ -52,21 +57,47 @@ export default function CdcChart(
   const [seriesHighlight, setSeriesHighlight] = useState<Array<String>>([]);
   const [currentViewport, setCurrentViewport] = useState<String>('lg');
   const [dimensions, setDimensions] = useState<Array<Number>>([]);
-  const [parentElement, setParentElement] = useState(false)
-  const [externalFilters, setExternalFilters] = useState([]);
+  const [externalFilters, setExternalFilters] = useState(null);
   const [container, setContainer] = useState()
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
+  const [dynamicLegendItems, setDynamicLegendItems] = useState([])
 
   const legendGlyphSize = 15;
   const legendGlyphSizeHalf = legendGlyphSize / 2;
 
+  const {     
+    barBorderClass,
+    lineDatapointClass, 
+    contentClasses,
+    innerContainerClasses, 
+    sparkLineStyles
+  } = useDataVizClasses(config)
+
   const handleChartTabbing = config.showSidebar ? `#legend` : config?.title ? `#dataTableSection__${config.title.replace(/\s/g, '')}` : `#dataTableSection`
 
-  const cacheBustingString = () => {
-      const round = 1000 * 60 * 15;
-      const date = new Date();
-      return new Date(date.getTime() - (date.getTime() % round)).toISOString();
+  
+  
+
+  const handleChartAriaLabels = (state, testing = false) => {
+      if(testing) console.log(`handleChartAriaLabels Testing On:`, state);
+      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(e.message)
+      }
   }
+
   const loadConfig = async () => {
     let response = configObj || await (await fetch(configUrl)).json();
 
@@ -117,6 +148,7 @@ export default function CdcChart(
     updateConfig(newConfig, data);
   }
 
+
   const updateConfig = (newConfig, dataOverride = undefined) => {
 
     let data = dataOverride || stateData
@@ -185,7 +217,6 @@ export default function CdcChart(
           newConfig.filters[index].active = filterValues[0];
 
       });
-
       currentData = filterData(newConfig.filters, newExcludedData);
       setFilteredData(currentData);
     }
@@ -196,6 +227,7 @@ export default function CdcChart(
     newConfig.runtime.seriesLabelsAll = [];
     newConfig.runtime.originalXAxis = newConfig.xAxis;
 
+
     if (newConfig.visualizationType === 'Pie') {
       newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey]);
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys;
@@ -214,7 +246,7 @@ export default function CdcChart(
         if(series.type === 'Bar'){
           newConfig.runtime.barSeriesKeys.push(series.dataKey);
         }
-        if(series.type === 'Line'){
+        if(series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg'){
           newConfig.runtime.lineSeriesKeys.push(series.dataKey);
         }
       });
@@ -232,20 +264,6 @@ export default function CdcChart(
     newConfig.runtime.uniqueId = Date.now();
     newConfig.runtime.editorErrorMessage = newConfig.visualizationType === 'Pie' && !newConfig.yAxis.dataKey ? 'Data Key property in Y Axis section must be set for pie charts.' : '';
 
-    // Check for duplicate x axis values in data
-    if(!currentData) currentData = newExcludedData;
-
-    let uniqueXValues = {};
-
-    if(newConfig.visualizationType !== 'Paired Bar') {
-      for(let i = 0; i < currentData.length; i++) {
-        if(uniqueXValues[currentData[i][newConfig.xAxis.dataKey]]){
-          newConfig.runtime.editorErrorMessage = 'Duplicate keys in data. Try adding a filter.';
-        } else {
-          uniqueXValues[currentData[i][newConfig.xAxis.dataKey]] = true;
-        }
-      }
-    }
     setConfig(newConfig);
   };
 
@@ -259,6 +277,7 @@ export default function CdcChart(
           add = false;
         }
       });
+
       if(add) filteredData.push(row);
     });
     return filteredData;
@@ -375,7 +394,7 @@ export default function CdcChart(
  */
   useEffect(() => {
 
-    if(externalFilters[0]) {
+    if(externalFilters && externalFilters[0]) {
       const hasActiveProperty = externalFilters[0].hasOwnProperty('active')
 
       if(!hasActiveProperty) {
@@ -386,7 +405,7 @@ export default function CdcChart(
       }
     }
 
-    if(externalFilters.length > 0 && externalFilters.length > 0 && externalFilters[0].hasOwnProperty('active')) {
+    if(externalFilters && externalFilters.length > 0 && externalFilters.length > 0 && externalFilters[0].hasOwnProperty('active')) {
       let newConfigHere = {...config, filters: externalFilters }
       setConfig(newConfigHere)
       setFilteredData(filterData(externalFilters, excludedData));
@@ -407,6 +426,7 @@ export default function CdcChart(
     if(stateData && config.xAxis && config.runtime.seriesKeys) {
       let palette = config.customColors || colorPalettes[config.palette]
       let numberOfKeys = config.runtime.seriesKeys.length
+      let newColorScale;
 
       while(numberOfKeys > palette.length) {
         palette = palette.concat(palette);
@@ -414,7 +434,7 @@ export default function CdcChart(
 
       palette = palette.slice(0, numberOfKeys);
 
-      const newColorScale = () => scaleOrdinal({
+      newColorScale = () => scaleOrdinal({
         domain: config.runtime.seriesLabelsAll,
         range: palette,
       });
@@ -433,7 +453,7 @@ export default function CdcChart(
     const newSeriesHighlight = [];
 
     // If we're highlighting all the series, reset them
-    if(seriesHighlight.length + 1 === config.runtime.seriesKeys.length) {
+    if( (seriesHighlight.length + 1 === config.runtime.seriesKeys.length) && !config.legend.dynamicLegend) {
       highlightReset()
       return
     }
@@ -457,14 +477,18 @@ export default function CdcChart(
     } else {
       newSeriesHighlight.push(newHighlight);
     }
-
     setSeriesHighlight(newSeriesHighlight);
   };
 
   // Called on reset button click, unhighlights all data series
   const highlightReset = () => {
-    setSeriesHighlight([]);
+    if(config.legend.dynamicLegend && dynamicLegendItems) {
+      setSeriesHighlight(dynamicLegendItems.map( item => item.text ))
+    } else {
+      setSeriesHighlight([]);
+    }
   }
+
   const section = config.orientation ==='horizontal' ? 'yAxis' :'xAxis';
 
   const parseDate = (dateString: string) => {
@@ -484,11 +508,10 @@ export default function CdcChart(
 
   // Format numeric data based on settings in config
   const formatNumber = (num) => {
-    if(num === undefined || num ===null) return "";
     // 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)) return num ;
+    if(isNaN(num)|| !num) return num ;
 
     let original = num;
     let prefix = config.dataFormat.prefix;
@@ -500,8 +523,8 @@ export default function CdcChart(
     };
 
     num = numberFromString(num);
-
-    if(isNaN(num)) {
+    
+    if (isNaN(num)) {
       config.runtime.editorErrorMessage = `Unable to parse number from data ${original}. Try reviewing your data and selections in the Data Series section.`;
       return original
     }
@@ -510,8 +533,7 @@ export default function CdcChart(
     if (config.dataCutoff){
       let cutoff = numberFromString(config.dataCutoff)
 
-      if(num < cutoff) {
-        prefix = '< ' + (prefix || '');
+      if(num < cutoff) { 
         num = cutoff;
       }
     }
@@ -543,79 +565,6 @@ export default function CdcChart(
     'Pie' : <PieChart />,
   }
 
-  // JSX for Legend
-  const Legend = () => {
-
-    let containerClasses = ['legend-container']
-    let innerClasses = ['legend-container__inner'];
-
-    if(config.legend.position === "left") {
-      containerClasses.push('left')
-    }
-
-    if(config.legend.reverseLabelOrder) {
-      innerClasses.push('d-flex')
-      innerClasses.push('flex-column-reverse')
-    }
-
-    return (
-      <aside id="legend" className={containerClasses.join(' ')} role="region" aria-label="legend" tabIndex={0}>
-        {legend.label && <h2>{legend.label}</h2>}
-        <LegendOrdinal
-        scale={colorScale}
-        itemDirection="row"
-        labelMargin="0 20px 0 0"
-        shapeMargin="0 10px 0"
-        >
-          {labels => (
-            <div className={innerClasses.join(' ')}>
-              {labels.map((label, i) => {
-                let className = 'legend-item'
-                let itemName:any = label.datum
-
-                // Filter excluded data keys from legend
-                if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                  return
-                }
-
-                if(config.runtime.seriesLabels){
-                  let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                  itemName = config.runtime.seriesKeys[index]
-                }
-
-                if( seriesHighlight.length > 0 && false === seriesHighlight.includes( itemName ) ) {
-                  className += ' inactive'
-                }
-
-                return (
-                  <LegendItem
-                    className={className}
-                    tabIndex={0}
-                    key={`legend-quantile-${i}`}
-                    onKeyPress={(e) => {
-                      if (e.key === 'Enter') {
-                        highlight(label);
-                      }
-                    }}
-                    onClick={() => {
-                      highlight(label);
-                    }}
-                  >
-                    <LegendCircle fill={label.value} />
-                    <LegendLabel align="left" margin="0 0 0 4px">
-                      {label.text}
-                    </LegendLabel>
-                  </LegendItem>
-                )
-              })}
-              {seriesHighlight.length > 0 && <button className={`legend-reset ${config.theme}`} onClick={highlightReset}>Reset</button>}
-            </div>
-          )}
-        </LegendOrdinal>
-      </aside>
-    )
-  }
-
   const Filters = () => {
     const changeFilterActive = (index, value) => {
       let newFilters = config.filters;
@@ -703,52 +652,48 @@ export default function CdcChart(
     return false;
   };
 
-  let innerContainerClasses = ['cove-component__inner']
-	config.title && innerContainerClasses.push('component--has-title')
-	config.subtext && innerContainerClasses.push('component--has-subtext')
-	config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
-	config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
-
-	let contentClasses = ['cove-component__content'];
-	config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
-	!config.visual?.border && contentClasses.push('no-borders');
-	config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme');
-	config.visual?.accent && contentClasses.push('component--has-accent');
-	config.visual?.background && contentClasses.push('component--has-background');
-	config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor');
-
-
-
   // Prevent render if loading
   let body = (<Loading />)
-  let lineDatapointClass = ''
-  let barBorderClass = ''
 
-  let sparkLineStyles = {
-    width: '100%',
-    height: '100px',
-  }
 
-  if(false === loading) {
-    if (config.lineDatapointStyle === "hover") { lineDatapointClass = ' chart-line--hover' }
-    if (config.lineDatapointStyle === "always show") { lineDatapointClass = ' chart-line--always' }
-    if (config.barHasBorder === "false") { barBorderClass = ' chart-bar--no-border' }
+  if(!loading) {
+
 
     body = (
       <>
         {isEditor && <EditorPanel />}
-        {!missingRequiredSections() && !config.newViz && <div className={`cdc-chart-inner-container`}>
-          <>
+        {!missingRequiredSections() && !config.newViz && (
+          <div className="cdc-chart-inner-container">
             {/* Title */}
-            {title && <div role="heading" className={`chart-title ${config.theme} cove-component__header`} aria-level={2}>{parse(title)}</div>}
-            <a id='skip-chart-container' className='cdcdataviz-sr-only-focusable' href={handleChartTabbing}>
+        
+            {title && (
+              <div
+                role="heading"
+                className={`chart-title ${config.theme} cove-component__header`}
+                aria-level={2}
+              >
+                {config && (
+                  <sup className="superTitle">{parse(config.superTitle || '')}</sup>
+                )}
+                <div>{parse(title)}</div>
+              </div>
+            )}
+            <a
+              id="skip-chart-container"
+              className="cdcdataviz-sr-only-focusable"
+              href={handleChartTabbing}
+            >
               Skip Over Chart Container
             </a>
             {/* Filters */}
-            { (config.filters && !externalFilters ) && <Filters />}
+            {config.filters && !externalFilters && <Filters />}
             {/* Visualization */}
-            <div className={`chart-container${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}>
-              
+            {config?.introText && <section className="introText">{parse(config.introText)}</section>}
+            <div
+              className={`chart-container${
+                config.legend.hide ? " legend-hidden" : ""
+              }${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
+            >
               {/* All charts except sparkline */}
               {config.visualizationType !== "Spark Line" && 
                 chartComponents[visualizationType]
@@ -770,20 +715,20 @@ export default function CdcChart(
                 </>
               )
               }
-
-              {/* Legend */}
-              {(!config.legend.hide && config.visualizationType !== "Spark Line") && <Legend />}
-
+              {!config.legend.hide && config.visualizationType !== "Spark Line" && <Legend />}
             </div>
-          </>
-          {/* Description */}
-          { (description && config.visualizationType !== "Spark Line") && <div className="subtext">{parse(description)}</div>}
-          {/* Data Table */}
-          { (config.xAxis.dataKey && config.table.show && config.visualizationType !== "Spark Line") && <DataTable />}
-        </div>
-        }
+            {/* Link */}
+            {link && link}
+            {/* Description */}
+            {description && config.visualizationType !== "Spark Line" && <div className="subtext">{parse(description)}</div>}
+            {/* Data Table */}
+
+            {config.xAxis.dataKey && config.table.show && config.visualizationType !== "Spark Line" && <DataTable />}
+            {config?.footnotes && <section className="footnotes">{parse(config.footnotes)}</section>}
+          </div>
+        )}
       </>
-    )
+    );
   }
 
   const getXAxisData = (d: any) => config.runtime.xAxis.type === 'date' ? (parseDate(d[config.runtime.originalXAxis.dataKey])).getTime() : d[config.runtime.originalXAxis.dataKey];
@@ -793,6 +738,7 @@ export default function CdcChart(
     getXAxisData,
     getYAxisData,
     config,
+    setConfig,
     rawData: stateData ?? {},
     excludedData: excludedData,
     transformedData: filteredData || excludedData,
@@ -812,6 +758,13 @@ export default function CdcChart(
     missingRequiredSections,
     setEditing,
     setFilteredData,
+    handleChartAriaLabels,
+    highlight,
+    highlightReset,
+    legend,
+    setSeriesHighlight,
+    dynamicLegendItems,
+    setDynamicLegendItems
   }
 
   const classes = [