Feature Card

The feature card allows you to create highly customised components. It displays multiple rows of indicator data for each selected feature. The data and format of each row is described in a separate html file called snippet.htm.

snippet.htm contains a combination of html and InstantAtlas substitution variables. The code within the file is repeated for each indicator when you select a new feature. The substituion variables are replaced with the corresponding values for the selected feature and indicator.

Please note that this article is the only support for customisations to snippet.htm. Our standard support terms do no cover custom code. For this reason you should be competent with HTML/CSS if you intend to make your own edits to the Feature Card.

Substitution Variables

Each variable has the format ${variableName}.

The dollar sign and curly brackets ${} indicate that the text is a variable.

A simple example of a variable might be for the selected feature name ${feature-name}.

When the user selects a new feature the text ${feature-name} will be automatically substituted with the name of the selected feature.

The variables can be combined with regular text like this.

${indicator-name} for date ${indicator-date}.

And with html elements like this. In this example the indicator name is placed on a new line and written in bold.

${theme-name} <br/> <b>${indicator-name}</b>.

You can also use conditional statements. This one checks the indicator type and writes 'display:inline' if its a numeric indicator.

${equals(indicator-type, 'numeric', 'display:inline')}.

Example Reports

Using the config properties to control which data are displayed
Advanced
1. Add a bar that displays a rate. (v671)
2. Area Profile. (v671)
3. Performance Profile. (v671)
4. Election. (v671)
Order data by indicator for side by side feature comparison
1. Display the name and value for all indicators in the current theme, with the selected date. (v671)
2. Add a bar that displays a rate. (v671)
3. Area Profile. (v671)
4. List the features in a grid. (v671)

Feature

The feature id.
${feature-id} (v671)
The feature name.
${feature-name} (v671)
The feature href.
${feature-href} (v671)
The feature index.
For each theme the displayed features are numbered, starting from 0.
${feature-index} (v671)
Values for any feature properties. Use the name of the property.
${propertyName-value} (v671)
So to get the value for a property called rate you would use ${rate-value}

Geography

The geography id.
${geography-id} (v671)
The geography name.
${geography-name} (v671)

Theme

The theme id.
${theme-id} (v671)
The theme name.
${theme-name} (v671)
The theme index.
Each theme is numbered, starting from 0.
${theme-index} (v671)

Indicator

The indicator id.
${indicator-id} (v671)
The indicator name.
${indicator-name} (v671)
The indicator index.
For each theme the displayed indicators are numbered, starting from 0.
${indicator-index} (v671)
The indicator type.
${indicator-type} (v671)
The value of the indicator for the selected feature.
${indicator-value} (v671)
The formatted value of the indicator for the selected feature.
${indicator-formatted-value} (v671)
The indicator href.
${indicator-href} (v671)
The indicator date.
${indicator-date} (v671)
The indicator date index.
For each indicator the displayed dates are numbered, starting from 0.
${indicator-date-index} (v671)
Values for any indicator properties. Use the name of the property. Indicators inherit properties from both their parent theme and geography.
${propertyName-value} (v671)
So to get the value for a property called rate you would use ${rate-value}

Associates

The value of the associate for the selected feature. Use the name of the associate.
${associateName-value} (v671)
So to get the value for an associate called rate you would use ${rate-value}
The formatted value of the associate for the selected feature.
${associateName-formatted-value} (v671)
The associate type.
${associateName-type} (v671)

Limits

The value of the lower limit for the selected feature.
${lower-limit-value} (v671)
The formatted value of the lower limit for the selected feature.
${lower-limit-formatted-value} (v671)
The value of the upper limit for the selected feature.
${upper-limit-value} (v671)
The formatted value of the upper limit for the selected feature.
${upper-limit-formatted-value} (v671)

Conditional Statements

equals (v671)
If indicator-type is numeric write 'display:inline'.
${equals(indicator-type, 'numeric', 'display:inline')}
If indicator-type is numeric write 'display:inline,' else write 'display:none'.
${equals(indicator-type, 'numeric', 'display:inline', 'display:none')}
notEquals (v671)
If indicator-type is not categoric write 'display:none'.
${notEquals(indicator-type, 'categoric', 'display:none')}
If indicator-type is not categoric write 'display:none', else write 'display:inline'.
${notEquals(indicator-type, 'categoric', 'display:none', 'display:inline')}
empty (v671)
If indicator-date is empty write 'No date available'.
${empty(indicator-date, 'No date available')}
If indicator-date is empty write 'No date available', else write 'Date available'.
${empty(indicator-date, 'No date available', 'Date available')}
notEmpty (v671)
If indicator-date is not empty write 'The date is' followed by the date.
${notEmpty(indicator-date, 'The date is')} ${indicator-date}
If indicator-date is not empty write 'The date is' followed by the date, else write 'No date available'.
${notEmpty(indicator-date, 'The date is', 'No date available')} ${indicator-date}
greaterThanOrEqualTo (v671)
If indicator-value >= 10 write 'true'.
${greaterThanOrEqualTo(indicator-value, 10, 'true')}
If indicator-value >= 10 write 'true', else write 'false'.
${greaterThanOrEqualTo(indicator-value, 10, 'true', 'false')}
lessThanOrEqualTo (v671)
If indicator-value <= 10 write 'true'.
${lessThanOrEqualTo(indicator-value, 10, 'true')}
If indicator-value <= 10 write 'true', else write 'false'.
${lessThanOrEqualTo(indicator-value, 10, 'true', 'false')}
greaterThan (v671)
If indicator-value > 10 write 'true'.
${greaterThan(indicator-value, 10, 'true')}
If indicator-value > 10 write 'true', else write 'false'.
${greaterThan(indicator-value, 10, 'true', 'false')}
lessThan (v671)
If indicator-value < 10 write 'true'.
${lessThan(indicator-value, 10, 'true')}
If indicator-value < 10 write 'true', else write 'false'.
${lessThan(indicator-value, 10, 'true', 'false')}
even (v671)
If indicator-value is even write 'true'.
${even(indicator-value, 'true')}
If indicator-value is even write 'true', else write 'false'.
${even(indicator-value, 'true', 'false')}
odd (v671)
If indicator-value is odd write 'true'.
${odd(indicator-value, 'true')}
If indicator-value is odd write 'true', else write 'false'.
${odd(indicator-value, 'true', 'false')}

Combining conditional statements with the '&&' and '||' operators. (v671)

If theme-id is equal to 't1' and indicator-value is not empty write 'display:block' otherwise write 'display:none'.
${equals(theme-id, 't1') && notEmpty(indicator-value) == ('display:block', 'display:none')}
If indicator-value is greater than 10 and less than 100 write 'indicator lies within range' otherwise write 'indicator lies outside range'.
${greaterThan(indicator-value, 10) && lessThan(indicator-value, 100) == ('indicator lies within range', 'indicator lies outside range')}
If indicator-name is empty or indicator-value is empty write 'display:none' otherwise write the indicator-name.
${empty(indicator-name) || empty(indicator-value) == ('display:none', indicator-name)}
If geog-id is equal to 'g1' and theme-id is equal to 't1' and indicator-id is equal to 'i1' 'display:block' otherwise write 'display:none'.
${equals(geog-id, 'g1') && ${equals(theme-id, 't1') && equals(indicator-id, 'i1') == ('display:block', 'display:none')}

Maths

multiply (v671)
indicator-value * 10.
${multiply(indicator-value, 10)}
divide (v671)
indicator-value / 10.
${divide(indicator-value, 10)}
add (v671)
indicator-value / 10.
${add(indicator-value, 10)}
subtract (v671)
indicator-value - 10.
${subtract(indicator-value, 10)}
min (v671)
minimum value of indicator-value and 10.
${min(indicator-value, 10)}
max (v671)
maximum value of indicator-value and 10.
${max(indicator-value, 10)}
pow (v671)
indicator-value to the power of 2.
${pow(indicator-value, 2)}
sqrt (v671)
Square root of indicator-value.
${sqrt(indicator-value)}
exp (v671)
Exponential value of indicator-value.
${exp(indicator-value)}
log (v671)
Log value of indicator.
${log(indicator-value)}
abs (v671)
Absolute value of indicator.
${abs(indicator-value)}

Arrays

Return the value in the breaks array at index 1.
${breaks-value[1])} (v671)
Subtract the value in the breaks array at index 0 from the breaks array at index 1.
${subtract(breaks-value[1], breaks-value[0])} (v671)

Display the name and value for the current indicator only. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected indicator only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:8px">
    ${indicator-name} ${indicator-date} : ${indicator-formatted-value}
</div>

Display the name and value for all indicators in the current theme. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = false
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:8px">
    ${indicator-name} ${indicator-date} : ${indicator-formatted-value}
</div>

Display the name and value for all indicators in all themes. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'All themes'
'Display Selected Date Only?' = false
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:8px">
    ${indicator-name} ${indicator-date} : ${indicator-formatted-value}
</div>

Display the name and value for all indicators in the current theme, with the selected date. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:8px">
    ${indicator-name} ${indicator-date} : ${indicator-formatted-value}
</div>

Display the name and value for all indicators in all themes, with the selected date. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'All themes'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:8px">
    ${indicator-name} ${indicator-date} : ${indicator-formatted-value}
</div>

Use different background colours for alternating rows. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:8px;background:${odd(indicator-index, '#eaf4f7', '#f7ebf0')}">
    ${indicator-name} ${indicator-date} : ${indicator-formatted-value}
</div>

List the indicators in a grid. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="vertical-align:top;
            text-align:center;
            overflow:hidden;
            width:150px;
            display:inline-block;
            margin:10px;
            padding:10px;
            background:${odd(indicator-index, '#eaf4f7', '#f7ebf0')}">
    <div style="padding-top:5px;height:60px;">${indicator-name}</div> 
    <div style="padding-top:5px;font-size:20px;font-weight:bold;color:${odd(indicator-index, '#537e8a', '#833c5a')}">${indicator-formatted-value}</div>
</div>

Add a bar that displays a rate. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:10px;font-size:11px">

    <!-- indicator name -->
    <div style="padding:5px">
        ${indicator-name}
    </div>

    <div style="padding:5px">

        <!-- chart - hide if the indicator is categoric -->
        <div style="display:${equals(indicator-type, 'numeric', 'inline-block', 'none')};vertical-align:top">
            <svg preserveAspectRatio="none" style="border:1px solid #6bc1d7" width="200" height="13" viewBox="0 0 100 10">
                <rect x="0" y="0" width="${indicator-value}" height="10" style="fill:#6bc1d7"/>
            </svg>
        </div>

        <!-- indicator value -->
        <div style="display:inline-block;font-weight:bold">${indicator-formatted-value}</div>

    </div>
</div>

Area Profile. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = false
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:10px;font-size:11px">

    <!-- indicator name -->
    <div style="padding:5px;font-weight:bold">
        ${indicator-name}
    </div>

    <div style="padding:5px">

        <!-- min value -->
        <div style="display:inline-block">-10</div>

        <!-- chart -->
        <div style="display:inline-block;vertical-align:top">
            <svg style="border:1px solid #cccccc" preserveAspectRatio="none" width="200" height="13" viewBox="-10 0 20 10">

                <!-- background -->
                <rect x="-10" y="0" width="20" height="10" fill="#f7f7f7"/>

                <!-- bar -->
                <rect y="0" width="${abs(diff-value)}" height="10" x="${greaterThan(diff-value, 0, 0, diff-value)}" fill="${greaterThan(diff-value, 0, '#4ba163', '#e66c64')}"/>
            </svg>
        </div>

        <!-- max value -->
        <div style="display:inline-block">+10</div>

        <!-- data -->
        <div style="display:inline-block;padding-left:5px">
            <span>${indicator-formatted-value}%</span>
            <span style="color:${greaterThan(diff-value, 0, '#4ba163', '#e66c64')};font-weight:bold">
                ${greaterThan(diff-value, 0, '▲', '▼')} ${diff-formatted-value}%
            </span> 
        </div>

    </div>
</div>

Performance Profile. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = false
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:15px;font-size:11px">

    <!-- indicator name -->
    <div style="padding:5px;font-weight:bold">
        ${indicator-name}
    </div>

    <div style="padding:5px">
        <!-- min break value -->
        <div style="display:inline-block;">${breaks-value[0]}</div>

        <!-- chart -->
        <div style="display:inline-block;vertical-align:top">
            <svg style="width:100%;border:1px solid #cccccc" preserveAspectRatio="none" width="300" height="13" viewBox="${breaks-value[0]} 0 ${subtract(breaks-value[3], breaks-value[0])} 10">

                <!-- breaks -->
                <rect y="0" x="${breaks-value[0]}" width="${subtract(breaks-value[1], breaks-value[0])}" height="10"  fill="${equals(breaksFlip-value, true, '#ffd1d1', '#d5fcdd')}"/>
                <rect y="0" x="${breaks-value[1]}" width="${subtract(breaks-value[2], breaks-value[1])}" height="10"  fill="#fff7cc"/>
                <rect y="0" x="${breaks-value[2]}" width="${subtract(breaks-value[3], breaks-value[2])}" height="10"  fill="${equals(breaksFlip-value, true, '#d5fcdd', '#ffd1d1')}"/>

                <!-- target -->
                <svg preserveAspectRatio="none" x="${target-value}" y="0" width="${subtract(breaks-value[3], breaks-value[0])}" height="10" viewBox="0 0 300 13">
                    <rect y="0" y="0" width="3" height="13"  fill="#794ba1"/>
                </svg>

                <!-- baseline -->
                <svg preserveAspectRatio="none" x="${baseline-value}" y="0" width="${subtract(breaks-value[3], breaks-value[0])}" height="10" viewBox="0 0 300 13">
                    <rect y="0" y="0" width="3" height="13"  fill="#5170d4"/>
                </svg>

                <!-- indicator value bar -->
                <rect y="4" x="${min(indicator-value, 0)}" width="${abs(indicator-value)}" height="2"  fill="${equals(trend-value, '++', '#49be80')} 
                    ${equals(trend-value, '+', '#49be80')} 
                    ${equals(trend-value, '0', '#d48651')} 
                    ${equals(trend-value, '-', '#d45155')} 
                    ${equals(trend-value, '--', '#d45155')}"/>
            </svg>
        </div>

        <!-- max break value -->
        <div style="display:inline-block">${breaks-value[3]}</div>
    </div>

    <!-- data -->
    <div style="line-height:25px;padding-left:5px">
        <span style="color:${equals(trend-value, '++', '#49be80')} 
            ${equals(trend-value, '+', '#49be80')} 
            ${equals(trend-value, '0', '#d48651')} 
            ${equals(trend-value, '-', '#d45155')} 
            ${equals(trend-value, '--', '#d45155')};padding-right:15px">
            <span style="font-size:18px;font-weight:bold">${indicator-formatted-value}%</span>
            <span style="font-size:${equals(trend-value, '++', '23px')} 
                ${equals(trend-value, '+', '16px')} 
                ${equals(trend-value, '0', '25px')} 
                ${equals(trend-value, '-', '16px')} 
                ${equals(trend-value, '--', '23px;')}">
                ${equals(trend-value, '++', '▲')} 
                ${equals(trend-value, '+', '▲')} 
                ${equals(trend-value, '0', '-')} 
                ${equals(trend-value, '-', '▼')} 
                ${equals(trend-value, '--', '▼')}
            </span> 
        </span> 
        <span>Baseline: </span><span style="padding-right:15px;color:#5170d4;font-weight:bold">${baseline-formatted-value}</span>
        <span>Target: </span><span style="color:#794ba1;font-weight:bold"> ${target-formatted-value}</span>
    </div>

</div>

Election. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by feature'
'Display Mode?' = 'All data'
'Display Selected Date Only?' = true
'Display Main Header?' = false
'Display Sub Header?' = true

snippet.htm

<!-- Theme 1 indicators / Summary, indicators placed in-line -->
<div style="${notEquals(theme-id, 't0', 'display:none', 'display:inline-block')};
            background:#f1e2e8;
            padding:15px;
            margin:15px 0px 15px 20px;
            font-size:12px;
            vertical-align:top;
            text-align:center">

            ${equals(indicator-type, 'numeric') && equals(indicator-type, 'numeric') || equals(indicator-type, 'other') ==('yes', 'no')} 

    
    <div style="font-weight:bold">${indicator-name}</div> 
    
    <div style="padding-top:5px;${equals(indicator-value, 'Conservative', 'font-weight:bold;color:#333399')}
                ${equals(indicator-value, 'Labour', 'font-weight:bold;color:#cb0000')}
                ${equals(indicator-value, 'Liberal Democrat', 'font-weight:bold;color:#fd9800')}
                ${equals(indicator-value, 'Green', 'font-weight:bold;color:#329800')}
                ${equals(indicator-value, 'UKIP', 'font-weight:bold;color:#653265')}
                ${equals(indicator-value, 'SNP', 'font-weight:bold;color:#fdcb00')}
                ${equals(indicator-value, 'Plaid Cymru', 'font-weight:bold;color:#006500')}
                ${equals(indicator-value, 'Independent', 'font-weight:bold;color:#989898')}
                ${equals(indicator-value, 'Mix', 'font-weight:bold;color:#999999')}">${indicator-formatted-value}</div>
</div>

<!-- Theme 2 indicators / Candidates with an indicator value, indicators placed on new line -->
<div style="${equals(theme-id, 't1') && notEmpty(indicator-value) == ('display:block', 'display:none')};
            padding:15px 20px 15px 20px;width:100%;font-size:12px;border-top:1px solid #f1e2e8">

    <!-- Top three candidates -->
    <div style="${greaterThan(indicator-index, 2, 'display:none')}">

        <!-- Candidate photo, only display if its been defined -->
        <div style="${notEmpty(photo-value, 'display:inline-block',  'display:none')}">
            <img src='${photo-value}' style='border:1px solid #cccccc;width:75px;height:80px'/>
        </div>

        <div style="display:inline-block;vertical-align:top">

            <!-- First line of data -->
            <div style="padding:5px">

                <div style="display:inline-block;padding-right:15px;font-weight:bold;
                            color:${equals(party-value, 'Conservative', '#333399')}
                            ${equals(party-value, 'Labour', '#cb0000')}
                            ${equals(party-value, 'Liberal Democrat', '#fd9800')}
                            ${equals(party-value, 'Green', '#329800')}
                            ${equals(party-value, 'UKIP', '#653265')}
                            ${equals(party-value, 'SNP', '#fdcb00')}
                            ${equals(party-value, 'Plaid Cymru', '#006500')}
                            ${equals(party-value, 'Independent', '#989898')}
                            ${equals(party-value, 'Mix', '#999999')}">${party-formatted-value}</div>

                <div style="display:inline-block;padding-right:15px;font-weight:bold">${indicator-formatted-value}</div>

            </div>

            <!-- Bar -->
            <div style="padding:5px">
                <svg style="background:#dddddd" preserveAspectRatio="none" width="300" height="10" viewBox="0 0 100 10">

                    <rect x="0" y="0" width="${percentage of vote-value}" height="10"  fill="${equals(party-value, 'Conservative', '#333399')}
                                                                                            ${equals(party-value, 'Labour', '#cb0000')}
                                                                                            ${equals(party-value, 'Liberal Democrat', '#fd9800')}
                                                                                            ${equals(party-value, 'Green', '#329800')}
                                                                                            ${equals(party-value, 'UKIP', '#653265')}
                                                                                            ${equals(party-value, 'SNP', '#fdcb00')}
                                                                                            ${equals(party-value, 'Plaid Cymru', '#006500')}
                                                                                            ${equals(party-value, 'Independent', '#989898')}
                                                                                            ${equals(party-value, 'Mix', '#999999')}"/>
                </svg>
            </div>

            <!-- Second line of data -->
            <div style="padding:5px">
                <span style="padding-right:15px;font-size:18px;font-weight:bold;color:${equals(party-value, 'Conservative', '#333399')}
                                                                    ${equals(party-value, 'Labour', '#cb0000')}
                                                                    ${equals(party-value, 'Liberal Democrat', '#fd9800')}
                                                                    ${equals(party-value, 'Green', '#329800')}
                                                                    ${equals(party-value, 'UKIP', '#653265')}
                                                                    ${equals(party-value, 'SNP', '#fdcb00')}
                                                                    ${equals(party-value, 'Plaid Cymru', '#006500')}
                                                                    ${equals(party-value, 'Independent', '#989898')}
                                                                    ${equals(party-value, 'Mix', '#999999')}">
                    ${percentage of vote-formatted-value}%
                </span> 

                <span>votes </span><span style="padding-right:15px;font-weight:bold">${votes-formatted-value}</span>

                <!-- Elected png image -->
                <span><img src='./elected.png' style='vertical-align:middle' /> <span>elected</span></span>

            </div>

        </div>
    </div>

    <!-- Other candidates - less detail -->
    <div style="font-size:12px;${lessThan(indicator-index, 3, 'display:none')}">

        <div style="display:inline-block;width:50px;font-weight:bold;color:${equals(party-value, 'Conservative', '#333399')}
                                                                    ${equals(party-value, 'Labour', '#cb0000')}
                                                                    ${equals(party-value, 'Liberal Democrat', '#fd9800')}
                                                                    ${equals(party-value, 'Green', '#329800')}
                                                                    ${equals(party-value, 'UKIP', '#653265')}
                                                                    ${equals(party-value, 'SNP', '#fdcb00')}
                                                                    ${equals(party-value, 'Plaid Cymru', '#006500')}
                                                                    ${equals(party-value, 'Independent', '#989898')}
                                                                    ${equals(party-value, 'Mix', '#999999')}">
            ${percentage of vote-formatted-value}%
        </div> 

        <div style="display:inline-block;width:150px;font-weight:bold;color:${equals(party-value, 'Conservative', '#333399')}
                    ${equals(party-value, 'Labour', '#cb0000')}
                    ${equals(party-value, 'Liberal Democrat', '#fd9800')}
                    ${equals(party-value, 'Green', '#329800')}
                    ${equals(party-value, 'UKIP', '#653265')}
                    ${equals(party-value, 'SNP', '#fdcb00')}
                    ${equals(party-value, 'Plaid Cymru', '#006500')}
                    ${equals(party-value, 'Independent', '#989898')}
                    ${equals(party-value, 'Mix', '#999999')}">${party-formatted-value}</div>

        <div style="display:inline-block;width:150px;">${indicator-formatted-value}</div>

        <span>votes </span><span style="font-weight:bold">${votes-formatted-value}</span>
    </div>

</div>

Display the name and value for all indicators in the current theme, with the selected date. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by indicator'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="padding:8px;font-size:11px;border-bottom:1px solid #eeeeee">
    ${feature-name} : ${indicator-formatted-value}
</div>

Add a bar that displays a rate. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by indicator'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="font-size:11px;border-bottom:1px solid #eeeeee">

    <!-- feature name -->
    <div style="display:inline-block;vertical-align:middle;padding:10px;font-weight:bold;width:100px">
        ${feature-name}
    </div>

    <!-- chart - hide if the indicator is categoric -->
    <div style="vertical-align:middle;padding:10px;width:220px;display:inline-block">
        <svg preserveAspectRatio="none" style="border:1px solid #6bc1d7" width="200" height="13" viewBox="0 0 100 10">
            <rect x="0" y="0" width="${indicator-value}" height="10" style="fill:#6bc1d7"/>
        </svg>
    </div>

    <!-- indicator value -->
    <div style="display:inline-block;vertical-align:middle;padding:10px">${indicator-formatted-value}</div>

</div>

Area Profile. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by indicator'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = false
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="font-size:11px;border-bottom:1px solid #eeeeee">

        <!-- feature name -->
        <div style="display:inline-block;vertical-align:middle;padding:10px;font-weight:bold;width:100px">
            ${feature-name}
        </div>

        <div style="display:inline-block;vertical-align:middle;padding:10px;width:280px">

            <!-- min value -->
            <span style="vertical-align:middle">-10</span>

            <!-- chart -->
            <svg style="display:inline-block;vertical-align:middle;border:1px solid #cccccc" preserveAspectRatio="none" width="200" height="13" viewBox="-10 0 20 10">

                <!-- background -->
                <rect x="-10" y="0" width="20" height="10" fill="#f7f7f7"/>

                <!-- bar -->
                <rect y="0" width="${abs(diff-value)}" height="10" x="${greaterThan(diff-value, 0, 0, diff-value)}" fill="${greaterThan(diff-value, 0, '#4ba163', '#e66c64')}"/>
            </svg>

            <!-- max value -->
            <span style="vertical-align:middle">+10</span>
        </div>

        <!-- data -->
        <div style="display:inline-block;vertical-align:middle;padding:10px">
            <div style="display:inline-block;width:65px">${indicator-formatted-value}%</div>
            <div style="display:inline-block;width:65px;font-weight:bold;color:${greaterThan(diff-value, 0, '#4ba163', '#e66c64')}">
                ${greaterThan(diff-value, 0, '▲', '▼')} ${diff-formatted-value}%
            </div> 
        </div>
</div>

List the features in a grid. (v671)

See It In Action Get Source Top ▲

configuration

'Data Order?' = 'Order data by indicator'
'Display Mode?' = 'Selected theme only'
'Display Selected Date Only?' = true
'Display Main Header?' = true
'Display Sub Header?' = true

snippet.htm

<div style="vertical-align:top;
            text-align:center;
            overflow:hidden;
            width:150px;
            display:inline-block;
            margin:10px;
            padding:10px;
            background:${odd(indicator-index, '#eaf4f7', '#f7ebf0')}">
    <div style="padding-top:5px;height:30px;">${feature-name}</div> 
    <div style="padding-top:5px;font-size:20px;font-weight:bold;color:${odd(indicator-index, '#537e8a', '#833c5a')}">${indicator-formatted-value}</div>
</div>