Widget tricks

Custom made widgets to display certain data and other cool tips to make your portal pop.

ods-chart CSS Hacks

A custom CSS library dedicated to ods-chart, it helps users to customize their charts easily by simply adding CSS classes to ods-chart tag.

display
chart

Animations

Animate your data-visualisation (KPIs, Gauge).

display
chart
aggregation

Static maps, a quick introduction

How to create fast analytics maps based on SVG static files and data aggregation.

geo
aggregation
display

Chart samples

An overview of ods-chart capabilities by type of chart

chart
aggregation

Custom catalog card

Override default catalog cards to highlight key metadata for your business

list
display
navigation

Custom Tooltips

These are resources to create custom tooltips for your maps. You can use them directly in the map editor (in which case you will omit the context) or in your pages.

map

Dates

Date tricks with ods-timerange and angular filters. Different ways to handle dates with ods date picker

date
filter

Drill-down refine in charts

Use chart to refine your page, and go deeper in your analysis step by step

navigation
chart
filter

Filters as an HTML Select

Display your facets and filters in a list with simple HTML selects

display
navigation
list
filter

ods-aggregation

Various examples to showcase ods-aggregation. This widget exposes the results of an aggregation (sum, average, minimum, maximum etc...) function.

aggregation
ods-aggregation

ods-analysis, quick intro

Various examples to showcase ods-analysis. This widget exposes the results of an analysis, ie. multiple aggregations over an X axis.

ods-analysis
aggregation
chart
display

ods-color-gradient + ods-map : a choropleth alternative

This widget computes a gradient of colors based on a numerical aggregation. It's mainly used to color the shapes of a map for analytics purposes.

display
aggregation
geo

ods-date-range-slider 3

From and to selectors to easily catch a range of date for your dashboards.

list
filter

ods-map: Refine & Zoom

Showcase how the map can be used as a selector through the refine-on-click option. It also provides an example to show/hide map layers depending on the zoom

ods-maps
map
geo
filter
display

ods-map: CSS Hacks

ods-map with legends from the map builder with additional CSS to provide some alternative to default display

display
ods-maps
geo

ods-pop-in variants

Display content in a pop-in window.

display

ods-select 2

ods-select allows the selection of one or more items from a list of options. This resource present different combinations with ods-facet-results or ods-analysis to feed the selection list.

display
navigation
list

ods-simple-tabs

Style and layout suggestions for the ods-simple-tabs widget.

display
navigation

Share and print

It highlights "urlsync" parameter. It allows users to copy and share the URL with all applied filters and query.

display