@cdc/chart 4.23.2 → 4.23.4

package/examples/dynamic-legends.json

@@ -1,125 +0,0 @@
-{
-  "type": "chart",
-  "title": "Example Line Chart",
-  "theme": "theme-green",
-  "fontSize": "medium",
-  "height": "375",
-  "padding": {
-    "left": 5,
-    "right": 5
-  },
-  "yAxis": {
-    "size": "75",
-    "gridLines": false,
-    "label": "Y-Axis Example Label",
-    "numTicks": "9"
-  },
-  "barThickness": 0.35,
-  "xAxis": {
-    "size": "77",
-    "tickRotation": "25",
-    "dataKey": "Date",
-    "label": "X-Axis Example Label",
-    "type": "date",
-    "dateParseFormat": "%d/%m/%Y",
-    "dateDisplayFormat": "%d/%m/%Y"
-  },
-  "table": {
-    "label": "Data Table",
-    "expanded": true,
-    "download": true
-  },
-  "legend": {
-    "behavior": "isolate",
-    "position": "right",
-    "label": "Type of Data",
-    "dynamicLegend": false
-  },
-  "palette": "qualitative-bold",
-  "labels": false,
-  "dataFormat": {},
-  "confidenceKeys": {},
-  "data": [
-    {
-      "Date": "1/15/2016",
-      "Alabama": "90",
-      "Alaska": "135",
-      "Arizona": "300",
-      "Arkansas": "95",
-      "California": "120",
-      "Colorado": "310"
-    },
-    {
-      "Date": "2/15/2016",
-      "Alabama": "40",
-      "Alaska": "90",
-      "Arizona": "240",
-      "Arkansas": "60",
-      "California": "160",
-      "Colorado": "200"
-    },
-    {
-      "Date": "3/15/2016",
-      "Alabama": "50",
-      "Alaska": "300",
-      "Arizona": "290",
-      "Arkansas": "100",
-      "California": "200",
-      "Colorado": "250"
-    },
-    {
-      "Date": "4/15/2016",
-      "Alabama": "120",
-      "Alaska": "160",
-      "Arizona": "230",
-      "Arkansas": "180",
-      "California": "160",
-      "Colorado": "220"
-    },
-    {
-      "Date": "5/15/2016",
-      "Alabama": "80",
-      "Alaska": "350",
-      "Arizona": "300",
-      "Arkansas": "150",
-      "California": "130",
-      "Colorado": "100"
-    },
-    {
-      "Date": "6/15/2016",
-      "Alabama": "90",
-      "Alaska": "220",
-      "Arizona": "320",
-      "Arkansas": "100",
-      "California": "220",
-      "Colorado": "300"
-    }
-  ],
-  "visualizationType": "Line",
-  "series": [
-    {
-      "dataKey": "Alabama",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Alaska",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Arizona",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Arkansas",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "California",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Colorado",
-      "type": "Bar"
-    }
-  ]
-}

package/examples/line-chart.json

@@ -1,34 +0,0 @@
-{
-  "type": "chart",
-  "title": "Example Line Chart",
-  "theme": "theme-green",
-  "fontSize": "medium",
-  "height": "375",
-  "padding": { "left": 5, "right": 5 },
-  "yAxis": { "size": "75", "gridLines": false, "label": "Y-Axis Example Label", "numTicks": "9" },
-  "barThickness": 0.35,
-  "xAxis": { "size": "77", "tickRotation": "25", "dataKey": "Date", "label": "X-Axis Example Label", "type": "date", "dateParseFormat": "%d/%m/%Y", "dateDisplayFormat": "%d/%m/%Y" },
-  "table": { "label": "Data Table", "expanded": true, "download": true },
-  "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
-  "palette": "qualitative-bold",
-  "labels": false,
-  "dataFormat": {},
-  "confidenceKeys": {},
-  "data": [
-    { "Date": "1/15/2016", "Data 1": "90", "Data 2": "135", "Data 3": "300", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
-    { "Date": "2/15/2016", "Data 1": "40", "Data 2": "90", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
-    { "Date": "3/15/2016", "Data 1": "50", "Data 2": "300", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
-    { "Date": "4/15/2016", "Data 1": "120", "Data 2": "160", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
-    { "Date": "5/15/2016", "Data 1": "80", "Data 2": "350", "Data 3": "300", "Data 4": "150", "Data 5": "130", "Data 6": "100" },
-    { "Date": "6/15/2016", "Data 1": "90", "Data 2": "220", "Data 3": "320", "Data 4": "100", "Data 5": "220", "Data 6": "300" }
-  ],
-  "visualizationType": "Line",
-  "series": [
-    { "dataKey": "Data 1", "type": "Bar" },
-    { "dataKey": "Data 2", "type": "Bar" },
-    { "dataKey": "Data 3", "type": "Bar" },
-    { "dataKey": "Data 4", "type": "Bar" },
-    { "dataKey": "Data 5", "type": "Bar" },
-    { "dataKey": "Data 6", "type": "Bar" }
-  ]
-}

package/examples/planet-example-config.json

@@ -1,37 +0,0 @@
-{
-  "title": "Planet Radius (Bar Example)",
-  "dataUrl": "/examples/planet-example-data.json",
-  "visualizationType": "Bar",
-  "visualizationSubType": "regular",
-  "series": [{ "dataKey": "Radius" }],
-  "fontSize": "medium",
-  "dataCutoff": "0.5",
-  "orientation": "vertical",
-  "dataFormat": {
-    "roundTo": 1,
-    "commas": false,
-    "prefix": "",
-    "suffix": "km"
-  },
-  "padding": {
-    "left": 5,
-    "right": 5
-  },
-  "yAxis": {
-    "label": "Measurement (1000km)",
-    "rightSeries": "Diameter",
-    "rightLabel": "testing"
-  },
-  "xAxis": {
-    "label": "Planet",
-    "dataKey": "name",
-    "tickRotation": 30
-  },
-  "legend": {
-    "hide": false
-  },
-  "table": {
-    "label": "Data Table",
-    "expanded": false
-  }
-}

package/examples/temp-example-config.json

@@ -1,64 +0,0 @@
-{
-  "title": "Average Temperature By City (Line Example)",
-  "description": "<p>Average temperature from October 1st through August 29th in:</p><ul><li>New York</li><li>San Francisco</li><li>Austin</li></ul>",
-  "dataUrl": "/examples/temp-example-data.json",
-  "visualizationType": "Line",
-  "series": [
-    { "dataKey": "New York", "label": "NY" },
-    { "dataKey": "San Francisco", "label": "SF" },
-    { "dataKey": "Austin", "label": "AU" }
-  ],
-  "filters": [
-    {
-      "label": "Wind",
-      "columnName": "wind"
-    },
-    {
-      "label": "Humidity",
-      "columnName": "humidity"
-    }
-  ],
-  "seriesLabel": "City",
-  "fontSize": "large",
-  "dataFormat": {
-    "commas": false,
-    "prefix": "",
-    "suffix": "°"
-  },
-  "padding": {
-    "left": 15,
-    "right": 15
-  },
-  "yAxis": {
-    "label": "Temperature",
-    "paddingPercent": 0.15
-  },
-  "xAxis": {
-    "label": "Date",
-    "dataKey": "date",
-    "type": "date",
-    "dateParseFormat": "%Y-%m-%d",
-    "dateDisplayFormat": "%b %d",
-    "numTicks": 8,
-    "tickRotation": 50
-  },
-  "legend": {
-    "label": "Legend",
-    "above": true,
-    "left": true
-  },
-  "table": {
-    "label": "Data Table",
-    "expanded": false,
-    "download": true
-  },
-  "regions": [
-    {
-      "label": "Region",
-      "color": "black",
-      "background": "green",
-      "from": "2011-10-02",
-      "to": "2011-10-03"
-    }
-  ]
-}

package/examples/temp-example-data.json

@@ -1,130 +0,0 @@
-[
-  {
-    "date": "2011-10-01",
-    "New York": "89.4",
-    "San Francisco": "26.7",
-    "Austin": "34.2",
-    "wind": "Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-02",
-    "New York": "54.0",
-    "San Francisco": "59.9",
-    "Austin": "68.7",
-    "wind": "Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-03",
-    "New York": "51.3",
-    "San Francisco": "53.1",
-    "Austin": "64.4",
-    "wind": "Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-04",
-    "New York": "34.7",
-    "San Francisco": "56.8",
-    "Austin": "98.0",
-    "wind": "Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-01",
-    "New York": "32.4",
-    "San Francisco": "43.7",
-    "Austin": "54.2",
-    "wind": "Don't Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-02",
-    "New York": "65.0",
-    "San Francisco": "76.9",
-    "Austin": "87.7",
-    "wind": "Don't Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-03",
-    "New York": "53.3",
-    "San Francisco": "59.1",
-    "Austin": "69.4",
-    "wind": "Don't Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-04",
-    "New York": "55.7",
-    "San Francisco": "58.8",
-    "Austin": "68.0",
-    "wind": "Don't Include Wind",
-    "humidity": "Include Humidiy"
-  },
-  {
-    "date": "2011-10-01",
-    "New York": "63.4",
-    "San Francisco": "62.7",
-    "Austin": "72.2",
-    "wind": "Include Wind",
-    "humidity": "Don't Include Humidiy"
-  },
-  {
-    "date": "2011-10-02",
-    "New York": "58.0",
-    "San Francisco": "59.9",
-    "Austin": "67.7",
-    "wind": "Include Wind",
-    "humidity": "Don't Include Humidiy"
-  },
-  {
-    "date": "2011-10-03",
-    "New York": "53.3",
-    "San Francisco": "59.1",
-    "Austin": "69.4",
-    "wind": "Include Wind",
-    "humidity": "Don't Include Humidiy"
-  },
-  {
-    "date": "2011-10-04",
-    "New York": "55.7",
-    "San Francisco": "58.8",
-    "Austin": "68.0",
-    "wind": "Include Wind",
-    "humidity": "Don't Include Humidiy"
-  },
-  {
-    "date": "2011-10-01",
-    "New York": "63.4",
-    "San Francisco": "62.7",
-    "Austin": "87.2",
-    "wind": "Don't Include Wind",
-    "humidity": "Don't Include Humidiy"
-  },
-  {
-    "date": "2011-10-02",
-    "New York": "98.0",
-    "San Francisco": "59.9",
-    "Austin": "67.7",
-    "wind": "Don't Include Wind",
-    "humidity": "Don't Include Humidiy"
-  },
-  {
-    "date": "2011-10-03",
-    "New York": "53.3",
-    "San Francisco": "59.1",
-    "Austin": "69.4",
-    "wind": "Don't Include Wind",
-    "humidity": "Don't Include Humidiy"
-  },
-  {
-    "date": "2011-10-04",
-    "New York": "55.7",
-    "San Francisco": "54.8",
-    "Austin": "68.0",
-    "wind": "Don't Include Wind",
-    "humidity": "Don't Include Humidiy"
-  }
-]

package/src/components/Filters.jsx

@@ -1,125 +0,0 @@
-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