1
0
forked from PGL/Clyde

proposition of some fixes

This commit is contained in:
Debucquoy Anthony 2024-04-05 09:44:41 +02:00
parent 3d78851b29
commit b8b193f344
Signed by untrusted user: tonitch
GPG Key ID: A78D6421F083D42E

View File

@ -6,10 +6,11 @@
----------------------------------------------------->
<script setup>
import { ref } from "vue";
import { ref, reactive } from "vue";
const input = ref("");
const statsOf = ref("");
const statsBy = ref("");
let chart;
const jsonMockViewsByYears= [
{label: "2004", y:4},
@ -39,9 +40,7 @@ function inputKeyUp() {
}
}
const mydata = {
chart:null,
options: {
const options = reactive({
backgroundColor:null,
theme: "light2",
animationEnabled: true,
@ -57,33 +56,21 @@ const mydata = {
indexLabelFontColor: "white",
toolTipContent:
"<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
},
],
},
styleOptions: {
width: "100%",
height: "100%",
},
methods : {
chartInstance(chart){
mydata.chart = chart;
},
update(){
mydata.options.title = {
}]
});
function update(){
options.title = {
fontColor: "white",
text: statsOf.value + " By "+ statsBy.value,
}
if (statsOf.value === "views" && statsBy.value === "years") {
console.log("yeasear")
mydata.options.data[0].dataPoints = jsonMockViewsByYears;
options.data[0].dataPoints = jsonMockViewsByYears;
}
console.log(mydata.options.data)
mydata.options.title.text = statsOf.value + " By "+ statsBy.value;
mydata.chart.render()
options.title.text = statsOf.value + " By "+ statsBy.value;
chart.render()
}
}
};
</script>
<template>
@ -106,7 +93,7 @@ const mydata = {
<div id="stats">
<div class="surrounded">
Stat type :
<select @change="mydata.methods.update()" name="stats" id="stats-select" v-model="statsOf">
<select @change="update()" id="stats-select" v-model="statsOf">
<option value="views">Views</option>
<option value="co-authors">Co-authors</option>
<option value="articles">Articles</option>
@ -115,21 +102,21 @@ const mydata = {
</div>
<div class="surrounded">
Class by:
<select @change="mydata.methods.update()" name="classedBy" id="classed-select" v-model="statsBy">
<select @change="update()" id="classed-select" v-model="statsBy">
<option selected="selected" value="years">Years</option>
<option value="months">Months</option>
<option value="topics">Topics</option>
</select>
</div>
<div id="statsPie">
<CanvasJSChart :options="mydata.options" :style="mydata.styleOptions" @chart-ref="mydata.methods.chartInstance"/>
<CanvasJSChart :options="options" id=chart @chart-ref="c => chart = c "/>
</div>
</div>
<div id="articles">
<input
type="text"
id="search-input"
:onkeyup="inputKeyUp()"
@keyup="inputKeyUp()"
placeholder="search articles"
v-model="input"
/>
@ -241,4 +228,9 @@ const mydata = {
#myUL li a:hover:not(.header) {
background-color: #eee;
}
#Chart{
width: "100%";
height: "100%";
}
</style>