1
0
forked from PGL/Clyde

adding the dependance

This commit is contained in:
Bartha Maxime 2024-03-30 13:10:11 +01:00
parent c1b2742a8f
commit 91ee3adbcd
4 changed files with 51 additions and 2 deletions

View File

@ -8,6 +8,7 @@
"name": "clyde", "name": "clyde",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@canvasjs/vue-charts": "^1.0.4",
"vite-plugin-top-level-await": "^1.4.1", "vite-plugin-top-level-await": "^1.4.1",
"vue": "^3.4.15", "vue": "^3.4.15",
"vue3-toastify": "^0.2.1" "vue3-toastify": "^0.2.1"
@ -29,6 +30,20 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/@canvasjs/charts": {
"version": "3.7.45",
"resolved": "https://registry.npmjs.org/@canvasjs/charts/-/charts-3.7.45.tgz",
"integrity": "sha512-FPMX8wn+PEHzAa/GLBsL5lWB81AzKZLw51t7SiSUjMbtUN5/OIrmDcwUTw+53/Bbdd9gm2LLmxAdZsQ75JI31g=="
},
"node_modules/@canvasjs/vue-charts": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@canvasjs/vue-charts/-/vue-charts-1.0.4.tgz",
"integrity": "sha512-PzOA8xeb/f68a39uoFZNn843dGPU36bsqmbO5DWjP7k6FwkK5AeGkYa/H3RHC02Xc6mG68vg9aFNj2Fyqhu4UQ==",
"dependencies": {
"@canvasjs/charts": "^3.7.5",
"vue": ">=3.0.0"
}
},
"node_modules/@esbuild/aix-ppc64": { "node_modules/@esbuild/aix-ppc64": {
"version": "0.19.12", "version": "0.19.12",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",

View File

@ -9,6 +9,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@canvasjs/vue-charts": "^1.0.4",
"vite-plugin-top-level-await": "^1.4.1", "vite-plugin-top-level-await": "^1.4.1",
"vue": "^3.4.15", "vue": "^3.4.15",
"vue3-toastify": "^0.2.1" "vue3-toastify": "^0.2.1"

View File

@ -1,5 +1,33 @@
<script setup> <script setup>
import CanvasJSChart from "@canvasjs/vue-charts";
const chartData ={
options: {
theme: "light2",
animationEnabled: true,
title:{
text: "Visitors By Channel"
},
data: [{
type: "pie",
indexLabel: "{label} (#percent%)",
yValueFormatString: "#,##0",
toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
dataPoints: [
{ label: "Organic Traffic", y: 130631 },
{ label: "Direct", y: 28874 },
{ label: "Referral", y: 15467 },
{ label: "Social", y: 10543 },
{ label: "Email", y: 5613 },
{ label: "Others", y: 8492 }
]
}]
},
styleOptions: {
width: "100%",
height: "360px"
}
}
</script> </script>
@ -52,7 +80,9 @@
<option value="months">Months</option> <option value="months">Months</option>
<option value="topics">Topics</option> <option value="topics">Topics</option>
</select> </select>
</div>
<div id="statsPie">
<CanvasJSChart :data="chartData"/>

View File

@ -4,5 +4,8 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import CanvasJSChart from '@canvasjs/vue-charts';
createApp(App).mount('#app') const app = createApp(App);
app.use(CanvasJSChart);
app.mount('#app');