Way to import the component directly to a SFC? Donut is undefined

Hi, first of - thank you for this amazingly looking, adequately simple component! Good job.

What I would like to do: I want to import and use the donut component similarly as I do with all of my own - just an import from a node_module, mentioning it as a component in the “components” field of Vue instance and then putting it into the template, passing props - similarly to the way it is done in this repo’s demo page. I am using SFCs and TS.

What happened: Of course, an yarn add. If it should work out of the box as the above, then it did not on my end - I will gladly investigate the reasons further if that’s the case. As I want the app to be self contained, I picked the ES6 method from the docs as the most adequate.

// main.ts

import Donut from 'vue-css-donut-chart';
import App from './App.vue';
import router from './router';
import store from './store/store';
import './registerServiceWorker';
import 'vue-css-donut-chart/dist/vcdonut.css';

Vue.use(Donut);

Vue.config.productionTip = false;

new Vue({
	router,
	store,
	render: (h) => h(App)
}).$mount('#app');

Imported the Donut and its styles inside my main.ts, did Vue.ues(Donut) before the new Vue is called and expected miracles, assuming it would be available from anywhere in my app. Of course it wasn’t, referring to the Donut in the “components” vue instance field returns undefined without an explicit import into my SFC, which in turn seems contradictory to already importing it in the root instance. The way of importing the component into the SFC was not clear to me, too.

Vue docs suggest the way to enable access to the .vue file directly through the “browser” field in package.json, but it is not implemented it the package.

I thinks I am missing a piece in my Vue knowledge and I would very much appreciate someone enlightening me on the way to use this beautiful component in a vue-cli generated project.

Cheers 🍻

[dumptyd]

Do you perhaps know of any performance / package size drawbacks of having it as a plugin? (1)

As far as I know, there are no drawbacks for this to be a plugin. The package only exposes one component. Whether you import it in your SFC or register it as a global component using the plugin approach, it’s going to be the same in both cases.

---

What made you decide on not having it also available as a .vue component? (2)

You can import the Vue component directly like this if you want.

import Donut from 'vue-css-donut-chart/src/components/Donut.vue';

---

I was also tasked to have the circle bar multicolored, gently gradienting through. Do you perhaps know whether it is possible / relatively-easily-doable with current shape of the vue-css-donut-chart module?

It’s not impossible but it won’t work like you’d expect it to. When a section takes more than 50% of the chart, it’s split into two elements which the user can’t tell because they’re the same color, but it will be obvious because the gradient would restart after 50%.

Even if you’re okay with that, the sections use a lot of rotation transforms, so it would require a lot of trial and error for you to make them look exactly how you want.

With that out of the way, you could do some experiments by using these CSS rules.

/* first section */
.cdc-section:nth-child(1) .cdc-filler {
  background: linear-gradient(red, yellow);
}

I discourage doing this because at this point we’re using internal API which is subject to change anytime.

TLDR: No, it’s not possible. 😅

[JStrebeyko]

Hey there @dumptyd,

I am really grateful that you got back to me so quick ❤️ It indeed works, I am so happy!

Do you perhaps know of any performance / package size drawbacks of having it as a plugin?(1) What made you decide on not having it also available as a .vue component?(2) These are some general purpose questions, as I am generally trying to better understand Open Source developers in the decisions they make about their packages’ structure.

Also, besides of having a simple donut chart, which was the reason for me to go for your package, I was also tasked to have the circle bar multicolored, gently gradienting through. Do you perhaps know whether it is possible / relatively-easily-doable with current shape of the vue-css-donut-chart module?

Sending hugs and kisses what you have already done, it’s great & Thanks.