@cdc/chart 4.22.11 → 4.23.2

package/src/components/Filters.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useContext } from 'react'
+import ConfigContext from './../ConfigContext'
+import Button from '@cdc/core/components/elements/Button'
+
+const useFilters = () => {
+  const { config, setConfig, filteredData, setFilteredData, excludedData, filterData, runtimeFilters } = useContext(ConfigContext)
+  const [showApplyButton, setShowApplyButton] = useState(false)
+
+  const sortAsc = (a, b) => {
+    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+  }
+
+  const sortDesc = (a, b) => {
+    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+  }
+
+  const announceChange = text => { }
+
+  const changeFilterActive = (index, value) => {
+    let newFilters = config.filters
+    newFilters[index].active = value
+    setConfig({
+      ...config,
+      filters: newFilters
+    })
+    setShowApplyButton(true)
+  }
+
+  const handleApplyButton = newFilters => {
+    setConfig({ ...config, filters: newFilters })
+    setFilteredData(filterData(newFilters, excludedData))
+    setShowApplyButton(false)
+  }
+
+  const handleReset = () => {
+    let newFilters = config.filters
+
+    // reset to first item in values array.
+    newFilters.map(filter => {
+      filter.active = filter.values[0]
+    })
+
+    setFilteredData(filterData(newFilters, excludedData))
+    setConfig({ ...config, filters: newFilters })
+  }
+
+  return { handleApplyButton, changeFilterActive, announceChange, sortAsc, sortDesc, showApplyButton, handleReset }
+}
+
+const Filters = () => {
+  const { config } = useContext(ConfigContext)
+  const { handleApplyButton, changeFilterActive, announceChange, sortAsc, sortDesc, showApplyButton, handleReset } = useFilters()
+  const { filters } = config
+  const buttonText = 'Apply Filters'
+  const resetText = 'Reset All'
+
+  // A List of Dropdowns
+  const FilterList = () => {
+    if (config.filters) {
+      return config.filters.map((singleFilter, index) => {
+        const values = []
+
+        if (!singleFilter.order || singleFilter.order === '') {
+          singleFilter.order = 'asc'
+        }
+
+        if (singleFilter.order === 'desc') {
+          singleFilter.values = singleFilter.values.sort(sortDesc)
+        }
+
+        if (singleFilter.order === 'asc') {
+          singleFilter.values = singleFilter.values.sort(sortAsc)
+        }
+
+        singleFilter.values.forEach((filterOption, index) => {
+          values.push(
+            <option key={index} value={filterOption}>
+              {filterOption}
+            </option>
+          )
+        })
+
+        return (
+          <div className='single-filter' key={index}>
+            <label htmlFor={`filter-${index}`}>{singleFilter.label}</label>
+            <select
+              id={`filter-${index}`}
+              className='filter-select'
+              data-index='0'
+              value={singleFilter.active}
+              onChange={e => {
+                changeFilterActive(index, e.target.value)
+                announceChange(`Filter ${singleFilter.label} value has been changed to ${e.target.value}, please reference the data table to see updated values.`)
+              }}
+            >
+              {values}
+            </select>
+          </div>
+        )
+      })
+    } else {
+      return null
+    }
+  }
+
+  return (
+    <section className={`filters-section`} style={{ display: 'block', width: '100%' }}>
+      <div className='filters-section__wrapper' style={{ flexWrap: 'wrap', display: 'flex', gap: '7px 15px', marginTop: '15px' }}>
+        <FilterList />
+        {config.filters.length > 0 && (
+          <div className='filter-section__buttons' style={{ width: '100%' }}>
+            <Button onClick={() => handleApplyButton(filters)} disabled={!showApplyButton} style={{ marginRight: '10px' }}>
+              {buttonText}
+            </Button>
+            <a href='#!' role='button' onClick={handleReset}>
+              {resetText}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default Filters

package/src/components/Legend.jsx

@@ -0,0 +1,303 @@
+import React, { useContext, useEffect } from 'react'
+import ConfigContext from '../ConfigContext'
+import parse from 'html-react-parser'
+import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
+import LegendCircle from '@cdc/core/components/LegendCircle'
+
+import useLegendClasses from './../hooks/useLegendClasses'
+
+const Legend = () => {
+  const { config, legend, colorScale, seriesHighlight, highlight, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
+
+  const { innerClasses, containerClasses } = useLegendClasses(config)
+
+  useEffect(() => {
+    if (dynamicLegendItems.length === 0) return
+
+    let itemsToHighlight = dynamicLegendItems.map(item => item.text)
+
+    setSeriesHighlight(itemsToHighlight)
+
+    let colsToKeep = [...itemsToHighlight]
+    let tmpLabels = []
+
+    rawData.map(dataItem => {
+      let tmp = {}
+      colsToKeep.map(col => {
+        tmp[col] = isNaN(dataItem[col]) ? dataItem[col] : dataItem[col]
+      })
+      return tmp
+    })
+
+    colsToKeep.map(col => {
+      tmpLabels[col] = col
+    })
+
+    if (dynamicLegendItems.length > 0) {
+      setConfig({
+        ...config,
+        runtime: {
+          ...config.runtime,
+          seriesKeys: colsToKeep,
+          seriesLabels: tmpLabels
+        }
+      })
+    }
+  }, [dynamicLegendItems])
+
+  useEffect(() => {
+    if (dynamicLegendItems.length === 0) {
+      // loop through all labels and add keys
+      let resetSeriesNames = [...config.runtime.seriesLabelsAll]
+      let tmpLabels = []
+      config.runtime.seriesLabelsAll.map(item => {
+        resetSeriesNames.map(col => {
+          tmpLabels[col] = col
+        })
+      })
+
+      setConfig({
+        ...config,
+        runtime: {
+          ...config.runtime,
+          seriesKeys: config.runtime.seriesLabelsAll,
+          seriesLabels: tmpLabels
+        }
+      })
+    }
+  }, [dynamicLegendItems])
+
+  const removeDynamicLegendItem = label => {
+    let newLegendItems = dynamicLegendItems.filter(item => item.text !== label.text)
+    let newLegendItemsText = newLegendItems.map(item => item.text)
+    setDynamicLegendItems(newLegendItems)
+    setSeriesHighlight(newLegendItemsText)
+  }
+  const handleDynamicLegendChange = e => {
+    setDynamicLegendItems([...dynamicLegendItems, JSON.parse(e.target.value)])
+  }
+
+  const createLegendLabels = (data, defaultLabels) => {
+    const colorCode = config.legend?.colorCode
+    if (config.visualizationType !== 'Bar' || config.visualizationSubType !== 'regular' || !colorCode || config.series?.length > 1) {
+      return defaultLabels
+    }
+    let palette = colorPalettes[config.palette]
+
+    while (data.length > palette.length) {
+      palette = palette.concat(palette)
+    }
+    palette = palette.slice(0, data.length)
+    //store uniq values to Set by colorCode
+    const set = new Set()
+
+    data.forEach(d => set.add(d[colorCode]))
+
+    // create labels with uniq values
+    const uniqeLabels = Array.from(set).map((val, i) => {
+      const newLabel = {
+        datum: val,
+        index: i,
+        text: val,
+        value: palette[i]
+      }
+      return newLabel
+    })
+
+    return uniqeLabels
+  }
+  // in small screens update config legend position.
+  useEffect(() => {
+    if (currentViewport === 'sm' || currentViewport === 'xs' || config.legend.position === 'left') {
+      setConfig({ ...config, legend: { ...config.legend, position: 'bottom' } })
+    }
+    setConfig({ ...config, legend: { ...config.legend, position: 'right' } })
+  }, [currentViewport])
+
+  if (!legend) return
+
+  if (!legend.dynamicLegend)
+    return config.visualizationType !== 'Box Plot' ? (
+      <aside
+        style={{ marginTop: config.legend.position === 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px', marginBottom: config.legend.position === 'bottom' ? '15px' : '0px' }}
+        id='legend'
+        className={containerClasses.join(' ')}
+        role='region'
+        aria-label='legend'
+        tabIndex={0}
+      >
+        {legend.label && <h2>{parse(legend.label)}</h2>}
+        {legend.description && <p>{parse(legend.description)}</p>}
+        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+          {labels => (
+            <div className={innerClasses.join(' ')}>
+              {createLegendLabels(data, labels).map((label, i) => {
+                let className = 'legend-item'
+                let itemName = 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={labels => highlightReset(labels)} tabIndex={0}>
+                  Reset
+                </button>
+              )}
+            </div>
+          )}
+        </LegendOrdinal>
+      </aside>
+    ) : (
+      <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+        {config.boxplot.legend.displayHowToReadText && <h3>{config.boxplot.legend.howToReadText}</h3>}
+      </aside>
+    )
+  return (
+    config.visualizationType !== 'Box Plot' && (
+      <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+        {legend.label && <h2>{parse(legend.label)}</h2>}
+        {legend.description && <p>{parse(legend.description)}</p>}
+
+        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+          {labels => {
+            if (
+              Number(config.legend.dynamicLegendItemLimit) > dynamicLegendItems.length && // legend items are less than limit
+              dynamicLegendItems.length !== config.runtime.seriesLabelsAll.length
+            ) {
+              // legend items are equal to series length
+              return (
+                <select className='dynamic-legend-dropdown' onChange={e => handleDynamicLegendChange(e)}>
+                  <option className={'all'} tabIndex={0} value={JSON.stringify({ text: config.legend.dynamicLegendDefaultText })}>
+                    {config.legend.dynamicLegendDefaultText}
+                  </option>
+                  {labels.map((label, i) => {
+                    let className = 'legend-item'
+                    let itemName = label.datum
+                    let inDynamicList = false
+
+                    // 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'
+                    }
+
+                    dynamicLegendItems.map(listItem => {
+                      if (listItem.text === label.text) {
+                        inDynamicList = true
+                      }
+                    })
+
+                    if (inDynamicList) return true
+                    let palette = colorPalettes[config.palette]
+
+                    label.value = palette[dynamicLegendItems.length]
+
+                    return (
+                      <option className={className} tabIndex={0} value={JSON.stringify(label)}>
+                        {label.text}
+                      </option>
+                    )
+                  })}
+                </select>
+              )
+            } else {
+              return config.legend.dynamicLegendItemLimitMessage
+            }
+          }}
+        </LegendOrdinal>
+
+        <div className='dynamic-legend-list'>
+          {dynamicLegendItems.map((label, i) => {
+            let className = ['legend-item']
+            let itemName = label.text
+            let palette = colorPalettes[config.palette]
+
+            // Filter excluded data keys from legend
+            if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+              return
+            }
+
+            if (config.runtime.seriesLabels && !config.legend.dynamicLegend) {
+              let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+              itemName = config.runtime.seriesKeys[index]
+            }
+
+            if (seriesHighlight.length > 0 && !seriesHighlight.includes(itemName)) {
+              className.push('inactive')
+            }
+
+            if (seriesHighlight.length === 0 && config.legend.dynamicLegend) {
+              className.push('inactive')
+            }
+
+            return (
+              <>
+                <LegendItem className={className.join(' ')} tabIndex={0} key={`dynamic-legend-item-${i}`} alignItems='center'>
+                  <button
+                    className='btn-wrapper'
+                    onClick={() => {
+                      highlight(label)
+                    }}
+                  >
+                    <LegendCircle fill={palette[i]} config={config} />
+                    <LegendLabel align='space-between' margin='4px 0 0 4px'>
+                      {label.text}
+                    </LegendLabel>
+                  </button>
+                  <button onClick={() => removeDynamicLegendItem(label)}>x</button>
+                </LegendItem>
+              </>
+            )
+          })}
+        </div>
+        {seriesHighlight.length < dynamicLegendItems.length && (
+          <button className={`legend-reset legend-reset--dynamic ${config.theme}`} onClick={highlightReset} tabIndex={0}>
+            Reset
+          </button>
+        )}
+      </aside>
+    )
+  )
+}
+
+export default Legend

package/src/components/{LineChart.tsx → LineChart.jsx}

@@ -7,12 +7,15 @@ import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 
 import useRightAxis from '../hooks/useRightAxis'
 
 export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, updateConfig } = useContext<any>(Context)
+  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, cleanData, updateConfig } = useContext(ConfigContext)
+  // Just do this once up front otherwise we end up
+  // calling clean several times on same set of data (TT)
+  const cleanedData = cleanData(data, config.xAxis.dataKey)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
   const handleLineType = lineType => {
@@ -28,9 +31,22 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
     }
   }
 
+  const handleAxisFormating = (axis = 'left', label, value) => {
+    // if this is an x axis category/date value return without doing any formatting.
+    if (label === config.runtime.xAxis.label) return value
+
+    axis = String(axis).toLocaleLowerCase()
+    if (label) {
+      return `${label}: ${formatNumber(value, axis)}`
+    }
+    return `${formatNumber(value, axis)}`
+  }
+
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={config.runtime.yAxis.size}>
+      <Group left={config.runtime.yAxis.size ? parseInt(config.runtime.yAxis.size) : 66}>
+        {' '}
+        {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
           let lineType = config.series.filter(item => item.dataKey === seriesKey)[0].type
           const seriesData = config.series.filter(item => item.dataKey === seriesKey)
@@ -42,28 +58,41 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
               opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
               display={config.legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !config.legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
             >
-              {data.map((d, dataIndex) => {
-                let seriesAxis = config.series.filter(s => s.dataKey === seriesKey)[0].axis
+              {cleanedData.map((d, dataIndex) => {
+                // Find the series object from the config.series array that has a dataKey matching the seriesKey variable.
+                const series = config.series.find(({ dataKey }) => dataKey === seriesKey)
+                const { axis } = series
+
                 const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey]
-                const yAxisValue = formatNumber(getYAxisData(d, seriesKey));
-                let yAxisTooltip = config.runtime.yAxis.isLegendValue ? `${seriesKey}: ${yAxisValue} ` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue;
-                let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
-                if (seriesAxis === 'Left') {
-                  yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-                } else {
-                  yAxisTooltip = config.runtime.yAxis.rightLabel ? `${config.runtime.yAxis.rightLabel}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-                }
+                const yAxisValue = getYAxisData(d, seriesKey)
+
+                const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+                const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
+                let label = config.runtime.yAxis[labeltype]
+                // if has muiltiple series dont show legend value on tooltip
+                if (!hasMultipleSeries) label = config.isLegendValue ? config.runtime.seriesLabels[seriesKey] : label
+
+                let yAxisTooltip = handleAxisFormating(axis, label, yAxisValue)
+                let xAxisTooltip = handleAxisFormating(axis, config.runtime.xAxis.label, xAxisValue)
+
                 const tooltip = `<div>
+                    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && Object.keys(config.runtime.seriesLabels).length > 1 ? `${config.runtime.seriesLabels[seriesKey] || ''}<br/>` : ''}
                     ${yAxisTooltip}<br />
-                    ${xAxisTooltip}<br />
-                    ${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
+                    ${xAxisTooltip}
                   </div>`
                 let circleRadii = 4.5
+
                 return (
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
                   d[seriesKey] !== null && (
+                    // isNumber(d[seriesKey]) &&
+                    // isNumber(getYAxisData(d, seriesKey)) &&
+                    // isNumber(getXAxisData(d)) &&
+                    // isNumber(yScaleRight(getXAxisData(d))) &&
+                    // isNumber(yScale(getXAxisData(d))) &&
                     <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                      {/* Render legend */}
                       <Text
                         display={config.labels ? 'block' : 'none'}
                         x={xScale(getXAxisData(d))}
@@ -77,12 +106,12 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                       <circle
                         key={`${seriesKey}-${dataIndex}`}
                         r={circleRadii}
-                        cx={xScale(getXAxisData(d))}
+                        cx={Number(xScale(getXAxisData(d)))}
                         cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))}
                         fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
                         style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
-                        data-tip={tooltip}
-                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        data-tooltip-html={tooltip}
+                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                       />
                     </Group>
                   )
@@ -91,7 +120,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
 
               <LinePath
                 curve={allCurves.curveLinear}
-                data={data}
+                data={cleanedData}
                 x={d => xScale(getXAxisData(d))}
                 y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
                 stroke={
@@ -107,14 +136,50 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 strokeOpacity={1}
                 shapeRendering='geometricPrecision'
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
-                defined={(item,i) => {
-                  return item[config.runtime.seriesLabels[seriesKey]] !== "" && item[config.runtime.seriesLabels[seriesKey]] !== null;
+                defined={(item, i) => {
+                  return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null && item[config.runtime.seriesLabels[seriesKey]] !== undefined
                 }}
               />
+              {config.animate && (
+                <LinePath
+                  className='animation'
+                  curve={allCurves.curveLinear}
+                  data={cleanedData}
+                  x={d => xScale(getXAxisData(d))}
+                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
+                  stroke='#fff'
+                  strokeWidth={3}
+                  strokeOpacity={1}
+                  shapeRendering='geometricPrecision'
+                  strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                  defined={(item, i) => {
+                    return isNumber(item[config.runtime.seriesLabels[seriesKey]])
+                  }}
+                />
+              )}
+
+              {/* Render series labels at end if each line if selected in the editor */}
+              {config.showLineSeriesLabels &&
+                (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {
+                  let lastDatum
+                  for (let i = data.length - 1; i >= 0; i--) {
+                    if (data[i][seriesKey]) {
+                      lastDatum = data[i]
+                      break
+                    }
+                  }
+                  if (!lastDatum) {
+                    return <></>
+                  }
+                  return (
+                    <text x={xScale(getXAxisData(lastDatum)) + 5} y={yScale(getYAxisData(lastDatum, seriesKey))} alignmentBaseline='middle' fill={config.colorMatchLineSeriesLabels && colorScale ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey) : 'black'}>
+                      {config.runtime.seriesLabels[seriesKey] || seriesKey}
+                    </text>
+                  )
+                })}
             </Group>
           )
         })}
-
         {/* Message when dynamic legend and nothing has been picked */}
         {config.legend.dynamicLegend && seriesHighlight.length === 0 && (
           <Text x={xMax / 2} y={yMax / 2} fill='black' textAnchor='middle' color='black'>