Providing guidance to your customers as to the grain of time they have applied to a given set of data when using a filter can be helpful guider text within your dashboards. Being able to do data transformation to present this information in a consistent and more easily readable way, while also maintaining the dynamic values, can be especially helpful!
Enter CSS magic
By adding the mustache syntax to access field variables within a data property in a html element, CSS can then be used to append a value to the same html element to create a dynamic value that can be included in your dashboard.
In the example code below, I added a data element to a tag and set the data element to the selected value from the filter ({{filters.table.field.summary}}). Within the CSS for the h3 element for each time grain value, I set a value to be appended “::after” to the h3 element.
This shows in the tile as a dynamic value for “Time Grain Selected:” and then the grain of time (minute, hour, day, week, month, year) is appended or the full string of the date filter is returned as a fallback.
h/t to @sarah on our Design team for being a markdown magician and helping build this out!
One caution: this won’t come through in deliveries and alerts given the CSS Magic to make it happen!
<style>
.kpi-markdown-wrapper,
.kpi-visualization {
}
h3[data-item*=" "]::after {
content: "{{filters.main__real_estate_sales.date_recorded.summary}}";
}
h3[data-item*="minute"]::after {
content: "minute";
}
h3[data-item*="hour"]::after {
content: "hour";
}
h3[data-item*="day"]::after {
content: "day";
}
h3[data-item*="week"]::after {
content: "week";
}
h3[data-item*="month"]::after {
content: "month";
}
h3[data-item*="year"]::after {
content: "year";
}
</style>
<div class="kpi-visualization kpi-vertical-top">
<div class="kpi-markdown-wrapper kpi-align-left">
<span>{{result.0.main__real_estate_sales.count.value}}</span>
<single-value label=" Time Range Selected: {{filters.main__real_estate_sales.date_recorded.summary}}"> </single-value>
<h3 data-item="{{filters.main__real_estate_sales.date_recorded.summary}}"> Time Grain Selected: </h3>
</div></div>