├── .all-contributorsrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── babel.config.js ├── jsconfig.json ├── package.json ├── public ├── favicon.ico └── icons │ ├── favicon-128x128.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon-96x96.png ├── quasar.conf.js ├── src ├── App.vue ├── assets │ └── quasar-logo-vertical.svg ├── boot │ ├── .gitkeep │ ├── apexcharts.js │ ├── axios.js │ └── i18n.js ├── components │ ├── Card.vue │ ├── CardSkeleton.vue │ ├── ExternalLink.vue │ ├── LangSwitch.vue │ ├── Navbar.vue │ ├── RouterLink.vue │ └── charts │ │ ├── area │ │ └── ApexArea.vue │ │ ├── bar │ │ ├── ApexBar.vue │ │ └── BiggestLibraries.vue │ │ ├── bubble │ │ └── ApexBubble.vue │ │ ├── candlestick │ │ └── ApexCandlestick.vue │ │ ├── column │ │ ├── ApexColumn.vue │ │ └── BiggestCompanies.vue │ │ ├── donut │ │ └── ApexDonut.vue │ │ ├── heatmap │ │ └── ApexHeatmap.vue │ │ ├── line │ │ ├── ApexLine.vue │ │ └── GdpChinaUsa.vue │ │ ├── pie │ │ └── PopulationByContinent.vue │ │ ├── polarArea │ │ └── ApexPolarArea.vue │ │ ├── radialBar │ │ └── ApexRadialBar.vue │ │ ├── scatterPlot │ │ └── ApexScatter.vue │ │ └── timeline │ │ └── ApexTimeline.vue ├── composables │ └── UseDriveJs.js ├── css │ └── app.css ├── i18n │ ├── en-US │ │ └── index.js │ ├── index.js │ └── pt-BR │ │ └── index.js ├── index.template.html ├── layouts │ └── MainLayout.vue ├── pages │ ├── Error404.vue │ ├── Index.vue │ └── chartTypes │ │ ├── AllCharts.vue │ │ ├── AreaCharts.vue │ │ ├── BarCharts.vue │ │ ├── BubbleCharts.vue │ │ ├── CandlestickCharts.vue │ │ ├── ColumnCharts.vue │ │ ├── DonutCharts.vue │ │ ├── HeatmapCharts.vue │ │ ├── LineCharts.vue │ │ ├── PieCharts.vue │ │ ├── PolarAreaCharts.vue │ │ ├── RadialBarCharts.vue │ │ ├── ScatterCharts.vue │ │ └── TimelineCharts.vue ├── quasar.d.ts └── router │ ├── index.js │ └── routes.js └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "commitConvention": "angular", 8 | "contributors": [ 9 | { 10 | "login": "amimaro", 11 | "name": "Amir Zahlan", 12 | "avatar_url": "https://avatars.githubusercontent.com/u/6666978?v=4", 13 | "profile": "https://github.com/amimaro", 14 | "contributions": [ 15 | "code" 16 | ] 17 | }, 18 | { 19 | "login": "patrickmonteiro", 20 | "name": "Patrick Monteiro", 21 | "avatar_url": "https://avatars.githubusercontent.com/u/13258255?v=4", 22 | "profile": "https://www.youtube.com/playlist?list=PLBjvYfV_TvwL7srfoBB0QxP1P-iJ5sQnc", 23 | "contributions": [ 24 | "code", 25 | "maintenance", 26 | "infra" 27 | ] 28 | }, 29 | { 30 | "login": "rafaeldias97", 31 | "name": "Rafael Dias", 32 | "avatar_url": "https://avatars.githubusercontent.com/u/33698938?v=4", 33 | "profile": "https://github.com/rafaeldias97", 34 | "contributions": [ 35 | "code" 36 | ] 37 | }, 38 | { 39 | "login": "Fayhen", 40 | "name": "Diego Souza", 41 | "avatar_url": "https://avatars.githubusercontent.com/u/45882000?v=4", 42 | "profile": "https://fayhen.github.io/", 43 | "contributions": [ 44 | "code" 45 | ] 46 | } 47 | ], 48 | "contributorsPerLine": 7, 49 | "skipCi": true, 50 | "repoType": "github", 51 | "repoHost": "https://github.com", 52 | "projectName": "quasar-apexcharts", 53 | "projectOwner": "patrickmonteiro" 54 | } 55 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /src-bex/www 3 | /src-capacitor 4 | /src-cordova 5 | /.quasar 6 | /node_modules 7 | .eslintrc.js 8 | babel.config.js 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy 3 | // This option interrupts the configuration hierarchy at this file 4 | // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos) 5 | root: true, 6 | 7 | parserOptions: { 8 | parser: '@babel/eslint-parser', 9 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features 10 | sourceType: 'module' // Allows for the use of imports 11 | }, 12 | 13 | env: { 14 | browser: true 15 | }, 16 | 17 | // Rules order is important, please avoid shuffling them 18 | extends: [ 19 | // Base ESLint recommended rules 20 | // 'eslint:recommended', 21 | 22 | 23 | // Uncomment any of the lines below to choose desired strictness, 24 | // but leave only one uncommented! 25 | // See https://eslint.vuejs.org/rules/#available-rules 26 | 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention) 27 | // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) 28 | // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) 29 | 30 | 'standard' 31 | 32 | ], 33 | 34 | plugins: [ 35 | // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file 36 | // required to lint *.vue files 37 | 'vue', 38 | 39 | ], 40 | 41 | globals: { 42 | ga: 'readonly', // Google Analytics 43 | cordova: 'readonly', 44 | __statics: 'readonly', 45 | __QUASAR_SSR__: 'readonly', 46 | __QUASAR_SSR_SERVER__: 'readonly', 47 | __QUASAR_SSR_CLIENT__: 'readonly', 48 | __QUASAR_SSR_PWA__: 'readonly', 49 | process: 'readonly', 50 | Capacitor: 'readonly', 51 | chrome: 'readonly' 52 | }, 53 | 54 | // add your custom rules here 55 | rules: { 56 | // allow async-await 57 | 'generator-star-spacing': 'off', 58 | // allow paren-less arrow functions 59 | 'arrow-parens': 'off', 60 | 'one-var': 'off', 61 | 'no-void': 'off', 62 | 'multiline-ternary': 'off', 63 | 64 | 'import/first': 'off', 65 | 'import/named': 'error', 66 | 'import/namespace': 'error', 67 | 'import/default': 'error', 68 | 'import/export': 'error', 69 | 'import/extensions': 'off', 70 | 'import/no-unresolved': 'off', 71 | 'import/no-extraneous-dependencies': 'off', 72 | 'prefer-promise-reject-errors': 'off', 73 | 74 | 75 | // allow debugger during development only 76 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | 5 | # Quasar core related directories 6 | .quasar 7 | /dist 8 | 9 | # Cordova related directories and files 10 | /src-cordova/node_modules 11 | /src-cordova/platforms 12 | /src-cordova/plugins 13 | /src-cordova/www 14 | 15 | # Capacitor related directories and files 16 | /src-capacitor/www 17 | /src-capacitor/node_modules 18 | 19 | # BEX related directories and files 20 | /src-bex/www 21 | /src-bex/js/core 22 | 23 | # Log files 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # Editor directories and files 29 | .idea 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln 34 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | 5 | "octref.vetur" 6 | ], 7 | "unwantedRecommendations": [ 8 | "hookyqr.beautify", 9 | "dbaeumer.jshint", 10 | "ms-vscode.vscode-typescript-tslint-plugin" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vetur.validation.template": false, 3 | "vetur.format.enable": false, 4 | "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"], 5 | 6 | "vetur.experimental.templateInterpolationService": true 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quasar Apexcharts V2 (quasar-apexcharts) 2 | 3 | [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-) 4 | 5 | 6 | 7 | This repository aims to exemplify the integration of the quasar v2 framework (with Vue 3) and the Apexcharts library. 8 | 9 | 🖥️ Demo Online: https://quasar-apexcharts.netlify.app/#/ 10 | 11 | 12 | 13 | ## Install the dependencies 14 | ```bash 15 | yarn 16 | ``` 17 | 18 | ### Start the app in development mode (hot-code reloading, error reporting, etc.) 19 | ```bash 20 | quasar dev 21 | ``` 22 | 23 | ### Lint the files 24 | ```bash 25 | yarn run lint 26 | ``` 27 | 28 | ### Build the app for production 29 | ```bash 30 | quasar build 31 | ``` 32 | 33 | ### Customize the configuration 34 | See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js). 35 | 36 | ## Contributors 37 | 38 | 39 | 40 | 41 | 42 | Made with [contrib.rocks](https://contrib.rocks). 43 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | module.exports = api => { 4 | return { 5 | presets: [ 6 | [ 7 | '@quasar/babel-preset-app', 8 | api.caller(caller => caller && caller.target === 'node') 9 | ? { targets: { node: 'current' } } 10 | : {} 11 | ] 12 | ] 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "src/*": [ 6 | "src/*" 7 | ], 8 | "app/*": [ 9 | "*" 10 | ], 11 | "components/*": [ 12 | "src/components/*" 13 | ], 14 | "layouts/*": [ 15 | "src/layouts/*" 16 | ], 17 | "pages/*": [ 18 | "src/pages/*" 19 | ], 20 | "assets/*": [ 21 | "src/assets/*" 22 | ], 23 | "boot/*": [ 24 | "src/boot/*" 25 | ], 26 | "vue$": [ 27 | "node_modules/vue/dist/vue.runtime.esm-bundler.js" 28 | ] 29 | } 30 | }, 31 | "exclude": [ 32 | "dist", 33 | ".quasar", 34 | "node_modules" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-apexcharts-v2", 3 | "version": "0.0.1", 4 | "description": "A Quasar Framework app", 5 | "productName": "Quasar Apexcharts V2", 6 | "author": "Patrick Monteiro ", 7 | "private": true, 8 | "scripts": { 9 | "lint": "eslint --ext .js,.vue ./", 10 | "test": "echo \"No test specified\" && exit 0" 11 | }, 12 | "dependencies": { 13 | "@quasar/extras": "^1.16.16", 14 | "apexcharts": "^3.50.0", 15 | "axios": "^1.7.2", 16 | "core-js": "^3.6.5", 17 | "driver.js": "^1.3.1", 18 | "quasar": "^2.17.7", 19 | "vue": "^3.0.0", 20 | "vue-i18n": "^9.3.0-beta.6", 21 | "vue-router": "^4.0.0", 22 | "vue3-apexcharts": "^1.5.3" 23 | }, 24 | "devDependencies": { 25 | "@babel/eslint-parser": "^7.13.14", 26 | "@quasar/app-webpack": "^3.15.1", 27 | "eslint": "^7.14.0", 28 | "eslint-config-standard": "^16.0.2", 29 | "eslint-plugin-import": "^2.19.1", 30 | "eslint-plugin-node": "^11.0.0", 31 | "eslint-plugin-promise": "^5.1.0", 32 | "eslint-plugin-vue": "^7.0.0", 33 | "eslint-webpack-plugin": "^2.4.0" 34 | }, 35 | "browserslist": [ 36 | "last 10 Chrome versions", 37 | "last 10 Firefox versions", 38 | "last 4 Edge versions", 39 | "last 7 Safari versions", 40 | "last 8 Android versions", 41 | "last 8 ChromeAndroid versions", 42 | "last 8 FirefoxAndroid versions", 43 | "last 10 iOS versions", 44 | "last 5 Opera versions" 45 | ], 46 | "engines": { 47 | "node": ">= 12.22.1", 48 | "npm": ">= 6.13.4", 49 | "yarn": ">= 1.21.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/quasar-apexcharts/f0df3ac778e7ef72607fd766b416225ca6831588/public/favicon.ico -------------------------------------------------------------------------------- /public/icons/favicon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/quasar-apexcharts/f0df3ac778e7ef72607fd766b416225ca6831588/public/icons/favicon-128x128.png -------------------------------------------------------------------------------- /public/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/quasar-apexcharts/f0df3ac778e7ef72607fd766b416225ca6831588/public/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/quasar-apexcharts/f0df3ac778e7ef72607fd766b416225ca6831588/public/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/quasar-apexcharts/f0df3ac778e7ef72607fd766b416225ca6831588/public/icons/favicon-96x96.png -------------------------------------------------------------------------------- /quasar.conf.js: -------------------------------------------------------------------------------- 1 | /* 2 | * This file runs in a Node context (it's NOT transpiled by Babel), so use only 3 | * the ES6 features that are supported by your Node version. https://node.green/ 4 | */ 5 | 6 | // Configuration for your app 7 | // https://quasar.dev/quasar-cli/quasar-conf-js 8 | 9 | /* eslint-env node */ 10 | const ESLintPlugin = require('eslint-webpack-plugin') 11 | const { configure } = require('quasar/wrappers') 12 | 13 | module.exports = configure(function (ctx) { 14 | return { 15 | // https://quasar.dev/quasar-cli/supporting-ts 16 | supportTS: false, 17 | 18 | // https://quasar.dev/quasar-cli/prefetch-feature 19 | // preFetch: true, 20 | 21 | // app boot file (/src/boot) 22 | // --> boot files are part of "main.js" 23 | // https://quasar.dev/quasar-cli/boot-files 24 | boot: [ 25 | 'axios', 26 | 'apexcharts', 27 | 'i18n' 28 | ], 29 | 30 | // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css 31 | css: [ 32 | 'app.css' 33 | ], 34 | 35 | // https://github.com/quasarframework/quasar/tree/dev/extras 36 | extras: [ 37 | // 'ionicons-v4', 38 | // 'mdi-v5', 39 | // 'fontawesome-v5', 40 | // 'eva-icons', 41 | // 'themify', 42 | // 'line-awesome', 43 | // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 44 | 45 | 'roboto-font', // optional, you are not bound to it 46 | 'material-icons' // optional, you are not bound to it 47 | ], 48 | 49 | // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build 50 | build: { 51 | vueRouterMode: 'hash', // available values: 'hash', 'history' 52 | 53 | // transpile: false, 54 | // publicPath: '/', 55 | 56 | // Add dependencies for transpiling with Babel (Array of string/regex) 57 | // (from node_modules, which are by default not transpiled). 58 | // Applies only if "transpile" is set to true. 59 | // transpileDependencies: [], 60 | 61 | // rtl: true, // https://quasar.dev/options/rtl-support 62 | // preloadChunks: true, 63 | // showProgress: false, 64 | // gzip: true, 65 | // analyze: true, 66 | 67 | // Options below are automatically set depending on the env, set them if you want to override 68 | // extractCSS: false, 69 | 70 | // https://quasar.dev/quasar-cli/handling-webpack 71 | // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain 72 | chainWebpack (chain) { 73 | chain.plugin('eslint-webpack-plugin') 74 | .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]) 75 | } 76 | }, 77 | 78 | // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer 79 | devServer: { 80 | server: { 81 | type: 'http' 82 | }, 83 | port: 8080, 84 | open: true // opens browser window automatically 85 | }, 86 | 87 | // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework 88 | framework: { 89 | config: { 90 | brand: { 91 | primary: '#051124', 92 | secondary: '#0a3273', 93 | accent: '#9C27B0', 94 | dark: '#1d1d1d', 95 | positive: '#21BA45', 96 | negative: '#C10015', 97 | info: '#31CCEC', 98 | warning: '#F2C037' 99 | } 100 | }, 101 | 102 | // iconSet: 'material-icons', // Quasar icon set 103 | // lang: 'en-US', // Quasar language pack 104 | 105 | // For special cases outside of where the auto-import strategy can have an impact 106 | // (like functional components as one of the examples), 107 | // you can manually specify Quasar components/directives to be available everywhere: 108 | // 109 | // components: [], 110 | // directives: [], 111 | 112 | // Quasar plugins 113 | plugins: [] 114 | }, 115 | 116 | // animations: 'all', // --- includes all animations 117 | // https://quasar.dev/options/animations 118 | animations: [], 119 | 120 | // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr 121 | ssr: { 122 | pwa: false, 123 | 124 | // manualStoreHydration: true, 125 | // manualPostHydrationTrigger: true, 126 | 127 | prodPort: 3000, // The default port that the production server should use 128 | // (gets superseded if process.env.PORT is specified at runtime) 129 | 130 | maxAge: 1000 * 60 * 60 * 24 * 30, 131 | // Tell browser when a file from the server should expire from cache (in ms) 132 | 133 | chainWebpackWebserver (chain) { 134 | chain.plugin('eslint-webpack-plugin') 135 | .use(ESLintPlugin, [{ extensions: ['js'] }]) 136 | }, 137 | 138 | middlewares: [ 139 | ctx.prod ? 'compression' : '', 140 | 'render' // keep this as last one 141 | ] 142 | }, 143 | 144 | // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa 145 | pwa: { 146 | workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest' 147 | workboxOptions: {}, // only for GenerateSW 148 | 149 | // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts]) 150 | // if using workbox in InjectManifest mode 151 | chainWebpackCustomSW (chain) { 152 | chain.plugin('eslint-webpack-plugin') 153 | .use(ESLintPlugin, [{ extensions: ['js'] }]) 154 | }, 155 | 156 | manifest: { 157 | name: 'Quasar Apexcharts V2', 158 | short_name: 'Quasar Apexcharts V2', 159 | description: 'A Quasar Framework app', 160 | display: 'standalone', 161 | orientation: 'portrait', 162 | background_color: '#ffffff', 163 | theme_color: '#027be3', 164 | icons: [ 165 | { 166 | src: 'icons/icon-128x128.png', 167 | sizes: '128x128', 168 | type: 'image/png' 169 | }, 170 | { 171 | src: 'icons/icon-192x192.png', 172 | sizes: '192x192', 173 | type: 'image/png' 174 | }, 175 | { 176 | src: 'icons/icon-256x256.png', 177 | sizes: '256x256', 178 | type: 'image/png' 179 | }, 180 | { 181 | src: 'icons/icon-384x384.png', 182 | sizes: '384x384', 183 | type: 'image/png' 184 | }, 185 | { 186 | src: 'icons/icon-512x512.png', 187 | sizes: '512x512', 188 | type: 'image/png' 189 | } 190 | ] 191 | } 192 | }, 193 | 194 | // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova 195 | cordova: { 196 | // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing 197 | }, 198 | 199 | // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor 200 | capacitor: { 201 | hideSplashscreen: true 202 | }, 203 | 204 | // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron 205 | electron: { 206 | bundler: 'packager', // 'packager' or 'builder' 207 | 208 | packager: { 209 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options 210 | 211 | // OS X / Mac App Store 212 | // appBundleId: '', 213 | // appCategoryType: '', 214 | // osxSign: '', 215 | // protocol: 'myapp://path', 216 | 217 | // Windows only 218 | // win32metadata: { ... } 219 | }, 220 | 221 | builder: { 222 | // https://www.electron.build/configuration/configuration 223 | 224 | appId: 'quasar-apexcharts-v2' 225 | }, 226 | 227 | // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain 228 | chainWebpackMain (chain) { 229 | chain.plugin('eslint-webpack-plugin') 230 | .use(ESLintPlugin, [{ extensions: ['js'] }]) 231 | }, 232 | 233 | // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain 234 | chainWebpackPreload (chain) { 235 | chain.plugin('eslint-webpack-plugin') 236 | .use(ESLintPlugin, [{ extensions: ['js'] }]) 237 | } 238 | } 239 | } 240 | }) 241 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 11 | -------------------------------------------------------------------------------- /src/assets/quasar-logo-vertical.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 15 | -------------------------------------------------------------------------------- /src/boot/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/quasar-apexcharts/f0df3ac778e7ef72607fd766b416225ca6831588/src/boot/.gitkeep -------------------------------------------------------------------------------- /src/boot/apexcharts.js: -------------------------------------------------------------------------------- 1 | import VueApexCharts from 'vue3-apexcharts' 2 | import { boot } from 'quasar/wrappers' 3 | 4 | export default boot(({ app }) => { 5 | app.use(VueApexCharts) 6 | }) 7 | -------------------------------------------------------------------------------- /src/boot/axios.js: -------------------------------------------------------------------------------- 1 | import { boot } from 'quasar/wrappers' 2 | import axios from 'axios' 3 | 4 | // Be careful when using SSR for cross-request state pollution 5 | // due to creating a Singleton instance here; 6 | // If any client changes this (global) instance, it might be a 7 | // good idea to move this instance creation inside of the 8 | // "export default () => {}" function below (which runs individually 9 | // for each client) 10 | const api = axios.create({ baseURL: 'https://api.example.com' }) 11 | 12 | export default boot(({ app }) => { 13 | // for use inside Vue files (Options API) through this.$axios and this.$api 14 | 15 | app.config.globalProperties.$axios = axios 16 | // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form) 17 | // so you won't necessarily have to import axios in each vue file 18 | 19 | app.config.globalProperties.$api = api 20 | // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form) 21 | // so you can easily perform requests against your app's API 22 | }) 23 | 24 | export { api } 25 | -------------------------------------------------------------------------------- /src/boot/i18n.js: -------------------------------------------------------------------------------- 1 | import { boot } from 'quasar/wrappers' 2 | import { createI18n } from 'vue-i18n' 3 | 4 | import messages from '../i18n' 5 | 6 | const i18n = createI18n({ 7 | legacy: false, 8 | locale: 'en-US', 9 | missing: () => 'No translation', 10 | messages 11 | }) 12 | 13 | export default boot(({ app }) => { 14 | // Set i18n instance on app 15 | app.use(i18n) 16 | }) 17 | 18 | export { i18n } 19 | -------------------------------------------------------------------------------- /src/components/Card.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | -------------------------------------------------------------------------------- /src/components/CardSkeleton.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 36 | -------------------------------------------------------------------------------- /src/components/ExternalLink.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 52 | -------------------------------------------------------------------------------- /src/components/LangSwitch.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 47 | -------------------------------------------------------------------------------- /src/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 137 | 138 | 260 | -------------------------------------------------------------------------------- /src/components/RouterLink.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 49 | -------------------------------------------------------------------------------- /src/components/charts/area/ApexArea.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 47 | -------------------------------------------------------------------------------- /src/components/charts/bar/ApexBar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 41 | -------------------------------------------------------------------------------- /src/components/charts/bar/BiggestLibraries.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 72 | -------------------------------------------------------------------------------- /src/components/charts/bubble/ApexBubble.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 91 | -------------------------------------------------------------------------------- /src/components/charts/candlestick/ApexCandlestick.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 286 | -------------------------------------------------------------------------------- /src/components/charts/column/ApexColumn.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 41 | -------------------------------------------------------------------------------- /src/components/charts/column/BiggestCompanies.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 83 | -------------------------------------------------------------------------------- /src/components/charts/donut/ApexDonut.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 37 | -------------------------------------------------------------------------------- /src/components/charts/heatmap/ApexHeatmap.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 115 | -------------------------------------------------------------------------------- /src/components/charts/line/ApexLine.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 40 | -------------------------------------------------------------------------------- /src/components/charts/line/GdpChinaUsa.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 97 | -------------------------------------------------------------------------------- /src/components/charts/pie/PopulationByContinent.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 60 | -------------------------------------------------------------------------------- /src/components/charts/polarArea/ApexPolarArea.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 44 | -------------------------------------------------------------------------------- /src/components/charts/radialBar/ApexRadialBar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 95 | -------------------------------------------------------------------------------- /src/components/charts/scatterPlot/ApexScatter.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 153 | -------------------------------------------------------------------------------- /src/components/charts/timeline/ApexTimeline.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 69 | -------------------------------------------------------------------------------- /src/composables/UseDriveJs.js: -------------------------------------------------------------------------------- 1 | import { driver } from 'driver.js' 2 | import 'driver.js/dist/driver.css' 3 | 4 | export default function useDriver () { 5 | const driverObj = driver({ 6 | showButtons: ['next', 'previous'], 7 | nextBtnText: 'Próximo', 8 | prevBtnText: 'Anterior', 9 | doneBtnText: 'Concluir', 10 | overlayColor: '#051124', 11 | showProgress: true, 12 | steps: [ 13 | { 14 | // element: '#tour-example', 15 | popover: { 16 | title: 'Bem vindo ao Quasar Apexcharts Examples', 17 | description: 'Aqui você encontra vários exemplos de implementação do Apexcharts com Vue.js 3 e Quasar Framework.' 18 | } 19 | }, 20 | { 21 | element: '#qa-navbar', 22 | popover: { 23 | title: 'Tipos de gráfico', 24 | description: 'Neste menu você encontra diversos tipos de gráficos.' 25 | } 26 | }, 27 | { 28 | element: '#qa-lang', 29 | popover: { 30 | title: 'Mude o idioma', 31 | description: 'Você pode escolher entre português e inglês.' 32 | } 33 | }, 34 | { 35 | popover: { 36 | title: 'Deixe uma estrela em nosso github 🌟', 37 | description: 'Não esqueça de deixar uma estrelinha no Github e compartilhar com seus amigos e redes sociais!' 38 | } 39 | } 40 | ] 41 | }) 42 | 43 | const initDriver = () => { 44 | driverObj.drive() 45 | } 46 | 47 | return { 48 | initDriver 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/css/app.css: -------------------------------------------------------------------------------- 1 | /* app global css */ 2 | 3 | .scrollbar { 4 | overflow-y: scroll; 5 | } 6 | 7 | .scrollbar::-webkit-scrollbar-track 8 | { 9 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 10 | box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 11 | background-color: #F5F5F5; 12 | } 13 | 14 | .scrollbar::-webkit-scrollbar 15 | { 16 | width: 10px; 17 | background-color: #F5F5F5; 18 | } 19 | 20 | .scrollbar::-webkit-scrollbar-thumb 21 | { 22 | background-color: #0b2349; 23 | } 24 | 25 | .responsive-container-width { 26 | width: 90%; 27 | } 28 | 29 | @media only screen and (min-width: 600px) { 30 | .responsive-container-width { 31 | width: 80%; 32 | } 33 | } 34 | 35 | @media only screen and (min-width: 1024px) { 36 | .responsive-container-width { 37 | width: 65% 38 | } 39 | } 40 | 41 | @media only screen and (min-width: 1440px) { 42 | .responsive-container-width { 43 | width: 50% 44 | } 45 | } 46 | 47 | @media only screen and (min-width: 1920px) { 48 | .responsive-container-width { 49 | width: 1100px 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/i18n/en-US/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | sidebar: { 3 | charts_all: 'All charts', 4 | charts_area: 'Area charts', 5 | charts_bar: 'Bar charts', 6 | charts_bubble: 'Bubble charts', 7 | charts_candlestick: 'Candlestick charts', 8 | charts_column: 'Column charts', 9 | charts_donut: 'Donut charts', 10 | charts_heatmap: 'Heatmap', 11 | charts_line: 'Line charts', 12 | charts_pie: 'Pie charts', 13 | charts_polarArea: 'Polar area charts', 14 | charts_radialBar: 'Radial bar charts', 15 | charts_scatterPlot: 'Scatter plot charts', 16 | home: 'Home', 17 | link_apexChartDocs: 'Docs', 18 | link_apexChartGithub: 'GitHub', 19 | link_apexChartSite: 'Site', 20 | link_quasarAwesome: 'Quasar Awesome', 21 | link_quasarDiscord: 'Discord chat channel', 22 | link_quasarDocs: 'Docs', 23 | link_quasarFacebook: 'Facebook', 24 | link_quasarForum: 'Forum', 25 | link_quasarGithub: 'GitHub', 26 | link_quasarTwitter: 'Twitter', 27 | link_vueDiscord: 'Discord', 28 | link_vueDocs: 'Docs', 29 | link_vueGithub: 'GitHub', 30 | link_vueSite: 'Site', 31 | link_vueTwitter: 'Twitter', 32 | linkCaption_apexChartDocs: 'apexcharts.com/docs', 33 | linkCaption_apexChartGithub: 'github.com/apexcharts', 34 | linkCaption_apexChartSite: 'ApexCharts\' site', 35 | linkCaption_quasarAwesome: 'Community Quasar projects', 36 | linkCaption_quasarDiscord: 'https://chat.quasar.dev', 37 | linkCaption_quasarDocs: 'quasar.dev', 38 | linkCaption_quasarFacebook: '{\'@\'}QuasarFramework', 39 | linkCaption_quasarForum: 'https://forum.quasar.dev', 40 | linkCaption_quasarGithub: 'github.com/quasarframework', 41 | linkCaption_quasarTwitter: '{\'@\'}quasarframework', 42 | linkCaption_vueDiscord: 'Discord chat channel', 43 | linkCaption_vueDocs: 'vuejs.org/guide', 44 | linkCaption_vueGithub: 'https://github.com/vuejs/', 45 | linkCaption_vueSite: 'Vue\'s site', 46 | linkCaption_vueTwitter: '{\'@\'}vuejs', 47 | section_charts: 'Charts', 48 | section_moreAboutApexCharts: 'More about ApexCharts', 49 | section_moreAboutQuasar: 'More about Quasar', 50 | section_moreAboutVue: 'More about Vue' 51 | }, 52 | presentation: { 53 | title: 'Welcome', 54 | subtitle: 'Hello and welcome to Quasar Apexcharts V2!', 55 | abstract: 'This is a repository aiming to explain how to integrate the ApexCharts library with the Quasar Framework and Vue 3.', 56 | aboutApexCharts: 'ApexCharts is a modern, open-source JavaScript library that help developers quickly create beautiful data visualizations for web pages. It features several chart types with easily customizable components.', 57 | aboutQuasar: 'The Quasar Framework V2 is a powerful, state-of-the-art and performance-focused frontend framework built on top of Vue 3. It has an extensive library of pre-built UI components with ready support to desktop and mobile browsers. Even more, it supports several build modes out of the box, including SPA, SSR, PWA, mobile and desktop apps and even browser extensions.', 58 | checkOutMenus: 'Check out more about these libraries through the links on the menu to the left, as well as several chart categories examples!', 59 | checkOutExamples: 'Also check some featured charts below:', 60 | showingOneOfEach: 'Showing one chart example for each of the available categories on this repository. Check the categories on the navigation menu for more examples!' 61 | }, 62 | ui: { 63 | ariaLabel_langSwitch: 'Open language selection menu' 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/i18n/index.js: -------------------------------------------------------------------------------- 1 | import enUS from './en-US' 2 | import ptBR from './pt-BR' 3 | 4 | export default { 5 | 'en-US': enUS, 6 | 'pt-BR': ptBR 7 | } 8 | -------------------------------------------------------------------------------- /src/i18n/pt-BR/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | sidebar: { 3 | charts_all: 'Todos', 4 | charts_area: 'Área', 5 | charts_bar: 'Barras', 6 | charts_bubble: 'Bolhas', 7 | charts_candlestick: 'Velas', 8 | charts_column: 'Colunas', 9 | charts_donut: 'Rosca', 10 | charts_heatmap: 'Mapas de calor', 11 | charts_line: 'Linha', 12 | charts_pie: 'Pizza', 13 | charts_polarArea: 'Área polar', 14 | charts_radialBar: 'Barras radiais', 15 | charts_scatterPlot: 'Dispersão', 16 | home: 'Início', 17 | link_apexChartDocs: 'Documentação', 18 | link_apexChartGithub: 'GitHub', 19 | link_apexChartSite: 'Site', 20 | link_quasarAwesome: 'Quasar Awesome', 21 | link_quasarDiscord: 'Canal do Discord', 22 | link_quasarDocs: 'Documentação', 23 | link_quasarFacebook: 'Facebook', 24 | link_quasarForum: 'Fórum', 25 | link_quasarGithub: 'GitHub', 26 | link_quasarTwitter: 'Twitter', 27 | link_vueDiscord: 'Discord', 28 | link_vueDocs: 'Documentação', 29 | link_vueGithub: 'GitHub', 30 | link_vueSite: 'Site', 31 | link_vueTwitter: 'Twitter', 32 | linkCaption_apexChartDocs: 'apexcharts.com/docs', 33 | linkCaption_apexChartGithub: 'github.com/apexcharts', 34 | linkCaption_apexChartSite: 'Site do ApexCharts', 35 | linkCaption_quasarAwesome: 'Projetos da comunidade do Quasar', 36 | linkCaption_quasarDiscord: 'https://chat.quasar.dev', 37 | linkCaption_quasarDocs: 'quasar.dev', 38 | linkCaption_quasarFacebook: '{\'@\'}QuasarFramework', 39 | linkCaption_quasarForum: 'https://forum.quasar.dev', 40 | linkCaption_quasarGithub: 'github.com/quasarframework', 41 | linkCaption_quasarTwitter: '{\'@\'}quasarframework', 42 | linkCaption_vueDiscord: 'Canal do Discord', 43 | linkCaption_vueDocs: 'vuejs.org/guide', 44 | linkCaption_vueGithub: 'https://github.com/vuejs/', 45 | linkCaption_vueSite: 'Site do Vue', 46 | linkCaption_vueTwitter: '{\'@\'}vuejs', 47 | section_charts: 'Gráficos', 48 | section_moreAboutApexCharts: 'Mais sobre ApexCharts', 49 | section_moreAboutQuasar: 'Mais sobre o Quasar', 50 | section_moreAboutVue: 'Mais sobre o Vue' 51 | }, 52 | presentation: { 53 | title: 'Bem-vindo(a)', 54 | subtitle: 'Olá e bem-vindo(a) ao Quasar Apexcharts V2!', 55 | abstract: 'Este é um repositório que visa explicar como integrar a biblioteca ApexCharts ao Quasar Framework e Vue 3.', 56 | aboutApexCharts: 'O ApexCharts é uma moderna biblioteca JavaScript de código aberto que permite aos desenvolvedores criar bonitas visualizações de dados de maneira rápida para páginas da Web. Ela inclui vários tipos de gráficos diferentes com componentes facilmente customizáveis.', 57 | aboutQuasar: 'O Quasar Framework V2 é um poderoso framework frontend de última geração com foco em performance, construído sobre o Vue 3. Ele possui uma extensa biblioteca de componentes de UI, já prontos com suporte a navegadores mobile e desktop. Além disso, também possui pronto suporte a diferentes modos de build, incluindo SPA, SSR, PWA, aplicações mobile e desktop e até extensões de navegadores.', 58 | checkOutMenus: 'Saiba mais sobre essas bibliotecas no menu à esquerda, e também navegue entre diferentes categorias de gráficos!', 59 | checkOutExamples: 'Confira também alguns exemplos em destaque abaixo:', 60 | showingOneOfEach: 'Esta página mostra um exemplo de gráfico para cada uma das categorias disponíveis neste repositório. Confira as categorias no menu de navegação para mais exemplos!' 61 | }, 62 | ui: { 63 | ariaLabel_langSwitch: 'Abrir menu de seleção de idioma' 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= productName %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/layouts/MainLayout.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 74 | -------------------------------------------------------------------------------- /src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 32 | -------------------------------------------------------------------------------- /src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 87 | -------------------------------------------------------------------------------- /src/pages/chartTypes/AllCharts.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 137 | -------------------------------------------------------------------------------- /src/pages/chartTypes/AreaCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/BarCharts.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 38 | -------------------------------------------------------------------------------- /src/pages/chartTypes/BubbleCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/CandlestickCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/ColumnCharts.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 38 | -------------------------------------------------------------------------------- /src/pages/chartTypes/DonutCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/HeatmapCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/LineCharts.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 36 | -------------------------------------------------------------------------------- /src/pages/chartTypes/PieCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/PolarAreaCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/RadialBarCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/ScatterCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/pages/chartTypes/TimelineCharts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/quasar.d.ts: -------------------------------------------------------------------------------- 1 | // Forces TS to apply `@quasar/app` augmentations of `quasar` package 2 | // Removing this would break `quasar/wrappers` imports as those typings are declared 3 | // into `@quasar/app` 4 | // As a side effect, since `@quasar/app` reference `quasar` to augment it, 5 | // this declaration also apply `quasar` own 6 | // augmentations (eg. adds `$q` into Vue component context) 7 | /// 8 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { route } from 'quasar/wrappers' 2 | import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router' 3 | import routes from './routes' 4 | 5 | /* 6 | * If not building with SSR mode, you can 7 | * directly export the Router instantiation; 8 | * 9 | * The function below can be async too; either use 10 | * async/await or return a Promise which resolves 11 | * with the Router instance. 12 | */ 13 | 14 | export default route(function (/* { store, ssrContext } */) { 15 | const createHistory = process.env.SERVER 16 | ? createMemoryHistory 17 | : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory) 18 | 19 | const Router = createRouter({ 20 | scrollBehavior: () => ({ left: 0, top: 0 }), 21 | routes, 22 | 23 | // Leave this as is and make changes in quasar.conf.js instead! 24 | // quasar.conf.js -> build -> vueRouterMode 25 | // quasar.conf.js -> build -> publicPath 26 | history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE) 27 | }) 28 | 29 | return Router 30 | }) 31 | -------------------------------------------------------------------------------- /src/router/routes.js: -------------------------------------------------------------------------------- 1 | 2 | const routes = [ 3 | { 4 | path: '/', 5 | component: () => import('layouts/MainLayout.vue'), 6 | children: [ 7 | { 8 | path: '', 9 | name: 'home', 10 | component: () => import('pages/Index.vue') 11 | }, 12 | { 13 | path: '/all-charts', 14 | name: 'allCharts', 15 | component: () => import('pages/chartTypes/AllCharts.vue') 16 | }, 17 | { 18 | path: '/area-charts', 19 | name: 'areaCharts', 20 | component: () => import('pages/chartTypes/AreaCharts.vue') 21 | }, 22 | { 23 | path: '/bar-charts', 24 | name: 'barCharts', 25 | component: () => import('pages/chartTypes/BarCharts.vue') 26 | }, 27 | { 28 | path: '/bubble-charts', 29 | name: 'bubbleCharts', 30 | component: () => import('pages/chartTypes/BubbleCharts.vue') 31 | }, 32 | { 33 | path: '/candlestick-charts', 34 | name: 'candlestickCharts', 35 | component: () => import('pages/chartTypes/CandlestickCharts.vue') 36 | }, 37 | { 38 | path: '/column-charts', 39 | name: 'columnCharts', 40 | component: () => import('pages/chartTypes/ColumnCharts.vue') 41 | }, 42 | { 43 | path: '/donut-charts', 44 | name: 'donutCharts', 45 | component: () => import('pages/chartTypes/DonutCharts.vue') 46 | }, 47 | { 48 | path: '/heatmap-charts', 49 | name: 'heatmapCharts', 50 | component: () => import('pages/chartTypes/HeatmapCharts.vue') 51 | }, 52 | { 53 | path: '/line-charts', 54 | name: 'lineCharts', 55 | component: () => import('pages/chartTypes/LineCharts.vue') 56 | }, 57 | { 58 | path: '/pie-charts', 59 | name: 'pieCharts', 60 | component: () => import('pages/chartTypes/PieCharts.vue') 61 | }, 62 | { 63 | path: '/polar-area-charts', 64 | name: 'polarAreaCharts', 65 | component: () => import('pages/chartTypes/PolarAreaCharts.vue') 66 | }, 67 | { 68 | path: '/radial-bar-charts', 69 | name: 'radialBarCharts', 70 | component: () => import('pages/chartTypes/RadialBarCharts.vue') 71 | }, 72 | { 73 | path: '/scatter-charts', 74 | name: 'scatterCharts', 75 | component: () => import('pages/chartTypes/ScatterCharts.vue') 76 | } 77 | // Precisa de ajustes, está com problema na renderização 78 | // { 79 | // path: '/timeline-charts', 80 | // name: 'timelineCharts', 81 | // component: () => import('pages/chartTypes/TimelineCharts.vue') 82 | // } 83 | ] 84 | }, 85 | 86 | // Always leave this as last one, 87 | // but you can also remove it 88 | { 89 | path: '/:catchAll(.*)*', 90 | component: () => import('pages/Error404.vue') 91 | } 92 | ] 93 | 94 | export default routes 95 | --------------------------------------------------------------------------------