Lava Shortcode - KPI
Description
Display visual key performance indicators for quick insights.
Documentation
Basic Usage:
{[kpis]}
[[ kpi icon:'ti-highlight' value:'4' label:'Highlighters' color:'yellow-700']][[ endkpi ]]
[[ kpi icon:'ti-ballpen' value:'8' label:'Pens' color:'indigo-700']][[ endkpi ]]
[[ kpi icon:'ti-pencil' value:'15' label:'Pencils' color:'green-600']][[ endkpi ]]
{[endkpis]}
Shortcode Options
- title (blank) – An optional main title for the group of KPIs.
- subtitle (blank) – The smaller body sized text to show under the title. Only shown if provided.
- showtitleseparator (true) – The label for the KPI.
- columncount (4) – The number of columns to display at the large responsive size. Will decrement by one for each subsequent breakpoint (lg: 4, md: 3, sm: 2, xs: 1).
- columnmin (blank) – The minimum width for a column to display, used to force columns to wrap onto the next line when out of space.
- size (md) – The size of the KPI, default is medium. Options include
sm, lg, xl.
- style(card) - The display style of the KPI. Options include
card and edgeless.
- default – Default KPI with icon, and no border.
- card – KPI with card like appearance and border.
- iconbackground (true) - Set the value to true to display a background behind the FontAwesome icon.
- tooltipdelay (0) - Milliseconds to delay showing and hiding the KPI description tooltip (if one is provided).
KPI Options
- icon (blank) – The class of the Tabler icon, no icon will display if left blank.
- label (blank) – The label for the KPI.
- labellocation (bottom) – Options:
bottom, top Determines if the label should be display above the value or below.
- value (--) – The value of the KPI.
- description (blank) – An optional description, shown as tooltip on hover.
- color (blank) – The color of the icon from Tailwind. Using the name of the color and 100-900 or a CSS color (
#4ba9df).
- textalign (left) – Alignment of KPI label and value.
- height (auto) – Optionally set a minimum height for the row of icons. (Example values
250px, 50vh)
- url (blank) – An optional link for the entire KPI (Note: Using this parameter will make any other links in the KPI inaccessible).
Advanced Options
- subvalue (blank) – Secondary value of the KPI, useful for adding trend information i.e. "+6%".
- secondarylabel (blank) – Smaller lighter label to show under the main label.
- icontype (ti) – Optionally override the default Tabler icon class to allow using alternate style icons. If you specify an icon name that begins with 'fa-' then icontype will be assumed to be 'fa'.
Colors
grayredorangeyellowgreentealblueindigopurplepink
Markup
{%- if columncount != '' -%}
{%- assign columncountlg = columncount | AsInteger | AtLeast:1 -%}
{%- if columncountmd == '' -%}{%- assign columncountmd = columncountlg | Minus:1 | AtLeast:1 -%}{%- endif -%}
{%- if columncountsm == '' -%}{%- assign columncountsm = columncountmd | Minus:1 | AtLeast:1 -%}{%- endif -%}
{%- endif -%}
{%- assign showtitleseparator = showtitleseparator | AsBoolean -%}
{%- if title != '' -%}<h3 id="{{ title | ToCssClass }}" class="kpi-title">{{ title }}</h3>{%- endif -%}
{%- if subtitle != '' -%}<p class="kpi-subtitle">{{ subtitle }}</p>{%- endif -%}
{% if title != '' or subtitle != '' %}
{%- if showtitleseparator -%}<hr class="mt-3 mb-4">{%- endif -%}
{% endif %}
{%- assign iconbackground = iconbackground | AsBoolean -%}
{%- assign iconTypeDefault = icontype | Trim -%}
{%- assign kpisize = '' -%}
{%- if size == 'sm' -%}
{%- assign kpisize = 'kpi-sm' -%}
{%- elseif size == 'lg' -%}
{%- assign kpisize = 'kpi-lg' -%}
{%- elseif size == 'xl' -%}
{%- assign kpisize = 'kpi-xl' -%}
{%- endif -%}
<div class="kpi-container" {% if columncount != '' %}style="--kpi-col-lg:{{ 100 | DividedBy:columncountlg,4 }}%;--kpi-col-md:{{ 100 | DividedBy:columncountmd,4 }}%;--kpi-col-sm:{{ 100 | DividedBy:columncountsm,4 }}%;{% if columnmin != '' %}--kpi-min-width:{{ columnmin }};{% endif %} {{ cssstyle }}"{% endif %}>
{% for item in kpis %}
{%- assign itemIcon = item.icon | Trim -%}
{%- assign itemIconType = item.icontype | Trim -%}
{%- if itemIconType == '' -%}{%- assign itemIconType = icontype -%}{%- endif -%}
{%- assign itemIconWidth = "ti-fw" -%}
{%- assign itemIconPrefix = itemIcon | Slice:0,3 -%}
{%- if itemIconType == "ti" -%}
{%- if itemIconPrefix == "fa " or itemIconPrefix == "fa-" -%}
{%- assign itemIconType = "fa" -%}
{%- assign itemIconWidth = "fa-fw" -%}
{%- endif -%}
{%- endif -%}
{%- assign color = item.color | Trim -%}
{%- assign colorSplit = color | Split:'-' -%}
{%- assign height = item.height | Trim -%}
{%- assign colorSplitLength = colorSplit | Size -%}
{%- assign itemValue = item.value | Trim | Default:'--' -%}
{%- assign itemSubValue = item.subvalue | Trim -%}
{%- if itemSubValue != '' -%}
{%- assign itemSubValueColor = item.subvaluecolor | Trim -%}
{%- assign subvalueColorSplit = itemSubValueColor | Split:'-' -%}
{%- assign subvalueSplitLength = subvalueColorSplit | Size -%}
{%- endif -%}
{%- assign itemLabel = item.label -%}
{%- assign itemDescription = item.description | Trim | Escape -%}
{%- assign itemSecondaryLabel = item.secondarylabel | Trim -%}
{%- if itemSecondaryLabel != '' -%}
{%- assign itemSecondaryLabelColor = item.secondarylabelcolor | Default:'' | Trim -%}
{%- assign secondaryColorSplit = itemSecondaryLabelColor | Split:'-' -%}
{%- assign secondarySplitLength = secondaryColorSplit | Size -%}
{%- endif -%}
{%- assign itemLabelBottom = true | AsBoolean -%}
{%- assign itemLabelTop = false | AsBoolean -%}
{%- assign itemTextRight = false | AsBoolean -%}
{%- if item.textalign == 'right' -%}
{%- assign itemTextRight = true | AsBoolean -%}
{%- endif -%}
{%- if item.labellocation == 'top' -%}
{%- assign itemLabelBottom = false | AsBoolean -%}
{%- assign itemLabelTop = true | AsBoolean -%}
{%- endif -%}
{%- assign itemUrl = item.url | Trim -%}
{%- capture kpiStat -%}
{% if itemLabel != '' %}<span class="kpi-label">{{ itemLabel }}</span>{% endif %}
{% if itemSecondaryLabel != '' %}
<span class="kpi-secondary-label">
{% if itemSecondaryLabelColor != '' %}
<span class="my-1 badge text-white{% if secondarySplitLength == 2 %} bg-{{ itemSecondaryLabelColor }}{% endif %}">{{ itemSecondaryLabel }}</span>
{% else %}
{{ itemSecondaryLabel }}
{% endif %}
</span>
{% endif %}
{%- endcapture -%}
<div class="kpi {{ kpisize }} {% if style == 'card' %}kpi-card{% endif %} {% if iconbackground %}has-icon-bg{% endif %} {% if colorSplitLength == 2 %}text-{{ color }} border-{{ colorSplit | First }}-{{ colorSplit | Last | Minus:200 | AtLeast:100 }}{% endif %}{{ class }}" {% if colorSplitLength != 2 and color != '' or height != '' %}style="{% if height != '' %}min-height: {{ height }};{% endif %}{% if color != '' and colorSplitLength != 2 %}color:{{ color }};border-color:{{ color | FadeOut:'50%' }}{% endif %}"{% endif %} {% if itemDescription != '' %}data-toggle="tooltip" title="{{ itemDescription }}" {% if tooltipdelay != '' %}data-delay='{{ tooltipdelay }}'{% endif %}{% endif %}>
{% if itemUrl != '' %}<a href="{{ itemUrl }}" class="stretched-link"></a>{% endif %}
{%- if itemIcon != '' -%}
<div class="kpi-icon">
<img class="svg-placeholder" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'></svg>">
<div class="kpi-content"><i class="{{ itemIconType }} {{ itemIconWidth }} {{ itemIcon }}"></i></div>
</div>
{%- endif -%}
<div class="kpi-stat {% if itemTextRight %}text-right{% endif %}">
{% if itemLabelTop %}{{ kpiStat }}{% endif %}
<span class="kpi-value text-color">{{ itemValue }}{% if itemSubValue != '' %}<span class="kpi-subvalue {% if subvalueSplitLength == 2 %}text-{{ colitemSubValueColoror }}{% endif %}">{{ itemSubValue }}</span>{% endif %}</span>
{% if itemLabelBottom %}{{ kpiStat }}{% endif %}
</div>
</div>
{% endfor %}
</div>