DataV Vue3

The Chart components in this library are wrappers around Charts.js. To use them, you simply need to pass the corresponding option data object into the component.

Key Behavior:

• Auto-resize: The chart components automatically recalculate their width and height when the window is resized to ensure they remain adaptive/responsive.

For detailed information on available data structures and configuration, refer to the official Charts examples and Charts configuration documentation.

// Example pattern: Pass an option object to the component
<ChartComponent :option="yourChartOptions" />

The points array in the config object can contain either simple coordinate arrays or objects containing text information.

Option 1: Array of coordinates

points = [
  [10, 10],
  [100, 100],
]

Option 2: Array of objects (includes text)

points = [
  {
    position: [0.33, 0.52],
    text: '飞线点A',
  },
]

When updating data, avoid using Array.prototype.push on config.data. Because the component watches the config object, pushing new data causes the component to recalculate, which resets the scroll position back to the first row.

To append data without resetting the scroll position, use the updateRows method. This method requires you to provide a completely new array for the data property within the config. You can also use this method to set the starting row for the next scroll cycle.

The repository is organized as a pnpm monorepo with the following primary directories:

• build: Vite configuration files.
• script: Scripts for generating component boilerplate and documentation.
• packages/datav-vue3: The core component library source code.
• packages/docs: The documentation site (built with Vitepress and UnoCSS).

Styles are configured via the style prop using CRender Style properties. Common properties include:

• fill: Sets the font color.
• stroke: Sets the font stroke color.
• fontSize: Sets the text size.

Default style is:

{
  "fontSize": 30,
  "fill": "#3de7c9"
}

DataV - Vue3 is a component library designed for Vue3 and Vite. It provides visually rich components that are easy to use out-of-the-box by simply configuring dimensions (width/height) or providing simple data structures. To get started, follow the official Guide.

<!-- For more detailed instructions, refer to the /Guide/Guide section in the documentation -->

The WaterLevelPond component visualizes water levels using animated waves. It supports three different shapes: rectangular, rounded rectangular, and circular. It can handle multiple water levels, but by default, it displays the information for the highest water level.

<template>
  <!-- Rectangular shape -->
  <WaterLevelPond shape="rect" :data="[50]" />

  <!-- Rounded rectangle shape -->
  <WaterLevelPond shape="roundRect" :data="[70]" />

  <!-- Circular shape -->
  <WaterLevelPond shape="round" :data="[30]" />
</template>

Install the library using your preferred package manager. The following example uses pnpm:

pnpm install @kjgl77/datav-vue3