Tag: Display

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

Comparison Generator

This generator builds a comparison dashboard. Edit a few settings and compare 2 values, such as territories or categories, from one dataset.

display
navigation
filter
chart

ods-select

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

Listing Generator

Ideal for listing! Edit only a few settings to generate a modern looking visulization that uses ODS components and widgets.

display
navigation
list

Switch Module

A switch is a visual toggle between two mutually exclusive states — on and off.

display

Listing page

A template version of the listing generator, for the users who want to add more customization to the automated version.

display
list

Age Pyramid with custom HTML/CSS

Create an age pyramid to present the repartition of the population in your area, with custom HTML and CSS. 3 parameters must be declared in the code: agefield : the id of the age field in your dataset genderfield : the id of the gender field in your dataset valuefield : the id of the value field in your dataset Then, you can customize the colors of the bars in the CSS file, with the 2 variables:

display
chart
ods-adv-analysis
ods-aggregation
ods-subaggregation

Age Pyramid with Vega-Lite

Create an age pyramid to present the repartition of the population in your area, with Vega-Lite. Vega-Lite is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation. ods-vega-lite-chart widget, in combinaison with ods-adv-analysis to get the data, allows adding Vega-Lite charts into your pages. To learn more about Vega-Lite charts in ODS pages, read the Vega-Lite presentation.

display
chart
ods-adv-analysis

ods-chart: CSS Hacks

Various CSS tricks to override you ods-chart visualisations.

display
chart

ods-results

Examples to showcase ods-results widget: a simple widget to list records from a dataset, as a list or set of cards.

display
list

Heatmaps with CSS Grid

Custom heatmaps and bubblemaps made by hand with CSS Grid layout and HTML

display
ods-analysis
aggregation

Heatmaps with Vega-Lite

Vega-Lite heatmaps and bubblemaps in combination with ods-adv-analysis

display
ods-analysis
aggregation

Material themed cards

Cards with minimalistic customization of widget that you can theme with colors

display
navigation
list

KPI Generator

EXPERIMENTAL This generator builds a KPI wall. With specific parameters for each KPI card, it will compare values, compute a progression or analyse how your data evolved over time on a specific period. Like any other generator, it deals with all the complexity of manipulating dates, refining specific context, computing and comparing aggregation etc… As the code is complex, and the resource might be difficult to reuse, we consider it experimental and share it in an early stage.

display
aggregation

ODS Layout over-ride

This resource is an over-ride of ODS default layout system by transforming a row and it’s children into a Flexbox layout. Flexbox brings two major benefits compared to the actual layout : Equal height of children of a same row re-ordering elements If any of these two benefits are useful to your project, there is no interest in using this resource !

display

Dashboard

A dashboard template to display KPIs and charts.

display

Dashboard layouts

Different layouts for simple to advanced usages.

display

CSS Grid Framework

This resource introduces a CSS Grid framework based on CSS Grid layout system. It’s an alternative to ODS Layout system, suitable for expert users, looking for more advanced layout system, specially designed for 2 dimensions layouts instead of one. CSS Grid is the most modern and performant way to structure pages. A framework is a set of CSS classes to set into the HTML to easily develop nice looking pages.

display

Monitoring Dashboard

This dashboard presents the main figures from the monitoring dataset. See the full documentation about the monitoring dataset. See themed versions of this dashboard here. Note: Since monitoring data are private, we use a dummy dataset in this example.

display
navigation
list

ods-chart: Custom CSS Library

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