├── .babelrc ├── .clean-publish ├── .commitlintrc.json ├── .czrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── dependabot.yml └── workflows │ ├── checks.yml │ ├── ci.yml │ ├── commit.yml │ └── release.yml ├── .gitignore ├── .nano-staged.json ├── .prettierrc ├── .simple-git-hooks.json ├── .size-limit.json ├── .storybook ├── main.js ├── manager.js ├── preview.js └── theme.js ├── CHANGELOG.md ├── README.html ├── README.md ├── demos ├── Bubble.png ├── Material.png ├── Simple.png └── Spreadsheets.png ├── jest.config.js ├── legacy ├── .babelrc ├── jest.config.js ├── package.json ├── pnpm-lock.yaml ├── rollup.config.js ├── sandboxes │ ├── area-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── bar-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── bubble-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── calendar-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── candlestick-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── column-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── combo-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── donut-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── gantt-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── gauge-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── geo-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── histogram-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── line-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── org-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── pie-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── sankey-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── scatter-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── stepped-area-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── table-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── timeline-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── tree-map-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── trendlines-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ ├── waterfall-chart │ │ ├── package.json │ │ └── src │ │ │ ├── App.vue │ │ │ ├── components │ │ │ └── google-chart │ │ │ │ ├── GoogleChart.vue │ │ │ │ └── GoogleChartData.js │ │ │ └── index.js │ └── word-tree-chart │ │ ├── package.json │ │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── google-chart │ │ │ ├── GoogleChart.vue │ │ │ └── GoogleChartData.js │ │ └── index.js ├── src │ ├── @types │ │ └── shims-vue.d.ts │ ├── components │ │ └── GChart.vue │ └── index.ts └── test │ ├── .eslintrc │ ├── AreaChart.spec.ts │ ├── BarChart.spec.ts │ ├── BubbleChart.spec.ts │ ├── Calendar.spec.ts │ ├── Candlestick.spec.ts │ ├── ColumnChart.spec.ts │ ├── ComboChart.spec.ts │ ├── DonutChart.spec.ts │ ├── GanttChart.spec.ts │ ├── GaugeChart.spec.ts │ ├── GeoCharts.spec.ts │ ├── Histogram.spec.ts │ ├── LineChart.spec.ts │ ├── OrgChart.spec.ts │ ├── PieChart.spec.ts │ ├── Sankey.spec.ts │ ├── ScatterChart.spec.ts │ ├── SteppedAreaChart.spec.ts │ ├── Table.spec.ts │ ├── TimeLineChart.spec.ts │ ├── TreeMapChart.spec.ts │ ├── TrendlinesChart.spec.ts │ ├── WaterfallChart.spec.ts │ └── WordTreeChart.spec.ts ├── package.json ├── pnpm-lock.yaml ├── rollup.config.js ├── sandboxes ├── area-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── bar-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── bubble-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── calendar-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── candlestick-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── column-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── combo-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── donut-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── gantt-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── gauge-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── geo-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── histogram-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── line-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── org-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── pie-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── sankey-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── scatter-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── stepped-area-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── table-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── time-line-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── tree-map-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── trendlines-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js ├── tsconfig.json ├── waterfall-chart │ ├── package.json │ └── src │ │ ├── App.vue │ │ ├── components │ │ └── GoogleChart.ts │ │ └── index.js └── word-tree-chart │ ├── package.json │ └── src │ ├── App.vue │ ├── components │ └── GoogleChart.ts │ └── index.js ├── src ├── components │ └── GChart.ts ├── index.ts ├── lib │ ├── debounce.ts │ └── google-charts-loader.ts ├── types.ts ├── utils.ts └── window.ts ├── stories ├── AreaChart.stories.ts ├── BarChart.stories.ts ├── BubbleChart.stories.ts ├── Calendar.stories.ts ├── Candlestick.stories.ts ├── ColumnChart.stories.ts ├── ComboChart.stories.ts ├── DonutChart.stories.ts ├── GanttChart.stories.ts ├── GaugeChart.stories.ts ├── GeoCharts.stories.ts ├── Histogram.stories.ts ├── LineChart.stories.ts ├── OrgChart.stories.ts ├── PieChart.stories.ts ├── Sankey.stories.ts ├── ScatterChart.stories.ts ├── SteppedAreaChart.stories.ts ├── Table.stories.ts ├── TimeLineChart.stories.ts ├── TreeMapChart.stories.ts ├── TrendlinesChart.stories.ts ├── WaterfallChart.stories.ts └── WordTreeChart.stories.ts ├── test ├── .eslintrc ├── AreaChart.spec.ts ├── BarChart.spec.ts ├── BubbleChart.spec.ts ├── Calendar.spec.ts ├── Candlestick.spec.ts ├── ChartsTypes.test-d.ts ├── ColumnChart.spec.ts ├── ComboChart.spec.ts ├── DonutChart.spec.ts ├── GanttChart.spec.ts ├── GaugeChart.spec.ts ├── GeoCharts.spec.ts ├── Histogram.spec.ts ├── LineChart.spec.ts ├── OrgChart.spec.ts ├── PieChart.spec.ts ├── Sankey.spec.ts ├── ScatterChart.spec.ts ├── SteppedAreaChart.spec.ts ├── Table.spec.ts ├── TimeLineChart.spec.ts ├── TreeMapChart.spec.ts ├── TrendlinesChart.spec.ts ├── WaterfallChart.spec.ts └── WordTreeChart.spec.ts └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@vue/cli-plugin-babel/preset", 5 | { 6 | "modules": false, 7 | "targets": { 8 | "browsers": [ 9 | "last 2 versions" 10 | ] 11 | } 12 | } 13 | ] 14 | ], 15 | "comments": false 16 | } 17 | -------------------------------------------------------------------------------- /.clean-publish: -------------------------------------------------------------------------------- 1 | { 2 | "withoutPublish": true, 3 | "tempDir": "package", 4 | "fields": ["tsd"] 5 | } 6 | -------------------------------------------------------------------------------- /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"], 3 | "rules": { 4 | "body-max-line-length": [0] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.czrc: -------------------------------------------------------------------------------- 1 | { 2 | "path": "@commitlint/cz-commitlint" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | root = true 4 | 5 | [*] 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | indent_style = space 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # builds 2 | package 3 | dist 4 | 5 | # legacy builds 6 | /legacy/index.cjs 7 | /legacy/index.js 8 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | parser: 'vue-eslint-parser', 5 | 6 | parserOptions: { 7 | sourceType: 'module', 8 | }, 9 | 10 | extends: [ 11 | 'plugin:vue/base', 12 | 'plugin:vue/recommended', 13 | 'plugin:vue/strongly-recommended', 14 | 'plugin:vue/essential', 15 | 'prettier', 16 | 'plugin:prettier/recommended', 17 | 'plugin:prettier-vue/recommended', 18 | '@vue/eslint-config-typescript', 19 | ], 20 | 21 | env: { 22 | browser: true, 23 | }, 24 | 25 | rules: { 26 | // allow paren-less arrow functions 27 | 'arrow-parens': 0, 28 | // allow async-await 29 | 'generator-star-spacing': 0, 30 | // allow debugger during development 31 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 32 | // trailing comma 33 | // 'comma-dangle': ['error', 'always-multiline'], 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | open-pull-requests-limit: 5 8 | -------------------------------------------------------------------------------- /.github/workflows/checks.yml: -------------------------------------------------------------------------------- 1 | name: Checks 2 | on: 3 | pull_request: 4 | branches: 5 | - master 6 | jobs: 7 | size: 8 | runs-on: ubuntu-latest 9 | name: Checking size 10 | if: "!contains(github.event.head_commit.message, '[ci skip]')" 11 | env: 12 | CI_JOB_NUMBER: 1 13 | steps: 14 | - name: Checkout the repository 15 | uses: actions/checkout@v3 16 | - name: Install pnpm 17 | uses: pnpm/action-setup@v2.2.1 18 | with: 19 | version: 7 20 | - name: Install Node.js 21 | uses: actions/setup-node@v3 22 | with: 23 | node-version: 16 24 | cache: 'pnpm' 25 | - name: Check size 26 | uses: andresz1/size-limit-action@master 27 | with: 28 | github_token: ${{ secrets.GITHUB_TOKEN }} 29 | typings: 30 | runs-on: ubuntu-latest 31 | name: typings 32 | steps: 33 | - name: Checkout the repository 34 | uses: actions/checkout@v3 35 | - name: Install pnpm 36 | uses: pnpm/action-setup@v2.2.1 37 | with: 38 | version: 7 39 | - name: Install Node.js 40 | uses: actions/setup-node@v3 41 | with: 42 | node-version: 16 43 | cache: 'pnpm' 44 | - name: Install dependencies 45 | run: pnpm install 46 | - name: Prebuild 47 | run: pnpm build 48 | - name: Check typings 49 | if: success() 50 | run: pnpm test:typings 51 | storybook: 52 | runs-on: ubuntu-latest 53 | name: storybook 54 | steps: 55 | - name: Checkout the repository 56 | uses: actions/checkout@v3 57 | - name: Install pnpm 58 | uses: pnpm/action-setup@v2.2.1 59 | with: 60 | version: 7 61 | - name: Install Node.js 62 | uses: actions/setup-node@v3 63 | with: 64 | node-version: 16 65 | cache: 'pnpm' 66 | - name: Install dependencies 67 | run: pnpm install 68 | - name: Check storybook 69 | run: pnpm build:storybook 70 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | pull_request: 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | name: Running tests 9 | if: "!contains(github.event.head_commit.message, '[ci skip]')" 10 | steps: 11 | - name: Checkout the repository 12 | uses: actions/checkout@v3 13 | - name: Install pnpm 14 | uses: pnpm/action-setup@v2.2.1 15 | with: 16 | version: 7 17 | - name: Install Node.js 18 | uses: actions/setup-node@v3 19 | with: 20 | node-version: 16 21 | cache: 'pnpm' 22 | - name: Install dependencies 23 | run: pnpm install 24 | - name: Install dependencies to legacy folder 25 | working-directory: legacy 26 | run: pnpm install 27 | - name: Run tests 28 | run: pnpm test 29 | -------------------------------------------------------------------------------- /.github/workflows/commit.yml: -------------------------------------------------------------------------------- 1 | name: Commit 2 | on: 3 | push: 4 | jobs: 5 | conventional-commit: 6 | runs-on: ubuntu-latest 7 | name: Checking commit name 8 | steps: 9 | - name: Checkout the repository 10 | uses: actions/checkout@v3 11 | with: 12 | fetch-depth: 0 13 | - name: Run commitlint 14 | uses: wagoid/commitlint-github-action@v4 15 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | on: 3 | release: 4 | types: [created] 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | name: Publish package 9 | steps: 10 | - name: Checkout the repository 11 | uses: actions/checkout@v3 12 | - name: Install pnpm 13 | uses: pnpm/action-setup@v2.2.1 14 | with: 15 | version: 7 16 | - name: Install Node.js 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: 16 20 | cache: 'pnpm' 21 | registry-url: 'https://registry.npmjs.org' 22 | - name: Install dependencies 23 | run: pnpm install 24 | - name: Install dependencies to legacy folder 25 | working-directory: legacy 26 | run: pnpm install 27 | - name: Publish 28 | run: pnpm publish --no-git-checks 29 | env: 30 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # builds 7 | package 8 | dist 9 | 10 | # misc 11 | .DS_Store 12 | .env 13 | .env.* 14 | 15 | npm-debug.log* 16 | 17 | # testing 18 | coverage 19 | 20 | # legacy builds 21 | /legacy/index.cjs 22 | /legacy/index.cjs.map 23 | /legacy/index.js 24 | /legacy/index.js.map 25 | -------------------------------------------------------------------------------- /.nano-staged.json: -------------------------------------------------------------------------------- 1 | { 2 | "*.js": ["eslint", "prettier --write"], 3 | "*.vue": ["eslint", "prettier --write"], 4 | "*.ts": ["eslint", "prettier --write"] 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "jsxSingleQuote": true, 4 | "semi": true, 5 | "tabWidth": 2, 6 | "bracketSpacing": true, 7 | "arrowParens": "avoid", 8 | "trailingComma": "es5" 9 | } 10 | -------------------------------------------------------------------------------- /.simple-git-hooks.json: -------------------------------------------------------------------------------- 1 | { 2 | "commit-msg": "pnpm commitlint --edit \"$1\"", 3 | "pre-commit": "pnpm nano-staged", 4 | "pre-push": "pnpm test" 5 | } 6 | -------------------------------------------------------------------------------- /.size-limit.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "path": "dist/index.cjs", 4 | "limit": "2.6 KB", 5 | "webpack": false, 6 | "running": false 7 | }, 8 | { 9 | "path": "dist/index.cjs", 10 | "limit": "1.8 KB", 11 | "import": "{ GChart }" 12 | }, 13 | { 14 | "path": "dist/index.js", 15 | "limit": "1.8 KB", 16 | "import": "{ GChart }" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | stories: ['../stories/*.stories.(js|ts)'], 5 | addons: ['@storybook/addon-essentials'], 6 | framework: '@storybook/vue3', 7 | webpackFinal: async config => { 8 | config.resolve.alias['vue-google-charts'] = path.resolve( 9 | __dirname, 10 | '../src/index.ts' 11 | ); 12 | return config; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/addons'; 2 | 3 | import { theme } from './theme'; 4 | 5 | addons.setConfig({ 6 | theme, 7 | panelPosition: 'right', 8 | }); 9 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { configureActions } from '@storybook/addon-actions'; 2 | 3 | configureActions({ 4 | depth: 5, 5 | }); 6 | -------------------------------------------------------------------------------- /.storybook/theme.js: -------------------------------------------------------------------------------- 1 | import { create } from '@storybook/theming'; 2 | 3 | export const theme = create({ 4 | base: 'light', 5 | brandTitle: 'vue-google-charts', 6 | brandUrl: 'https://github.com/devstark-com/vue-google-charts', 7 | }); 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [1.1.0](https://github.com/devstark-com/vue-google-charts/compare/v1.0.0...v1.1.0) (2022-05-30) 6 | 7 | 8 | ### Features 9 | 10 | * add is-first-row-labels prop for convert data array to data table ([#180](https://github.com/devstark-com/vue-google-charts/issues/180)) ([4245378](https://github.com/devstark-com/vue-google-charts/commit/4245378229ca6f15c2ccd2e074e0a441578e734a)) 11 | 12 | ## 1.0.0 (2022-05-17) 13 | 14 | 15 | ### ⚠ BREAKING CHANGES 16 | 17 | * Vue 3 support. 18 | * migrate to typescript 19 | 20 | ### Features 21 | 22 | * migrate to typescript ([#171](https://github.com/devstark-com/vue-google-charts/issues/171)) ([c29c029](https://github.com/devstark-com/vue-google-charts/commit/c29c029c1895dc016e4c02552fb787ca916e41a1)) 23 | * vue 3 support ([#175](https://github.com/devstark-com/vue-google-charts/issues/175)) ([f0863a7](https://github.com/devstark-com/vue-google-charts/commit/f0863a790f8824ae07e323e040e9ace0f3cecf0b)) 24 | -------------------------------------------------------------------------------- /demos/Bubble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devstark-com/vue-google-charts/25ec0b04d73812af1914334c54a3430e5498e70b/demos/Bubble.png -------------------------------------------------------------------------------- /demos/Material.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devstark-com/vue-google-charts/25ec0b04d73812af1914334c54a3430e5498e70b/demos/Material.png -------------------------------------------------------------------------------- /demos/Simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devstark-com/vue-google-charts/25ec0b04d73812af1914334c54a3430e5498e70b/demos/Simple.png -------------------------------------------------------------------------------- /demos/Spreadsheets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devstark-com/vue-google-charts/25ec0b04d73812af1914334c54a3430e5498e70b/demos/Spreadsheets.png -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: 'jsdom', 3 | testMatch: ['/test/(*.)spec.(js|ts)'], 4 | moduleFileExtensions: ['js', 'ts', 'vue'], 5 | transform: { 6 | '^.+\\.vue$': '@vue/vue3-jest', 7 | '^.+\\.(t|j)sx?$': [ 8 | '@swc/jest', 9 | { 10 | module: { 11 | type: 'commonjs', 12 | }, 13 | env: { 14 | targets: { 15 | node: 12, 16 | }, 17 | }, 18 | }, 19 | ], 20 | }, 21 | collectCoverage: true, 22 | collectCoverageFrom: ['/src/*'], 23 | coverageReporters: ['lcovonly', 'text'], 24 | moduleNameMapper: { 25 | 'vue-google-charts': '/src/', 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /legacy/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.babelrc" 3 | } 4 | -------------------------------------------------------------------------------- /legacy/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: 'jsdom', 3 | testMatch: ['/test/(*.)spec.(js|ts)'], 4 | moduleFileExtensions: ['js', 'ts', 'vue'], 5 | transform: { 6 | '^.+\\.vue$': '@vue/vue2-jest', 7 | '^.+\\.(t|j)sx?$': [ 8 | '@swc/jest', 9 | { 10 | module: { 11 | type: 'commonjs', 12 | }, 13 | env: { 14 | targets: { 15 | node: 12, 16 | }, 17 | }, 18 | }, 19 | ], 20 | }, 21 | collectCoverage: true, 22 | collectCoverageFrom: ['/src/*'], 23 | coverageReporters: ['lcovonly', 'text'], 24 | moduleNameMapper: { 25 | 'vue-google-charts': '/legacy/src/', 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /legacy/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "./legacy/src/index.ts", 3 | "types": "./legacy/src/index.d.ts", 4 | "publishConfig": { 5 | "main": "./legacy/index.cjs", 6 | "module": "./legacy/index.js" 7 | }, 8 | "scripts": { 9 | "test:unit": "jest -c jest.config.js" 10 | }, 11 | "devDependencies": { 12 | "@babel/core": "7.17.9", 13 | "@swc/core": "^1.2.124", 14 | "@swc/jest": "^0.2.20", 15 | "@vue/test-utils": "1", 16 | "@vue/vue2-jest": "27.0.0-alpha.4", 17 | "babel-jest": "27.5.1", 18 | "core-js": "^3.22.2", 19 | "jest": "27.5.1", 20 | "rollup-plugin-vue2": "^0.8.1", 21 | "vue": "2.6.14", 22 | "vue-template-compiler": "2.6.14" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /legacy/rollup.config.js: -------------------------------------------------------------------------------- 1 | import vue from 'rollup-plugin-vue2'; 2 | 3 | import pkg from './package.json'; 4 | 5 | import { external, plugins } from '../rollup.config'; 6 | 7 | export default [ 8 | { 9 | input: pkg.main, 10 | plugins: plugins('defaults and supports es6-module', vue), 11 | external, 12 | output: { 13 | format: 'es', 14 | file: pkg.publishConfig.module, 15 | sourcemap: true, 16 | }, 17 | }, 18 | { 19 | input: pkg.main, 20 | plugins: plugins('defaults, not ie 11, not ie_mob 11', vue, { 21 | template: { 22 | optimizeSSR: true, 23 | }, 24 | }), 25 | external, 26 | output: { 27 | format: 'cjs', 28 | file: pkg.publishConfig.main, 29 | exports: 'named', 30 | sourcemap: true, 31 | }, 32 | }, 33 | ]; 34 | -------------------------------------------------------------------------------- /legacy/sandboxes/area-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/area-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/area-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/area-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'AreaChart'; 2 | 3 | export const chartData = [ 4 | ['Year', 'Sales', 'Expenses'], 5 | ['2013', 1000, 400], 6 | ['2014', 1170, 460], 7 | ['2015', 660, 1120], 8 | ['2016', 1030, 540], 9 | ]; 10 | 11 | export const chartOptions = { 12 | title: 'Company Performance', 13 | hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, 14 | vAxis: { minValue: 0 }, 15 | chartArea: { width: '50%', height: '70%' }, 16 | width: 800, 17 | height: 600, 18 | }; 19 | -------------------------------------------------------------------------------- /legacy/sandboxes/area-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/bar-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/bar-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/bar-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/bar-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'BarChart'; 2 | 3 | export const chartData = [ 4 | ['City', '2010 Population', '2000 Population'], 5 | ['New York City, NY', 8175000, 8008000], 6 | ['Los Angeles, CA', 3792000, 3694000], 7 | ['Chicago, IL', 2695000, 2896000], 8 | ['Houston, TX', 2099000, 1953000], 9 | ['Philadelphia, PA', 1526000, 1517000], 10 | ]; 11 | 12 | export const chartOptions = { 13 | title: 'Population of Largest U.S. Cities', 14 | chartArea: { width: '50%' }, 15 | hAxis: { 16 | title: 'Total Population', 17 | minValue: 0, 18 | }, 19 | vAxis: { 20 | title: 'City', 21 | }, 22 | width: 800, 23 | height: 600, 24 | }; 25 | -------------------------------------------------------------------------------- /legacy/sandboxes/bar-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/bubble-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/bubble-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/bubble-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/bubble-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'BubbleChart'; 2 | 3 | export const chartData = [ 4 | ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], 5 | ['CAN', 80.66, 1.67, 'North America', 33739900], 6 | ['DEU', 79.84, 1.36, 'Europe', 81902307], 7 | ['DNK', 78.6, 1.84, 'Europe', 5523095], 8 | ['EGY', 72.73, 2.78, 'Middle East', 79716203], 9 | ['GBR', 80.05, 2, 'Europe', 61801570], 10 | ['IRN', 72.49, 1.7, 'Middle East', 73137148], 11 | ['IRQ', 68.09, 4.77, 'Middle East', 31090763], 12 | ['ISR', 81.55, 2.96, 'Middle East', 7485600], 13 | ['RUS', 68.6, 1.54, 'Europe', 141850000], 14 | ['USA', 78.09, 2.05, 'North America', 307007000], 15 | ]; 16 | 17 | export const chartOptions = { 18 | title: 19 | 'Correlation between life expectancy, fertility rate ' + 20 | 'and population of some world countries (2010)', 21 | hAxis: { title: 'Life Expectancy' }, 22 | vAxis: { title: 'Fertility Rate' }, 23 | bubble: { textStyle: { fontSize: 11 } }, 24 | width: 800, 25 | height: 600, 26 | }; 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/bubble-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/calendar-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/calendar-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/calendar-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/calendar-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'Calendar'; 2 | 3 | export const chartData = [ 4 | [ 5 | { 6 | type: 'date', 7 | id: 'Date', 8 | }, 9 | { 10 | type: 'number', 11 | id: 'Won/Loss', 12 | }, 13 | ], 14 | [new Date(2012, 3, 13), 37032], 15 | [new Date(2012, 3, 14), 38024], 16 | [new Date(2012, 3, 15), 38024], 17 | [new Date(2012, 3, 16), 38108], 18 | [new Date(2012, 3, 17), 38229], 19 | // Many rows omitted for brevity. 20 | [new Date(2013, 9, 4), 38177], 21 | [new Date(2013, 9, 5), 38705], 22 | [new Date(2013, 9, 12), 38210], 23 | [new Date(2013, 9, 13), 38029], 24 | [new Date(2013, 9, 19), 38823], 25 | [new Date(2013, 9, 23), 38345], 26 | [new Date(2013, 9, 24), 38436], 27 | [new Date(2013, 9, 30), 38447], 28 | ]; 29 | 30 | export const chartOptions = { 31 | title: 'Red Sox Attendance', 32 | width: 800, 33 | height: 600, 34 | }; 35 | -------------------------------------------------------------------------------- /legacy/sandboxes/calendar-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/candlestick-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/candlestick-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/candlestick-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/candlestick-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'CandlestickChart'; 2 | 3 | export const chartData = [ 4 | ['day', 'a', 'b', 'c', 'd'], 5 | ['Mon', 20, 28, 38, 45], 6 | ['Tue', 31, 38, 55, 66], 7 | ['Wed', 50, 55, 77, 80], 8 | ['Thu', 50, 77, 66, 77], 9 | ['Fri', 15, 66, 22, 68], 10 | ]; 11 | 12 | export const chartOptions = { 13 | legend: 'none', 14 | width: 800, 15 | height: 600, 16 | }; 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/candlestick-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/column-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/column-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/column-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/column-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'ColumnChart'; 2 | 3 | export const chartData = [ 4 | ['Year', 'Sales', 'Expenses', 'Profit'], 5 | ['2014', 1000, 400, 200], 6 | ['2015', 1170, 460, 250], 7 | ['2016', 660, 1120, 300], 8 | ['2017', 1030, 540, 350], 9 | ]; 10 | 11 | export const chartOptions = { 12 | chart: { 13 | title: 'Company Performance', 14 | subtitle: 'Sales, Expenses, and Profit: 2014-2017', 15 | }, 16 | width: 800, 17 | height: 600, 18 | }; 19 | -------------------------------------------------------------------------------- /legacy/sandboxes/column-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/combo-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/combo-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/combo-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/combo-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'ComboChart'; 2 | 3 | export const chartData = [ 4 | [ 5 | 'Month', 6 | 'Bolivia', 7 | 'Ecuador', 8 | 'Madagascar', 9 | 'Papua New Guinea', 10 | 'Rwanda', 11 | 'Average', 12 | ], 13 | ['2004/05', 165, 938, 522, 998, 450, 614.6], 14 | ['2005/06', 135, 1120, 599, 1268, 288, 682], 15 | ['2006/07', 157, 1167, 587, 807, 397, 623], 16 | ['2007/08', 139, 1110, 615, 968, 215, 609.4], 17 | ['2008/09', 136, 691, 629, 1026, 366, 569.6], 18 | ]; 19 | 20 | export const chartOptions = { 21 | title: 'Monthly Coffee Production by Country', 22 | vAxis: { title: 'Cups' }, 23 | hAxis: { title: 'Month' }, 24 | seriesType: 'bars', 25 | series: { 5: { type: 'line' } }, 26 | width: 800, 27 | height: 600, 28 | }; 29 | -------------------------------------------------------------------------------- /legacy/sandboxes/combo-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/donut-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/donut-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/donut-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/donut-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'PieChart'; 2 | 3 | export const chartData = [ 4 | ['Task', 'Hours per Day'], 5 | ['Work', 11], 6 | ['Eat', 2], 7 | ['Commute', 2], 8 | ['Watch TV', 2], 9 | ['Sleep', 7], 10 | ]; 11 | 12 | export const chartOptions = { 13 | title: 'My Daily Activities', 14 | pieHole: 0.4, 15 | 16 | width: 800, 17 | height: 600, 18 | }; 19 | -------------------------------------------------------------------------------- /legacy/sandboxes/donut-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/gantt-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/gantt-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/gantt-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/gantt-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | function daysToMilliseconds(days) { 2 | return days * 24 * 60 * 60 * 1000; 3 | } 4 | 5 | const columns = [ 6 | { type: 'string', label: 'Task ID' }, 7 | { type: 'string', label: 'Task Name' }, 8 | { type: 'date', label: 'Start Date' }, 9 | { type: 'date', label: 'End Date' }, 10 | { type: 'number', label: 'Duration' }, 11 | { type: 'number', label: 'Percent Complete' }, 12 | { type: 'string', label: 'Dependencies' }, 13 | ]; 14 | 15 | const rows = [ 16 | [ 17 | 'Research', 18 | 'Find sources', 19 | new Date(2015, 0, 1), 20 | new Date(2015, 0, 5), 21 | null, 22 | 100, 23 | null, 24 | ], 25 | [ 26 | 'Write', 27 | 'Write paper', 28 | null, 29 | new Date(2015, 0, 9), 30 | daysToMilliseconds(3), 31 | 25, 32 | 'Research,Outline', 33 | ], 34 | [ 35 | 'Cite', 36 | 'Create bibliography', 37 | null, 38 | new Date(2015, 0, 7), 39 | daysToMilliseconds(1), 40 | 20, 41 | 'Research', 42 | ], 43 | [ 44 | 'Complete', 45 | 'Hand in paper', 46 | null, 47 | new Date(2015, 0, 10), 48 | daysToMilliseconds(1), 49 | 0, 50 | 'Cite,Write', 51 | ], 52 | [ 53 | 'Outline', 54 | 'Outline paper', 55 | null, 56 | new Date(2015, 0, 6), 57 | daysToMilliseconds(1), 58 | 100, 59 | 'Research', 60 | ], 61 | ]; 62 | 63 | export const chartType = 'Gantt'; 64 | 65 | export const chartData = [columns, ...rows]; 66 | 67 | export const chartOptions = { 68 | width: 800, 69 | height: 600, 70 | }; 71 | -------------------------------------------------------------------------------- /legacy/sandboxes/gantt-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/gauge-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/gauge-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/gauge-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/gauge-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'Gauge'; 2 | 3 | export const chartData = [ 4 | ['Label', 'Value'], 5 | ['Memory', 80], 6 | ['CPU', 55], 7 | ['Network', 68], 8 | ]; 9 | 10 | export const chartOptions = { 11 | width: 800, 12 | height: 600, 13 | redFrom: 90, 14 | redTo: 100, 15 | yellowFrom: 75, 16 | yellowTo: 90, 17 | minorTicks: 5, 18 | }; 19 | -------------------------------------------------------------------------------- /legacy/sandboxes/gauge-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/geo-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/geo-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/geo-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/geo-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'GeoChart'; 2 | 3 | export const chartData = [ 4 | ['Country', 'Popularity'], 5 | ['Germany', 200], 6 | ['United States', 300], 7 | ['Brazil', 400], 8 | ['Canada', 500], 9 | ['France', 600], 10 | ['RU', 700], 11 | ]; 12 | 13 | export const chartOptions = { 14 | width: 800, 15 | height: 600, 16 | }; 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/geo-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/histogram-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/histogram-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/histogram-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/histogram-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'Histogram'; 2 | 3 | export const chartData = [ 4 | ['Dinosaur', 'Length'], 5 | ['Acrocanthosaurus (top-spined lizard)', 12.2], 6 | ['Albertosaurus (Alberta lizard)', 9.1], 7 | ['Allosaurus (other lizard)', 12.2], 8 | ['Apatosaurus (deceptive lizard)', 22.9], 9 | ['Archaeopteryx (ancient wing)', 0.9], 10 | ['Argentinosaurus (Argentina lizard)', 36.6], 11 | ['Baryonyx (heavy claws)', 9.1], 12 | ['Brachiosaurus (arm lizard)', 30.5], 13 | ['Ceratosaurus (horned lizard)', 6.1], 14 | ['Coelophysis (hollow form)', 2.7], 15 | ['Compsognathus (elegant jaw)', 0.9], 16 | ['Deinonychus (terrible claw)', 2.7], 17 | ['Diplodocus (double beam)', 27.1], 18 | ['Dromicelomimus (emu mimic)', 3.4], 19 | ['Gallimimus (fowl mimic)', 5.5], 20 | ['Mamenchisaurus (Mamenchi lizard)', 21.0], 21 | ['Megalosaurus (big lizard)', 7.9], 22 | ['Microvenator (small hunter)', 1.2], 23 | ['Ornithomimus (bird mimic)', 4.6], 24 | ['Oviraptor (egg robber)', 1.5], 25 | ['Plateosaurus (flat lizard)', 7.9], 26 | ['Sauronithoides (narrow-clawed lizard)', 2.0], 27 | ['Seismosaurus (tremor lizard)', 45.7], 28 | ['Spinosaurus (spiny lizard)', 12.2], 29 | ['Supersaurus (super lizard)', 30.5], 30 | ['Tyrannosaurus (tyrant lizard)', 15.2], 31 | ['Ultrasaurus (ultra lizard)', 30.5], 32 | ['Velociraptor (swift robber)', 1.8], 33 | ]; 34 | 35 | export const chartOptions = { 36 | title: 'Lengths of dinosaurs, in meters', 37 | legend: { position: 'none' }, 38 | width: 800, 39 | height: 600, 40 | }; 41 | -------------------------------------------------------------------------------- /legacy/sandboxes/histogram-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/line-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/line-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/line-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/line-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'LineChart'; 2 | 3 | export const chartData = [ 4 | ['Year', 'Sales', 'Expenses'], 5 | ['2004', 1000, 400], 6 | ['2005', 1170, 460], 7 | ['2006', 660, 1120], 8 | ['2007', 1030, 540], 9 | ]; 10 | 11 | export const chartOptions = { 12 | title: 'Company Performance', 13 | curveType: 'function', 14 | legend: { position: 'bottom' }, 15 | width: 800, 16 | height: 600, 17 | }; 18 | -------------------------------------------------------------------------------- /legacy/sandboxes/line-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/org-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/org-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/org-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/org-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'OrgChart'; 2 | 3 | export const chartData = [ 4 | [ 5 | { 6 | v: 'Mike', 7 | f: 'Mike
President
', 8 | }, 9 | '', 10 | 'The President', 11 | ], 12 | [ 13 | { 14 | v: 'Jim', 15 | f: 'Jim
Vice President
', 16 | }, 17 | 'Mike', 18 | 'VP', 19 | ], 20 | ['Alice', 'Mike', ''], 21 | ['Bob', 'Jim', 'Bob Sponge'], 22 | ['Carol', 'Bob', ''], 23 | ]; 24 | 25 | export const chartOptions = { 26 | width: 800, 27 | height: 600, 28 | allowHtml: true, 29 | }; 30 | -------------------------------------------------------------------------------- /legacy/sandboxes/org-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/pie-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/pie-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/pie-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/pie-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'PieChart'; 2 | 3 | export const chartData = [ 4 | ['Task', 'Hours per Day'], 5 | ['Work', 11], 6 | ['Eat', 2], 7 | ['Commute', 2], 8 | ['Watch TV', 2], 9 | ['Sleep', 7], 10 | ]; 11 | 12 | export const chartOptions = { 13 | title: 'My Daily Activities', 14 | width: 800, 15 | height: 600, 16 | }; 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/pie-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/sankey-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/sankey-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/sankey-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/sankey-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'Sankey'; 2 | 3 | export const chartData = [ 4 | ['From', 'To', 'Weight'], 5 | ['A', 'X', 5], 6 | ['A', 'Y', 7], 7 | ['A', 'Z', 6], 8 | ['B', 'X', 2], 9 | ['B', 'Y', 9], 10 | ['B', 'Z', 4], 11 | ]; 12 | 13 | export const chartOptions = { 14 | width: 800, 15 | height: 600, 16 | }; 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/sankey-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/scatter-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/scatter-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/scatter-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/scatter-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'ScatterChart'; 2 | 3 | export const chartData = [ 4 | ['Year', 'Sales', 'Expenses'], 5 | ['2004', 1000, 400], 6 | ['2005', 1170, 460], 7 | ['2006', 660, 1120], 8 | ['2008', 1030, 540], 9 | ['2009', 1000, 400], 10 | ['2010', 1170, 460], 11 | ['2011', 660, 1120], 12 | ['2012', 1030, 540], 13 | ]; 14 | 15 | export const chartOptions = { 16 | title: 'Company Performance', 17 | curveType: 'function', 18 | legend: { position: 'bottom' }, 19 | width: 800, 20 | height: 600, 21 | }; 22 | -------------------------------------------------------------------------------- /legacy/sandboxes/scatter-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/stepped-area-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/stepped-area-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/stepped-area-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/stepped-area-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'SteppedAreaChart'; 2 | 3 | export const chartData = [ 4 | ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], 5 | ['Alfred Hitchcock (1935)', 8.4, 7.9], 6 | ['Ralph Thomas (1959)', 6.9, 6.5], 7 | ['Don Sharp (1978)', 6.5, 6.4], 8 | ['James Hawes (2008)', 4.4, 6.2], 9 | ]; 10 | 11 | export const chartOptions = { 12 | title: "The decline of 'The 39 Steps'", 13 | vAxis: { title: 'Accumulated Rating' }, 14 | isStacked: true, 15 | width: 800, 16 | height: 600, 17 | }; 18 | -------------------------------------------------------------------------------- /legacy/sandboxes/stepped-area-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/table-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/table-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/table-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/table-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'Table'; 2 | 3 | export const chartData = [ 4 | ['Name', 'Salary', 'Full time employee'], 5 | ['Mike', { v: 10000, f: '$10,000' }, true], 6 | ['Jim', { v: 8000, f: '$8,000' }, false], 7 | ['Alice', { v: 12500, f: '$12,500' }, true], 8 | ['Bob', { v: 7000, f: '$7,000' }, true], 9 | ]; 10 | 11 | export const chartOptions = { 12 | title: 'Company Performance', 13 | curveType: 'function', 14 | legend: { position: 'bottom' }, 15 | pageSize: 1, 16 | width: 800, 17 | height: 600, 18 | }; 19 | -------------------------------------------------------------------------------- /legacy/sandboxes/table-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/timeline-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/timeline-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/timeline-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/timeline-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | const columns = [ 2 | { type: 'string', id: 'President' }, 3 | { type: 'date', id: 'Start' }, 4 | { type: 'date', id: 'End' }, 5 | ]; 6 | 7 | const rows = [ 8 | ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)], 9 | ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)], 10 | ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)], 11 | ]; 12 | 13 | export const chartType = 'Timeline'; 14 | 15 | export const chartData = [columns, ...rows]; 16 | 17 | export const chartOptions = { 18 | width: 800, 19 | height: 600, 20 | }; 21 | -------------------------------------------------------------------------------- /legacy/sandboxes/timeline-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/tree-map-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/tree-map-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/tree-map-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/tree-map-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'TreeMap'; 2 | 3 | export const chartData = [ 4 | [ 5 | 'Location', 6 | 'Parent', 7 | 'Market trade volume (size)', 8 | 'Market increase/decrease (color)', 9 | ], 10 | ['Global', null, 0, 0], 11 | ['America', 'Global', 0, 0], 12 | ['Europe', 'Global', 0, 0], 13 | ['Asia', 'Global', 0, 0], 14 | ['Australia', 'Global', 0, 0], 15 | ['Africa', 'Global', 0, 0], 16 | ['Brazil', 'America', 11, 10], 17 | ['USA', 'America', 52, 31], 18 | ['Mexico', 'America', 24, 12], 19 | ['Canada', 'America', 16, -23], 20 | ['France', 'Europe', 42, -11], 21 | ['Germany', 'Europe', 31, -2], 22 | ['Sweden', 'Europe', 22, -13], 23 | ['Italy', 'Europe', 17, 4], 24 | ['UK', 'Europe', 21, -5], 25 | ['China', 'Asia', 36, 4], 26 | ['Japan', 'Asia', 20, -12], 27 | ['India', 'Asia', 40, 63], 28 | ['Laos', 'Asia', 4, 34], 29 | ['Mongolia', 'Asia', 1, -5], 30 | ['Israel', 'Asia', 12, 24], 31 | ['Iran', 'Asia', 18, 13], 32 | ['Pakistan', 'Asia', 11, -52], 33 | ['Egypt', 'Africa', 21, 0], 34 | ['S. Africa', 'Africa', 30, 43], 35 | ['Sudan', 'Africa', 12, 2], 36 | ['Congo', 'Africa', 10, 12], 37 | ['Zaire', 'Africa', 8, 10], 38 | ]; 39 | 40 | export const chartOptions = { 41 | minColor: '#f00', 42 | midColor: '#ddd', 43 | maxColor: '#0d0', 44 | headerHeight: 15, 45 | fontColor: 'black', 46 | showScale: true, 47 | width: 800, 48 | height: 600, 49 | }; 50 | -------------------------------------------------------------------------------- /legacy/sandboxes/tree-map-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/trendlines-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/trendlines-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/trendlines-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /legacy/sandboxes/trendlines-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'ScatterChart'; 2 | 3 | export const chartData = [ 4 | ['Diameter', 'Age'], 5 | [8, 37], 6 | [4, 19.5], 7 | [11, 52], 8 | [4, 22], 9 | [3, 16.5], 10 | [6.5, 32.8], 11 | [14, 72], 12 | ]; 13 | 14 | export const chartOptions = { 15 | title: 'Age of sugar maples vs. trunk diameter, in inches', 16 | hAxis: { title: 'Diameter' }, 17 | vAxis: { title: 'Age' }, 18 | legend: 'none', 19 | trendlines: { 0: {} }, // Draw a trendline for data series 0. 20 | width: 800, 21 | height: 600, 22 | }; 23 | -------------------------------------------------------------------------------- /legacy/sandboxes/trendlines-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/waterfall-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/waterfall-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/waterfall-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | -------------------------------------------------------------------------------- /legacy/sandboxes/waterfall-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'CandlestickChart'; 2 | 3 | export const chartData = [ 4 | ['Mon', 28, 28, 38, 38], 5 | ['Tue', 38, 38, 55, 55], 6 | ['Wed', 55, 55, 77, 77], 7 | ['Thu', 77, 77, 66, 66], 8 | ['Fri', 66, 66, 22, 22], 9 | ]; 10 | 11 | export const chartOptions = { 12 | legend: 'none', 13 | bar: { groupWidth: '100%' }, // Remove space between bars. 14 | candlestick: { 15 | fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red 16 | risingColor: { strokeWidth: 0, fill: '#0f9d58' }, // green 17 | }, 18 | width: 800, 19 | height: 600, 20 | }; 21 | -------------------------------------------------------------------------------- /legacy/sandboxes/waterfall-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/sandboxes/word-tree-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-google-chart", 3 | "dependencies": { 4 | "vue": "2.6.14", 5 | "vue-google-charts": "^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /legacy/sandboxes/word-tree-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /legacy/sandboxes/word-tree-chart/src/components/google-chart/GoogleChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /legacy/sandboxes/word-tree-chart/src/components/google-chart/GoogleChartData.js: -------------------------------------------------------------------------------- 1 | export const chartType = 'WordTree'; 2 | 3 | export const chartData = [ 4 | ['Phrases'], 5 | ['cats are better than dogs'], 6 | ['cats eat kibble'], 7 | ['cats are better than hamsters'], 8 | ['cats are awesome'], 9 | ['cats are people too'], 10 | ['cats eat mice'], 11 | ['cats meowing'], 12 | ['cats in the cradle'], 13 | ['cats eat mice'], 14 | ['cats in the cradle lyrics'], 15 | ['cats eat kibble'], 16 | ['cats for adoption'], 17 | ['cats are family'], 18 | ['cats eat mice'], 19 | ['cats are better than kittens'], 20 | ['cats are evil'], 21 | ['cats are weird'], 22 | ['cats eat mice'], 23 | ]; 24 | 25 | export const chartOptions = { 26 | wordtree: { 27 | format: 'implicit', 28 | word: 'cats', 29 | }, 30 | width: 800, 31 | height: 600, 32 | }; 33 | -------------------------------------------------------------------------------- /legacy/sandboxes/word-tree-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app'); 7 | -------------------------------------------------------------------------------- /legacy/src/@types/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /legacy/src/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | import { loadGoogleCharts } from '../../src/lib/google-charts-loader'; 4 | import GChart from './components/GChart.vue'; 5 | 6 | // Install the components 7 | export function install(vue: typeof Vue) { 8 | vue.component('GChart', GChart); 9 | } 10 | 11 | // Expose the components 12 | export { loadGoogleCharts, GChart }; 13 | 14 | /* -- Plugin definition & Auto-install -- */ 15 | /* You shouldn't have to modify the code below */ 16 | 17 | // Plugin 18 | const plugin = { 19 | version: process.env.VERSION, 20 | install, 21 | }; 22 | 23 | export default plugin; 24 | 25 | // Auto-install 26 | let GlobalVue = null; 27 | if (typeof window !== 'undefined') { 28 | GlobalVue = window.Vue; 29 | } else if (typeof global !== 'undefined') { 30 | GlobalVue = global.Vue; 31 | } 32 | if (GlobalVue) { 33 | GlobalVue.use(plugin); 34 | } 35 | -------------------------------------------------------------------------------- /legacy/test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /legacy/test/AreaChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/area-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('AreaChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/BarChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/bar-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('BarChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/BubbleChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/bubble-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('BubbleChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/Calendar.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/calendar-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('CalendarChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['calendar'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/Candlestick.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/candlestick-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('CandlestickChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/ColumnChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/column-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('ColumnChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/ComboChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/combo-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('ComboChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/DonutChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/donut-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('DonutChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/GanttChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/gantt-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('GanttChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['gantt'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/GaugeChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/gauge-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('GaugeChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['gauge'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/GeoCharts.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/geo-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('GeoChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['geochart'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/Histogram.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/histogram-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('Histogram', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/LineChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/line-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('LineChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/OrgChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/org-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('OrgChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['orgchart'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/PieChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/pie-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('PieChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/Sankey.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/sankey-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('SankeyChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['sankey'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/ScatterChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/scatter-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('ScatterChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/SteppedAreaChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/stepped-area-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('SteppedAreaChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/Table.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/table-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('Table', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/TimeLineChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/timeline-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('TimelineChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['timeline'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/TreeMapChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/tree-map-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('TreeMapChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['treemap'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /legacy/test/TrendlinesChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/trendlines-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('TrendlinesChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | it('should render a chart', () => { 26 | const wrapper = shallowMount(Component, { 27 | propsData: { 28 | type, 29 | data, 30 | options, 31 | }, 32 | }); 33 | 34 | const chart = wrapper.find('gchart-stub'); 35 | expect(chart.attributes('type')).toBe(type); 36 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /legacy/test/WaterfallChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/waterfall-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('WaterfallChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'isFirstRowLabels'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const isFirstRowLabels = true; 26 | 27 | it('should render a chart', () => { 28 | const wrapper = shallowMount(Component, { 29 | propsData: { 30 | type, 31 | data, 32 | options, 33 | isFirstRowLabels, 34 | }, 35 | }); 36 | 37 | const chart = wrapper.find('gchart-stub'); 38 | expect(chart.attributes('type')).toBe(type); 39 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /legacy/test/WordTreeChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | chartType, 7 | chartData, 8 | chartOptions, 9 | } from '../sandboxes/word-tree-chart/src/components/google-chart/GoogleChartData'; 10 | 11 | describe('WordTreeChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const type = chartType; 20 | 21 | const data = chartData; 22 | 23 | const options = chartOptions; 24 | 25 | const settings = { 26 | packages: ['wordtree'], 27 | }; 28 | 29 | it('should render a chart', () => { 30 | const wrapper = shallowMount(Component, { 31 | propsData: { 32 | type, 33 | data, 34 | options, 35 | settings, 36 | }, 37 | }); 38 | 39 | const chart = wrapper.find('gchart-stub'); 40 | expect(chart.attributes('type')).toBe(type); 41 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import swc from 'rollup-plugin-swc'; 3 | import replace from '@rollup/plugin-replace'; 4 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 5 | import pkg from './package.json'; 6 | 7 | const extensions = ['.js', '.ts']; 8 | export const external = _ => /node_modules/.test(_) && !/@swc\/helpers/.test(_); 9 | export const plugins = (targets, vueLib, vueOptions = {}) => [ 10 | vueLib(vueOptions), 11 | nodeResolve({ 12 | extensions, 13 | }), 14 | replace({ 15 | preventAssignment: true, 16 | values: { 17 | 'process.env.VERSION': JSON.stringify(pkg.version), 18 | }, 19 | }), 20 | swc({ 21 | env: { 22 | targets, 23 | }, 24 | module: { 25 | type: 'es6', 26 | }, 27 | sourceMaps: true, 28 | }), 29 | ]; 30 | 31 | export default [ 32 | { 33 | input: pkg.main, 34 | plugins: plugins('defaults and supports es6-module', vue), 35 | external, 36 | output: { 37 | format: 'es', 38 | file: pkg.publishConfig.module, 39 | sourcemap: true, 40 | }, 41 | }, 42 | { 43 | input: pkg.main, 44 | plugins: plugins('defaults, not ie 11, not ie_mob 11', vue, { 45 | template: { 46 | optimizeSSR: true, 47 | }, 48 | }), 49 | external, 50 | output: { 51 | format: 'cjs', 52 | file: pkg.publishConfig.main, 53 | exports: 'named', 54 | sourcemap: true, 55 | }, 56 | }, 57 | ]; 58 | -------------------------------------------------------------------------------- /sandboxes/area-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/area-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/area-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'AreaChart'; 6 | 7 | export const data = [ 8 | ['Year', 'Sales', 'Expenses'], 9 | ['2013', 1000, 400], 10 | ['2014', 1170, 460], 11 | ['2015', 660, 1120], 12 | ['2016', 1030, 540], 13 | ]; 14 | 15 | export const options = { 16 | title: 'Company Performance', 17 | hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, 18 | vAxis: { minValue: 0 }, 19 | chartArea: { width: '50%', height: '70%' }, 20 | width: 800, 21 | height: 600, 22 | }; 23 | 24 | export default defineComponent({ 25 | name: 'GoogleChart', 26 | components: { 27 | GChart, 28 | }, 29 | setup() { 30 | return () => 31 | h(GChart, { 32 | data, 33 | options, 34 | type, 35 | }); 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /sandboxes/area-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'BarChart'; 6 | 7 | export const data = [ 8 | ['City', '2010 Population', '2000 Population'], 9 | ['New York City, NY', 8175000, 8008000], 10 | ['Los Angeles, CA', 3792000, 3694000], 11 | ['Chicago, IL', 2695000, 2896000], 12 | ['Houston, TX', 2099000, 1953000], 13 | ['Philadelphia, PA', 1526000, 1517000], 14 | ]; 15 | 16 | export const options = { 17 | title: 'Population of Largest U.S. Cities', 18 | chartArea: { width: '50%' }, 19 | hAxis: { 20 | title: 'Total Population', 21 | minValue: 0, 22 | }, 23 | vAxis: { 24 | title: 'City', 25 | }, 26 | width: 800, 27 | height: 600, 28 | }; 29 | 30 | export default defineComponent({ 31 | name: 'GoogleChart', 32 | components: { 33 | GChart, 34 | }, 35 | setup() { 36 | return () => 37 | h(GChart, { 38 | data, 39 | options, 40 | type, 41 | }); 42 | }, 43 | }); 44 | -------------------------------------------------------------------------------- /sandboxes/bar-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'BubbleChart'; 6 | 7 | export const data = [ 8 | ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], 9 | ['CAN', 80.66, 1.67, 'North America', 33739900], 10 | ['DEU', 79.84, 1.36, 'Europe', 81902307], 11 | ['DNK', 78.6, 1.84, 'Europe', 5523095], 12 | ['EGY', 72.73, 2.78, 'Middle East', 79716203], 13 | ['GBR', 80.05, 2, 'Europe', 61801570], 14 | ['IRN', 72.49, 1.7, 'Middle East', 73137148], 15 | ['IRQ', 68.09, 4.77, 'Middle East', 31090763], 16 | ['ISR', 81.55, 2.96, 'Middle East', 7485600], 17 | ['RUS', 68.6, 1.54, 'Europe', 141850000], 18 | ['USA', 78.09, 2.05, 'North America', 307007000], 19 | ]; 20 | 21 | export const options = { 22 | title: 23 | 'Correlation between life expectancy, fertility rate ' + 24 | 'and population of some world countries (2010)', 25 | hAxis: { title: 'Life Expectancy' }, 26 | vAxis: { title: 'Fertility Rate' }, 27 | bubble: { textStyle: { fontSize: 11 } }, 28 | width: 800, 29 | height: 600, 30 | }; 31 | 32 | export default defineComponent({ 33 | name: 'GoogleChart', 34 | components: { 35 | GChart, 36 | }, 37 | setup() { 38 | return () => 39 | h(GChart, { 40 | data, 41 | options, 42 | type, 43 | }); 44 | }, 45 | }); 46 | -------------------------------------------------------------------------------- /sandboxes/bubble-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/calendar-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/calendar-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/calendar-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'Calendar'; 6 | 7 | export const data = [ 8 | [ 9 | { 10 | type: 'date', 11 | id: 'Date', 12 | }, 13 | { 14 | type: 'number', 15 | id: 'Won/Loss', 16 | }, 17 | ], 18 | [new Date(2012, 3, 13), 37032], 19 | [new Date(2012, 3, 14), 38024], 20 | [new Date(2012, 3, 15), 38024], 21 | [new Date(2012, 3, 16), 38108], 22 | [new Date(2012, 3, 17), 38229], 23 | // Many rows omitted for brevity. 24 | [new Date(2013, 9, 4), 38177], 25 | [new Date(2013, 9, 5), 38705], 26 | [new Date(2013, 9, 12), 38210], 27 | [new Date(2013, 9, 13), 38029], 28 | [new Date(2013, 9, 19), 38823], 29 | [new Date(2013, 9, 23), 38345], 30 | [new Date(2013, 9, 24), 38436], 31 | [new Date(2013, 9, 30), 38447], 32 | ]; 33 | 34 | export const options = { 35 | title: 'Red Sox Attendance', 36 | width: 800, 37 | height: 600, 38 | }; 39 | 40 | export default defineComponent({ 41 | name: 'GoogleChart', 42 | components: { 43 | GChart, 44 | }, 45 | setup() { 46 | return () => 47 | h(GChart, { 48 | data, 49 | options, 50 | type, 51 | settings: { 52 | packages: ['calendar'], 53 | }, 54 | }); 55 | }, 56 | }); 57 | -------------------------------------------------------------------------------- /sandboxes/calendar-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'CandlestickChart'; 6 | 7 | export const data = [ 8 | ['day', 'a', 'b', 'c', 'd'], 9 | ['Mon', 20, 28, 38, 45], 10 | ['Tue', 31, 38, 55, 66], 11 | ['Wed', 50, 55, 77, 80], 12 | ['Thu', 50, 77, 66, 77], 13 | ['Fri', 15, 66, 22, 68], 14 | ]; 15 | 16 | export const options = { 17 | legend: 'none', 18 | width: 800, 19 | height: 600, 20 | }; 21 | 22 | export default defineComponent({ 23 | name: 'GoogleChart', 24 | components: { 25 | GChart, 26 | }, 27 | setup() { 28 | return () => 29 | h(GChart, { 30 | data, 31 | options, 32 | type, 33 | }); 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /sandboxes/candlestick-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/column-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/column-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/column-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'ColumnChart'; 6 | 7 | export const data = [ 8 | ['Year', 'Sales', 'Expenses', 'Profit'], 9 | ['2014', 1000, 400, 200], 10 | ['2015', 1170, 460, 250], 11 | ['2016', 660, 1120, 300], 12 | ['2017', 1030, 540, 350], 13 | ]; 14 | 15 | export const options = { 16 | chart: { 17 | title: 'Company Performance', 18 | subtitle: 'Sales, Expenses, and Profit: 2014-2017', 19 | }, 20 | width: 800, 21 | height: 600, 22 | }; 23 | 24 | export default defineComponent({ 25 | name: 'GoogleChart', 26 | components: { 27 | GChart, 28 | }, 29 | setup() { 30 | return () => 31 | h(GChart, { 32 | data, 33 | options, 34 | type, 35 | }); 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /sandboxes/column-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'ComboChart'; 6 | 7 | export const data = [ 8 | [ 9 | 'Month', 10 | 'Bolivia', 11 | 'Ecuador', 12 | 'Madagascar', 13 | 'Papua New Guinea', 14 | 'Rwanda', 15 | 'Average', 16 | ], 17 | ['2004/05', 165, 938, 522, 998, 450, 614.6], 18 | ['2005/06', 135, 1120, 599, 1268, 288, 682], 19 | ['2006/07', 157, 1167, 587, 807, 397, 623], 20 | ['2007/08', 139, 1110, 615, 968, 215, 609.4], 21 | ['2008/09', 136, 691, 629, 1026, 366, 569.6], 22 | ]; 23 | 24 | export const options = { 25 | title: 'Monthly Coffee Production by Country', 26 | vAxis: { title: 'Cups' }, 27 | hAxis: { title: 'Month' }, 28 | seriesType: 'bars', 29 | series: { 5: { type: 'line' } }, 30 | width: 800, 31 | height: 600, 32 | }; 33 | 34 | export default defineComponent({ 35 | name: 'GoogleChart', 36 | components: { 37 | GChart, 38 | }, 39 | setup() { 40 | return () => 41 | h(GChart, { 42 | data, 43 | options, 44 | type, 45 | }); 46 | }, 47 | }); 48 | -------------------------------------------------------------------------------- /sandboxes/combo-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/donut-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/donut-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/donut-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'PieChart'; 6 | 7 | export const data = [ 8 | ['Task', 'Hours per Day'], 9 | ['Work', 11], 10 | ['Eat', 2], 11 | ['Commute', 2], 12 | ['Watch TV', 2], 13 | ['Sleep', 7], 14 | ]; 15 | 16 | export const options = { 17 | title: 'My Daily Activities', 18 | pieHole: 0.4, 19 | 20 | width: 800, 21 | height: 600, 22 | }; 23 | 24 | export default defineComponent({ 25 | name: 'GoogleChart', 26 | components: { 27 | GChart, 28 | }, 29 | setup() { 30 | return () => 31 | h(GChart, { 32 | data, 33 | options, 34 | type, 35 | }); 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /sandboxes/donut-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/gantt-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/gantt-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/gantt-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | function daysToMilliseconds(days: number) { 6 | return days * 24 * 60 * 60 * 1000; 7 | } 8 | 9 | const columns = [ 10 | { type: 'string', label: 'Task ID' }, 11 | { type: 'string', label: 'Task Name' }, 12 | { type: 'date', label: 'Start Date' }, 13 | { type: 'date', label: 'End Date' }, 14 | { type: 'number', label: 'Duration' }, 15 | { type: 'number', label: 'Percent Complete' }, 16 | { type: 'string', label: 'Dependencies' }, 17 | ]; 18 | 19 | const rows = [ 20 | [ 21 | 'Research', 22 | 'Find sources', 23 | new Date(2015, 0, 1), 24 | new Date(2015, 0, 5), 25 | null, 26 | 100, 27 | null, 28 | ], 29 | [ 30 | 'Write', 31 | 'Write paper', 32 | null, 33 | new Date(2015, 0, 9), 34 | daysToMilliseconds(3), 35 | 25, 36 | 'Research,Outline', 37 | ], 38 | [ 39 | 'Cite', 40 | 'Create bibliography', 41 | null, 42 | new Date(2015, 0, 7), 43 | daysToMilliseconds(1), 44 | 20, 45 | 'Research', 46 | ], 47 | [ 48 | 'Complete', 49 | 'Hand in paper', 50 | null, 51 | new Date(2015, 0, 10), 52 | daysToMilliseconds(1), 53 | 0, 54 | 'Cite,Write', 55 | ], 56 | [ 57 | 'Outline', 58 | 'Outline paper', 59 | null, 60 | new Date(2015, 0, 6), 61 | daysToMilliseconds(1), 62 | 100, 63 | 'Research', 64 | ], 65 | ]; 66 | 67 | export const type = 'Gantt'; 68 | 69 | export const data = [columns, ...rows]; 70 | 71 | export const options = { 72 | width: 800, 73 | height: 600, 74 | }; 75 | 76 | export default defineComponent({ 77 | name: 'GoogleChart', 78 | components: { 79 | GChart, 80 | }, 81 | setup() { 82 | return () => 83 | h(GChart, { 84 | data, 85 | options, 86 | type, 87 | settings: { 88 | packages: ['gantt'], 89 | }, 90 | }); 91 | }, 92 | }); 93 | -------------------------------------------------------------------------------- /sandboxes/gantt-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/gauge-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/gauge-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/gauge-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'Gauge'; 6 | 7 | export const data = [ 8 | ['Label', 'Value'], 9 | ['Memory', 80], 10 | ['CPU', 55], 11 | ['Network', 68], 12 | ]; 13 | 14 | export const options = { 15 | width: 800, 16 | height: 600, 17 | redFrom: 90, 18 | redTo: 100, 19 | yellowFrom: 75, 20 | yellowTo: 90, 21 | minorTicks: 5, 22 | }; 23 | 24 | export default defineComponent({ 25 | name: 'GoogleChart', 26 | components: { 27 | GChart, 28 | }, 29 | setup() { 30 | return () => 31 | h(GChart, { 32 | data, 33 | options, 34 | type, 35 | settings: { 36 | packages: ['gauge'], 37 | }, 38 | }); 39 | }, 40 | }); 41 | -------------------------------------------------------------------------------- /sandboxes/gauge-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'GeoChart'; 6 | 7 | export const data = [ 8 | ['Country', 'Popularity'], 9 | ['Germany', 200], 10 | ['United States', 300], 11 | ['Brazil', 400], 12 | ['Canada', 500], 13 | ['France', 600], 14 | ['RU', 700], 15 | ]; 16 | 17 | export const options = { 18 | width: 800, 19 | height: 600, 20 | }; 21 | 22 | export default defineComponent({ 23 | name: 'GoogleChart', 24 | components: { 25 | GChart, 26 | }, 27 | setup() { 28 | return () => 29 | h(GChart, { 30 | data, 31 | options, 32 | type, 33 | settings: { 34 | packages: ['geochart'], 35 | }, 36 | }); 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /sandboxes/geo-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/histogram-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/histogram-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/histogram-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'Histogram'; 6 | 7 | export const data = [ 8 | ['Dinosaur', 'Length'], 9 | ['Acrocanthosaurus (top-spined lizard)', 12.2], 10 | ['Albertosaurus (Alberta lizard)', 9.1], 11 | ['Allosaurus (other lizard)', 12.2], 12 | ['Apatosaurus (deceptive lizard)', 22.9], 13 | ['Archaeopteryx (ancient wing)', 0.9], 14 | ['Argentinosaurus (Argentina lizard)', 36.6], 15 | ['Baryonyx (heavy claws)', 9.1], 16 | ['Brachiosaurus (arm lizard)', 30.5], 17 | ['Ceratosaurus (horned lizard)', 6.1], 18 | ['Coelophysis (hollow form)', 2.7], 19 | ['Compsognathus (elegant jaw)', 0.9], 20 | ['Deinonychus (terrible claw)', 2.7], 21 | ['Diplodocus (double beam)', 27.1], 22 | ['Dromicelomimus (emu mimic)', 3.4], 23 | ['Gallimimus (fowl mimic)', 5.5], 24 | ['Mamenchisaurus (Mamenchi lizard)', 21.0], 25 | ['Megalosaurus (big lizard)', 7.9], 26 | ['Microvenator (small hunter)', 1.2], 27 | ['Ornithomimus (bird mimic)', 4.6], 28 | ['Oviraptor (egg robber)', 1.5], 29 | ['Plateosaurus (flat lizard)', 7.9], 30 | ['Sauronithoides (narrow-clawed lizard)', 2.0], 31 | ['Seismosaurus (tremor lizard)', 45.7], 32 | ['Spinosaurus (spiny lizard)', 12.2], 33 | ['Supersaurus (super lizard)', 30.5], 34 | ['Tyrannosaurus (tyrant lizard)', 15.2], 35 | ['Ultrasaurus (ultra lizard)', 30.5], 36 | ['Velociraptor (swift robber)', 1.8], 37 | ]; 38 | 39 | export const options = { 40 | title: 'Lengths of dinosaurs, in meters', 41 | legend: { position: 'none' }, 42 | width: 800, 43 | height: 600, 44 | }; 45 | 46 | export default defineComponent({ 47 | name: 'GoogleChart', 48 | components: { 49 | GChart, 50 | }, 51 | setup() { 52 | return () => 53 | h(GChart, { 54 | data, 55 | options, 56 | type, 57 | }); 58 | }, 59 | }); 60 | -------------------------------------------------------------------------------- /sandboxes/histogram-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/line-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/line-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/line-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'LineChart'; 6 | 7 | export const data = [ 8 | ['Year', 'Sales', 'Expenses'], 9 | ['2004', 1000, 400], 10 | ['2005', 1170, 460], 11 | ['2006', 660, 1120], 12 | ['2007', 1030, 540], 13 | ]; 14 | 15 | export const options = { 16 | title: 'Company Performance', 17 | curveType: 'function', 18 | legend: { position: 'bottom' }, 19 | width: 800, 20 | height: 600, 21 | }; 22 | 23 | export default defineComponent({ 24 | name: 'GoogleChart', 25 | components: { 26 | GChart, 27 | }, 28 | setup() { 29 | return () => 30 | h(GChart, { 31 | data, 32 | options, 33 | type, 34 | }); 35 | }, 36 | }); 37 | -------------------------------------------------------------------------------- /sandboxes/line-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/org-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/org-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/org-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'OrgChart'; 6 | 7 | export const data = [ 8 | [ 9 | { 10 | v: 'Mike', 11 | f: 'Mike
President
', 12 | }, 13 | '', 14 | 'The President', 15 | ], 16 | [ 17 | { 18 | v: 'Jim', 19 | f: 'Jim
Vice President
', 20 | }, 21 | 'Mike', 22 | 'VP', 23 | ], 24 | ['Alice', 'Mike', ''], 25 | ['Bob', 'Jim', 'Bob Sponge'], 26 | ['Carol', 'Bob', ''], 27 | ]; 28 | 29 | export const options = { 30 | width: 800, 31 | height: 600, 32 | allowHtml: true, 33 | }; 34 | 35 | export default defineComponent({ 36 | name: 'GoogleChart', 37 | components: { 38 | GChart, 39 | }, 40 | setup() { 41 | return () => 42 | h(GChart, { 43 | data, 44 | options, 45 | type, 46 | settings: { 47 | packages: ['orgchart'], 48 | }, 49 | }); 50 | }, 51 | }); 52 | -------------------------------------------------------------------------------- /sandboxes/org-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'PieChart'; 6 | 7 | export const data = [ 8 | ['Task', 'Hours per Day'], 9 | ['Work', 11], 10 | ['Eat', 2], 11 | ['Commute', 2], 12 | ['Watch TV', 2], 13 | ['Sleep', 7], 14 | ]; 15 | 16 | export const options = { 17 | title: 'My Daily Activities', 18 | width: 800, 19 | height: 600, 20 | }; 21 | 22 | export default defineComponent({ 23 | name: 'GoogleChart', 24 | components: { 25 | GChart, 26 | }, 27 | setup() { 28 | return () => 29 | h(GChart, { 30 | data, 31 | options, 32 | type, 33 | }); 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /sandboxes/pie-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/sankey-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/sankey-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/sankey-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'Sankey'; 6 | 7 | export const data = [ 8 | ['From', 'To', 'Weight'], 9 | ['A', 'X', 5], 10 | ['A', 'Y', 7], 11 | ['A', 'Z', 6], 12 | ['B', 'X', 2], 13 | ['B', 'Y', 9], 14 | ['B', 'Z', 4], 15 | ]; 16 | 17 | export const options = { 18 | width: 800, 19 | height: 600, 20 | }; 21 | 22 | export default defineComponent({ 23 | name: 'GoogleChart', 24 | components: { 25 | GChart, 26 | }, 27 | setup() { 28 | return () => 29 | h(GChart, { 30 | data, 31 | options, 32 | type, 33 | settings: { 34 | packages: ['sankey'], 35 | }, 36 | }); 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /sandboxes/sankey-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'ScatterChart'; 6 | 7 | export const data = [ 8 | ['Year', 'Sales', 'Expenses'], 9 | ['2004', 1000, 400], 10 | ['2005', 1170, 460], 11 | ['2006', 660, 1120], 12 | ['2008', 1030, 540], 13 | ['2009', 1000, 400], 14 | ['2010', 1170, 460], 15 | ['2011', 660, 1120], 16 | ['2012', 1030, 540], 17 | ]; 18 | 19 | export const options = { 20 | title: 'Company Performance', 21 | curveType: 'function', 22 | legend: { position: 'bottom' }, 23 | width: 800, 24 | height: 600, 25 | }; 26 | 27 | export default defineComponent({ 28 | name: 'GoogleChart', 29 | components: { 30 | GChart, 31 | }, 32 | setup() { 33 | return () => 34 | h(GChart, { 35 | data, 36 | options, 37 | type, 38 | }); 39 | }, 40 | }); 41 | -------------------------------------------------------------------------------- /sandboxes/scatter-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'SteppedAreaChart'; 6 | 7 | export const data = [ 8 | ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], 9 | ['Alfred Hitchcock (1935)', 8.4, 7.9], 10 | ['Ralph Thomas (1959)', 6.9, 6.5], 11 | ['Don Sharp (1978)', 6.5, 6.4], 12 | ['James Hawes (2008)', 4.4, 6.2], 13 | ]; 14 | 15 | export const options = { 16 | title: "The decline of 'The 39 Steps'", 17 | vAxis: { title: 'Accumulated Rating' }, 18 | isStacked: true, 19 | width: 800, 20 | height: 600, 21 | }; 22 | 23 | export default defineComponent({ 24 | name: 'GoogleChart', 25 | components: { 26 | GChart, 27 | }, 28 | setup() { 29 | return () => 30 | h(GChart, { 31 | data, 32 | options, 33 | type, 34 | }); 35 | }, 36 | }); 37 | -------------------------------------------------------------------------------- /sandboxes/stepped-area-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/table-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/table-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/table-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'Table'; 6 | 7 | export const data = [ 8 | ['Name', 'Salary', 'Full time employee'], 9 | ['Mike', { v: 10000, f: '$10,000' }, true], 10 | ['Jim', { v: 8000, f: '$8,000' }, false], 11 | ['Alice', { v: 12500, f: '$12,500' }, true], 12 | ['Bob', { v: 7000, f: '$7,000' }, true], 13 | ]; 14 | 15 | export const options = { 16 | title: 'Company Performance', 17 | curveType: 'function', 18 | legend: { position: 'bottom' }, 19 | pageSize: 1, 20 | width: 800, 21 | height: 600, 22 | }; 23 | 24 | export default defineComponent({ 25 | name: 'GoogleChart', 26 | components: { 27 | GChart, 28 | }, 29 | setup() { 30 | return () => 31 | h(GChart, { 32 | data, 33 | options, 34 | type, 35 | }); 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /sandboxes/table-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/time-line-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/time-line-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/time-line-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | const columns = [ 6 | { type: 'string', id: 'President' }, 7 | { type: 'date', id: 'Start' }, 8 | { type: 'date', id: 'End' }, 9 | ]; 10 | 11 | const rows = [ 12 | ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)], 13 | ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)], 14 | ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)], 15 | ]; 16 | 17 | export const type = 'Timeline'; 18 | 19 | export const data = [columns, ...rows]; 20 | 21 | export const options = { 22 | width: 800, 23 | height: 600, 24 | }; 25 | 26 | export default defineComponent({ 27 | name: 'GoogleChart', 28 | components: { 29 | GChart, 30 | }, 31 | setup() { 32 | return () => 33 | h(GChart, { 34 | data, 35 | options, 36 | type, 37 | settings: { 38 | packages: ['timeline'], 39 | }, 40 | }); 41 | }, 42 | }); 43 | -------------------------------------------------------------------------------- /sandboxes/time-line-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/tree-map-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/tree-map-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/tree-map-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'TreeMap'; 6 | 7 | export const data = [ 8 | [ 9 | 'Location', 10 | 'Parent', 11 | 'Market trade volume (size)', 12 | 'Market increase/decrease (color)', 13 | ], 14 | ['Global', null, 0, 0], 15 | ['America', 'Global', 0, 0], 16 | ['Europe', 'Global', 0, 0], 17 | ['Asia', 'Global', 0, 0], 18 | ['Australia', 'Global', 0, 0], 19 | ['Africa', 'Global', 0, 0], 20 | ['Brazil', 'America', 11, 10], 21 | ['USA', 'America', 52, 31], 22 | ['Mexico', 'America', 24, 12], 23 | ['Canada', 'America', 16, -23], 24 | ['France', 'Europe', 42, -11], 25 | ['Germany', 'Europe', 31, -2], 26 | ['Sweden', 'Europe', 22, -13], 27 | ['Italy', 'Europe', 17, 4], 28 | ['UK', 'Europe', 21, -5], 29 | ['China', 'Asia', 36, 4], 30 | ['Japan', 'Asia', 20, -12], 31 | ['India', 'Asia', 40, 63], 32 | ['Laos', 'Asia', 4, 34], 33 | ['Mongolia', 'Asia', 1, -5], 34 | ['Israel', 'Asia', 12, 24], 35 | ['Iran', 'Asia', 18, 13], 36 | ['Pakistan', 'Asia', 11, -52], 37 | ['Egypt', 'Africa', 21, 0], 38 | ['S. Africa', 'Africa', 30, 43], 39 | ['Sudan', 'Africa', 12, 2], 40 | ['Congo', 'Africa', 10, 12], 41 | ['Zaire', 'Africa', 8, 10], 42 | ]; 43 | 44 | export const options = { 45 | minColor: '#f00', 46 | midColor: '#ddd', 47 | maxColor: '#0d0', 48 | headerHeight: 15, 49 | fontColor: 'black', 50 | showScale: true, 51 | width: 800, 52 | height: 600, 53 | }; 54 | 55 | export default defineComponent({ 56 | name: 'GoogleChart', 57 | components: { 58 | GChart, 59 | }, 60 | setup() { 61 | return () => 62 | h(GChart, { 63 | data, 64 | options, 65 | type, 66 | settings: { 67 | packages: ['treemap'], 68 | }, 69 | }); 70 | }, 71 | }); 72 | -------------------------------------------------------------------------------- /sandboxes/tree-map-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/trendlines-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/trendlines-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/trendlines-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'ScatterChart'; 6 | 7 | export const data = [ 8 | ['Diameter', 'Age'], 9 | [8, 37], 10 | [4, 19.5], 11 | [11, 52], 12 | [4, 22], 13 | [3, 16.5], 14 | [6.5, 32.8], 15 | [14, 72], 16 | ]; 17 | 18 | export const options = { 19 | title: 'Age of sugar maples vs. trunk diameter, in inches', 20 | hAxis: { title: 'Diameter' }, 21 | vAxis: { title: 'Age' }, 22 | legend: 'none', 23 | trendlines: { 0: {} }, // Draw a trendline for data series 0. 24 | width: 800, 25 | height: 600, 26 | }; 27 | 28 | export default defineComponent({ 29 | name: 'GoogleChart', 30 | components: { 31 | GChart, 32 | }, 33 | setup() { 34 | return () => 35 | h(GChart, { 36 | data, 37 | options, 38 | type, 39 | }); 40 | }, 41 | }); 42 | -------------------------------------------------------------------------------- /sandboxes/trendlines-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "vue-google-charts": ["../src"] 7 | } 8 | }, 9 | "include": ["."] 10 | } 11 | -------------------------------------------------------------------------------- /sandboxes/waterfall-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/waterfall-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/waterfall-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'CandlestickChart'; 6 | 7 | export const data = [ 8 | ['Mon', 28, 28, 38, 38], 9 | ['Tue', 38, 38, 55, 55], 10 | ['Wed', 55, 55, 77, 77], 11 | ['Thu', 77, 77, 66, 66], 12 | ['Fri', 66, 66, 22, 22], 13 | ]; 14 | 15 | export const options = { 16 | legend: 'none', 17 | bar: { groupWidth: '100%' }, // Remove space between bars. 18 | candlestick: { 19 | fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red 20 | risingColor: { strokeWidth: 0, fill: '#0f9d58' }, // green 21 | }, 22 | width: 800, 23 | height: 600, 24 | }; 25 | 26 | export default defineComponent({ 27 | name: 'GoogleChart', 28 | components: { 29 | GChart, 30 | }, 31 | setup() { 32 | return () => 33 | h(GChart, { 34 | data, 35 | options, 36 | type, 37 | isFirstRowLabels: true, 38 | }); 39 | }, 40 | }); 41 | -------------------------------------------------------------------------------- /sandboxes/waterfall-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /sandboxes/word-tree-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "google-chart", 3 | "dependencies": { 4 | "typescript": "^4.6.4", 5 | "vue": "^3.2.33", 6 | "vue-google-charts": "^1.0.0" 7 | }, 8 | "devDependencies": { 9 | "@vue/cli-plugin-babel": "~4.5.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sandboxes/word-tree-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /sandboxes/word-tree-chart/src/components/GoogleChart.ts: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue'; 2 | 3 | import { GChart } from 'vue-google-charts'; 4 | 5 | export const type = 'WordTree'; 6 | 7 | export const data = [ 8 | ['Phrases'], 9 | ['cats are better than dogs'], 10 | ['cats eat kibble'], 11 | ['cats are better than hamsters'], 12 | ['cats are awesome'], 13 | ['cats are people too'], 14 | ['cats eat mice'], 15 | ['cats meowing'], 16 | ['cats in the cradle'], 17 | ['cats eat mice'], 18 | ['cats in the cradle lyrics'], 19 | ['cats eat kibble'], 20 | ['cats for adoption'], 21 | ['cats are family'], 22 | ['cats eat mice'], 23 | ['cats are better than kittens'], 24 | ['cats are evil'], 25 | ['cats are weird'], 26 | ['cats eat mice'], 27 | ]; 28 | 29 | export const options = { 30 | wordtree: { 31 | format: 'implicit', 32 | word: 'cats', 33 | }, 34 | width: 800, 35 | height: 600, 36 | }; 37 | 38 | export default defineComponent({ 39 | name: 'GoogleChart', 40 | components: { 41 | GChart, 42 | }, 43 | setup() { 44 | return () => 45 | h(GChart, { 46 | data, 47 | options, 48 | type, 49 | settings: { 50 | packages: ['wordtree'], 51 | }, 52 | }); 53 | }, 54 | }); 55 | -------------------------------------------------------------------------------- /sandboxes/word-tree-chart/src/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | 3 | import { loadGoogleCharts } from './lib/google-charts-loader'; 4 | import { GChart } from './components/GChart'; 5 | 6 | const app = createApp({}); 7 | 8 | // Install the components 9 | export function install() { 10 | app.component('GChart', GChart); 11 | } 12 | 13 | // Expose the components 14 | export { loadGoogleCharts, GChart }; 15 | 16 | /* -- Plugin definition & Auto-install -- */ 17 | /* You shouldn't have to modify the code below */ 18 | 19 | // Plugin 20 | const plugin = { 21 | version: process.env.VERSION, 22 | install, 23 | }; 24 | 25 | export default plugin; 26 | 27 | // Auto-install 28 | let GlobalVue = null; 29 | if (typeof window !== 'undefined') { 30 | GlobalVue = window.Vue; 31 | } 32 | 33 | if (GlobalVue !== null && GlobalVue !== undefined) { 34 | app.use(plugin); 35 | } 36 | -------------------------------------------------------------------------------- /src/lib/debounce.ts: -------------------------------------------------------------------------------- 1 | export interface DebouncedFunction< 2 | Args extends any[], 3 | F extends (...args: Args) => any 4 | > { 5 | (this: ThisParameterType, ...args: Args & Parameters): void; 6 | } 7 | 8 | export function debounce any>( 9 | func: F, 10 | waitMilliseconds = 50 11 | ): DebouncedFunction { 12 | let timeoutId: ReturnType | undefined; 13 | function nextInvokeTimeout() { 14 | return waitMilliseconds; 15 | } 16 | 17 | const debouncedFunction = function ( 18 | this: ThisParameterType, 19 | ...args: Parameters 20 | ) { 21 | const context = this; 22 | 23 | const invokeFunction = function () { 24 | timeoutId = undefined; 25 | 26 | func.apply(context, args); 27 | }; 28 | 29 | if (timeoutId !== undefined) { 30 | clearTimeout(timeoutId); 31 | } 32 | 33 | timeoutId = setTimeout(invokeFunction, nextInvokeTimeout()); 34 | }; 35 | 36 | return debouncedFunction; 37 | } 38 | -------------------------------------------------------------------------------- /src/lib/google-charts-loader.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Usage: 3 | * import { loadGoogleCharts } from 'vue-google-charts' 4 | * 5 | * loadGoogleCharts('current', { packages: ['corechart', 'map'] }) 6 | * .then(google => { 7 | * const chart = new google.visualization.Map ... 8 | * }) 9 | */ 10 | 11 | import type { 12 | GoogleViz, 13 | GoogleChartLoader, 14 | GoogleChartVersion, 15 | GoogleChartLoaderOptions, 16 | } from '../types'; 17 | 18 | const chartsScriptUrl = 'https://www.gstatic.com/charts/loader.js'; 19 | 20 | let chartsLoaderPromise: null | Promise = null; 21 | 22 | const loadedPackages = new Map(); 23 | 24 | export function getChartsLoader(): Promise { 25 | // If already included in the page: 26 | if (window.google !== undefined) { 27 | return Promise.resolve(window.google.charts); 28 | } 29 | 30 | if (chartsLoaderPromise === null) { 31 | chartsLoaderPromise = new Promise(resolve => { 32 | // Find script tag with same src in DOM. 33 | const foundScript = document.querySelector( 34 | `script[src="${chartsScriptUrl}"]` 35 | ); 36 | 37 | // Create or get existed tag. 38 | const script = foundScript || document.createElement('script'); 39 | 40 | // Set src if no script was found. 41 | if (!foundScript) { 42 | script.src = chartsScriptUrl; 43 | script.type = 'text/javascript'; 44 | 45 | document.head.append(script); 46 | } 47 | 48 | script.onload = () => { 49 | if (window.google !== undefined) { 50 | resolve(window.google.charts); 51 | } 52 | }; 53 | }); 54 | } 55 | 56 | return chartsLoaderPromise; 57 | } 58 | 59 | /** 60 | * Function to load Google Charts JS API. 61 | * @param version - Chart version to load. 62 | * @param packages - Packages to load. 63 | * @param language - Languages to load. 64 | * @param mapsApiKey - Google Maps api key. 65 | * @returns 66 | */ 67 | export async function loadGoogleCharts( 68 | version: GoogleChartVersion = 'current', 69 | { 70 | packages = ['corechart', 'controls'], 71 | language = 'en', 72 | mapsApiKey, 73 | }: GoogleChartLoaderOptions 74 | ): Promise { 75 | const loader = await getChartsLoader(); 76 | 77 | const settingsKey = `${version}_${packages.join('_')}_${language}`; 78 | 79 | if (loadedPackages.has(settingsKey)) return loadedPackages.get(settingsKey); 80 | 81 | const loaderPromise: Promise = new Promise(resolve => { 82 | loader.load(version, { 83 | packages, 84 | language, 85 | mapsApiKey, 86 | }); 87 | 88 | loader.setOnLoadCallback(() => resolve(window.google)); 89 | }); 90 | 91 | loadedPackages.set(settingsKey, loaderPromise); 92 | 93 | return loaderPromise; 94 | } 95 | -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | import { 2 | GoogleChartWrapper, 3 | GoogleChartWrapperChartType, 4 | GoogleDataTable, 5 | GoogleDataView, 6 | GoogleViz, 7 | GoogleVizEventName, 8 | GoogleVizEvents, 9 | } from './types'; 10 | 11 | export interface ICreateChartFunction { 12 | ( 13 | el: HTMLElement, 14 | google: GoogleViz, 15 | type: GoogleChartWrapperChartType 16 | ): GoogleChartWrapper; 17 | } 18 | 19 | export function getValidChartData( 20 | chartsLib: null | GoogleViz, 21 | data: unknown[][] | GoogleDataTable | Record | null, 22 | isFirstRowLabels?: boolean 23 | ): GoogleDataTable | GoogleDataView | null { 24 | if (chartsLib !== null && data instanceof chartsLib.visualization.DataTable) { 25 | return data; 26 | } 27 | 28 | if (chartsLib !== null && data instanceof chartsLib.visualization.DataView) { 29 | return data; 30 | } 31 | 32 | if (chartsLib !== null && Array.isArray(data)) { 33 | return chartsLib.visualization.arrayToDataTable(data, isFirstRowLabels); 34 | } 35 | 36 | if (chartsLib !== null && data !== null && typeof data === 'object') { 37 | return new chartsLib.visualization.DataTable(data); 38 | } 39 | 40 | return null; 41 | } 42 | 43 | export function createChartObject( 44 | chartsLib: GoogleViz | null, 45 | chartObject: GoogleChartWrapper | null, 46 | chartEl: HTMLElement | null, 47 | chartType: GoogleChartWrapperChartType, 48 | chartEvents: GoogleVizEvents | null, 49 | createChartFunction?: ICreateChartFunction 50 | ): GoogleChartWrapper | null { 51 | const createChart: ICreateChartFunction = ( 52 | el: HTMLElement, 53 | google: GoogleViz, 54 | type: GoogleChartWrapperChartType 55 | ): GoogleChartWrapper => { 56 | if (type === undefined) { 57 | throw new Error('please, provide chart type property'); 58 | } 59 | 60 | return new google.visualization[type](el); 61 | }; 62 | 63 | if (chartsLib === null) { 64 | throw new Error('please, provide charts lib property'); 65 | } 66 | 67 | if (chartEl === null) { 68 | throw new Error('please, provide chart element property'); 69 | } 70 | 71 | const fn = createChartFunction || createChart; 72 | 73 | chartObject = fn(chartEl, chartsLib, chartType); 74 | 75 | attachListeners(chartsLib, chartObject, chartEvents); 76 | 77 | return chartObject; 78 | } 79 | 80 | function attachListeners( 81 | chartsLib: null | GoogleViz, 82 | chartObject: GoogleChartWrapper | null, 83 | chartEvents: GoogleVizEvents | null 84 | ): void { 85 | if (chartEvents === null) { 86 | return; 87 | } 88 | 89 | for (const [event, listener] of Object.entries(chartEvents)) { 90 | if (chartsLib !== null && chartObject !== null) { 91 | chartsLib.visualization.events.addListener( 92 | chartObject, 93 | event as GoogleVizEventName, 94 | listener as (chartWrapper: GoogleChartWrapper) => any 95 | ); 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/window.ts: -------------------------------------------------------------------------------- 1 | import { GoogleViz } from './types'; 2 | import Vue from 'vue'; 3 | 4 | declare global { 5 | interface Window { 6 | google?: GoogleViz; 7 | Vue?: typeof Vue; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /stories/AreaChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/area-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'AreaChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultAreaChart = Template.bind({}); 33 | DefaultAreaChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/BarChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/bar-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'BarChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultBarChart = Template.bind({}); 33 | DefaultBarChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/BubbleChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/bubble-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'BubbleChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultBubbleChart = Template.bind({}); 33 | DefaultBubbleChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/Calendar.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/calendar-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['calendar'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'CalendarChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultCalendarChart = Template.bind({}); 36 | DefaultCalendarChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/Candlestick.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/candlestick-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'CandlestickChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultCandlestick = Template.bind({}); 33 | DefaultCandlestick.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/ColumnChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/column-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'ColumnChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultColumn = Template.bind({}); 33 | DefaultColumn.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/ComboChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/combo-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'ComboChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultComboChart = Template.bind({}); 33 | DefaultComboChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/DonutChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/donut-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'DonutChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultDonutChart = Template.bind({}); 33 | DefaultDonutChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/GanttChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/gantt-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['gantt'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'GanttChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultGanttChart = Template.bind({}); 36 | DefaultGanttChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/GaugeChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/gauge-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['gauge'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'GaugeChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultGaugeChart = Template.bind({}); 36 | DefaultGaugeChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/GeoCharts.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/geo-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['geochart'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'GeoChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultGeoChart = Template.bind({}); 36 | DefaultGeoChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/Histogram.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/histogram-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'Histogram', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultHistogram = Template.bind({}); 33 | DefaultHistogram.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/LineChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/line-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'LineChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultLineChart = Template.bind({}); 33 | DefaultLineChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/OrgChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/org-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['orgchart'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'OrgChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultOrgChart = Template.bind({}); 36 | DefaultOrgChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/PieChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/pie-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'PieChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultPieChart = Template.bind({}); 33 | DefaultPieChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/Sankey.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/sankey-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['sankey'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'Sankey', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultSankey = Template.bind({}); 36 | DefaultSankey.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/ScatterChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/scatter-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'ScatterChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultScatterChart = Template.bind({}); 33 | DefaultScatterChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/SteppedAreaChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/stepped-area-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'SteppedAreaChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultSteppedAreaChart = Template.bind({}); 33 | DefaultSteppedAreaChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/Table.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/table-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'Table', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultTable = Template.bind({}); 33 | DefaultTable.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/TimeLineChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/time-line-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['timeline'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'TimeLineChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultTimeLineChart = Template.bind({}); 36 | DefaultTimeLineChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/TreeMapChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/tree-map-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['treemap'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'TreeMapChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultTreeMapChart = Template.bind({}); 36 | DefaultTreeMapChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /stories/TrendlinesChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/trendlines-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | }; 14 | 15 | export default { 16 | title: 'TrendlinesChart', 17 | component: GChart, 18 | parameters: { 19 | layout: 'centered', 20 | }, 21 | args: defaultArgs, 22 | }; 23 | 24 | const Template = args => ({ 25 | components: { GChart }, 26 | setup() { 27 | return { args }; 28 | }, 29 | template: '', 30 | }); 31 | 32 | export const DefaultTrendlinesChart = Template.bind({}); 33 | DefaultTrendlinesChart.args = { ...defaultArgs }; 34 | -------------------------------------------------------------------------------- /stories/WaterfallChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/waterfall-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | isFirstRowLabels: true, 14 | }; 15 | 16 | export default { 17 | title: 'WaterfallChart', 18 | component: GChart, 19 | parameters: { 20 | layout: 'centered', 21 | }, 22 | args: defaultArgs, 23 | }; 24 | 25 | const Template = args => ({ 26 | components: { GChart }, 27 | setup() { 28 | return { args }; 29 | }, 30 | template: '', 31 | }); 32 | 33 | export const DefaultWaterfallChart = Template.bind({}); 34 | DefaultWaterfallChart.args = { ...defaultArgs }; 35 | -------------------------------------------------------------------------------- /stories/WordTreeChart.stories.ts: -------------------------------------------------------------------------------- 1 | import { GChart } from '../src'; 2 | 3 | import { 4 | type, 5 | data, 6 | options, 7 | } from '../sandboxes/word-tree-chart/src/components/GoogleChart'; 8 | 9 | const defaultArgs = { 10 | type, 11 | data, 12 | options, 13 | settings: { 14 | packages: ['wordtree'], 15 | }, 16 | }; 17 | 18 | export default { 19 | title: 'WordTreeChart', 20 | component: GChart, 21 | parameters: { 22 | layout: 'centered', 23 | }, 24 | args: defaultArgs, 25 | }; 26 | 27 | const Template = args => ({ 28 | components: { GChart }, 29 | setup() { 30 | return { args }; 31 | }, 32 | template: '', 33 | }); 34 | 35 | export const DefaultWordTreeChart = Template.bind({}); 36 | DefaultWordTreeChart.args = { ...defaultArgs }; 37 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /test/AreaChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/area-chart/src/components/GoogleChart'; 10 | 11 | describe('AreaChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/BarChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/bar-chart/src/components/GoogleChart'; 10 | 11 | describe('BarChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/BubbleChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/bubble-chart/src/components/GoogleChart'; 10 | 11 | describe('BubbleChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/Calendar.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/calendar-chart/src/components/GoogleChart'; 10 | 11 | describe('CalendarChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['calendar'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/Candlestick.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/candlestick-chart/src/components/GoogleChart'; 10 | 11 | describe('CandlestickChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/ChartsTypes.test-d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { h } from 'vue'; 2 | import { expectError } from 'tsd'; 3 | 4 | import { GChart } from '../src'; 5 | 6 | import { GoogleViz } from '../src/types'; 7 | 8 | declare global { 9 | interface Window { 10 | google?: GoogleViz; 11 | Vue?: typeof Vue; 12 | } 13 | } 14 | 15 | const data = [ 16 | ['Year', 'Sales', 'Expenses'], 17 | ['2004', 1000, 400], 18 | ['2005', 1170, 460], 19 | ['2006', 660, 1120], 20 | ['2007', 1030, 540], 21 | ]; 22 | 23 | const options = { 24 | title: 'Company Performance', 25 | curveType: 'function', 26 | legend: { position: 'bottom' }, 27 | width: 800, 28 | height: 600, 29 | }; 30 | 31 | h(GChart, { 32 | type: 'AreaChart', 33 | }); 34 | 35 | h(GChart, { 36 | type: 'Histogram', 37 | }); 38 | 39 | h(GChart, { 40 | type: 'Timeline', 41 | }); 42 | 43 | expectError( 44 | h(GChart, { 45 | type: 'UnknownChart', 46 | }) 47 | ); 48 | 49 | h(GChart, { 50 | type: 'AreaChart', 51 | data: data, 52 | }); 53 | 54 | expectError( 55 | h(GChart, { 56 | type: 'AreaChart', 57 | data: 'data', 58 | }) 59 | ); 60 | 61 | h(GChart, { 62 | type: 'AreaChart', 63 | data: data, 64 | options: options, 65 | }); 66 | -------------------------------------------------------------------------------- /test/ColumnChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/column-chart/src/components/GoogleChart'; 10 | 11 | describe('ColumnChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/ComboChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/combo-chart/src/components/GoogleChart'; 10 | 11 | describe('ComboChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/DonutChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/donut-chart/src/components/GoogleChart'; 10 | 11 | describe('DonutChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/GanttChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/gantt-chart/src/components/GoogleChart'; 10 | 11 | describe('GanttChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['gantt'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/GaugeChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/gauge-chart/src/components/GoogleChart'; 10 | 11 | describe('GaugeChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['gauge'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/GeoCharts.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/geo-chart/src/components/GoogleChart'; 10 | 11 | describe('GeoChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['geochart'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/Histogram.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/histogram-chart/src/components/GoogleChart'; 10 | 11 | describe('Histogram', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/LineChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/line-chart/src/components/GoogleChart'; 10 | 11 | describe('LineChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/OrgChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/org-chart/src/components/GoogleChart'; 10 | 11 | describe('OrgChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['orgchart'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/PieChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/pie-chart/src/components/GoogleChart'; 10 | 11 | describe('PieChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/Sankey.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/sankey-chart/src/components/GoogleChart'; 10 | 11 | describe('SankeyChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['sankey'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/ScatterChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/scatter-chart/src/components/GoogleChart'; 10 | 11 | describe('ScatterChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/SteppedAreaChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/stepped-area-chart/src/components/GoogleChart'; 10 | 11 | describe('SteppedAreaChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/Table.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/table-chart/src/components/GoogleChart'; 10 | 11 | describe('Table', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/TimeLineChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/time-line-chart/src/components/GoogleChart'; 10 | 11 | describe('TimelineChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['timeline'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/TreeMapChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/tree-map-chart/src/components/GoogleChart'; 10 | 11 | describe('TreeMapChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['treemap'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/TrendlinesChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/trendlines-chart/src/components/GoogleChart'; 10 | 11 | describe('TrendlinesChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options'], 17 | }; 18 | 19 | it('should render a chart', () => { 20 | const wrapper = shallowMount(Component, { 21 | propsData: { 22 | type, 23 | data, 24 | options, 25 | }, 26 | }); 27 | 28 | const chart = wrapper.find('g-chart-stub'); 29 | expect(chart.attributes('type')).toBe(type); 30 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /test/WaterfallChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/waterfall-chart/src/components/GoogleChart'; 10 | 11 | describe('WaterfallChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'isFirstRowLabels'], 17 | }; 18 | 19 | const isFirstRowLabels = true; 20 | 21 | it('should render a chart', () => { 22 | const wrapper = shallowMount(Component, { 23 | propsData: { 24 | type, 25 | data, 26 | options, 27 | isFirstRowLabels, 28 | }, 29 | }); 30 | 31 | const chart = wrapper.find('g-chart-stub'); 32 | expect(chart.attributes('type')).toBe(type); 33 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /test/WordTreeChart.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | 3 | import { GChart } from '../src'; 4 | 5 | import { 6 | type, 7 | data, 8 | options, 9 | } from '../sandboxes/word-tree-chart/src/components/GoogleChart'; 10 | 11 | describe('WordTreeChart', () => { 12 | const Component = { 13 | template: 14 | '
', 15 | components: { GChart }, 16 | props: ['type', 'data', 'options', 'settings'], 17 | }; 18 | 19 | const settings = { 20 | packages: ['wordtree'], 21 | }; 22 | 23 | it('should render a chart', () => { 24 | const wrapper = shallowMount(Component, { 25 | propsData: { 26 | type, 27 | data, 28 | options, 29 | settings, 30 | }, 31 | }); 32 | 33 | const chart = wrapper.find('g-chart-stub'); 34 | expect(chart.attributes('type')).toBe(type); 35 | expect(chart.attributes('data')).toBe(data.flat().join(',')); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Type Checking */ 4 | "strict": true, 5 | "strictBindCallApply": true, 6 | "noFallthroughCasesInSwitch": true, 7 | "noImplicitOverride": true, 8 | "noImplicitReturns": true, 9 | "noUnusedLocals": true, 10 | "noUnusedParameters": true, 11 | /* Modules */ 12 | "baseUrl": ".", 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "resolveJsonModule": true, 16 | /* Emit */ 17 | "declaration": true, 18 | "declarationMap": true, 19 | "inlineSourceMap": true, 20 | "outDir": "dist", 21 | /* Interop Constraints */ 22 | "allowSyntheticDefaultImports": true, 23 | "isolatedModules": true, 24 | /* Language and Environment */ 25 | "lib": [ 26 | "dom", 27 | "esnext" 28 | ], 29 | "target": "esnext", 30 | /* Completeness */ 31 | "skipLibCheck": true, 32 | "paths": { 33 | "vue-google-charts": [ 34 | "src/index.ts" 35 | ] 36 | } 37 | }, 38 | "include": [ 39 | "src" 40 | ], 41 | "exclude": [ 42 | "dist" 43 | ] 44 | } 45 | --------------------------------------------------------------------------------