├── .editorconfig ├── .eslintignore ├── .github ├── FUNDING.yml └── workflows │ └── main.yml ├── .gitignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── cypress.json ├── package.json ├── public ├── dblogo.png ├── favicon.ico ├── googleee01dc033d7bbca2.html ├── images │ └── avatars │ │ ├── female │ │ └── 1.png │ │ └── male │ │ └── 1.png └── index.html ├── screenshots ├── dashblocks.png └── dblogo.png ├── scripts └── demodeploy.sh ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── menu │ │ ├── menudrawer.vue │ │ ├── menulist.vue │ │ ├── menulistitem.vue │ │ └── menulistitemex.vue │ ├── settings │ │ ├── colorschemeselector.vue │ │ └── settings.vue │ ├── tables │ │ ├── htable.vue │ │ ├── itable.vue │ │ └── ptable.vue │ └── user │ │ ├── message.vue │ │ ├── messages.vue │ │ └── userinfo.vue ├── dashboards │ ├── ChartJsShowcase.json │ ├── dashfive.json │ ├── dashfour.json │ ├── dashsix.json │ └── dashthree.json ├── data │ ├── ChartJsShowcase.json │ ├── api.json │ ├── apioperation.json │ ├── errors.json │ ├── hitsdata.json │ ├── iconsmdiv5.json │ ├── itemstabledata.json │ ├── ptabledata.json │ ├── requests.json │ └── summary.json ├── layouts │ └── mainlayout.vue ├── main.js ├── mixins │ ├── demodashboard.js │ └── vgtmethods.js ├── pages │ └── login.vue ├── quasar.js ├── router.js ├── store │ ├── modules │ │ └── layout.js │ └── store.js ├── styles │ ├── quasar.scss │ ├── quasar.variables.scss │ ├── textbgcolors.scss │ ├── ubbox.scss │ ├── ubcode.scss │ └── vgt.scss ├── utils.js └── views │ ├── About.vue │ ├── ChartJsShowcase.vue │ ├── DashblocksShowcase.vue │ ├── Dygraphs.vue │ ├── Home.vue │ ├── SampleDashboard.vue │ ├── apiop.vue │ ├── errors.vue │ ├── forms.vue │ ├── materialicons.vue │ ├── mdi.vue │ ├── observability.vue │ ├── quasartable.vue │ ├── requests.vue │ ├── summary.vue │ ├── tables.vue │ ├── timeline.vue │ ├── typography.vue │ └── vuegoodtable.vue ├── tests ├── e2e │ ├── .eslintrc.js │ ├── plugins │ │ └── index.js │ ├── specs │ │ └── test.js │ └── support │ │ ├── commands.js │ │ └── index.js └── unit │ └── .eslintrc.js ├── vue.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | public 4 | tests 5 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: sv2 2 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | # Controls when the action will run. Triggers the workflow on push or pull request 4 | # events but only for the master branch 5 | on: 6 | push: 7 | branches: [ master ] 8 | 9 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 10 | jobs: 11 | build_and_publish: 12 | # The type of runner that the job will run on 13 | runs-on: ubuntu-latest 14 | 15 | # Steps represent a sequence of tasks that will be executed as part of the job 16 | steps: 17 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 18 | - uses: actions/checkout@v2 19 | 20 | - name: Get yarn cache directory path 21 | id: yarn-cache-dir-path 22 | run: echo "::set-output name=dir::$(yarn cache dir)" 23 | 24 | - uses: actions/cache@v1 25 | id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 26 | with: 27 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 28 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 29 | restore-keys: | 30 | ${{ runner.os }}-yarn- 31 | 32 | # Runs a set of commands using the runners shell 33 | - name: Install NPM packages 34 | run: yarn install 35 | 36 | - name: Build 37 | run: yarn run build 38 | 39 | - name: Deploy 40 | uses: JamesIves/github-pages-deploy-action@releases/v3 41 | with: 42 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 43 | BRANCH: gh-pages 44 | FOLDER: dist 45 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /demo 5 | 6 | /tests/e2e/videos/ 7 | /tests/e2e/screenshots/ 8 | 9 | # local env files 10 | .env.local 11 | .env.*.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # Editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 160 4 | } 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Want to contribute to **dashblocks-template**? Awesome! 4 | 5 | 6 | There are many ways you can contribute: 7 | 8 | * by reviewing 9 | * by reporting bugs 10 | * by suggesting improvements and new features 11 | * by writing or editing documentation 12 | * by writing code ( no patch is too small ) 13 | * by closing issues 14 | 15 | ## Proposing pull requests 16 | 17 | Pull requests are very welcome. Note that if you are going to propose drastic changes, be sure to open an issue for discussion first, to make sure that your PR will be accepted before you spend effort coding it. 18 | 19 | 20 | Inspired by https://github.com/middleman/middleman-heroku/blob/master/CONTRIBUTING.md 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019-present slana.tech 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | https://dashblocks.io 3 |

4 | 5 | # Dashblocks Vue Material Admin Template | [DEMO](https://slanatech.github.io/dashblocks-template) 6 | 7 | ![](https://img.shields.io/badge/vue-2.x-brightgreen.svg) 8 | 9 | 10 | ![CI](https://github.com/slanatech/dashblocks-template/workflows/CI/badge.svg) 11 | 12 | ### Enable Analytics in your Vue App with [Dashblocks](https://github.com/slanatech/dashblocks) 13 | 14 | [Live Demo](https://slanatech.github.io/dashblocks-template) 15 | 16 | 17 | ![dashboard](screenshots/dashblocks.png?raw=true) 18 | 19 | 20 | Dashblocks Vue Material Admin Template is build based on [Quasar Framework](https://quasar.dev/), [Vuex](https://vuex.vuejs.org/installation.html), [Vuejs](https://vuejs.org/) and [Dashblocks](https://github.com/slanatech/dashblocks). 21 | 22 | We focus on providing beautiful interactive Dashboards out of the box, and helping to enable In-App Analytics in your Apps. 23 | 24 | [Dashblocks](https://github.com/slanatech/dashblocks) enables simple and streamlined way to quickly add awesome Dashboards in your app: 25 | 26 | * Use declarative approach to define a dashboard. The whole dashboard is just one JS object (or JSON) 27 | * Provide reasonable out of the box defaults for all chart types, such as colors 28 | * Support dark / light modes out of the box 29 | * Enable interactivity by providing event handling on dashboard level 30 | * Streamline dynamic updates of dashboard data, for example based on user interaction with dashboard 31 | * Even dynamically generate Dashboard itself based on the data - thanks to declarative approach 32 | 33 | 34 | ## Quick start 35 | 36 | Clone `dashblocks-template` repo: 37 | 38 | ```bash 39 | $ git clone https://github.com/slanatech/dashblocks-template.git 40 | ``` 41 | 42 | Install dependencies: 43 | 44 | ```bash 45 | $ cd dashblocks-template 46 | $ yarn install 47 | ``` 48 | 49 | Run `serve`: 50 | 51 | ```bash 52 | $ yarn run serve 53 | ``` 54 | 55 | `dashblocks-template` is set up using [vue-cli](https://github.com/vuejs/vue-cli), you will see standard `vue-cli` scripts in `package.json`: `serve`, `build` ... 56 | [Quasar Framework](https://quasar.dev/) is configured using Vue CLI Quasar Plugin. 57 | 58 | 59 | ## Enhancements and Bug Reports 60 | 61 | If you find a bug, or have an enhancement in mind please post [issues](https://github.com/slanatech/dashblocks-template/issues) 62 | 63 | test1 test2 test3 64 | 65 | ## License 66 | 67 | [MIT](LICENSE) 68 | 69 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | plugins: [ 4 | [ 5 | 'transform-imports', 6 | { 7 | quasar: { 8 | transform: 'quasar/dist/babel-transforms/imports.js', 9 | preventFullImport: true 10 | } 11 | } 12 | ] 13 | ] 14 | }; 15 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dashblocks-template", 3 | "version": "0.5.4", 4 | "private": true, 5 | "author": "https://github.com/sv2", 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "test:unit": "vue-cli-service test:unit", 10 | "test:e2e": "vue-cli-service test:e2e", 11 | "lint": "vue-cli-service lint", 12 | "release": "release-it", 13 | "release-ci": "release-it --ci" 14 | }, 15 | "dependencies": { 16 | "@quasar/extras": "^1.8.2", 17 | "core-js": "^3.6.5", 18 | "quasar": "^1.12.3", 19 | "vue": "^2.6.11", 20 | "vue-router": "^3.3.2", 21 | "vuex": "^3.4.0" 22 | }, 23 | "devDependencies": { 24 | "@vue/cli-plugin-babel": "^4.3.1", 25 | "@vue/cli-plugin-e2e-cypress": "^4.3.1", 26 | "@vue/cli-plugin-eslint": "^4.3.1", 27 | "@vue/cli-plugin-unit-jest": "^4.3.1", 28 | "@vue/cli-service": "^4.3.1", 29 | "@vue/eslint-config-prettier": "^6.0.0", 30 | "@vue/test-utils": "^1.0.0-beta.33", 31 | "babel-core": "7.0.0-bridge.0", 32 | "babel-eslint": "^10.1.0", 33 | "babel-jest": "^24.9.0", 34 | "babel-plugin-transform-imports": "1.5.0", 35 | "dashblocks": "^0.5.35", 36 | "eslint": "^6.8.0", 37 | "eslint-plugin-prettier": "^3.1.3", 38 | "eslint-plugin-vue": "^6.2.2", 39 | "lint-staged": "^8.1.5", 40 | "node-sass": "^4.13.1", 41 | "release-it": "^13.5.4", 42 | "sass-loader": "^8.0.2", 43 | "vue-cli-plugin-quasar": "^2.0.0", 44 | "vue-template-compiler": "^2.6.11", 45 | "webpack-bundle-analyzer": "^3.6.0", 46 | "ramda": "^0.27.0", 47 | "vue-good-table": "^2.18.0" 48 | }, 49 | "eslintConfig": { 50 | "root": true, 51 | "env": { 52 | "node": true 53 | }, 54 | "extends": [ 55 | "plugin:vue/essential", 56 | "@vue/prettier" 57 | ], 58 | "rules": {}, 59 | "parserOptions": { 60 | "parser": "babel-eslint" 61 | } 62 | }, 63 | "postcss": { 64 | "plugins": { 65 | "autoprefixer": {} 66 | } 67 | }, 68 | "browserslist": [ 69 | "> 1%", 70 | "last 2 versions" 71 | ], 72 | "jest": { 73 | "moduleFileExtensions": [ 74 | "js", 75 | "jsx", 76 | "json", 77 | "vue" 78 | ], 79 | "transform": { 80 | "^.+\\.vue$": "vue-jest", 81 | ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", 82 | "^.+\\.jsx?$": "babel-jest" 83 | }, 84 | "transformIgnorePatterns": [ 85 | "/node_modules/" 86 | ], 87 | "moduleNameMapper": { 88 | "^@/(.*)$": "/src/$1" 89 | }, 90 | "snapshotSerializers": [ 91 | "jest-serializer-vue" 92 | ], 93 | "testMatch": [ 94 | "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)" 95 | ], 96 | "testURL": "http://localhost/", 97 | "watchPlugins": [ 98 | "jest-watch-typeahead/filename", 99 | "jest-watch-typeahead/testname" 100 | ] 101 | }, 102 | "bugs": { 103 | "url": "https://github.com/slanatech/dashblocks-template/issues", 104 | "email": "sv2@slana.tech" 105 | }, 106 | "gitHooks": { 107 | "pre-commit": "lint-staged" 108 | }, 109 | "homepage": "https://github.com/slanatech/dashblocks-template", 110 | "license": "MIT", 111 | "lint-staged": { 112 | "*.{js,vue}": [ 113 | "vue-cli-service lint", 114 | "git add" 115 | ] 116 | }, 117 | "release-it": { 118 | "github": { 119 | "release": true 120 | }, 121 | "hooks": { 122 | "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}." 123 | } 124 | }, 125 | "repository": { 126 | "type": "git", 127 | "url": "https://github.com/slanatech/dashblocks-template" 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /public/dblogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slanatech/dashblocks-template/20ae3a908c56f60a41f544c846bee78630c04c27/public/dblogo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slanatech/dashblocks-template/20ae3a908c56f60a41f544c846bee78630c04c27/public/favicon.ico -------------------------------------------------------------------------------- /public/googleee01dc033d7bbca2.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googleee01dc033d7bbca2.html -------------------------------------------------------------------------------- /public/images/avatars/female/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slanatech/dashblocks-template/20ae3a908c56f60a41f544c846bee78630c04c27/public/images/avatars/female/1.png -------------------------------------------------------------------------------- /public/images/avatars/male/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slanatech/dashblocks-template/20ae3a908c56f60a41f544c846bee78630c04c27/public/images/avatars/male/1.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | dashblocks-template 9 | 10 | 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /screenshots/dashblocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slanatech/dashblocks-template/20ae3a908c56f60a41f544c846bee78630c04c27/screenshots/dashblocks.png -------------------------------------------------------------------------------- /screenshots/dblogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slanatech/dashblocks-template/20ae3a908c56f60a41f544c846bee78630c04c27/screenshots/dblogo.png -------------------------------------------------------------------------------- /scripts/demodeploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # navigate into the build output directory 7 | cd demo 8 | 9 | git init 10 | git add -A 11 | git commit -m 'deploy for github pages' 12 | 13 | git push -f https://github.com/slanatech/dashblocks-template.git master:gh-pages 14 | 15 | cd - 16 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slanatech/dashblocks-template/20ae3a908c56f60a41f544c846bee78630c04c27/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/menu/menudrawer.vue: -------------------------------------------------------------------------------- 1 | 26 | 113 | 130 | -------------------------------------------------------------------------------- /src/components/menu/menulist.vue: -------------------------------------------------------------------------------- 1 | 29 | 71 | 79 | -------------------------------------------------------------------------------- /src/components/menu/menulistitem.vue: -------------------------------------------------------------------------------- 1 | 41 | 90 | -------------------------------------------------------------------------------- /src/components/menu/menulistitemex.vue: -------------------------------------------------------------------------------- 1 | 48 | 107 | -------------------------------------------------------------------------------- /src/components/settings/colorschemeselector.vue: -------------------------------------------------------------------------------- 1 | 57 | 123 | -------------------------------------------------------------------------------- /src/components/settings/settings.vue: -------------------------------------------------------------------------------- 1 | 166 | 257 | -------------------------------------------------------------------------------- /src/components/tables/htable.vue: -------------------------------------------------------------------------------- 1 | 51 | 234 | 254 | -------------------------------------------------------------------------------- /src/components/tables/itable.vue: -------------------------------------------------------------------------------- 1 | 62 | 193 | 242 | -------------------------------------------------------------------------------- /src/components/tables/ptable.vue: -------------------------------------------------------------------------------- 1 | 15 | 164 | 183 | -------------------------------------------------------------------------------- /src/components/user/message.vue: -------------------------------------------------------------------------------- 1 | 33 | 51 | 52 | -------------------------------------------------------------------------------- /src/components/user/messages.vue: -------------------------------------------------------------------------------- 1 | 14 | 68 | -------------------------------------------------------------------------------- /src/components/user/userinfo.vue: -------------------------------------------------------------------------------- 1 | 213 | 226 | -------------------------------------------------------------------------------- /src/dashboards/ChartJsShowcase.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": { 3 | "type": "grid" 4 | }, 5 | "widgets": [ 6 | { 7 | "id": "w1", 8 | "type": "DbChartjsLine", 9 | "cspan": 4, 10 | "height": 250, 11 | "properties": { 12 | "options": { 13 | "maintainAspectRatio": false, 14 | "legend": { 15 | "labels": { 16 | "fontColor": "red" 17 | } 18 | } 19 | } 20 | } 21 | }, 22 | { 23 | "id": "w2", 24 | "type": "DbChartjsBar", 25 | "cspan": 4, 26 | "height": 250 27 | }, 28 | { 29 | "id": "w3", 30 | "type": "DbChartjsHorizontalBar", 31 | "cspan": 4 32 | }, 33 | { 34 | "id": "w4", 35 | "type": "DbChartjsPie", 36 | "cspan": 4 37 | }, 38 | { 39 | "id": "w5", 40 | "type": "DbChartjsDoughnut", 41 | "cspan": 4, 42 | "height": 250 43 | }, 44 | { 45 | "id": "w6", 46 | "type": "DbChartjsPolarArea", 47 | "cspan": 4, 48 | "height": 250 49 | }, 50 | { 51 | "id": "w7", 52 | "type": "DbChartjsRadar", 53 | "cspan": 4, 54 | "height": 250 55 | }, 56 | { 57 | "id": "w8", 58 | "type": "DbChartjsBar", 59 | "cspan": 4, 60 | "height": 250 61 | }, 62 | { 63 | "id": "w9", 64 | "type": "DbChartjsBubble", 65 | "cspan": 8, 66 | "height": 300 67 | }, 68 | { 69 | "id": "w10", 70 | "type": "DbChartjsScatter", 71 | "cspan": 8, 72 | "height": 300, 73 | "properties": { 74 | "options": { 75 | "scales": { 76 | "xAxes": [{ 77 | "type": "linear", 78 | "position": "bottom" 79 | }] 80 | } 81 | } 82 | } 83 | } 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /src/dashboards/dashfive.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": { 3 | "type": "grid" 4 | }, 5 | "widgets": [ 6 | { 7 | "id": "wa", 8 | "type": "DbDygraphsBar", 9 | "cspan": 16, 10 | "height": 250, 11 | "properties": { 12 | "options": { 13 | "stackedGraph": true 14 | } 15 | } 16 | }, 17 | { 18 | "id": "w0", 19 | "type": "DbTrendLine", 20 | "cspan": 4, 21 | "properties": { 22 | "smooth": false, 23 | "strokeWidth": 1 24 | } 25 | }, 26 | { 27 | "id": "w0", 28 | "type": "DbTrendLine", 29 | "cspan": 4 30 | }, 31 | { 32 | "id": "w1", 33 | "type": "DbTrendBar", 34 | "cspan": 4 35 | }, 36 | { 37 | "id": "w2", 38 | "type": "DbTrendBar", 39 | "cspan": 4 40 | }, 41 | { 42 | "id": "w4", 43 | "type": "DbNumber", 44 | "cspan": 4, 45 | "properties": { 46 | "title": "Test OK", 47 | "badge": "req/s", 48 | "icon" : "fa fa-signal", 49 | "ranges": [1000,2000] 50 | } 51 | }, 52 | { 53 | "id": "w5", 54 | "type": "DbNumber", 55 | "cspan": 4, 56 | "properties": { 57 | "title": "Test Warning", 58 | "badge": "req/s", 59 | "icon" : "fa fa-clock", 60 | "ranges": [1000,2000] 61 | } 62 | }, 63 | { 64 | "id": "w6", 65 | "type": "DbNumber", 66 | "cspan": 4, 67 | "properties": { 68 | "title": "Test Alarm", 69 | "badge": "req/s", 70 | "icon" : "fa fa-chart-bar", 71 | "ranges": [1000,2000] 72 | } 73 | }, 74 | { 75 | "id": "w7", 76 | "type": "DbPlotly", 77 | "cspan": 16, 78 | "rspan": 2, 79 | "properties": { 80 | "layout": { 81 | "paper_bgcolor":"rgba(0,0,0,0)", 82 | "plot_bgcolor":"rgba(0,0,0,0)", 83 | "modebar": { 84 | "bgcolor": "rgba(0,0,0,0)", 85 | "color": "rgba(0,0,0,0.5)" 86 | }, 87 | "title": "reactive charts", 88 | "xaxis": { 89 | "title": "xaxis title" 90 | }, 91 | "yaxis": { 92 | "title": "yaxis title" 93 | }, 94 | "margin": { 95 | "l": 60, 96 | "r": 40, 97 | "b": 40, 98 | "t": 40, 99 | "pad": 5 100 | } 101 | } 102 | } 103 | }, 104 | { 105 | "id": "w8", 106 | "type": "DbPlotlyLine", 107 | "cspan": 10, 108 | "height": 300, 109 | "properties": { 110 | "layout": { 111 | "template": "plotly_dark", 112 | "paper_bgcolor":"rgba(0,0,0,0)", 113 | "plot_bgcolor":"rgba(0,0,0,0)", 114 | "modebar": { 115 | "bgcolor": "rgba(0,0,0,0)", 116 | "color": "rgba(0,0,0,0.5)" 117 | }, 118 | "margin": { 119 | "l": 60, 120 | "r": 40, 121 | "b": 40, 122 | "t": 40, 123 | "pad": 5 124 | } 125 | } 126 | } 127 | }, 128 | { 129 | "id": "w9", 130 | "type": "DbPlotlyPie", 131 | "cspan": 6, 132 | "height": 300, 133 | "properties": { 134 | "layout": { 135 | "legend": { 136 | "orientation": "h" 137 | }, 138 | "paper_bgcolor":"rgba(0,0,0,0)", 139 | "plot_bgcolor":"rgba(0,0,0,0)", 140 | "modebar": { 141 | "bgcolor": "rgba(0,0,0,0)", 142 | "color": "rgba(0,0,0,0.5)" 143 | }, 144 | "margin": { 145 | "l": 60, 146 | "r": 40, 147 | "b": 40, 148 | "t": 40, 149 | "pad": 5 150 | } 151 | } 152 | } 153 | } 154 | 155 | 156 | ] 157 | } 158 | -------------------------------------------------------------------------------- /src/dashboards/dashfour.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": { 3 | "type": "grid" 4 | }, 5 | "widgets": [ 6 | { 7 | "id": "w0", 8 | "type": "DbTrendLine", 9 | "cspan": 16 10 | }, 11 | { 12 | "id": "w1", 13 | "type": "WidgetOne", 14 | "cspan": 2, 15 | "rspan": 2 16 | }, 17 | { 18 | "id": "w2", 19 | "type": "WidgetOne", 20 | "cspan": 2, 21 | "rspan": 1 22 | }, 23 | { 24 | "id": "w3", 25 | "type": "DbChartjsLine", 26 | "cspan": 4, 27 | "height": 350 28 | }, 29 | { 30 | "id": "w4", 31 | "type": "DbChartjsBar", 32 | "cspan": 4, 33 | "height": 350 34 | }, 35 | { 36 | "id": "w5", 37 | "type": "DbChartjsBar", 38 | "cspan": 4 39 | }, 40 | { 41 | "id": "w1", 42 | "type": "DbNumber", 43 | "cspan": 4, 44 | "height": 300 45 | }, 46 | { 47 | "id": "w6", 48 | "type": "DbEasyPie", 49 | "cspan": 4, 50 | "properties": { 51 | "barColor": "red", 52 | "lineWidth": 10 53 | } 54 | }, 55 | { 56 | "id": "w7", 57 | "type": "DbTrendLine", 58 | "cspan": 6 59 | } 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /src/dashboards/dashsix.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": { 3 | "type": "grid" 4 | }, 5 | "widgets": [ 6 | { 7 | "id": "w1", 8 | "type": "DbDygraphsBar", 9 | "cspan": 16, 10 | "height": 250, 11 | "properties": { 12 | "options": { 13 | "stackedGraph": true 14 | } 15 | } 16 | }, 17 | { 18 | "id": "w2", 19 | "type": "DbDygraphsLine", 20 | "cspan": 8, 21 | "height": 300, 22 | "properties": { 23 | "options": { 24 | "stackedGraph": false, 25 | "title": "Random value Chart", 26 | "ylabel": "Probability", 27 | "labels" : ["Date","AAA","BBB"], 28 | "legend": "always" 29 | } 30 | } 31 | }, 32 | { 33 | "id": "w6", 34 | "type": "DbDygraphsLine", 35 | "cspan": 8, 36 | "height": 300, 37 | "properties": { 38 | "options": { 39 | "showRangeSelector": true, 40 | "stackedGraph": false, 41 | "title": "Random value Chart", 42 | "ylabel": "Probability", 43 | "labels" : ["Date","AAA","BBB"], 44 | "legend": "always" 45 | } 46 | } 47 | }, 48 | { 49 | "id": "w3", 50 | "type": "DbDygraphsSparkLine", 51 | "cspan": 4, 52 | "properties": { 53 | "smoothing": 0.5 54 | } 55 | }, 56 | { 57 | "id": "w4", 58 | "type": "DbDygraphsSparkLine", 59 | "cspan": 4, 60 | "properties": { 61 | "options": { 62 | "colors": ["gray"], 63 | "strokeWidth": 0, 64 | "fillGraph": true, 65 | "fillAlpha": 0.2 66 | } 67 | } 68 | }, 69 | { 70 | "id": "w5", 71 | "type": "DbDygraphsSparkLine", 72 | "cspan": 4, 73 | "properties": { 74 | "smoothing": 0.5 75 | } 76 | } 77 | ] 78 | } 79 | -------------------------------------------------------------------------------- /src/dashboards/dashthree.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": { 3 | "type": "grid" 4 | }, 5 | "widgets": [ 6 | { 7 | "id": "w1", 8 | "type": "DbHorizon", 9 | "cspan": 16 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/data/ChartJsShowcase.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": { 3 | "type": "grid" 4 | }, 5 | "widgets": [ 6 | { 7 | "id": "w1", 8 | "type": "DbChartjsLine", 9 | "cspan": 4, 10 | "height": 250, 11 | "properties": { 12 | "options": { 13 | "maintainAspectRatio": false, 14 | "legend": { 15 | "labels": { 16 | "fontColor": "red" 17 | } 18 | } 19 | } 20 | } 21 | }, 22 | { 23 | "id": "w2", 24 | "type": "DbChartjsBar", 25 | "cspan": 4, 26 | "height": 250 27 | }, 28 | { 29 | "id": "w3", 30 | "type": "DbChartjsHorizontalBar", 31 | "cspan": 4 32 | }, 33 | { 34 | "id": "w4", 35 | "type": "DbChartjsPie", 36 | "cspan": 4 37 | }, 38 | { 39 | "id": "w5", 40 | "type": "DbChartjsDoughnut", 41 | "cspan": 4, 42 | "height": 250 43 | }, 44 | { 45 | "id": "w6", 46 | "type": "DbChartjsPolarArea", 47 | "cspan": 4, 48 | "height": 250 49 | }, 50 | { 51 | "id": "w7", 52 | "type": "DbChartjsRadar", 53 | "cspan": 4, 54 | "height": 250 55 | }, 56 | { 57 | "id": "w8", 58 | "type": "DbChartjsBar", 59 | "cspan": 4, 60 | "height": 250 61 | }, 62 | { 63 | "id": "w9", 64 | "type": "DbChartjsBubble", 65 | "cspan": 8, 66 | "height": 300 67 | }, 68 | { 69 | "id": "w10", 70 | "type": "DbChartjsScatter", 71 | "cspan": 8, 72 | "height": 300, 73 | "properties": { 74 | "options": { 75 | "scales": { 76 | "xAxes": [{ 77 | "type": "linear", 78 | "position": "bottom" 79 | }] 80 | } 81 | } 82 | } 83 | } 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /src/data/apioperation.json: -------------------------------------------------------------------------------- 1 | { 2 | "startts": 1588045302159, 3 | "all": { 4 | "requests": 55827, 5 | "responses": 55827, 6 | "errors": 5998, 7 | "info": 0, 8 | "success": 49829, 9 | "redirect": 0, 10 | "client_error": 3994, 11 | "server_error": 2004, 12 | "total_time": 2844745, 13 | "max_time": 211, 14 | "avg_time": 50.956436849553086, 15 | "total_req_clength": 2760192, 16 | "max_req_clength": 210, 17 | "avg_req_clength": 49, 18 | "total_res_clength": 5786238, 19 | "max_res_clength": 203, 20 | "avg_res_clength": 103, 21 | "req_rate": 23.541789660116386, 22 | "err_rate": 2.5293075820190603, 23 | "apdex_threshold": 25, 24 | "apdex_satisfied": 12278, 25 | "apdex_tolerated": 37332, 26 | "apdex_score": 0.5542837695022121 27 | }, 28 | "egress": { 29 | "requests": 0, 30 | "responses": 0, 31 | "errors": 0, 32 | "info": 0, 33 | "success": 0, 34 | "redirect": 0, 35 | "client_error": 0, 36 | "server_error": 0, 37 | "total_time": 0, 38 | "max_time": 0, 39 | "avg_time": 0, 40 | "total_req_clength": 0, 41 | "max_req_clength": 0, 42 | "avg_req_clength": 0, 43 | "total_res_clength": 0, 44 | "max_res_clength": 0, 45 | "avg_res_clength": 0, 46 | "req_rate": 0, 47 | "err_rate": 0, 48 | "apdex_threshold": 25, 49 | "apdex_satisfied": 0, 50 | "apdex_tolerated": 0, 51 | "apdex_score": 0 52 | }, 53 | "sys": { 54 | "rss": 49631232, 55 | "heapTotal": 26808320, 56 | "heapUsed": 19504832, 57 | "external": 1397813, 58 | "cpu": 4.595193432265044, 59 | "lag": 0.092901, 60 | "maxlag": 4.560799 61 | }, 62 | "name": "swagger-stats-spectest", 63 | "version": "0.95.16", 64 | "hostname": "hostname", 65 | "ip": "127.0.0.1", 66 | "apdexThreshold": 25, 67 | "apiop": { 68 | "/v2/pet/{petId}/uploadImage": { 69 | "POST": { 70 | "defs": { 71 | "swagger": true, 72 | "deprecated": false, 73 | "description": "", 74 | "operationId": "uploadFile", 75 | "summary": "uploads an image", 76 | "tags": [ 77 | "pet" 78 | ] 79 | }, 80 | "stats": { 81 | "requests": 2694, 82 | "responses": 2694, 83 | "errors": 283, 84 | "info": 0, 85 | "success": 2411, 86 | "redirect": 0, 87 | "client_error": 186, 88 | "server_error": 97, 89 | "total_time": 137397, 90 | "max_time": 126, 91 | "avg_time": 51.001113585746104, 92 | "total_req_clength": 294790, 93 | "max_req_clength": 210, 94 | "avg_req_clength": 109, 95 | "total_res_clength": 275845, 96 | "max_res_clength": 203, 97 | "avg_res_clength": 102, 98 | "req_rate": 1.136037783587754, 99 | "err_rate": 0.11933878721430378, 100 | "apdex_threshold": 25, 101 | "apdex_satisfied": 589, 102 | "apdex_tolerated": 1808, 103 | "apdex_score": 0.5541945063103192 104 | }, 105 | "details": { 106 | "duration": { 107 | "count": 2694, 108 | "buckets": [ 109 | 10, 110 | 25, 111 | 50, 112 | 100, 113 | 200 114 | ], 115 | "values": [ 116 | 275, 117 | 377, 118 | 679, 119 | 1349, 120 | 14, 121 | 0 122 | ] 123 | }, 124 | "req_size": { 125 | "count": 2694, 126 | "buckets": [ 127 | 10, 128 | 25, 129 | 50, 130 | 100, 131 | 200 132 | ], 133 | "values": [ 134 | 0, 135 | 218, 136 | 336, 137 | 648, 138 | 1388, 139 | 104 140 | ] 141 | }, 142 | "res_size": { 143 | "count": 2694, 144 | "buckets": [ 145 | 10, 146 | 25, 147 | 50, 148 | 100, 149 | 200 150 | ], 151 | "values": [ 152 | 97, 153 | 204, 154 | 352, 155 | 684, 156 | 1318, 157 | 39 158 | ] 159 | }, 160 | "code": { 161 | "200": { 162 | "count": 2411 163 | }, 164 | "401": { 165 | "count": 44 166 | }, 167 | "404": { 168 | "count": 142 169 | }, 170 | "500": { 171 | "count": 55 172 | }, 173 | "501": { 174 | "count": 42 175 | } 176 | }, 177 | "parameters": { 178 | "petId": { 179 | "name": "petId", 180 | "in": "path", 181 | "description": "ID of pet to update", 182 | "required": true, 183 | "type": "integer", 184 | "format": "int64", 185 | "hits": 2694, 186 | "misses": 0 187 | }, 188 | "additionalMetadata": { 189 | "name": "additionalMetadata", 190 | "in": "formData", 191 | "description": "Additional data to pass to server", 192 | "required": false, 193 | "type": "string", 194 | "hits": 0, 195 | "misses": 0 196 | }, 197 | "file": { 198 | "name": "file", 199 | "in": "formData", 200 | "description": "file to upload", 201 | "required": false, 202 | "type": "file", 203 | "hits": 0, 204 | "misses": 0 205 | } 206 | } 207 | } 208 | } 209 | } 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /src/data/itemstabledata.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "api_all_client_error_total", 4 | "color": "#4e79a7", 5 | "data": 10 6 | }, 7 | { 8 | "name": "api_all_errors_total", 9 | "color": "#f28e2c", 10 | "data": 47 11 | }, 12 | { 13 | "name": "api_all_request_in_processing_total", 14 | "color": "#e15759", 15 | "data": 19 16 | }, 17 | { 18 | "name": "api_all_request_total", 19 | "color": "#76b7b2", 20 | "data": 79 21 | }, 22 | { 23 | "name": "api_all_server_error_total", 24 | "color": "#59a14f", 25 | "data": 34 26 | }, 27 | { 28 | "name": "api_all_success_total", 29 | "color": "#edc949", 30 | "data": 44 31 | }, 32 | { 33 | "name": "api_request_duration_milliseconds_bucket", 34 | "color": "#af7aa1", 35 | "data": 81 36 | } 37 | ] 38 | -------------------------------------------------------------------------------- /src/data/ptabledata.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": { 3 | "type": "grid" 4 | }, 5 | "widgets": [ 6 | { 7 | "id": "w1", 8 | "type": "DbChartjsLine", 9 | "cspan": 4, 10 | "height": 250, 11 | "properties": { 12 | "options": { 13 | "test": "true", 14 | "key": "value", 15 | "display": "dense" 16 | } 17 | } 18 | }, 19 | { 20 | "id": "w2", 21 | "type": "DbChartjsBar", 22 | "cspan": 4, 23 | "height": 250 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /src/data/requests.json: -------------------------------------------------------------------------------- 1 | { 2 | "startts": 1588042628346, 3 | "all": { 4 | "requests": 2070, 5 | "responses": 2070, 6 | "errors": 257, 7 | "info": 0, 8 | "success": 1813, 9 | "redirect": 0, 10 | "client_error": 186, 11 | "server_error": 71, 12 | "total_time": 106076, 13 | "max_time": 103, 14 | "avg_time": 51.24444444444445, 15 | "total_req_clength": 56695, 16 | "max_req_clength": 210, 17 | "avg_req_clength": 27, 18 | "total_res_clength": 203014, 19 | "max_res_clength": 199, 20 | "avg_res_clength": 98, 21 | "req_rate": 5.216707577078744, 22 | "err_rate": 0.6476781871059117, 23 | "apdex_threshold": 25, 24 | "apdex_satisfied": 435, 25 | "apdex_tolerated": 1362, 26 | "apdex_score": 0.5391304347826087 27 | }, 28 | "egress": { 29 | "requests": 0, 30 | "responses": 0, 31 | "errors": 0, 32 | "info": 0, 33 | "success": 0, 34 | "redirect": 0, 35 | "client_error": 0, 36 | "server_error": 0, 37 | "total_time": 0, 38 | "max_time": 0, 39 | "avg_time": 0, 40 | "total_req_clength": 0, 41 | "max_req_clength": 0, 42 | "avg_req_clength": 0, 43 | "total_res_clength": 0, 44 | "max_res_clength": 0, 45 | "avg_res_clength": 0, 46 | "req_rate": 0, 47 | "err_rate": 0, 48 | "apdex_threshold": 25, 49 | "apdex_satisfied": 0, 50 | "apdex_tolerated": 0, 51 | "apdex_score": 0 52 | }, 53 | "sys": { 54 | "rss": 49201152, 55 | "heapTotal": 23588864, 56 | "heapUsed": 15191840, 57 | "external": 1964211, 58 | "cpu": 3.0941847891073517, 59 | "lag": 0.149, 60 | "maxlag": 9.5066 61 | }, 62 | "name": "swagger-stats-hapitest", 63 | "version": "0.95.16", 64 | "hostname": "hostname", 65 | "ip": "127.0.0.1", 66 | "apdexThreshold": 25, 67 | "method": { 68 | "GET": { 69 | "requests": 1036, 70 | "responses": 1036, 71 | "errors": 128, 72 | "info": 0, 73 | "success": 908, 74 | "redirect": 0, 75 | "client_error": 94, 76 | "server_error": 34, 77 | "total_time": 52592, 78 | "max_time": 102, 79 | "avg_time": 50.76447876447877, 80 | "total_req_clength": 0, 81 | "max_req_clength": 0, 82 | "avg_req_clength": 0, 83 | "total_res_clength": 101353, 84 | "max_res_clength": 199, 85 | "avg_res_clength": 97, 86 | "req_rate": 2.610873937127333, 87 | "err_rate": 0.3225790192589755, 88 | "apdex_threshold": 25, 89 | "apdex_satisfied": 230, 90 | "apdex_tolerated": 670, 91 | "apdex_score": 0.5453667953667953 92 | }, 93 | "POST": { 94 | "requests": 509, 95 | "responses": 509, 96 | "errors": 67, 97 | "info": 0, 98 | "success": 442, 99 | "redirect": 0, 100 | "client_error": 47, 101 | "server_error": 20, 102 | "total_time": 26591, 103 | "max_time": 102, 104 | "avg_time": 52.24165029469548, 105 | "total_req_clength": 56695, 106 | "max_req_clength": 210, 107 | "avg_req_clength": 111, 108 | "total_res_clength": 50231, 109 | "max_res_clength": 199, 110 | "avg_res_clength": 98, 111 | "req_rate": 1.2827556312720196, 112 | "err_rate": 0.16884995539336997, 113 | "apdex_threshold": 25, 114 | "apdex_satisfied": 95, 115 | "apdex_tolerated": 345, 116 | "apdex_score": 0.5255402750491159 117 | }, 118 | "PUT": { 119 | "requests": 0, 120 | "responses": 0, 121 | "errors": 0, 122 | "info": 0, 123 | "success": 0, 124 | "redirect": 0, 125 | "client_error": 0, 126 | "server_error": 0, 127 | "total_time": 0, 128 | "max_time": 0, 129 | "avg_time": 0, 130 | "total_req_clength": 0, 131 | "max_req_clength": 0, 132 | "avg_req_clength": 0, 133 | "total_res_clength": 0, 134 | "max_res_clength": 0, 135 | "avg_res_clength": 0, 136 | "req_rate": 0, 137 | "err_rate": 0, 138 | "apdex_threshold": 25, 139 | "apdex_satisfied": 0, 140 | "apdex_tolerated": 0, 141 | "apdex_score": 0 142 | }, 143 | "DELETE": { 144 | "requests": 525, 145 | "responses": 525, 146 | "errors": 62, 147 | "info": 0, 148 | "success": 463, 149 | "redirect": 0, 150 | "client_error": 45, 151 | "server_error": 17, 152 | "total_time": 26893, 153 | "max_time": 103, 154 | "avg_time": 51.224761904761905, 155 | "total_req_clength": 0, 156 | "max_req_clength": 0, 157 | "avg_req_clength": 0, 158 | "total_res_clength": 51430, 159 | "max_res_clength": 199, 160 | "avg_res_clength": 97, 161 | "req_rate": 1.3230780086793916, 162 | "err_rate": 0.15624921245356627, 163 | "apdex_threshold": 25, 164 | "apdex_satisfied": 110, 165 | "apdex_tolerated": 347, 166 | "apdex_score": 0.54 167 | } 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /src/layouts/mainlayout.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 283 | 292 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import router from './router'; 4 | import store from './store/store'; 5 | import VueGoodTablePlugin from 'vue-good-table'; 6 | import 'vue-good-table/dist/vue-good-table.css'; 7 | 8 | import { 9 | DashBlocks, 10 | DbDashboard, 11 | DbHorizon, 12 | DbSunburst, 13 | DbSankey, 14 | DbRidgeline, 15 | DbChartjsBar, 16 | DbChartjsHorizontalBar, 17 | DbChartjsDoughnut, 18 | DbChartjsLine, 19 | DbChartjsPie, 20 | DbChartjsPolarArea, 21 | DbChartjsRadar, 22 | DbChartjsBubble, 23 | DbChartjsScatter, 24 | DbNumber, 25 | DbEasyPie, 26 | DbTrendLine, 27 | DbTrendBar, 28 | DbSparkline, 29 | DbDygraphsBar, 30 | DbDygraphsLine, 31 | DbDygraphsSparkLine, 32 | DbDygraphsDateTimeHistogram 33 | } from 'dashblocks'; 34 | 35 | Vue.use(DashBlocks, { 36 | components: { 37 | DbDashboard, 38 | DbHorizon, 39 | DbSunburst, 40 | DbSankey, 41 | DbRidgeline, 42 | DbChartjsBar, 43 | DbChartjsHorizontalBar, 44 | DbChartjsDoughnut, 45 | DbChartjsLine, 46 | DbChartjsPie, 47 | DbChartjsPolarArea, 48 | DbChartjsRadar, 49 | DbChartjsBubble, 50 | DbChartjsScatter, 51 | DbNumber, 52 | DbEasyPie, 53 | DbTrendLine, 54 | DbTrendBar, 55 | DbSparkline, 56 | DbDygraphsBar, 57 | DbDygraphsLine, 58 | DbDygraphsSparkLine, 59 | DbDygraphsDateTimeHistogram 60 | } 61 | //components: dashblocksComponents 62 | }); 63 | 64 | // Sample: to import all 65 | /* 66 | import { DashBlocks } from 'dashblocks'; 67 | import * as dashblocksComponents from 'dashblocks'; 68 | Vue.use(DashBlocks, { 69 | components: dashblocksComponents 70 | }); 71 | */ 72 | 73 | // Dashblocks CSS 74 | import 'dashblocks/dist/dashblocks.css'; 75 | 76 | import './quasar'; 77 | 78 | //Vue.config.productionTip = false; 79 | 80 | Vue.use(VueGoodTablePlugin); 81 | 82 | new Vue({ 83 | router, 84 | store, 85 | render: h => h(App) 86 | }).$mount('#app'); 87 | -------------------------------------------------------------------------------- /src/mixins/demodashboard.js: -------------------------------------------------------------------------------- 1 | import { mapState } from 'vuex'; 2 | 3 | export const demodashboard = { 4 | computed: { 5 | ...mapState({ 6 | dark: state => state.layout.dark, 7 | dashboardColorScheme: state => state.layout.dashboardColorScheme 8 | }) 9 | }, 10 | watch: { 11 | dashboardColorScheme(val) { 12 | console.log(`dashboardColorScheme changed to ${val}`); 13 | this.$set(this.dbspec, 'colorScheme', val); 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/mixins/vgtmethods.js: -------------------------------------------------------------------------------- 1 | // Standard methods for views that use vue-good-table 2 | export const vgtMethods = { 3 | methods: { 4 | formatToFixed2: function(value) { 5 | return value.toFixed(2); 6 | }, 7 | formatToFixed0: function(value) { 8 | return value.toFixed(0); 9 | }, 10 | tdClassErrors(row) { 11 | return row.errors > 0 ? 'sws-td-badge sws-td-badge-neg' : ''; 12 | }, 13 | tdClassErrRate(row) { 14 | return row.err_rate > 0 ? 'sws-td-badge sws-td-badge-neg' : ''; 15 | }, 16 | tdClassCErr(row) { 17 | return row.client_error > 0 ? 'sws-td-badge sws-td-badge-neg' : ''; 18 | }, 19 | tdClassSErr(row) { 20 | return row.server_error > 0 ? 'sws-td-badge sws-td-badge-neg' : ''; 21 | }, 22 | tdClassApdex(row) { 23 | return 'text-weight-bold ' + (row.apdex_score < 0.6 ? 'sws-td-badge sws-td-badge-warn' : ''); 24 | } 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /src/pages/login.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 65 | 66 | 78 | -------------------------------------------------------------------------------- /src/quasar.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | import './styles/quasar.scss'; 4 | import '@quasar/extras/roboto-font/roboto-font.css'; 5 | import '@quasar/extras/material-icons/material-icons.css'; 6 | //import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'; 7 | //import '@quasar/extras/material-icons-round/material-icons-round.css'; 8 | //import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'; 9 | //import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'; 10 | //import '@quasar/extras/ionicons-v4/ionicons-v4.css'; 11 | //import '@quasar/extras/mdi-v4/mdi-v4.css'; 12 | import '@quasar/extras/mdi-v5/mdi-v5.css'; 13 | 14 | import { 15 | Quasar, 16 | Ripple, 17 | ClosePopup, 18 | TouchPan, 19 | LoadingBar, 20 | Notify, 21 | Dialog, 22 | QLayout, 23 | QHeader, 24 | QDrawer, 25 | QPageContainer, 26 | QPage, 27 | QPageSticky, 28 | QToolbar, 29 | QToolbarTitle, 30 | QBtn, 31 | QBtnDropdown, 32 | QBtnGroup, 33 | QIcon, 34 | QList, 35 | QItem, 36 | QItemSection, 37 | QItemLabel, 38 | QSplitter, 39 | QScrollArea, 40 | QExpansionItem, 41 | QAvatar, 42 | QBtnToggle, 43 | QSeparator, 44 | QTooltip, 45 | QTable, 46 | QTd, 47 | QTh, 48 | QTr, 49 | QCard, 50 | QCardSection, 51 | QCardActions, 52 | QSelect, 53 | QToggle, 54 | QBadge, 55 | QSpace, 56 | QInput, 57 | QTabs, 58 | QTab, 59 | QTabPanels, 60 | QTabPanel, 61 | QDate, 62 | QTime, 63 | QPopupProxy, 64 | QBar, 65 | QPopupEdit, 66 | QRadio, 67 | QResizeObserver, 68 | QChip, 69 | QCheckbox, 70 | QPagination, 71 | QDialog, 72 | QVirtualScroll, 73 | QSkeleton, 74 | QImg, 75 | QMenu, 76 | QBanner 77 | } from 'quasar'; 78 | 79 | Vue.use(Quasar, { 80 | config: {}, 81 | components: { 82 | QLayout, 83 | QHeader, 84 | QDrawer, 85 | QPageContainer, 86 | QPage, 87 | QPageSticky, 88 | QToolbar, 89 | QToolbarTitle, 90 | QBtn, 91 | QBtnDropdown, 92 | QBtnGroup, 93 | QIcon, 94 | QList, 95 | QItem, 96 | QItemSection, 97 | QItemLabel, 98 | QSplitter, 99 | QScrollArea, 100 | QExpansionItem, 101 | QAvatar, 102 | QBtnToggle, 103 | QSeparator, 104 | QTooltip, 105 | QTable, 106 | QTd, 107 | QTh, 108 | QTr, 109 | QCard, 110 | QCardSection, 111 | QCardActions, 112 | QSelect, 113 | QToggle, 114 | QBadge, 115 | QSpace, 116 | QInput, 117 | QTabs, 118 | QTab, 119 | QTabPanels, 120 | QTabPanel, 121 | QDate, 122 | QTime, 123 | QPopupProxy, 124 | QBar, 125 | QPopupEdit, 126 | QRadio, 127 | QResizeObserver, 128 | QChip, 129 | QCheckbox, 130 | QPagination, 131 | QDialog, 132 | QVirtualScroll, 133 | QSkeleton, 134 | QImg, 135 | QMenu, 136 | QBanner 137 | }, 138 | directives: { 139 | Ripple, 140 | ClosePopup, 141 | TouchPan 142 | }, 143 | plugins: { 144 | LoadingBar, 145 | Notify, 146 | Dialog 147 | } 148 | }); 149 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import MainLayout from './layouts/mainlayout.vue'; 4 | import Home from './views/Home.vue'; 5 | import About from './views/About.vue'; 6 | import DashblocksShowcase from './views/DashblocksShowcase.vue'; 7 | import Typography from './views/typography.vue'; 8 | import MaterialIcons from './views/materialicons.vue'; 9 | import ChartJsShowcase from './views/ChartJsShowcase.vue'; 10 | import Dygraphs from './views/Dygraphs.vue'; 11 | import Mdi from './views/mdi.vue'; 12 | import Tables from './views/tables.vue'; 13 | import Forms from './views/forms.vue'; 14 | import Observability from './views/observability.vue'; 15 | import Summary from './views/summary.vue'; 16 | import Requests from './views/requests.vue'; 17 | import VGT from './views/vuegoodtable.vue'; 18 | import QuasarTable from './views/quasartable.vue'; 19 | import APIOp from './views/apiop.vue'; 20 | import Errors from './views/errors.vue'; 21 | import Timeline from './views/timeline.vue'; 22 | 23 | import Login from './pages/login.vue'; 24 | 25 | Vue.use(Router); 26 | 27 | export default new Router({ 28 | routes: [ 29 | { 30 | path: '/', 31 | component: MainLayout, 32 | children: [ 33 | { 34 | path: '', 35 | name: 'showcase', 36 | component: DashblocksShowcase 37 | }, 38 | { 39 | path: '/chartjs', 40 | name: 'chartjs', 41 | component: ChartJsShowcase 42 | }, 43 | { 44 | path: '/dygraphs', 45 | name: 'dygraphs', 46 | component: Dygraphs 47 | }, 48 | { 49 | path: '/typography', 50 | name: 'typography', 51 | component: Typography 52 | }, 53 | { 54 | path: '/mdi', 55 | name: 'mdi', 56 | component: Mdi 57 | }, 58 | { 59 | path: '/icons', 60 | name: 'icons', 61 | component: MaterialIcons 62 | }, 63 | { 64 | path: '/tables', 65 | name: 'tables', 66 | component: Tables 67 | }, 68 | { 69 | path: '/forms', 70 | name: 'forms', 71 | component: Forms 72 | }, 73 | { 74 | path: '/observability', 75 | name: 'observability', 76 | component: Observability 77 | }, 78 | { 79 | path: '/summary', 80 | name: 'summary', 81 | component: Summary 82 | }, 83 | { 84 | path: '/requests', 85 | name: 'requests', 86 | component: Requests 87 | }, 88 | { 89 | path: '/vgt', 90 | name: 'vgt', 91 | component: VGT 92 | }, 93 | { 94 | path: '/apiop', 95 | name: 'apiop', 96 | component: APIOp 97 | }, 98 | { 99 | path: '/errors', 100 | name: 'errors', 101 | component: Errors 102 | }, 103 | { 104 | path: '/quasartable', 105 | name: 'quasartable', 106 | component: QuasarTable 107 | }, 108 | { 109 | path: '/timeline', 110 | name: 'timeline', 111 | component: Timeline 112 | } 113 | ] 114 | }, 115 | { 116 | path: '/login', 117 | component: Login 118 | } 119 | ] 120 | }); 121 | -------------------------------------------------------------------------------- /src/store/modules/layout.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Layout state Vuex Module 3 | */ 4 | 5 | //import { dbColors } from 'dashblocks'; 6 | 7 | const state = { 8 | dark: (localStorage['ub-dark-mode'] || 'false') === 'true', 9 | menuAutoExpand: (localStorage['ub-menu-auto-expand'] || 'false') === 'true', 10 | menuMini: (localStorage['ub-menu-mini'] || 'false') === 'true', 11 | dashboardColorScheme: localStorage['ub-dashboard-color-scheme'] || 'Standard' 12 | }; 13 | 14 | const getters = {}; 15 | 16 | const mutations = { 17 | SET_DARK(state, { dark }) { 18 | localStorage['ub-dark-mode'] = dark; 19 | state.dark = dark; 20 | }, 21 | SET_MENU_AUTO_EXPAND(state, { menuAutoExpand }) { 22 | localStorage['ub-menu-auto-expand'] = menuAutoExpand; 23 | state.menuAutoExpand = menuAutoExpand; 24 | }, 25 | SET_MENU_MINI(state, { menuMini }) { 26 | localStorage['ub-menu-mini'] = menuMini; 27 | state.menuMini = menuMini; 28 | }, 29 | SET_DASHBOARD_COLOR_SCHEME(state, { dashboardColorScheme }) { 30 | localStorage['ub-dashboard-color-scheme'] = dashboardColorScheme; 31 | state.dashboardColorScheme = dashboardColorScheme; 32 | } 33 | }; 34 | 35 | const actions = { 36 | setDark({ commit }, { dark }) { 37 | commit('SET_DARK', { dark: dark }); 38 | }, 39 | setMenuAutoExpand({ commit }, { menuAutoExpand }) { 40 | commit('SET_MENU_AUTO_EXPAND', { menuAutoExpand: menuAutoExpand }); 41 | }, 42 | setMenuMini({ commit }, { menuMini }) { 43 | commit('SET_MENU_MINI', { menuMini: menuMini }); 44 | }, 45 | setDashboardColorScheme({ commit }, { dashboardColorScheme }) { 46 | commit('SET_DASHBOARD_COLOR_SCHEME', { dashboardColorScheme: dashboardColorScheme }); 47 | } 48 | }; 49 | 50 | export default { 51 | namespaced: true, 52 | state, 53 | getters, 54 | mutations, 55 | actions 56 | }; 57 | -------------------------------------------------------------------------------- /src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import layout from './modules/layout'; 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: {}, 8 | modules: { 9 | layout 10 | }, 11 | mutations: {}, 12 | actions: {} 13 | }); 14 | -------------------------------------------------------------------------------- /src/styles/quasar.scss: -------------------------------------------------------------------------------- 1 | @import './quasar.variables.scss'; 2 | @import '~quasar-styl'; 3 | // @import '~quasar-addon-styl' 4 | 5 | // ??? 6 | //@import 'dashblocks/src/assets/scss/dashblocks.scss'; 7 | @import 'textbgcolors.scss'; 8 | @import 'ubbox.scss'; 9 | @import 'ubcode.scss'; 10 | @import 'vgt.scss'; 11 | 12 | .bg-none { 13 | background: none; 14 | } 15 | 16 | .ub-bordered { 17 | border: 1px solid rgba(0, 0, 0, 0.12); 18 | } 19 | .body--dark .ub-bordered { 20 | border-color: rgba(255, 255, 255, 0.28); 21 | } 22 | .body--dark .q-menu { 23 | -webkit-box-shadow: 0 1px 5px rgba(255, 255, 255, 0.12), 0 1px 1px rgba(255, 255, 255, 0.14), 0 1px 1px -2px rgba(255, 255, 255, 0.28); 24 | box-shadow: 0 1px 5px rgba(255, 255, 255, 0.12), 0 1px 1px rgba(255, 255, 255, 0.14), 0 1px 1px -2px rgba(255, 255, 255, 0.28); 25 | } 26 | 27 | body.body--dark { 28 | color: $grey-6; 29 | } 30 | 31 | .q-dark { 32 | color: $grey-6; 33 | } 34 | 35 | .q-item { 36 | color: $blue-grey-8; 37 | } 38 | 39 | .q-item--dark { 40 | color: $blue-grey-4; 41 | } 42 | 43 | a { 44 | color: $primary; 45 | text-decoration: none; 46 | } 47 | 48 | a:hover { 49 | color: $primary; 50 | text-decoration: underline; 51 | } 52 | 53 | .ub-btn-dropdown-bare { 54 | .q-btn-dropdown__arrow { 55 | margin-left: 0px; 56 | } 57 | } 58 | 59 | .db-toolbar { 60 | background: #0f2027; /* fallback for old browsers */ 61 | background: -webkit-linear-gradient(to right, #2c5364, #203a43, #0f2027); /* Chrome 10-25, Safari 5.1-6 */ 62 | background: linear-gradient(to right, #2c5364, #203a43, #0f2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 63 | } 64 | 65 | 66 | .ub-page { 67 | @media (max-width: $breakpoint-xs-max) { 68 | padding: 4px 8px 8px 8px; 69 | } 70 | @media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-md-max) { 71 | padding: 4px 12px 16px 12px; 72 | } 73 | @media (min-width: $breakpoint-lg-min) { 74 | padding: 4px 12px 24px 12px; 75 | } 76 | } 77 | 78 | -------------------------------------------------------------------------------- /src/styles/quasar.variables.scss: -------------------------------------------------------------------------------- 1 | // It's highly recommended to change the default colors 2 | // to match your app's branding. 3 | 4 | $primary : #027BE3; 5 | $secondary : #26A69A; 6 | $accent : #9C27B0; 7 | 8 | $dark : #1D1D1D; 9 | 10 | $positive : #21BA45; 11 | $negative : #C10015; 12 | $info : #31CCEC; 13 | $warning : #F2C037; 14 | 15 | @import '~quasar-variables-styl'; 16 | -------------------------------------------------------------------------------- /src/styles/textbgcolors.scss: -------------------------------------------------------------------------------- 1 | /* Various text and bg colors */ 2 | 3 | .text-down1 { 4 | color: rgba(128,128,128,0.7); 5 | } 6 | 7 | -------------------------------------------------------------------------------- /src/styles/ubbox.scss: -------------------------------------------------------------------------------- 1 | /** UB Flex Box */ 2 | .ub-box { 3 | display: flex; 4 | flex-flow: column; 5 | flex-shrink: 0; 6 | 7 | .ub-row { 8 | border: 0px; 9 | } 10 | 11 | .ub-row.ub-box-fixed { 12 | flex: 0 0 auto; 13 | width: 100%; 14 | } 15 | 16 | .ub-row.ub-box-expand { 17 | flex: 1 1 auto; 18 | width: 100%; 19 | } 20 | 21 | .ub-row.ub-footer { 22 | flex: 0 1 24px; 23 | width: 100%; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/styles/ubcode.scss: -------------------------------------------------------------------------------- 1 | /* UBook - code highlighting styles */ 2 | 3 | .ub-code { 4 | font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; 5 | color: #757575; 6 | 7 | .ub-v-s { 8 | padding: 2px; 9 | margin: 1px; 10 | background-color: #f5f5f5; 11 | border-radius: 2px; 12 | color: #1a1aa6; 13 | } 14 | 15 | .ub-v-n { 16 | padding: 2px; 17 | margin: 1px; 18 | background-color: #f5f5f5; 19 | border-radius: 2px; 20 | color: #9a050f; 21 | } 22 | } 23 | 24 | .q-dark .ub-code { 25 | color: #757575; 26 | 27 | .ub-v-s { 28 | background-color: inherit; 29 | color: #7986CB; 30 | } 31 | 32 | .ub-v-n { 33 | background-color: inherit; 34 | color: #AD1457; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/styles/vgt.scss: -------------------------------------------------------------------------------- 1 | /* vue-good-table styles */ 2 | 3 | table.vgt-table.sws-table { 4 | font-size: 14px; 5 | } 6 | 7 | table.vgt-table.sws-table.nocturnal { 8 | background-color: $grey-10; 9 | } 10 | 11 | table.vgt-table.sws-table.nocturnal td { 12 | color: $grey-5; 13 | } 14 | 15 | table.vgt-table.sws-table.nocturnal th { 16 | color: $grey-4; 17 | } 18 | 19 | .sws-td-badge span { 20 | border-radius: 8px; 21 | padding: 2px 6px; 22 | color: white; 23 | } 24 | .sws-td-badge-neg span { 25 | background-color: $negative; 26 | opacity: 0.6; 27 | } 28 | 29 | .sws-td-badge-warn span { 30 | background-color: $warning; 31 | opacity: 0.7; 32 | color: black; 33 | } 34 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | // Utilities 2 | import pathOr from 'ramda/src/pathOr'; 3 | 4 | class Utils { 5 | constructor() {} 6 | 7 | formatBytes(a, b) { 8 | if (0 === a) return { value: 0, qualifier: 'Bytes' }; 9 | let c = 1e3, 10 | d = b || 2, 11 | e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 12 | f = Math.floor(Math.log(a) / Math.log(c)); 13 | return { value: parseFloat((a / Math.pow(c, f)).toFixed(d)), qualifier: e[f] }; 14 | } 15 | 16 | bucketsToLabels(buckets) { 17 | let labels = []; 18 | if (Array.isArray(buckets) && buckets.length > 0) { 19 | let prevBucket = 0; 20 | for (let bucket of buckets) { 21 | labels.push(`${prevBucket}-${bucket}`); 22 | prevBucket = bucket; 23 | } 24 | labels.push(`${prevBucket}-inf`); 25 | } 26 | return labels; 27 | } 28 | 29 | getKVObjSortedArray(obj, asc) { 30 | let keys = Object.keys(obj); 31 | let data = keys.map(x => { 32 | return { k: x, v: obj[x] }; 33 | }); 34 | data.sort(function(a, b) { 35 | return asc ? a.v - b.v : b.v - a.v; 36 | }); 37 | return data; 38 | } 39 | 40 | getApiStatsArray(statsData) { 41 | let res = []; 42 | let apiStats = pathOr(null, ['apistats'], statsData); 43 | let apiDefs = pathOr(null, ['apidefs'], statsData); 44 | if (!apiStats) { 45 | return res; 46 | } 47 | for (let apiPath of Object.keys(apiStats)) { 48 | let apiMethods = apiStats[apiPath]; 49 | for (let apiMethod of Object.keys(apiMethods)) { 50 | res.push( 51 | Object.assign( 52 | { 53 | path: apiPath, 54 | method: apiMethod 55 | }, 56 | apiMethods[apiMethod], 57 | { 58 | tags: pathOr([], [apiPath, apiMethod, 'tags'], apiDefs).join(',') 59 | } 60 | ) 61 | ); 62 | } 63 | } 64 | return res; 65 | } 66 | 67 | getMethodStatsArray(statsData) { 68 | let res = []; 69 | let allMethodStats = pathOr(null, ['method'], statsData); 70 | if (!allMethodStats) { 71 | return res; 72 | } 73 | for (let methodName of Object.keys(allMethodStats)) { 74 | res.push( 75 | Object.assign( 76 | { 77 | method: methodName 78 | }, 79 | allMethodStats[methodName] 80 | ) 81 | ); 82 | } 83 | return res; 84 | } 85 | 86 | getCurrentTimelineBucket(statsData) { 87 | let timelineSettings = pathOr(null, ['timeline', 'settings'], statsData); 88 | let timelineData = pathOr(null, ['timeline', 'data'], statsData); 89 | if (timelineData && timelineSettings) { 90 | return timelineData[timelineSettings.bucket_current]; 91 | } 92 | return {}; 93 | } 94 | 95 | // Returns timeline sorted by timestampts asc 96 | // TODO add API to return timeline in array already sorted 97 | getSortedTimeline(statsData) { 98 | let timelineSorted = []; 99 | let timelineSettings = pathOr(null, ['timeline', 'settings'], statsData); 100 | let timelineData = pathOr(null, ['timeline', 'data'], statsData); 101 | if (timelineData && timelineSettings) { 102 | for (let key of Object.keys(timelineData)) { 103 | let entry = timelineData[key]; 104 | entry.tc = parseInt(key); 105 | entry.ts = entry.tc * (timelineSettings.bucket_duration || 60000); 106 | timelineSorted.push(entry); 107 | } 108 | } 109 | // Sort it by timecode ascending 110 | timelineSorted.sort(function(a, b) { 111 | return a.tc - b.tc; 112 | }); 113 | return timelineSorted; 114 | } 115 | } 116 | 117 | const utils = new Utils(); 118 | export default utils; 119 | -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/views/ChartJsShowcase.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 289 | -------------------------------------------------------------------------------- /src/views/DashblocksShowcase.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 295 | -------------------------------------------------------------------------------- /src/views/Dygraphs.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 147 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/views/SampleDashboard.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 131 | -------------------------------------------------------------------------------- /src/views/errors.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 231 | -------------------------------------------------------------------------------- /src/views/forms.vue: -------------------------------------------------------------------------------- 1 | 84 | 85 | 96 | -------------------------------------------------------------------------------- /src/views/materialicons.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | -------------------------------------------------------------------------------- /src/views/mdi.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 80 | 108 | -------------------------------------------------------------------------------- /src/views/observability.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | -------------------------------------------------------------------------------- /src/views/quasartable.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 117 | -------------------------------------------------------------------------------- /src/views/requests.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 278 | -------------------------------------------------------------------------------- /src/views/summary.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 235 | -------------------------------------------------------------------------------- /src/views/tables.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | -------------------------------------------------------------------------------- /src/views/timeline.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 199 | -------------------------------------------------------------------------------- /src/views/typography.vue: -------------------------------------------------------------------------------- 1 | 110 | 111 | 121 | -------------------------------------------------------------------------------- /src/views/vuegoodtable.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 149 | -------------------------------------------------------------------------------- /tests/e2e/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ["cypress"], 3 | env: { 4 | mocha: true, 5 | "cypress/globals": true 6 | }, 7 | rules: { 8 | strict: "off" 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/guides/guides/plugins-guide.html 2 | 3 | // if you need a custom webpack configuration you can uncomment the following import 4 | // and then use the `file:preprocessor` event 5 | // as explained in the cypress docs 6 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples 7 | 8 | /* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */ 9 | // const webpack = require('@cypress/webpack-preprocessor') 10 | 11 | module.exports = (on, config) => { 12 | // on('file:preprocessor', webpack({ 13 | // webpackOptions: require('@vue/cli-service/webpack.config'), 14 | // watchOptions: {} 15 | // })) 16 | 17 | return Object.assign({}, config, { 18 | fixturesFolder: 'tests/e2e/fixtures', 19 | integrationFolder: 'tests/e2e/specs', 20 | screenshotsFolder: 'tests/e2e/screenshots', 21 | videosFolder: 'tests/e2e/videos', 22 | supportFile: 'tests/e2e/support/index.js' 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe('My First Test', () => { 4 | it('Visits the app root url', () => { 5 | cy.visit('/'); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | // vue.config.js 2 | const webpack = require('webpack'); 3 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 4 | 5 | module.exports = { 6 | publicPath: '/dashblocks-template/', 7 | 8 | configureWebpack: { 9 | plugins: [ 10 | // Ignore all locale files of moment.js 11 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 12 | //new BundleAnalyzerPlugin({ analyzerMode: 'static' }) 13 | ] 14 | }, 15 | 16 | pluginOptions: { 17 | quasar: { 18 | importStrategy: 'manual', 19 | rtlSupport: false, 20 | treeShake: true 21 | } 22 | }, 23 | 24 | transpileDependencies: ['quasar'] 25 | }; 26 | --------------------------------------------------------------------------------