Vue Data UI Components Library

Common errors

• Failed to locate Teleport target
  Invalid Teleport target on mount
  Unhandled error during execution of component update

  cause A component using `<Teleport>` (often for elements like legends or tooltips) failed to find its intended target element in the DOM upon mounting.
  fix Verify that the root element or the specific target for `<Teleport>` (e.g., a `div` with a specific ID) is present in your application's `index.html` or mounted component tree before the Vue component initializes. In testing, ensure your testing utility renders a complete DOM or mock the `<Teleport>` component.

• Property 'dataset' is missing in type '{ config: Ref<ComputedRef<...>>; }' but required in type 'Readonly<__VLS_TypeProps<__VLS_WithDefaults<typeof __VLS_internalComponent, { config: {}; dataset: { name: string; series: { name: string; values: number[]; }[]; }; }>>>'.

  cause TypeScript error indicating that a required prop (e.g., `dataset` or `config`) was not provided to a Vue Data UI component, or its type signature did not match the component's expectations.
  fix Ensure all required props, especially `dataset` and `config`, are passed to the component and strictly adhere to the types defined in the library's documentation (or imported `ChartDataset` and `ChartConfig` types if using TypeScript).

Warnings

• gotcha When using components with disabled legends, particularly in certain test environments, you might encounter issues related to Vue's `<Teleport>` component failing to find its target.
  Fix: Ensure that the DOM environment where the component is rendered (especially in tests) provides a valid `<Teleport>` target (e.g., `body` or a specific element). You may need to mock `<Teleport>` in isolated unit tests if the target is not readily available.
• gotcha The library heavily relies on configuration objects for customization. Incorrectly structured or missing properties within these objects can lead to charts not rendering or behaving unexpectedly without clear console errors specific to the library's internal logic.
  Fix: Always refer to the official documentation for the specific component's `config` and `dataset` types and structure. Leverage TypeScript for compile-time validation of your configuration objects.
• gotcha When customizing tooltips via the new `#tooltip` slot, ensure you correctly access the exposed `tooltip` object properties (e.g., `datapoint`, `timeLabel`). Logging the full exposed object is recommended for discovery.
  Fix: Inspect the `tooltip` object by adding `<pre>{{ JSON.stringify(tooltip, null, 2) }}</pre>` inside your slot template to understand its full structure before implementing custom formatting.

Install

• npm install vue-data-ui npm
• yarn add vue-data-ui yarn
• pnpm add vue-data-ui pnpm

Imports

• VueUiScatter
  wrong:

  import VueUiScatter from 'vue-data-ui'

  correct:

  import { VueUiScatter } from 'vue-data-ui'

  All chart components are named exports. Type definitions are included for TypeScript projects.
• VueUiTreemap
  wrong:

  const VueUiTreemap = require('vue-data-ui')

  correct:

  import { VueUiTreemap } from 'vue-data-ui'

  This library is primarily designed for ES Module consumption in modern Vue 3 applications; CommonJS require() is not the idiomatic way.
• VueUiAgePyramid

  import { VueUiAgePyramid } from 'vue-data-ui'

  For optimal tree-shaking, import only the specific components you intend to use.

Quickstart

Demonstrates how to import and render a VueUiScatter component with a basic dataset and configuration in a Vue 3 application, including TypeScript types.

<script setup lang="ts">
import { ref, computed } from 'vue';
import { VueUiScatter } from 'vue-data-ui';
import type { ChartConfig, ChartDataset } from 'vue-data-ui'; // Import types for better DX

const dataset = ref<ChartDataset['VueUiScatter']>([ // Dataset type example
  { name: 'Category A', series: [{ name: 'Item 1', value: 10, x: 1, y: 5 }, { name: 'Item 2', value: 15, x: 2, y: 7 }] },
  { name: 'Category B', series: [{ name: 'Item 3', value: 20, x: 3, y: 12 }, { name: 'Item 4', value: 25, x: 4, y: 10 }] }
]);

const config = computed<ChartConfig['VueUiScatter']>(() => ({
  style: {
    chart: {
      backgroundColor: 'transparent'
    },
    layout: {
      plots: {
        hoverRadiusRatio: 2,
        opacityNotSelected: 0.6
      }
    },
    legend: {
      show: true
    }
  },
  title: {
    text: 'My Scatter Plot',
    fontFamily: 'Inter',
    fontSize: 18,
    color: '#333'
  },
  zoomEnabled: true
}));
</script>

<template>
  <div style="width: 100%; height: 500px;">
    <VueUiScatter :dataset="dataset" :config="config" />
  </div>
</template>