@cdc/chart 1.3.4 → 9.22.9

package/examples/stacked-vertical-bar-example.json

@@ -0,0 +1,228 @@
+{
+  "title": "Example Stacked Vertical",
+  "visualizationType": "Bar",
+  "visualizationSubType": "stacked",
+  "orientation": "vertical",
+  "animate": true,
+  "animateReplay": true,
+  "yAxis": {
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": false
+  },
+  "barThickness": 0.35,
+  "height": 300,
+  "xAxis": {
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "dataKey": "Date"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "show": true
+  },
+  "legend": {
+    "behavior": "isolate",
+    "position": "right",
+    "reverseLabelOrder": false
+  },
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar"
+    }
+  ],
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "90",
+      "Data 2": "135",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "40",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "200",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "50",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250",
+      "Data 7": "80",
+      "Data 8": "350",
+      "Data 9": "300",
+      "Data 10": "150",
+      "Data 11": "130",
+      "Data 12": "100"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100",
+      "Data 7": "120",
+      "Data 8": "160",
+      "Data 9": "230",
+      "Data 10": "180",
+      "Data 11": "160",
+      "Data 12": "220"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "90",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "7/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220",
+      "Data 7": "80",
+      "Data 8": "350",
+      "Data 9": "300",
+      "Data 10": "150",
+      "Data 11": "130",
+      "Data 12": "100"
+    },
+    {
+      "Date": "8/15/2016",
+      "Data 1": "40",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "200",
+      "Data 7": "90",
+      "Data 8": "135",
+      "Data 9": "300",
+      "Data 10": "95",
+      "Data 11": "120",
+      "Data 12": "310"
+    },
+    {
+      "Date": "9/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    },
+    {
+      "Date": "10/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100",
+      "Data 7": "90",
+      "Data 8": "135",
+      "Data 9": "300",
+      "Data 10": "95",
+      "Data 11": "120",
+      "Data 12": "310"
+    },
+    {
+      "Date": "11/15/2016",
+      "Data 1": "90",
+      "Data 2": "135",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310",
+      "Data 7": "120",
+      "Data 8": "160",
+      "Data 9": "230",
+      "Data 10": "180",
+      "Data 11": "160",
+      "Data 12": "120"
+    },
+    {
+      "Date": "12/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220",
+      "Data 7": "40",
+      "Data 8": "90",
+      "Data 9": "240",
+      "Data 10": "60",
+      "Data 11": "160",
+      "Data 12": "200"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "1.3.4",
+  "version": "9.22.9",
   "description": "React component for visualizing tabular data in various types of charts",
   "main": "dist/cdcchart",
   "scripts": {
@@ -19,7 +19,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^1.1.4",
+    "@cdc/core": "^9.22.9",
     "@visx/axis": "^1.0.0",
     "@visx/curve": "^1.0.0",
     "@visx/gradient": "^1.0.0",
@@ -50,5 +50,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
+  "gitHead": "90faf22c91ca0062432607e4599598f9e67c848a"
 }

package/src/CdcChart.tsx

@@ -14,8 +14,9 @@ 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 { DataTransform } from '@cdc/core/helpers/DataTransform';
 import getViewport from '@cdc/core/helpers/getViewport';
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData';
 
 import PieChart from './components/PieChart';
 import LinearChart from './components/LinearChart';
@@ -35,8 +36,8 @@ import SparkLine from './components/SparkLine';
 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();
@@ -53,7 +54,7 @@ export default function CdcChart(
   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)
 
@@ -67,6 +68,27 @@ export default function CdcChart(
       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();
 
@@ -232,20 +254,7 @@ 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;
-        }
-      }
-    }
+    // if (newConfig.length) newConfig.reverse();
     setConfig(newConfig);
   };
 
@@ -259,6 +268,7 @@ export default function CdcChart(
           add = false;
         }
       });
+
       if(add) filteredData.push(row);
     });
     return filteredData;
@@ -375,7 +385,7 @@ export default function CdcChart(
  */
   useEffect(() => {
 
-    if(externalFilters[0]) {
+    if(externalFilters && externalFilters[0]) {
       const hasActiveProperty = externalFilters[0].hasOwnProperty('active')
 
       if(!hasActiveProperty) {
@@ -386,7 +396,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));
@@ -484,11 +494,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 +509,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 +519,7 @@ export default function CdcChart(
     if (config.dataCutoff){
       let cutoff = numberFromString(config.dataCutoff)
 
-      if(num < cutoff) {
-        prefix = '< ' + (prefix || '');
+      if(num < cutoff) { 
         num = cutoff;
       }
     }
@@ -560,7 +568,8 @@ export default function CdcChart(
 
     return (
       <aside id="legend" className={containerClasses.join(' ')} role="region" aria-label="legend" tabIndex={0}>
-        {legend.label && <h2>{legend.label}</h2>}
+        {legend.label && <h2>{parse(legend.label)}</h2>}
+        {legend.description && <p>{parse(legend.description)}</p>}
         <LegendOrdinal
         scale={colorScale}
         itemDirection="row"
@@ -608,7 +617,7 @@ export default function CdcChart(
                   </LegendItem>
                 )
               })}
-              {seriesHighlight.length > 0 && <button className={`legend-reset ${config.theme}`} onClick={highlightReset}>Reset</button>}
+              {seriesHighlight.length > 0 && <button className={`legend-reset ${config.theme}`} onClick={highlightReset} tabIndex={0}>Reset</button>}
             </div>
           )}
         </LegendOrdinal>
@@ -737,18 +746,38 @@ export default function CdcChart(
     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 +799,22 @@ 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];
@@ -812,6 +843,7 @@ export default function CdcChart(
     missingRequiredSections,
     setEditing,
     setFilteredData,
+    handleChartAriaLabels
   }
 
   const classes = [
@@ -833,4 +865,4 @@ export default function CdcChart(
       </div>
     </Context.Provider>
   );
-}
+}