Vite + Vue

├── .vscode └── extensions.json ├── revCharts.jpg ├── src ├── index.js ├── main.js ├── assets │ └── vue.svg └── components │ ├── styles.css │ └── DynamicChart.vue ├── .gitignore ├── index.html ├── vite.config.js ├── package.json ├── LICENSE ├── public └── vite.svg └── README.md /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /revCharts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imransmartinsider/revcharts/HEAD/revCharts.jpg -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import DynamicChart from './components/DynamicChart.vue'; 2 | import './components/styles.css'; 3 | export default DynamicChart; -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import DynamicChart from './components/DynamicChart.vue'; 3 | 4 | createApp(DynamicChart).mount('#app'); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | 4 | export default defineConfig({ 5 | plugins: [vue()], 6 | build: { 7 | lib: { 8 | entry: './src/index.js', 9 | name: 'ApiChart', 10 | fileName: (format) => `ApiChart.${format}.js` 11 | }, 12 | rollupOptions: { 13 | // Make sure to externalize deps that shouldn't be bundled into your library 14 | external: ['vue'], 15 | output: { 16 | // Provide global variables to use in the UMD build for externalized deps 17 | globals: { 18 | vue: 'Vue' 19 | } 20 | } 21 | } 22 | } 23 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamiccharts", 3 | "private": false, 4 | "version": "1.0.12", 5 | "description": "A revolutionary Vue 3 library that dynamically creates and updates a Chart based on API calls.", 6 | "main": "dist/ApiChart.umd.js", 7 | "module": "dist/ApiChart.es.js", 8 | "files": ["dist"], 9 | 10 | "scripts": { 11 | "dev": "vite", 12 | "build": "vite build", 13 | "preview": "vite preview" 14 | }, 15 | "dependencies": { 16 | "axios": "^1.7.2", 17 | "chart.js": "^4.4.3", 18 | "vue": "^3.4.31", 19 | "vue-chartjs": "^5.3.1" 20 | }, 21 | "devDependencies": { 22 | "@vitejs/plugin-vue": "^5.0.5", 23 | "vite": "^5.3.4" 24 | }, 25 | 26 | "author": "Imran Khaliq", 27 | "email": "imran.smartinsider@gmail.com", 28 | "license": "MIT", 29 | "repository": { 30 | "type": "git", 31 | "url": "git@github.com:imransmartinsider/revcharts.git" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 imransmartinsider 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RevCharts 2 | 3 | **DynamicChart Component** 4 | The DynamicChart component provides a flexible and interactive charting solution using Chart.js and Vue.js. It allows users to fetch data from an API, configure chart settings, and save/load configurations. 5 | 6 | **Features** 7 | - **Fetch Data from API**: This Vue 3 library dynamically creates and updates Charts based on API calls. 8 | - **Input field for entering an API URL**: Fetches data from the provided URL and visualizes it as a chart. 9 | - **Chart Type Selection**: Dropdown menu to select from various chart types: 10 | Bar Chart 11 | Line Chart 12 | Pie Chart 13 | Doughnut Chart 14 | Radar Chart 15 | Polar Area Chart 16 | Chart Configuration 17 | 18 | - **Title**: Input field for setting the chart title. 19 | - **Customize Color**: Input field for specifying the chart color (in RGBA format). 20 | - **Save and Load Configuration**: Save current chart configuration (API URL, chart type, title, color) to localStorage. 21 | - **Load Configuration**: Load saved chart configuration from localStorage. 22 | - **Retry**: Retry button to attempt fetching data again if the initial attempt fails. 23 | - **Download Chart**: Download the displayed chart as a PNG image. 24 | - **Error Handling**: Shows error messages if data fetching fails or if the data format is invalid. 25 | - **Responsive Design**: The chart and controls are responsive and adapt to different screen sizes. 26 | 27 | ## Screenshot 28 | 29 | ![Screenshot](revCharts.jpg) 30 | 31 | 32 | 33 | ## Installation 34 | 35 | ```sh 36 | npm i dynamiccharts 37 | 38 | import dynamiccharts from 'dynamiccharts' 39 | import './components/styles.css'; 40 | 41 | 42 | 43 | give any Json Api Address in checkbox like this 'https://jsonplaceholder.typicode.com/posts' and click Fetch 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/styles.css: -------------------------------------------------------------------------------- 1 | .chart-container { 2 | height: 100vh; 3 | width: 100vw; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: flex-start; /* Align items to the start */ 8 | padding: 20px; 9 | box-sizing: border-box; 10 | background-color: #f4f4f4; /* Light background color */ 11 | } 12 | 13 | .controls { 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | width: 100%; 18 | margin-top: 20px; /* Added top margin */ 19 | } 20 | 21 | .controls-row { 22 | display: flex; 23 | flex-wrap: wrap; 24 | gap: 10px; 25 | justify-content: center; 26 | margin-bottom: 20px; /* Space below controls */ 27 | } 28 | 29 | .api-input, 30 | .chart-type-select, 31 | .chart-input, 32 | .fetch-button, 33 | .retry-button, 34 | .save-button, 35 | .load-button, 36 | .download-button { 37 | margin-bottom: 10px; 38 | padding: 12px 15px; 39 | font-size: 16px; 40 | border: 1px solid #ccc; 41 | border-radius: 5px; 42 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 43 | } 44 | 45 | .api-input { 46 | width: 300px; 47 | max-width: 500px; 48 | } 49 | 50 | .chart-type-select { 51 | width: 200px; 52 | max-width: 300px; 53 | } 54 | 55 | .chart-input { 56 | width: 200px; 57 | max-width: 300px; 58 | } 59 | 60 | .fetch-button, 61 | .retry-button, 62 | .save-button, 63 | .load-button, 64 | .download-button { 65 | background-color: #007bff; 66 | color: #fff; 67 | border: none; 68 | cursor: pointer; 69 | transition: background-color 0.3s, box-shadow 0.3s; 70 | } 71 | 72 | .fetch-button:hover, 73 | .retry-button:hover, 74 | .save-button:hover, 75 | .load-button:hover, 76 | .download-button:hover { 77 | background-color: #0056b3; 78 | } 79 | 80 | .fetch-button:focus, 81 | .retry-button:focus, 82 | .save-button:focus, 83 | .load-button:focus, 84 | .download-button:focus { 85 | outline: none; 86 | box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); 87 | } 88 | 89 | .error-message { 90 | color: #ff4d4f; /* Red color for error messages */ 91 | margin-top: 10px; 92 | font-size: 16px; 93 | } 94 | 95 | .loading-indicator { 96 | color: #007bff; 97 | font-size: 16px; 98 | margin-top: 10px; 99 | } 100 | 101 | .chart-canvas { 102 | width: 100%; 103 | height: 100%; 104 | max-width: 1000px; /* Optional: Limits the width of the chart */ 105 | } -------------------------------------------------------------------------------- /src/components/DynamicChart.vue: -------------------------------------------------------------------------------- 1 | 2 | 29 | 30 | 194 | 195 | 200 | --------------------------------------------------------------------------------