DataV Like UI

A Vue 2 component library for internal company use, featuring ECharts integration and cool data visualization components.

Installation

npm install datav-like-ui

Usage

Global Registration

In your main.js:

import Vue from 'vue';
import DatavLikeUi from 'datav-like-ui';
import 'datav-like-ui/dist/datav-like-ui.css'; // Import styles if extracted

Vue.use(DatavLikeUi);

Local Registration

import { CoolTextBox, BaseChart } from 'datav-like-ui';

export default {
  components: {
    CoolTextBox,
    BaseChart
  }
}

Components

CoolTextBox

A futuristic text box for displaying key data metrics.

Props:

• label (String): The label text above the value.
• value (String/Number): The value to display.
• color (String): Theme color (default: #00f2f1).

Example:

<cool-text-box label="Total Sales" value="1,234,567" color="#ff0000" />

BaseChart

A wrapper around ECharts.

Props:

• options (Object): ECharts option object.
• width (String): Width of the chart (default: 100%).
• height (String): Height of the chart (default: 300px).
• theme (String/Object): ECharts theme.

Example:

<base-chart :options="chartOptions" height="400px" />

Development & Publishing

Project Setup

npm install

Compiles and minifies for production

npm run build

Publishing to NPM

1. Login to NPM: Ensure you are logged in to the correct NPM registry (internal or public).

   npm login

2. Update Version: Update the version number in package.json.

   npm version patch # or minor, major

3. Build: Always build before publishing to ensure the dist folder is up to date.

   npm run build

4. Publish:

   npm publish

   Note: If publishing to a private registry, ensure your .npmrc is configured correctly.