@cdc/chart 1.3.4 → 4.22.11

package/src/components/Legend.js

@@ -0,0 +1,284 @@
+import React, { useContext, useEffect } from 'react'
+import Context from '../context'
+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, setFilteredData, colorPalettes, rawData, setConfig } = useContext(Context)
+
+  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
+  }
+
+  if (!legend) return
+
+  if (!legend.dynamicLegend)
+    return (
+      <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 => (
+            <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>
+    )
+
+  return (
+    <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

@@ -1,76 +1,127 @@
-import React, { useContext } from 'react';
+import React, { useContext } from 'react'
 
-import * as allCurves from '@visx/curve';
-import { Group } from '@visx/group';
-import { LinePath } from '@visx/shape';
-import { Text } from '@visx/text';
+import * as allCurves from '@visx/curve'
+import { Group } from '@visx/group'
+import { LinePath } from '@visx/shape'
+import { Text } from '@visx/text'
 
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-import Context from '../context';
+import Context from '../context'
 
-export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber,formatDate,parseDate } = useContext<any>(Context);
+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 { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
+
+  const handleLineType = lineType => {
+    switch (lineType) {
+      case 'dashed-sm':
+        return '5 5'
+      case 'dashed-md':
+        return '10 5'
+      case 'dashed-lg':
+        return '15 5'
+      default:
+        return 0
+    }
+  }
 
   return (
-    <ErrorBoundary component="LineChart">
+    <ErrorBoundary component='LineChart'>
       <Group left={config.runtime.yAxis.size}>
-        { (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => (
-          <Group
-            key={`series-${seriesKey}`}
-            opacity={config.legend.behavior === "highlight" && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-            display={config.legend.behavior === "highlight" || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
-          >
-            { data.map((d, dataIndex) => {
-              const xAxisValue = config.runtime.xAxis.type==='date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey];
-              let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-              let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` :xAxisValue;
+        {(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)
+          const seriesAxis = seriesData[0].axis ? seriesData[0].axis : 'left'
+
+          return (
+            <Group
+              key={`series-${seriesKey}`}
+              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
+                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 tooltip = `<div>
+                    ${yAxisTooltip}<br />
+                    ${xAxisTooltip}<br />
+                    ${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
+                  </div>`
+                let circleRadii = 4.5
+                return (
+                  d[seriesKey] !== undefined &&
+                  d[seriesKey] !== '' &&
+                  d[seriesKey] !== null && (
+                    <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                      <Text
+                        display={config.labels ? 'block' : 'none'}
+                        x={xScale(getXAxisData(d))}
+                        y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))}
+                        fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                        textAnchor='middle'
+                      >
+                        {formatNumber(d[seriesKey])}
+                      </Text>
 
-              const tooltip = `<div>
-              ${yAxisTooltip}<br />
-              ${xAxisTooltip}<br />
-              ${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''} 
-            </div>`
+                      <circle
+                        key={`${seriesKey}-${dataIndex}`}
+                        r={circleRadii}
+                        cx={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}`}
+                      />
+                    </Group>
+                  )
+                )
+              })}
 
-              let circleRadii = 4.5
+              <LinePath
+                curve={allCurves.curveLinear}
+                data={data}
+                x={d => xScale(getXAxisData(d))}
+                y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
+                stroke={
+                  colorScale && !config.legend.dynamicLegend
+                    ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
+                    : // is dynamic legend
+                    config.legend.dynamicLegend
+                    ? colorPalettes[config.palette][index]
+                    : // fallback
+                      '#000'
+                }
+                strokeWidth={2}
+                strokeOpacity={1}
+                shapeRendering='geometricPrecision'
+                strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                defined={(item,i) => {
+                  return item[config.runtime.seriesLabels[seriesKey]] !== "" && item[config.runtime.seriesLabels[seriesKey]] !== null;
+                }}
+              />
+            </Group>
+          )
+        })}
 
-              return (
-                <Group key={`series-${seriesKey}-point-${dataIndex}`}>
-                <Text
-                    display={config.labels ? 'block' : 'none'}
-                    x={xScale(getXAxisData(d))}
-                    y={yScale(getYAxisData(d, seriesKey))}
-                    fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                    textAnchor="middle">
-                      {formatNumber(d[seriesKey])}
-                  </Text>
-                  <circle
-                    key={`${seriesKey}-${dataIndex}`}
-                    r={circleRadii}
-                    cx={xScale(getXAxisData(d))}
-                    cy={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}`}
-                  />
-                </Group>
-            )
-            })}
-            <LinePath
-              curve={allCurves.curveLinear}
-              data={data}
-              x={(d) => xScale(getXAxisData(d))}
-              y={(d) => yScale(getYAxisData(d, seriesKey))}
-              stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-              strokeWidth={2}
-              strokeOpacity={1}
-              shapeRendering="geometricPrecision"
-            />
-          </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'>
+            {config.legend.dynamicLegendChartMessage}
+          </Text>
+        )}
       </Group>
     </ErrorBoundary>
-  );
+  )
 }