@cdc/map 4.24.2 → 4.24.3

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -1,21 +1,16 @@
 import { useContext } from 'react'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
-import chroma from 'chroma-js'
 import ConfigContext from './../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
-// todo: move this somewhere that makes better sense for pattern sizes.
-const sizes = {
-  small: '8',
-  medium: '10',
-  large: '12'
-}
+import { patternSizes } from './../../helpers/patternSizes'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
   const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
 
   return (
     <svg viewBox='0 0 45 28'>
-      <g {...props} strokeLinejoin='round'>
+      <g {...props} strokeLinejoin='round' tabIndex={-1}>
         <path
           stroke={stroke}
           strokeWidth={strokeWidth}
@@ -27,32 +22,26 @@ const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPa
         </text>
 
         {state.map.patterns.map((patternData, patternIndex) => {
-          let defaultPatternColor = 'black'
-
-          const hasMatchingValues = supportedTerritories[territory].includes(patternData?.dataValue)
-          console.log('has match', patternData)
-
-          if (chroma.contrast(defaultPatternColor, props.style.fill) < 3.5) {
-            defaultPatternColor = 'white'
-          }
+          const patternColor = getContrastColor('#FFF', props.style.fill)
+          const hasMatchingValues = supportedTerritories[territory]?.includes(patternData?.dataValue)
 
           if (!hasMatchingValues) return null
           if (!patternData.pattern) return null
 
           return (
             <>
-              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
-              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
-              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 6} width={sizes[patternData?.size] ?? 6} stroke={defaultPatternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
+              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
+              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 6} width={patternSizes[patternData?.size] ?? 6} stroke={patternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
               <path
                 stroke={stroke}
                 strokeWidth={strokeWidth}
                 d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
                 fill={`url(#territory-${patternData?.dataKey}--${patternIndex})`}
-                color='white'
+                color={patternData ? 'white' : textColor}
                 className={[`territory-pattern-${patternData.dataKey}`, `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`].join(' ')}
               />
-              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
+              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ fill: patternData ? 'white' : 'black', stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
                 {label}
               </text>
             </>

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect, memo, useContext } from 'react'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
-import { jsx } from '@emotion/react'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+// 3rd party
 import { geoCentroid } from 'd3-geo'
 import { feature } from 'topojson-client'
-import topoJSON from '../data/us-regions-topo-2.json'
 import { Mercator } from '@visx/geo'
-import chroma from 'chroma-js'
+
+// cdc
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
@@ -74,7 +76,7 @@ const UsaRegionMap = props => {
 
     let toolTip
 
-    let styles = {
+    let styles: React.CSSProperties = {
       fill: '#E6E6E6',
       color: '#202020'
     }
@@ -87,13 +89,8 @@ const UsaRegionMap = props => {
 
     const legendColors = applyLegendToRow(territoryData)
 
-    let textColor = '#FFF'
-
     if (legendColors) {
-      // Use white text if the background is dark, and dark grey if it's light
-      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
-        textColor = '#202020'
-      }
+      const textColor = getContrastColor('#FFF', legendColors[0])
 
       let needsPointer = false
 
@@ -124,12 +121,7 @@ const UsaRegionMap = props => {
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020'
-    }
+    const textColor = getContrastColor('#FFF', bgColor)
 
     let x = 0,
       y = 5
@@ -195,11 +187,7 @@ const UsaRegionMap = props => {
 
         const TerratoryRect = props => {
           const { posX = 0, tName } = props
-          let textColor = '#fff'
-
-          if (chroma.contrast(textColor, legendColors[0]) < 4.5) {
-            textColor = '#202020'
-          }
+          const textColor = getContrastColor('#FFF', legendColors[0])
           return (
             <>
               <rect x={posX} width='36' height='24' rx='6' stroke='#fff' strokeWidth='1' />
@@ -212,28 +200,14 @@ const UsaRegionMap = props => {
 
         const circleRadius = 15
 
-        // SIDE CHART EXPERIMENT
-        // const height = state.data[index].Change;
-        // const barHeight = Math.abs(height * 20 );
-        // const barPositive = height > 0;
-        // const barY = barPositive ? -barHeight + 15 : 15;
-        // const baseY = 14;
-        // const barFill = barPositive ? "#fff" : "#fff";
-
         return (
-          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
+          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} tabIndex={-1}>
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
             <g id={`region-${index + 1}-label`}>
               <circle fill='#fff' stroke='#999' cx={circleRadius} cy={circleRadius} r={circleRadius} />
               <text fill='#333' x='15px' y='20px' textAnchor='middle'>
                 {index + 1}
               </text>
-              {/* SIDE CHART EXPERIMENT */}
-              {/*<g y={barY*20}>*/}
-              {/*  <rect x="-20" y={barY} width="10" height={barHeight} fill={barFill} stroke="#333"/>*/}
-              {/*  <rect x="-23" y={baseY} width="16" height="2" fill="#000" />*/}
-              {/*</g>*/}
-              {/* / SIDE CHART EXPERIMENT */}
             </g>
             {geoKey === 'region 2' && (
               <g id='region-2-territories'>

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -9,21 +9,20 @@ import hexTopoJSON from '../data/us-hex-topo.json'
 import { geoCentroid, geoPath } from 'd3-geo'
 import { feature } from 'topojson-client'
 import { AlbersUsa, Mercator } from '@visx/geo'
-import chroma from 'chroma-js'
 import CityList from '../../CityList'
 import BubbleList from '../../BubbleList'
 import { supportedCities, supportedStates } from '../../../data/supported-geos'
 import { geoAlbersUsa } from 'd3-composite-projections'
-import { Group } from '@visx/group'
-import { Text } from '@visx/text'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
-import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
+import HexIcon from './HexIcon'
+import { patternSizes } from '../helpers/patternSizes'
 
 import Territory from './Territory'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
 import { MapContext } from '../../../types/MapContext'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -132,19 +131,14 @@ const UsaMap = () => {
 
     const label = supportedTerritories[territory][1]
 
-    if (!territoryData) return <Shape key={label} label={label} css={styles} text={styles.color} />
+    if (!territoryData) return <Shape key={label} label={label} style={styles} text={styles.color} />
 
     toolTip = applyTooltipsToGeo(displayGeoName(territory), territoryData)
 
     const legendColors = applyLegendToRow(territoryData)
 
-    let textColor = '#FFF'
-
     if (legendColors) {
-      // Use white text if the background is dark, and dark grey if it's light
-      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
-        textColor = '#202020'
-      }
+      const textColor = getContrastColor('#FFF', legendColors[0])
 
       let needsPointer = false
 
@@ -169,7 +163,7 @@ const UsaMap = () => {
 
       return (
         <>
-          <Shape key={label} label={label} style={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} territory={territory} territoryData={territoryData} />
+          <Shape key={label} label={label} style={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} territory={territory} territoryData={territoryData} tabIndex={-1} />
         </>
       )
     }
@@ -204,7 +198,7 @@ const UsaMap = () => {
       return 0
     })
 
-    const geosJsx = geographies.map(({ feature: geo, path = '' }) => {
+    const geosJsx = geographies.map(({ feature: geo, path = '' }, geoIndex) => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
@@ -254,31 +248,51 @@ const UsaMap = () => {
         }
 
         const getArrowDirection = (geoData, geo, bgColor) => {
-          let centroid = projection(geoCentroid(geo))
+          const centroid = projection(geoCentroid(geo))
 
           const iconSize = 8
 
-          let textColor = '#FFF'
-
-          // Dynamic text color
-          if (chroma.contrast(textColor, bgColor) < 3.5) {
-            textColor = '#202020' // dark gray
-          }
+          const textColor = getContrastColor('#FFF', bgColor)
 
           return (
             <>
               {state.hexMap.shapeGroups.map((group, groupIndex) => {
                 return group.items.map((item, itemIndex) => {
-                  if (item.operator === '=') {
-                    if (geoData[item.key] === item.value || Number(geoData[item.key]) == Number(item.value)) {
-                      return (
-                        <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${itemIndex}`}>
-                          {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
-                          {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
-                          {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}
-                        </Group>
-                      )
-                    }
+                  switch (item.operator) {
+                    case '=':
+                      if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
+                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '≠':
+                      if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
+                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '<':
+                      if (Number(geoData[item.key]) < Number(item.value)) {
+                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '>':
+                      if (Number(geoData[item.key]) > Number(item.value)) {
+                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '<=':
+                      if (Number(geoData[item.key]) <= Number(item.value)) {
+                        return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                      }
+                      break
+                    case '>=':
+                      if (item.operator === '>=') {
+                        if (Number(geoData[item.key]) >= Number(item.value)) {
+                          return <HexIcon item={item} index={itemIndex} centroid={centroid} iconSize={iconSize} />
+                        }
+                      }
+                      break
+                    default:
+                      break
                   }
                 })
               })}
@@ -286,33 +300,26 @@ const UsaMap = () => {
           )
         }
 
-        const sizes = {
-          small: '8',
-          medium: '10',
-          large: '12'
-        }
-
         return (
-          <g data-name={geoName} key={key}>
-            <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id='tooltip' data-tooltip-html={tooltip}>
+          <g data-name={geoName} key={key} tabIndex={-1}>
+            <g className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} id={geoName} data-tooltip-id='tooltip' data-tooltip-html={tooltip} tabIndex={-1}>
+              {/* state path */}
               <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
-              {state.map.patterns.map((patternData, patternIndex) => {
-                let { pattern, dataKey, size } = patternData
-                let defaultPatternColor = 'black'
 
+              {/* apply patterns on top of state path*/}
+              {state.map.patterns.map((patternData, patternIndex) => {
+                const { pattern, dataKey, size } = patternData
+                const currentFill = styles.fill
                 const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
-
-                if (chroma.contrast(defaultPatternColor, legendColors[0]) < 3.5) {
-                  defaultPatternColor = 'white'
-                }
+                const patternColor = getContrastColor('#000', currentFill)
 
                 return (
                   hasMatchingValues && (
                     <>
-                      {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                      {pattern === 'circles' && <PatternCircles id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                      {pattern === 'lines' && <PatternLines id={`${dataKey}--${patternIndex}`} height={sizes[size] ?? 6} width={sizes[size] ?? 6} stroke={defaultPatternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
-                      <path className={`pattern-geoKey--${dataKey}`} tabIndex={-1} stroke='transparent' d={path} fill={`url(#${dataKey}--${patternIndex})`} />
+                      {pattern === 'waves' && <PatternWaves id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 10} width={patternSizes[size] ?? 10} fill={patternColor} />}
+                      {pattern === 'circles' && <PatternCircles id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 10} width={patternSizes[size] ?? 10} fill={patternColor} />}
+                      {pattern === 'lines' && <PatternLines id={`${dataKey}--${geoIndex}`} height={patternSizes[size] ?? 6} width={patternSizes[size] ?? 6} stroke={patternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+                      <path className={`pattern-geoKey--${dataKey}`} tabIndex={-1} stroke='transparent' d={path} fill={`url(#${dataKey}--${geoIndex})`} />
                     </>
                   )
                 )
@@ -326,8 +333,8 @@ const UsaMap = () => {
 
       // Default return state, just geo with no additional information
       return (
-        <g data-name={geoName} key={key}>
-          <g className='geo-group' style={styles}>
+        <g data-name={geoName} key={key} tabIndex={-1}>
+          <g className='geo-group' style={styles} tabIndex={-1}>
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
             {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
           </g>
@@ -375,12 +382,7 @@ const UsaMap = () => {
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020' // dark gray
-    }
+    let textColor = getContrastColor('#FFF', bgColor)
 
     // always make HI black since it is off to the side
     if (abbr === 'US-HI' && !state.general.displayAsHex) {
@@ -398,7 +400,7 @@ const UsaMap = () => {
 
     if (undefined === offsets[abbr] || isHex) {
       return (
-        <g transform={`translate(${centroid})`}>
+        <g transform={`translate(${centroid})`} tabIndex={-1}>
           <text x={x} y={y} fontSize={14} strokeWidth='0' style={{ fill: textColor }} textAnchor='middle'>
             {abbr.substring(3)}
           </text>
@@ -409,7 +411,7 @@ const UsaMap = () => {
     let [dx, dy] = offsets[abbr]
 
     return (
-      <g>
+      <g tabIndex={-1}>
         <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
         <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
           {abbr.substring(3)}

package/src/components/UsaMap/helpers/patternSizes.tsx

@@ -0,0 +1,5 @@
+export const patternSizes = {
+  small: 8,
+  medium: 10,
+  large: 12
+}

package/src/components/WorldMap/components/WorldMap.jsx

@@ -154,7 +154,9 @@ const WorldMap = props => {
           styles.cursor = 'pointer'
         }
 
-        return <Geo additionalData={additionalData} geoData={geoData} state={state} key={i + '-geo'} style={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
+        return (
+          <Geo additionalData={additionalData} geoData={geoData} state={state} key={i + '-geo'} style={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} tabIndex={-1} />
+        )
       }
 
       // Default return state, just geo with no additional information

package/src/data/initial-state.js

@@ -95,6 +95,9 @@ export default {
     maxBubbleSize: 20,
     extraBubbleBorder: false,
     cityStyle: 'circle',
+    cityStyleLabel: '',
+    showBubbleZeros: false,
+    additionalCityStyles: [],
     geoCodeCircleSize: 8,
     showBubbleZeros: false
   },

package/src/data/supported-geos.js

@@ -499,7 +499,7 @@ export const supportedCountries = {
   ATA: ['Antarctica'],
   'Madeira Islands': ['Madeira Islands'],
   'Gaza/West Bank': ['Gaza/West Bank'],
-  'Saint Paul and Amsterdamn Islands': ['Saint Paul and Amsterdamn Islands'],
+  'Saint Paul and Amsterdam Islands': ['Saint Paul and Amsterdam Islands'],
   'Sovereign Base Areas of Akrotiri and Dhekelia': ['Sovereign Base Areas of Akrotiri and Dhekelia'],
   'Plazas de Soberania': ['Plazas de Soberania'],
   Akrotiri: ['Akrotiri'],

package/src/scss/editor-panel.scss

@@ -280,6 +280,9 @@
       span.h5 {
         font-size: 0.8em;
       }
+      & p.layer-purpose-details {
+        margin-top: 1em;
+      }
     }
 
     .advanced {

package/src/scss/main.scss

@@ -121,7 +121,7 @@
           cursor: pointer;
           width: 1em;
         }
-        span.navigation-link {
+        a.navigation-link {
           text-decoration: underline;
           cursor: pointer;
           color: #075290;
@@ -129,6 +129,7 @@
           svg {
             display: inline-block;
             max-width: 13px;
+            margin-left: .5em;
           }
         }
         &.capitalize p {

package/src/types/MapConfig.ts

@@ -11,10 +11,15 @@ export type MapVisualSettings = {
   extraBubbleBorder: boolean
   /** cityStyle - visual indicator of cities on state maps */
   cityStyle: 'circle' | 'pin'
+  /** cityStyle - optional visual indicator of label on the Legend */
+  cityStyleLabel: string
   /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
+
   geoCodeCircleSize: number
   /** showBubbleZeros - shows circles on maps when the data is provided even if its a zero value */
   showBubbleZeros: boolean
+  /** additionalCityStyles - shows Circle, Square, Triangle, Rhombus/Diamond, Star, Map Pin on maps when the additionalCityStyles is added */
+  additionalCityStyles: [] | [{ label: string; column: string; value: string; shape: string }]
 }
 
 type PatternSelection = {
@@ -26,6 +31,8 @@ type PatternSelection = {
   pattern: 'lines' | 'circles' | 'waves'
   // optional legend update
   label: string
+  // size of pattern
+  size: 'small' | 'medium' | 'large'
 }
 
 export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>