Guillaume RYCKELYNCK c6c2ee9c04 first commit
2024-06-22 22:00:42 +02:00

185 lines
7.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>DataGrandEst dataviz components - Example</title>
<link rel='icon' type='image/png' href='favicon.png'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<!-- <link rel="stylesheet" href="dge-components/style.css"> -->
</head>
<body>
<div class="container my-3">
<div class="row mt-1 mb-5">
<div class="col-12 text-center">
<h1>SDI CC Report dashboard</h1>
</div>
</div>
<div class="row my-2">
<div class="col-12">
<h2>WMS DataGrandEst</h2>
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col">
<dge-figure
id="dge-figure-1"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_report.csv"
fields="nb_errors"
iconname="bug-fill"
operation="sum|nb_errors"
unit="errors"
filter=""
localcss="0"
text="" />
</div>
<div class="col">
<dge-figure
id="dge-figure-1"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_report.csv"
fields="nb_layers"
iconname="layers-fill"
operation="sum|nb_layers"
unit="layers"
filter=""
localcss="0"
text="" />
</div>
<div class="col">
<dge-figure
id="dge-figure-1"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_report.csv"
fields="nb_workspaces"
iconname="folder-fill"
operation="sum|nb_workspaces"
unit="workspaces"
filter=""
localcss="0"
text="" />
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col-6">
<dge-chart id="dge-chart-1"
title="Taux d'erreurs des layers"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_report.csv"
fields="nb_layers,nb_layers_ok,nb_layers_error"
reverse="true"
x="nb_layers"
y="nb_layers_ok,OK|nb_layers_error,ERROR"
series="Layers"
chart="pie"
dldisplay="true" dldisplaylimit="0" dlcolor="#eee" dlalign="center" dlanchor="center" dlformat="percent,2"
dlunit="%"
animation="duration:5000"
colors="rgba(2,150,2,0.5);rgba(245,40,40,0.5)" />
</div>
<div class="col-6">
<div class="row">
<div class="col-12">
<dge-figure
id="dge-figure-1"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_report.csv"
fields="nb_layers_ok"
iconname="hand-thumbs-up-fill"
operation="sum|nb_layers_ok"
unit="layers OK"
filter=""
localcss="0"
text="" />
</div>
<div class="col-12">
<dge-figure
id="dge-figure-1"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_report.csv"
fields="nb_layers_error"
iconname="hand-thumbs-down-fill"
operation="sum|nb_layers_error"
unit="layers en erreur"
filter=""
localcss="0"
text="" />
</div>
</div>
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col-6">
<dge-chart id="dge-chart-1"
title="Nb. de layers par nb. d'erreur"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_layers.csv"
fields="name"
x="nb_errors"
y="COUNT(name),Layers"
groupby="nb_errors"
orderby="nb_errors"
series="Nb. layers"
colors="rgba(200,40,245,0.5)"
chart="bar" />
</div>
<div class="col-6">
<dge-chart id="dge-chart-1"
title="Nb. de layers par type d'erreur"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_errors.csv"
fields="name"
x="error_code"
y="COUNT(name),Layers"
groupby="error_code"
orderby="error_code"
series="Nb. layers"
colors="rgba(40,100,245,0.5)"
chart="bar" />
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col">
<dge-chart id="dge-chart-1"
title="Nb. layers par workspace"
attribution="text:DataGrandEst;url:https://www.datagrandest.fr"
api="csv"
url="./wms_ws.csv"
fields="workspace,nb_layers"
x="workspace"
y="nb_layers,layers"
orderby="workspace"
series="Nb. layers"
colors="rgba(40,245,155,0.5)"
chart="bar" />
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script defer src='https://datagrandest.github.io/dge-dataviz-components/4.6.0/dist/4.6.0/dge-all.js'></script>
</body>
</html>