yugasun/x-chart

🚀 x-chart is a draggable & resizable data visualization system

简体中文 | English

Introduction

x-chart is a draggable & resizable data visualization dashboard. Based on Vue.js, vue-echarts and vue-grid-layout.

Notice This version is rewrote by typescript, if you want the old version by javascript, you can checkout tag v0.1.2.

Develop

# clone the project
git clone https://github.com/yugasun/x-chart.git

# install dependency
pnpm install

# develop
pnpm run dev

# build
pnpm run build

# deploy for Github page
pnpm run deploy

# build docker image
pnpm run docker:build

# run docker image in container, after this you can visit demo by: http://localhost:8080
pnpm run docker:run

# run into current docker container
pnpm run docker:exec

Feature

• Base on template vue-ts-starter (Vue3 + Vite + TypeScript)
• Configurable dashboard: all modules render depend on the api.
• Chart modules are draggable and resizable.
• Customized and beautify charts using echarts.
• Frontend data mock demo using msw Seamless REST/GraphQL API mocking library for browser and Node.js.
• Docker deploy.

Demo

Online Preview.

Notice

For Chinese if you npm install slowly, you can create .npmrc file with below content:

registry=https://registry.npm.taobao.org/
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

License

MIT

Copyright (c) 2018-present yugasun

x-chart's Issues

Vue 3 Support?

This library looks great! Any idea if it will be updated to Vue 3 compatability?

Thanks..

I just want to thank you for this nice library. Could you provide npm installer without clone the git repo??

ZoomData

ZoomData cannot be used after multiple operations of zoomData and zoomBack

How to run?

Hello,

I have installed it with npm and run build, but its not accessible, which "server" it need to run?

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

关于项目初始化问题

最近由于 prettier 新包出现问题，项目依赖安装完成后，运行项目会出现以下错误：

$ npm run dev

> [email protected] dev /Users/Yuga/Desktop/x-chart
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 94% asset optimization

 ERROR  Failed to compile with 14 errors                                                                                                                                                                                                                                                                  13:19:59

 error  in ./src/components/charts/x-line.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/Users/Yuga/Desktop/x-chart/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/Users/Yuga/Desktop/x-chart/node_modules/prettier/index.js:10370:12)
    at /Users/Yuga/Desktop/x-chart/node_modules/prettier/index.js:31115:15
    at Object.format (/Users/Yuga/Desktop/x-chart/node_modules/prettier/index.js:31134:12)
    at Object.module.exports (/Users/Yuga/Desktop/x-chart/node_modules/vue-loader/lib/template-compiler/index.js:73:23)
...

参考 vuejs/component-compiler-utils#14 讨论。

临时解决方案，就是将 prettier 重装以下：

# 这里必须锁死版本为 1.12.1, 新版本有问题，待官方修复
npm install prettier@~1.12.1

Custom Charts

Is it possible to add custom charts?

can I use this like libraries in jquery

not that familiar with vue, can I just use it like some other libraries in Jquery.

like include some js and css files and use jquery to create/update dashboards.

thanks

How do I add the charts to my Vue.js app?

Is this an npm package? How do I add it to my app?

Can I Contribute logo for x-chart ?

Hello @yugasun. Can I Contribute to make Logo For This Project ?

Make x-chart a NPM package

Adding this to NPM would make the project much more accessible and off-the-shelf to use. Cloning the repository and using it as a boilerplate may work in some instances when starting a new project, however, when trying to use the library in an existing large project, it could be more difficult than it's worth. In addition, if there was a bug and feature update, this could be corrected and distributed through NPM instead of having to manually change the code in the project.

online preview: theme 3 twice

this online preview has 4 different themes,
but when selected dropdown shows theme3 twice
instead of theme4 being last one.

Vue grid responsive

I see you have forked the Vue grid compnenet, is there a reason for it? As the new version has support for responsive layout, any considerations if I want to use the latest Vue grid component version?