Components - Material themed cards

These cards are meant to be themed using only the following variables:

  --primary-hue: 265;
  --primary-saturation: 90%;
  --primary-lightness: 47%;

  --surface: white;
  --background: white;
  --card-text: #424242;
  --body-text: #424242;

It works with HSL colors, by inputting the --primary-hue, --primary-saturation and --primary-lightness separately.

These cards can be used anywhere and will fit 100% of their parent container. We recommend using them with a grid system, like the one used here.

All cards are prented with a sticky filter bar, to present how they can interact. The sticky bar is compatible with the color theming, but is not required.

Those cards follow the material design guidelines. If you need to build your page around those cards, visit https://www.material.io.

Line chart

Dataset in use: monitoring-copy (See it on userclub domain)

Fields in use:

timestamp	size_res
2021-11-06T21:39:37+00:00	4662
2021-12-07T15:13:02+00:00	4655
2021-12-07T09:35:13+00:00	2796
2021-12-06T17:23:24+00:00	0

<ods-dataset-context context="stats"
                     stats-dataset="ods-api-monitoring"
                     stats-source="monitoring"
                     stats-parameters="{'disjunctive.dataset_id':true}">
    <div class="container"
         ods-datetime="now">
        <section class="row">
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Simple line
                        </h2>
                        <p class="subtitle">
                            Since there is no x-axis, don't forget to put date range in this description!
                            From: {{ (now | momentadd: "month": -2) | date: "longDate" }} to {{ now | date: "longDate" }}.</p>
                    </div>
                    <ods-chart class="mini-card hide-x hide-y y-values" timescale="day" single-y-axis="true"
                               align-month="true">
                        <ods-chart-query context="stats" field-x="timestamp" maxpoints="0" timescale="day">
                            <ods-chart-serie expression-y="size_res" chart-type="areaspline" function-y="COUNT"
                                             scientific-display="false" display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            With Y-axis
                        </h2>
                        <p class="subtitle">Count of daily API calls.
                            From: {{ (now | momentadd: "month": -2) | date: "longDate" }} to {{ now | date: "longDate"
                            }}.</p>
                    </div>
                    <ods-chart class="mini-card hide-x" timescale="day" single-y-axis="true" align-month="true">
                        <ods-chart-query context="stats" field-x="timestamp" maxpoints="0" timescale="day">
                            <ods-chart-serie expression-y="size_res" chart-type="areaspline" function-y="COUNT"
                                             scientific-display="false">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
        </section>
    </div>
</ods-dataset-context>

:root {
  /* Works with HSL colors, https://www.w3schools.com/colors/colors_hsl.asp */
  /* If your color is hsl(265, 90, 47),
     input 265 as hue
     input 90% as saturation
     input 47% as lightness
  */
  --primary-hue: 265;
  --primary-saturation: 90%;
  --primary-lightness: 47%;

  --surface: white;
  --background: white;
  --card-text: #424242;
  --body-text: #424242;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 70%, 10%);
}

body {
  background-color: var(--background);
  color: var(--body-text);
}

h1 {
  color: var(--body-text);
}

/* ODS Over-ride */
.row > *:first-child {
  margin-left: 0;
}

.row > *:last-child {
  margin-right: 0;
}

.row {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .row {
    flex-direction: column;
  }

  .row > *:not(:last-child) {
    margin-bottom: 16px;
  }
}

.odswidget-select-button-label,
.odswidget-select-button,
.odswidget-select-input {
  color: var(--card-text);
}

.odswidget-select-dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidget-select-dropdown-menu-item:hover {
  background-color: var(--overlay-10);
}

.odswidget-select-dropdown-item-close-icon {
  color: var(--primary);
}

.odswidget-select-input-container {
  border: none;
}

.odswidget-timerange__reset {
  color: var(--primary);
}

.odswidget-timerange__reset:hover {
  color: var(--primary-80);
}

.odswidgets-rd-container.rd-container
 {
  background: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidgets-rd-container .rd-time-list {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-next,
.odswidgets-rd-container .rd-back {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-day-body:hover,
.odswidgets-rd-container .rd-day-selected,
.odswidgets-rd-container .rd-time-selected,
.odswidgets-rd-container .rd-time-selected:hover,
.odswidgets-rd-container .rd-time-option:hover,
{
  background-color: var(--primary);
}

.odswidget-charts {
  margin: 0 -12px;
}

.highcharts-halo {
  fill: var(--primary) !important;
}

.highcharts-root > * {
  width: 100%;
}

.highcharts-text-outline {
  display: none;
}

.highcharts-data-label text tspan {
  fill: var(--card-text);
}

.hide-y .highcharts-yaxis-grid path.highcharts-grid-line,
.hide-y .highcharts-yaxis-labels text,
.hide-y .highcharts-yaxis-labels span {
  display: none !important;
}

.hide-x .highcharts-xaxis-labels text,
.hide-x .highcharts-xaxis-labels span,
.hide-x .highcharts-xaxis tspan,
.hide-x .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x .highcharts-tick {
  display: none !important;
}

.hide-x-grid .highcharts-xaxis tspan,
.hide-x-grid .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x-grid .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x-grid .highcharts-tick {
  display: none !important;
}

.y-values .highcharts-data-label:not(:first-child):not(:last-child) {
  display: none;
}

.y-values .highcharts-data-label:first-child,
.y-values .highcharts-data-label:last-child {
  opacity: 1;
  visibility: inherit; /* force the last child to be visible, as it can be hidden by highchart */
}

.mini-card .highcharts-point.highcharts-color-0 {
  fill: var(--primary) !important;
}
.mini-card .highcharts-point.highcharts-color-1 {
  fill: var(--primary-50) !important;
}
.mini-card .highcharts-point.highcharts-color-2 {
  fill: var(--primary-40) !important;
}
.mini-card .highcharts-point.highcharts-color-3 {
  fill: var(--primary-60) !important;
}
.mini-card .highcharts-point.highcharts-color-4 {
  fill: var(--primary-30) !important;
}
.mini-card .highcharts-point.highcharts-color-5 {
  fill: var(--primary-70) !important;
}
.mini-card .highcharts-point.highcharts-color-6 {
  fill: var(--primary-20) !important;
}
.mini-card .highcharts-point.highcharts-color-7  {
  fill: var(--primary-80) !important;
}
.mini-card .highcharts-point.highcharts-color-8 {
  fill: var(--primary-10) !important;
}
.mini-card .highcharts-point.highcharts-color-9 {
  fill: var(--primary-90) !important;
}
.mini-card .highcharts-color-0.highcharts-data-label-connector {
  stroke: var(--primary) !important;
}
.mini-card .highcharts-color-1.highcharts-data-label-connector {
  stroke: var(--primary-50) !important;
}
.mini-card .highcharts-color-2.highcharts-data-label-connector {
  stroke: var(--primary-40) !important;
}
.mini-card .highcharts-color-3.highcharts-data-label-connector {
  stroke: var(--primary-60) !important;
}
.mini-card .highcharts-color-4.highcharts-data-label-connector {
  stroke: var(--primary-30) !important;
}
.mini-card .highcharts-color-5.highcharts-data-label-connector {
  stroke: var(--primary-70) !important;
}
.mini-card .highcharts-color-6.highcharts-data-label-connector {
  stroke: var(--primary-20) !important;
}
.mini-card .highcharts-color-7.highcharts-data-label-connector  {
  stroke: var(--primary-80) !important;
}
.mini-card .highcharts-color-8.highcharts-data-label-connector {
  stroke: var(--primary-10) !important;
}
.mini-card .highcharts-color-9.highcharts-data-label-connector {
  stroke: var(--primary-90) !important;
}

.mini-card rect.highcharts-background {
  fill: transparent !important;
}

.mini-card text {
  fill: var(--card-text) !important;
  font-size: 13px !important;
}

.mini-card .highcharts-grid-line {
  stroke: var(--primary) !important;
  stroke-dasharray: 2 2;
}

.mini-card .highcharts-graph {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-area {
  fill: transparent !important;
}

.mini-card .highcharts-legend {
  display: none;
}

.mini-card .highcharts-markers path {
  fill: var(--primary) !important;
}

.mini-card .highcharts-label-box:not(.highcharts-shadow) {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-tooltip-container {
  background: var(--background);
  color: var(--body-text);
}

.mini-card .highcharts-label span {
  color: var(--card-text) !important;
}

.mini-card .ods-highcharts__tooltip span {
  color: var(--primary) !important;
}

.mini-card .highcharts-point {
  fill: var(--primary) !important;
  stroke: transparent !important;
  rx: 8px;
}

.mini-card .highcharts-grid-line:not(:first-child):not(:last-child),
.mini-card .highcharts-yaxis-labels text:not(:first-child):not(:last-child) {
  display: none;
}

.mini-card .highcharts-xaxis-labels span {
  color: var(--card-text) !important;
  font-size: 13px !important;;
}

/* Utilities */
.z-depth-1 {
  z-index: 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  z-index: 2;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.row-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Elements */
section {
  padding: 0 16px;
  margin: 16px 0;
}

.title {
  margin-bottom: 1em;
}

.subtitle {
  margin-top: -0.75em;
}

h1.title {
  font-size: 2.25rem;
}

h2.title {
  font-size: 1.5rem;
}

h5.subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/* Components */
.card {
  background: var(--surface);
  color: var(--card-text);
  border-radius: 4px;
  padding: 16px;
  height: 100%;
}

.card-head {
  padding-bottom: 2rem;
}

.card .title,
.card .subtitle {
  color: var(--card-text);
}

Bar and pie chart

Dataset in use: monitoring-copy (See it on userclub domain)

Fields in use:

attributes	user_id
page-home	anonymous
page-home	anonymous
page-home	anonymous
page-portail	anonymous

<ods-dataset-context context="stats"
                     stats-dataset="ods-api-monitoring"
                     stats-source="monitoring"
                     stats-parameters="{'disjunctive.dataset_id':true}">
    <div class="container">
        <section class="row">
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Most active pages
                        </h2>
                        <p class="subtitle">Ranked by number of API calls</p>
                    </div>
                    <ods-chart class="mini-card hide-x-grid hide-y" single-y-axis="true" align-month="true"
                               labels-x-length="15">
                        <ods-chart-query context="stats" field-x="attributes" maxpoints="7" sort="serie1-1">
                            <ods-chart-serie chart-type="bar" function-y="COUNT" label-y="Sum of API calls"
                                             scientific-display="true" display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Users ranked by API calls
                        </h2>
                        <p class="subtitle">Most active users by sum of all API calls, regardless of the nature of the
                            call.</p>
                    </div>
                    <ods-chart class="mini-card">
                        <ods-chart-query context="stats" field-x="user_id" maxpoints="10" sort="serie1-1"
                                         display-legend="true">
                            <ods-chart-serie chart-type="pie" innersize="60%" labelsposition="outside"
                                             function-y="COUNT" scientific-display="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
        </section>
    </div>
</ods-dataset-context>

:root {
  /* primary color : hsl(14, 98%, 56%) */
  --primary-hue: 14;
  --primary-saturation: 98%;
  --primary-lightness: 56%;

  --surface: hsl(50, 100%, 95%);
  --background: white;
  --card-text: hsl(162, 32%, 31%);
  --body-text: black;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 70%, 10%);
}

body {
  background-color: var(--background);
  color: var(--body-text);
}

h1 {
  color: var(--body-text);
}

/* ODS Over-ride */
.row > *:first-child {
  margin-left: 0;
}

.row > *:last-child {
  margin-right: 0;
}

.row {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .row {
    flex-direction: column;
  }

  .row > *:not(:last-child) {
    margin-bottom: 16px;
  }
}

.odswidget-select-button-label,
.odswidget-select-button,
.odswidget-select-input {
  color: var(--card-text);
}

.odswidget-select-dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidget-select-dropdown-menu-item:hover {
  background-color: var(--overlay-10);
}

.odswidget-select-dropdown-item-close-icon {
  color: var(--primary);
}

.odswidget-select-input-container {
  border: none;
}

.odswidget-timerange__reset {
  color: var(--primary);
}

.odswidget-timerange__reset:hover {
  color: var(--primary-80);
}

.odswidgets-rd-container.rd-container
 {
  background: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidgets-rd-container .rd-time-list {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-next,
.odswidgets-rd-container .rd-back {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-day-body:hover,
.odswidgets-rd-container .rd-day-selected,
.odswidgets-rd-container .rd-time-selected,
.odswidgets-rd-container .rd-time-selected:hover,
.odswidgets-rd-container .rd-time-option:hover,
{
  background-color: var(--primary);
}

.odswidget-charts {
  margin: 0 -12px;
}

.highcharts-halo {
  fill: var(--primary) !important;
}

.highcharts-root > * {
  width: 100%;
}

.highcharts-text-outline {
  display: none;
}

.highcharts-data-label text tspan {
  fill: var(--card-text);
}

.hide-y .highcharts-yaxis-grid path.highcharts-grid-line,
.hide-y .highcharts-yaxis-labels text,
.hide-y .highcharts-yaxis-labels span {
  display: none !important;
}

.hide-x .highcharts-xaxis-labels text,
.hide-x .highcharts-xaxis-labels span,
.hide-x .highcharts-xaxis tspan,
.hide-x .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x .highcharts-tick {
  display: none !important;
}

.hide-x-grid .highcharts-xaxis tspan,
.hide-x-grid .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x-grid .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x-grid .highcharts-tick {
  display: none !important;
}

.y-values .highcharts-data-label:not(:first-child):not(:last-child) {
  display: none;
}

.mini-card .highcharts-point.highcharts-color-0 {
  fill: var(--primary) !important;
}
.mini-card .highcharts-point.highcharts-color-1 {
  fill: var(--primary-50) !important;
}
.mini-card .highcharts-point.highcharts-color-2 {
  fill: var(--primary-40) !important;
}
.mini-card .highcharts-point.highcharts-color-3 {
  fill: var(--primary-60) !important;
}
.mini-card .highcharts-point.highcharts-color-4 {
  fill: var(--primary-30) !important;
}
.mini-card .highcharts-point.highcharts-color-5 {
  fill: var(--primary-70) !important;
}
.mini-card .highcharts-point.highcharts-color-6 {
  fill: var(--primary-20) !important;
}
.mini-card .highcharts-point.highcharts-color-7  {
  fill: var(--primary-80) !important;
}
.mini-card .highcharts-point.highcharts-color-8 {
  fill: var(--primary-10) !important;
}
.mini-card .highcharts-point.highcharts-color-9 {
  fill: var(--primary-90) !important;
}
.mini-card .highcharts-color-0.highcharts-data-label-connector {
  stroke: var(--primary) !important;
}
.mini-card .highcharts-color-1.highcharts-data-label-connector {
  stroke: var(--primary-50) !important;
}
.mini-card .highcharts-color-2.highcharts-data-label-connector {
  stroke: var(--primary-40) !important;
}
.mini-card .highcharts-color-3.highcharts-data-label-connector {
  stroke: var(--primary-60) !important;
}
.mini-card .highcharts-color-4.highcharts-data-label-connector {
  stroke: var(--primary-30) !important;
}
.mini-card .highcharts-color-5.highcharts-data-label-connector {
  stroke: var(--primary-70) !important;
}
.mini-card .highcharts-color-6.highcharts-data-label-connector {
  stroke: var(--primary-20) !important;
}
.mini-card .highcharts-color-7.highcharts-data-label-connector  {
  stroke: var(--primary-80) !important;
}
.mini-card .highcharts-color-8.highcharts-data-label-connector {
  stroke: var(--primary-10) !important;
}
.mini-card .highcharts-color-9.highcharts-data-label-connector {
  stroke: var(--primary-90) !important;
}

.mini-card rect.highcharts-background {
  fill: transparent !important;
}

.mini-card text {
  fill: var(--card-text) !important;
  font-size: 13px !important;
}

.mini-card .highcharts-grid-line {
  stroke: var(--primary) !important;
  stroke-dasharray: 2 2;
}

.mini-card .highcharts-graph {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-area {
  fill: transparent !important;
}

.mini-card .highcharts-legend {
  display: none;
}

.mini-card .highcharts-markers path {
  fill: var(--primary) !important;
}

.mini-card .highcharts-label-box:not(.highcharts-shadow) {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-tooltip-container {
  background: var(--background);
  color: var(--body-text);
}

.mini-card .highcharts-label span {
  color: var(--card-text) !important;
}

.mini-card .ods-highcharts__tooltip span {
  color: var(--primary) !important;
}

.mini-card .highcharts-point {
  fill: var(--primary) !important;
  stroke: transparent !important;
  rx: 8px;
}

.mini-card .highcharts-grid-line:not(:first-child):not(:last-child),
.mini-card .highcharts-yaxis-labels text:not(:first-child):not(:last-child) {
  display: none;
}

.mini-card .highcharts-xaxis-labels span {
  color: var(--card-text) !important;
  font-size: 13px !important;;
}

/* Utilities */
.z-depth-1 {
  z-index: 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  z-index: 2;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.row-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Elements */
section {
  padding: 0 16px;
  margin: 16px 0;
}

.title {
  margin-bottom: 1em;
}

.subtitle {
  margin-top: -0.75em;
}

h1.title {
  font-size: 2.25rem;
}

h2.title {
  font-size: 1.5rem;
}

h5.subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/* Components */
.card {
  background: var(--surface);
  color: var(--card-text);
  border-radius: 4px;
  padding: 16px;
  height: 100%;
}

.card-head {
  padding-bottom: 2rem;
}

.card .title,
.card .subtitle {
  color: var(--card-text);
}

Data table

Dataset in use: monitoring-copy (See it on userclub domain)

Fields in use:

query_text
“map”
“userclub”
“code library”
“codelibrary”

<ods-dataset-context context="queries"
                     queries-dataset="ods-api-monitoring"
                     queries-source="monitoring"
                     queries-parameters="{'q':'NOT #null(query_text)'}">
    <div class="card z-depth-1">
        <div class="card-head">
            <h2 class="title">
                Most frequent queries
            </h2>
            <p class="subtitle">
                It is also possible to match a background color to the highligths ones, while keeping cards white.
            </p>
        </div>
        <table class="data-table">
            <thead>
            <tr>
                <th> Rank</th>
                <th>Request</th>
                <th>Occurrences</th>
            </tr>
            </thead>
            <tbody>
            <tr ods-facet-results="frequentqueries"
                ods-facet-results-context="queries"
                ods-facet-results-facet-name="query_text"
                ng-repeat="(i,query) in frequentqueries.slice(0,10)"
                ng-show="query.count>5">
                <td style="text-align:center;">{{ i+1 }}</td>
                <td style="width: 100%">{{ query.name }}</td>
                <td>{{ query.count }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</ods-dataset-context>

:root {
  --primary-hue: 316;
  --primary-saturation: 71%;
  --primary-lightness: 21%;

  --surface: white;
  --background: var(--primary);
  --card-text: black;
  --body-text: white;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 90%, 50%);
}

body {
  background-color: var(--background);
  color: var(--body-text);
}

h1 {
  color: var(--body-text);
}

/* ODS Over-ride */
.row > *:first-child {
  margin-left: 0;
}

.row > *:last-child {
  margin-right: 0;
}

.row {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .row {
    flex-direction: column;
  }

  .row > *:not(:last-child) {
    margin-bottom: 16px;
  }
}

/* Utilities */
.z-depth-1 {
  z-index: 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  z-index: 2;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.row-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Elements */
section {
  padding: 0 16px;
  margin: 16px 0;
}

.title {
  margin-bottom: 1em;
}

.subtitle {
  margin-top: -0.75em;
}

h1.title {
  font-size: 2.25rem;
}

h2.title {
  font-size: 1.5rem;
}

h5.subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/* Components */
.card {
  background: var(--surface);
  color: var(--card-text);
  border-radius: 4px;
  padding: 16px;
  height: 100%;
}

.card-head {
  padding-bottom: 2rem;
}

.card .title,
.card .subtitle {
  color: var(--card-text);
}

.data-table {
  margin: 0 -16px;
  color: var(--card-text);
}

.data-table thead {
  background: var(--overlay-10);
  border-bottom: 1px solid var(--card-text);
}

.data-table tr {
  line-height: 32px;
  position: relative;
}

.data-table tr:hover {
  background: var(--overlay-10);
}

.data-table td,
.data-table th {
  padding: 8px;
  max-width: 265px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table tbody tr:nth-child(-n + 3) * {
  font-weight: 500;
}

Sticky filter

A material themed version of a sticky filter component. Fit for dashboards with cards.

Dataset in use: monitoring-copy (See it on userclub domain)

Fields in use:

dataset_id	timestamp
dataproviders-dataods	2021-11-06T21:39:37+00:00
dataproviders-dataods	2021-12-07T15:13:02+00:00
dataproviders-dataods	2021-12-07T09:35:13+00:00
base-nationale-des-lieux-de-covoiturage-en-france	2021-12-06T17:23:24+00:00

<ods-dataset-context context="stats"
                     stats-dataset="ods-api-monitoring"
                     stats-source="monitoring"
                     stats-parameters="{'disjunctive.dataset_id':true}">
    <nav class="row row-sticky">
        <div class="menu z-depth-2"
             ods-datetime="now">
            <div class="filter">
                <div ods-facet-results="items"
                     ods-facet-results-context="stats"
                     ods-facet-results-facet-name="dataset_id"
                     ods-facet-results-sort="alphanum">
                    <ods-select placeholder="Dataset"
                                selected-values="stats.parameters['refine.dataset_id']"
                                multiple="false"
                                options="items"
                                label-modifier="name"
                                value-modifier="name">
                    </ods-select>
                </div>
            </div>
            <div class="filter">
                <ods-timerange context="stats"
                               date-format="DD MMM YYYY"
                               precision="day"
                               default-from="{{ (now|momentadd:'months':-1)|moment:'YYYY-MM-DD' }}"
                               default-to="{{ now|moment:'YYYY-MM-DD' }}"
                               stats-time-field="timestamp"
                               from="startDate"
                               to="endDate">
                </ods-timerange>
            </div>
        </div>
    </nav>

</ods-dataset-context>

:root {
  --primary-hue: 36;
  --primary-saturation: 94%;
  --primary-lightness: 59%;

  --surface: hsl(200, 21%, 37%);
  --background: hsl(198, 20%, 17%);
  --card-text: white;
  --body-text: white;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 90%, 10%);
}

body {
  background-color: var(--background);
  color: var(--body-text);
}

h1 {
  color: var(--body-text);
}

/* ODS Over-ride */
.row > *:first-child {
  margin-left: 0;
}

.row > *:last-child {
  margin-right: 0;
}

.row {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .row {
    flex-direction: column;
  }

  .row > *:not(:last-child) {
    margin-bottom: 16px;
  }
}

.odswidget-select-button-label,
.odswidget-select-button,
.odswidget-select-input {
  color: var(--card-text);
}

.odswidget-select-dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidget-select-dropdown-menu-item:hover {
  background-color: var(--overlay-10);
}

.odswidget-select-dropdown-item-close-icon {
  color: var(--primary);
}

.odswidget-select-input-container {
  border: none;
}

.odswidget-timerange__reset {
  color: var(--primary);
}

.odswidget-timerange__reset:hover {
  color: var(--primary-80);
}

.odswidgets-rd-container.rd-container
 {
  background: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidgets-rd-container .rd-time-list {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-next,
.odswidgets-rd-container .rd-back {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-day-body:hover,
.odswidgets-rd-container .rd-day-selected,
.odswidgets-rd-container .rd-time-option:hover,
.odswidgets-rd-container .rd-time-selected {
  background-color: var(--primary);
}

.odswidget-charts {
  margin: 0 -12px;
}

.highcharts-halo {
  fill: var(--primary) !important;
}

.highcharts-root > * {
  width: 100%;
}

.highcharts-text-outline {
  display: none;
}

.highcharts-data-label text tspan {
  fill: var(--card-text);
}

.hide-y .highcharts-yaxis-grid path.highcharts-grid-line,
.hide-y .highcharts-yaxis-labels text,
.hide-y .highcharts-yaxis-labels span {
  display: none !important;
}

.hide-x .highcharts-xaxis-labels text,
.hide-x .highcharts-xaxis-labels span,
.hide-x .highcharts-xaxis tspan,
.hide-x .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x .highcharts-tick {
  display: none !important;
}

.hide-x-grid .highcharts-xaxis tspan,
.hide-x-grid .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x-grid .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x-grid .highcharts-tick {
  display: none !important;
}

.y-values .highcharts-data-label:not(:first-child):not(:last-child) {
  display: none;
}

.mini-card .highcharts-point.highcharts-color-0 {
  fill: var(--primary) !important;
}
.mini-card .highcharts-point.highcharts-color-1 {
  fill: var(--primary-50) !important;
}
.mini-card .highcharts-point.highcharts-color-2 {
  fill: var(--primary-40) !important;
}
.mini-card .highcharts-point.highcharts-color-3 {
  fill: var(--primary-60) !important;
}
.mini-card .highcharts-point.highcharts-color-4 {
  fill: var(--primary-30) !important;
}
.mini-card .highcharts-point.highcharts-color-5 {
  fill: var(--primary-70) !important;
}
.mini-card .highcharts-point.highcharts-color-6 {
  fill: var(--primary-20) !important;
}
.mini-card .highcharts-point.highcharts-color-7  {
  fill: var(--primary-80) !important;
}
.mini-card .highcharts-point.highcharts-color-8 {
  fill: var(--primary-10) !important;
}
.mini-card .highcharts-point.highcharts-color-9 {
  fill: var(--primary-90) !important;
}
.mini-card .highcharts-color-0.highcharts-data-label-connector {
  stroke: var(--primary) !important;
}
.mini-card .highcharts-color-1.highcharts-data-label-connector {
  stroke: var(--primary-50) !important;
}
.mini-card .highcharts-color-2.highcharts-data-label-connector {
  stroke: var(--primary-40) !important;
}
.mini-card .highcharts-color-3.highcharts-data-label-connector {
  stroke: var(--primary-60) !important;
}
.mini-card .highcharts-color-4.highcharts-data-label-connector {
  stroke: var(--primary-30) !important;
}
.mini-card .highcharts-color-5.highcharts-data-label-connector {
  stroke: var(--primary-70) !important;
}
.mini-card .highcharts-color-6.highcharts-data-label-connector {
  stroke: var(--primary-20) !important;
}
.mini-card .highcharts-color-7.highcharts-data-label-connector  {
  stroke: var(--primary-80) !important;
}
.mini-card .highcharts-color-8.highcharts-data-label-connector {
  stroke: var(--primary-10) !important;
}
.mini-card .highcharts-color-9.highcharts-data-label-connector {
  stroke: var(--primary-90) !important;
}

.mini-card rect.highcharts-background {
  fill: transparent !important;
}

.mini-card text {
  fill: var(--card-text) !important;
  font-size: 13px !important;
}

.mini-card .highcharts-grid-line {
  stroke: var(--primary) !important;
  stroke-dasharray: 2 2;
}

.mini-card .highcharts-graph {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-area {
  fill: transparent !important;
}

.mini-card .highcharts-legend {
  display: none;
}

.mini-card .highcharts-markers path {
  fill: var(--primary) !important;
}

.mini-card .highcharts-label-box:not(.highcharts-shadow) {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-tooltip-container {
  background: var(--background);
  color: var(--body-text);
}

.mini-card .highcharts-label span {
  color: var(--card-text) !important;
}

.mini-card .ods-highcharts__tooltip span {
  color: var(--primary) !important;
}

.mini-card .highcharts-point {
  fill: var(--primary) !important;
  stroke: transparent !important;
  rx: 8px;
}

.mini-card .highcharts-grid-line:not(:first-child):not(:last-child),
.mini-card .highcharts-yaxis-labels text:not(:first-child):not(:last-child) {
  display: none;
}

.mini-card .highcharts-xaxis-labels span {
  color: var(--card-text) !important;
  font-size: 13px !important;;
}

/* Utilities */
.z-depth-1 {
  z-index: 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  z-index: 2;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.row-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Elements */
section {
  padding: 0 16px;
  margin: 16px 0;
}

.title {
  margin-bottom: 1em;
}

.subtitle {
  margin-top: -0.75em;
}

h1.title {
  font-size: 2.25rem;
}

h2.title {
  font-size: 1.5rem;
}

h5.subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/* Components */
.menu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: white;
  border-radius: 999px;
  padding: 0 16px;
  margin-top: 16px;
  background: var(--surface);
  color: var(--card-text);
}

@media screen and (max-width: 768px) {
  .menu {
    flex-direction: column;
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
}

.filter {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
}

.filter:not(:last-child) {
  border-right: 1px solid lightgray;
}

.filter .odswidget-select {
  min-width: 220px;
}

.filter > *:not(:last-child) {
  margin-right: 8px;
}

.filter .odswidget-timerange {
  display: flex;
}

.filter .odswidget-timerange__to,
.filter .odswidget-timerange__from {
  display: flex;
  justify-content: space-between;
  margin-right: 16px;
}

.filter .odswidget-timerange__label {
  margin-right: 8px;
}

.filter .odswidget-select-button,
.filter .odswidget-select-input {
  padding: 8px;
  border: none;
  background: transparent;
}

.filter .odswidget-select-button:hover {
  border: none;
}

.filter .odswidget-timerange__input {
  border: none;
  border-bottom: 1px solid;
  background: var(--surface);
  color: var(--card-text);
}

.filter .odswidget-select-dropdown-menu {
  top: 32px;
}

@media screen and (max-width: 768px) {
  .filter {
    justify-content: center;
  }

  .filter .odswidget-timerange {
    flex-direction: column;
  }

  .filter .odswidget-timerange__from {
    margin-bottom: 2em;
  }

  .filter:not(:last-child) {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid lightgray;
  }
}

.card {
  background: var(--surface);
  color: var(--card-text);
  border-radius: 4px;
  padding: 16px;
  height: 100%;
}

.card-head {
  padding-bottom: 2rem;
}

.card .title,
.card .subtitle {
  color: var(--card-text);
}

.data-table {
  margin: 0 -16px;
  color: var(--card-text);
}

.data-table thead {
  background: var(--overlay-10);
  border-bottom: 1px solid var(--card-text);
}

.data-table tr {
  line-height: 32px;
  position: relative;
}

.data-table tr:hover {
  background: var(--overlay-10);
}

.data-table td,
.data-table th {
  padding: 8px;
}

.data-table tbody tr:nth-child(-n + 3) * {
  font-weight: 500;
}

Full dashboard

This is a reproduction of the monitoring dashboard using the above components.

Dataset in use: monitoring-copy (See it on userclub domain)

Fields in use:

dataset_id	timestamp	size_res	user_id	attributes	action	geo_coordinates
dataproviders-dataods	2021-11-06T21:39:37+00:00	4662	anonymous	page-home	search	50.0797,-125.5892
dataproviders-dataods	2021-12-07T15:13:02+00:00	4655	anonymous	page-home	search	12.9634,77.5855
dataproviders-dataods	2021-12-07T09:35:13+00:00	2796	anonymous	page-home	lookup	48.8582,2.3387
base-nationale-des-lieux-de-covoiturage-en-france	2021-12-06T17:23:24+00:00	0	anonymous	page-portail	geo	41.9199,8.7424

<ods-dataset-context context="stats"
                     stats-dataset="ods-api-monitoring"
                     stats-source="monitoring"
                     stats-parameters="{'disjunctive.dataset_id':true}">
    <div class="container">
        <section>
            <h1 class="title">
                Company Data Hub's Analytics
            </h1>
            <p>DISCLAIMER Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sint, sequi ratione
                esse, officiis, aliquam quaerat perferendis mollitia laborum cumque molestiae aspernatur.</p>
            <p>
                These Analytics are based on usages made on <a href="/explore" target="_blank">Company's</a> data
                portal. Contact <a href=mailto:admin@mycompany.com class="link_color">Admin</a> for any additional
                questions.
            </p>
            <a href="/explore/dataset/ods-api-monitoring/?source=monitoring&disjunctive.dataset_id"> Access source
                data</a>

            <a href="/explore"> Access Company's Data Hub</a>
        </section>
        <nav class="row row-sticky">
            <div class="menu z-depth-2">
                <div class="filter">
                    <div ods-facet-results="items"
                         ods-facet-results-context="stats"
                         ods-facet-results-facet-name="dataset_id"
                         ods-facet-results-sort="alphanum">
                        <ods-select placeholder="Dataset"
                                    selected-values="stats.parameters['refine.dataset_id']"
                                    multiple="false"
                                    options="items"
                                    label-modifier="name"
                                    value-modifier="name">
                        </ods-select>
                    </div>
                </div>
                <div class="filter" ods-datetime="now">
                    <ods-timerange context="stats"
                                   date-format="DD MMM YYYY"
                                   precision="day"
                                   default-from="{{ (now|momentadd:'months':-2)|moment:'YYYY-MM-DD' }}"
                                   default-to="{{ now|moment:'YYYY-MM-DD' }}"
                                   stats-time-field="timestamp"
                                   from="startDate"
                                   to="endDate">
                    </ods-timerange>
                </div>
            </div>
        </nav>
        <section class="row">
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Portal's activity.
                        </h2>
                        <p class="subtitle">Count of daily API calls from {{ startDate|date:'longDate' }} to {{
                            endDate|date:'longDate' }}.</p>
                    </div>
                    <ods-chart class="mini-card hide-x hide-y y-values" timescale="day" single-y-axis="true"
                               align-month="true">
                        <ods-chart-query context="stats" field-x="timestamp" maxpoints="0" timescale="day">
                            <ods-chart-serie expression-y="size_res" chart-type="areaspline" function-y="COUNT"
                                             scientific-display="false" display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Users ranked by API calls
                        </h2>
                        <p class="subtitle">Most active users by sum of all API calls, regardless of the nature of
                            the call.</p>
                    </div>
                    <ods-chart class="mini-card">
                        <ods-chart-query context="stats" field-x="user_id" maxpoints="10" sort="serie1-1"
                                         display-legend="true">
                            <ods-chart-serie chart-type="pie" innersize="60%" labelsposition="outside"
                                             function-y="COUNT" scientific-display="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
        </section>
        <section class="row">
            <div class="col-md-12">
                <ods-dataset-context context="queries"
                                     queries-dataset="monitoring-copy"
                                     queries-parameters="{'q':'NOT #null(query_text)'}">
                    {{ queries.parameters['q.timerange'] = stats.parameters['q.timerange'] ; '' }}
                    {{ queries.parameters['refine.dataset_id'] = stats.parameters['refine.dataset_id'] ; '' }}
                    <div class="card z-depth-1">
                        <div class="card-head">
                            <h2 class="title">
                                Most frequent queries
                            </h2>
                        </div>
                        <table class="data-table">
                            <thead>
                            <tr>
                                <th> Rank</th>
                                <th>Request</th>
                                <th>Occurrences</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ods-facet-results="frequentqueries"
                                ods-facet-results-context="queries"
                                ods-facet-results-facet-name="query_text"
                                ng-repeat="(i,query) in frequentqueries.slice(0,10)"
                                ng-show="query.count>5">
                                <td style="text-align:center;">{{ i+1 }}</td>
                                <td style="width: 100%">{{ query.name }}</td>
                                <td>{{ query.count }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </ods-dataset-context>
            </div>
        </section>
        <section class="row">
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Most active pages
                        </h2>
                        <p class="subtitle">Ranked by number of API calls</p>
                    </div>
                    <ods-chart class="mini-card hide-x-grid hide-y" single-y-axis="true" align-month="true"
                               labels-x-length="15">
                        <ods-chart-query context="stats" field-x="attributes" maxpoints="7" sort="serie1-1">
                            <ods-chart-serie chart-type="bar" function-y="COUNT" label-y="Sum of API calls"
                                             scientific-display="true" display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Popular actions
                        </h2>
                        <p class="subtitle">Ranked by number of API calls</p>
                    </div>
                    <ods-chart class="mini-card hide-x-grid hide-y" single-y-axis="true" align-month="true"
                               labels-x-length="15">
                        <ods-chart-query context="stats" field-x="action" maxpoints="6" sort="serie1-1">
                            <ods-chart-serie chart-type="bar" function-y="COUNT" scientific-display="true"
                                             display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
        </section>
        <section class="row">
            <div class="col-md-12">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Origin of users on Company's Data Hub
                        </h2>
                    </div>
                    <ods-map scroll-wheel-zoom="false"
                             location="5,47.27923,2.94434"
                             basemap="jawg.dark"
                             toolbar-geolocation="false"
                             toolbar-drawing="true"
                             toolbar-fullscreen="true"
                             search-box="false"
                             display-control="false"
                             display-control-single-layer="true">
                        <ods-map-layer-group>
                            <ods-map-layer context="stats" color="hsl(194, 100%, 73%)" picto="ods-circle"
                                           show-marker="true" display="auto" shape-opacity="0.5" point-opacity="1"
                                           border-color="#FFFFFF" border-opacity="1" border-size="1"
                                           border-pattern="solid" caption="false" caption-picto-color="#f2cb46"
                                           title="Company Data Hub" size="4" size-min="3" size-max="5"
                                           size-function="linear"></ods-map-layer>
                        </ods-map-layer-group>
                    </ods-map>
                </div>
            </div>
        </section>
    </div>
</ods-dataset-context>

:root {
  --primary-hue: 36;
  --primary-saturation: 94%;
  --primary-lightness: 59%;

  --surface: hsl(200, 21%, 37%);
  --background: hsl(198, 20%, 17%);
  --card-text: white;
  --body-text: white;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 90%, 10%);
}

body {
  background-color: var(--background);
  color: var(--body-text);
}

h1 {
  color: var(--body-text);
}

/* ODS Over-ride */
.row > *:first-child {
  margin-left: 0;
}

.row > *:last-child {
  margin-right: 0;
}

.row {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .row {
    flex-direction: column;
  }

  .row > *:not(:last-child) {
    margin-bottom: 16px;
  }
}

.odswidget-select-button-label,
.odswidget-select-button,
.odswidget-select-input {
  color: var(--card-text);
}

.odswidget-select-dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidget-select-dropdown-menu-item:hover {
  background-color: var(--overlay-10);
}

.odswidget-select-dropdown-item-close-icon {
  color: var(--primary);
}

.odswidget-select-input-container {
  border: none;
}

.odswidget-timerange__reset {
  color: var(--primary);
}

.odswidget-timerange__reset:hover {
  color: var(--primary-80);
}

.odswidgets-rd-container.rd-container
 {
  background: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidgets-rd-container .rd-time-list {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-next,
.odswidgets-rd-container .rd-back {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-day-body:hover,
.odswidgets-rd-container .rd-day-selected,
.odswidgets-rd-container .rd-time-option:hover,
.odswidgets-rd-container .rd-time-selected
{
  background-color: var(--primary);
}

.odswidget-charts {
  margin: 0 -12px;
}

.highcharts-halo {
  fill: var(--primary) !important;
}

.highcharts-root > * {
  width: 100%;
}

.highcharts-text-outline {
  display: none;
}

.highcharts-data-label text tspan {
  fill: var(--card-text);
}

.hide-y .highcharts-yaxis-grid path.highcharts-grid-line,
.hide-y .highcharts-yaxis-labels text,
.hide-y .highcharts-yaxis-labels span {
  display: none !important;
}

.hide-x .highcharts-xaxis-labels text,
.hide-x .highcharts-xaxis-labels span,
.hide-x .highcharts-xaxis tspan,
.hide-x .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x .highcharts-tick {
  display: none !important;
}

.hide-x-grid .highcharts-xaxis tspan,
.hide-x-grid .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x-grid .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x-grid .highcharts-tick {
  display: none !important;
}

.y-values .highcharts-data-label:not(:first-child):not(:last-child) {
  display: none;
}

.y-values .highcharts-data-label:first-child,
.y-values .highcharts-data-label:last-child {
  opacity: 1;
  visibility: inherit; /* force the last child to be visible, as it can be hidden by highchart */
}

.mini-card .highcharts-point.highcharts-color-0 {
  fill: var(--primary) !important;
}
.mini-card .highcharts-point.highcharts-color-1 {
  fill: var(--primary-50) !important;
}
.mini-card .highcharts-point.highcharts-color-2 {
  fill: var(--primary-40) !important;
}
.mini-card .highcharts-point.highcharts-color-3 {
  fill: var(--primary-60) !important;
}
.mini-card .highcharts-point.highcharts-color-4 {
  fill: var(--primary-30) !important;
}
.mini-card .highcharts-point.highcharts-color-5 {
  fill: var(--primary-70) !important;
}
.mini-card .highcharts-point.highcharts-color-6 {
  fill: var(--primary-20) !important;
}
.mini-card .highcharts-point.highcharts-color-7  {
  fill: var(--primary-80) !important;
}
.mini-card .highcharts-point.highcharts-color-8 {
  fill: var(--primary-10) !important;
}
.mini-card .highcharts-point.highcharts-color-9 {
  fill: var(--primary-90) !important;
}
.mini-card .highcharts-color-0.highcharts-data-label-connector {
  stroke: var(--primary) !important;
}
.mini-card .highcharts-color-1.highcharts-data-label-connector {
  stroke: var(--primary-50) !important;
}
.mini-card .highcharts-color-2.highcharts-data-label-connector {
  stroke: var(--primary-40) !important;
}
.mini-card .highcharts-color-3.highcharts-data-label-connector {
  stroke: var(--primary-60) !important;
}
.mini-card .highcharts-color-4.highcharts-data-label-connector {
  stroke: var(--primary-30) !important;
}
.mini-card .highcharts-color-5.highcharts-data-label-connector {
  stroke: var(--primary-70) !important;
}
.mini-card .highcharts-color-6.highcharts-data-label-connector {
  stroke: var(--primary-20) !important;
}
.mini-card .highcharts-color-7.highcharts-data-label-connector  {
  stroke: var(--primary-80) !important;
}
.mini-card .highcharts-color-8.highcharts-data-label-connector {
  stroke: var(--primary-10) !important;
}
.mini-card .highcharts-color-9.highcharts-data-label-connector {
  stroke: var(--primary-90) !important;
}

.mini-card rect.highcharts-background {
  fill: transparent !important;
}

.mini-card text {
  fill: var(--card-text) !important;
  font-size: 13px !important;
}

.mini-card .highcharts-grid-line {
  stroke: var(--primary) !important;
  stroke-dasharray: 2 2;
}

.mini-card .highcharts-graph {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-area {
  fill: transparent !important;
}

.mini-card .highcharts-legend {
  display: none;
}

.mini-card .highcharts-markers path {
  fill: var(--primary) !important;
}

.mini-card .highcharts-label-box:not(.highcharts-shadow) {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-tooltip-container {
  background: var(--background);
  color: var(--body-text);
}

.mini-card .highcharts-label span {
  color: var(--card-text) !important;
}

.mini-card .ods-highcharts__tooltip span {
  color: var(--primary) !important;
}

.mini-card .highcharts-point {
  fill: var(--primary) !important;
  stroke: transparent !important;
  rx: 8px;
}

.mini-card .highcharts-grid-line:not(:first-child):not(:last-child),
.mini-card .highcharts-yaxis-labels text:not(:first-child):not(:last-child) {
  display: none;
}

.mini-card .highcharts-xaxis-labels span {
  color: var(--card-text) !important;
  font-size: 13px !important;;
}

/* Utilities */
.z-depth-1 {
  z-index: 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  z-index: 2;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.row-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Elements */
section {
  padding: 0 16px;
  margin: 16px 0;
}

.title {
  margin-bottom: 1em;
}

.subtitle {
  margin-top: -0.75em;
}

h1.title {
  font-size: 2.25rem;
}

h2.title {
  font-size: 1.5rem;
}

h5.subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/* Components */
.menu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: white;
  border-radius: 999px;
  padding: 0 16px;
  margin-top: 16px;
  background: var(--surface);
  color: var(--card-text);
}

@media screen and (max-width: 992px) {
  .menu {
    flex-direction: column;
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
}

.filter {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
}

.filter:not(:last-child) {
  border-right: 1px solid lightgray;
}

.filter .odswidget-select {
  min-width: 220px;
}

.filter > *:not(:last-child) {
  margin-right: 8px;
}

.filter .odswidget-timerange {
  display: flex;
}

.filter .odswidget-timerange__to,
.filter .odswidget-timerange__from {
  display: flex;
  justify-content: space-between;
  margin-right: 16px;
}

.filter .odswidget-timerange__label {
  margin-right: 8px;
}

.filter .odswidget-select-button,
.filter .odswidget-select-input {
  padding: 8px;
  border: none;
  background: transparent;
}

.filter .odswidget-select-button:hover {
  border: none;
}

.filter .odswidget-timerange__input {
  border: none;
  border-bottom: 1px solid;
  background: var(--surface);
  color: var(--card-text);
}

.filter .odswidget-select-dropdown-menu {
  top: 32px;
}

@media screen and (max-width: 768px) {
  .filter {
    justify-content: center;
  }

  .filter .odswidget-timerange {
    flex-direction: column;
  }

  .filter .odswidget-timerange__from {
    margin-bottom: 2em;
  }

  .filter:not(:last-child) {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid lightgray;
  }
}

.card {
  background: var(--surface);
  color: var(--card-text);
  border-radius: 4px;
  padding: 16px;
  height: 100%;
}

.card-head {
  padding-bottom: 2rem;
}

.card .title,
.card .subtitle {
  color: var(--card-text);
}

.data-table {
  margin: 0 -16px;
  color: var(--card-text);
}

.data-table thead {
  background: var(--overlay-10);
  border-bottom: 1px solid var(--card-text);
}

.data-table tr {
  line-height: 32px;
  position: relative;
}

.data-table tr:hover {
  background: var(--overlay-10);
}

.data-table td,
.data-table th {
  padding: 8px;
  max-width: 265px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table tbody tr:nth-child(-n + 3) * {
  font-weight: 500;
}

Full dashboard with multiple primary colors

You can use multiple color theme on the same page by adding classes that redefines the same color variables as in :root ( --primary-hue, --primary-saturation etc.) . In this example, we add the following css class: is-info, is-warning, is-success. Then we apply them on <section class="row is-XXX">…</section> to give specific colors to sections.

Dataset in use: monitoring-copy (See it on userclub domain)

Fields in use:

dataset_id	timestamp	size_res	user_id	attributes	action	geo_coordinates
dataproviders-dataods	2021-11-06T21:39:37+00:00	4662	anonymous	page-home	search	50.0797,-125.5892
dataproviders-dataods	2021-12-07T15:13:02+00:00	4655	anonymous	page-home	search	12.9634,77.5855
dataproviders-dataods	2021-12-07T09:35:13+00:00	2796	anonymous	page-home	lookup	48.8582,2.3387
base-nationale-des-lieux-de-covoiturage-en-france	2021-12-06T17:23:24+00:00	0	anonymous	page-portail	geo	41.9199,8.7424

<ods-dataset-context context="stats"
                     stats-dataset="ods-api-monitoring"
                     stats-source="monitoring"
                     stats-parameters="{'disjunctive.dataset_id':true}">
    <div class="container">
        <section>
            <h1 class="title">
                Company Data Hub's Analytics
            </h1>
            <p>DISCLAIMER Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sint, sequi ratione
                esse, officiis, aliquam quaerat perferendis mollitia laborum cumque molestiae aspernatur.</p>
            <p>
                These Analytics are based on usages made on <a href="/explore" target="_blank">Company's</a> data
                portal. Contact <a href=mailto:admin@mycompany.com class="link_color">Admin</a> for any additional
                questions.
            </p>
            <a href="/explore/dataset/ods-api-monitoring/?source=monitoring&disjunctive.dataset_id"> Access source
                data</a>

            <a href="/explore"> Access Company's Data Hub</a>
        </section>
        <nav class="row row-sticky">
            <div class="menu z-depth-2">
                <div class="filter">
                    <div ods-facet-results="items"
                         ods-facet-results-context="stats"
                         ods-facet-results-facet-name="dataset_id"
                         ods-facet-results-sort="alphanum">
                        <ods-select placeholder="Dataset"
                                    selected-values="stats.parameters['refine.dataset_id']"
                                    multiple="false"
                                    options="items"
                                    label-modifier="name"
                                    value-modifier="name">
                        </ods-select>
                    </div>
                </div>
                <div class="filter" ods-datetime="now">
                    <ods-timerange context="stats"
                                   date-format="DD MMM YYYY"
                                   precision="day"
                                   default-from="{{ (now|momentadd:'months':-2)|moment:'YYYY-MM-DD' }}"
                                   default-to="{{ now|moment:'YYYY-MM-DD' }}"
                                   stats-time-field="timestamp"
                                   from="startDate"
                                   to="endDate">
                    </ods-timerange>
                </div>
            </div>
        </nav>
        <section class="row is-info">
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Portal's activity.
                        </h2>
                        <p class="subtitle">Count of daily API calls from {{ startDate|date:'longDate' }} to {{
                            endDate|date:'longDate' }}.</p>
                    </div>
                    <ods-chart class="mini-card hide-x hide-y y-values" timescale="day" single-y-axis="true"
                               align-month="true">
                        <ods-chart-query context="stats" field-x="timestamp" maxpoints="0" timescale="day">
                            <ods-chart-serie expression-y="size_res" chart-type="areaspline" function-y="COUNT"
                                             scientific-display="false" display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Users ranked by API calls
                        </h2>
                        <p class="subtitle">Most active users by sum of all API calls, regardless of the nature of
                            the call.</p>
                    </div>
                    <ods-chart class="mini-card">
                        <ods-chart-query context="stats" field-x="user_id" maxpoints="10" sort="serie1-1"
                                         display-legend="true">
                            <ods-chart-serie chart-type="pie" innersize="60%" labelsposition="outside"
                                             function-y="COUNT" scientific-display="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
        </section>
        <section class="row is-warning">
            <div class="col-md-12">
                <ods-dataset-context context="queries"
                                     queries-dataset="monitoring-copy"
                                     queries-parameters="{'q':'NOT #null(query_text)'}">
                    {{ queries.parameters['q.timerange'] = stats.parameters['q.timerange'] ; '' }}
                    {{ queries.parameters['refine.dataset_id'] = stats.parameters['refine.dataset_id'] ; '' }}
                    <div class="card z-depth-1">
                        <div class="card-head">
                            <h2 class="title">
                                Most frequent queries
                            </h2>
                        </div>
                        <table class="data-table">
                            <thead>
                            <tr>
                                <th> Rank</th>
                                <th>Request</th>
                                <th>Occurrences</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ods-facet-results="frequentqueries"
                                ods-facet-results-context="queries"
                                ods-facet-results-facet-name="query_text"
                                ng-repeat="(i,query) in frequentqueries.slice(0,10)"
                                ng-show="query.count>5">
                                <td style="text-align:center;">{{ i+1 }}</td>
                                <td style="width: 100%">{{ query.name }}</td>
                                <td>{{ query.count }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </ods-dataset-context>
            </div>
        </section>
        <section class="row is-success">
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Most active pages
                        </h2>
                        <p class="subtitle">Ranked by number of API calls</p>
                    </div>
                    <ods-chart class="mini-card hide-x-grid hide-y" single-y-axis="true" align-month="true"
                               labels-x-length="15">
                        <ods-chart-query context="stats" field-x="attributes" maxpoints="7" sort="serie1-1">
                            <ods-chart-serie chart-type="bar" function-y="COUNT" label-y="Sum of API calls"
                                             scientific-display="true" display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Popular actions
                        </h2>
                        <p class="subtitle">Ranked by number of API calls</p>
                    </div>
                    <ods-chart class="mini-card hide-x-grid hide-y" single-y-axis="true" align-month="true"
                               labels-x-length="15">
                        <ods-chart-query context="stats" field-x="action" maxpoints="6" sort="serie1-1">
                            <ods-chart-serie chart-type="bar" function-y="COUNT" scientific-display="true"
                                             display-values="true">
                            </ods-chart-serie>
                        </ods-chart-query>
                    </ods-chart>
                </div>
            </div>
        </section>
        <section class="row">
            <div class="col-md-12">
                <div class="card z-depth-1">
                    <div class="card-head">
                        <h2 class="title">
                            Origin of users on Company's Data Hub
                        </h2>
                    </div>
                    <ods-map scroll-wheel-zoom="false"
                             location="5,47.27923,2.94434"
                             basemap="jawg.dark"
                             toolbar-geolocation="false"
                             toolbar-drawing="true"
                             toolbar-fullscreen="true"
                             search-box="false"
                             display-control="false"
                             display-control-single-layer="true">
                        <ods-map-layer-group>
                            <ods-map-layer context="stats" color="hsl(194, 100%, 73%)" picto="ods-circle"
                                           show-marker="true" display="auto" shape-opacity="0.5" point-opacity="1"
                                           border-color="#FFFFFF" border-opacity="1" border-size="1"
                                           border-pattern="solid" caption="false" caption-picto-color="#f2cb46"
                                           title="Company Data Hub" size="4" size-min="3" size-max="5"
                                           size-function="linear"></ods-map-layer>
                        </ods-map-layer-group>
                    </ods-map>
                </div>
            </div>
        </section>
    </div>
</ods-dataset-context>

:root {
  --primary-hue: 36;
  --primary-saturation: 94%;
  --primary-lightness: 59%;

  --surface: hsl(200, 21%, 37%);
  --background: hsl(198, 20%, 17%);
  --card-text: white;
  --body-text: white;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 90%, 10%);
}

.is-info {
  --primary-hue: 194;
  --primary-saturation: 100%;
  --primary-lightness: 73%;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 90%, 10%);
}

.is-success {
  --primary-hue: 158;
  --primary-saturation: 72%;
  --primary-lightness: 42%;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 90%, 10%);
}

.is-warning {
  --primary-hue: 5;
  --primary-saturation: 100%;
  --primary-lightness: 67%;

  /* These are automatically computed unless you need to overwrite them */
  --primary:    hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --primary-10: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-20: hsl(var(--primary-hue), var(--primary-saturation), 20%);
  --primary-30: hsl(var(--primary-hue), var(--primary-saturation), 30%);
  --primary-40: hsl(var(--primary-hue), var(--primary-saturation), 40%);
  --primary-50: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-60: hsl(var(--primary-hue), var(--primary-saturation), 60%);
  --primary-70: hsl(var(--primary-hue), var(--primary-saturation), 70%);
  --primary-80: hsl(var(--primary-hue), var(--primary-saturation), 80%);
  --primary-90: hsl(var(--primary-hue), var(--primary-saturation), 90%);

  --overlay-10: hsla(var(--primary-hue), var(--primary-saturation), 50%, 50%);
}

body {
  background-color: var(--background);
  color: var(--body-text);
}

h1 {
  color: var(--body-text);
}

/* ODS Over-ride */
.row > *:first-child {
  margin-left: 0;
}

.row > *:last-child {
  margin-right: 0;
}

.row {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .row {
    flex-direction: column;
  }

  .row > *:not(:last-child) {
    margin-bottom: 16px;
  }
}

.odswidget-select-button-label,
.odswidget-select-button,
.odswidget-select-input {
  color: var(--card-text);
}

.odswidget-select-dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidget-select-dropdown-menu-item:hover {
  background-color: var(--overlay-10);
}

.odswidget-select-dropdown-item-close-icon {
  color: var(--primary);
}

.odswidget-select-input-container {
  border: none;
}

.odswidget-timerange__reset {
  color: var(--primary);
}

.odswidget-timerange__reset:hover {
  color: var(--primary-80);
}

.odswidgets-rd-container.rd-container
 {
  background: var(--surface);
  border: 1px solid var(--overlay-10);
}

.odswidgets-rd-container .rd-time-list {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-next,
.odswidgets-rd-container .rd-back {
  background-color: var(--surface);
  color: var(--card-text);
}

.odswidgets-rd-container .rd-day-body:hover,
.odswidgets-rd-container .rd-day-selected,
.odswidgets-rd-container .rd-time-option:hover,
.odswidgets-rd-container .rd-time-selected
{
  background-color: var(--primary);
}

.odswidget-charts {
  margin: 0 -12px;
}

.highcharts-halo {
  fill: var(--primary) !important;
}

.highcharts-root > * {
  width: 100%;
}

.highcharts-text-outline {
  display: none;
}

.highcharts-data-label text tspan {
  fill: var(--card-text);
}

.hide-y .highcharts-yaxis-grid path.highcharts-grid-line,
.hide-y .highcharts-yaxis-labels text,
.hide-y .highcharts-yaxis-labels span {
  display: none !important;
}

.hide-x .highcharts-xaxis-labels text,
.hide-x .highcharts-xaxis-labels span,
.hide-x .highcharts-xaxis tspan,
.hide-x .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x .highcharts-tick {
  display: none !important;
}

.hide-x-grid .highcharts-xaxis tspan,
.hide-x-grid .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,
.hide-x-grid .highcharts-xaxis-grid path.highcharts-grid-line,
.hide-x-grid .highcharts-tick {
  display: none !important;
}

.y-values .highcharts-data-label:not(:first-child):not(:last-child) {
  display: none;
}

.y-values .highcharts-data-label:first-child,
.y-values .highcharts-data-label:last-child {
  opacity: 1;
  visibility: inherit; /* force the last child to be visible, as it can be hidden by highchart */
}

.mini-card .highcharts-point.highcharts-color-0 {
  fill: var(--primary) !important;
}
.mini-card .highcharts-point.highcharts-color-1 {
  fill: var(--primary-50) !important;
}
.mini-card .highcharts-point.highcharts-color-2 {
  fill: var(--primary-40) !important;
}
.mini-card .highcharts-point.highcharts-color-3 {
  fill: var(--primary-60) !important;
}
.mini-card .highcharts-point.highcharts-color-4 {
  fill: var(--primary-30) !important;
}
.mini-card .highcharts-point.highcharts-color-5 {
  fill: var(--primary-70) !important;
}
.mini-card .highcharts-point.highcharts-color-6 {
  fill: var(--primary-20) !important;
}
.mini-card .highcharts-point.highcharts-color-7  {
  fill: var(--primary-80) !important;
}
.mini-card .highcharts-point.highcharts-color-8 {
  fill: var(--primary-10) !important;
}
.mini-card .highcharts-point.highcharts-color-9 {
  fill: var(--primary-90) !important;
}
.mini-card .highcharts-color-0.highcharts-data-label-connector {
  stroke: var(--primary) !important;
}
.mini-card .highcharts-color-1.highcharts-data-label-connector {
  stroke: var(--primary-50) !important;
}
.mini-card .highcharts-color-2.highcharts-data-label-connector {
  stroke: var(--primary-40) !important;
}
.mini-card .highcharts-color-3.highcharts-data-label-connector {
  stroke: var(--primary-60) !important;
}
.mini-card .highcharts-color-4.highcharts-data-label-connector {
  stroke: var(--primary-30) !important;
}
.mini-card .highcharts-color-5.highcharts-data-label-connector {
  stroke: var(--primary-70) !important;
}
.mini-card .highcharts-color-6.highcharts-data-label-connector {
  stroke: var(--primary-20) !important;
}
.mini-card .highcharts-color-7.highcharts-data-label-connector  {
  stroke: var(--primary-80) !important;
}
.mini-card .highcharts-color-8.highcharts-data-label-connector {
  stroke: var(--primary-10) !important;
}
.mini-card .highcharts-color-9.highcharts-data-label-connector {
  stroke: var(--primary-90) !important;
}

.mini-card rect.highcharts-background {
  fill: transparent !important;
}

.mini-card text {
  fill: var(--card-text) !important;
  font-size: 13px !important;
}

.mini-card .highcharts-grid-line {
  stroke: var(--primary) !important;
  stroke-dasharray: 2 2;
}

.mini-card .highcharts-graph {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-area {
  fill: transparent !important;
}

.mini-card .highcharts-legend {
  display: none;
}

.mini-card .highcharts-markers path {
  fill: var(--primary) !important;
}

.mini-card .highcharts-label-box:not(.highcharts-shadow) {
  stroke: var(--primary) !important;
}

.mini-card .highcharts-tooltip-container {
  background: var(--background);
  color: var(--body-text);
}

.mini-card .highcharts-label span {
  color: var(--card-text) !important;
}

.mini-card .ods-highcharts__tooltip span {
  color: var(--primary) !important;
}

.mini-card .highcharts-point {
  fill: var(--primary) !important;
  stroke: transparent !important;
  rx: 8px;
}

.mini-card .highcharts-grid-line:not(:first-child):not(:last-child),
.mini-card .highcharts-yaxis-labels text:not(:first-child):not(:last-child) {
  display: none;
}

.mini-card .highcharts-xaxis-labels span {
  color: var(--card-text) !important;
  font-size: 13px !important;;
}

/* Utilities */
.z-depth-1 {
  z-index: 1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  z-index: 2;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.row-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Elements */
section {
  padding: 0 16px;
  margin: 16px 0;
}

.title {
  margin-bottom: 1em;
}

.subtitle {
  margin-top: -0.75em;
}

h1.title {
  font-size: 2.25rem;
}

h2.title {
  font-size: 1.5rem;
}

h5.subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/* Components */
.menu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: white;
  border-radius: 999px;
  padding: 0 16px;
  margin-top: 16px;
  background: var(--surface);
  color: var(--card-text);
}

@media screen and (max-width: 992px) {
  .menu {
    flex-direction: column;
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
}

.filter {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
}

.filter:not(:last-child) {
  border-right: 1px solid lightgray;
}

.filter .odswidget-select {
  min-width: 220px;
}

.filter > *:not(:last-child) {
  margin-right: 8px;
}

.filter .odswidget-timerange {
  display: flex;
}

.filter .odswidget-timerange__to,
.filter .odswidget-timerange__from {
  display: flex;
  justify-content: space-between;
  margin-right: 16px;
}

.filter .odswidget-timerange__label {
  margin-right: 8px;
}

.filter .odswidget-select-button,
.filter .odswidget-select-input {
  padding: 8px;
  border: none;
  background: transparent;
}

.filter .odswidget-select-button:hover {
  border: none;
}

.filter .odswidget-timerange__input {
  border: none;
  border-bottom: 1px solid;
  background: var(--surface);
  color: var(--card-text);
}

.filter .odswidget-select-dropdown-menu {
  top: 32px;
}

@media screen and (max-width: 768px) {
  .filter {
    justify-content: center;
  }

  .filter .odswidget-timerange {
    flex-direction: column;
  }

  .filter .odswidget-timerange__from {
    margin-bottom: 2em;
  }

  .filter:not(:last-child) {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid lightgray;
  }
}

.card {
  background: var(--surface);
  color: var(--card-text);
  border-radius: 4px;
  padding: 16px;
  height: 100%;
}

.card-head {
  padding-bottom: 2rem;
}

.card .title,
.card .subtitle {
  color: var(--card-text);
}

.data-table {
  margin: 0 -16px;
  color: var(--card-text);
}

.data-table thead {
  background: var(--overlay-10);
  border-bottom: 1px solid var(--card-text);
}

.data-table tr {
  line-height: 32px;
  position: relative;
}

.data-table tr:hover {
  background: var(--overlay-10);
}

.data-table td,
.data-table th {
  padding: 8px;
  max-width: 265px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table tbody tr:nth-child(-n + 3) * {
  font-weight: 500;
}