Super Awesome Advanced Conditional Formatting Example - From JOIN session

[emma_ware]

In our JOIN session on Customizing Looker with Liquid, we shared an example of an advanced use case for conditional formatting.

In this example, a SINGLE measure can display multiple different measure values, all combined and arranged using Liquid and HTML. Liquid could be used to make dynamic favicons, customized background gradients, etc.

The code used can be found below, happy Lookering!

measure: custom_single_viz {
type: count
html: <div class="vis">
      <div class="vis-single-value" style="font-size:30px; background-image: linear-gradient(to right, #5A2FC2, #F84066); color:#ffffff">
      <font color="#5A2FC2"><center><b>Day of campaign:</b>&nbsp; {{events.day_of_campaign._rendered_value}} / 90 </font>
      <p><em>{{events.campaign_progress._rendered_value}}% of Goal</em></p>
      <p style="color:#ffffff;">{{ rendered_value }} Total Events </p>
      <p style="float:left; font-family: Trebuchet MS;">
      <i class="fa fa-facebook">&nbsp;</i> {{ events.count_events_facebook._rendered_value }} Events&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <i class="fa fa-search">&nbsp;</i> {{ events.count_events_search._rendered_value }} Events&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <i class="fa fa-leaf">&nbsp;</i> {{ events.count_events_organic._rendered_value }} Events</p></center>
      </div>
      </div>
   ;;

}
}

[Dawid]

Can we get css parameter? Pretty please 😃

[CathyM]

@emma_ware , I’m trying my hand at a widget like this, and it looks great on a legacy dashboard. However, I’m having issues with the vertical spacing of the text on the dashboards-next dashboard. I tried switching from <p> to <div>, but it’s still spaced out vertically. Is there any way to make the spacing consistent on both dashboards? I tried style="padding: 0; margin: 0;" in the divs, but it didn’t change anything.

Legacy dashboard:

Next dashboard: 

html tag:

    html: {% assign goal = current_period_percent_cases_below_threshold._value | times: 100 | minus: target_percent._parameter_value %}
          {% assign diff = current_period_percent_cases_below_threshold._value | minus: previous_period_percent_cases_below_threshold._value %}
          <div class="vis">
            <div class="vis-single-value" style="font-size: 16px;
              {% if goal < 0 %} background-color: #FEE;{% endif %}">
            <center>
            <div style="font-size: 45px;">
              {% if goal < 0 %}<font color="#C00">{% endif %}
              <b>{{current_period_percent_cases_below_threshold._linked_value}}</b>
              {% if goal < 0 %}</font>{% endif %}</div>
            <div><b>{{ goal | round }}%</b> away from target of <span style="font-size: 20px;"><b>{% parameter target_percent %}%</b></span></div>
            <div>{{current_period_numerator._rendered_value}} / {{current_period_denominator._rendered_value}} Completed Cases</div>
            <div><br />
              {% if diff > 0 %} <font color="#090">▲</font> {% else %} <font color="#C00">▼</font> {% endif %}
              <b>{{ diff | times: 100 | floor }}%</b>
              from yesterday ({{previous_period_percent_cases_below_threshold._linked_value}})</div>
              </center>
            </div>
            </div>
            ;;

Thanks for your help!

[tonya_mina]

@emma_ware In this SINGLE measure combining other different measures - is it possible to handle proper drilling for each of the parts?

[nate_wiles-1645]

Does anyone know what session this came from?  I’m new to Looker and implementing tiles similar to these examples would be hugely beneficial with our use case.