X Chart
x-chart is a draggable & resizable data visualization system
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.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
