Skip to content

Latest commit

 

History

History
365 lines (346 loc) · 13.1 KB

settings-reference.md

File metadata and controls

365 lines (346 loc) · 13.1 KB

@settings reference

In the Advanced Editor, the @settings block can be used to tweak default settings and add all kinds of powerful features to your view.

The @settings block supports all decoration properties listed in the property reference, as long as you prefix each property with one of the following:

  • *- if you want to apply the rule to all items
  • element- to apply the rule to elements only
  • connection- to apply the rule to connections only
  • loop- to apply the rule to loops only

But, @settings also supports its own list of exclusive properties. The table below lists all properties that can be used exclusively inside an @settings block, describes their effect on the view, and lists valid values for each property (when there are multiple valid values, we've listed them as separate snippets of inline code).

There are just few more things you should know about the valid values listed below:

Where you see... You can use...
selector Any selector
color Any CSS web color or hex color code
number Any number
'field name' The name of any of your fields, wrapped in single or double quotes
element type Any text/string value

All values are unitless.

Supported properties

<style> th:first-child { width: 200px; } td:nth-child(3) div:not(:first-child) { margin-top: 1.5rem; } </style>
Property Description Possible values
attenuation Determines whether elements and connections maintain their size relative to the background map (available for the Geo template only)
on
off
background-color Sets the canvas' background color
color
background-opacity Sets the opacity of items outside of a showcased selection
0..1
bridge Activates bridging. See the bridge guide for more information.
element-selector
cluster Activates clustering. See the cluster guide for more information.
'field name'
element-selector by 'field name'
element-selector by 'field name' as 'element type'
culling Determines whether elements and connections are hidden when the reader zooms in very close
on
off
focus Activates focus. See the focus guide for more information.
selector out number
font-cutoff Sets the minimum font size at which labels will display when the map is zoomed out. Set to 0 to always display labels, regardless of zoom level.
number
foreground-opacity Sets the opacity of showcased items
0..1
geo-location Sets the field that will be used to geo-locate elements
'field name'
string-template
geo-style Sets the style of the geo map
auto
streets
satellite
ignore Ignores a selection. See the filter guide for more information.
selector
include Includes a selection. See the filter guide for more information.
selector
layout Sets the layout type
force
static
scatter
layout-bounds-xmax Sets a maximum x coordinate that grid and guide lines can extend to
number
layout-bounds-xmin Sets a minimum x coordinate that grid and guide lines can extend to
number
layout-bounds-ymax Sets a maximum y coordinate that grid and guide lines can extend to
number
layout-bounds-ymin Sets a minimum y coordinate that grid and guide lines can extend to
number
layout-gravity Sets the gravity for the force-directed layout
number
layout-grid Determines whether a grid will be shown
on
off
layout-grid-color Sets the color of the grid
color
layout-grid-offset Sets the space between grid lines
number
layout-grid-width Sets the thickness of grid lines
number
layout-guide-color Sets the color of guide lines
color
layout-guide-width Sets the thickness of guide lines
number
layout-guides Sets the x or y coordinate for each guide line, or the origin and radius of a circle
x(number)
y(number)
circle(x, y, r)
circle(r)
layout-particle-charge Sets the particle charge for the force-directed layout
number
layout-preset Chooses a preset version of the force-directed layout
auto
dense
hairball
layout-spring-length Sets the spring length for the force-directed layout
number
layout-spring-strength Sets the spring strength for the force-directed layout
number
layout-x Sets the field used to determine elements' x coordinate in the scatter layout
'field name'
layout-x-multiplier Sets a number that will be multiplied by each elements layout-x field to determine their final x coordinate
number
layout-y Sets the field used to determine elements' x coordinate in the scatter layout
'field name'
layout-y-multiplier Sets a number that will be multiplied by each elements layout-y field to determine their final y coordinate
number
notification-color Sets the color of asterisks created by Issues
color
profile Controls whether or not profiles can be opened
on
off
quality Sets the render quality
fast
best
radar Determines whether a radar will be shown
on
off
radar-axes Sets the labels for radar axes
Axis 1, Axis 2, Axis 3...
radar-font-color Sets the color of radar labels
color
radar-font-family Sets the font family of radar labels
family-name
generic-family
radar-font-size Sets the font size for radar labels
number
radar-ring-color Sets the color between radar rings
color
radar-ring-opacity Sets the opacity of radar rings
0..1
radar-ring-size Sets the distance between radar rings
number
radar-ring-size-inner Sets the radius of the inner radar ring
number
radar-rings Sets the labels for radar rings
Ring 1, Ring 2, Ring 3...
renderer Chooses which rendered will be used
canvas
webgl
scale-max Sets the maximum allowed zoom level
number
scale-min Sets the minimum allowed zoom level
number
selection-color Sets the color of the ring that appears around selected elements
color
showcase Activates showcase. See the showcase guide for more information.
selector
template Chooses a template
causal-loop
custom
geo
sna
stakeholder
stock-and-flow
systems
systems-leverage
theme Sets the view's overall theme
light
dark
<script type="text/javascript"> function searchProperties(tableName) { let searchBox, searchTerm, table, rows, i, cells, textToSearch; searchBox = document.querySelector("#"+ tableName + "-search-box"); searchTerm = searchBox.value.toLowerCase(); table = document.querySelector("#"+ tableName + "-search-table"); rows = table.querySelectorAll("tr"); for(i = 1; i < rows.length; i++) { cell = rows[i].querySelector("td"); textToSearch = cell.innerHTML.toLowerCase(); if(textToSearch.indexOf(searchTerm) > -1) { rows[i].style.display = "table-row"; } else { rows[i].style.display = "none"; } } } </script>

edit this page