Widgets

There are several pre-build Widgets within Isthmus that can be used for manipulating data viewed within the map. Please review the roadmap for future additions and open an issue for other suggestions.

In the base example, widgets are rendered in the RightBar.js file however using Airship, they can be placed in any container.

General Concepts

• Make sure to use the correct import syntax

• There are far more props in the widgets, so make sure to follow the documentation closely

Category Widget

import Category from '.././widgets/Category'

<Category
    title='Railroad Company'
    description='Total damage for each railroad company in USD'
    categoryLayer={this.props.layers.railaccidents.source}
    column='railroad'
    operation={carto.operation.SUM}
    operationColumn='total_damage'
/>

The Category component adds in a Category widget from Airship and creates a Dataview and Filter on the layer you are applying the widget to. See the Airship docs for more details. It takes the following props:

Prop	Description
title	Widget heading title
description	Widget description title
categoryLayer	Layer which the category widget will be created for. This will follow the format this.props.layers.{LAYER_NAME}.source
column	Column which the category widget will be created on
operation	CARTO.js filter operation that will be applied to the CARTO.js Category Dataview
operationColumn	Numeric column where the operation will be applied

Sample Category widget

Histogram Widget

import Histogram from '.././widgets/Histogram'

<Histogram
      title='Hour'
      description='Hour at the time of the accident'
      layer={this.props.layers.railaccidents.source}
      column='hour'
      bins={12}
/>

The Histogram component adds in a Histogram widget from Airship and creates a Dataview and Filter on the layer you are applying the widget to. See the Airship docs for more details. It takes the following props:

Prop	Description
title	Widget heading title
description	Widget description title
layer	Layer which the category widget will be created for. This will follow the format this.props.layers.{LAYER_NAME}.source
column	Column which the histogram widget will be created on - must be a numeric column
bins	Number of bins to create for the histogram widget. See the CARTO.js Dataview documentation for more information.

Sample Histogram widget

Range Slider

import Range from '.././widgets/Range'

<Range
        before=''
        after='°F'
        title='Temperature'
        description='Temperature at the time of the accident'
        layer={this.props.layers.railaccidents.source}
        column='temp'
        step={1}
/>

The Range component adds in a Range widget from Airship and creates a Filter on the layer you are applying the widget to. See the Airship docs for more details. It takes the following props:

Prop	Description
before	Text to display before the number (i.e. if before='$' then the display will be $100)
after	Text to display after the number (i.e. if before='%' then the display will be 100%)
title	Widget heading title
description	Widget description title
layer	Number of bins to create for the histogram widget. See the CARTO.js Dataview documentation for more information.
column	Column which the histogram widget will be created on - must be a numeric column
step	Step of the range widget slide (i.e. if step={5} then the slider will go from 0...5...10...etc.)

Sample Range slider

Formula

import Formula from '.././widgets/Formula'

<Formula
    title='Total Damage'
    description='Average total damage in USD for accidents in view'
    round={true}
    currency={true}
    locale='en-US'
    currencyType='USD'
    layer={this.props.layers.railaccidents.source}
    column='total_damage'
    operation={carto.operation.AVG}
/>

The Formula component adds in a text display and creates a Filter (along with a bounding box filter) on the layer you are applying the widget to. It takes the following props:

Prop	Description
title	Widget heading title
description	Widget description title
round	Boolean if you are going to round the number, otherwise defaults to two decimal places
currency	Boolean if you are going to display the number as a currency
locale	Locale for the number formatting you want to use. See a list of available locales here and here.
currencyType	Currency type to show if the currency prop is true. See a list of ISO currency codes here.
layer	Number of bins to create for the histogram widget. See the CARTO.js Dataview documentation for more information.
column	Column which the histogram widget will be created on - must be a numeric column
operation	CARTO.js filter operation that will be applied to the CARTO.js Category Dataview

Example Formula widget with 'en-US' as the locale and 'USD' as currency

Example Formula widget with 'es-ES' as the locale and 'EUR' as currency

Text Search

import TextSearch from '.././widgets/TextSearch'

<TextSearch
    title='Accident Description'
    description='Search text in the accident description field'
    id='search'
    layer={this.props.layers.railaccidents.source}
    placeholder='Search...'
    column='narrative'
/>

The TextSearch component adds in a text search input field and creates a Filte on the layer you are applying the widget to. It takes the following props:

Prop	Description
title	Widget heading title
description	Widget description title
id	HTML id of the input field
currency	Boolean if you are going to display the number as a currency
layer	Number of bins to create for the histogram widget. See the CARTO.js Dataview documentation for more information.
placeholder	Placeholder text for the input
column	Column which the histogram widget will be created on - must be a string column

Example TextSearch component

Infowindow

Lacking configuration - coming soon

Export

import Export from '.././widgets/Export'

<Export
  layer={this.props.layers.railaccidents.source}
  format='shp'
  filename='rail_data'
  name='Export Data'
/>

Export creates a button to export your data with the current set of applied filters. It takes the following props:

Prop	Description
layer	Layer which the export button will be created for. This will follow the format this.props.layers.{LAYER_NAME}.source
format	File format that will exported. Options include gpkg, csv, shp, svg, kml, spatialite, geojson - see more here
filename	Filename of the exported file
name	Title of the export button

Sample Export button