@cdc/chart 4.22.11 → 4.23.2

package/src/components/Legend.js

@@ -1,284 +0,0 @@
-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/useIntersectionObserver.tsx

@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export default function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }) {
-  const [entry, setEntry] = useState<any>()
-
-  const frozen = entry?.isIntersecting && freezeOnceVisible
-
-  const updateEntry = ([entry]) => {
-    setEntry(entry)
-  }
-
-  useEffect(() => {
-    const node = elementRef?.current
-    const hasIOSupport = !!window.IntersectionObserver
-
-    if (!hasIOSupport || frozen || !node) return
-
-    const observerParams = { threshold, root, rootMargin }
-    const observer = new IntersectionObserver(updateEntry, observerParams)
-
-    observer.observe(node)
-
-    return () => observer.disconnect()
-  }, [elementRef, threshold, root, rootMargin, frozen])
-
-  return entry
-}

package/src/index.tsx

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