[ { "path": ".all-contributorsrc", "content": "{\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"commitConvention\": \"angular\",\n \"contributors\": [\n {\n \"login\": \"amimaro\",\n \"name\": \"Amir Zahlan\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/6666978?v=4\",\n \"profile\": \"https://github.com/amimaro\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"patrickmonteiro\",\n \"name\": \"Patrick Monteiro\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/13258255?v=4\",\n \"profile\": \"https://www.youtube.com/playlist?list=PLBjvYfV_TvwL7srfoBB0QxP1P-iJ5sQnc\",\n \"contributions\": [\n \"code\",\n \"maintenance\",\n \"infra\"\n ]\n },\n {\n \"login\": \"rafaeldias97\",\n \"name\": \"Rafael Dias\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/33698938?v=4\",\n \"profile\": \"https://github.com/rafaeldias97\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"Fayhen\",\n \"name\": \"Diego Souza\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/45882000?v=4\",\n \"profile\": \"https://fayhen.github.io/\",\n \"contributions\": [\n \"code\"\n ]\n }\n ],\n \"contributorsPerLine\": 7,\n \"skipCi\": true,\n \"repoType\": \"github\",\n \"repoHost\": \"https://github.com\",\n \"projectName\": \"quasar-apexcharts\",\n \"projectOwner\": \"patrickmonteiro\"\n}\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".eslintignore", "content": "/dist\n/src-bex/www\n/src-capacitor\n/src-cordova\n/.quasar\n/node_modules\n.eslintrc.js\nbabel.config.js\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy\n // This option interrupts the configuration hierarchy at this file\n // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)\n root: true,\n\n parserOptions: {\n parser: '@babel/eslint-parser',\n ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features\n sourceType: 'module' // Allows for the use of imports\n },\n\n env: {\n browser: true\n },\n\n // Rules order is important, please avoid shuffling them\n extends: [\n // Base ESLint recommended rules\n // 'eslint:recommended',\n\n\n // Uncomment any of the lines below to choose desired strictness,\n // but leave only one uncommented!\n // See https://eslint.vuejs.org/rules/#available-rules\n 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)\n // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)\n // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)\n\n 'standard'\n\n ],\n\n plugins: [\n // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file\n // required to lint *.vue files\n 'vue',\n\n ],\n\n globals: {\n ga: 'readonly', // Google Analytics\n cordova: 'readonly',\n __statics: 'readonly',\n __QUASAR_SSR__: 'readonly',\n __QUASAR_SSR_SERVER__: 'readonly',\n __QUASAR_SSR_CLIENT__: 'readonly',\n __QUASAR_SSR_PWA__: 'readonly',\n process: 'readonly',\n Capacitor: 'readonly',\n chrome: 'readonly'\n },\n\n // add your custom rules here\n rules: {\n // allow async-await\n 'generator-star-spacing': 'off',\n // allow paren-less arrow functions\n 'arrow-parens': 'off',\n 'one-var': 'off',\n 'no-void': 'off',\n 'multiline-ternary': 'off',\n\n 'import/first': 'off',\n 'import/named': 'error',\n 'import/namespace': 'error',\n 'import/default': 'error',\n 'import/export': 'error',\n 'import/extensions': 'off',\n 'import/no-unresolved': 'off',\n 'import/no-extraneous-dependencies': 'off',\n 'prefer-promise-reject-errors': 'off',\n\n\n // allow debugger during development only\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'\n }\n}\n" }, { "path": ".gitignore", "content": ".DS_Store\n.thumbs.db\nnode_modules\n\n# Quasar core related directories\n.quasar\n/dist\n\n# Cordova related directories and files\n/src-cordova/node_modules\n/src-cordova/platforms\n/src-cordova/plugins\n/src-cordova/www\n\n# Capacitor related directories and files\n/src-capacitor/www\n/src-capacitor/node_modules\n\n# BEX related directories and files\n/src-bex/www\n/src-bex/js/core\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n" }, { "path": ".postcssrc.js", "content": "// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n plugins: [\n // to edit target browsers: use \"browserslist\" field in package.json\n require('autoprefixer')\n ]\n}\n" }, { "path": ".prettierrc", "content": "{\n \"trailingComma\": \"none\",\n \"tabWidth\": 2,\n \"semi\": false,\n \"singleQuote\": true\n}" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\n \"dbaeumer.vscode-eslint\",\n \n \"octref.vetur\"\n ],\n \"unwantedRecommendations\": [\n \"hookyqr.beautify\",\n \"dbaeumer.jshint\",\n \"ms-vscode.vscode-typescript-tslint-plugin\"\n ]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"vetur.validation.template\": false,\n \"vetur.format.enable\": false,\n \"eslint.validate\": [\"javascript\", \"javascriptreact\", \"typescript\", \"vue\"],\n \n \"vetur.experimental.templateInterpolationService\": true\n}\n" }, { "path": "README.md", "content": "# Quasar Apexcharts V2 (quasar-apexcharts)\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n\n\n\nThis repository aims to exemplify the integration of the quasar v2 framework (with Vue 3) and the Apexcharts library.\n\n🖥️ Demo Online: https://quasar-apexcharts.netlify.app/#/\n\n\n\n## Install the dependencies\n```bash\nyarn\n```\n\n### Start the app in development mode (hot-code reloading, error reporting, etc.)\n```bash\nquasar dev\n```\n\n### Lint the files\n```bash\nyarn run lint\n```\n\n### Build the app for production\n```bash\nquasar build\n```\n\n### Customize the configuration\nSee [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).\n\n## Contributors\n\n\n \n\n\nMade with [contrib.rocks](https://contrib.rocks).\n" }, { "path": "babel.config.js", "content": "\n\nmodule.exports = api => {\n return {\n presets: [\n [\n '@quasar/babel-preset-app',\n api.caller(caller => caller && caller.target === 'node')\n ? { targets: { node: 'current' } }\n : {}\n ]\n ]\n }\n}\n\n" }, { "path": "jsconfig.json", "content": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"src/*\": [\n \"src/*\"\n ],\n \"app/*\": [\n \"*\"\n ],\n \"components/*\": [\n \"src/components/*\"\n ],\n \"layouts/*\": [\n \"src/layouts/*\"\n ],\n \"pages/*\": [\n \"src/pages/*\"\n ],\n \"assets/*\": [\n \"src/assets/*\"\n ],\n \"boot/*\": [\n \"src/boot/*\"\n ],\n \"vue$\": [\n \"node_modules/vue/dist/vue.runtime.esm-bundler.js\"\n ]\n }\n },\n \"exclude\": [\n \"dist\",\n \".quasar\",\n \"node_modules\"\n ]\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"quasar-apexcharts-v2\",\n \"version\": \"0.0.1\",\n \"description\": \"A Quasar Framework app\",\n \"productName\": \"Quasar Apexcharts V2\",\n \"author\": \"Patrick Monteiro \",\n \"private\": true,\n \"scripts\": {\n \"lint\": \"eslint --ext .js,.vue ./\",\n \"test\": \"echo \\\"No test specified\\\" && exit 0\"\n },\n \"dependencies\": {\n \"@quasar/extras\": \"^1.17.0\",\n \"apexcharts\": \"^3.50.0\",\n \"axios\": \"^1.7.2\",\n \"core-js\": \"^3.6.5\",\n \"driver.js\": \"^1.3.1\",\n \"quasar\": \"^2.18.5\",\n \"vue\": \"^3.0.0\",\n \"vue-i18n\": \"^9.3.0-beta.6\",\n \"vue-router\": \"^4.0.0\",\n \"vue3-apexcharts\": \"^1.5.3\"\n },\n \"devDependencies\": {\n \"@babel/eslint-parser\": \"^7.13.14\",\n \"@quasar/app-webpack\": \"^3.15.1\",\n \"eslint\": \"^7.14.0\",\n \"eslint-config-standard\": \"^16.0.2\",\n \"eslint-plugin-import\": \"^2.19.1\",\n \"eslint-plugin-node\": \"^11.0.0\",\n \"eslint-plugin-promise\": \"^5.1.0\",\n \"eslint-plugin-vue\": \"^7.0.0\",\n \"eslint-webpack-plugin\": \"^2.4.0\"\n },\n \"browserslist\": [\n \"last 10 Chrome versions\",\n \"last 10 Firefox versions\",\n \"last 4 Edge versions\",\n \"last 7 Safari versions\",\n \"last 8 Android versions\",\n \"last 8 ChromeAndroid versions\",\n \"last 8 FirefoxAndroid versions\",\n \"last 10 iOS versions\",\n \"last 5 Opera versions\"\n ],\n \"engines\": {\n \"node\": \">= 12.22.1\",\n \"npm\": \">= 6.13.4\",\n \"yarn\": \">= 1.21.1\"\n }\n}\n" }, { "path": "quasar.conf.js", "content": "/*\n * This file runs in a Node context (it's NOT transpiled by Babel), so use only\n * the ES6 features that are supported by your Node version. https://node.green/\n */\n\n// Configuration for your app\n// https://quasar.dev/quasar-cli/quasar-conf-js\n\n/* eslint-env node */\nconst ESLintPlugin = require('eslint-webpack-plugin')\nconst { configure } = require('quasar/wrappers')\n\nmodule.exports = configure(function (ctx) {\n return {\n // https://quasar.dev/quasar-cli/supporting-ts\n supportTS: false,\n\n // https://quasar.dev/quasar-cli/prefetch-feature\n // preFetch: true,\n\n // app boot file (/src/boot)\n // --> boot files are part of \"main.js\"\n // https://quasar.dev/quasar-cli/boot-files\n boot: [\n 'axios',\n 'apexcharts',\n 'i18n'\n ],\n\n // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css\n css: [\n 'app.css'\n ],\n\n // https://github.com/quasarframework/quasar/tree/dev/extras\n extras: [\n // 'ionicons-v4',\n // 'mdi-v5',\n // 'fontawesome-v5',\n // 'eva-icons',\n // 'themify',\n // 'line-awesome',\n // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!\n\n 'roboto-font', // optional, you are not bound to it\n 'material-icons' // optional, you are not bound to it\n ],\n\n // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build\n build: {\n vueRouterMode: 'hash', // available values: 'hash', 'history'\n\n // transpile: false,\n // publicPath: '/',\n\n // Add dependencies for transpiling with Babel (Array of string/regex)\n // (from node_modules, which are by default not transpiled).\n // Applies only if \"transpile\" is set to true.\n // transpileDependencies: [],\n\n // rtl: true, // https://quasar.dev/options/rtl-support\n // preloadChunks: true,\n // showProgress: false,\n // gzip: true,\n // analyze: true,\n\n // Options below are automatically set depending on the env, set them if you want to override\n // extractCSS: false,\n\n // https://quasar.dev/quasar-cli/handling-webpack\n // \"chain\" is a webpack-chain object https://github.com/neutrinojs/webpack-chain\n chainWebpack (chain) {\n chain.plugin('eslint-webpack-plugin')\n .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])\n }\n },\n\n // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer\n devServer: {\n server: {\n type: 'http'\n },\n port: 8080,\n open: true // opens browser window automatically\n },\n\n // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework\n framework: {\n config: {\n brand: {\n primary: '#051124',\n secondary: '#0a3273',\n accent: '#9C27B0',\n dark: '#1d1d1d',\n positive: '#21BA45',\n negative: '#C10015',\n info: '#31CCEC',\n warning: '#F2C037'\n }\n },\n\n // iconSet: 'material-icons', // Quasar icon set\n // lang: 'en-US', // Quasar language pack\n\n // For special cases outside of where the auto-import strategy can have an impact\n // (like functional components as one of the examples),\n // you can manually specify Quasar components/directives to be available everywhere:\n //\n // components: [],\n // directives: [],\n\n // Quasar plugins\n plugins: []\n },\n\n // animations: 'all', // --- includes all animations\n // https://quasar.dev/options/animations\n animations: [],\n\n // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr\n ssr: {\n pwa: false,\n\n // manualStoreHydration: true,\n // manualPostHydrationTrigger: true,\n\n prodPort: 3000, // The default port that the production server should use\n // (gets superseded if process.env.PORT is specified at runtime)\n\n maxAge: 1000 * 60 * 60 * 24 * 30,\n // Tell browser when a file from the server should expire from cache (in ms)\n\n chainWebpackWebserver (chain) {\n chain.plugin('eslint-webpack-plugin')\n .use(ESLintPlugin, [{ extensions: ['js'] }])\n },\n\n middlewares: [\n ctx.prod ? 'compression' : '',\n 'render' // keep this as last one\n ]\n },\n\n // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa\n pwa: {\n workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'\n workboxOptions: {}, // only for GenerateSW\n\n // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])\n // if using workbox in InjectManifest mode\n chainWebpackCustomSW (chain) {\n chain.plugin('eslint-webpack-plugin')\n .use(ESLintPlugin, [{ extensions: ['js'] }])\n },\n\n manifest: {\n name: 'Quasar Apexcharts V2',\n short_name: 'Quasar Apexcharts V2',\n description: 'A Quasar Framework app',\n display: 'standalone',\n orientation: 'portrait',\n background_color: '#ffffff',\n theme_color: '#027be3',\n icons: [\n {\n src: 'icons/icon-128x128.png',\n sizes: '128x128',\n type: 'image/png'\n },\n {\n src: 'icons/icon-192x192.png',\n sizes: '192x192',\n type: 'image/png'\n },\n {\n src: 'icons/icon-256x256.png',\n sizes: '256x256',\n type: 'image/png'\n },\n {\n src: 'icons/icon-384x384.png',\n sizes: '384x384',\n type: 'image/png'\n },\n {\n src: 'icons/icon-512x512.png',\n sizes: '512x512',\n type: 'image/png'\n }\n ]\n }\n },\n\n // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova\n cordova: {\n // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing\n },\n\n // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor\n capacitor: {\n hideSplashscreen: true\n },\n\n // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron\n electron: {\n bundler: 'packager', // 'packager' or 'builder'\n\n packager: {\n // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options\n\n // OS X / Mac App Store\n // appBundleId: '',\n // appCategoryType: '',\n // osxSign: '',\n // protocol: 'myapp://path',\n\n // Windows only\n // win32metadata: { ... }\n },\n\n builder: {\n // https://www.electron.build/configuration/configuration\n\n appId: 'quasar-apexcharts-v2'\n },\n\n // \"chain\" is a webpack-chain object https://github.com/neutrinojs/webpack-chain\n chainWebpackMain (chain) {\n chain.plugin('eslint-webpack-plugin')\n .use(ESLintPlugin, [{ extensions: ['js'] }])\n },\n\n // \"chain\" is a webpack-chain object https://github.com/neutrinojs/webpack-chain\n chainWebpackPreload (chain) {\n chain.plugin('eslint-webpack-plugin')\n .use(ESLintPlugin, [{ extensions: ['js'] }])\n }\n }\n }\n})\n" }, { "path": "src/App.vue", "content": "\n\n" }, { "path": "src/boot/.gitkeep", "content": "" }, { "path": "src/boot/apexcharts.js", "content": "import VueApexCharts from 'vue3-apexcharts'\nimport { boot } from 'quasar/wrappers'\n\nexport default boot(({ app }) => {\n app.use(VueApexCharts)\n})\n" }, { "path": "src/boot/axios.js", "content": "import { boot } from 'quasar/wrappers'\nimport axios from 'axios'\n\n// Be careful when using SSR for cross-request state pollution\n// due to creating a Singleton instance here;\n// If any client changes this (global) instance, it might be a\n// good idea to move this instance creation inside of the\n// \"export default () => {}\" function below (which runs individually\n// for each client)\nconst api = axios.create({ baseURL: 'https://api.example.com' })\n\nexport default boot(({ app }) => {\n // for use inside Vue files (Options API) through this.$axios and this.$api\n\n app.config.globalProperties.$axios = axios\n // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)\n // so you won't necessarily have to import axios in each vue file\n\n app.config.globalProperties.$api = api\n // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)\n // so you can easily perform requests against your app's API\n})\n\nexport { api }\n" }, { "path": "src/boot/i18n.js", "content": "import { boot } from 'quasar/wrappers'\nimport { createI18n } from 'vue-i18n'\n\nimport messages from '../i18n'\n\nconst i18n = createI18n({\n legacy: false,\n locale: 'en-US',\n missing: () => 'No translation',\n messages\n})\n\nexport default boot(({ app }) => {\n // Set i18n instance on app\n app.use(i18n)\n})\n\nexport { i18n }\n" }, { "path": "src/components/Card.vue", "content": "\n\n\n" }, { "path": "src/components/CardSkeleton.vue", "content": "\n\n\n" }, { "path": "src/components/ExternalLink.vue", "content": "\n\n\n" }, { "path": "src/components/LangSwitch.vue", "content": "\n\n\n" }, { "path": "src/components/Navbar.vue", "content": "\n\n\n" }, { "path": "src/components/RouterLink.vue", "content": "\n\n\n" }, { "path": "src/components/charts/area/ApexArea.vue", "content": "\n\n\n" }, { "path": "src/components/charts/bar/ApexBar.vue", "content": "\n\n\n" }, { "path": "src/components/charts/bar/BiggestLibraries.vue", "content": "\n\n\n" }, { "path": "src/components/charts/bubble/ApexBubble.vue", "content": "\n\n\n" }, { "path": "src/components/charts/candlestick/ApexCandlestick.vue", "content": "\n\n\n" }, { "path": "src/components/charts/column/ApexColumn.vue", "content": "\n\n\n" }, { "path": "src/components/charts/column/BiggestCompanies.vue", "content": "\n\n\n" }, { "path": "src/components/charts/donut/ApexDonut.vue", "content": "\n\n\n" }, { "path": "src/components/charts/heatmap/ApexHeatmap.vue", "content": "\n\n\n" }, { "path": "src/components/charts/line/ApexLine.vue", "content": "\n\n\n" }, { "path": "src/components/charts/line/GdpChinaUsa.vue", "content": "\n\n\n" }, { "path": "src/components/charts/pie/PopulationByContinent.vue", "content": "\n\n\n" }, { "path": "src/components/charts/polarArea/ApexPolarArea.vue", "content": "\n\n\n" }, { "path": "src/components/charts/radialBar/ApexRadialBar.vue", "content": "\n\n\n" }, { "path": "src/components/charts/scatterPlot/ApexScatter.vue", "content": "\n\n\n" }, { "path": "src/components/charts/timeline/ApexTimeline.vue", "content": "\n\n\n" }, { "path": "src/composables/UseDriveJs.js", "content": "import { driver } from 'driver.js'\nimport 'driver.js/dist/driver.css'\n\nexport default function useDriver () {\n const driverObj = driver({\n showButtons: ['next', 'previous'],\n nextBtnText: 'Próximo',\n prevBtnText: 'Anterior',\n doneBtnText: 'Concluir',\n overlayColor: '#051124',\n showProgress: true,\n steps: [\n {\n // element: '#tour-example',\n popover: {\n title: 'Bem vindo ao Quasar Apexcharts Examples',\n description: 'Aqui você encontra vários exemplos de implementação do Apexcharts com Vue.js 3 e Quasar Framework.'\n }\n },\n {\n element: '#qa-navbar',\n popover: {\n title: 'Tipos de gráfico',\n description: 'Neste menu você encontra diversos tipos de gráficos.'\n }\n },\n {\n element: '#qa-lang',\n popover: {\n title: 'Mude o idioma',\n description: 'Você pode escolher entre português e inglês.'\n }\n },\n {\n popover: {\n title: 'Deixe uma estrela em nosso github 🌟',\n description: 'Não esqueça de deixar uma estrelinha no Github e compartilhar com seus amigos e redes sociais!'\n }\n }\n ]\n })\n\n const initDriver = () => {\n driverObj.drive()\n }\n\n return {\n initDriver\n }\n}\n" }, { "path": "src/css/app.css", "content": "/* app global css */\n\n.scrollbar {\n overflow-y: scroll;\n}\n\n.scrollbar::-webkit-scrollbar-track\n{\n\t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n\tbox-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n\tbackground-color: #F5F5F5;\n}\n\n.scrollbar::-webkit-scrollbar\n{\n\twidth: 10px;\n\tbackground-color: #F5F5F5;\n}\n\n.scrollbar::-webkit-scrollbar-thumb\n{\n\tbackground-color: #0b2349;\n}\n\n.responsive-container-width {\n width: 90%;\n}\n\n@media only screen and (min-width: 600px) {\n .responsive-container-width {\n width: 80%;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .responsive-container-width {\n width: 65%\n }\n}\n\n@media only screen and (min-width: 1440px) {\n .responsive-container-width {\n width: 50%\n }\n}\n\n@media only screen and (min-width: 1920px) {\n .responsive-container-width {\n width: 1100px\n }\n}\n" }, { "path": "src/i18n/en-US/index.js", "content": "export default {\n sidebar: {\n charts_all: 'All charts',\n charts_area: 'Area charts',\n charts_bar: 'Bar charts',\n charts_bubble: 'Bubble charts',\n charts_candlestick: 'Candlestick charts',\n charts_column: 'Column charts',\n charts_donut: 'Donut charts',\n charts_heatmap: 'Heatmap',\n charts_line: 'Line charts',\n charts_pie: 'Pie charts',\n charts_polarArea: 'Polar area charts',\n charts_radialBar: 'Radial bar charts',\n charts_scatterPlot: 'Scatter plot charts',\n home: 'Home',\n link_apexChartDocs: 'Docs',\n link_apexChartGithub: 'GitHub',\n link_apexChartSite: 'Site',\n link_quasarAwesome: 'Quasar Awesome',\n link_quasarDiscord: 'Discord chat channel',\n link_quasarDocs: 'Docs',\n link_quasarFacebook: 'Facebook',\n link_quasarForum: 'Forum',\n link_quasarGithub: 'GitHub',\n link_quasarTwitter: 'Twitter',\n link_vueDiscord: 'Discord',\n link_vueDocs: 'Docs',\n link_vueGithub: 'GitHub',\n link_vueSite: 'Site',\n link_vueTwitter: 'Twitter',\n linkCaption_apexChartDocs: 'apexcharts.com/docs',\n linkCaption_apexChartGithub: 'github.com/apexcharts',\n linkCaption_apexChartSite: 'ApexCharts\\' site',\n linkCaption_quasarAwesome: 'Community Quasar projects',\n linkCaption_quasarDiscord: 'https://chat.quasar.dev',\n linkCaption_quasarDocs: 'quasar.dev',\n linkCaption_quasarFacebook: '{\\'@\\'}QuasarFramework',\n linkCaption_quasarForum: 'https://forum.quasar.dev',\n linkCaption_quasarGithub: 'github.com/quasarframework',\n linkCaption_quasarTwitter: '{\\'@\\'}quasarframework',\n linkCaption_vueDiscord: 'Discord chat channel',\n linkCaption_vueDocs: 'vuejs.org/guide',\n linkCaption_vueGithub: 'https://github.com/vuejs/',\n linkCaption_vueSite: 'Vue\\'s site',\n linkCaption_vueTwitter: '{\\'@\\'}vuejs',\n section_charts: 'Charts',\n section_moreAboutApexCharts: 'More about ApexCharts',\n section_moreAboutQuasar: 'More about Quasar',\n section_moreAboutVue: 'More about Vue'\n },\n presentation: {\n title: 'Welcome',\n subtitle: 'Hello and welcome to Quasar Apexcharts V2!',\n abstract: 'This is a repository aiming to explain how to integrate the ApexCharts library with the Quasar Framework and Vue 3.',\n 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.',\n 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.',\n checkOutMenus: 'Check out more about these libraries through the links on the menu to the left, as well as several chart categories examples!',\n checkOutExamples: 'Also check some featured charts below:',\n showingOneOfEach: 'Showing one chart example for each of the available categories on this repository. Check the categories on the navigation menu for more examples!'\n },\n ui: {\n ariaLabel_langSwitch: 'Open language selection menu'\n }\n}\n" }, { "path": "src/i18n/index.js", "content": "import enUS from './en-US'\nimport ptBR from './pt-BR'\n\nexport default {\n 'en-US': enUS,\n 'pt-BR': ptBR\n}\n" }, { "path": "src/i18n/pt-BR/index.js", "content": "export default {\n sidebar: {\n charts_all: 'Todos',\n charts_area: 'Área',\n charts_bar: 'Barras',\n charts_bubble: 'Bolhas',\n charts_candlestick: 'Velas',\n charts_column: 'Colunas',\n charts_donut: 'Rosca',\n charts_heatmap: 'Mapas de calor',\n charts_line: 'Linha',\n charts_pie: 'Pizza',\n charts_polarArea: 'Área polar',\n charts_radialBar: 'Barras radiais',\n charts_scatterPlot: 'Dispersão',\n home: 'Início',\n link_apexChartDocs: 'Documentação',\n link_apexChartGithub: 'GitHub',\n link_apexChartSite: 'Site',\n link_quasarAwesome: 'Quasar Awesome',\n link_quasarDiscord: 'Canal do Discord',\n link_quasarDocs: 'Documentação',\n link_quasarFacebook: 'Facebook',\n link_quasarForum: 'Fórum',\n link_quasarGithub: 'GitHub',\n link_quasarTwitter: 'Twitter',\n link_vueDiscord: 'Discord',\n link_vueDocs: 'Documentação',\n link_vueGithub: 'GitHub',\n link_vueSite: 'Site',\n link_vueTwitter: 'Twitter',\n linkCaption_apexChartDocs: 'apexcharts.com/docs',\n linkCaption_apexChartGithub: 'github.com/apexcharts',\n linkCaption_apexChartSite: 'Site do ApexCharts',\n linkCaption_quasarAwesome: 'Projetos da comunidade do Quasar',\n linkCaption_quasarDiscord: 'https://chat.quasar.dev',\n linkCaption_quasarDocs: 'quasar.dev',\n linkCaption_quasarFacebook: '{\\'@\\'}QuasarFramework',\n linkCaption_quasarForum: 'https://forum.quasar.dev',\n linkCaption_quasarGithub: 'github.com/quasarframework',\n linkCaption_quasarTwitter: '{\\'@\\'}quasarframework',\n linkCaption_vueDiscord: 'Canal do Discord',\n linkCaption_vueDocs: 'vuejs.org/guide',\n linkCaption_vueGithub: 'https://github.com/vuejs/',\n linkCaption_vueSite: 'Site do Vue',\n linkCaption_vueTwitter: '{\\'@\\'}vuejs',\n section_charts: 'Gráficos',\n section_moreAboutApexCharts: 'Mais sobre ApexCharts',\n section_moreAboutQuasar: 'Mais sobre o Quasar',\n section_moreAboutVue: 'Mais sobre o Vue'\n },\n presentation: {\n title: 'Bem-vindo(a)',\n subtitle: 'Olá e bem-vindo(a) ao Quasar Apexcharts V2!',\n abstract: 'Este é um repositório que visa explicar como integrar a biblioteca ApexCharts ao Quasar Framework e Vue 3.',\n 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.',\n 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.',\n checkOutMenus: 'Saiba mais sobre essas bibliotecas no menu à esquerda, e também navegue entre diferentes categorias de gráficos!',\n checkOutExamples: 'Confira também alguns exemplos em destaque abaixo:',\n 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!'\n },\n ui: {\n ariaLabel_langSwitch: 'Abrir menu de seleção de idioma'\n }\n}\n" }, { "path": "src/index.template.html", "content": "\n\n \n <%= productName %>\n\n \n \">\n \n \n , viewport-fit=cover<% } %>\">\n\n \n \n \n \n \n \n \n \n
\n \n\n" }, { "path": "src/layouts/MainLayout.vue", "content": "\n\n\n" }, { "path": "src/pages/Error404.vue", "content": "\n\n\n" }, { "path": "src/pages/Index.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/AllCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/AreaCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/BarCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/BubbleCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/CandlestickCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/ColumnCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/DonutCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/HeatmapCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/LineCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/PieCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/PolarAreaCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/RadialBarCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/ScatterCharts.vue", "content": "\n\n\n" }, { "path": "src/pages/chartTypes/TimelineCharts.vue", "content": "\n\n\n" }, { "path": "src/quasar.d.ts", "content": "// Forces TS to apply `@quasar/app` augmentations of `quasar` package\n// Removing this would break `quasar/wrappers` imports as those typings are declared\n// into `@quasar/app`\n// As a side effect, since `@quasar/app` reference `quasar` to augment it,\n// this declaration also apply `quasar` own\n// augmentations (eg. adds `$q` into Vue component context)\n/// \n" }, { "path": "src/router/index.js", "content": "import { route } from 'quasar/wrappers'\nimport { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'\nimport routes from './routes'\n\n/*\n * If not building with SSR mode, you can\n * directly export the Router instantiation;\n *\n * The function below can be async too; either use\n * async/await or return a Promise which resolves\n * with the Router instance.\n */\n\nexport default route(function (/* { store, ssrContext } */) {\n const createHistory = process.env.SERVER\n ? createMemoryHistory\n : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)\n\n const Router = createRouter({\n scrollBehavior: () => ({ left: 0, top: 0 }),\n routes,\n\n // Leave this as is and make changes in quasar.conf.js instead!\n // quasar.conf.js -> build -> vueRouterMode\n // quasar.conf.js -> build -> publicPath\n history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)\n })\n\n return Router\n})\n" }, { "path": "src/router/routes.js", "content": "\nconst routes = [\n {\n path: '/',\n component: () => import('layouts/MainLayout.vue'),\n children: [\n {\n path: '',\n name: 'home',\n component: () => import('pages/Index.vue')\n },\n {\n path: '/all-charts',\n name: 'allCharts',\n component: () => import('pages/chartTypes/AllCharts.vue')\n },\n {\n path: '/area-charts',\n name: 'areaCharts',\n component: () => import('pages/chartTypes/AreaCharts.vue')\n },\n {\n path: '/bar-charts',\n name: 'barCharts',\n component: () => import('pages/chartTypes/BarCharts.vue')\n },\n {\n path: '/bubble-charts',\n name: 'bubbleCharts',\n component: () => import('pages/chartTypes/BubbleCharts.vue')\n },\n {\n path: '/candlestick-charts',\n name: 'candlestickCharts',\n component: () => import('pages/chartTypes/CandlestickCharts.vue')\n },\n {\n path: '/column-charts',\n name: 'columnCharts',\n component: () => import('pages/chartTypes/ColumnCharts.vue')\n },\n {\n path: '/donut-charts',\n name: 'donutCharts',\n component: () => import('pages/chartTypes/DonutCharts.vue')\n },\n {\n path: '/heatmap-charts',\n name: 'heatmapCharts',\n component: () => import('pages/chartTypes/HeatmapCharts.vue')\n },\n {\n path: '/line-charts',\n name: 'lineCharts',\n component: () => import('pages/chartTypes/LineCharts.vue')\n },\n {\n path: '/pie-charts',\n name: 'pieCharts',\n component: () => import('pages/chartTypes/PieCharts.vue')\n },\n {\n path: '/polar-area-charts',\n name: 'polarAreaCharts',\n component: () => import('pages/chartTypes/PolarAreaCharts.vue')\n },\n {\n path: '/radial-bar-charts',\n name: 'radialBarCharts',\n component: () => import('pages/chartTypes/RadialBarCharts.vue')\n },\n {\n path: '/scatter-charts',\n name: 'scatterCharts',\n component: () => import('pages/chartTypes/ScatterCharts.vue')\n }\n // Precisa de ajustes, está com problema na renderização\n // {\n // path: '/timeline-charts',\n // name: 'timelineCharts',\n // component: () => import('pages/chartTypes/TimelineCharts.vue')\n // }\n ]\n },\n\n // Always leave this as last one,\n // but you can also remove it\n {\n path: '/:catchAll(.*)*',\n component: () => import('pages/Error404.vue')\n }\n]\n\nexport default routes\n" } ]