VueUiDonutEvolution

[kudr9]

<script setup lang="ts">
	import { ref } from 'vue';
	import { VueDataUi, type VueUiDonutEvolutionDatasetItem, type VueUiDonutEvolutionConfig } from 'vue-data-ui';
	import 'vue-data-ui/style.css';

	const dataset = ref<VueUiDonutEvolutionDatasetItem[]>([
		{
			name: 'Serie 1',
			values: [55, 34, 21, 13, 8, 5, 8, 13, 21, 34, 55],
		},
		{
			name: 'Serie 2',
			values: [1, 12, 24, 32, 5, 8, 13, 21, 34, 55, 89],
		},
		{
			name: 'Serie 3',
			values: [16, 2, 3, 5, 28, 13, 21, 34, 55, 89, 134],
		},
		{
			name: 'Serie 4',
			values: [5, null, 5, 5, 5, 5],
		},
	]);
	const config = ref<VueUiDonutEvolutionConfig>();
</script>

<template>
	<VueDataUi
		component="VueUiDonutEvolution"
		:dataset="dataset"
		:config="config"
	/>
</template>

Hello! Thanks for the vue-data-ui. Its very beautiful and useful tool!
This code is from the app.vue. Why doesn't a modal window open when I click on a specific donut?

[graphieros]

Your code works, it does display the dialog:

https://stackblitz.com/edit/vitejs-vite-k8dnl7c5?file=src%2FApp.vue,package.json&terminal=dev

What is your version ?

[kudr9]

package.json

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-regular-svg-icons": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/vue-fontawesome": "^3.0.8",
    "@vuepic/vue-datepicker": "^11.0.3",
    "axios": "^1.12.2",
    "bootstrap": "^5.3.8",
    "bootstrap-vue-next": "^0.28.6",
    "dayjs": "^1.11.18",
    "grid-layout-plus": "^1.1.1",
    "html2pdf.js": "^0.12.1",
    "idb-keyval": "^6.2.2",
    "jwt-decode": "^4.0.0",
    "pinia": "^3.0.3",
    "uuid": "^13.0.0",
    "vue": "^3.5.22",
    "vue-data-ui": "^3.7.11"
  },

plugins:

		plugins: [
			vue(),
			vueDevTools(),
			Components({
				resolvers: [BootstrapVueNextResolver()],
			}),
		],

I use Chrome or MicrosoftEdge.

[kudr9]

I think the problem is in using bootstrap, because in main.ts I do this:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
import { createBootstrap } from 'bootstrap-vue-next';

app.use(
	createBootstrap({
		components: {
			BModal: {
				lazy: true,
				scrollable: true,
				unmountLazy: true,
			},
			BPopover: {
				closeOnHide: true,
				teleportTo: 'body',
				lazy: true,
				unmountLazy: true,
			},
		},
	})
);

[graphieros]

Bootstrap is targeting a .modal css class
It conflicts with vue-data-ui css class for the modal.
This is a bug

I created an issue for that #278

[kudr9]

Thanks, I noticed another thing.
OffsetX for yAxis in the VueUiDonutEvolution configuration isn't working.

[graphieros]

Noted, I'll add another issue for this

[graphieros]

@kudr9

Css classes for built-in dialogs have been renamed to avoid conflicts; and the offsetX issue is fixed.
3.7.12

[kudr9]

thanks! Would you mind if I submit small bugs from time to time?

[graphieros]

Sure, that's always appreciated. Your issues are on point.