A dashboard template to display KPIs and charts, with filters
A page template to display data visualizations on your portal.
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
This generator builds a comparison dashboard. Edit a few settings and compare 2 values, such as territories or categories, from one dataset.
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.
Ideal for listing! Edit only a few settings to generate a modern looking visulization that uses ODS components and widgets.
A switch is a visual toggle between two mutually exclusive states — on and off.
A template version of the listing generator, for the users who want to add more customization to the automated version.
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:
Various CSS tricks to override you ods-chart visualisations.
Examples to showcase ods-results widget: a simple widget to list records from a dataset, as a list or set of cards.
Custom heatmaps and bubblemaps made by hand with CSS Grid layout and HTML
Cards with minimalistic customization of widget that you can theme with colors
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.
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 !
A dashboard template to display KPIs and charts.
Different layouts for simple to advanced usages.
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.
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.
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.