├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .github └── workflows │ └── lint.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public └── index.html ├── screenshot.png ├── src ├── App.vue ├── MixedDataValue.vue ├── components │ ├── FieldLabel.vue │ ├── Pivot.vue │ └── PivotTable.vue ├── data-gdp.js ├── data.js ├── library-entry.js ├── library-plugin.js └── main.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | eslint: 7 | name: Run ESLint 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v1 11 | - name: Node.JS 10.x 12 | uses: actions/setup-node@v1 13 | with: 14 | node-version: "10.x" 15 | - name: Cache node modules 16 | uses: actions/cache@v1 17 | with: 18 | path: node_modules 19 | key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }} 20 | restore-keys: | 21 | ${{ runner.OS }}-build-${{ env.cache-name }}- 22 | ${{ runner.OS }}-build- 23 | ${{ runner.OS }}- 24 | - name: Install Node Dependencies 25 | run: npm install 26 | env: 27 | CI: TRUE 28 | - name: Test Code Linting 29 | run: npm run eslint:github-action 30 | # Continue to the next step even if this fails 31 | continue-on-error: true 32 | - name: Annotate Code Linting Results 33 | uses: ataylorme/eslint-annotate-action@1.1.2 34 | with: 35 | repo-token: "${{ secrets.GITHUB_TOKEN }}" 36 | report-json: "eslint_report.json" 37 | continue-on-error: true 38 | - name: Upload ESLint report 39 | uses: actions/upload-artifact@v1 40 | with: 41 | name: eslint_report.json 42 | path: eslint_report.json 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /library-dist 5 | /plugin-dist 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [1.1.7] - 2023-02-24 8 | ### Added 9 | - `Pivot` now emits update events on `available-field-keys`, `row-field-keys` and `col-field-keys` props 10 | - `Pivot` is now reactive to changes on `available-field-keys`, `row-field-keys` and `col-field-keys` props 11 | 12 | ## [1.1.6] - 2021-11-25 13 | ### Changed 14 | - `value` slot prop `labels` is now cached and should avoid updating component when a header is checked/unchecked. 15 | 16 | ## [1.1.5] - 2021-09-13 17 | ### Changed 18 | - Replaced `value` slot `row`/`col` slot props with `labels` slot prop 19 | This new slot prop gathers `row`/`col` and adds field data, allowing cell value rendering based on field keys. 20 | 21 | ## [1.1.4] - 2021-08-20 22 | ### Changed 23 | - Replaced custom `HashTable` with `ManyKeysMap` 24 | 25 | ### Added 26 | - `Pivot` and `PivotTable` have a new `reducerInitialValue` prop to allow complex reducers (same API as JS `Array.reduce()`) 27 | 28 | ## [1.1.3] - 2021-08-19 29 | ### Changed 30 | - Reduced build size by half by using `lodash-es` and importing only required functions 31 | 32 | ## [1.1.2] - 2021-08-16 33 | Nothing new - failed npm publish 1.1.1 34 | 35 | ## [1.1.1] - 2021-08-16 36 | ### Fixed 37 | - Replaced browser library `export default` with `export function install` 38 | - The project has no more lint issues 39 | 40 | ## [1.1.0] - 2021-08-13 41 | ### Changed 42 | - The project now uses vue-cli 3 instead of custom webpack config files 43 | - `Pivot` and `PivotTable` import changed: 44 | From: `import Pivot from '@marketconnect/vue-pivot-table'` 45 | To: `import { Pivot } from '@click2buy/vue-pivot-table'` 46 | 47 | ## [1.0.0] - 2020-03-27 48 | ### Changed 49 | - `Pivot` component `fields`, `row-fields` and `col-fields` props were replaced by a global `fields` prop and `available-field-keys`, `row-field-keys`, `col-field-keys` props to affect fields to each draggable area of the Pivot 50 | - Internal `rows`/`cols` now use Arrays instead of Objects with `row-${index}`/`col-${index}` keys, `valuesHashTable` keys were also updated 51 | - The `value` slot now receives `row`/`col` as Arrays 52 | 53 | ### Added 54 | - `Pivot`: dropdown on fields to allow user configuration: 55 | - Field header attributes filter 56 | - Field values filter 57 | - `Pivot` field label slot 58 | 59 | ## [0.3.0] - 2020-02-19 60 | ### Added 61 | - This CHANGELOG file to help keeping up with latest updates 62 | - `headerSlotsNames` and `footerSlotsNames` props on `fields` definition. This allows to generate multiple levels of header/footer for a single field. For example, for a "Country" field you can generate a header with the name, and a second header with the flag of the country. 63 | 64 | ## [0.2.1] - 2019-10-13 65 | ### Added 66 | - `col` and `row` params to the `value` slot to allow value customization based on specific column/row 67 | 68 | ## [0.1.0] - 2019-10-13 69 | ### Added 70 | - `computing` slot to display user feedback while the aggregations for table values are running 71 | 72 | ### Changed 73 | - Previous implementation was iterating over data multiple times, cols and rows are now computed at the same time as values (therefore iterating over data only once) 74 | - Values hash now uses a HashTable (class defined in a separate file), and the table keys are objects without required order 75 | - Cols and rows are now sorted in computed properties, and use [thenBy.js](https://github.com/Teun/thenBy.js) which improves readability 76 | - Computations are done in a task created with `setTimeout` (kind of dirty but no alternative) which avoids blocking js execution and allows user feedback 77 | 78 | ## [0.0.1] - 2018-09-06 79 | First release 80 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Market Connect 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NOT MAINTAINED 2 | 3 | This project is not maintained anymore. Maybe a Vue 3 version will be in the works in the future. Maybe not. 4 | 5 | # vue-pivot-table 6 | A vue component for pivot table 7 | 8 | ![vue-pivot-table screenshot](https://raw.githubusercontent.com/Click2Buy/vue-pivot-table/master/screenshot.png) 9 | 10 | [Live demo (jsfiddle)](https://jsfiddle.net/Owumaro/ezhp9fuc/) 11 | 12 | ## Install 13 | 14 | `npm install --save @click2buy/vue-pivot-table` 15 | 16 | ## Components 17 | 18 | This project provides 2 components: 19 | - `Pivot`: aggregation table with drag & drop user interface to configure rows/columns 20 | - `PivotTable`: aggregation table only 21 | 22 | While the `Pivot` component provides the full experience, the `PivotTable` can be used standalone if you need only a table. 23 | 24 | ## Browser 25 | 26 | ```js 27 | Vue.use(vuePivotTable) 28 | ``` 29 | 30 | ## Webpack 31 | 32 | ### `Pivot` 33 | 34 | #### Javascript 35 | 36 | ```js 37 | import { Pivot } from '@click2buy/vue-pivot-table' 38 | 39 | export default { 40 | components: { Pivot }, 41 | 42 | // Basic data for component props 43 | data: () => { 44 | return { 45 | data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]), 46 | fields: [{ 47 | key: 'x', 48 | getter: item => item.x, 49 | label: 'X' 50 | }, { 51 | key: 'y', 52 | getter: item => item.y, 53 | label: 'Y' 54 | }, { 55 | key: 'z', 56 | getter: item => item.z, 57 | label: 'Z' 58 | }], 59 | rowFieldKeys: ['y', 'z'], 60 | colFieldKeys: ['x'], 61 | reducer: (sum, item) => sum + 1 62 | } 63 | } 64 | ... 65 | } 66 | ``` 67 | 68 | #### HTML 69 | 70 | ```html 71 | 72 | 73 | 74 | ``` 75 | 76 | ### `PivotTable` 77 | 78 | #### Javascript 79 | 80 | ```js 81 | import { PivotTable } from '@click2buy/vue-pivot-table' 82 | 83 | export default { 84 | components: { PivotTable }, 85 | 86 | // Basic data for component props 87 | data: () => { 88 | return { 89 | data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]), 90 | rowFields: [{ 91 | getter: item => item.y, 92 | label: 'Y' 93 | }, { 94 | getter: item => item.z, 95 | label: 'Z' 96 | }], 97 | colFields: [{ 98 | getter: item => item.x, 99 | label: 'X' 100 | }], 101 | reducer: (sum, item) => sum + 1 102 | } 103 | } 104 | ... 105 | } 106 | ``` 107 | 108 | #### HTML 109 | 110 | ```html 111 | 112 | 113 | 114 | ``` 115 | 116 | ## API 117 | 118 | ### `Pivot` component 119 | 120 | #### Properties 121 | 122 | Property | Type | Default | Description 123 | ---------|------|---------|------------ 124 | `data` | `Object Array` | `[]` | Dataset to use in the pivot 125 | `fields` | `Array` | `[]` | Fields definition (see [`fields` element format](#fields-element-format)) 126 | `available-field-keys` | `Array` | `[]` | Keys of the fields to show as "available" by default 127 | `row-field-keys` | `Array` | `[]` | Keys of the fields to use as rows by default 128 | `col-field-keys` | `Array` | `[]` | Keys of the fields to use as columns by default 129 | `reducer` | `function` | `(sum, item) => sum + 1` | Function applied to reduce `data` in the pivot table 130 | `reducer-initial-value` | any | `0` | Initial value used when applying reducer 131 | `no-data-warning-text` | `String` | `'No data to display.'` | Text to display when `data` is empty 132 | `is-data-loading` | `Boolean` | `false` | Display a loading content instead of the table when the value is `true` (see slots for customization) 133 | `default-show-settings` | `Boolean` | `true` | Show settings at component creation 134 | `available-fields-label-text` | `String` | `'Available fields'` | Text for available fields drag area 135 | `rows-label-text` | `String` | `'Rows'` | Text for the rows drag area 136 | `cols-label-text` | `String` | `'Columns'` | Text for the columns drag area 137 | `hide-settings-text` | `String` | `'Hide settings'` | Text for the "hide settings" button 138 | `show-settings-text` | `String` | `'Show settings'` | Text for the "show settings" button 139 | `select-all-text` | `String` | `'Select all'` | Text for the "Select all" button in the dropdown value filter 140 | `unselect-all-text` | `String` | `'Unselect all'` | Text for the "Unselect all" button in the dropdown value filter 141 | 142 | ##### `fields` element format 143 | 144 | Property | Type | Description 145 | ---------|------|------------ 146 | `key` | `String` | A unique string value to identify the field 147 | `label` | `String` | Text to display in the draggable element 148 | `labelSlotName` | `String` | Optional - Name of the slot to use to format the label content 149 | `getter` | `Function` | Function to apply on an element of `data` to get the field value 150 | `sort` | `Function` | Optional - Function to order fields in the pivot table header ; if no value is provided, [javascript-natural-sort](https://github.com/Bill4Time/javascript-natural-sort) will be applied 151 | `showHeader` | `Boolean` | Optional (default: `true`) - Whether the header should be displayed in the pivot table 152 | `showFooter` | `Boolean` | Optional (default: `false`) - Whether the footer should be displayed in the pivot table 153 | `headerSlotName` | `String` | Optional - Name of the slot to use to format the header in the pivot table ; if no slot name is provided, the value will be displayed as found in data 154 | `headerSlotNames` | `String Array` | Optional - Names of the slots to use to format the headers in the pivot table 155 | `headers` | `Array` | Optional - Definition of the headers (see [`headers` element format](#headers-element-format)) 156 | `footerSlotName` | `String` | Optional - Same as above for the footer 157 | `footerSlotNames` | `String Array` | Optional - Same as above for the footer 158 | `headerAttributeFilter` | `Boolean` | Optional (default: `false`) - Activate dropdown to filter field header attributes 159 | `valueFilter` | `Boolean` | Optional (default: `false`) - Activate dropdown to filter field values 160 | `valueFilterSlotName` | `String` | Optional - Name of the slot to use to format the values in the field values selection dropdown 161 | 162 | ##### `headers` element format 163 | 164 | Property | Type | Description 165 | ---------|------|------------ 166 | `slotName` | `String` | Name of the slot to use to format the header in the pivot table 167 | `label` | `String` | If `headerAttributeFilter` is activated, in the field dropdown: label to display next to the checkbox 168 | `checked` | `Boolean` | If `headerAttributeFilter` is activated, in the field dropdown: default checkbox value 169 | 170 | #### Slots 171 | 172 | Slot Name | Description | Scope 173 | ----------|-------------|------ 174 | `` | Content displayed in the field draggable label 175 | `` | Table header content for a field, referenced from the `field` `headerSlotName` property | `{ value }` 176 | `` | If field `valueFilter` prop is set to `true`: content in the menu next to the checkbox | `{ value }` 177 | `value` | Table cell content | `{ value, row, col }` (see [`value` slot scope](#value-slot-scope)) 178 | `loading` | Content displayed while `data-is-loading` prop is set to `true` 179 | `computing` | Content displayed while table values are being loaded 180 | 181 | ##### `value` slot scope 182 | 183 | Property | Type | Description 184 | ---------|------|------------ 185 | `value` | `Number` | Value of the cell 186 | `labels` | `Array` | An array of objects corresponding to row/col labels - Each object has 2 props `field`/`value` with label field/value 187 | 188 | ### `PivotTable` component 189 | 190 | #### Properties 191 | 192 | Property | Type | Default | Description 193 | ---------|------|---------|------------ 194 | `data` | `Object Array` | `[]` | Dataset to use in the pivot 195 | `row-fields` | `Array` | `[]` | Fields to use as rows by default (see [`row-fields`/`col-fields` element format](#row-fields-col-fields-element-format)) 196 | `col-fields` | `Array` | `[]` | Fields to use as columns by default (see [`row-fields`/`col-fields` element format](#row-fields-col-fields-element-format)) 197 | `reducer` | `function` | `(sum, item) => sum + 1` | Function applied to reduce `data` in the pivot table 198 | `reducer-initial-value` | any | `0` | Initial value used when applying reducer 199 | `no-data-warning-text` | `String` | `'No data to display.'` | Text to display when `data` is empty 200 | `is-data-loading` | `Boolean` | `false` | Display a loading content instead of the table when the value is `true` (see slots for customization) 201 | 202 | ##### `row-fields`/`col-fields` element format 203 | 204 | Property | Type | Description 205 | ---------|------|------------ 206 | `getter` | `Function` | Function to apply on an element of `data` to get the field value 207 | `sort` | `Function` | Optional - Function to order fields in the pivot table header ; if no value is provided, [javascript-natural-sort](https://github.com/Bill4Time/javascript-natural-sort) will be applied 208 | `valuesFiltered` | `Set` | Optional - A set of values to filter displayed rows/columns 209 | `showHeader` | `Boolean` | Optional (default: `true`) - Whether the header should be displayed in the pivot table 210 | `showFooter` | `Boolean` | Optional (default: `false`) - Whether the footer should be displayed in the pivot table 211 | `headerSlotName` | `String` | Optional - Name of the slot to use to format the header in the pivot table ; if no slot name is provided, the value will be displayed as found in data 212 | `headerSlotNames` | `String Array` | Optional - Names of the slots to use to format the headers in the pivot table 213 | `footerSlotName` | `String` | Optional - Same as above for the footer 214 | `footerSlotNames` | `String Array` | Optional - Same as above for the footer 215 | 216 | #### Slots 217 | 218 | Slot Name | Description | Scope 219 | ----------|-------------|------ 220 | `` | Table header content for a field, referenced from `row-field`/`col-field` `headerSlotName` property | `{ value }` 221 | `value` | Table cell content | `{ value, row, col }` (see [`value` slot scope](#value-slot-scope-1)) 222 | `loading` | Content displayed while `data-is-loading` prop is set to `true` 223 | `computing` | Content displayed while table values are being loaded 224 | 225 | ##### `value` slot scope 226 | 227 | Property | Type | Description 228 | ---------|------|------------ 229 | `value` | `Number` | Value of the cell 230 | `row` | `Array` | Row values of the cell 231 | `col` | `Array` | Column values of the cell 232 | 233 | Note: if your final table is too large and you use a component in the `value` slot, you might consider using a [functional component](https://fr.vuejs.org/v2/guide/render-function.html) to improve performance. 234 | 235 | ### Large datasets 236 | 237 | If this component is used with large datasets, consider applying `Object.freeze` on your `data` object to avoid useless change tracking on each data element. 238 | 239 | See https://vuejs.org/v2/guide/instance.html#Data-and-Methods. 240 | 241 | ## Build 242 | 243 | ``` bash 244 | # Install dependencies 245 | npm install 246 | 247 | # Serve with hot reload at localhost:8080 248 | npm run serve 249 | 250 | # Build js libraries 251 | npm run build-lib 252 | ``` 253 | 254 | ## Thanks 255 | 256 | - [FontAwesome](https://www.fontawesome.com/) ([license](https://fontawesome.com/license)) 257 | - [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable) 258 | - https://github.com/plotly/react-pivottable 259 | - https://github.com/nicolaskruchten/pivottable 260 | - https://dhtmlx.com/docs/products/dhtmlxPivot/ -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@click2buy/vue-pivot-table", 3 | "description": "A vue component for pivot table", 4 | "private": false, 5 | "version": "1.1.7", 6 | "author": "Click2Buy", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/Click2Buy/vue-pivot-table" 11 | }, 12 | "main": "library-dist/vue-pivot-table.common.js", 13 | "files": [ 14 | "library-dist", 15 | "plugin-dist", 16 | "src" 17 | ], 18 | "scripts": { 19 | "serve": "vue-cli-service serve", 20 | "build": "vue-cli-service build", 21 | "build-lib": "npm run build-lib:library && npm run build-lib:plugin", 22 | "build-lib:library": "vue-cli-service build --target lib --name vuePivotTable --filename vue-pivot-table src/library-entry.js --dest library-dist/", 23 | "build-lib:plugin": "vue-cli-service build --target lib --name vuePivotTable --filename vue-pivot-table src/library-plugin.js --dest plugin-dist/", 24 | "lint": "vue-cli-service lint", 25 | "eslint:github-action": "eslint --output-file eslint_report.json --format json src --ext .js,.vue", 26 | "prepublishOnly": "npm run build-lib" 27 | }, 28 | "dependencies": { 29 | "core-js": "^3.6.5", 30 | "vue": "^2.6.11", 31 | "vuedraggable": "^2.24.3" 32 | }, 33 | "devDependencies": { 34 | "@vue/cli-plugin-babel": "~4.5.0", 35 | "@vue/cli-plugin-eslint": "~4.5.0", 36 | "@vue/cli-service": "~4.5.0", 37 | "babel-eslint": "^10.1.0", 38 | "bootstrap": "^4.6.0", 39 | "eslint": "^6.7.2", 40 | "eslint-plugin-vue": "^6.2.2", 41 | "javascript-natural-sort": "^0.7.1", 42 | "lodash-es": "^4.17.21", 43 | "many-keys-map": "^1.0.3", 44 | "sass": "^1.26.5", 45 | "sass-loader": "^8.0.2", 46 | "thenby": "^1.3.4", 47 | "vue-template-compiler": "^2.6.11" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Click2Buy/vue-pivot-table/86e53a0594bed40bfb47393f4cccbf3fa51eb63e/screenshot.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 123 | 124 | 292 | 293 | 331 | -------------------------------------------------------------------------------- /src/MixedDataValue.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 44 | -------------------------------------------------------------------------------- /src/components/FieldLabel.vue: -------------------------------------------------------------------------------- 1 | 95 | 96 | 153 | 154 | 201 | -------------------------------------------------------------------------------- /src/components/Pivot.vue: -------------------------------------------------------------------------------- 1 | 119 | 120 | 373 | 374 | 438 | -------------------------------------------------------------------------------- /src/components/PivotTable.vue: -------------------------------------------------------------------------------- 1 | 220 | 221 | 546 | 547 | 552 | -------------------------------------------------------------------------------- /src/data-gdp.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | {"country": "United States", "year": 2010, "count": 309883620, "gdp": 14992052727000}, 3 | {"country": "United States", "year": 2011, "count": 312392160, "gdp": 15224554803574.9}, 4 | {"country": "United States", "year": 2012, "count": 311703680, "gdp": 15567038144703.4}, 5 | {"country": "China", "year": 2010, "count": 1340968748, "gdp": 6087163874510.73}, 6 | {"country": "China", "year": 2011, "count": 1348174471, "gdp": 6668538680617.58}, 7 | {"country": "China", "year": 2012, "count": 1355386937, "gdp": 7192934987438.43}, 8 | {"country": "India", "year": 2010, "count": 1230984478, "gdp": 1675615335600.56}, 9 | {"country": "India", "year": 2011, "count": 1247445983, "gdp": 1763439613551.83}, 10 | {"country": "India", "year": 2012, "count": 1263589615, "gdp": 1859659734290.44}, 11 | {"country": "France", "year": 2010, "count": 62961136, "gdp": 2642609548930.36}, 12 | {"country": "France", "year": 2011, "count": 63268405, "gdp": 2700554065228.66}, 13 | {"country": "France", "year": 2012, "count": 63561798, "gdp": 2709010438478.52}, 14 | {"country": "Australia", "year": 2010, "count": 22342398, "gdp": 1146138465603.81}, 15 | {"country": "Australia", "year": 2011, "count": 22620554, "gdp": 1174365063005.45}, 16 | {"country": "Australia", "year": 2012, "count": 22683573, "gdp": 1220378598873.43} 17 | ] 18 | -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | {"country": "United States", "year": 2010, "gender": "male", "count": 153295220}, 3 | {"country": "United States", "year": 2010, "gender": "female", "count": 156588400}, 4 | {"country": "United States", "year": 2011, "gender": "male", "count": 154591960}, 5 | {"country": "United States", "year": 2011, "gender": "female", "count": 157800200}, 6 | {"country": "United States", "year": 2012, "gender": "male", "count": 155851840}, 7 | {"country": "United States", "year": 2012, "gender": "female", "count": 158944800}, 8 | {"country": "China", "year": 2010, "gender": "male", "count": 690256342}, 9 | {"country": "China", "year": 2010, "gender": "female", "count": 650712406}, 10 | {"country": "China", "year": 2011, "gender": "male", "count": 694106441}, 11 | {"country": "China", "year": 2011, "gender": "female", "count": 654068030}, 12 | {"country": "China", "year": 2012, "gender": "male", "count": 697964288}, 13 | {"country": "China", "year": 2012, "gender": "female", "count": 657422649}, 14 | /*{"country": "China", "year": 2013, "gender": "male", "count": 701775013}, 15 | {"country": "China", "year": 2013, "gender": "female", "count": 660739286}, 16 | {"country": "China", "year": 2014, "gender": "male", "count": 705465988}, 17 | {"country": "China", "year": 2014, "gender": "female", "count": 663969676}, 18 | {"country": "China", "year": 2015, "gender": "male", "count": 708977128}, 19 | {"country": "China", "year": 2015, "gender": "female", "count": 667071829}, 20 | {"country": "China", "year": 2016, "gender": "male", "count": 712290052}, 21 | {"country": "China", "year": 2016, "gender": "female", "count": 670033273}, 22 | {"country": "China", "year": 2017, "gender": "male", "count": 715392990}, 23 | {"country": "China", "year": 2017, "gender": "female", "count": 672839688}, 24 | {"country": "China", "year": 2018, "gender": "male", "count": 718240829}, 25 | {"country": "China", "year": 2018, "gender": "female", "count": 675445659},*/ 26 | {"country": "India", "year": 2010, "gender": "male", "count": 638354751}, 27 | {"country": "India", "year": 2010, "gender": "female", "count": 592629727}, 28 | {"country": "India", "year": 2011, "gender": "male", "count": 646873890}, 29 | {"country": "India", "year": 2011, "gender": "female", "count": 600572093}, 30 | {"country": "India", "year": 2012, "gender": "male", "count": 655193693}, 31 | {"country": "India", "year": 2012, "gender": "female", "count": 608395922}, 32 | {"country": "France", "year": 2010, "gender": "male", "count": 30675773}, 33 | {"country": "France", "year": 2010, "gender": "female", "count": 32285363}, 34 | {"country": "France", "year": 2011, "gender": "male", "count": 30815839}, 35 | {"country": "France", "year": 2011, "gender": "female", "count": 32452566}, 36 | {"country": "France", "year": 2012, "gender": "male", "count": 30948916}, 37 | {"country": "France", "year": 2012, "gender": "female", "count": 32612882}, 38 | {"country": "Australia", "year": 2010, "gender": "male", "count": 11124254}, 39 | {"country": "Australia", "year": 2010, "gender": "female", "count": 11218144}, 40 | {"country": "Australia", "year": 2011, "gender": "male", "count": 11260747}, 41 | {"country": "Australia", "year": 2011, "gender": "female", "count": 11359807}, 42 | {"country": "Australia", "year": 2012, "gender": "male", "count": 11280804}, 43 | {"country": "Australia", "year": 2012, "gender": "female", "count": 11402769} 44 | ] 45 | -------------------------------------------------------------------------------- /src/library-entry.js: -------------------------------------------------------------------------------- 1 | import Pivot from './components/Pivot.vue' 2 | import PivotTable from './components/PivotTable.vue' 3 | 4 | export { 5 | Pivot, 6 | PivotTable 7 | } 8 | 9 | export default { 10 | Pivot, 11 | PivotTable 12 | } 13 | -------------------------------------------------------------------------------- /src/library-plugin.js: -------------------------------------------------------------------------------- 1 | import Pivot from './components/Pivot.vue' 2 | import PivotTable from './components/PivotTable.vue' 3 | 4 | export function install(Vue) { 5 | Vue.component("Pivot", Pivot) 6 | Vue.component("PivotTable", PivotTable) 7 | } 8 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | css: { extract: false } 4 | } 5 | --------------------------------------------------------------------------------