DOCSEARCHbyAlgolia
Submit Docs

vue-data-ui

repository·master·Indexed 25 days ago

https://github.com/graphieros/vue-data-ui

A Vue 3 components library for data visualization and storytelling, featuring a wide variety of charts, maps, and utility components. It includes specialized tools like VueUiQuickChart for automatic chart selection, mini charts for high-density views, 3D charts, and geospatial visualizations. The library supports custom themes, flexible tooltip customization via slots, and a universal VueDataUi wrapper for dynamic component rendering.

Tokens
25.4K
Snippets
33
Records
76
Agent score
49%

What's inside vue-data-ui

  1. Overview of Vue Data UI components

    master

    Vue Data UI provides a wide range of specialized components for data visualization and UI utilities. Components are categorized into several groups:

    • Universal Component: VueDataUi acts as a wrapper or base component.
    • Quick Charts: VueUiQuickChart automatically selects the best chart type (line, bar, or donut) based on the provided dataset.
    • Mini Charts: Small, lightweight charts like VueUiSparkline, VueUiSparkbar, VueUiSparkGauge, and VueUiBullet for high-density data views.
    • Charts: Full-featured visualization components including VueUiDonut, VueUiHeatmap, VueUiRadar, VueUiScatter, VueUiTreemap, VueUiWordCloud, and VueUiXy.
    • 3D Charts: Includes VueUi3dBar.
    • Maps: Geospatial visualizations like VueUiGeo and VueUiWorld.
    • Data Tables: Specialized tables such as VueUiTableHeatmap, VueUiTableSparkline, and VueUiCarouselTable.
    • Rating: Components for user feedback like VueUiRating and VueUiSmiley.
    • Utilities: UI helpers like VueUiAccordion, VueUiKpi, VueUiSkeleton, and VueUiTimer.

    Most components support custom tooltips and themes. Type definitions for all components are available in dist/types/vue-data-ui.d.ts.

  4. Apply and use themes

    master

    Charts use the default color palette unless a theme is specified. You can apply one of the 9 available themes by setting the theme property in your component's config object.

    Available Themes:

    • default (or '')
    • dark
    • zen
    • hack
    • concrete
    • celebration
    • celebrationNight
    • minimal
    • minimalDark

    Note: Any colors provided directly in the dataset props will override the colors used by the theme for datapoints.

    const donutConfig = ref({
  theme: 'zen',
  ...
})

  5. Optimize performance for big data using downsampling

    master

    For very large datasets (typically > 5k or > 10k datapoints), rendering many SVG elements can slow down the browser. Certain components use the LTTB (Largest-Triangle-Three-Bucket) algorithm to downsample data while preserving its visual shape.

    You can adjust the threshold for this downsampling in the config.downsample object.

    Components with default thresholds:

    • VueUiXy: 1095
    • VueUiXyCanvas: 10000 (higher threshold allowed as it uses Canvas)
    • VueUiQuadrant: 1095
    • VueUiScatter: 1095
    • VueUiSparkline: 1095
    • VueUiSparkTrend: 1095
    const config = ref({
  downsample: {
    threshold: 500,
  },
  // ... rest of your config
})

  6. Enable responsive charts

    master

    While all charts scale to their container width by default, some components support a full responsive mode which is better suited for resizable containers. To activate this, set config.responsive to true.

    Important: When using the responsive feature, the chart must be placed inside a container with fixed dimensions. Do not use height: 100% on the container, as this can cause the chart to grow infinitely.

    const config = ref({
    responsive: true,
    // rest of your config
});

  8. Override User Options content using slots

    master

    You can use Vue slots to replace the content (icons or text) of the action buttons. Most buttons are handled automatically by the component, except for optionFullscreen, which provides scoped slots to manage the fullscreen state.

    Available slots follow the pattern option<ActionName> (e.g., optionPdf).

    <VueUiDonut :config="config" :dataset="dataset">
    <template #optionPdf> GENERATE PDF </template>

    <!-- This is the only action where scoped content is provided -->
    <template #optionFullscreen="{ isFullscreen, toggleFullscreen }">
        <div @click="toggleFullscreen(isFullscreen ? 'out' : 'in')">
            TOGGLE FULLSCREEN
        </div>
    </template>
</VueUiDonut>

  11. Register vue-data-ui components globally

    master

    To use components anywhere in your application without local imports, declare them globally in your main.js file. Ensure you also import the required CSS.

    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');

  12. Create a custom theme

    master

    To create a custom theme, retrieve the default configuration for your component using getVueDataUiConfig, override the color properties, and then merge it with your specific user configurations using mergeConfigs.

    import { getVueDataUiConfig, mergeConfigs } from 'vue-data-ui';

// Get the default config and set color options
const customTheme = getVueDataUiConfig('vue_ui_xy', {
    colorBackground: '#1A1A1A',
    colorTextPrimary: '#CD9077',
    colorTextSecondary: '#825848',
    colorGrid: '#CD9077',
    colorBorder: '#CD9077',
});

const config = computed(() => {
    // Use the `mergeConfigs` utility to set additional configurations while preserving your theme
    return mergeConfigs({
        defaultConfig: customTheme,
        userConfig: {
            chart: {
                title: {
                    text: 'Title',
                    subtitle: {
                        text: 'Subtitle',
                    },
                },
            },
        },
    });
});