Assistance Needed with VueUiDashboard and Vue Composition API Integration

[necatibektass]

``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>

[graphieros]

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

[necatibektass]

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.

[graphieros]

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>

[necatibektass]

Thank you very much. It worked now. Great job! :)

[graphieros]

You are welcome :)
Thanks to you docs are now updated, with a slots tab on the VueUiDashboard docs page.