-
Notifications
You must be signed in to change notification settings - Fork 97
Assistance Needed with VueUiDashboard and Vue Composition API Integration #34
Answered
by
graphieros
necatibektass
asked this question in
Q&A
-
``Hello,
I have a question regarding Vue Data UI. I am trying to use the VueUiDashboard component with the Vue Composition API. I have read the documentation and tried to implement it, but I noticed that this is the only component that doesn't work.
Could you please assist me with this issue?
Thank you
<template>
<VueUiDashboard :dataset="dataset" :config="config" @change="changeDashboard($event)" />
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { VueUiDashboard } from 'vue-data-ui';
import { VueUiDonut } from 'vue-data-ui';
const config = ref({
"style":
{
"board": {
"backgroundColor":"#FFFFFF",
"color":"#CCCCCC",
"aspectRatio":"1/1.4141",
"border":"1px solid #e1e5e8"
},
"item":{
"backgroundColor":"#FFFFFF",
"borderColor":"#e1e5e8"
},
"resizeHandles":{
"backgroundColor":"#00f186",
"border":"none"
}
},
"allowPrint":true
});
const myDonutConfig =ref({
"useCssAnimation": true,
"useBlurOnHover": true,
"style": {
"fontFamily": "inherit",
"chart": {
"useGradient": true,
"gradientIntensity": 40,
"backgroundColor": "#FFFFFF",
"color": "#1A1A1A",
"layout": {
"labels": {
"dataLabels": {
"show": true,
"hideUnderValue": 3,
"prefix": "",
"suffix": ""
},
"value": {
"show": true,
"rounding": 0
},
"percentage": {
"color": "#1A1A1A",
"bold": true,
"fontSize": 18
},
"name": {
"color": "#1A1A1A",
"bold": false,
"fontSize": 14
},
"hollow": {
"show": true,
"total": {
"show": true,
"bold": false,
"fontSize": 18,
"color": "#AAAAAA",
"text": "Total",
"offsetY": 0,
"value": {
"color": "#1A1A1A",
"fontSize": 18,
"bold": true,
"prefix": "",
"suffix": "",
"offsetY": 0,
"rounding": 0
}
},
"average": {
"show": true,
"bold": false,
"color": "#AAAAAA",
"fontSize": 18,
"text": "Average",
"offsetY": 0,
"value": {
"color": "#1A1A1A",
"fontSize": 18,
"bold": true,
"prefix": "",
"suffix": "",
"offsetY": 0,
"rounding": 0
}
}
}
},
"donut": {
"strokeWidth": 64,
"borderWidth": 1
}
},
"legend": {
"show": true,
"backgroundColor": "#FFFFFF",
"color": "#1A1A1A",
"fontSize": 16,
"bold": false,
"roundingValue": 0,
"roundingPercentage": 0
},
"title": {
"text": "Title",
"color": "#1A1A1A",
"fontSize": 20,
"bold": true,
"subtitle": {
"text": "",
"color": "#A1A1A1",
"fontSize": 16,
"bold": false
}
},
"tooltip": {
"show": true,
"backgroundColor": "#FFFFFF",
"color": "#1A1A1A",
"fontSize": 14,
"showValue": true,
"roundingValue": 0,
"showPercentage": true,
"roundingPercentage": 0
}
}
},
"userOptions": {
"show": true
},
"table": {
"show": false,
"responsiveBreakpoint": 400,
"columnNames": {
"series": "Series",
"value": "Value",
"percentage": "Percentage"
},
"th": {
"backgroundColor": "#FFFFFF",
"color": "#1A1A1A",
"outline": "none"
},
"td": {
"backgroundColor": "#FFFFFF",
"color": "#1A1A1A",
"outline": "none",
"roundingValue": 0,
"roundingPercentage": 0
}
}
});
const myDonutDataset = ref([
{
"name": "series 1",
"values": [
30
],
"color": "#42d392"
},
{
"name": "series 2",
"values": [
70
],
"color": "#6376DD"
}
]);
const dataset = ref([{
width:35,
height: 25,
left:2,
top: 2,
component: 'VueUiDonut',
props: {
config: myDonutConfig,
dataset: myDonutDataset
}
}]);
const changeDashboard = (event) => {
console.log(event);
}
</script>
Beta Was this translation helpful? Give feedback.
All reactions
Answered by
graphieros
Jun 3, 2024
You need to use scoped slots to display the components on the dashboard.
The documentation currently lacks a concrete example.
Here is a corrected version of your code:
<template> <VueUiDashboard :dataset="dataset" :config="config" @change="changeDashboard($event)"> <template #content="{ item }"> <component :is="item.component" v-bind="item.props"/> </template> </VueUiDashboard> </template> <script setup> import { ref, onMounted, watch, computed } from 'vue' import { VueUiDashboard } from 'vue-data-ui'; import { VueUiDonut } from 'vue-data-ui'; const config = ref( { style: { board: { backgroundColor: "#FFFFFF",
Replies: 5 comments
-
Hey :)
Thanks for trying the lib!
Try adding an id attribute to the dataset item. Also you need to pass myDonutConfig.value & myDonutDataset.value as they are declared as refs
const dataset = ref([{ id: 1, width:35, height: 25, left:2, top: 2, component: 'VueUiDonut', props: { config: myDonutConfig.value, dataset: myDonutDataset.value } }]);
Let me know if this works
Cheers
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
-
I tried it, but the issue still persists. When I hover over the screen, I can see the size of the item, but its content doesn't load. I'm using the latest version.
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
-
You need to use scoped slots to display the components on the dashboard.
The documentation currently lacks a concrete example.
Here is a corrected version of your code:
<template> <VueUiDashboard :dataset="dataset" :config="config" @change="changeDashboard($event)"> <template #content="{ item }"> <component :is="item.component" v-bind="item.props"/> </template> </VueUiDashboard> </template> <script setup> import { ref, onMounted, watch, computed } from 'vue' import { VueUiDashboard } from 'vue-data-ui'; import { VueUiDonut } from 'vue-data-ui'; const config = ref( { style: { board: { backgroundColor: "#FFFFFF", color: "#CCCCCC", aspectRatio: "1/1.4141", border: "1px solid #e1e5e8" }, item: { backgroundColor: "#FFFFFF", borderColor: "#e1e5e8" }, resizeHandles: { backgroundColor: "#42d392", border: "none" } }, allowPrint: true } ) const myDonutConfig = ref({ "useCssAnimation": true, "useBlurOnHover": true, "style": { "fontFamily": "inherit", "chart": { "useGradient": true, "gradientIntensity": 40, "backgroundColor": "#FFFFFF", "color": "#1A1A1A", "layout": { "labels": { "dataLabels": { "show": true, "hideUnderValue": 3, "prefix": "", "suffix": "" }, "value": { "show": true, "rounding": 0 }, "percentage": { "color": "#1A1A1A", "bold": true, "fontSize": 18 }, "name": { "color": "#1A1A1A", "bold": false, "fontSize": 14 }, "hollow": { "show": true, "total": { "show": true, "bold": false, "fontSize": 18, "color": "#AAAAAA", "text": "Total", "offsetY": 0, "value": { "color": "#1A1A1A", "fontSize": 18, "bold": true, "prefix": "", "suffix": "", "offsetY": 0, "rounding": 0 } }, "average": { "show": true, "bold": false, "color": "#AAAAAA", "fontSize": 18, "text": "Average", "offsetY": 0, "value": { "color": "#1A1A1A", "fontSize": 18, "bold": true, "prefix": "", "suffix": "", "offsetY": 0, "rounding": 0 } } } }, "donut": { "strokeWidth": 64, "borderWidth": 1 } }, "legend": { "show": true, "backgroundColor": "#FFFFFF", "color": "#1A1A1A", "fontSize": 16, "bold": false, "roundingValue": 0, "roundingPercentage": 0 }, "title": { "text": "Title", "color": "#1A1A1A", "fontSize": 20, "bold": true, "subtitle": { "text": "", "color": "#A1A1A1", "fontSize": 16, "bold": false } }, "tooltip": { "show": true, "backgroundColor": "#FFFFFF", "color": "#1A1A1A", "fontSize": 14, "showValue": true, "roundingValue": 0, "showPercentage": true, "roundingPercentage": 0 } } }, "userOptions": { "show": true }, "table": { "show": false, "responsiveBreakpoint": 400, "columnNames": { "series": "Series", "value": "Value", "percentage": "Percentage" }, "th": { "backgroundColor": "#FFFFFF", "color": "#1A1A1A", "outline": "none" }, "td": { "backgroundColor": "#FFFFFF", "color": "#1A1A1A", "outline": "none", "roundingValue": 0, "roundingPercentage": 0 } } }); const myDonutDataset = ref([ { name: "series 1", values: [ 30 ], color: "#42d392" }, { name: "series 2", values: [ 70 ], color: "#6376DD" } ]); const dataset = computed(() => { return [{ id: 1, width: 35, height: 25, left: 2, top: 2, component: 'VueUiDonut', props: { config: myDonutConfig.value, dataset: myDonutDataset.value } }] }) const changeDashboard = (event) => { console.log(event); } </script>
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
Answer selected by
necatibektass
-
Thank you very much. It worked now. Great job! :)
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 1
0 replies
-
You are welcome :)
Thanks to you docs are now updated, with a slots tab on the VueUiDashboard docs page.
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment