graphieros / vue-data-ui

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

Front-end developer, building innovative data visualization solutions.

Author of:

• vue-data-ui : a user-empowering data visualization Vue 3 components library for eloquent data storytelling. Check out the docs

• savyg : a lightweight and savvy graphics Typescript open source library to write svg in a comfortable way and create quick and reliable charts. Framework agnostic. Check out the docs

• data-vision : a Javascript data visualization open source library that can be included in any framework. It all works with data attributes. Check out the docs

Creator of the graphieros conlang, based on the geometry of hexagons

vue-data-ui's Issues

Enhancement Proposal: Customizable Chart Tooltips

Hey there!

First and foremost, I'd like to express my admiration for the quality of the code in this repository. The work accomplished here is impressive, and in my opinion, it deserves even greater recognition.

I'm interested in utilizing some of the charts available in this project. However, the current lack of customization options for tooltips is a significant limitation for my use case. I believe providing a way to customize tooltips could enhance the flexibility and usability of these charts.

Would you be open to considering a pull request that introduces the option to customize tooltips? From my initial review, it appears that most charts rely on a useTooltip(params) function. My proposal is to expose this function, allowing users to customize tooltip content while maintaining the default implementation as the fallback.

I've already implemented a tweaked version of this for my personal use on the heatmap chart and would be thrilled to contribute it back as a standard feature. Please let me know if this is something the project could benefit from, and if so, any specific guidelines or preferences you have for contributions.

Nuxt setup

Hey, nice project!

Would you be open to also writing some docs code to get a minimum version up and running, to test if the library even works as well as some general docs for how to set this up on Nuxt.js? I am also struggling to get the types to work.
I get this error: Cannot find module 'vue-data-ui' or its corresponding type declarations.ts(2307
I also noticed that the component does get rendered, but it has no reactivity like the tooltips showing or the options doing anything
This is my component file:

<script lang="ts" setup>
import "vue-data-ui/style.css"
import { VueUiXy } from "vue-data-ui";


const config = {
    chart: {
        fontFamily: "inherit"
    }
}

const dataset = [
    {
        name: "Series 1",
        series: [-55, -34, -21, -13, -8, -5, -3, -2, -1, -1, 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
        type: "bar"
        ,
        color: "rgb(95,139,238)",
    },
    {
        name: "Series 2",
        series: [55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0, -1, -1, -2, -3, -5, -8, -13, -21, -34, -55],
        type:
            "line"
        ,
        color: "rgb(66,211,146)",
        useProgression: true,
        dataLabels: false
    },
    {
        name: "Series 3",
        series: [64, 60, 52, 42, 30, 16, 0, -18, -38, -46, -50, -46, -38, -18, 0, 16, 30, 42, 52, 60, 64],
        type:
            "plot"
        ,
        color: "rgb(255,100,0)"
    },
    {
        name: "Target",
        series: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
        type: "line",
        color: "#404040",
        dashed: true,
        useTag: "start",
        dataLabels: false,
    },
];

</script>
<template>
    <VueUiXy :config="config" :dataset="dataset" />
</template>