Skip to content

Commit

Permalink
Citation file
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasdenecker
thomasdenecker committed Jan 6, 2023
1 parent 9ce6255 commit 908619a
Showing 1 changed file with 79 additions and 16 deletions.
95 changes: 79 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,85 @@
<title>Formation IBISA</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.0.7/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.0/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" type="image/png" href="https://www.france-bioinformatique.fr/wp-content/uploads/logo-ifb-couleur.svg" />
<link rel="shortcut icon" type="image/png"
href="https://www.france-bioinformatique.fr/wp-content/uploads/logo-ifb-couleur.svg" />

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</head>

<body>
<div id="app">
<v-app>
<v-app-bar title="Formation IBISA">
<v-btn stacked variant="tonal" href="https://github.com/IFB-ElixirFr/2023_01_formation_IBISA"
<v-btn stacked href="https://github.com/IFB-ElixirFr/2023_01_formation_IBISA"
target="_blank">
<i class="fa-brands fa-github mb-1" style="font-size: 30px;"></i>
GitHub
</v-btn>
</v-app-bar>
<v-main class="fill-height text-center">
<h1 class="my-4">Évaluation de notre solution de stockage de données</h1>
<br>
<div id="main" style="width: 100%;height:90%;" class=" ma-4"></div>
<v-card color="basil" class="fill-height">
<v-card-title class="text-center justify-center py-6">
<h1>
Évaluation de notre solution de stockage de données
</h1>
</v-card-title>

<v-tabs v-model="tab" bg-color="transparent" grow>
<v-tab v-for="item in items" :key="item" :value="item">
{{ item }}
</v-tab>
</v-tabs>

<v-window v-model="tab" class="fill-height">
<v-window-item v-for="item in items" :key="item" :value="item" class="fill-height">
<v-card color="basil" class="fill-height">
<v-card-text class="fill-height">
<div v-if="item=='Radar'" id="main" style="width: 100%;height:90%;" class=" ma-4">
</div>
<div v-else-if="item=='Tab'">
<table class="table">
<thead>
<tr>
<th v-for="val in colHeaders" class="text-left">
{{ val }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(val, indextr2) in dataTable" :key="indextr2">
<td v-for="(v, index2) in val" :key="index2"> {{ v }} </td>
</tr>
</tbody>
</table>
</div>
<div v-else>
<p>
Cette page permet d'évaluer votre solution de stockage à travers les
indicateurs suivants
</p>
<v-list lines="one">
<v-list-item v-for="item in colHeaders" :key="item"
:title="item"></v-list-item>
</v-list>

</div>
</v-card-text>
</v-card>
</v-window-item>
</v-window>
</v-card>

</v-main>
<v-footer app class="primary" dark flat>
<v-spacer></v-spacer>
Expand All @@ -42,21 +98,27 @@ <h1 class="my-4">Évaluation de notre solution de stockage de données</h1>
</v-footer>
</v-app>
</div>

<script src="'./table.vue'" type="module"></script>
<script>
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const vuetify = createVuetify();

const app = createApp({
data() {
return {
urlFile: "https://docs.google.com/spreadsheets/d/e/2PACX-1vQA78A9MBaU91UUC0kJRpUo5UD255nAdXncMNHAWfnVYljfY4qv8nElTIe6KDjdUzX1iwJeHMyc3TYl/pub?gid=2069355443&single=true&output=csv"
dataTable: [],
colHeaders: [],
tab: 'Radar',
items: ['Radar', 'Tab', 'About'],
urlFile: "https://docs.google.com/spreadsheets/d/e/2PACX-1vQA78A9MBaU91UUC0kJRpUo5UD255nAdXncMNHAWfnVYljfY4qv8nElTIe6KDjdUzX1iwJeHMyc3TYl/pub?gid=2069355443&single=true&output=csv",

}
},
created() {
Papa.parse(this.urlFile, {
var data = Papa.parse(this.urlFile, {
download: true,
complete: function (results) {
complete: (results) => {
let data = results.data;
let indicator = [];
let legend = [];
Expand All @@ -67,6 +129,7 @@ <h1 class="my-4">Évaluation de notre solution de stockage de données</h1>
temp['name'] = element;
temp['max'] = 5;
indicator.push(temp)
this.colHeaders.push(element);
}

var dataSeries = [];
Expand All @@ -75,9 +138,11 @@ <h1 class="my-4">Évaluation de notre solution de stockage de données</h1>
temp['value'] = element.slice(2)
temp['name'] = element[1]
legend.push(element[1])
this.dataTable.push(element.slice(2))
dataSeries.push(temp);
}


// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));

Expand Down Expand Up @@ -108,11 +173,9 @@ <h1 class="my-4">Évaluation de notre solution de stockage de données</h1>
}
})
},
methods: {

},
})
app.use(vuetify).mount('#app')
app.use(vuetify).mount('#app');

</script>
</body>

Expand Down

0 comments on commit 908619a

Please sign in to comment.