Flo.w

# Reactive Expression Reference

Reactive expressions are used throughout Flo.w RDF to specify:

Reactive expressions are written in a JavaScript-like language and can access map features and application state properties. If a reactive expression references a reactive property then the expression will be re-evaluated automatically when the reactive property changes.

# Types

Type Description
Color A hex-color (#ffffff, #fff) or CSS color string (e.g red, lightblue). See Color Functions for creating colors from RGB values and palettes.
String A text value. Single or double quotes can be used. If the string is unambiguous, quotes can be omitted.
Number An integer or floating point number.
Boolean true or false.
Array A comma-separated list of values surround by [...].

# Operators

The following operators are supported and are equivalent to their JavaScript counterparts. They are listed in order of precedence.

Operator Description
(...) Expression grouping
@, @@, $ Feature property, feature state, and application state property selectors
. Member access
func(...) Function call
!, - Logical NOT and unary negation
^ Arithmetic exponent
*, /, % Arithmetic multiplication, division and remainder
+, - Arithmetic addition and subtraction
<=, >= Numeric comparison
<, > Numeric comparison
==,!= Equality and inequality
&& Logical AND
|| Logical OR
... ? ... : ... Conditional (ternary) operator

# Functions

# Accessing Map Features

A reactive expression used in a map layer style can access map feature properties and feature state. This enables 'data-driven' layer styling where features are rendered using per-feature data.

To access a feature property in a reactive expression use the @propertyName syntax. To access feature state use the @@propertyName syntax. Feature state also supports member access of sub-properties: @@property.subProp.subSubProp. For more information about feature state see Map Data Join.

# Accessing Application State

To access application state in a reactive expression feature property use the $propertyName syntax. Member access of sub-properties is also supported: $property.subProp.subSubProp. When referenced application state properties are changed, the reactive expression will be automatically re-evaluated.

# Reactive Expression Examples

Map layer data-driven styling:

<flow-map-layer type="circle" ...>
  circle-color: from-palette('RdYlGn', @prop1, 0, 100);
  circle-radius: @prop2 * 10;
</flow-map-layer>

Map layer visibility controlled by application state:

<flow-map-layer type="circle" ...>
  circle-color: red;
  visibility: $showCircleLayer;
</flow-map-layer>

Setting a gauge value from an application state property:

<flow-gauge heading="Gauge 1" value="($val1 - 20) * 100"></flow-gauge>

Displaying an array of data from results of a Flo.w reactive query:

<flow-data-table data="$queries.myQuery.results">
  <flow-data-column ...></flow-data-column>
  <flow-data-column ...></flow-data-column>
  ...
</flow-gauge>

← Color Functions →