@cdc/chart 4.22.10 → 4.23.1

package/src/hooks/useChartClasses.js

@@ -1,35 +1,41 @@
 export default function useChartClasses(config) {
-	let lineDatapointClass = ''
-	let barBorderClass = ''
+  let lineDatapointClass = ''
+  let barBorderClass = ''
 
-	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 (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'
+  }
 
-	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 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');
+  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')
 
-	let sparkLineStyles = {
-		width: '100%',
-		height: '100px',
-	}
+  let sparkLineStyles = {
+    width: '100%',
+    height: '100px'
+  }
 
-	return {
-		barBorderClass,
-		lineDatapointClass,
-		contentClasses,
-		innerContainerClasses,
-		sparkLineStyles
-	};
+  return {
+    barBorderClass,
+    lineDatapointClass,
+    contentClasses,
+    innerContainerClasses,
+    sparkLineStyles
+  }
 }

package/src/hooks/useColorPalette.ts

@@ -1,83 +1,76 @@
-import { useEffect, useReducer } from 'react';
+import { useEffect, useReducer } from 'react'
 
-// constants 
-const SEQUENTIAL = 'SEQUENTIAL';
-const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE';  
-export const GET_PALETTE = 'GET_PALETTE';
+// constants
+const SEQUENTIAL = 'SEQUENTIAL'
+const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE'
+export const GET_PALETTE = 'GET_PALETTE'
 
-
-//  types & interfaces 
+//  types & interfaces
 interface State {
-    readonly filteredPallets:string[]
-    readonly filteredQualitative:string[]
-    readonly isPaletteReversed:boolean;
-    paletteName:string|undefined
-   }
-   interface Action<Palettes> {
-    type:
-      | 'SEQUENTIAL'
-      | 'SEQUENTIAL_REVERSE'
-      | 'GET_PALETTE'
-    payload: Palettes;
-    paletteName?:string
-  };
+  readonly filteredPallets: string[]
+  readonly filteredQualitative: string[]
+  readonly isPaletteReversed: boolean
+  paletteName: string | undefined
+}
+interface Action<Palettes> {
+  type: 'SEQUENTIAL' | 'SEQUENTIAL_REVERSE' | 'GET_PALETTE'
+  payload: Palettes
+  paletteName?: string
+}
 
 // create initial state
-const initialState:State = {
-    filteredPallets: [],
-    isPaletteReversed:false,
-    filteredQualitative: [],
-    paletteName:undefined
-  };
+const initialState: State = {
+  filteredPallets: [],
+  isPaletteReversed: false,
+  filteredQualitative: [],
+  paletteName: undefined
+}
 
-function reducer<T> (state:State,action:Action<T>):State{     // <T> refers to generic type
-  const palletNamesArr:string[] = Object.keys(action.payload); // action.payload === colorPalettes object
-  let paletteName:string ='';
-  switch(action.type){
+function reducer<T>(state: State, action: Action<T>): State {
+  // <T> refers to generic type
+  const palletNamesArr: string[] = Object.keys(action.payload) // action.payload === colorPalettes object
+  let paletteName: string = ''
+  switch (action.type) {
     case GET_PALETTE:
-    
-      return {...state,paletteName:action.paletteName}
-      case SEQUENTIAL:
-        paletteName = state.paletteName &&  state.paletteName.endsWith('reverse') ? String(state.paletteName).substring(0,state.paletteName.length-7) :String(state.paletteName)
-        const qualitative = palletNamesArr.filter((name:string)=>String(name).startsWith('qualitative') && !String(name).endsWith('reverse'))
-        const sequential = palletNamesArr.filter((name:string)=>String(name).startsWith('sequential') && !String(name).endsWith('reverse'))
-       return { ...state, filteredPallets: sequential,filteredQualitative:qualitative, paletteName:paletteName,isPaletteReversed:false};
+      return { ...state, paletteName: action.paletteName }
+    case SEQUENTIAL:
+      paletteName = state.paletteName && state.paletteName.endsWith('reverse') ? String(state.paletteName).substring(0, state.paletteName.length - 7) : String(state.paletteName)
+      const qualitative = palletNamesArr.filter((name: string) => String(name).startsWith('qualitative') && !String(name).endsWith('reverse'))
+      const sequential = palletNamesArr.filter((name: string) => String(name).startsWith('sequential') && !String(name).endsWith('reverse'))
+      return { ...state, filteredPallets: sequential, filteredQualitative: qualitative, paletteName: paletteName, isPaletteReversed: false }
 
-     case SEQUENTIAL_REVERSE:
-        paletteName = palletNamesArr.find((name:string)=> name === String(state.paletteName).concat('reverse') || name === String(state.paletteName).concat('-reverse') )
-        const qualitativeReverse:string[] = palletNamesArr.filter((name:string)=>String(name).startsWith('qualitative') && String(name).endsWith('reverse'));
-        const sequentialReverse:string[] = palletNamesArr.filter((name:string)=>String(name).startsWith('sequential')  && String(name).endsWith('reverse'));
-        return { ...state, filteredQualitative:qualitativeReverse, filteredPallets: sequentialReverse ,paletteName:paletteName,isPaletteReversed:true};
-      default : return state;
+    case SEQUENTIAL_REVERSE:
+      paletteName = palletNamesArr.find((name: string) => name === String(state.paletteName).concat('reverse') || name === String(state.paletteName).concat('-reverse'))
+      const qualitativeReverse: string[] = palletNamesArr.filter((name: string) => String(name).startsWith('qualitative') && String(name).endsWith('reverse'))
+      const sequentialReverse: string[] = palletNamesArr.filter((name: string) => String(name).startsWith('sequential') && String(name).endsWith('reverse'))
+      return { ...state, filteredQualitative: qualitativeReverse, filteredPallets: sequentialReverse, paletteName: paletteName, isPaletteReversed: true }
+    default:
+      return state
   }
-};
+}
 
 interface Keyable {
-  palette:string
-  isPaletteReversed:boolean
+  palette: string
+  isPaletteReversed: boolean
 }
-function init(initialState){
+function init(initialState) {
   return initialState
 }
 
-export function useColorPalette<T,Y extends Keyable>(colorPalettes:T,configState:Y){
-  const [state, dispatch] = useReducer(reducer, initialState,init);
-  const {paletteName,isPaletteReversed,filteredPallets,filteredQualitative} = state
-
-
-
+export function useColorPalette<T, Y extends Keyable>(colorPalettes: T, configState: Y) {
+  const [state, dispatch] = useReducer(reducer, initialState, init)
+  const { paletteName, isPaletteReversed, filteredPallets, filteredQualitative } = state
 
   useEffect(() => {
-    dispatch({ type: SEQUENTIAL, payload: colorPalettes });
-   }, []);
-
+    dispatch({ type: SEQUENTIAL, payload: colorPalettes })
+  }, [])
 
-  useEffect(()=>{
-		if(configState.isPaletteReversed){
-			dispatch({ type: "SEQUENTIAL_REVERSE", payload: colorPalettes });
-     return ()=> dispatch({ type: "SEQUENTIAL", payload: colorPalettes });
+  useEffect(() => {
+    if (configState.isPaletteReversed) {
+      dispatch({ type: 'SEQUENTIAL_REVERSE', payload: colorPalettes })
+      return () => dispatch({ type: 'SEQUENTIAL', payload: colorPalettes })
     }
-	},[configState.isPaletteReversed,dispatch,colorPalettes])
+  }, [configState.isPaletteReversed, dispatch, colorPalettes])
 
-    return {paletteName,isPaletteReversed,filteredPallets,filteredQualitative, dispatch}
-}
+  return { paletteName, isPaletteReversed, filteredPallets, filteredQualitative, dispatch }
+}

package/src/hooks/useLegendClasses.js

@@ -1,20 +1,28 @@
 export default function useLegendClasses(config) {
-	let containerClasses = ['legend-container']
-	let innerClasses = ['legend-container__inner'];
+  let containerClasses = ['legend-container']
+  let innerClasses = ['legend-container__inner']
 
 	// Legend Positioning
 	if (config.legend.position === "left") {
 		containerClasses.push('left')
 	}
+	if (config.legend.position === "bottom") {
+		containerClasses.push('bottom')
+		innerClasses.push('bottom')
+	}
 
-	// Legend > Item Ordering
-	if (config.legend.reverseLabelOrder) {
-		innerClasses.push('d-flex')
-		innerClasses.push('flex-column-reverse')
+	if(config.legend.position==='bottom' && config.legend.singleRow){
+		innerClasses.push('single-row')
 	}
 
-	return {
-		containerClasses,
-		innerClasses
-	};
+  // Legend > Item Ordering
+  if (config.legend.reverseLabelOrder) {
+    innerClasses.push('d-flex')
+    innerClasses.push('flex-column-reverse')
+  }
+
+  return {
+    containerClasses,
+    innerClasses
+  }
 }

package/src/hooks/useReduceData.ts

@@ -1,91 +1,78 @@
+function useReduceData(config, data) {
+  // for combo charts check if all  Data Series selected to Bar;
+  const isBar = config?.series?.every(element => element?.type === 'Bar')
+  // for combo charts check if all Data series selected Line or dashed-md/sm/lg.
+  const isAllLine = config?.series?.every(el => el.type === 'Line' || el.type=== 'dashed-sm'|| el.type=== 'dashed-md' || el.type=== 'dashed-lg');
 
-function useReduceData(config,data) {
-    // for combo charts check all  Data Series set to Bar;
-  const isBar = config?.series?.every(element=>element?.type === 'Bar');
+  const getMaxValueFromData = () => {
+    let max // will hold max number from data.
+    if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) && config.visualizationSubType === 'stacked') {
+      const yTotals = data.reduce((allTotals, xValue) => {
+        const totalYValues = config.runtime.seriesKeys.reduce((yTotal, k) => {
+          yTotal += Number(xValue[k])
+          return yTotal
+        }, 0)
 
-const getMaxValueFromData = () => {
-  let max; // will hold max number from data.
-  if (
-    (config.visualizationType === "Bar" || (config.visualizationType === "Combo" && isBar )) &&
-    config.visualizationSubType === "stacked"
-  ) {
-    const yTotals = data.reduce((allTotals, xValue) => {
-      const totalYValues = config.runtime.seriesKeys.reduce((yTotal, k) => {
-        yTotal += Number(xValue[k]);
-        return yTotal;
-      }, 0);
+        allTotals.push(totalYValues)
+        if (totalYValues > max) {
+          max = totalYValues
+        }
+        return allTotals
+      }, [] as number[])
 
-      allTotals.push(totalYValues);
-      if (totalYValues > max) {
-        max = totalYValues;
-      }
-      return allTotals;
-    }, [] as number[]);
+      max = Math.max(...yTotals)
+    } else if (config.visualizationType === 'Bar' && config.series && config.series.dataKey) {
+      max = Math.max(...data.map(d => Number(d[config.series.dataKey])))
+    } else if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
+      let total = []
+
+      if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
+        // get barSeries max Values added to each other
+        data.map(function (d, index) {
+          const totalYValues = config.runtime.barSeriesKeys.reduce((yTotal, k) => {
+            yTotal += Number(d[k])
+            return yTotal
+          }, 0)
+          total.push(totalYValues)
+        })
+        // get lineSeries largest values
+        const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(d[key])))))
 
-    max = Math.max(...yTotals);
-  } else if (
-    config.visualizationType === "Bar" &&
-    config.series &&
-    config.series.dataKey
-  ) {
-    max = Math.max(...data.map((d) => Number(d[config.series.dataKey])));
+        const barMax = Math.max(...total)
 
-  }else if(config.visualizationType === "Combo"  && config.visualizationSubType === "stacked" && !isBar){
-    let total  = []
+        max = Number(barMax) > Number(lineMax) ? barMax : lineMax
+      }
+    } else {
+      max = Math.max(...data.map(d => Math.max(...config.runtime.seriesKeys.map(key => Number(d[key])))))
+    }
 
-    if(config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys ){
-    // get barSeries max Values added to each other
-    data.map(function (d,index) {
-      const totalYValues =config.runtime.barSeriesKeys.reduce((yTotal, k) => {
-          yTotal += Number(d[k]);
-          return yTotal;
-        }, 0);
-        total.push(totalYValues) 
-    
-   });
-   // get lineSeries largest values
-   const lineMax =  Math.max(...data.map((d) =>Math.max(...config.runtime.lineSeriesKeys.map((key) => Number(d[key])))));
+    return max
+  }
 
-    const barMax = Math.max(...total) 
+  const getMinValueFromData = () => {
+    let min
+    const minNumberFromData = Math.min(...data.map(d => Math.min(...config.runtime.seriesKeys.map(key => Number(d[key])))))
+    min = String(minNumberFromData)
 
-    max = (Number(barMax) > Number(lineMax)) ? barMax : lineMax;
+    return min
   }
-  }else {
-    max = Math.max(
-      ...data.map((d) =>
-        Math.max(...config.runtime.seriesKeys.map((key) => Number(d[key])))
-      )
-    );
+
+  const findPositiveNum = (): boolean => {
+    // loop throught provided data to find positve number in arr based on series keys.
+    let existPositiveValue = false
+    if (config.runtime.seriesKeys) {
+      for (let i = 0; i < config.runtime.seriesKeys.length; i++) {
+        existPositiveValue = data.some(d => d[config.runtime.seriesKeys[i]] >= 0)
+      }
+    }
+    return existPositiveValue
   }
 
-  return max;
-};
-    
-const getMinValueFromData = ()=> {
-    let min;
-    const minNumberFromData = Math.min(...data.map((d) => Math.min(...config.runtime.seriesKeys.map((key) => Number(d[key])))));
-    min = String(minNumberFromData)
- 
-    return min;
-};
+  const maxValue = Number(getMaxValueFromData());
+  const minValue = Number(getMinValueFromData());
+  const existPositiveValue = findPositiveNum();
 
-const findPositiveNum = ():boolean=>{
-  // loop throught provided data to find positve number in arr based on series keys.
-  let existPositiveValue = false;
-  if (config.runtime.seriesKeys) {
-    for(let i = 0; i < config.runtime.seriesKeys.length; i++) {
-      existPositiveValue = data.some(d => d[config.runtime.seriesKeys[i]] >= 0);
-    };
-  };
-  return existPositiveValue;
-};
-  
-  
-    
-    const maxValue = getMaxValueFromData();
-    const minValue = getMinValueFromData();
-    const existPositiveValue = findPositiveNum();
-  return {minValue,maxValue,existPositiveValue};
+  return {minValue, maxValue, existPositiveValue ,isAllLine}
 }
 
-export default useReduceData
+export default useReduceData

package/src/hooks/useRightAxis.js

@@ -0,0 +1,25 @@
+import { scaleLinear } from '@visx/scale'
+
+export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
+  const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
+  const rightSeriesKeys = config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
+
+  const allRightAxisData = rightSeriesKeys => {
+    if (!rightSeriesKeys) return [0]
+    let rightAxisData = []
+    rightSeriesKeys.map((key, index) => {
+      return (rightAxisData = [...rightAxisData, ...data.map(item => Number(item[key]))])
+    })
+    return rightAxisData
+  }
+
+  const min = Math.min.apply(null, allRightAxisData(rightSeriesKeys))
+  const max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+
+  const yScaleRight = scaleLinear({
+    domain: [0, max],
+    range: [yMax, 0]
+  })
+
+  return { yScaleRight, hasRightAxis }
+}

package/src/hooks/useTopAxis.js

@@ -0,0 +1,6 @@
+export default function useTopAxis(config) {
+  // When to show top axis
+  const hasTopAxis = config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Line'
+
+  return { hasTopAxis }
+}

package/src/index.html

@@ -1,25 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <style>
-        body {
-            /* max-width: 1000px; */
-            margin: 0 auto !important;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
+      body {
+        /* max-width: 1000px; */
+        margin: 0 auto !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
 
-        .react-container+.react-container {
-            margin-top: 3rem;
-        }
+      .react-container + .react-container {
+        margin-top: 3rem;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
 
     <!-- <select id="cove_select">
@@ -28,13 +27,15 @@
       <option value="Hispanic or Latino">Test 2</option>
     </select> -->
 
+    <!-- <div class="react-container" data-config="/examples/private/filters.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/private/yaxis-test.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/dynamic-legends.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
-    <!--     <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div>-->
-    <!--     <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div>-->
+    <!-- <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div>-->
+<!--     <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div>-->
     <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
     <!--<div class="react-container" data-config="/examples/case-rate-example-config.json"></div>-->
     <!-- <div class="react-container" data-config="/examples/private/textelements.json"></div> -->
@@ -47,13 +48,13 @@
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
 
-
     <!-- 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-with-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="/examples/box-plot.json"></div> -->
 
     <!-- LOLLIPOP CHARTS -->
     <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
@@ -62,6 +63,5 @@
     <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
-</body>
-
+  </body>
 </html>

package/src/index.tsx

@@ -1,21 +1,18 @@
-import { publish, subscribe } from '@cdc/core/helpers/events';
-import React from 'react';	
-import { render } from 'react-dom';	
+import { publish, subscribe } from '@cdc/core/helpers/events'
+import React from 'react'
+import { render } from 'react-dom'
 
-import CdcChart from './CdcChart';	
+import CdcChart from './CdcChart'
 
-const domContainers = document.querySelectorAll('.react-container');	
+const domContainers = document.querySelectorAll('.react-container')
 
-let isEditor = window.location.href.includes('editor=true');
+let isEditor = window.location.href.includes('editor=true')
 
-domContainers.forEach((domContainer) => {	
-  render(	
+domContainers.forEach(domContainer => {
+  render(
     <React.StrictMode>
-      <CdcChart 
-        configUrl={domContainer.attributes['data-config'].value} 
-        isEditor={isEditor} 
-      />	
-    </React.StrictMode>,	
-    domContainer,	
-  );	
-});
+      <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
+    </React.StrictMode>,
+    domContainer
+  )
+})

package/src/scss/DataTable.scss

@@ -1,16 +1,17 @@
 @include breakpointClass(md) {
   .data-table-container {
-    margin: 1em;
+    margin: 5px 1em;
   }
 }
 
 .data-table-container {
   .region-table {
     display: table;
-    
-    thead, tbody {
+
+    thead,
+    tbody {
       display: table-row-group;
-  
+
       tr {
         display: table-row;
 
@@ -20,4 +21,4 @@
       }
     }
   }
-}
+}