Members
# constant CenteredChartTitle
Helper component for styling title of a chart
# constant ChartTitle
Component H3 element for charts
Example
;() => <ChartTitle>My cool chart</ChartTitle>Object
# constant colorScales
Color scales for mapping {[Key: string]: [r: number, g: number, b: number][]}
# constant FileUploader
Helper component for uploading files
Example
function MyComponent() {
const [file, setFile] = useState(null)
const [error, setError] = useState({ error: null })
return (
<FileUploader
onFileSelectSuccess={setFile}
onFileSelectError={setError}
/>
)
}Object
# constant fixedScales
Map bins and breaks {[Key: string]: { bins: strinp[], breaks?: number[]}}
# constant FormButton
Styled form button. Uses default HTML button API.
Example
function MyComponent() {
return (
<FormButton
color="red"
active={true}
disabled={false}
onClick={() => console.log('clicked')}
>
My Button
</FormButton>
)
}# constant Gutter
Helper component for vertical spacing
# constant indexGeoProps
Assign an array of geo objects (eg. Features of a GeoJSON) into an indexed object based on the provided key property
Example
const data = {
type: "FeatureCollection",
features: [
{ type: "Feature", properties: { id: "1", name: "A" }, geometry: { ... } },
{ type: "Feature", properties: { id: "2", name: "B" }, geometry: { ... } },
]
}
const indexedData = indexGeoProps(data, "id")
// indexedData = {
// "1": { type: "Feature", properties: { id: "1", name: "A" }, geometry: { ... } },
// "2": { type: "Feature", properties: { id: "2", name: "B" }, geometry: { ... } },
// }# constant LegendInner
Inner renderer for Legend
# constant MarkdownViewer
Markdown renderer for story content
MdxPages
# constant pages
Page content for the "Learn"
Below, the constant "pages" is a dictionary of page content. The key is the page's URL slug, and the value is the page's content, as an MDX component.
Example
import { ExamplePageComponent } from './ExamplePageComponent'
const pages = {
'example-page': ExamplePageComponent,
}
export default pages# constant PopoverContainer
Outer container (div) for the popover
# constant StepButtons
Stepper buttons helper component
# constant Steps
Steps Helper Component
# constant StoriesProvider
Wrapper component for the stories context.
Example
function MyApp() {
return (
<StoriesProvider>
<MyChildComponent />
</StoriesProvider>
)
}# constant StoryViewerPane
Self contained viewer for Atlas stories. Uses the useStoriesContext hook to
manage current story. StoryContainer renders story content.
# constant StyledDropDown
Styled drop down / select component
# constant StyledDropDownNoLabel
Variation on StyleDropDown, omitting labels
# constant StyledSlider
Styles for MuiSlider see more at https://mui.com/material-ui/react-slider/
# constant templates
Default templates for the report builder
Keyed to name of the template, and then an array of pages, each page and an array of report items
Object
# constant urlParamsTree
URL Parameters tree, for share URLS. {[Key: string]: {name: string, geography: string}}
# constant useGeoda
Hook to use jsgeoda wasm work from anywhere within GeodaProvider. All functions are async. For jsgeoda api, see https://www.npmjs.com/package/jsgeoda
Example
const { geoda } = useGeoda();
const analyze = async () => {
const result = await geoda.something...
}# constant useSetViewport
A hook that returns the current viewport. Separated from useViewport to
avoid unnecessary re-renders.
# constant useStoriesContext
A hook that returns the current viewport. Separated from useSetViewport to
avoid unnecessary re-renders.
# constant useViewport
A hook that returns the current viewport. Separated from useSetViewport to
avoid unnecessary re-renders.
# constant validateGeojson
Rudimentary GeoJSON validation.
# constant VariableEditor
Component for editing a custom variable. Used in data loader
# constant VariablePanelContainer
STYLES
# constant VideoModal
Example
function myComponent() {
const [open, setOpen] = useState(false);
return (
<VideoModal
open={open}
onClose={() => setOpen(false)}
title="Intro Video"
videoUrl="https://www.youtube.com/embed/pjswdUvwbFE"
/>
)
}# constant ViewportProvider
Wrapper component for the viewport context.
Example
function MyApp() {
return (
<ViewportProvider>
<MyChildComponent />
</ViewportProvider>
)
}Methods
# AddItemsSpeeedDial(props)
Helper component to manage adding items to a report
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
canAddItem |
boolean
|
Whether the user can add items to the report |
handleAddItem |
function
|
Callback for when an item is added
(Item: Partial |
Example
function ParentComponent() {
const [canAddItem, setCanAddItem] = useState(false)
const [reportItems, setReportItems] = useState([])
return (
<AddItemsSpeeedDial
canAddItem={canAddItem}
handleAddItem={handleAddItem}
/>
)
}# ArchiveBody(props)
Renderer for the body of a stories archive
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
stories |
Array.<StoryMeta>
|
List of story metadata |
title |
string
|
Title of the archive |
setActiveStory |
function
|
Set current selected story |
# ArchiveSidebar(props)
Sidebar component to render and manage filters on the stories archive
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
counts |
Object
|
For each value, count of values in the stories {value: number} eg ({"tag1": 3, "tag2": 2}) |
filters |
Array.<Object>
|
List of filters currently applied {property: string, value: string}[] |
setFilters |
function
|
Sets the filters, typically React.useState (prevValues: Object[]) => void |
# BinsList(props)
Renderer for the legend of the map
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
data |
Array.<string>
|
List of tooltip values, including tooltip if using |
Example
function myComponent() {
const data = [
'5 tooltip:more-info-1',
'10 tooltip:more-info-2',
'15 tooltip:more-info-3',
]
return <BinList data={data} />
}# ComboBox(props)
Component for searchable autocomplete
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
options |
array
|
List of option objects {label: string, value: any}[] |
value |
Object
|
Selected value {label: string, value: any} | null |
setValue |
function
|
Function (value: any) => void |
label |
string
|
Text label |
id |
string
|
Id passed to DOM |
Example
function example() {
return (
<ComboBox
options={[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]}
value={{
label: 'Option 1',
value: 1,
}}
setValue={(val) => setValue(val)}
label={'Select an option'}
id={'select'}
/>
)
}# ControlsPopover(props)
A popover that contains a list of controls for a given component Can be positioned in any corner
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
size |
number
|
Size of clickable icon in REM |
inline |
boolean
|
Display inline or absolutely positioned |
top |
boolean
|
If true, position on top of parent |
bottom |
boolean
|
If true, position on bottom of parent |
left |
boolean
|
If true, position on left of parent |
right |
boolean
|
If true, position on right of parent |
controlElements |
Array.<Object>
|
Array of control elements to display Typically {type: string, content: string|Object[], value: boolean|Object|string[], action: function} Available types: header, helperText, label, select, switch, slider, comboBox, textInput, selectMulti, selectNestMulti |
iconColor |
string
|
Color of icon (optional) |
className |
string
|
Class name for styling (optional) |
Example
function MyComponent() {
return (
<ControlPopover
size={4}
top
bottom
iconColor="blue"
controlElements={[
{
type: 'header',
content: 'My Header',
},
{
type: 'helperText',
content: 'My Helper Text',
},
{
type: 'label',
content: 'My Label',
},
{
type: 'select',
content: {
label: 'My Select',
items: [
{ value: 'value1', label: 'Text 1' },
{ value: 'value2', label: 'Text 2' },
{ value: 'value3', label: 'Text 3' },
],
value: { value: 'value1', label: 'Text 1' },
action: (value) => console.log(value),
},
},
{
type: 'switch',
action: (value) => console.log(value),
value: true,
content: 'My Switch',
},
{
type: 'slider',
content: {
min: 0,
max: 100,
step: 1,
},
value: 50,
action: (value) => console.log(value),
},
{
type: 'comboBox',
content: {
items: [
{ value: 'value1', label: 'Text 1' },
{ value: 'value2', label: 'Text 2' },
],
},
value: { value: 'value1', label: 'Text 1' },
action: (value) => console.log(value),
},
]}
/>
)
}# CoreMemberBio(props)
Renderer for single member
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
member |
Member
|
Member info |
columns |
number
|
Number of columns in the grid |
# CsvDownloader()
Data downloader component for available datasets. Zips in browser.
# DataDetails()
Data documentation and details accordion
# dataFn(numeratorData, denominatorData, dataParams)
General data function for fast decision tree with a numerator and denominator. Calculates for a single geography.
Parameters:
| Name | Type | Description |
|---|---|---|
numeratorData |
DataRow
|
Object with data values for a single row.
The numerator data, see DataRow |
denominatorData |
DataRow
|
Object with data values for a single row.
The denomiantor data, see DataRow |
dataParams |
Object
|
Parameters for the data function, see
VariableSpec |
Example
const numeratorData = {
cases: 500,
}
const denominatorData = {
population: 100,
}
const dataParams = {
nProperty: 'cases',
dProperty: 'population',
scale: 1000,
}
const result = dataFunction(numeratorData, denominatorData, dataParams) // 5000# DataPanel(props)
Data panel renderer component. Derives data from useGetSidebarData hook and
uses manual component-level selection keys or redux state selection keys if
no prop present.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
manualSelectionKeys |
Array.<number>
|
Manual override for selection GEOIDs to use and overwrite redux state |
manualOpen |
boolean
|
Manually open the panel and overwrite redux state |
# DateSlider()
Standalone stateful component for displaying a slider with a single date or date range. Also controls animation and playback (managed in src/Hooks/useTickUpdate)
# doFilter(story, filter) → {boolean}
Helper function to filter stories
Parameters:
| Name | Type | Description |
|---|---|---|
story |
StoryMeta
|
Story meta to check |
filter |
StoryFilter
|
Filter spec to apply |
If the story passes the filter
boolean
# Draggable(props)
A wrapper component that allows the children to be dragged around the screen Often composed with Scaleable
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
children |
React.ReactNode
|
The content of the panel |
title |
String
|
The id of the panel in the store |
allowCollapse |
Boolean
|
Whether the panel can be collapsed or not |
z |
number
|
zindex of the panel, when multiple panels are open |
defaultX |
number
|
default x position of the panel |
defaultY |
number
|
default y position of the panel |
Example
function MyComponent() {
return (
<Draggable title="myPanel" allowCollapse={true} defaultX={100} defaultY={100}>
<div>My panel content</div>
</Draggable>
)# ErrorToast()
Toast component for displaying report builder errors. See selectReportError selector in reportSlice.
# FastTrackInsights()
Home page fast track insights and summary stats
# async fetchTimeSeries(props) → {TimeSeriesData}
Async function for fetch relevant data
See useGetLineChartData comments for schemas
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
currentGeojson |
string
|
Current map data |
currentTimeseriesDataset |
string
|
Current timeseries data |
selectionKeys |
Array.<number>
|
List of ID keys (optional) |
totalPopulation |
number
|
Total population for normalization |
Chart data, maximums, and relevant metadata, as below
# FilterRow(props)
Single row of the filter section
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
property |
string
|
Property for the current section (eg Theme) |
value |
string
|
Value for the row (eg "Family") |
count |
number
|
Count of entries |
handleFilter |
function
|
Adds a new filter or remove an existing filter ({property: string, value: string}) => void |
filters |
Array.<Object>
|
List of filters currently applied {property: string, value: string}[] |
# FilterSection(props)
Subsection of the Archive page that displays filters for the stories
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
title |
string
|
Title of the filter section |
counts |
Object
|
For each value, count of values in the stories {value: number} eg ({"tag1": 3, "tag2": 2}) |
handleFilter |
function
|
Adds a new filter or remove an existing filter ({property: string, value: string}) => void |
filters |
Array.<Object>
|
List of filters currently applied {property: string, value: string}[] |
# Footer(signUp) → {JSX.Element}
Footer component, nothing fancy here.
Parameters:
| Name | Type | Description |
|---|---|---|
signUp |
boolean
|
if true, show the signup form |
- Footer component
JSX.Element
# generateJoinData(props) → {Array}
Generates value and color dictionary keyed to GEOIDs for use on the map.
Returns positional array of join data (see JoinData) and height
multiplier for Z-index, when using.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
binData |
Array.<Array>
|
1D array of data to be binned |
bins |
Array.<number>
|
List of numeric breaks to use |
lisaData |
Array.<number>
|
Array of lisa cluster values |
mapParams |
Object
|
Object of map parameters - see
MapParamsSpec |
order |
Object
|
Ordered GEOID list {[key: index]: GEOID: number} |
dataReady |
boolean
|
Flag to indicate if data is ready |
shouldSeparateZero |
boolean
|
Flag to indicate if zero values should be separated |
Positional data return [ joinData - See JoinData,
heightScale: number]
Array
# Geocoder(props)
Geocoder autocomplete wrapper for Mapbox API. Could be repurposed for other geocoders. Based on https://mui.com/material-ui/react-autocomplete/
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
placeholder |
String
|
Placeholder text for autocomplete input |
onChange |
function
|
Callback for when a location is selected |
style |
Object
|
CSS Styles passed to autocomplete component |
API_KEY |
String
|
Mapbox API key to use for temporary geocoding |
Example
function ExampleComponent() {
const [location, setLocation] = useState(null)
return (
<Geocoder
placeholder="Search for a location"
onChange={setLocation}
API_KEY={process.env.REACT_APP_MAPBOX_API_KEY}
style={{
color: 'skyblue',
}}
/>
)
}# async getAsyncBins(geoda, mapParams, binData, shouldSeparateZero) → {Promise}
Helper function for useGetBins. Returns the bins for a 1D dataset
Parameters:
| Name | Type | Description |
|---|---|---|
geoda |
Object
|
Jsgeoda instance |
mapParams |
Object
|
MapParamsSpec - see
|
binData |
Array.<number>
|
One dimensional array of data |
shouldSeparateZero |
boolean
|
Deprecated - not used. |
Promise object of jsgeoda data return
Promise
# getContinuousColor(val, breaks, colors, useZero) → {Array.<number>}
Simple function to quicky convert a value to color
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
val |
number
|
Value to get color for |
|
breaks |
Array.<number>
|
Breaks for the color scale, a series of numbers |
|
colors |
Array.<Array>
|
Array of RGB values, indexed to breaks |
|
useZero |
boolean
|
false | If true, separate zero values |
RGB color value
Array.<number>
# getCounts(stories) → {Object.<string, number>}
Summarizes coutns fo theme, state, urbanicitiy, type, and tags on story metadata.
Parameters:
| Name | Type | Description |
|---|---|---|
stories |
Array.<StoryMeta>
|
List of stories |
Dictionary of counts of each property
Object.<string, number>
# getDataForBins(numeratorData, denominatorData, dataParams, fixedOrder, dataReady, binIndex)
Function to get data for bins or choropleth.
Parameters:
| Name | Type | Description |
|---|---|---|
numeratorData |
Object
|
An object of data keyed to the current GEOID / numeric identifier for the numerator table |
denominatorData |
Object
|
An object of data keyed to the current GEOID / numeric identifier for the denominator table |
dataParams |
Object
|
Parameters for the data function, see
VariableSpec |
fixedOrder |
Boolean
|
If true, follows the fixed order to align with jsgeoda's expected input |
dataReady |
Boolean
|
Flag to confirm if data is fully available |
binIndex |
Number
|
Date index to use for timeseries data, if applicable |
# async getLisa(currentGeojson, geoda, dataForLisa) → {LisaReturnData}
Async helper function to calculalate lisa map
Parameters:
| Name | Type | Description |
|---|---|---|
currentGeojson |
string
|
Name of the current geojson in the redux store |
geoda |
Object
|
Jsgeoda instance |
dataForLisa |
Array.<number>
|
Data for jgeoda, ordered by geojson order |
- Lisa data and weights
# HintBox(props)
MDX component for displaying a hint box
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
icon |
string
|
The name of the icon to display |
children |
React.ReactNode
|
The content of the hint box |
# HoverButtonsContainer()
Flex row container for hover buttons
Parameters:
| Name | Type | Description |
|---|---|---|
props.children |
React.ReactNode
|
# Icon(props)
An icon helper component
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
symbol |
string
|
The name of the icon to display One of the valid keys of the SVG object in src/config/svg.js |
style |
object
|
Any valid CSS to apply to span wrapper of symbol |
Example
function MyComponent() {
return (
<Icon symbol="policy" style={{ width: '4rem', height: '4rem' }} />
)
}# IconDock()
Icon dock for different panels available. Manages panelState property of
paramSlice
# InfoBox(props)
Tutorial and information floating box panel.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
defaultX |
number
|
Default x position of panel |
defaultY |
number
|
Default y position of panel |
defaultWidth |
number
|
Default width of panel |
defaultHeight |
number
|
Default height of panel |
minHeight |
number
|
Minimum height of panel |
minWidth |
number
|
Minimum width of panel |
# Legend(props)
Legend for the map section of the Atlas. Positioned on the bottom of the screen
Parameters:
| Name | Type | Description |
|---|---|---|
props |
object
|
|
variableName |
string
|
Text for the legend title displaying variable name |
colorScale |
Array.<Array.<number>>
|
Color values for bins in [r,g,b] format or [r,g,b,a] (0-255 scale) |
bins |
object
|
String text for each break point |
bins.bins |
Array.<string>
|
String text for each break point |
resource |
Array.<string>
|
Icons for resource layers, like hospitals and clinics |
note |
string
|
For special cases or data issues, |
shouldSeparateZero |
boolean
|
If using quantitiatve data that separates zero, shows zero slightly differently |
Example
function Example() {
return (
<Legend
variableName="Population"
colorScale={[
[0, 0, 0],
[120, 120, 120],
[255, 255, 255],
]}
bins={{ bins: [500, 1500, 2500] }}
resource={'cinics'}
note={'This is a note'}
shouldSeparateZero={true}
/>
)
}# LinearProgressWithLabel(props)
Progress placeholder
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
progress |
number
|
0-100 value to display on linear progress bar |
text |
string
|
Text to display on linear progress bar |
# LineChartInner()
Component that returns the inner guts of the chart, for easy memoization
# LineChartReport(props)
Wrapper report item for a line chart in the report builder. This component shouldn't be called directly, but through the report spec and builder.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
Array.<number>
|
GEOID of county(s) to display |
handleChange |
function
|
Function to partially change a report
item (props: Partial |
handleToggle |
function
|
Function to toggle property of a report item (toggleProperty: string) => void |
handleRemove |
function
|
Function to remove this report item from the report () => void |
table |
string
|
Table to display - 'cases' | 'deaths' | 'vaccination' |
logChart |
boolean
|
Whether to display the chart on a log scale |
showSummarized |
boolean
|
Whether to display the summarized data, such as the total for selected counties |
populationNormalized |
boolean
|
Whether to display the data normalized by population or total counts |
shouldShowVariants |
boolean
|
Whether to display the variants time stamps |
linesToShow |
string
|
County, neighbors, or secondOrderNeighbors -- if using neighboring counties |
loadedCallback |
function
|
Function after chart is loaded (isLoaded: boolean) => void |
# MapButtons(props)
Mapbuttons to control view, tilt, sharing, and selection. Requires viewport and setviewport context
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
boxSelect |
boolean
|
Whether or not box select is active |
setBoxSelect |
function
|
Function to set box select (val: boolean) => void |
Example
() => {
const [isSelecting, setIsSelecting] = useState(false)
return (
<MapButtons
isSelecting={isSelecting}
setIsSelecting={setIsSelecting}
)
}# MapSection(props)
Map section component - this is the main map component that renders the map and all of the layers. The bulk of the code handles the map interactions, some of which are fairly complex, layer and statement management, map side effects, like zooming to a different section when needed,
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
currentMapGeography |
MapGeographies
|
Geographies to be rendered on the map. Only change when geo data changes |
currentMapData |
MapData
|
Tabular data to be rendered on the map. Changes with any variable or parameter change |
currentMapID |
string
|
Hash ID of current map data, to optimize rendering |
currentHeightScale |
number
|
Z-axis multiplier to keep height of geographies in proportion to the map |
currentData |
string
|
Name of geodata driving the map |
mapParams |
DataParams
|
Map paramters such as map type (lisa, box map, etc), map variables, and map parameters |
currIdCol |
string
|
Current data ID column. Must be numeric. |
cartogramData |
CartogramData
|
Data from jsgeoda to render a cartogram/bubble map |
cartogramCenter |
Array.<number>
|
Lat/lon center of cartogram data from jsgeoda, usually close to [0,0] |
cartogramDataSnapshot |
string
|
Hash ID of cartogram data, to optimize re-rendering |
manualViewport |
Viewport
|
boolean
|
If a viewport is provided, the map will start at that location. Otherwise, it will use the viewport context |
hoverGeoid |
number
|
The GEOID of the hovered geography, set manually for use in reports, etc. |
highlightGeoids |
Array.<number>
|
The GEOIDs of highlighted geographies, set manually for use in reports, etc. |
theme |
string
|
"light" or "dark" |
onLoad |
function
|
Callback function after load, for notification on printable report |
- To Do:
-
- - This component is quite large and could be broken up into smaller components, and hooks to manage size effects.
Example
function MyComponent() {
return (
<MapSection
currentMapGeography={{
type: "FeatureCollection",
features: [...]
}}
currentMapData={{
1001: {
color: [255,0,0],
value: 500
},
1002: {
color: [0,255,0],
value: 1000
}
}}
currentMapID={'073516'}
currentHeightScale={5}
cartogramData={[
{
"properties": {
"STATEFP": "37",
"COUNTYFP": "017",
"GEOID": 37017,
"NAME": "Bladen",
"state_name": "North Carolina",
"state_abbr": "NC",
"population": 33778,
"beds": 58,
"criteria": "NA"
},
"position": [
-23.59465462690074,
10.105174373026676
],
"radius": 891.4239911131228,
"value": 28.759209290916314,
"id": 37017
},
...
]}
cartogramCenter={[0,0]}
cartogramDataSnapshot={"county_nyt.geojson-cases-null-967-7..."}
isLoading={false}
mapParams={{
mapType: "natural_breaks",
nBins: 8,
vizType: "2D",
...
}}
currentData={"county_nyt.geojson"}
currIdCol={'GEOID'}
/>
)
}# MediaAccordian(Props)
Accordion for Press Coverage. Uses default data in src/Components/Layout/MediaAccordion.jsx
Parameters:
| Name | Type | Description |
|---|---|---|
Props |
Object
|
|
content |
Press
|
Content for the accordion |
defaultPanel |
string
|
The default panel to show, a string with panel + index, eg 'panel0' or 'panel1' |
sortFunc |
boolean
|
function
|
Whether to sort the content by key of object, if false will remain as is, if function will use that function to sort Defaults to reverse chronological order |
# NavBar(props, pageDropDowns)
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
light |
string
|
Page theme light or dark |
pageDropDowns |
DropdownContent
|
Object of dropdowns to render, defaults to defaultDropDowns in src/Components/Layout/Nav.jsx |
Example
function MyComponent(){
return(
<Nav light />
)
}# NotificationBox()
Notification box for manual notes. Currently used to notify of situations where red on hotspot is good, not bad. Usese UI state for managing notification text
TODO: Deprecate in favor of Mui snackbar / toast
# Popover()
Standalone stateful component that renders the content of the tooltip found in src/Components/Interface/Tooltip.js Does not rely on parent props to optimize re-renders.
Can be called anywhere in the app.
# Preloader(props)
Animated preloader
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
loading |
Boolean
|
If true, the preloader will be displayed |
message |
String
|
Text to display |
quiet |
Boolean
|
If true, the preloader will be smaller and less obtrusive |
# PrintModal(props)
Print modal menu for report builder to export different formats.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
activeStep |
number
|
Current step in report process, |
handleStep |
function
|
Function to change activeStep (step: number) => void |
handlePrint |
function
|
Function to initiate print report |
# Report(props)
Inner report component for report builder
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
reportName |
string
|
Name of report |
activeStep |
number
|
Current step in report process |
zoomMultiplier |
number
|
Zoom multiplier for report pages |
handleStep |
function
|
Function to change activeStep (step: number) => void |
# ReportBuilder(props)
Outer container for the report builder. Manage state for the template selector, active step, and template customization
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
isPage |
boolean
|
# ReportComponentMapping(props)
Engine component for rendering report items. Generated handleRemove, handleToggle, handleChange, and handleAddItem callbacks. Do not call this component directly, it should be generated through the report.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
handleItemLoad |
function
|
Higher level callback for loading report items. Passed into child components as loadedCallback. (itemId: string, isLoaded: boolean) => void |
pageIdx |
number
|
Index of the page this item is on |
itemId |
string
|
ID of the report item |
reportName |
string
|
Name of the report |
# ReportEditor(props)
Report builder outermost component
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
activeStep |
number
|
Current step of report - step are:
|
handleStep |
function
|
handle change step (step: Number) => void |
# ReportMap(props)
Memoized wrapper report item for a map in the report builder. This component shouldn't be called directly, but through the report spec and builder.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
number
|
GEOID of county to display center map on |
pageIdx |
number
|
Index of the page this map is on |
itemId |
string
|
ID of the report item |
handleChange |
function
|
Function to partially change a report
item (props: Partial |
handleRemove |
function
|
Function to remove this report item from the report () => void |
dateIndex |
number
|
Date index to display, days since January 21st, 2020 |
variable |
string
|
Name of variable to display |
mapType |
string
|
Type of map to display 2D | 3D | dotDensity |
scale |
string
|
Scale to display - county | neighbors | region | state | national |
loadedCallback |
function
|
Function after chart is loaded (isLoaded: boolean) => void |
# ReportPage(props)
Renderer for single page of report. See usage src/components/Panels/ReportBuilder/Report/Report.jsx
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
pageIdx |
number
|
Index of page in report |
pageWidth |
number
|
Width of page in pixels |
zoomMultiplier |
number
|
Multiplier for zoom level of the report |
reportName |
string
|
Name of the report |
onMount |
function
|
Callback for when page is mounted (pageRef:
React.RefObject |
handleItemLoad |
function
|
Callback for when item is loaded (itemId: string,isLoaded: boolean) => void |
# Scaleable(props)
A wrapper component that allows the children to be resized Children should be responsive to the parent size. Often composed with Draggable
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
children |
React.ReactNode
|
The content of the panel |
title |
String
|
The id of the panel in the store |
notScaleable |
Boolean
|
If true, disables scaling |
defaultHeight |
number
|
Default height of the panel |
defaultWidth |
number
|
Default width of the panel |
minHeight |
number
|
Minimum height of the panel |
minWidth |
number
|
Minimum width of the panel |
Example
function MyComponent() {
return (
<Scaleable title="myPanel" defaultHeight={100} defaultWidth={100}>
<div>My panel content</div>
</Scaleable>
)# ScatterChartReport(props)
Wrapper report item for a scatterp lot in the report builder. This component shouldn't be called directly, but through the report spec and builder.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
handleChange |
function
|
Function to partially change a report
item (props: Partial |
handleRemove |
function
|
Function to remove this report item from the report () => void |
loadedCallback |
function
|
Function after chart is loaded (isLoaded: boolean) => void |
xAxisVar |
string
|
Variable to use for the x axis |
yAxisVar |
string
|
Variable to use for the y axis |
radius |
number
|
Radius of the points |
# SelectControl()
Select / dropdown control called as a composition in ControlPopover
Parameters:
| Name | Type | Description |
|---|---|---|
props.content |
Object
|
Content {label: string, items: {value: any, text: string|null, label: string|null}[]} |
label |
string
|
String label for the control |
items |
Array.<Object>
|
Array of objects with value, text, and label If using nested, add subItems to each item with the same structure |
props.value |
Object
|
Array.<string>
|
Value of the control as {value: any,
label: any}. When using |
props.action |
function
|
Function to call on change |
props.multiple |
boolean
|
Boolean to allow multiple selections. Use SelectMultiControl |
props.nested |
boolean
|
If true, nests rows of checkbox options |
props.autocomplete |
boolean
|
If true, uses autocomplete search instead of select |
props.active |
boolean
|
Boolean passed to StyledDropDown for highlighted state overload props passed to MuiSelect https://mui.com/material-ui/react-select/ |
Example
function MyComponent() {
return (
<ControlPopover
bottom
left
controlElements={[
{
type: 'select',
action: (value) => console.log(value),
value: { value: '1', label: 'Option 1' },
content: {
label: 'My Options',
items: [
{
text: 'Option 1',
value: '1',
},
{
text: 'Option 2',
value: '2',
},
],
},
},
]}
/>
)
}# StepperComponent(props)
Stepper component for ReportBuilder
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
activeStep |
number
|
Current step |
handleStep |
function
|
Function to handle step change (stepIndex: number) => void |
steps |
Array.<string>
|
Array of steps {label: string}[] |
canProgress |
boolean
|
Boolean to check if can progress to next step |
Example
function MyComponent() {
const [activeStep, setActiveStep] = useState(0)
const steps = [
{ label: 'Select Report Type' },
{ label: 'Select Report Layout' },
]
const canProgress = true
const handleStep = (stepIndex) => setActiveStep(stepIndex)
return (
<Stepper
activeStep={activeStep}
handleStep={handleStep}
steps={steps}
canProgress={canProgress}
/>
)
}# StoryCard(props)
Presentation row / card for a story
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
story |
StoryMeta
|
Story to display |
setActiveStory |
function
|
Function to change active story (story: StoryMeta) => void |
# StoryPlayer(props)
Main story content renderer. Requires process.env.REACT_APP_STORIES_PUBLIC_URL of public CDN for stories.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
story |
StoryMeta
|
Story content to render |
# SwitchControl(content, value, action)
Switch on-off component for control popover
Parameters:
| Name | Type | Description |
|---|---|---|
content |
string
|
Label for switch |
value |
boolean
|
Value of switch |
action |
function
|
Function to call on change |
Example
function MyComponent() {
return (
<ControlPopover
controlElements={[
{
type: 'switch',
action: (value) => console.log(value),
value: true,
content: 'My Switch',
},
]}
/>
)
}# TableReport(props)
Wrapper report item for a scatterp lot in the report builder. This component shouldn't be called directly, but through the report spec and builder.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
number
|
geoid of the current geography |
topic |
string
|
topic of the table = 'COVID' | 'SDOH' |
includedColumns |
Array.<string>
|
columns to be include Array |
dateIndex |
number
|
Date index to use for data - days since 1/22/2020 |
name |
string
|
Name of table |
handleChange |
function
|
Function to partially change a report
item (props: Partial |
handleRemove |
function
|
Function to remove this report item from the report () => void |
loadedCallback |
function
|
Function after chart is loaded (isLoaded: boolean) => void |
# TemplateCustomzier(props)
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
template |
Object
|
Customization options for selected templates.
Uses ControlElementMapping to render controls see |
# TemplateSelector(props)
Selector menu for Report Templates
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
selectedTemplate |
string
|
Current report template |
setSelectedTemplate |
function
|
Function to set current report template |
templates |
Array.<Object>
|
Dictionary of templates to select from {name: String, template: ReportItem[][]} - See src/components/Panels/ReportBuilder/Report/Templates.js |
showTemplateCustomizer |
boolean
|
Whether to show template customizer or not |
setActiveStep |
function
|
Function to set current step in report builder |
# TextContainerReport(props)
Wrapper report item for a text item in the report builder. This component shouldn't be called directly, but through the report spec and builder.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
content |
string
|
Text content or one of the following presets as {preset: String} - "7day", "regional", "neighbors", "national" which returns a string based on the name property |
dateIndex |
number
|
Date index to use for data - days since 1/22/2020 |
name |
string
|
Name of text component |
handleRemove |
function
|
Function to remove this report item from the report () => void |
loadedCallback |
function
|
Function after chart is loaded (isLoaded: boolean) => void |
# TextReport(props)
Wrapper report item for a text item in the report builder. This component shouldn't be called directly, but through the report spec and builder.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
number
|
GEOID to include in the report |
format |
string
|
Text format to use - 'bullet' | 'paragraph' |
dateIndex |
number
|
Date index to use for data - days since 1/22/2020 |
handleChange |
function
|
Function to partially change a report
item (props: Partial |
handleRemove |
function
|
Function to remove this report item from the report () => void |
handleRemove |
function
|
Function to remove this report item from the report () => void |
loadedCallback |
function
|
Function after chart is loaded (isLoaded: boolean) => void |
# TextStatistics(props)
A presentation of statistics in either a full paragraph or bulleted key insights
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
number
|
ID of the geography |
format |
string
|
'bullet' or 'paragraph' |
dateIndex |
number
|
Date index days since 1/22/2020 |
# Tooltip(props, id)
A tooltip component that displays a tooltip when hovered over.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
id |
string
|
Id of the tooltip content, referenced from |
Example
function ExampleComponent() {
return (
<Tooltip id="exampleTooltip" />
)# TopPanel()
Container component for Date slider, play button, etc. on the top.
# useBackgroundLoadData(props) → {LoadingStatus}
Helper hook to load background data related to the current map view or data
topic. Primarily impure, a sideeffect hook that loads data into the redux
store. See more at /src/stores/dataStore
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
currentGeography |
string
|
= '', |
shouldFetch |
boolean
|
= false, |
tables |
Array.<TableSpec>
|
= [], Array of TableSpec objects - see
|
currTimespans |
Array.<string>
|
= ['latest'], List of timespans to fetch, 'latest' or 'YYYY-MM' |
dateLists |
DateLists
|
= {}, list of dates for indexing crosswalk |
numeratorParams |
VariableSpec
|
= {}, parameters for the
numerator variable -- see VariableSpec
|
denominatorParams |
VariableSpec
|
= {}, parameters for the
denominator variable -- see VariableSpec
|
adjacentMonths |
Array.<string>
|
= [], Additional adjacent months to fetch. Similar to currTimespans |
Loading Status
# useCartogramMap(props) → {CartogramData}
Hook to generate cartogram data
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
mapId |
string
|
= "", jsgeoda ID of the map |
dataForCartogram |
Array
|
List of objects of data prepped for the cartogram calculation |
shouldUseCartogram |
boolean
|
= false, boolean, flag to use cartogram or not |
dataReady, |
boolean
|
Boolean, flag if data is fully loaded |
varId |
string
|
Hash of map variables |
order |
Object
|
Index order dictionary {[order: number]: geoid}
|
geojsonData |
Object
|
Geojson.FeatureCollection data of current geography |
# useCentroidRandomizer() → {Object.<{ready: boolean, getRandomPoint: function()}>}
Returns a utiliy function to generate a random point within a polygon
ready state and getRandomPoint function (geoid: number) => [lng, lat]
Object.<{ready: boolean, getRandomPoint: function()}>
# useCurrentDateIndices() → {Array}
Helper hook to get date indices in the current redux state. Returns positional information for easy renaming.
Positional data [ currentIndex: number, currDates: string[], currDatesAvailable: string[], dates:string[], currRange: number, rangeType: string ]
Array
# useGetGeojson(props) → {Array|undefined}
Fetcher hook to load geojson data through jsgeoda or return existing load data from the redux store
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoda |
Object
|
Jsgeoda instance |
geodaReady |
boolean
|
Flag to indicate if geoda is ready |
currDataset |
string
|
Name of current geojson dataset |
Positional return for easy renaming [Geojson:
GeojsonDataset, dataReady: boolean, error: string] See GeojsonDataset at
src/stores/dataStore/type.ts
Array
|
undefined
# useGetLineChartData(props) → {LineChartData}
Hook to get line chart data given a particular variable and GEOID or GEOIDS By default, this will provide national data. If keys are provided, properties for the total of all keys will be provided as keySum, keyDaily... And properties for will be provided for each key as {key}Sum, {key}Daily, eg. "01001Sum", "01001Daily"
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
table |
string
|
'cases' | 'deaths' | 'vaccination' The table to fetch data from |
geoid |
Array.<string>
|
The county or state GEOID to fetch data for |
Chart data, maximums, and relevant metadata
# useGetNeighbors(props)
Jsgeoda helper hook to get neighbors and second order neighbors of a given geometry
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
id
|
Id of the geometry |
currentData |
string
|
Name of the current dataset |
updateTrigger |
any
|
Manual trigger to update the hook |
IDs of all neighbors, second order neighbors, and state-level neighbors [neighbors: number[], secondOrderNeighbors: number[], stateNeighbors: number[]]
# useGetQuantileStatistics(props) → {Object}
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
variable |
string
|
Name of the variable to get quantile statistics |
dataset |
string
|
Name of the desired dataset, defaults to current dataset in state |
geoid |
number
|
Id of the geometry to get quantile statistics for |
getStateStats |
boolean
|
If true, get quantile statistics for the state |
neighborGroups |
Array.<number>
|
Array of neighbor ids to include in stats |
dateIndex |
number
|
Index of the date to get quantile statistics for |
Object containing quantile statistics. See COLUMN_MAPPINGS in /src/components/Panels/ReportBuilder/PageComponents for example mappings
Object
# useGetReportViewport(props) → {Array}
Hook to get the viewport for a given geoid, primarily used for report generation
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
string
|
Geoid of the current location |
currentData |
string
|
Name of the current dataset |
geojsonData |
Object
|
GeojsonDataset - see
|
mapIdCol |
string
|
Name of the column that contains the map id |
mapWidth |
number
|
Width of the map in pixels |
mapHeight |
number
|
Height of the map in pixels |
Positional data returned by the hook [ countyViewport: {latitude:number,longitude:number...}, neighborsViewport: {latitude:number,longitude:number...}, secondOrderViewport: {latitude:number,longitude:number...}, stateViewport: {latitude:number,longitude:number...}, nationalViewport: {latitude:number,longitude:number...}, neighbors: number[], secondOrderNeighbors: number[], stateNeighbors: number[] ]
Array
# useGetScatterData(props) → {ScatterData}
Hook to get scatterplot XY data
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
xAxis |
string
|
X-axis variable |
yAxis |
string
|
Y-axis variable |
# useGetSidebarData(props) → {Object}
Hook to generate report data. Return data is an object with numerous summary data points. Features are currently hard coded in /src/utils/generateReport.js
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
selectionKeys |
Array
|
List of GEOIDs to generate report for |
panelOpen |
boolean
|
Flag for if the panel is open, and if should generate report |
See /src/utils/generateReport.js
Object
# useGetTable(props) → {Array}
Hook to fetch data from a remote source, or return it from the local data store, if it exists.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
filesToFetch |
Array.<FileInfo>
|
List of files to fetch |
shouldFetch |
boolean
|
Flag to indicate if should fetch data |
Positional data of [returnData: Dataset, dataReady: boolean, error: boolean | string]. For more on Dataset, see /src/stores/dataStore/types.ts
Array
# useGetTooltipContent(props)
Hook to generate tooltip data. By default, gets data from all current tables relevant to the current geography.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
geoid |
string
|
GEOID to generate tooltip data for |
data |
Object
|
Additional data directly from the selected feature. If GEOID is not provided, only this data will be used (eg. vaccination sites) |
# useGetVariable(props) → {Array}
Hook to get a variable, returning a 1 dimensional array of values. Arguments use predefined variable names, dataset selection, and date index.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
variable |
string
|
Name of the variable to get data for |
dataset |
string
|
Name of the geojson dataset to use when using a multi-dataset variable (cases and deaths) |
dateIndex |
number
|
Index of the date to use -- days since 01/21/2020 |
- A 1 dimensional array of data for the variable, ordered by the geojson features
Array
# useLisaMap(props) → {Array}
Hook to simplify use of jsgeoda lisa/hotspot map
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
currentData |
string
|
Name of the current dataset |
dataForLisa |
Array.<number>
|
Data for jgeoda, ordered by geojson order |
shouldUseLisa |
boolean
|
Boolean to indicate if lisa should be used |
varId |
string
|
Hash of the current variable and properties |
dataReady |
boolean
|
Flag to indicate if data is ready |
Positional data return for easy renaming [clusterArray: number[], mapVariableHash: string]
Array
# useLoadData(props) → {UseLoadDataReturn}
Hook to load geospatial and tabular data
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
dataParams |
Object
|
See VariableSpec in
|
currentData |
string
|
Name of the current geojson data |
# useMapData(dataParams, currentData, mapParams) → {Array}
Hook used to generate data for map based on data and map parameters and the selected dataset. Called directly in Map pages and in the report builder
Parameters:
| Name | Type | Description |
|---|---|---|
dataParams |
Object
|
Paramters for data handling, including numerator and denominator tables, column or index accessors |
currentData |
String
|
The name of the current Geojson file loaded on the map |
mapParams |
Object
|
Map Params for map modes, bin types, etc. |
Positional array of data for map rendering, including
joinData, scale, and bins. [ geography: GeoJSON.FeatureCollection
colorAndValueData: JoinData, cartogramData CartogramData,
mapSnapshot: string (map variable hash), bins: number[],
heightScaleMultiplier: number, dataReady: boolean, geojsonData:
{[key:number]: GeoJSON.Feature}, currentIndex: number, isBackgroundLoading:
boolean]
Array
# usePrintReport() → {PrintReportReturn}
Hook to print current report
# useSize(target) → {Object}
A hook to listen for dom changes in the size of an element More at https://www.npmjs.com/package/@react-hook/resize-observer
Parameters:
| Name | Type | Description |
|---|---|---|
target |
React.ReactHTMLElement
|
The HTML Reference to listen to |
DOMRect object with the size of the element props: x,y,width,height,top,left,bottom,right
Object
Example
const App = () => {
const target = React.useRef(null)
const size = useSize(target)
return (
<pre ref={target}>
{JSON.stringify({width: size.width, height: size.height}, null, 2)}
</pre>
)
}# useStories(props) → {UseStoriesReturn}
Hook to get stories from the API
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
selectedStory |
= , |
|
filters |
Array.<StoryFilter>
|
Array of filters to apply to stories |
singleStoryId |
string
|
ID of a single story to fetch |
# useTickUpdate(props) → {Array}
A hook to update the date and map data when the tick is updated. Triggers off nIndex property in store
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
|
currDatesAvailable |
Array.<number>
|
Array of dates available |
Positional data return [isTicking: boolean, setIsTicking: (shouldTick: boolean) => void, tickTimer: number (timing), setTickTimer: (timeDelay: number) => void]
Array
# VariablePanel()
Self-contained component to manage paramsSlice and chance variable, data, etc.
TODO: This component should be refactored and cleaned up. It's a bit of a mess.
Type Definitions
Object
# Bins
Properties:
| Name | Type | Description |
|---|---|---|
bins |
Array.<string>
|
Array of bin names |
breaks |
Array.<number>
|
Array of bin breaks |
Object
# CartogramData
Properties:
| Name | Type | Description |
|---|---|---|
cartogramData |
Array
|
List of data entries for cartogram map {value: number, id: number, properties: Object, position: [number, number]}[] |
cartogramCenter |
Array.<number>
|
Lat/Long of the center of the cartogram. NOT the geospatial center of geographies |
cartogramDataSnapshot |
string
|
ID of the snapshot data |
Object
# ChartDataEntry
Single entry of long format timeseries data, suitable for use in d3/recharts viz.
Properties:
| Name | Type | Description |
|---|---|---|
date |
number
|
Date for this row of data |
sum |
number
|
Total sum of the variable for this date |
sum100k |
number
|
Total sum of the variable for this date, per 100k people |
daily |
number
|
Daily sum of the variable for this date |
daily100k |
number
|
Daily sum of the variable for this date, per 100k people |
weekly |
number
|
Weekly sum of the variable for this date |
weekly100k |
number
|
Weekly sum of the variable for this date, per 100k people ... |
Array.<ChartDataEntry>
# ChartDataSchema
Series long format timeseries data, suitable for use in d3/recharts viz.
Object.<string, DropdownEntry>
# DropdownContent
An object to be rendered as titles for dropdowns with DropdownEntry(ies) as content in sub-dropdowns
Object
# DropdownEntry
An entry in for dropdown sub-links
Properties:
| Name | Type | Description |
|---|---|---|
header |
string
|
Title for dropdown |
desc |
string
|
Dropdown description |
link |
string
|
Link for dropdown |
Object
# FileInfo
Properties:
| Name | Type | Description |
|---|---|---|
name |
String
|
Name of the file |
filetype |
String
|
Filetype of the file |
accumulate |
boolean
|
Whether to accumulate timeseries data or not |
join |
String
|
Join ID column to use, if applicable |
timespan |
String
|
Timespan of the file |
date |
String
|
Date of the file |
Object
# GeodaContext
React context provider for accessing jsgeoda web worker. All functions are async. For jsgeoda api, see https://www.npmjs.com/package/jsgeoda
Properties:
| Name | Type | Description |
|---|---|---|
geoda |
Object
|
jsgeoda instance |
geodaReady |
boolean
|
Reactive property if Geoda is ready |
Example
function App() {
return (
<GeodaProvider>
<MyComponents />
</GeodaProvider>
)
}Object
# LineChartData
Return shape of useGetLineChartdata
Properties:
| Name | Type | Description |
|---|---|---|
chartData |
Array.<Object>
|
See ChartDataSchema |
maximums |
Object
|
See MaximumsDataSchema |
currentData |
string
|
Current map data |
currIndex |
number
|
Current date index |
currRange |
number
|
Current date range |
selectionKeys |
Array.<number>
|
List of selected GEOID ids / key |
selectionNames |
Array.<string>
|
List of selected geography names |
Object
# LisaReturnData
Properties:
| Name | Type | Description |
|---|---|---|
lisaData |
Object
|
Jsgeoda lisa object |
clusters |
Array.<number>
|
Array of LISA values |
pvalues |
Array.<number>
|
Array of p-values See more at https://xunli.gitbook.io/jsgeoda/local-spatial-autocorrelation/local-moran |
shouldCacheWeights |
boolean
|
Boolean to indicate if weights should be cached |
weights |
Object
|
Jsgeoda weights object |
uid |
string
|
UID for generated weights |
mapUid |
string
|
UID of map / geojson |
Object
# MapData
Properties:
| Name | Type | Description |
|---|---|---|
value |
number
|
Value for current variable |
color |
Array.<number>
|
RGB color value |
Object
# MaximumsDataSchema
Summary data of maximum values for each property in ChartdataSchema, in addition to properties including keyDaily, keyWeekly... for individual GEOIDs and idDaily, idWeekly... for the sum of GEOIDs
Properties:
| Name | Type | Description |
|---|---|---|
sum |
number
|
Highest value |
sum100k |
number
|
Total sum of the variable for this date, per 100k people |
daily |
number
|
Daily sum of the variable for this date |
daily100k |
number
|
Daily sum of the variable for this date, per 100k people |
weekly |
number
|
Weekly sum of the variable for this date |
weekly100k |
number
|
Weekly sum of the variable for this date, per 100k people ... |
Object
# MdxPage
Properties:
| Name | Type | Description |
|---|---|---|
config |
PageConfig
|
The page config |
default |
React.Component
|
The page component |
Object
# Member
Properties:
| Name | Type | Description |
|---|---|---|
name |
string
|
Name of the member |
title |
string
|
Job title |
img |
string
|
Path to image file in /img/people |
bio |
string
|
Bio of the member |
Object
# PageConfig
Properties:
| Name | Type | Description |
|---|---|---|
slug |
string
|
The page slug (used in the URL) |
title |
string
|
The page title (head/meta) |
description |
string
|
The page description (head/meta) |
Object.<(number|string), Array.<PressEntry>>
# Press
A map of press entries, keyed by year, or other header to be used for title
Object
# PressEntry
An object containing information about a press entry
Properties:
| Name | Type | Description |
|---|---|---|
name |
string
|
The name of the publication |
link |
string
|
The link to the article |
text |
string
|
The text of the link, usually the title of the article |
date |
string
|
The date of the article publication |
Object
# PrintReportReturn
Properties:
| Name | Type | Description |
|---|---|---|
handlePrint |
function
|
function to print current report async (filetype: 'JPG','PNG','PDF') => Promise |
handleRef |
function
|
function to asign ref to current report page (ref: React.RefObject |
Object
# ScatterData
Properties:
| Name | Type | Description |
|---|---|---|
scatterData |
Array
|
Array of objects with x and y properties |
timestamp |
number
|
Timestamp of data |
Object
# StoryFilter
Properties:
| Name | Type | Description |
|---|---|---|
property |
string
|
Name of property to filter against |
value |
string
|
Value of property to filter |
operation |
string
|
Filter operation - 'match' | 'contains' | 'not' |
Object
# StoryMeta
Properties:
| Name | Type | Description |
|---|---|---|
title |
string
|
Story title |
theme |
string
|
Story theme |
county |
string
|
Story county |
tags |
Array.<string>
|
Story tags |
type |
string
|
type of story (eg. written, video) |
shortPresent |
boolean
|
whether there is a short version of this story |
Object
# TimeSeriesData
Return shape of fetchTimeSeries
Properties:
| Name | Type | Description |
|---|---|---|
chartData |
Array.<Object>
|
See ChartDataSchema |
maximums |
Object
|
See MaximumsDataSchema |
Object
# UseLoadDataReturn
Properties:
| Name | Type | Description |
|---|---|---|
geojsonData |
Object
|
GeojsonDataset - see
|
numeratorData |
Object
|
Dataset - see
|
denominatorData |
Object
|
Dataset - see
|
dateIndices |
Array.<number>
|
Array of dates loaded in current data |
dataReady |
boolean
|
Flag to indicate if data is ready to match current parameters |
currIndex |
number
|
Date Index of current data |
isBackgroundLoading |
boolean
|
Flag to indicate if background loading is in progress |
Object
# UseStoriesReturn
Properties:
Object
# Viewport
A standard Mapbox/Deck/GoogleMaps viewport object.
Properties:
| Name | Type | Description |
|---|---|---|
latitude |
number
|
In WGS84 |
longitude |
number
|
In WGS84 |
zoom |
number
|
0-22 (0 is the whole world) |
bearing |
number
|
In degrees, 0 is north |
pitch |
number
|
In degrees, 0 is straight down, 45 is max with Mapbox tiles |