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