├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .stylintrc ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── quasar.conf.js ├── src ├── App.vue ├── assets │ ├── quasar-logo-full.svg │ └── sad.svg ├── boot │ └── .gitkeep ├── components │ ├── .gitkeep │ ├── charts │ │ ├── BarChart.vue │ │ ├── BubbleChart.vue │ │ ├── DoughnutChart.vue │ │ ├── HorizontalBarChart.vue │ │ ├── LineChart.vue │ │ ├── MixedChart.vue │ │ ├── PieChart.vue │ │ ├── PolarAreaChart.vue │ │ └── RadarChart.vue │ └── settings │ │ └── chartSettings.vue ├── css │ ├── app.styl │ └── quasar.variables.styl ├── index.template.html ├── layouts │ └── InsideLayout.vue ├── pages │ ├── Error404.vue │ └── Index.vue ├── router │ ├── index.js │ └── routes.js └── statics │ ├── app-logo-128x128.png │ └── icons │ ├── apple-icon-120x120.png │ ├── apple-icon-152x152.png │ ├── apple-icon-167x167.png │ ├── apple-icon-180x180.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── icon-128x128.png │ ├── icon-192x192.png │ ├── icon-256x256.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ ├── ms-icon-144x144.png │ └── safari-pinned-tab.svg └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | parserOptions: { 5 | parser: 'babel-eslint', 6 | sourceType: 'module' 7 | }, 8 | 9 | env: { 10 | browser: true 11 | }, 12 | 13 | extends: [ 14 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 15 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 16 | 'plugin:vue/essential', 17 | '@vue/standard' 18 | ], 19 | 20 | // required to lint *.vue files 21 | plugins: [ 22 | 'vue' 23 | ], 24 | 25 | globals: { 26 | 'ga': true, // Google Analytics 27 | 'cordova': true, 28 | '__statics': true, 29 | 'process': true 30 | }, 31 | 32 | // add your custom rules here 33 | rules: { 34 | // allow async-await 35 | 'generator-star-spacing': 'off', 36 | // allow paren-less arrow functions 37 | 'arrow-parens': 'off', 38 | 'one-var': 'off', 39 | 40 | 'import/first': 'off', 41 | 'import/named': 'error', 42 | 'import/namespace': 'error', 43 | 'import/default': 'error', 44 | 'import/export': 'error', 45 | 'import/extensions': 'off', 46 | 'import/no-unresolved': 'off', 47 | 'import/no-extraneous-dependencies': 'off', 48 | 'prefer-promise-reject-errors': 'off', 49 | 50 | // allow console.log during development only 51 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 52 | // allow debugger during development only 53 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | /src-cordova/node_modules 7 | /src-cordova/platforms 8 | /src-cordova/plugins 9 | /src-cordova/www 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": "never", 3 | "brackets": "never", 4 | "colons": "never", 5 | "colors": "always", 6 | "commaSpace": "always", 7 | "commentSpace": "always", 8 | "cssLiteral": "never", 9 | "depthLimit": false, 10 | "duplicates": true, 11 | "efficient": "always", 12 | "extendPref": false, 13 | "globalDupe": true, 14 | "indentPref": 2, 15 | "leadingZero": "never", 16 | "maxErrors": false, 17 | "maxWarnings": false, 18 | "mixed": false, 19 | "namingConvention": false, 20 | "namingConventionStrict": false, 21 | "none": "never", 22 | "noImportant": false, 23 | "parenSpace": "never", 24 | "placeholder": false, 25 | "prefixVarsWithDollar": "always", 26 | "quotePref": "single", 27 | "semicolons": "never", 28 | "sortOrder": false, 29 | "stackedProperties": "never", 30 | "trailingWhitespace": "never", 31 | "universal": "never", 32 | "valid": true, 33 | "zeroUnits": "never", 34 | "zIndexNormalize": false 35 | } 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Chart.js with Quasar Framework 2 | 3 | Hello! This is a small project that demonstrates the integration of Quasar Framework with the Chart.js plugin for charting. 4 | 5 | ## Objective 6 | 7 | This project is an example of how to use the **Chart.js** library to build dynamic charts in your **Quasar application**. 8 | 9 | ## How to run this project 10 | 11 | Install the dependencies 12 | 13 | > npm install 14 | 15 | Start the app in development mode (hot-code reloading, error reporting, etc.) 16 | 17 | > quasar dev 18 | 19 | ## Demo 20 | 21 | The demo can be tested at: [http://chartjs-with-quasar.surge.sh/](http://chartjs-with-quasar.surge.sh/) 22 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-with-chartjs", 3 | "version": "0.0.1", 4 | "description": "A Quasar Framework app", 5 | "productName": "Quasar with Chartjs", 6 | "cordovaId": "org.cordova.quasar.app", 7 | "author": "Bianca Silva", 8 | "private": true, 9 | "scripts": { 10 | "lint": "eslint --ext .js,.vue src", 11 | "test": "echo \"No test specified\" && exit 0" 12 | }, 13 | "dependencies": { 14 | "@quasar/extras": "^1.0.0", 15 | "chart.js": "^2.8.0", 16 | "quasar": "^1.0.0" 17 | }, 18 | "devDependencies": { 19 | "@quasar/app": "^1.0.0", 20 | "@vue/eslint-config-standard": "^4.0.0", 21 | "babel-eslint": "^10.0.1", 22 | "eslint": "^5.10.0", 23 | "eslint-loader": "^2.1.1", 24 | "eslint-plugin-vue": "^5.0.0" 25 | }, 26 | "engines": { 27 | "node": ">= 8.9.0", 28 | "npm": ">= 5.6.0", 29 | "yarn": ">= 1.6.0" 30 | }, 31 | "browserslist": [ 32 | "last 1 version, not dead, ie >= 11" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | // https://quasar.dev/quasar-cli/quasar-conf-js 3 | 4 | module.exports = function (ctx) { 5 | return { 6 | // app boot file (/src/boot) 7 | // --> boot files are part of "main.js" 8 | boot: [ 9 | ], 10 | 11 | css: [ 12 | 'app.styl' 13 | ], 14 | 15 | extras: [ 16 | // 'ionicons-v4', 17 | // 'mdi-v3', 18 | // 'fontawesome-v5', 19 | // 'eva-icons', 20 | // 'themify', 21 | // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 22 | 23 | 'roboto-font', // optional, you are not bound to it 24 | 'material-icons' // optional, you are not bound to it 25 | ], 26 | 27 | framework: { 28 | // iconSet: 'ionicons-v4', 29 | // lang: 'de', // Quasar language 30 | 31 | // all: true, // --- includes everything; for dev only! 32 | 33 | components: [ 34 | 'QLayout', 35 | 'QHeader', 36 | 'QDrawer', 37 | 'QPageContainer', 38 | 'QPage', 39 | 'QToolbar', 40 | 'QToolbarTitle', 41 | 'QBtn', 42 | 'QIcon', 43 | 'QList', 44 | 'QItem', 45 | 'QItemSection', 46 | 'QItemLabel', 47 | 'QCard', 48 | 'QCardSection', 49 | 'QCardActions', 50 | 'QMenu' 51 | ], 52 | 53 | directives: [ 54 | 'Ripple' 55 | ], 56 | 57 | // Quasar plugins 58 | plugins: [ 59 | 'Notify' 60 | ] 61 | }, 62 | 63 | supportIE: false, 64 | 65 | build: { 66 | scopeHoisting: true, 67 | // vueRouterMode: 'history', 68 | // vueCompiler: true, 69 | // gzip: true, 70 | // analyze: true, 71 | // extractCSS: false, 72 | extendWebpack (cfg) { 73 | cfg.module.rules.push({ 74 | enforce: 'pre', 75 | test: /\.(js|vue)$/, 76 | loader: 'eslint-loader', 77 | exclude: /node_modules/, 78 | options: { 79 | formatter: require('eslint').CLIEngine.getFormatter('stylish') 80 | } 81 | }) 82 | } 83 | }, 84 | 85 | devServer: { 86 | // https: true, 87 | // port: 8080, 88 | open: true // opens browser window automatically 89 | }, 90 | 91 | // animations: 'all', // --- includes all animations 92 | animations: [], 93 | 94 | ssr: { 95 | pwa: false 96 | }, 97 | 98 | pwa: { 99 | // workboxPluginMode: 'InjectManifest', 100 | // workboxOptions: {}, // only for NON InjectManifest 101 | manifest: { 102 | // name: 'Quasar with Chartjs', 103 | // short_name: 'Quasar with Chartjs', 104 | // description: 'A Quasar Framework app', 105 | display: 'standalone', 106 | orientation: 'portrait', 107 | background_color: '#ffffff', 108 | theme_color: '#027be3', 109 | icons: [ 110 | { 111 | 'src': 'statics/icons/icon-128x128.png', 112 | 'sizes': '128x128', 113 | 'type': 'image/png' 114 | }, 115 | { 116 | 'src': 'statics/icons/icon-192x192.png', 117 | 'sizes': '192x192', 118 | 'type': 'image/png' 119 | }, 120 | { 121 | 'src': 'statics/icons/icon-256x256.png', 122 | 'sizes': '256x256', 123 | 'type': 'image/png' 124 | }, 125 | { 126 | 'src': 'statics/icons/icon-384x384.png', 127 | 'sizes': '384x384', 128 | 'type': 'image/png' 129 | }, 130 | { 131 | 'src': 'statics/icons/icon-512x512.png', 132 | 'sizes': '512x512', 133 | 'type': 'image/png' 134 | } 135 | ] 136 | } 137 | }, 138 | 139 | cordova: { 140 | // id: 'org.cordova.quasar.app', 141 | // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing 142 | }, 143 | 144 | electron: { 145 | // bundler: 'builder', // or 'packager' 146 | 147 | extendWebpack (cfg) { 148 | // do something with Electron main process Webpack cfg 149 | // chainWebpack also available besides this extendWebpack 150 | }, 151 | 152 | packager: { 153 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options 154 | 155 | // OS X / Mac App Store 156 | // appBundleId: '', 157 | // appCategoryType: '', 158 | // osxSign: '', 159 | // protocol: 'myapp://path', 160 | 161 | // Windows only 162 | // win32metadata: { ... } 163 | }, 164 | 165 | builder: { 166 | // https://www.electron.build/configuration/configuration 167 | 168 | // appId: 'quasar-with-chartjs' 169 | } 170 | } 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /src/assets/quasar-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 63 | 66 | 69 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 104 | 105 | 106 | 107 | 113 | 118 | 126 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/boot/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/boot/.gitkeep -------------------------------------------------------------------------------- /src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/components/.gitkeep -------------------------------------------------------------------------------- /src/components/charts/BarChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 56 | 57 | 59 | -------------------------------------------------------------------------------- /src/components/charts/BubbleChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 99 | 100 | 102 | -------------------------------------------------------------------------------- /src/components/charts/DoughnutChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 53 | 54 | 56 | -------------------------------------------------------------------------------- /src/components/charts/HorizontalBarChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 56 | 57 | 59 | -------------------------------------------------------------------------------- /src/components/charts/LineChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 81 | 82 | 84 | -------------------------------------------------------------------------------- /src/components/charts/MixedChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 72 | 73 | 75 | -------------------------------------------------------------------------------- /src/components/charts/PieChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 51 | 52 | 54 | -------------------------------------------------------------------------------- /src/components/charts/PolarAreaChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 53 | 54 | 56 | -------------------------------------------------------------------------------- /src/components/charts/RadarChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 67 | 68 | 70 | -------------------------------------------------------------------------------- /src/components/settings/chartSettings.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 9 | 10 | 13 | -------------------------------------------------------------------------------- /src/css/app.styl: -------------------------------------------------------------------------------- 1 | // app global css 2 | -------------------------------------------------------------------------------- /src/css/quasar.variables.styl: -------------------------------------------------------------------------------- 1 | // Quasar Stylus Variables 2 | // -------------------------------------------------- 3 | // To customize the look and feel of this app, you can override 4 | // the Stylus variables found in Quasar's source Stylus files. 5 | 6 | // Check documentation for full list of Quasar variables 7 | 8 | // It's highly recommended to change the default colors 9 | // to match your app's branding. 10 | // Tip: Use the "Theme Builder" on Quasar's documentation website. 11 | 12 | $primary = #027BE3 13 | $secondary = #26A69A 14 | $accent = #9C27B0 15 | 16 | $positive = #21BA45 17 | $negative = #C10015 18 | $info = #31CCEC 19 | $warning = #F2C037 20 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= htmlWebpackPlugin.options.productName %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/layouts/InsideLayout.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | 32 | -------------------------------------------------------------------------------- /src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 35 | 36 | 64 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import routes from './routes' 5 | 6 | Vue.use(VueRouter) 7 | 8 | /* 9 | * If not building with SSR mode, you can 10 | * directly export the Router instantiation 11 | */ 12 | 13 | export default function (/* { store, ssrContext } */) { 14 | const Router = new VueRouter({ 15 | scrollBehavior: () => ({ x: 0, y: 0 }), 16 | routes, 17 | 18 | // Leave these as is and change from quasar.conf.js instead! 19 | // quasar.conf.js -> build -> vueRouterMode 20 | // quasar.conf.js -> build -> publicPath 21 | mode: process.env.VUE_ROUTER_MODE, 22 | base: process.env.VUE_ROUTER_BASE 23 | }) 24 | 25 | return Router 26 | } 27 | -------------------------------------------------------------------------------- /src/router/routes.js: -------------------------------------------------------------------------------- 1 | 2 | const routes = [ 3 | { 4 | path: '/', 5 | component: () => import('layouts/InsideLayout.vue'), 6 | children: [ 7 | { path: '', component: () => import('pages/Index.vue') } 8 | ] 9 | } 10 | ] 11 | 12 | // Always leave this as last one 13 | if (process.env.MODE !== 'ssr') { 14 | routes.push({ 15 | path: '*', 16 | component: () => import('pages/Error404.vue') 17 | }) 18 | } 19 | 20 | export default routes 21 | -------------------------------------------------------------------------------- /src/statics/app-logo-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/app-logo-128x128.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/apple-icon-167x167.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/favicon-96x96.png -------------------------------------------------------------------------------- /src/statics/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/favicon.ico -------------------------------------------------------------------------------- /src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/biancassilva/chartjs-with-quasar-framework/e47c93ef4dee86f225df6944fee1a0697d1231da/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/statics/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------