CARTO for React

A set of advanced widgets, which allow not only a visual representation but a rich interaction with data & map layers, such as filtering or an automatic data refresh on viewport change, thanks to the connection with the CARTO slice on redux.

Tip: To review interactively the widgets, check the Storybook catalogue

Components

CategoryWidget

Renders a <CategoryWidget /> component, binded to a source at redux. The widget displays the calculations considering just the viewport features.

• Input:

• Example:

  In this example, the widget would display the SUM of population for all the countries, grouped by continent

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  import { CategoryWidget } from "@carto/react-widgets"; const customFormatter = (value) => </span><span class="si">${</span><span class="nx">value</span><span class="si">}</span><span class="sb"> people; return ( <CategoryWidget id="populationByContinent" title="Population by continent" dataSource="countriesSourceId" column="continent" operationColumn="population" operation={AggregationTypes.SUM} formatter={customFormatter} onError={console.error} /> ); // The operationColumn wouldn't be required if using AggregationTypes.COUNT, to count the number of countries per continent

FormulaWidget

Renders a <FormulaWidget /> component, binded to a source at redux. The widget displays the calculations considering just the viewport features.

• Input:

• Example:

  In this example, the widget would display the AVG sales for all the stores on screen

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  import { FormulaWidget } from "@carto/react-widgets"; const customFormatter = (value) => </span><span class="si">${</span><span class="nx">value</span><span class="si">}</span><span class="sb"> $; return ( <FormulaWidget id="averageRevenue" title="Average revenue" dataSource="storesSourceId" column="revenue" operation={AggregationTypes.AVG} formatter={customFormatter} onError={console.error} /> );

GeocoderWidget

Renders a <GeocoderWidget /> component

• Input:

HistogramWidget

Renders a <HistogramWidget /> component, binded to a source at redux. The widget displays the calculations considering just the viewport features.

• Input:

• Example:

  In this example, the widget would display the number of stores in different ranks, based on their number of sales

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  import { HistogramWidget } from "@carto/react-widgets"; const customFormatter = (value) => </span><span class="si">${</span><span class="nx">value</span><span class="si">}</span><span class="sb"> $; return ( <HistogramWidget id="storesByNumberOfSales" title="Stores by number of sales" dataSource="storesSourceId" operation={AggregationTypes.COUNT} column="salesNumber" ticks={[10, 100, 500, 1000]} onError={console.error} /> ); // bins for the histogram would be <10, 10 to 100, 100 to 500, 500 to 1000 and > 1000

PieWidget

Renders a <PieWidget /> component, binded to a source at redux. The widget displays the calculations considering just the viewport features. From a data perspective, PieWidget would present a behaviour equivalent to CategoryWidget (groups or ‘categories’ from a column, with an aggregated calculation), but with a different UI.

• Input: