Eco-Counter / Eco-Compteur data custom view
Eco-Counter custom view for Opendatasoft integration: an overall view of your territory through Eco-Counter stations data.
Install procedure
Two datasets are required :
- eco-counter-data : from
Eco Counter Dataconnector - eco-counter-sites : from
Eco Counter Sitesconnector
eco-counter-sites processing :
Get the first photo URL, copy the field, get the photo from the URL
- Split text:
- field:
photos - separator:
/https:// - index:
1 - output:
photourl
- field:
- Copy a field:
- field:
photourl - new field:
photo
- field:
- File:
- field:
photo
- field:
eco-counter-data processing :
Get additional metadata from counters
- Join datasets:
- dataset:
eco-counter-sites - local key:
id - remote key:
id - output fields:
name, coordinates, user_type, sens, interval
- dataset:
Set name field as a facet !
Dataset in use: eco-counter-data (See it on eco-compteur-odsapps domain)
Fields in use:
| name | date (datetime) | counts (numeric) |
|---|---|---|
| Savonniéres | 2021-06-21T07:00:00+00:00 | 1 |
| Pont d’Arcole #1 | 2017-04-12T16:00:00+00:00 | 18 |
| Pont de Fil | 2020-10-29T08:00:00+00:00 | 133 |
| Savonniéres | 2021-06-21T11:00:00+00:00 | 48 |
Dataset in use: eco-counter-sites (See it on eco-compteur-odsapps domain)
Fields in use:
<!------------------------------->
<!--- Eco-compteur custom view -->
<!------------------------------->
<!-- mainColor and secondaryColor must be modified according to your portal and page style -->
<ods-dataset-context context="all,sites,sitesselect"
all-dataset="eco-counter-data"
sites-dataset="eco-counter-sites"
sitesselect-dataset="eco-counter-sites"
ng-init="mainColor = '#142E7B';
secondaryColor = '#0086D6';
selection = undefined;
agregation = 'mo';
values = {
'chartprecision': ['year','month','day','hour'],
'activetab': ''
};">
{{ ctx.parameters['refine.name'] =
(ctx.parameters['refine.name'].join('')?
ctx.parameters['refine.name'].join(''):
ctx.parameters['refine.name']) ; '' }}
{{ sitesselect.parameters['refine.name'] = ctx.parameters['refine.name'] ; '' }}
{{ values.daterefinedepth = (ctx.parameters['refine.date'].length > 1 ?
(ctx.parameters['refine.date'] | split:'/').length : (ctx.parameters['refine.date'][0] | split:'/').length) || 0 ; "" }}
<span ods-facet-results="capteurs"
ods-facet-results-context="sites"
ods-facet-results-facet-name="name">
{{ values.capteurs = capteurs ; '' }}
</span>
<!--------------------------->
<!------- Sticky menu ------->
<!--------------------------->
<section class="subheader-wrapper"
ng-init="zone_panel = false; period_panel = false">
<div class="subheader">
<div class="container">
<div class="subheader-top">
<div>
<span class="subheader-text">
Capteur :
</span>
<span class="subheader-info">
{{ ctx.parameters['refine.name'] || 'Tous' }}
</span>
<br/>
<span class="subheader-text">
Période :
</span>
<span class="subheader-info">
<span ng-if="values.daterefinedepth == 0">Tout l'historique</span>
<span ng-if="values.daterefinedepth > 0"
ods-adv-analysis="range"
ods-adv-analysis-context="ctx"
ods-adv-analysis-select="min(date) as mindate, max(date) as maxdate">
{{ range[0].mindate | date }} au {{ range[0].maxdate | date }}
</span>
</span>
</div>
<div>
<button ng-click="zone_panel = !zone_panel; period_panel = false"
class="subheader-button"
ng-class="{'subheader-button-active': zone_panel}">
Choix d'un capteur
<i class="fa fa-chevron-{{ zone_panel ? 'down' : 'up' }}" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="subheader-panel" ng-if="zone_panel">
<div class="container">
<div class="subheader-panel-wrapper">
<div class="subheader-panel-item carte">
<div class="subheader-panel-flex">
<h3 class="subheader-title">
Sélection du capteur
</h3>
<div class="subheader-panel-flex-right">
<button ng-if="ctx.parameters['refine.name']"
ng-click="ctx.parameters['refine.name'] = undefined"
class="subheader-button subheader-button-secondary">
Tous les capteurs
</button>
<select class="section-select subheader-select"
ng-model="ctx.parameters['refine.name']"
ng-options="item.path as item.name for item in values.capteurs"
ng-selected="(ctx.parameters['refine.name'].join('') + ctx.parameters['refine.name']) == item.path">
<option value="">Tous les capteurs</option>
</select>
</div>
</div>
<div>
<ods-map static-map="false"
no-refit="true"
toolbar-geolocation="false"
toolbar-drawing="false"
toolbar-fullscreen="false"
scroll-wheel-zoom="true"
display-control="false"
display-control-single-layer="false"
search-box="false"
basemap="jawg.light">
<ods-map-layer context="sites"
color="{{ mainColor }}" show-marker="false" display="auto"
shape-opacity="0.5" point-opacity="1" border-color="#000"
refine-on-click-context="[ctx,sitesselect]"
refine-on-click-ctx-map-field="name"
refine-on-click-ctx-context-field="name"
refine-on-click-ctx-replace-refine="true"
refine-on-click-sitesselect-map-field="name"
refine-on-click-sitesselect-context-field="name"
refine-on-click-sitesselect-replace-refine="true">
</ods-map-layer>
<ods-map-layer context="sitesselect"
show-if="sitesselect.parameters['refine.name']"
color="{{ secondaryColor }}" picto="dot" show-marker="false" display="auto"
shape-opacity="0.5" point-opacity="1" border-color="#000"
refine-on-click-context="[ctx,sitesselect]"
refine-on-click-ctx-map-field="name"
refine-on-click-ctx-context-field="name"
refine-on-click-ctx-replace-refine="true"
refine-on-click-sitesselect-map-field="name"
refine-on-click-sitesselect-context-field="name"
refine-on-click-sitesselect-replace-refine="true">
</ods-map-layer>
</ods-map>
</div>
</div>
<div class="subheader-separator"></div>
<div class="subheader-panel-item detail-capteur">
<h3 class="subheader-title">
Détail du capteur
</h3>
<div ng-if="sitesselect.parameters['refine.name']">
<div class="detail-capteur-content"
ods-results="sitesresults"
ods-results-max="1"
ods-results-context="sitesselect">
<h4>{{ sitesresults[0].fields.name }}</h4>
<dl>
<dt>User type</dt>
<dd>{{ sitesresults[0].fields.user_type }}</dd>
<dt>Sens</dt>
<dd>{{ sitesresults[0].fields.sens }}</dd>
<dt>Installation date</dt>
<dd>{{ sitesresults[0].fields.installation_date | date }}</dd>
</dl>
<img class="" ng-src="{{ sitesresults[0].fields.photourl }}" width="100%" />
</div>
</div>
<div ng-if="!sitesselect.parameters['refine.name']">
<p>Pas de capteur sélectionné</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------------------->
<!--- KPI / First section---->
<!--------------------------->
<section class="page-section">
<div class="container">
<div class="row">
<div class="col-lg-6"
ng-if="values.daterefinedepth <= 0"
ods-adv-analysis="byday"
ods-adv-analysis-context="ctx"
ods-adv-analysis-limit="8"
ods-adv-analysis-select="sum(counts) as total"
ods-adv-analysis-group-by="date_format(date, 'YYYY-MM-dd') as day"
ods-adv-analysis-order-by="day DESC">
<h2 class="indicateur">
{{ byday[1].total | number }}
<span class="label">passages comptabilisés le {{ byday[1].day | date }}</span>
</h2>
{{ evol = (byday[1].total - byday[7].total)/byday[7].total*100 ; '' }}
<div class="sous-indicateur">
<h3>
<span ng-if="evol > 0">▲ +</span>
<span ng-if="evol < 0">▼ </span>
{{ evol | number: 1}}%
</h3>
<p>
comparé à {{ byday[7].day | moment:'dddd' }} dernier ({{ byday[7].total | number }} passages le {{ byday[7].day | date }})
</p>
</div>
</div>
<div class="col-lg-6"
ng-if="values.daterefinedepth > 0"
ods-adv-analysis="global"
ods-adv-analysis-context="ctx"
ods-adv-analysis-select="sum(counts) as total">
<h2 class="indicateur">
{{ global[0].total | number }}
<span class="label">passages au total</span>
</h2>
<p class="mb-15">
ont été <b>comptabilisés sur la période séléctionnée</b>
</p>
</div>
<div class="col-lg-6">
<div class="indicateur-box">
<ods-chart class="trend" display-legend="false" single-y-axis="true" align-month="true">
<ods-chart-query context="ctx" field-x="date" maxpoints="0" timescale="{{ values.chartprecision[values.daterefinedepth] }}">
<ods-chart-serie expression-y="counts" chart-type="spline" function-y="SUM" display-values="true"
color="{{ mainColor }}" label-y="Passages">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</div>
</div>
</div>
</section>
<!--------------------------->
<!----- Top 5 section ------->
<!--------------------------->
<section class="page-section"
ng-if="!(ctx.parameters['refine.name'] && values.daterefinedepth >= 3)">
<div class="container">
<div ng-if="!ctx.parameters['refine.name']">
<div class="row">
<div class="col-lg-8">
<div class="indicateur-box">
<ods-chart
class="top5-chart hide-y-legend hide-x-axisline-ticks hide-y-gridline black-x-values medium-x-values medium-data-values"
single-y-axis="true"
scientific-display="true"
display-legend="false"
labels-x-length="40">
<ods-chart-query context="ctx"
field-x="name"
maxpoints="5" sort="serie1-1">
<ods-chart-serie expression-y="counts"
chart-type="bar"
function-y="SUM"
color="{{ mainColor }}"
display-values="true"
label-y="Passages">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</div>
<div class="col-lg-4">
<h2 class="indicateur">
Top 5
</h2>
<p>
<b>Sites</b> les plus fréquentés
</p>
</div>
</div>
</div>
<div ng-if="ctx.parameters['refine.name']">
<div class="row">
<div class="col-lg-8">
<div class="indicateur-box">
<ods-chart
class="top5-chart hide-y-legend hide-x-axisline-ticks hide-y-gridline black-x-values medium-x-values medium-data-values"
single-y-axis="true"
scientific-display="true"
display-legend="false"
labels-x-length="40">
<ods-chart-query context="ctx"
field-x="date"
timescale="day"
maxpoints="5" sort="serie1-1">
<ods-chart-serie expression-y="counts"
chart-type="bar"
function-y="SUM"
color="{{ mainColor }}"
display-values="true"
label-y="Passages">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</div>
<div class="col-lg-4">
<h2 class="indicateur">
Top 5
</h2>
<p>
<b>Jours</b> les plus fréquentés pour le site séléctionné
</p>
</div>
</div>
</div>
</div>
</section>
<!--------------------------->
<!----- Chart section ------->
<!--------------------------->
<section class="page-section bg-white">
<div class="container">
<h2 class="indicateur">Moyennes horaire</h2>
{{
tabs = ([
values.daterefinedepth < 3 ? 'distribution' : undefined,
values.daterefinedepth < 2 ? 'mois' : undefined,
values.daterefinedepth < 3 ? 'jour' : undefined,
values.daterefinedepth > 1 ? 'heure' : undefined
] | filter : '') ;
histoscale = {
'mois':'month',
'jour':'day',
'heure':'hour'
}; ''
}}
<!-- To translate the app, in the few lines above, rename the time scales 'mois', 'jour', 'heure'.
Pay attention to not modify the english keywords 'month', 'day', 'hour' as they are API parameters.
-->
<div class="tabs">
<div class="tab"
ng-repeat="(i,e) in tabs"
ng-click="values.activetab = e"
ng-class="{'tab__active': values.activetab == e}">
{{ values.activetab = (i == 0 && !(tabs.indexOf(values.activetab) >= 0) ? e : values.activetab) ; '' }}
{{ e | capitalize }}
</div>
</div>
<div class="tabs-content">
<div class="tab-content"
ng-if="values.activetab == 'distribution'">
<ods-spinner class="heatmap"></ods-spinner>
<div ods-adv-analysis="weekdayHourRate"
ods-adv-analysis-context="ctx"
ods-adv-analysis-select="avg(counts) as count"
ods-adv-analysis-group-by="date_format(date, 'EEEE') as day, date_format(date, 'HH') as hour">
<ods-vega-lite-chart spec='{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"name": "data"
},
"mark": "rect",
"encoding": {
"y": {
"title": "Jour",
"field": "day",
"type": "ordinal",
"sort": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
"lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"],
},
"x": {
"title": "Heure",
"field": "hour",
"type": "ordinal",
},
"color": {
"title": "Moyenne horaire",
"field": "count",
"type": "quantitative",
"scale": { "range": ["#FFFFFF", "#142E7B"] }
}
}
}' values-data="weekdayHourRate"></ods-vega-lite-chart>
</div>
</div>
<div class="tab-content"
ng-if="(histoscale | keys).indexOf(values.activetab) >= 0">
<ods-chart class="no-bg medium-y-values medium-x-values hide-y-legend" display-legend="false">
<ods-chart-query context="ctx" field-x="date"
timescale="{{ histoscale[values.activetab] }}">
<ods-chart-serie color="{{ mainColor }}" chart-type="spline" expression-y="counts"
function-y="AVG" label-y="Passages par heure" scientific-display="true"
display-values="false">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</div>
</div>
</section>
</ods-dataset-context>:root {
--main-color: var(--section-titles);
--secondary-color: var(--highlight);
--bg-color: var(--section-titles-background);
--menu-text-color: var(--text);
--menu-bg-color: white;
--menu-button-bg-color: var(--highlight);
--menu-button-text-color: white;
}
/* Remove custom view padding */
.ods-tabs__pane.ods-tabs__pane--horizontal {
padding: 0;
}
/* Subheader
========================================================================== */
.subheader-wrapper {
background-color: var(--menu-bg-color);
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 90;
}
.subheader {
color: var(--menu-text-color);
padding-top: 1.5rem;
padding-bottom: 1.5rem;
box-shadow: 0 10px 12px -8px #bec2d5;
}
@media screen and (min-width: 992px) {
.subheader {
flex-direction: row;
align-items: center;
}
}
.subheader-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.subheader-button {
padding: 0.5rem 2.5rem;
font-weight: bold;
background-repeat: no-repeat;
background-position: right 0.7rem top 50%, 0 0;
background-size: 19px;
}
.subheader-button-active {
color: #000000;
background-color: #D3AA25;
background-image: url("/assets/theme_image/icon-close-panel.svg");
}
.subheader-panel {
background-color: var(--menu-button-bg-color);
z-index: 1;
width: 100%;
box-shadow: 0 5px 14px black;
max-height: calc(100vh - 100px);
overflow: auto;
}
.subheader-panel-wrapper {
padding: 45px 0;
color: var(--menu-text-color);
display: flex;
gap: 10px;
flex-direction: column;
}
@media screen and (min-width: 767px) {
.subheader-panel-wrapper {
flex-direction: row;
align-items: stretch;
justify-content: space-between;
}
}
.subheader-panel-item {
color: var(--menu-button-text-color);
}
@media (min-width: 992px) {
.subheader-panel-item.carte {
flex: 3;
}
}
@media (min-width: 767px) {
.subheader-panel-item.carte {
flex: 2;
}
}
@media (min-width: 767px) {
.subheader-panel-item.detail-capteur {
flex: 1;
}
}
.subheader-panel-flex {
display: flex;
gap: 10px;
align-items: baseline;
justify-content: space-between;
margin-bottom: 20px;
}
.subheader-panel-flex h3 {
margin: 0;
}
.subheader-panel-flex-right {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.subheader-panel-flex-right button {
height: 31px;
}
@media screen and (min-width: 767px) {
.subheader-separator {
display: block;
flex: 0 0 auto;
width: 1px;
background-color: rgba(255, 255, 255, 0.26);
}
}
.subheader-title {
font-size: 1.375rem;
font-weight: bold;
margin-bottom: 1.5rem;
color: var(--menu-button-text-color);
text-transform: uppercase;
}
.subheader-timerange {
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.subheader-timerange .odswidget-timerange__input {
background-color: transparent;
color: white;
border-radius: 0;
border-color: #D3AA25;
}
.subheader-select {
width: min(230px, 100%);
padding: 5px;
}
.subheader-text {
color: var(--menu-text-color);
}
.subheader-info {
color: var(--menu-text-color);
text-transform: uppercase;
font-weight: bold;
font-style: italic;
font-size: 1.1em;
}
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-from,
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-single,
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-to {
background-color: var(--main-color);
}
.subheader-panel .irs--flat .irs-from,
.subheader-panel .irs--flat .irs-to,
.subheader-panel .irs--flat .irs-single {
color: var(--menu-button-bg-color);
}
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-bar {
background-color: var(--menu-button-bg-color);
}
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-from:before,
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-single:before,
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-to:before {
border-top-color: var(--menu-button-bg-color);
}
.subheader-panel .odswidget-date-range-slider .irs--flat .irs-handle > i:first-child {
background-color: var(--menu-button-bg-color);
}
.subheader-panel .odswidget.odswidget-date-range-slider {
margin: 0 50px 10px;
}
/* Buttons
========================================================================== */
.subheader-button {
display: inline-block;
text-decoration: none;
cursor: pointer;
font-size: 1.1rem;
font-weight: normal;
color: var(--menu-button-bg-color);
background-color: var(--menu-button-text-color);
border: 1px solid var(--menu-button-bg-color);
padding: 0.3rem 1.5rem;
border-radius: 0px;
transition: all 0.2s;
}
.subheader-button-active {
color: var(--menu-button-text-color);
background-color: var(--menu-button-bg-color);
border: 1px solid var(--menu-button-text-color);
text-decoration: none;
}
.subheader-button:hover {
opacity: 0.65;
}
.subheader-button-large {
padding: 0.5rem 2rem;
}
/* Detail capteur */
.detail-capteur-content dt {
font-weight: 200;
}
.detail-capteur-content dd {
font-weight: 500;
margin-left: 1.5rem;
}
.detail-capteur-content img {
border: 2px solid var(--menu-button-text-color);
max-height: 200px;
object-fit: cover;
}
/* Section elements
========================================================================== */
.page-section {
padding: 4.5rem 1.5rem;
background: linear-gradient(180deg, white, #fcfcff);
}
.page-section.bg-white {
background: white;
}
/* Map */
#dot-icon path {
stroke: black;
}
/* Indicateur */
h2.indicateur {
padding: 4px 4px 4px 15px;
margin-top: 40px;
margin-bottom: 20px;
font-size: 2.5rem;
width: calc(100% + 20px);
color: var(--main-color);
background: var(--bg-color);
}
h2.indicateur .label {
font-size: 1.5rem;
font-weight: 400;
}
h2.indicateur ~ p {
font-size: 1.2rem;
margin-bottom: 15px;
}
.sous-indicateur {
margin-bottom: 30px;
border-left: solid 4px var(--main-color);
}
.sous-indicateur h3, .sous-indicateur p {
padding-left: 10px;
}
.sous-indicateur h3 {
font-size: 1.5rem;
}
.sous-indicateur p {
font-size: 1.2rem;
}
.indicateur-box {
padding: 4px;
background: var(--bg-color);
}
section:nth-child(even) h2.indicateur {
width: 100%;
margin-left: -20px;
padding-left: 20px;
}
@media screen and (max-width: 1169px) {
section:nth-child(even) .row {
display: flex;
flex-direction: column-reverse;
}
}
@media screen and (max-width: 1169px) {
section:nth-child(odd) h2.indicateur {
width: 100%;
}
}
@media screen and (max-width: 1169px) {
section:nth-child(even) h2.indicateur {
margin-left: 0;
}
}
/**
* License: MIT License
* Generated on 26 May 2021
* Author: Fpassaniti for Opendatasoft
* Version: 0.1
* Description: ods-chart CUSTOM CSS LIBRARY. Go to http://codelibrary.opendatasoft.com/widget-tricks/ods-chart-css/ for more information (doc & examples).
*/
.extralarge-y-values .highcharts-yaxis-labels text, .large-y-values .highcharts-yaxis-labels text {
transform: translate(0, 4px);
}
.hide-chart-legend .highcharts-legend-item span, .hide-chart-series .highcharts-series path.highcharts-graph, .hide-chart-series .highcharts-series rect, .hide-data-values .highcharts-data-label tspan, .hide-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .hide-tooltip-text .ods-highcharts__tooltip span, .hide-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .hide-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .hide-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .hide-x-legend .highcharts-xaxis tspan, .hide-x-values .highcharts-xaxis-labels span, .hide-x-values .highcharts-xaxis-labels text, .hide-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .hide-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line, .hide-y-legend .highcharts-yaxis tspan, .hide-y-values .highcharts-yaxis-labels span, .hide-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
display: none !important;
}
.highcharts-axis tspan, .highcharts-data-label tspan, .highcharts-label span, .highcharts-legend-item span, .highcharts-xaxis-labels text, .highcharts-yaxis-labels text {
font-family: Gotham-book, Arial, sans-serif !important;
}
.name-tooltip-value .ods-highcharts__tooltip b, .small-chart-legend .highcharts-legend-item span, .small-data-values .highcharts-data-label tspan, .small-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .small-tooltip-text .ods-highcharts__tooltip span, .small-x-legend .highcharts-xaxis tspan, .small-x-values .highcharts-xaxis-labels span, .small-x-values .highcharts-xaxis-labels text, .small-y-legend .highcharts-yaxis tspan, .small-y-values .highcharts-yaxis-labels span, .small-y-values .highcharts-yaxis-labels text {
font-size: 12px !important;
}
.medium-chart-legend .highcharts-legend-item span, .medium-data-values .highcharts-data-label tspan, .medium-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .medium-tooltip-text .ods-highcharts__tooltip span, .medium-x-legend .highcharts-xaxis tspan, .medium-x-values .highcharts-xaxis-labels span, .medium-x-values .highcharts-xaxis-labels text, .medium-y-legend .highcharts-yaxis tspan, .medium-y-values .highcharts-yaxis-labels span, .medium-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
font-size: 14px !important;
}
.large-chart-legend .highcharts-legend-item span, .large-data-values .highcharts-data-label tspan, .large-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .large-tooltip-text .ods-highcharts__tooltip span, .large-x-legend .highcharts-xaxis tspan, .large-x-values .highcharts-xaxis-labels span, .large-x-values .highcharts-xaxis-labels text, .large-y-legend .highcharts-yaxis tspan, .large-y-values .highcharts-yaxis-labels span, .large-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
font-size: 16px !important;
}
.extralarge-chart-legend .highcharts-legend-item span, .extralarge-data-values .highcharts-data-label tspan, .extralarge-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .extralarge-tooltip-text .ods-highcharts__tooltip span, .extralarge-x-legend .highcharts-xaxis tspan, .extralarge-x-values .highcharts-xaxis-labels span, .extralarge-x-values .highcharts-xaxis-labels text, .extralarge-y-legend .highcharts-yaxis tspan, .extralarge-y-values .highcharts-yaxis-labels span, .extralarge-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
font-size: 18px !important;
}
.light-chart-legend .highcharts-legend-item span, .light-data-values .highcharts-data-label tspan, .light-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .light-tooltip-text .ods-highcharts__tooltip span, .light-x-legend .highcharts-xaxis tspan, .light-x-values .highcharts-xaxis-labels span, .light-x-values .highcharts-xaxis-labels text, .light-y-legend .highcharts-yaxis tspan, .light-y-values .highcharts-yaxis-labels span, .light-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
font-weight: 100 !important;
}
.name-tooltip-value .ods-highcharts__tooltip b, .normal-chart-legend .highcharts-legend-item span, .normal-data-values .highcharts-data-label tspan, .normal-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .normal-tooltip-text .ods-highcharts__tooltip span, .normal-x-legend .highcharts-xaxis tspan, .normal-x-values .highcharts-xaxis-labels span, .normal-x-values .highcharts-xaxis-labels text, .normal-y-legend .highcharts-yaxis tspan, .normal-y-values .highcharts-yaxis-labels span, .normal-y-values .highcharts-yaxis-labels text {
font-weight: 400 !important;
}
.bold-chart-legend .highcharts-legend-item span, .bold-data-values .highcharts-data-label tspan, .bold-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .bold-tooltip-text .ods-highcharts__tooltip span, .bold-x-legend .highcharts-xaxis tspan, .bold-x-values .highcharts-xaxis-labels span, .bold-x-values .highcharts-xaxis-labels text, .bold-y-legend .highcharts-yaxis tspan, .bold-y-values .highcharts-yaxis-labels span, .bold-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
font-weight: 600 !important;
}
.lightgrey-chart-legend .highcharts-legend-item span, .lightgrey-data-values .highcharts-data-label tspan, .lightgrey-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .lightgrey-tooltip-text .ods-highcharts__tooltip span, .lightgrey-x-legend .highcharts-xaxis tspan, .lightgrey-x-values .highcharts-xaxis-labels span, .lightgrey-x-values .highcharts-xaxis-labels text, .lightgrey-y-legend .highcharts-yaxis tspan, .lightgrey-y-values .highcharts-yaxis-labels span, .lightgrey-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
fill: #565656 !important;
color: #565656 !important;
}
.darkgrey-chart-legend .highcharts-legend-item span, .darkgrey-data-values .highcharts-data-label tspan, .darkgrey-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .darkgrey-tooltip-text .ods-highcharts__tooltip span, .darkgrey-x-legend .highcharts-xaxis tspan, .darkgrey-x-values .highcharts-xaxis-labels span, .darkgrey-x-values .highcharts-xaxis-labels text, .darkgrey-y-legend .highcharts-yaxis tspan, .darkgrey-y-values .highcharts-yaxis-labels span, .darkgrey-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
fill: #333 !important;
color: #333 !important;
}
.black-chart-legend .highcharts-legend-item span, .black-data-values .highcharts-data-label tspan, .black-tooltip-text .highcharts-tooltip .highcharts-tooltip-container, .black-tooltip-text .ods-highcharts__tooltip span, .black-x-legend .highcharts-xaxis tspan, .black-x-values .highcharts-xaxis-labels span, .black-x-values .highcharts-xaxis-labels text, .black-y-legend .highcharts-yaxis tspan, .black-y-values .highcharts-yaxis-labels span, .black-y-values .highcharts-yaxis-labels text, .name-tooltip-value .ods-highcharts__tooltip b {
fill: #000 !important;
color: #000 !important;
}
.small-chart-legend-dash .highcharts-legend-item path, .small-chart-series .highcharts-series path.highcharts-graph, .small-chart-series .highcharts-series rect, .small-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .small-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .small-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .small-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .small-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke-width: 0.8px !important;
}
.medium-chart-legend-dash .highcharts-legend-item path, .medium-chart-series .highcharts-series path.highcharts-graph, .medium-chart-series .highcharts-series rect, .medium-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .medium-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .medium-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .medium-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .medium-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke-width: 1.5px !important;
}
.large-chart-legend-dash .highcharts-legend-item path, .large-chart-series .highcharts-series path.highcharts-graph, .large-chart-series .highcharts-series rect, .large-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .large-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .large-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .large-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .large-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke-width: 3px !important;
}
.extralarge-chart-legend-dash .highcharts-legend-item path, .extralarge-chart-series .highcharts-series path.highcharts-graph, .extralarge-chart-series .highcharts-series rect, .extralarge-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .extralarge-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .extralarge-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .extralarge-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .extralarge-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke-width: 5px !important;
}
.lightgrey-chart-series .highcharts-series path.highcharts-graph, .lightgrey-chart-series .highcharts-series rect, .lightgrey-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .lightgrey-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .lightgrey-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .lightgrey-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .lightgrey-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke: #565656 !important;
}
.lightgrey-chart-legend-dash .highcharts-legend-item path {
stroke-width: #565656 !important;
}
.darkgrey-chart-series .highcharts-series path.highcharts-graph, .darkgrey-chart-series .highcharts-series rect, .darkgrey-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .darkgrey-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .darkgrey-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .darkgrey-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .darkgrey-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke: #333 !important;
}
.darkgrey-chart-legend-dash .highcharts-legend-item path {
stroke-width: #333 !important;
}
.black-chart-series .highcharts-series path.highcharts-graph, .black-chart-series .highcharts-series rect, .black-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line, .black-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick, .black-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line, .black-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line, .black-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke: #000 !important;
}
.black-chart-legend-dash .highcharts-legend-item path {
stroke-width: #000 !important;
}
.hide-chart-legend-dash .highcharts-legend-item path {
stroke-width: none !important;
}
.small-chart-legend-circle g.highcharts-legend-item rect {
width: 10px !important;
height: 10px !important;
x: 5 !important;
y: 5 !important;
}
.medium-chart-legend-circle g.highcharts-legend-item rect {
width: 12px !important;
height: 12px !important;
x: 3 !important;
y: 4 !important;
}
.large-chart-legend-circle g.highcharts-legend-item rect {
width: 15px !important;
height: 15px !important;
x: 2 !important;
y: 2 !important;
}
.extralarge-chart-legend-circle g.highcharts-legend-item rect {
width: 18px !important;
height: 18px !important;
x: 0 !important;
y: 0 !important;
}
.centered-tooltip .highcharts-tooltip .highcharts-tooltip-container {
text-align: center;
}
.centered-tooltip .ods-highcharts__tooltip {
justify-content: center;
}
.no-background rect.highcharts-background, .no-bg rect.highcharts-background, .remove-background rect.highcharts-background, .transparent-background rect.highcharts-background {
fill: transparent !important;
}
.ods-highcharts__tooltip {
align-items: center;
}
g.highcharts-legend-item rect {
rx: 100%;
ry: 100%;
}
.trend .highcharts-axis,
.trend .highcharts-yaxis-labels,
.trend .highcharts-ygrid,
.trend .highcharts-legend,
.trend .highcharts-yaxis-grid path:not(:first-child),
.trend .highcharts-label.highcharts-data-label:not(:first-child):not(:last-child) {
display: none;
}
.trend .highcharts-label.highcharts-data-label {
opacity: 1;
visibility: inherit;
}
.trend {
padding-top: 15px;
background: white;
}
.trend .chartplaceholder {
height: 280px;
width: 100%;
}
.trend path.highcharts-area {
fill: transparent;
}
.trend text {
font-size: 13px !important;
}
/*path.highcharts-graph {
stroke: #d4d700;
}*/
.top5-chart {
height: 350px;
margin: 0 auto;
}
.top5-chart .highcharts-xaxis path.highcharts-axis-line {
stroke: var(--bg-color);
stroke-width: 4px;
transform: translate(-2px, 0);
}
/* Custom Tabs
========================================================================== */
.tabs {
display: flex;
flex-wrap: wrap;
margin: 30px 15px;
}
.tabs .tab {
font-size: 1.2rem;
padding: 0 15px 5px;
}
.tabs .tab:hover {
font-weight: 600;
}
.tabs .tab.tab__active {
font-weight: 600;
border-bottom: 4px solid var(--secondary-color);
}
.tabs-content .tab-content {
position: relative;
}
.odswidget-spinner.odswidget-spinner--svg.heatmap {
height: 4em;
position: absolute;
left: 50%;
top: 40%;
z-index: 0;
}
.vega-chart {
z-index: 1;
position: relative;
background: white;
}
/* FIX Container for CV */
@media (min-width: 768px) {
.container {
width: inherit;
max-width: 740px;
}
}
@media (min-width: 992px) {
.container {
width: inherit;
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
width: inherit;
max-width: 1160px;
}
}