Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-data-ui
Advanced tools
Readme
A user-empowering data visualization Vue components library.
Available components:
npm i vue-data-ui
You can declare components globally in your main.js:
import { createApp } from 'vue'
import App from "./App.vue";
// Include the css;
import "vue-data-ui/style.css";
// You can declare Vue Data UI components globally
import { VueUiRadar } from "vue-data-ui";
const app = createApp(App);
app.component("VueUiRadar", VueUiRadar);
app.mount('#app');
Or you can import just what you need in your files:
<script setup>
import { VueUiRadar, VueUiXy } from "vue-data-ui";
</script>
Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
<script setup>
import { ref } from "vue";
import { VueDataUi } from "vue-data-ui";
// Include the css;
import "vue-data-ui/style.css";
const config = ref({...});
const dataset = ref([...]);
</script>
<template>
<VueDataUi
component="VueUiXy"
:config="config"
:dataset="dataset"
/>
</template>
Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt
Charts with tooltips have a config option to customize tooltip contents:
customFormat: ({ seriesIndex, datapoint, series, config }) => {
return `<div>${ ... }</div>`;
}
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
<VueUiXy :dataset="dataset" :config="config">
<template #svg="{ svg }">
<foreignObject x="100" y="0" height="100" width="150">
<div>
This is a custom caption
</div>
</foreignObject>
</template>
</VueUiXy>
The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
All charts expose a #legend slot except for:
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it. It is recommended to set the show legend config attribute to false, to hide the default legend.
<VueUiDonut :config="config" :dataset="dataset">
<template #legend="{ legend }">
<div v-for="item in legend">
{{ legend.name }}
</div>
</template>
</VueUiDonut>
Since v.2.0.57, it is possible to further customize tooltip contents with #tooltip-before and #tooltip-after slots. It is that easy to include an image, another chart or any other content into your tooltips. It's an alternative to the config option tooltip.customFormat, in case richer tooltip content is needed.
Both slots expose the following object:
{
datapoint,
seriesIndex,
series,
config,
}
The following charts bear these slots:
* VueUiXy slots specifically expose the following additional attributes:
{
...,
bars,
lines,
plots
}
<VueUiDonut :config="config" :dataset="dataset">
<template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
<div>
This content shows first
</div>
</template>
<template #tooltip-after={ datapoint, seriesIndex, dataset, config }">
<div>
This content shows last
</div>
</template>
</VueUiDonut>
The #tooltip-before & #tooltip-after slots also works when using the VueDataUi universal component, if the component it wraps supports them.
If for some reason you can't access the documentation website and need to get the default config object for a component:
import { getVueDataUiConfig } from "vue-data-ui";
const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");
FAQs
A user-empowering data visualization Vue components library
The npm package vue-data-ui receives a total of 1,107 weekly downloads. As such, vue-data-ui popularity was classified as popular.
We found that vue-data-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.