Blank
A basic version without color theming that use vanilla widgets. The widgets can be configured normally, but cannot be theme.
Dataset in use: monitoring-copy (See it on userclub domain)
Fields in use:
| dataset_id | timestamp (datetime) | size_res (numeric) | user_id | query_text | 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 |
<div ods-datetime="now">
<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>
</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-timerange context="stats"
date-format="DD MMM YYYY"
precision="day"
default-from="{{ (now|momentadd:'months':-3)|moment:'YYYY-MM-DD' }}"
default-to="{{ now|moment:'YYYY-MM-DD' }}"
stats-time-field="timestamp"
download-time-field="timestamp"
searchnoresult-time-field="timestamp"
queryresult-time-field="timestamp"
users-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">
<h2 class="title">
Portal's activity.
</h2>
<p class="subtitle">Count of daily API calls from {{ startDate|date:longDate }} to {{ endDate|date:longDate }}. See full <a href="/explore/dataset/ods-api-monitoring/?source=monitoring&disjunctive.dataset_id"> activity log.</a>
</p>
<ods-chart 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" color="#26ADFF" label-y="Count API calls" scientific-display="true" display-values="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</div>
<div class="col-md-6">
<ods-dataset-context context="download"
download-dataset="ods-api-monitoring"
download-source="monitoring"
download-parameters="{'refine.action': 'download'}"
>
<div class="card z-depth-1">
<h2 class="title">
Number of exports
</h2>
<p class="subtitle">Daily number of full dataset download, in any format.</p>
<ods-chart timescale="day"
single-y-axis="true"
align-month="true"
label-x="Automated download (bot)?">
<ods-chart-query context="download"
field-x="timestamp"
maxpoints="0"
timescale="day"
series-breakdown="bot"
category-colors="{'TRUE':'#26ADFF', 'FALSE':'#142E7B'}"
display-legend="true">
<ods-chart-serie expression-y="size_res"
chart-type="spline"
colors="'range-custom'"
function-y="COUNT"
label-y="Count exports"
scientific-display="true"
display-values="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</ods-dataset-context>
</div>
</section>
<section class="row">
<div class="col-md-6">
<div class="card z-depth-1">
<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>
<ods-chart>
<ods-chart-query context="stats" field-x="user_id" maxpoints="10" sort="serie1-1" display-legend="true">
<ods-chart-serie chart-type="pie" function-y="COUNT" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</div>
<div class="col-md-6">
<ods-dataset-context context="download"
download-dataset="ods-api-monitoring"
download-source="monitoring"
download-parameters="{'refine.action': 'download'}"
>
{{ download.parameters['q.timerange'] = stats.parameters['q.timerange'] ; '' }}
{{ download.parameters['refine.dataset_id'] = stats.parameters['refine.dataset_id'] ; '' }}
<div class="card z-depth-1">
<h2 class="title" >
Users ranked by download count
</h2>
<p class="subtitle">Most active users only on the download action.</p>
<ods-chart>
<ods-chart-query context="download" field-x="user_id" maxpoints="10" sort="serie1-1" display-legend="true">
<ods-chart-serie chart-type="pie" function-y="COUNT" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</ods-dataset-context>
</div>
</section>
<section class="row">
<div class="col-md-6">
<ods-dataset-context context="noresults"
noresults-dataset="ods-api-monitoring"
noresults-source="monitoring"
noresults-parameters="{'q':'nhits=0'}"
>
{{ noresults.parameters['q.timerange'] = stats.parameters['q.timerange'] ; '' }}
{{ noresults.parameters['refine.dataset_id'] = stats.parameters['refine.dataset_id'] ; '' }}
<div class="card z-depth-1">
<h2 class="title">
Text searches leading to no result
</h2>
<table class="data-table">
<thead>
<tr>
<th> Rank </th>
<th>Request</th>
<th>Occurrences</th>
</tr>
</thead>
<tbody>
<tr ods-facet-results="emptyqueriesopen"
ods-facet-results-context="noresults"
ods-facet-results-facet-name="query_text"
ng-repeat="(i,emptyquery) in emptyqueriesopen.slice(0,9)"
ng-show="emptyquery.count>5"
>
<td style="text-align:center;">{{ i+1 }}</td>
<td style="width: 100%">{{ emptyquery.name }}</td>
<td>{{ emptyquery.count }}</td>
</tr>
</tbody>
</table>
</div>
</ods-dataset-context>
</div>
<div class="col-md-6">
<ods-dataset-context context="queries"
queries-dataset="ods-api-monitoring"
queries-source="monitoring"
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">
<h2 class="title">
Most frequent queries
</h2>
<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">
<h2 class="title" >
Most active pages
</h2>
<p></p>
<ods-chart>
<ods-chart-query context="stats" field-x="attributes" maxpoints="7" sort="serie1-1">
<ods-chart-serie chart-type="bar" function-y="COUNT" color="#26ADFF" 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">
<h2 class="title">
Popular actions
</h2>
<ods-chart 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" color="#26ADFF" label-y="Sum of API calls" 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">
<h2 class="title" >
Origin of users on Company's Data Hub
</h2>
<ods-map scroll-wheel-zoom="false"
location="5,47.27923,2.94434"
basemap="jawg.light"
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="#26ADFF" 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>
</div>
/* Import des autres stylesheets css*/
body {
background-color: #ffffff;
}
@media screen and (max-width: 992px) {
body {
padding: 0;
}
}
/* 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-charts {
margin: 0 -12px;
}
/* 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: -1em;
}
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;
}
@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:hover {
/*! border: 1px solid #33629C; */
}
.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 lightgrey;
}
.filter .odswidget-select-dropdown-menu {
top: 32px;
}
.filter .odswidget-select-input-container {
border: none;
}
@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 {
border-radius: 4px;
padding: 16px;
height: 100%;
}
.data-table {
width: 100%;
}
.data-table th {
background-color: #f2f3f8;
padding: 8px;
color: #142e7b;
font-weight: 300;
white-space: nowrap;
}
.data-table td a {
font-weight: 300;
}
.data-table td {
padding: 8px;
max-width: 265px;
overflow: hidden;
text-overflow: ellipsis;
}
.data-table tr {
border-top: 1px solid #dee5ef;
}
.data-table tbody tr:nth-child(-n + 3) * {
font-weight: 500;
}