@cdc/chart 4.23.1 → 4.23.3

package/src/components/Legend.js

@@ -1,291 +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
-        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>
-    )
-
-  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/SparkLine.js

@@ -1,185 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-
-import * as allCurves from '@visx/curve'
-import { Group } from '@visx/group'
-import { LinePath } from '@visx/shape'
-import { Text } from '@visx/text'
-import { scaleLinear, scalePoint } from '@visx/scale'
-import { AxisBottom } from '@visx/axis'
-import { MarkerArrow } from '@visx/marker'
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-
-import ReactTooltip from 'react-tooltip'
-
-import useReduceData from '../hooks/useReduceData'
-
-import Context from '../context'
-
-export default function SparkLine({ width: parentWidth, height: parentHeight }) {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(Context)
-  let width = parentWidth
-  const { minValue, maxValue } = useReduceData(config, data)
-
-  const margin = { top: 5, right: 10, bottom: 10, left: 10 }
-  const height = parentHeight
-
-  const xMax = width - config.runtime.yAxis.size
-  const yMax = height - margin.top - 20
-
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
-  const getYAxisData = (d, seriesKey) => d[seriesKey]
-
-  let xScale
-  let yScale
-  let seriesScale
-  const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
-  const isMaxValid = Number(enteredMaxValue) >= Number(maxValue)
-  const isMinValid = Number(enteredMinValue) <= Number(minValue)
-
-  if (data) {
-    let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-    let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
-
-    if (max === Number.MIN_VALUE) {
-      max = maxValue
-    }
-
-    //Adds Y Axis data padding if applicable
-    if (config.runtime.yAxis.paddingPercent) {
-      let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent
-      min -= paddingValue
-      max += paddingValue
-    }
-
-    let xAxisDataMapped = data.map(d => getXAxisData(d))
-
-    if (config.runtime.horizontal) {
-      xScale = scaleLinear({
-        domain: [min, max],
-        range: [0, xMax]
-      })
-
-      yScale = config.runtime.xAxis.type === 'date' ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] }) : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
-
-      seriesScale = scalePoint({
-        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
-        range: [0, yMax]
-      })
-
-      yScale.rangeRound([0, yMax])
-    } else {
-      min = min < 0 ? min * 1.11 : min
-
-      yScale = scaleLinear({
-        domain: [min, max],
-        range: [yMax - margin.bottom, margin.top]
-      })
-
-      xScale = scalePoint({
-        domain: xAxisDataMapped,
-        range: [margin.left, width - margin.right]
-      })
-
-      seriesScale = scalePoint({
-        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
-        range: [0, xMax]
-      })
-    }
-  }
-
-  const handleSparkLineTicks = [xScale.domain()[0], xScale.domain()[xScale.domain().length - 1]]
-
-  useEffect(() => {
-    ReactTooltip.rebuild()
-  })
-
-  return (
-    <ErrorBoundary component='SparkLine'>
-      <svg role='img' aria-label={handleChartAriaLabels(config)} width={width} height={height} className={'sparkline'} tabIndex={0}>
-        {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => (
-          <>
-            <Group
-              className='sparkline-group'
-              height={parentHeight}
-              style={{ height: parentHeight }}
-              top={margin.top}
-              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) => {
-                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}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
-
-                const tooltip = `<div>
-									${yAxisTooltip}<br />
-									${xAxisTooltip}<br />
-									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''} 
-									</div>`
-
-                let circleRadii = 4.5
-                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>
-
-                    {dataIndex + 1 !== data.length && (config.lineDatapointStyle === 'always show' || config.lineDatapointStyle === 'hover') && (
-                      <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'
-                marker-end={`url(#${'arrow'}--${index})`}
-              />
-              <MarkerArrow
-                id={`arrow--${index}`}
-                refX={2}
-                size={6}
-                marker-end={`url(#${'arrow'}--${index})`}
-                strokeOpacity={1}
-                fillOpacity={1}
-                // stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-              />
-            </Group>
-            <AxisBottom
-              top={yMax + margin.top}
-              hideAxisLine
-              hideTicks
-              scale={xScale}
-              tickValues={handleSparkLineTicks}
-              tickFormat={formatDate}
-              stroke={'black'}
-              tickStroke={'black'}
-              tickLabelProps={() => ({
-                fill: 'black',
-                fontSize: 11,
-                textAnchor: 'middle'
-              })}
-            />
-          </>
-        ))}
-      </svg>
-    </ErrorBoundary>
-  )
-}

package/src/hooks/useColorPalette.ts

@@ -1,76 +0,0 @@
-import { useEffect, useReducer } from 'react'
-
-// constants
-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 = {
-  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 = ''
-  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'))
-      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'))
-      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) {
-  const [state, dispatch] = useReducer(reducer, initialState, init)
-  const { paletteName, isPaletteReversed, filteredPallets, filteredQualitative } = state
-
-  useEffect(() => {
-    dispatch({ type: SEQUENTIAL, payload: colorPalettes })
-  }, [])
-
-  useEffect(() => {
-    if (configState.isPaletteReversed) {
-      dispatch({ type: 'SEQUENTIAL_REVERSE', payload: colorPalettes })
-      return () => dispatch({ type: 'SEQUENTIAL', payload: colorPalettes })
-    }
-  }, [configState.isPaletteReversed, dispatch, colorPalettes])
-
-  return { paletteName, isPaletteReversed, filteredPallets, filteredQualitative, dispatch }
-}

package/src/index.html

@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <style>
-      body {
-        /* max-width: 1000px; */
-        margin: 0 auto !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      .react-container + .react-container {
-        margin-top: 3rem;
-      }
-    </style>
-  </head>
-
-  <body>
-    <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
-
-    <!-- <select id="cove_select">
-      <option value=""">Choose An Option</option>
-      <option value="Non-Hispanic White">Non-Hispanic White</option>
-      <option value="Hispanic or Latino">Test 2</option>
-    </select> -->
-
-    <!-- <div class="react-container" data-config="/examples/private/filters.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/private/yaxis-test.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/dynamic-legends.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div>-->
-<!--     <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div>-->
-    <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
-    <!--<div class="react-container" data-config="/examples/case-rate-example-config.json"></div>-->
-    <!-- <div class="react-container" data-config="/examples/private/textelements.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/private/example-bar-chart.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div>  -->
-    <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
-
-    <!-- HORIZONTAL BAR CHARTS -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
-
-    <!-- VERTICAL BAR CHARTS -->
-    <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div>
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-with-confidence.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/box-plot.json"></div> -->
-
-    <!-- LOLLIPOP CHARTS -->
-    <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
-
-    <!-- PAIRED BAR CHARTS -->
-    <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
-
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-  </body>
-</html>

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
-  )
-})