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-BADGE:START - Do not remove or modify this section -->
[](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
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
<a href="https://github.com/patrickmonteiro/quasar-apexcharts/graphs/contributors">
<img src="https://contrib.rocks/image?repo=patrickmonteiro/quasar-apexcharts" />
</a>
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 <eng.patrickmonteiro@gmail.com>",
"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
================================================
<template>
<router-view />
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'App'
})
</script>
================================================
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
================================================
<template>
<q-card class="fit" :style="{backgroundImage: bgColor, minHeight: '150px'}" >
<q-card-section>
<slot></slot>
</q-card-section>
</q-card>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'CardBase',
props: {
bgColor: {
default: 'linear-gradient( 135deg, #343E59 10%, #2B2D3E 40%)'
}
}
})
</script>
================================================
FILE: src/components/CardSkeleton.vue
================================================
<template>
<div class="row q-col-gutter-md">
<div class="col-md-3" v-for="i in 4" :key="i">
<!-- <card-base> -->
<q-skeleton
class="full-width"
height="140px"
style="background: #343E59;"
/>
<!-- </card-base> -->
</div>
<div class="col-md-6 col-sm-12 col-xs-12" v-for="item in 6" :key="item">
<!-- <card-base> -->
<q-skeleton
class="full-width"
height="230px"
style="background: #343E59;"
/>
<!-- </card-base> -->
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'CardSkeleton',
props: {
bgColor: {
default: 'linear-gradient( 135deg, #343E59 10%, #2B2D3E 40%)'
}
}
})
</script>
================================================
FILE: src/components/ExternalLink.vue
================================================
<template>
<q-item
clickable
tag="a"
target="_blank"
:href="link"
>
<q-item-section
v-if="icon"
avatar
>
<q-icon :name="icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ $t(title) }}</q-item-label>
<q-item-label caption class="text-grey-1">
{{ $t(caption) }}
</q-item-label>
</q-item-section>
</q-item>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Navbar',
props: {
title: {
type: String,
required: true
},
caption: {
type: String,
default: ''
},
link: {
type: String,
default: '#'
},
icon: {
type: String,
default: ''
}
}
})
</script>
================================================
FILE: src/components/LangSwitch.vue
================================================
<template>
<q-btn-dropdown
id="qa-lang"
unelevated rounded no-wrap split
color="secondary"
style="min-width: 125px;"
:toggle-aria-label="$t('ui.ariaLabel_langSwitch')"
>
<template v-slot:label>
<span class="q-ml-sm">{{ locale }}</span>
</template>
<q-list style="min-width: 200px;">
<q-item
clickable v-close-popup
v-for="option in localeOptions" :key="option.value"
@click="setLocale(option.value)"
>
<q-item-section>{{ option.label }}</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</template>
<script>
import { useI18n } from 'vue-i18n'
export default {
setup () {
const { locale } = useI18n({ useScope: 'global' })
const setLocale = (newLocale) => {
locale.value = newLocale
}
return {
setLocale,
locale,
localeOptions: [
{ value: 'en-US', label: 'English' },
{ value: 'pt-BR', label: 'Português' }
]
}
}
}
</script>
================================================
FILE: src/components/Navbar.vue
================================================
<template>
<q-list id="qa-navbar">
<RouterLink
route="/"
icon="home"
:title="$t('sidebar.home')"
/>
<q-item-label
header
>
{{ $t('sidebar.section_charts') }}
</q-item-label>
<RouterLink
route="/area-charts"
icon="area_chart"
:title="$t('sidebar.charts_area')"
/>
<RouterLink
route="/bar-charts"
icon="table_rows"
:title="$t('sidebar.charts_bar')"
/>
<RouterLink
route="/bubble-charts"
icon="bubble_chart"
:title="$t('sidebar.charts_bubble')"
/>
<RouterLink
route="/candlestick-charts"
icon="waterfall_chart"
:title="$t('sidebar.charts_candlestick')"
/>
<RouterLink
route="/column-charts"
icon="leaderboard"
:title="$t('sidebar.charts_column')"
/>
<RouterLink
route="/donut-charts"
icon="donut_small"
:title="$t('sidebar.charts_donut')"
/>
<RouterLink
route="/heatmap-charts"
icon="view_comfy"
:title="$t('sidebar.charts_heatmap')"
/>
<RouterLink
route="/line-charts"
icon="show_chart"
:title="$t('sidebar.charts_line')"
/>
<RouterLink
route="/pie-charts"
icon="incomplete_circle"
:title="$t('sidebar.charts_pie')"
/>
<RouterLink
route="/polar-area-charts"
icon="track_changes"
:title="$t('sidebar.charts_polarArea')"
/>
<RouterLink
route="/radial-bar-charts"
icon="data_saver_off"
:title="$t('sidebar.charts_radialBar')"
/>
<RouterLink
route="/scatter-charts"
icon="scatter_plot"
:title="$t('sidebar.charts_scatterPlot')"
/>
<!-- Precisa de ajustes, está com problema na renderização -->
<!-- <RouterLink
route="/timeline-charts"
title="Timeline charts"
icon="timeline"
/> -->
<RouterLink
route="/all-charts"
icon="shape_line"
:title="$t('sidebar.charts_all')"
/>
<q-item-label
header
>
{{ $t('sidebar.section_moreAboutApexCharts') }}
</q-item-label>
<ExternalLink
v-for="link in apexChartsLinks"
:key="link.title"
v-bind="link"
/>
<q-item-label
header
>
{{ $t('sidebar.section_moreAboutQuasar') }}
</q-item-label>
<ExternalLink
v-for="link in quasarLinks"
:key="link.title"
v-bind="link"
/>
<q-item-label
header
>
{{ $t('sidebar.section_moreAboutVue') }}
</q-item-label>
<ExternalLink
v-for="link in vueLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</template>
<script>
import { defineComponent } from 'vue'
import ExternalLink from 'src/components/ExternalLink.vue'
import RouterLink from 'src/components/RouterLink.vue'
export default defineComponent({
name: 'DrawerNavbar',
components: {
ExternalLink,
RouterLink
},
setup () {
const apexChartsLinks = [
{
title: 'sidebar.link_apexChartSite',
caption: 'sidebar.linkCaption_apexChartSite',
icon: 'home_filled',
link: 'https://apexcharts.com'
},
{
title: 'sidebar.link_apexChartDocs',
caption: 'sidebar.linkCaption_apexChartDocs',
icon: 'school',
link: 'https://apexcharts.com/docs/installation/'
},
{
title: 'sidebar.link_apexChartGithub',
caption: 'sidebar.linkCaption_apexChartGithub',
icon: 'code',
link: 'https://github.com/apexcharts'
}
]
const quasarLinks = [
{
title: 'sidebar.link_quasarDocs',
caption: 'sidebar.linkCaption_quasarDocs',
icon: 'school',
link: 'https://quasar.dev'
},
{
title: 'sidebar.link_quasarGithub',
caption: 'sidebar.linkCaption_quasarGithub',
icon: 'code',
link: 'https://github.com/quasarframework'
},
{
title: 'sidebar.link_quasarDiscord',
caption: 'sidebar.linkCaption_quasarDiscord',
icon: 'question_answer',
link: 'https://chat.quasar.dev'
},
{
title: 'sidebar.link_quasarForum',
caption: 'sidebar.linkCaption_quasarForum',
icon: 'record_voice_over',
link: 'https://forum.quasar.dev'
},
{
title: 'sidebar.link_quasarTwitter',
caption: 'sidebar.linkCaption_quasarTwitter',
icon: 'rss_feed',
link: 'https://twitter.quasar.dev'
},
{
title: 'sidebar.link_quasarFacebook',
caption: 'sidebar.linkCaption_quasarFacebook',
icon: 'public',
link: 'https://facebook.quasar.dev'
},
{
title: 'sidebar.link_quasarAwesome',
caption: 'sidebar.linkCaption_quasarAwesome',
icon: 'favorite',
link: 'https://awesome.quasar.dev'
}
]
const vueLinks = [
{
title: 'sidebar.link_vueSite',
caption: 'sidebar.linkCaption_vueSite',
icon: 'home_filled',
link: 'https://vuejs.org/'
},
{
title: 'sidebar.link_vueDocs',
caption: 'sidebar.linkCaption_vueDocs',
icon: 'school',
link: 'https://vuejs.org/guide/introduction.html'
},
{
title: 'sidebar.link_vueGithub',
caption: 'sidebar.linkCaption_vueGithub',
icon: 'code',
link: 'https://github.com/vuejs/'
},
{
title: 'sidebar.link_vueDiscord',
caption: 'sidebar.linkCaption_vueDiscord',
icon: 'question_answer',
link: 'https://discord.com/invite/HBherRA'
},
{
title: 'sidebar.link_vueTwitter',
caption: 'sidebar.linkCaption_vueTwitter',
icon: 'rss_feed',
link: 'https://twitter.com/vuejs'
}
]
return {
apexChartsLinks,
quasarLinks,
vueLinks
}
}
})
</script>
================================================
FILE: src/components/RouterLink.vue
================================================
<template>
<q-item
clickable replace
class="text-grey-1"
exact-active-class="bg-secondary"
:to="route"
>
<q-item-section
v-if="icon"
avatar
>
<q-icon :name="icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ title }}</q-item-label>
</q-item-section>
</q-item>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Navbar',
props: {
title: {
type: String,
required: true
},
caption: {
type: String,
default: ''
},
route: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
}
}
})
</script>
================================================
FILE: src/components/charts/area/ApexArea.vue
================================================
<template>
<apexchart height="300" type="area" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexArea',
data () {
return {
options: {
title: {
text: 'ApexArea',
align: 'left'
},
chart: {
height: 300,
type: 'area'
},
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative')],
markers: {
size: 4,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
}
},
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}, {
name: 'series3',
data: [15, 92, 15, 72, 84, 42, 41]
}]
}
}
})
</script>
================================================
FILE: src/components/charts/bar/ApexBar.vue
================================================
<template>
<apexchart height="300" type="bar" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexBar',
data () {
return {
options: {
title: {
text: 'ApexBar',
align: 'left'
},
chart: {
id: 'apex-bar'
},
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative')],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: '55%',
endingShape: 'rounded'
}
}
},
series: [{
name: 'series-1',
data: [30, 40, 45, 50, 49, 60, 70, 91]
}]
}
}
})
</script>
================================================
FILE: src/components/charts/bar/BiggestLibraries.vue
================================================
<template>
<apexchart height="300" type="bar" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'BiggestLibraries',
data () {
return {
options: {
title: {
text: 'World\'s biggest libraries by catalogue size (Guiness - 2021)',
align: 'left'
},
chart: {
id: 'apex-bar'
},
colors: [getCssVar('secondary')],
xaxis: {
categories: [
'British Library',
'Library of Congress',
'Shanghai Library',
'New York Public Library',
'Library and Archives Canada',
'Russian State Library',
'National Diet Library',
'German National Library',
'Royal Library, Denmark',
'National Library of China'
],
title: {
text: 'Catalogue size (millions)'
}
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: '55%',
endingShape: 'rounded'
}
}
},
series: [
/**
* Data source:
* https://en.wikipedia.org/wiki/List_of_largest_libraries
*/
{
name: 'Number of items (millions)',
data: [
200,
173,
56,
55,
54,
48.1,
44.1,
43.7,
42.5,
40
]
}
]
}
}
})
</script>
================================================
FILE: src/components/charts/bubble/ApexBubble.vue
================================================
<template>
<apexchart height="300" type="bubble" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexBubble',
data () {
return {
options: {
dataLabels: {
enabled: false
},
fill: {
opacity: 0.8
},
yaxis: {
max: 70
},
title: {
text: 'ApexBubble',
align: 'left'
},
chart: {
height: 300,
type: 'area'
},
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative')],
// markers: {
// size: 4,
// hover: {
// sizeOffset: 6
// }
// },
xaxis: {
tickAmount: 12,
type: 'category'
}
},
series: [{
name: 'Bubble1',
data: this.generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble2',
data: this.generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble3',
data: this.generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble4',
data: this.generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
}]
}
},
methods: {
generateData (baseval, count, yrange) {
let i = 0
const series = []
while (i < count) {
const x = Math.floor(Math.random() * (750 - 1 + 1)) + 1
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15
series.push([x, y, z])
baseval += 86400000
i++
}
return series
}
}
})
</script>
================================================
FILE: src/components/charts/candlestick/ApexCandlestick.vue
================================================
<template>
<apexchart type="candlestick" height="300" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexCandlestick',
data () {
return {
options: {
chart: {
type: 'candlestick',
height: 300
},
title: {
text: 'ApexCandlestick',
align: 'left'
},
xaxis: {
type: 'datetime'
},
yaxis: {
tooltip: {
enabled: true
}
},
plotOptions: {
candlestick: {
colors: {
upward: getCssVar('primary'),
downward: getCssVar('negative')
}
}
}
},
series: [{
data: [{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33]
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11]
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65]
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24]
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47]
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31]
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02]
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02]
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01]
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02]
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91]
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612]
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612]
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95]
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67]
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4]
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9]
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45]
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35]
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53]
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19]
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620]
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620]
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61]
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58]
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86]
},
{
x: new Date(1538825400000),
y: [6598.86, 6598.88, 6570, 6587.16]
},
{
x: new Date(1538827200000),
y: [6588.86, 6600, 6580, 6593.4]
},
{
x: new Date(1538829000000),
y: [6593.99, 6598.89, 6585, 6587.81]
},
{
x: new Date(1538830800000),
y: [6587.81, 6592.73, 6567.14, 6578]
},
{
x: new Date(1538832600000),
y: [6578.35, 6581.72, 6567.39, 6579]
},
{
x: new Date(1538834400000),
y: [6579.38, 6580.92, 6566.77, 6575.96]
},
{
x: new Date(1538836200000),
y: [6575.96, 6589, 6571.77, 6588.92]
},
{
x: new Date(1538838000000),
y: [6588.92, 6594, 6577.55, 6589.22]
},
{
x: new Date(1538839800000),
y: [6589.3, 6598.89, 6589.1, 6596.08]
},
{
x: new Date(1538841600000),
y: [6597.5, 6600, 6588.39, 6596.25]
},
{
x: new Date(1538843400000),
y: [6598.03, 6600, 6588.73, 6595.97]
},
{
x: new Date(1538845200000),
y: [6595.97, 6602.01, 6588.17, 6602]
},
{
x: new Date(1538847000000),
y: [6602, 6607, 6596.51, 6599.95]
},
{
x: new Date(1538848800000),
y: [6600.63, 6601.21, 6590.39, 6591.02]
},
{
x: new Date(1538850600000),
y: [6591.02, 6603.08, 6591, 6591]
},
{
x: new Date(1538852400000),
y: [6591, 6601.32, 6585, 6592]
},
{
x: new Date(1538854200000),
y: [6593.13, 6596.01, 6590, 6593.34]
},
{
x: new Date(1538856000000),
y: [6593.34, 6604.76, 6582.63, 6593.86]
},
{
x: new Date(1538857800000),
y: [6593.86, 6604.28, 6586.57, 6600.01]
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6592.78, 6596.25]
},
{
x: new Date(1538861400000),
y: [6596.25, 6604.2, 6590, 6602.99]
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6584.99, 6587.81]
},
{
x: new Date(1538865000000),
y: [6587.81, 6595, 6583.27, 6591.96]
},
{
x: new Date(1538866800000),
y: [6591.97, 6596.07, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6598.21, 6587.6, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6601, 6590, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6605, 6596.61, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6589.14, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6599.09, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.99, 6597.5, 6603.86]
},
{
x: new Date(1538883000000),
y: [6603.85, 6605, 6600, 6604.07]
},
{
x: new Date(1538884800000),
y: [6604.98, 6606, 6604.07, 6606]
}
]
}]
}
}
})
</script>
================================================
FILE: src/components/charts/column/ApexColumn.vue
================================================
<template>
<apexchart height="300" type="bar" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexColumn',
data () {
return {
options: {
title: {
text: 'ApexColumn',
align: 'left'
},
chart: {
id: 'apex-column'
},
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative')],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
}
}
},
series: [{
name: 'series-1',
data: [30, 40, 45, 50, 49, 60, 70, 91]
}]
}
}
})
</script>
================================================
FILE: src/components/charts/column/BiggestCompanies.vue
================================================
<template>
<apexchart height="300" type="bar" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'BiggestCompanies',
data () {
return {
options: {
title: {
text: '7 Biggest Companies in 2022 (The Global 2000 - Forbes)',
align: 'left'
},
chart: {
id: 'biggest-companies',
stacked: true
},
xaxis: {
categories: [
'Berkshire Hathaway',
'ICBC',
'Saudi Aramco',
'JPMorgan Chase',
'China Construction Bank',
'Amazon',
'Apple'
]
},
yaxis: {
title: {
text: 'USD (billions)'
}
},
colors: [
getCssVar('positive'),
getCssVar('info'),
getCssVar('primary'),
getCssVar('accent')
],
legend: {
position: 'right',
offsetY: 40
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '75%',
endingShape: 'rounded'
}
}
},
series: [
/**
* Data source:
* https://www.forbes.com/lists/global2000/?sh=5e725ae65ac0
*/
{
name: 'Sales',
data: [276.09, 208.13, 400.38, 124.54, 202.07, 469.82, 378.7]
},
{
name: 'Profit',
data: [89.8, 54.03, 105.36, 42.12, 46.89, 33.36, 100.56]
},
{
name: 'Assets',
data: [958.78, 5518.51, 576.04, 3954.69, 4746.95, 420.55, 381.19]
},
{
name: 'Market value',
data: [741.48, 214.43, 2292.08, 374.45, 181.32, 1468.4, 2640.32]
}
]
}
}
})
</script>
================================================
FILE: src/components/charts/donut/ApexDonut.vue
================================================
<template>
<apexchart height="300" type="donut" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexDonut',
data () {
return {
options: {
title: {
text: 'ApexDonut',
align: 'left'
},
chart: {
id: 'apex-donut'
},
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative'), getCssVar('accent')],
markers: {
size: 4,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
}
},
series: [30, 40, 45, 50]
}
}
})
</script>
================================================
FILE: src/components/charts/heatmap/ApexHeatmap.vue
================================================
<template>
<apexchart
height='300'
type='heatmap'
:options='options'
:series='series'
></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ApexHeatmap',
data () {
return {
options: {
chart: {
height: 350,
type: 'heatmap'
},
dataLabels: {
enabled: false
},
colors: ['#008FFB'],
title: {
text: 'HeatMap Chart (Single color)'
}
},
series: [
{
name: 'Metric1',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric2',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric3',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric4',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric5',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric6',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric7',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: this.generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric9',
data: this.generateData(18, {
min: 0,
max: 90
})
}
]
}
},
methods: {
generateData (count, yrange) {
let i = 0
const series = []
while (i < count) {
const x = (i + 1).toString()
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
series.push({
x: x,
y: y
})
i++
}
return series
}
}
})
</script>
================================================
FILE: src/components/charts/line/ApexLine.vue
================================================
<template>
<apexchart height="300" type="line" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'Apexline',
data () {
return {
options: {
title: {
text: 'ApexLine',
align: 'left'
},
chart: {
id: 'apex-line'
},
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative')],
markers: {
size: 4,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
}
},
series: [{
name: 'series-1',
data: [30, 40, 45, 50, 49, 60, 70, 91]
}]
}
}
})
</script>
================================================
FILE: src/components/charts/line/GdpChinaUsa.vue
================================================
<template>
<apexchart height="300" type="line" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'gdp',
data () {
return {
options: {
title: {
text: 'GDP Growth (Annual %)',
align: 'left'
},
chart: {
id: 'gdp-china-usa'
},
colors: ['#AA381E', getCssVar('primary')],
dataLabels: {
enabled: true
},
xaxis: {
categories: [
2012,
2013,
2014,
2015,
2016,
2017,
2018,
2019,
2020,
2021
]
},
toolbar: {
show: false
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
}
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
},
series: [
/**
* Data source:
* https://databank.worldbank.org/
*/
{
name: 'CHN (China)',
data: [
7.86,
7.76,
7.42,
7.04,
6.84,
6.94,
6.74,
5.95,
2.23,
8.10
]
},
{
name: 'USA (United States)',
data: [
2.28,
1.84,
2.28,
2.70,
1.66,
2.25,
2.91,
2.28,
-3.4,
5.67
]
}
]
}
}
})
</script>
================================================
FILE: src/components/charts/pie/PopulationByContinent.vue
================================================
<template>
<apexchart height="300" type="pie" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'PopulationByContinent',
data () {
return {
options: {
title: {
text: 'Population by continent (2021)',
align: 'left'
},
chart: {
id: 'apex-donut'
},
colors: [
getCssVar('secondary'),
getCssVar('accent'),
getCssVar('positive'),
getCssVar('primary'),
getCssVar('negative'),
getCssVar('info')
],
markers: {
size: 4,
hover: {
sizeOffset: 6
}
},
labels: [
'Asia',
'Africa',
'Europe',
'North America',
'South America',
'Oceania'
]
},
series: [
/**
* Data source:
* https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population
*/
4694576167,
1393676444,
745173774,
595783465,
434254119,
44491724
]
}
}
})
</script>
================================================
FILE: src/components/charts/polarArea/ApexPolarArea.vue
================================================
<template>
<apexchart height="300" type="polarArea" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexPolarArea',
data () {
return {
options: {
title: {
text: 'ApexPolarArea',
align: 'left'
},
chart: {
type: 'polarArea'
},
stroke: {
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative')]
},
fill: {
opacity: 0.8
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
},
series: [14, 23, 21, 17, 15, 10, 12, 17, 21]
}
}
})
</script>
================================================
FILE: src/components/charts/radialBar/ApexRadialBar.vue
================================================
<template>
<apexchart height="300" type="radialBar" :options="options" :series="series"></apexchart>
</template>
<script>
import { defineComponent } from 'vue'
import { getCssVar } from 'quasar'
export default defineComponent({
name: 'ApexRadialBar',
data () {
return {
options: {
chart: {
height: 300,
type: 'radialBar',
offsetY: -20,
sparkline: {
enabled: true
}
},
title: {
text: 'ApexScatter',
align: 'left',
offsetY: 20
},
colors: [getCssVar('primary'), getCssVar('secondary'), getCssVar('negative')],
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
track: {
background: '#e7e7e7',
strokeWidth: '97%',
margin: 5, // margin is in pixels
dropShadow: {
enabled: true,
top: 2,
left: 0,
color: '#999',
opacity: 1,
blur: 2
}
},
dataLabels: {
name: {
show: false
},
value: {
offsetY: -2,
fontSize: '30px'
}
}
}
},
grid: {
padding: {
// top: 100
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
shadeIntensity: 0.4,
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 53, 91]
}
},
labels: ['Average Results']
},
series: [76]
}
},
methods: {
generateData (baseval, count, yrange) {
let i = 0
const series = []
while (i < count) {
const x = Math.floor(Math.random() * (750 - 1 + 1)) + 1
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15
series.push([x, y, z])
baseval += 86400000
i++
}
return series
}
}
})
</script>
================================================
FILE: src/components/charts/scatterPlot/ApexScatter.vue
================================================
<template>
<apexchart height='300' type='scatter' :options='options' :series='series' />
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ApexScatter',
data () {
return {
series: [
{
name: 'Sample A',
data: [
[16.4, 5.4],
[21.7, 2],
[25.4, 3],
[19, 2],
[10.9, 1],
[13.6, 3.2],
[10.9, 7.4],
[10.9, 0],
[10.9, 8.2],
[16.4, 0],
[16.4, 1.8],
[13.6, 0.3],
[13.6, 0],
[29.9, 0],
[27.1, 2.3],
[16.4, 0],
[13.6, 3.7],
[10.9, 5.2],
[16.4, 6.5],
[10.9, 0],
[24.5, 7.1],
[10.9, 0],
[8.1, 4.7],
[19, 0],
[21.7, 1.8],
[27.1, 0],
[24.5, 0],
[27.1, 0],
[29.9, 1.5],
[27.1, 0.8],
[22.1, 2]
]
},
{
name: 'Sample B',
data: [
[36.4, 13.4],
[1.7, 11],
[5.4, 8],
[9, 17],
[1.9, 4],
[3.6, 12.2],
[1.9, 14.4],
[1.9, 9],
[1.9, 13.2],
[1.4, 7],
[6.4, 8.8],
[3.6, 4.3],
[1.6, 10],
[9.9, 2],
[7.1, 15],
[1.4, 0],
[3.6, 13.7],
[1.9, 15.2],
[6.4, 16.5],
[0.9, 10],
[4.5, 17.1],
[10.9, 10],
[0.1, 14.7],
[9, 10],
[12.7, 11.8],
[2.1, 10],
[2.5, 10],
[27.1, 10],
[2.9, 11.5],
[7.1, 10.8],
[2.1, 12]
]
},
{
name: 'Sample C',
data: [
[21.7, 3],
[23.6, 3.5],
[24.6, 3],
[29.9, 3],
[21.7, 20],
[23, 2],
[10.9, 3],
[28, 4],
[27.1, 0.3],
[16.4, 4],
[13.6, 0],
[19, 5],
[22.4, 3],
[24.5, 3],
[32.6, 3],
[27.1, 4],
[29.6, 6],
[31.6, 8],
[21.6, 5],
[20.9, 4],
[22.4, 0],
[32.6, 10.3],
[29.7, 20.8],
[24.5, 0.8],
[21.4, 0],
[21.7, 6.9],
[28.6, 7.7],
[15.4, 0],
[18.1, 0],
[33.4, 0],
[16.4, 0]
]
}
],
chartOptions: {
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 10,
labels: {
formatter: function (val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
},
options: {
title: {
text: 'ApexScatter',
align: 'left'
}
}
}
}
})
</script>
================================================
FILE: src/components/charts/timeline/ApexTimeline.vue
================================================
<template>
<apexchart
height="300"
type="rangeBar"
:options="options"
:series="series"
/>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ApexTimeline',
data () {
return {
series: [
{
data: [
{
x: 'Code',
y: [
new Date('2019-03-02').getTime(),
new Date('2019-03-04').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-04').getTime(),
new Date('2019-03-08').getTime()
]
},
{
x: 'Validation',
y: [
new Date('2019-03-08').getTime(),
new Date('2019-03-12').getTime()
]
},
{
x: 'Deployment',
y: [
new Date('2019-03-12').getTime(),
new Date('2019-03-18').getTime()
]
}
]
}
],
options: {
chart: {
height: 350,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
type: 'datetime'
}
}
}
}
})
</script>
================================================
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 <a target="_blank" href="https://github.com/patrickmonteiro/quasar-apexcharts">Github</a> 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
================================================
<!DOCTYPE html>
<html>
<head>
<title><%= productName %></title>
<meta charset="utf-8">
<meta name="description" content="<%= productDescription %>">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
</body>
</html>
================================================
FILE: src/layouts/MainLayout.vue
================================================
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar class="no-wrap">
<div class="col row">
<q-btn
flat dense round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-toolbar-title>
Quasar ApexCharts
</q-toolbar-title>
</div>
<div class="col row justify-center">
<LangSwitch class="" />
</div>
<div class="col row justify-end">Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
dark
class="bg-primary scrollbar"
>
<DrawerNavbar />
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue'
import DrawerNavbar from 'src/components/Navbar.vue'
import LangSwitch from 'src/components/LangSwitch.vue'
import useDriver from 'src/composables/UseDriveJs'
export default defineComponent({
name: 'MainLayout',
components: {
DrawerNavbar,
LangSwitch
},
setup () {
const leftDrawerOpen = ref(false)
const { initDriver } = useDriver()
onMounted(() => {
initDriver()
})
return {
leftDrawerOpen,
toggleLeftDrawer () {
leftDrawerOpen.value = !leftDrawerOpen.value
}
}
}
})
</script>
================================================
FILE: src/pages/Error404.vue
================================================
<template>
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
<div>
<div style="font-size: 30vh">
404
</div>
<div class="text-h2" style="opacity:.4">
Oops. Nothing here...
</div>
<q-btn
class="q-mt-xl"
color="white"
text-color="blue"
unelevated
to="/"
label="Go Home"
no-caps
/>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Error404'
})
</script>
================================================
FILE: src/pages/Index.vue
================================================
<template>
<q-page padding>
<div class="responsive-container-width q-mx-auto column">
<h1 class="text-h3 self-center">{{ $t('presentation.title') }}</h1>
<p class="text-body1 self-center q-mb-xl">
{{ $t('presentation.subtitle') }}
</p>
<p class="text-body1">
{{ $t('presentation.abstract') }}
</p>
<p class="text-body1">
{{ $t('presentation.aboutApexCharts') }}
</p>
<p class="text-body1">
{{ $t('presentation.aboutQuasar') }}
</p>
<p class="text-body1">
{{ $t('presentation.checkOutMenus') }}
</p>
<p class="text-body1">
{{ $t('presentation.checkOutExamples') }}
</p>
</div>
<div class="row q-col-gutter-sm q-my-md">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-area />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<apex-candlestick />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<apex-bubble />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-heatmap />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexCandlestick = defineAsyncComponent(() =>
import('src/components/charts/candlestick/ApexCandlestick.vue')
)
const ApexArea = defineAsyncComponent(() =>
import('src/components/charts/area/ApexArea.vue')
)
const ApexBubble = defineAsyncComponent(() =>
import('src/components/charts/bubble/ApexBubble.vue')
)
const ApexHeatmap = defineAsyncComponent(() =>
import('src/components/charts/heatmap/ApexHeatmap.vue')
)
export default defineComponent({
name: 'PageIndex',
components: {
ApexCandlestick,
ApexArea,
ApexBubble,
ApexHeatmap
}
})
</script>
================================================
FILE: src/pages/chartTypes/AllCharts.vue
================================================
<template>
<q-page padding>
<p class="q-mb-lg text-body2">{{ $t('presentation.showingOneOfEach') }}</p>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-column />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<apex-bar />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<apex-line />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-donut />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<apex-candlestick />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<apex-area />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<apex-bubble />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-radial-bar style="padding-top: 4rem" />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-pie style="padding-top: 4rem" />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-polar-area />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-heatmap />
</q-card>
</div>
<!-- Precisa de ajustes, está com problema na renderização -->
<!-- <div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-timeline />
</q-card>
</div> -->
<div class="col-md-6 col-xs-12">
<q-card class="fit">
<apex-scatter />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexBar = defineAsyncComponent(() =>
import('src/components/charts/bar/ApexBar.vue')
)
const ApexColumn = defineAsyncComponent(() =>
import('src/components/charts/column/ApexColumn.vue')
)
const ApexLine = defineAsyncComponent(() =>
import('src/components/charts/line/ApexLine.vue')
)
const ApexDonut = defineAsyncComponent(() =>
import('src/components/charts/donut/ApexDonut.vue')
)
const ApexCandlestick = defineAsyncComponent(() =>
import('src/components/charts/candlestick/ApexCandlestick.vue')
)
const ApexArea = defineAsyncComponent(() =>
import('src/components/charts/area/ApexArea.vue')
)
const ApexBubble = defineAsyncComponent(() =>
import('src/components/charts/bubble/ApexBubble.vue')
)
const ApexRadialBar = defineAsyncComponent(() =>
import('src/components/charts/radialBar/ApexRadialBar.vue')
)
const ApexPie = defineAsyncComponent(() =>
import('src/components/charts/pie/PopulationByContinent.vue')
)
const ApexPolarArea = defineAsyncComponent(() =>
import('src/components/charts/polarArea/ApexPolarArea.vue')
)
// const ApexTimeline = defineAsyncComponent(() =>
// import('components/charts/ApexTimeline.vue')
// )
const ApexScatter = defineAsyncComponent(() =>
import('src/components/charts/scatterPlot/ApexScatter.vue')
)
const ApexHeatmap = defineAsyncComponent(() =>
import('src/components/charts/heatmap/ApexHeatmap.vue')
)
export default defineComponent({
name: 'AllCharts',
components: {
ApexBar,
ApexLine,
ApexColumn,
ApexDonut,
ApexCandlestick,
ApexArea,
ApexBubble,
ApexRadialBar,
ApexPie,
ApexPolarArea,
ApexScatter,
ApexHeatmap
// ApexTimeline
}
})
</script>
================================================
FILE: src/pages/chartTypes/AreaCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-area />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexArea = defineAsyncComponent(() =>
import('src/components/charts/area/ApexArea.vue')
)
export default defineComponent({
name: 'AreaCharts',
components: {
ApexArea
}
})
</script>
================================================
FILE: src/pages/chartTypes/BarCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-bar />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<biggest-libraries />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexBar = defineAsyncComponent(() =>
import('src/components/charts/bar/ApexBar.vue')
)
const BiggestLibraries = defineAsyncComponent(() =>
import('src/components/charts/bar/BiggestLibraries.vue')
)
export default defineComponent({
name: 'BarCharts',
components: {
ApexBar,
BiggestLibraries
}
})
</script>
================================================
FILE: src/pages/chartTypes/BubbleCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-bubble />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexBubble = defineAsyncComponent(() =>
import('src/components/charts/bubble/ApexBubble.vue')
)
export default defineComponent({
name: 'BubbleCharts',
components: {
ApexBubble
}
})
</script>
================================================
FILE: src/pages/chartTypes/CandlestickCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-candlestick />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexCandlestick = defineAsyncComponent(() =>
import('src/components/charts/candlestick/ApexCandlestick.vue')
)
export default defineComponent({
name: 'CandlestickCharts',
components: {
ApexCandlestick
}
})
</script>
================================================
FILE: src/pages/chartTypes/ColumnCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-column />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<biggest-companies />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexColumn = defineAsyncComponent(() =>
import('src/components/charts/column/ApexColumn.vue')
)
const BiggestCompanies = defineAsyncComponent(() =>
import('src/components/charts/column/BiggestCompanies.vue')
)
export default defineComponent({
name: 'ColumnCharts',
components: {
ApexColumn,
BiggestCompanies
}
})
</script>
================================================
FILE: src/pages/chartTypes/DonutCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-donut />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexDonut = defineAsyncComponent(() =>
import('src/components/charts/donut/ApexDonut.vue')
)
export default defineComponent({
name: 'DonutCharts',
components: {
ApexDonut
}
})
</script>
================================================
FILE: src/pages/chartTypes/HeatmapCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-heatmap />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexHeatmap = defineAsyncComponent(() =>
import('src/components/charts/heatmap/ApexHeatmap.vue')
)
export default defineComponent({
name: 'HeatmapCharts',
components: {
ApexHeatmap
}
})
</script>
================================================
FILE: src/pages/chartTypes/LineCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-line />
</q-card>
</div>
<div class="col-md-6 col-xs-12">
<q-card>
<gdp-china-usa />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
import GdpChinaUsa from 'src/components/charts/line/GdpChinaUsa.vue'
const ApexLine = defineAsyncComponent(() =>
import('src/components/charts/line/ApexLine.vue')
)
export default defineComponent({
name: 'LineCharts',
components: {
ApexLine,
GdpChinaUsa
}
})
</script>
================================================
FILE: src/pages/chartTypes/PieCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<population-by-continent />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const PopulationByContinent = defineAsyncComponent(() =>
import('src/components/charts/pie/PopulationByContinent.vue')
)
export default defineComponent({
name: 'PieCharts',
components: {
PopulationByContinent
}
})
</script>
================================================
FILE: src/pages/chartTypes/PolarAreaCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-polar-area />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexPolarArea = defineAsyncComponent(() =>
import('src/components/charts/polarArea/ApexPolarArea.vue')
)
export default defineComponent({
name: 'PolarAreaCharts',
components: {
ApexPolarArea
}
})
</script>
================================================
FILE: src/pages/chartTypes/RadialBarCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-radial-bar />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexRadialBar = defineAsyncComponent(() =>
import('src/components/charts/radialBar/ApexRadialBar.vue')
)
export default defineComponent({
name: 'RadialBarCharts',
components: {
ApexRadialBar
}
})
</script>
================================================
FILE: src/pages/chartTypes/ScatterCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-scatter />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexScatter = defineAsyncComponent(() =>
import('src/components/charts/scatterPlot/ApexScatter.vue')
)
export default defineComponent({
name: 'ScatterCharts',
components: {
ApexScatter
}
})
</script>
================================================
FILE: src/pages/chartTypes/TimelineCharts.vue
================================================
<template>
<q-page padding>
<div class="row q-col-gutter-sm">
<div class="col-md-6 col-xs-12">
<q-card>
<apex-timeline />
</q-card>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
const ApexTimeline = defineAsyncComponent(() =>
import('src/components/charts/timeline/ApexTimeline.vue')
)
export default defineComponent({
name: 'TimelineCharts',
components: {
ApexTimeline
}
})
</script>
================================================
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)
/// <reference types="@quasar/app-webpack" />
================================================
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
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
SYMBOL INDEX (6 symbols across 2 files)
FILE: quasar.conf.js
method chainWebpack (line 72) | chainWebpack (chain) {
method chainWebpackWebserver (line 133) | chainWebpackWebserver (chain) {
method chainWebpackCustomSW (line 151) | chainWebpackCustomSW (chain) {
method chainWebpackMain (line 228) | chainWebpackMain (chain) {
method chainWebpackPreload (line 234) | chainWebpackPreload (chain) {
FILE: src/composables/UseDriveJs.js
function useDriver (line 4) | function useDriver () {
Condensed preview — 67 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (94K chars).
[
{
"path": ".all-contributorsrc",
"chars": 1376,
"preview": "{\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"commitConvention\": \"angular\",\n \"contribut"
},
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 99,
"preview": "/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",
"chars": 2321,
"preview": "module.exports = {\n // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy\n // This o"
},
{
"path": ".gitignore",
"chars": 496,
"preview": ".DS_Store\n.thumbs.db\nnode_modules\n\n# Quasar core related directories\n.quasar\n/dist\n\n# Cordova related directories and fi"
},
{
"path": ".postcssrc.js",
"chars": 200,
"preview": "// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n plugins: [\n // to edit target brows"
},
{
"path": ".prettierrc",
"chars": 94,
"preview": "{\n \"trailingComma\": \"none\",\n \"tabWidth\": 2,\n \"semi\": false,\n \"singleQuote\": true\n}"
},
{
"path": ".vscode/extensions.json",
"chars": 216,
"preview": "{\n \"recommendations\": [\n \"dbaeumer.vscode-eslint\",\n \n \"octref.vetur\"\n ],\n \"unwantedRecommendations\": [\n \""
},
{
"path": ".vscode/settings.json",
"chars": 212,
"preview": "{\n \"vetur.validation.template\": false,\n \"vetur.format.enable\": false,\n \"eslint.validate\": [\"javascript\", \"javascriptr"
},
{
"path": "README.md",
"chars": 1063,
"preview": "# Quasar Apexcharts V2 (quasar-apexcharts)\n<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->\n"
},
{
"path": "babel.config.js",
"chars": 244,
"preview": "\n\nmodule.exports = api => {\n return {\n presets: [\n [\n '@quasar/babel-preset-app',\n api.caller(cal"
},
{
"path": "jsconfig.json",
"chars": 565,
"preview": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"src/*\": [\n \"src/*\"\n ],\n \"app/*\": [\n "
},
{
"path": "package.json",
"chars": 1400,
"preview": "{\n \"name\": \"quasar-apexcharts-v2\",\n \"version\": \"0.0.1\",\n \"description\": \"A Quasar Framework app\",\n \"productName\": \"Q"
},
{
"path": "quasar.conf.js",
"chars": 7218,
"preview": "/*\n * This file runs in a Node context (it's NOT transpiled by Babel), so use only\n * the ES6 features that are supporte"
},
{
"path": "src/App.vue",
"chars": 149,
"preview": "<template>\n <router-view />\n</template>\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent("
},
{
"path": "src/boot/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "src/boot/apexcharts.js",
"chars": 147,
"preview": "import VueApexCharts from 'vue3-apexcharts'\nimport { boot } from 'quasar/wrappers'\n\nexport default boot(({ app }) => {\n "
},
{
"path": "src/boot/axios.js",
"chars": 966,
"preview": "import { boot } from 'quasar/wrappers'\nimport axios from 'axios'\n\n// Be careful when using SSR for cross-request state p"
},
{
"path": "src/boot/i18n.js",
"chars": 323,
"preview": "import { boot } from 'quasar/wrappers'\nimport { createI18n } from 'vue-i18n'\n\nimport messages from '../i18n'\n\nconst i18n"
},
{
"path": "src/components/Card.vue",
"chars": 398,
"preview": "<template>\n <q-card class=\"fit\" :style=\"{backgroundImage: bgColor, minHeight: '150px'}\" >\n <q-card-section>\n <"
},
{
"path": "src/components/CardSkeleton.vue",
"chars": 807,
"preview": "<template>\n <div class=\"row q-col-gutter-md\">\n <div class=\"col-md-3\" v-for=\"i in 4\" :key=\"i\">\n <!-- <card-base>"
},
{
"path": "src/components/ExternalLink.vue",
"chars": 779,
"preview": "<template>\n <q-item\n clickable\n tag=\"a\"\n target=\"_blank\"\n :href=\"link\"\n >\n <q-item-section\n v-if=\""
},
{
"path": "src/components/LangSwitch.vue",
"chars": 1002,
"preview": "<template>\n <q-btn-dropdown\n id=\"qa-lang\"\n unelevated rounded no-wrap split\n color=\"secondary\"\n style=\"min-"
},
{
"path": "src/components/Navbar.vue",
"chars": 5898,
"preview": "<template>\n <q-list id=\"qa-navbar\">\n <RouterLink\n route=\"/\"\n icon=\"home\"\n :title=\"$t('sidebar.home')\""
},
{
"path": "src/components/RouterLink.vue",
"chars": 715,
"preview": "<template>\n <q-item\n clickable replace\n class=\"text-grey-1\"\n exact-active-class=\"bg-secondary\"\n :to=\"route\""
},
{
"path": "src/components/charts/area/ApexArea.vue",
"chars": 1020,
"preview": "<template>\n <apexchart height=\"300\" type=\"area\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\n"
},
{
"path": "src/components/charts/bar/ApexBar.vue",
"chars": 895,
"preview": "<template>\n <apexchart height=\"300\" type=\"bar\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\ni"
},
{
"path": "src/components/charts/bar/BiggestLibraries.vue",
"chars": 1632,
"preview": "<template>\n <apexchart height=\"300\" type=\"bar\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\ni"
},
{
"path": "src/components/charts/bubble/ApexBubble.vue",
"chars": 2055,
"preview": "<template>\n <apexchart height=\"300\" type=\"bubble\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script"
},
{
"path": "src/components/charts/candlestick/ApexCandlestick.vue",
"chars": 7239,
"preview": "<template>\n <apexchart type=\"candlestick\" height=\"300\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<s"
},
{
"path": "src/components/charts/column/ApexColumn.vue",
"chars": 905,
"preview": "<template>\n <apexchart height=\"300\" type=\"bar\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\ni"
},
{
"path": "src/components/charts/column/BiggestCompanies.vue",
"chars": 1908,
"preview": "<template>\n <apexchart height=\"300\" type=\"bar\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\ni"
},
{
"path": "src/components/charts/donut/ApexDonut.vue",
"chars": 802,
"preview": "<template>\n <apexchart height=\"300\" type=\"donut\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>"
},
{
"path": "src/components/charts/heatmap/ApexHeatmap.vue",
"chars": 2196,
"preview": "<template>\n <apexchart\n height='300'\n type='heatmap'\n :options='options'\n :series='series'\n ></apexchart>\n"
},
{
"path": "src/components/charts/line/ApexLine.vue",
"chars": 845,
"preview": "<template>\n <apexchart height=\"300\" type=\"line\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\n"
},
{
"path": "src/components/charts/line/GdpChinaUsa.vue",
"chars": 1838,
"preview": "<template>\n <apexchart height=\"300\" type=\"line\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\n"
},
{
"path": "src/components/charts/pie/PopulationByContinent.vue",
"chars": 1263,
"preview": "<template>\n <apexchart height=\"300\" type=\"pie\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<script>\ni"
},
{
"path": "src/components/charts/polarArea/ApexPolarArea.vue",
"chars": 914,
"preview": "<template>\n <apexchart height=\"300\" type=\"polarArea\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<scr"
},
{
"path": "src/components/charts/radialBar/ApexRadialBar.vue",
"chars": 2247,
"preview": "<template>\n <apexchart height=\"300\" type=\"radialBar\" :options=\"options\" :series=\"series\"></apexchart>\n</template>\n\n<scr"
},
{
"path": "src/components/charts/scatterPlot/ApexScatter.vue",
"chars": 3244,
"preview": "<template>\n <apexchart height='300' type='scatter' :options='options' :series='series' />\n</template>\n\n<script>\nimport "
},
{
"path": "src/components/charts/timeline/ApexTimeline.vue",
"chars": 1363,
"preview": "<template>\n <apexchart\n height=\"300\"\n type=\"rangeBar\"\n :options=\"options\"\n :series=\"series\"\n />\n</template"
},
{
"path": "src/composables/UseDriveJs.js",
"chars": 1372,
"preview": "import { driver } from 'driver.js'\nimport 'driver.js/dist/driver.css'\n\nexport default function useDriver () {\n const dr"
},
{
"path": "src/css/app.css",
"chars": 816,
"preview": "/* app global css */\n\n.scrollbar {\n overflow-y: scroll;\n}\n\n.scrollbar::-webkit-scrollbar-track\n{\n\t-webkit-box-shadow: i"
},
{
"path": "src/i18n/en-US/index.js",
"chars": 3302,
"preview": "export default {\n sidebar: {\n charts_all: 'All charts',\n charts_area: 'Area charts',\n charts_bar: 'Bar charts'"
},
{
"path": "src/i18n/index.js",
"chars": 107,
"preview": "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",
"chars": 3361,
"preview": "export default {\n sidebar: {\n charts_all: 'Todos',\n charts_area: 'Área',\n charts_bar: 'Barras',\n charts_bub"
},
{
"path": "src/index.template.html",
"chars": 991,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title><%= productName %></title>\n\n <meta charset=\"utf-8\">\n <meta name=\"descri"
},
{
"path": "src/layouts/MainLayout.vue",
"chars": 1479,
"preview": "<template>\n <q-layout view=\"lHh Lpr lFf\">\n <q-header elevated>\n <q-toolbar class=\"no-wrap\">\n <div class="
},
{
"path": "src/pages/Error404.vue",
"chars": 571,
"preview": "<template>\n <div class=\"fullscreen bg-blue text-white text-center q-pa-md flex flex-center\">\n <div>\n <div style"
},
{
"path": "src/pages/Index.vue",
"chars": 1927,
"preview": "<template>\n <q-page padding>\n <div class=\"responsive-container-width q-mx-auto column\">\n <h1 class=\"text-h3 sel"
},
{
"path": "src/pages/chartTypes/AllCharts.vue",
"chars": 3623,
"preview": "<template>\n <q-page padding>\n <p class=\"q-mb-lg text-body2\">{{ $t('presentation.showingOneOfEach') }}</p>\n\n <div "
},
{
"path": "src/pages/chartTypes/AreaCharts.vue",
"chars": 485,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/BarCharts.vue",
"chars": 735,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/BubbleCharts.vue",
"chars": 497,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/CandlestickCharts.vue",
"chars": 527,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/ColumnCharts.vue",
"chars": 756,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/DonutCharts.vue",
"chars": 491,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/HeatmapCharts.vue",
"chars": 503,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/LineCharts.vue",
"chars": 688,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/PieCharts.vue",
"chars": 536,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/PolarAreaCharts.vue",
"chars": 516,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/RadialBarCharts.vue",
"chars": 516,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/ScatterCharts.vue",
"chars": 507,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/pages/chartTypes/TimelineCharts.vue",
"chars": 509,
"preview": "<template>\n <q-page padding>\n <div class=\"row q-col-gutter-sm\">\n <div class=\"col-md-6 col-xs-12\">\n <q-ca"
},
{
"path": "src/quasar.d.ts",
"chars": 405,
"preview": "// Forces TS to apply `@quasar/app` augmentations of `quasar` package\n// Removing this would break `quasar/wrappers` imp"
},
{
"path": "src/router/index.js",
"chars": 1000,
"preview": "import { route } from 'quasar/wrappers'\nimport { createRouter, createMemoryHistory, createWebHistory, createWebHashHisto"
},
{
"path": "src/router/routes.js",
"chars": 2561,
"preview": "\nconst routes = [\n {\n path: '/',\n component: () => import('layouts/MainLayout.vue'),\n children: [\n {\n "
}
]
About this extraction
This page contains the full source code of the patrickmonteiro/quasar-apexcharts GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 67 files (84.0 KB), approximately 25.8k tokens, and a symbol index with 6 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.