@cdc/chart 4.22.11 → 4.23.2

package/src/data/initial-state.js

@@ -31,20 +31,54 @@ export default {
     tickColor: '#333',
     rightHideAxis: true,
     rightAxisSize: 50,
+    rightLabel: '',
     rightLabelOffsetSize: 0,
     rightAxisLabelColor: '#333',
     rightAxisTickLabelColor: '#333',
     rightAxisTickColor: '#333',
-    isLegendValue:false,
-    numTicks:''
-
+    numTicks: '',
+    axisPadding: 0,
+    tickRotation: 0
+  },
+  boxplot: {
+    plots: [],
+    borders: 'true',
+    firstQuartilePercentage: 25,
+    thirdQuartilePercentage: 75,
+    boxWidthPercentage: 40,
+    plotOutlierValues: false,
+    plotNonOutlierValues: true,
+    legend: {
+      showHowToReadText: false,
+      howToReadText: ''
+    },
+    labels: {
+      q1: 'Lower Quartile',
+      q2: 'q2',
+      q3: 'Upper Quartile',
+      q4: 'q4',
+      minimum: 'Minimum',
+      maximum: 'Maximum',
+      mean: 'Mean',
+      median: 'Median',
+      sd: 'Standard Deviation',
+      iqr: 'Interquartile Range',
+      count: 'Count',
+      outliers: 'Outliers',
+      values: 'Values'
+    }
   },
   topAxis: {
     hasLine: false
   },
+  isLegendValue: false,
   barThickness: 0.35,
   barHeight: 25,
-  height: 300,
+  barSpace: 15,
+  heights: {
+    vertical: 300,
+    horizontal: 750
+  },
   xAxis: {
     type: 'categorical',
     hideAxis: false,
@@ -57,15 +91,17 @@ export default {
     labelColor: '#333',
     tickLabelColor: '#333',
     tickColor: '#333',
-    isLegendValue:false,
-    numTicks:''
+    numTicks: '',
+    labelOffset: 65,
+    axisPadding: 0
   },
   table: {
     label: 'Data Table',
     expanded: true,
     limitHeight: false,
     height: '',
-    caption: ''
+    caption: '',
+    showDownloadUrl: false
   },
   orientation: 'vertical',
   legend: {
@@ -88,7 +124,7 @@ export default {
   palette: 'qualitative-bold',
   isPaletteReversed: false,
   labels: false,
-  dataFormat: { commas: false, prefix: '', suffix: '' },
+  dataFormat: { commas: false, prefix: '', suffix: '', abbreviated: false },
   confidenceKeys: {},
   visual: {
     border: true,

package/src/hooks/{useColorPalette.ts → useColorPalette.js}

@@ -5,59 +5,41 @@ const SEQUENTIAL = 'SEQUENTIAL'
 const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE'
 export const GET_PALETTE = 'GET_PALETTE'
 
-//  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
-}
-
 // create initial state
-const initialState: State = {
+const initialState = {
   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 = ''
+function reducer(state, action) {
+  const palletNamesArr = Object.keys(action.payload) // action.payload === colorPalettes object
+  let paletteName = ''
   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'))
+      const qualitative = palletNamesArr.filter((name) => String(name).startsWith('qualitative') && !String(name).endsWith('reverse'))
+      const sequential = palletNamesArr.filter((name) => 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'))
+      paletteName = palletNamesArr.find((name) => name === String(state.paletteName).concat('reverse') || name === String(state.paletteName).concat('-reverse'))
+      const qualitativeReverse = palletNamesArr.filter((name) => String(name).startsWith('qualitative') && String(name).endsWith('reverse'))
+      const sequentialReverse = palletNamesArr.filter((name) => 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
-}
 function init(initialState) {
   return initialState
 }
 
-export function useColorPalette<T, Y extends Keyable>(colorPalettes: T, configState: Y) {
+export function useColorPalette(colorPalettes, configState) {
   const [state, dispatch] = useReducer(reducer, initialState, init)
   const { paletteName, isPaletteReversed, filteredPallets, filteredQualitative } = state
 

package/src/hooks/{useReduceData.ts → useReduceData.js}

@@ -1,10 +1,24 @@
+import isNumber from '@cdc/core/helpers/isNumber'
+
 function useReduceData(config, data) {
-  // for combo charts check all  Data Series set to Bar;
+  // 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')
+  const cleanChars = value => {
+    // remove comma and $ signs
+    let tmp
+    if (typeof value === 'string') {
+      tmp = value !== null && value !== '' ? value.replace(/[,\$]/g, '') : ''
+    } else {
+      tmp = value !== null && value !== '' ? value : ''
+    }
+    return tmp
+  }
   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])
@@ -16,11 +30,12 @@ function useReduceData(config, data) {
           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])))
+      max = Math.max(...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0)))
+      //max = Math.max(...data.map(d => Number(d[config.series.dataKey])))
     } else if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       let total = []
 
@@ -34,28 +49,26 @@ function useReduceData(config, data) {
           total.push(totalYValues)
         })
         // get lineSeries largest values
-        const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(d[key])))))
+        const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key]))))))
 
         const barMax = Math.max(...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])))))
+      max = Math.max(...data.map(d => Math.max(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : 0)))))
     }
-
     return max
   }
 
   const getMinValueFromData = () => {
     let min
-    const minNumberFromData = Math.min(...data.map(d => Math.min(...config.runtime.seriesKeys.map(key => Number(d[key])))))
+    const minNumberFromData = Math.min(...data.map(d => Math.min(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : 1000000000)))))
     min = String(minNumberFromData)
-
     return min
   }
 
-  const findPositiveNum = (): boolean => {
+  const findPositiveNum = () => {
     // loop throught provided data to find positve number in arr based on series keys.
     let existPositiveValue = false
     if (config.runtime.seriesKeys) {
@@ -66,10 +79,11 @@ function useReduceData(config, data) {
     return existPositiveValue
   }
 
-  const maxValue = getMaxValueFromData()
-  const minValue = getMinValueFromData()
+  const maxValue = Number(getMaxValueFromData())
+  const minValue = Number(getMinValueFromData())
   const existPositiveValue = findPositiveNum()
-  return { minValue, maxValue, existPositiveValue }
+
+  return { minValue, maxValue, existPositiveValue, isAllLine }
 }
 
 export default useReduceData

package/src/hooks/useRightAxis.js

@@ -1,8 +1,10 @@
 import { scaleLinear } from '@visx/scale'
+import useReduceData from '../hooks/useReduceData'
 
 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 { minValue } = useReduceData(config, data)
 
   const allRightAxisData = rightSeriesKeys => {
     if (!rightSeriesKeys) return [0]
@@ -17,7 +19,7 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
   const max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
 
   const yScaleRight = scaleLinear({
-    domain: [0, max],
+    domain: [minValue, max],
     range: [yMax, 0]
   })
 

package/src/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import CdcChart from './CdcChart'
+
+import 'react-tooltip/dist/react-tooltip.css'
+
+let isEditor = window.location.href.includes('editor=true')
+
+let domContainer = document.getElementsByClassName('react-container')[0]
+
+ReactDOM.createRoot(domContainer).render(
+  <React.StrictMode>
+    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
+  </React.StrictMode>,
+)

package/src/scss/DataTable.scss

@@ -1,10 +1,32 @@
 @include breakpointClass(md) {
   .data-table-container {
-    margin: 1em;
+    margin: 5px 1em;
   }
 }
 
 .data-table-container {
+  // Hides Category Column
+  .row-Box-Plot--0 {
+    display: none !important;
+  }
+
+  // Highlight Boxplot 5 Number Summary
+  .row-Box-Plot--1 > td:first-child,
+  .row-Box-Plot--2 > td:first-child,
+  .row-Box-Plot--3 > td:first-child,
+  .row-Box-Plot--4 > td:first-child,
+  .row-Box-Plot--5 > td:first-child {
+    background-color: #ffe699;
+  }
+  // Highlight Boxplot Measures
+  .row-Box-Plot--6 > td:first-child,
+  .row-Box-Plot--7 > td:first-child,
+  .row-Box-Plot--8 > td:first-child,
+  .row-Box-Plot--9 > td:first-child,
+  .row-Box-Plot--10 > td:first-child,
+  .row-Box-Plot--11 > td:first-child {
+    background-color: #d9d9d9;
+  }
   .region-table {
     display: table;
 

package/src/scss/main.scss

@@ -1,8 +1,8 @@
-@import '~@cdc/core/styles/base';
-@import '~@cdc/core/styles/heading-colors';
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
 @import 'mixins';
 @import 'variables';
-@import '~@cdc/core/styles/v2/themes/color-definitions';
+@import '@cdc/core/styles/v2/themes/color-definitions';
 
 .form-container {
   overflow-y: auto;
@@ -120,30 +120,30 @@
     order: 1;
     position: relative;
 
-    &__inner{
-      &.bottom{
+    &__inner {
+      &.bottom {
         display: grid;
         grid-template-columns: auto auto;
       }
 
-      &.single-row{
+      &.single-row {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: flex-start;
-   
-         & >div{
-          padding:0 1.2em 1em 0;
+
+        & > div {
+          padding: 0 1.2em 1em 0;
         }
 
-        & div>span {
-         margin-right: 0!important;
+        & div > span {
+          margin-right: 0 !important;
         }
 
-        & >div.legend-item{
+        & > div.legend-item {
           margin: 0 !important;
         }
-       }
+      }
     }
 
     .legend-reset {
@@ -186,14 +186,15 @@
       font-size: 1.3em;
     }
 
-    h2,p{
+    h2,
+    p {
       margin-bottom: 0.8em;
     }
-    & div.legend-item{
+    & div.legend-item {
       margin-bottom: 0.5em !important;
 
-      &:last-child{
-       margin: 0 !important;
+      &:last-child {
+        margin: 0 !important;
       }
     }
 
@@ -231,14 +232,20 @@
   }
 
   .tooltip {
-    background-color: #fff;
-    border: rgba(0, 0, 0, 0.3) 1px solid !important;
-    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 7px;
-    line-height: 1.4em;
-    font-size: 1em !important;
-    border-radius: 4px !important;
-    padding: 8px 12px !important;
+    border: rgba(0,0,0,.3) 1px solid;
+    box-shadow: rgba(0,0,0,.1) 3px 3px 7px;
     opacity: 1;
+    line-height: 1.4em;
+    font-size: 1em;
+    border-radius: 4px;
+    padding: 8px 12px;
+    z-index: 1;
+
+    .react-tooltip-arrow {
+      border-bottom: rgba(0,0,0,.3) 1px solid;
+      border-right: rgba(0,0,0,.3) 1px solid;
+      backface-visibility: hidden;
+    }
   }
 
   .region-table {
@@ -249,9 +256,8 @@
     display: flex;
     align-items: flex-start;
     flex-wrap: wrap;
-    margin-bottom: 1em;
 
-    &.bottom{
+    &.bottom {
       flex-wrap: nowrap;
       flex-direction: column;
     }
@@ -323,6 +329,28 @@
   }
 
   .filters-section {
+    margin-left: 1rem;
+    margin-right: 1rem;
+
+    &__title {
+      margin: 15px 0;
+    }
+
+    &__wrapper {
+      margin-bottom: 40px;
+
+      hr {
+        margin-bottom: 20px;
+      }
+
+      label {
+        display: inherit;
+        margin-bottom: 5px;
+        font-weight: 600;
+        font-size: 16px;
+      }
+    }
+
     @include breakpoint(md) {
       display: flex;
       gap: 30px;
@@ -334,6 +362,7 @@
 
     select {
       font-size: 1em;
+      padding-right: 5px;
     }
 
     .single-filter {
@@ -377,6 +406,10 @@
     .chart-container {
       flex-wrap: nowrap;
 
+      .no-wrap {
+        flex-wrap: nowrap;
+      }
+
       .legend-container {
         width: 25%;
         margin-left: 1em;
@@ -387,7 +420,7 @@
           margin-right: 1em;
           order: 0;
         }
-        &.bottom{
+        &.bottom {
           width: 100%;
           margin-left: 0;
         }
@@ -422,8 +455,6 @@
     }
   }
 
- 
-  
   @include breakpointClass(lg) {
     &.font-small {
       font-size: 1em;
@@ -457,6 +488,7 @@
   // ANIMATIONS
   // Pie Chart Animations
   .animated-pie {
+    margin: auto !important;
     transition: all 0.4s ease-in-out;
     opacity: 0;
     transform-origin: center;
@@ -494,19 +526,20 @@
   .linear,
   .Line,
   .Combo {
-    &.animated path {
+    &.animated path.animation {
       opacity: 0;
     }
     &.animate {
-      path {
+      path.animation {
         opacity: 1;
         stroke-dasharray: 2000;
-        stroke-dashoffset: 2000;
+        stroke-dashoffset: 4000;
         animation: dash 2s ease-in-out forwards;
       }
       @keyframes dash {
         to {
           stroke-dashoffset: 0;
+          opacity: 0;
         }
       }
     }
@@ -530,6 +563,7 @@
 
       .horizontal rect,
       .horizontal foreignObject {
+        opacity: 0;
         animation: growBarH 0.5s linear forwards;
         animation-play-state: paused;
       }
@@ -545,6 +579,10 @@
       .group-2 {
         transform-origin: center;
       }
+
+      .visx-linepath .animation {
+        opacity: 0;
+      }
     }
   }
 
@@ -562,13 +600,26 @@
 
   @keyframes growBarH {
     from {
+      opacity: 1;
       transform: scale(0, 1);
     }
 
     to {
+      opacity: 1;
       transform: scale(1);
     }
   }
+
+  .fieldset--boxplot {
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    padding: 10px;
+
+    label {
+      margin: 5px 0;
+    }
+  }
 }
 
 .cdc-visualization__paired-bar-chart {

package/vite.config.js

@@ -0,0 +1,4 @@
+import GenerateViteConfig from '../../generateViteConfig.js'
+import { moduleName } from './package.json'
+
+export default GenerateViteConfig(moduleName)