Superalgos/docs/_includes/data_mine/style.md

{% assign title = "Style" %} {% assign definition = site.data.data_mine.style %} {% assign preposition = "a" %} {% assign plural = "s" %}

{% if include.more == "yes" and include.heading == "more" %}

Click to learn more about {{ title | downcase }}{{plural}}

{% endif %}

{% if include.heading != "" and include.heading != "more" %} {{include.heading}} {{title}} {% endif %}

{% if include.icon != "no" %}

{% if include.table == "yes" and include.icon != "no" %}

{% endif %} {% if include.table == "yes" and include.icon != "no" %}

{% endif %} {% endif %} {% if include.definition == "bold" %} {{ definition }} {% else %} {% if include.definition != "no" %} {{ definition }} {% endif %} {% endif %} {% if include.table == "yes" and include.icon != "no" %}

{% endif %}

{% if include.more == "yes" and include.content == "more" and include.heading != "more" %}

Click to learn more about {{ title | downcase }}{{plural}}

{% endif %}

{% if include.content != "no" %}

A style applied to a polygon body or a polygon border node acts as the default style.

{% endif %}

{% if include.more == "yes" and include.content != "more" and include.heading != "more" %}

Click to learn more about {{ title | downcase }}{{plural}}

{% endif %}

{% if include.adding != "" %}

{{include.adding}} Adding {{preposition}} {{title}} Node

To add a style, select Add Style on a polygon border or polygon body node menu.

{% endif %}

{% if include.configuring != "" %}

{{include.configuring}} Configuring the {{title}}

Select Configure Style on the menu to access the configuration.

A typical definition for a polygon body style looks like this:

{
    "default": {
        "opacity": 0.2,
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    },
    "atMousePosition": {
        "opacity": 0.3,
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    }
}

A typical definition for a polygon border style has a couple more properties:

{
    "default": {
        "opacity": 0.2,
        "lineWidth": 1,
        "lineDash": [0,0],
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    },
    "atMousePosition": {
        "opacity": 0.3,
        "lineWidth": 2,
        "lineDash": [0,0],
        "paletteColor": "UI_COLOR.RUSTED_RED"
    }
}

The first section of the definition refers, as explicitly stated, to the default state of the style.

The second section refers to the style assigned to the column or period on which the mouse pointer is located. This is very useful for highlighting the specific zone of interest as the user browses the charts.

• opacity is probably self-explanatory: it may range from 0 for a fully transparent object to 1 for a solid object.

• paletteColor sets the color for the fill or stroke in cases of polygon bodies and polygon borders respectively. Use the variable UI_COLOR followed by a . and any of the properties in the following list for a selection of currently available colors:

Variable Value	RGB Value	Color Sample
DARK	48, 48, 54
LIGHT	234, 226, 222
GREY	150, 150, 150
LIGHT_GREY	247, 247, 247
WHITE	255, 255, 255
BLACK	0, 0, 0
GOLDEN_ORANGE	240, 162, 2
RUSTED_RED	204, 88, 53
GREEN	188, 214, 67
RED	223, 70, 60
PATINATED_TURQUOISE	27, 153, 139
TITANIUM_YELLOW	244, 228, 9
MANGANESE_PURPLE	91,80, 122
TURQUOISE	74, 207, 217
DARK_TURQUOISE	2, 149, 170

• lineWidth is the width of the border line, which should be greater than 0.

• lineDash is used to turn the border into a dashed-line; the first value corresponds to the length of the dash while the second value defines the length of the space.

{% include note.html content="When using dashed lines, bear in mind that the drawing from one column or period is independent of the next. Big values for dashes and spaces may not work well for lines that span several columns." %}

{% endif %}

{% if include.starting != "" %}

{{include.starting}} Starting {{preposition}} {{title}}

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

{% endif %}

{% if include.more == "yes" %}

{% endif %}