Overview

x-chart is a data visualization dashboard built on Vue.js, vue-echarts, and vue-grid-layout. It offers features such as draggable and resizable chart modules, configurable dashboards, and customization options for charts using echarts. The latest version of x-chart is rewritten in TypeScript and supports Docker deployment.

Features

• Vue.js Framework: Built on Vue.js, providing a robust and flexible framework for interactive data visualization.
• Draggable & Resizable Charts: Users can easily drag and resize chart modules on the dashboard for a customized view.
• Configurable Dashboard: Modules render based on API data, allowing for a dynamic and adaptable dashboard.
• Customizable Echarts: Beautify and customize charts using the echarts library.
• Frontend Data Mocking: Utilizes msw library for seamless REST/GraphQL API mocking in both browser and Node.js environments.
• Docker Deployment: Supports easy deployment using Docker containers.

Installation

To install x-chart, follow these steps:

1. Clone the repository:

git clone <repository-url>

2. Install dependencies:

cd x-chart
npm install

3. Create a .npmrc file with the following content if npm install is slow:

<content>

4. Start the application:

npm run start

5. Visit the online preview link to view the x-chart dashboard in action.

Summary

x-chart is a feature-rich data visualization dashboard leveraging Vue.js and echarts to provide users with a customizable and interactive platform. With draggable and resizable charts, configurable dashboards, and easy deployment options, x-chart offers a user-friendly experience for creating visually appealing data representations.