fix issue #14 #17

Seungwoo321 · Jan 21, 2021 · 05038bd · 05038bd
1 parent 3fcbf66
commit 05038bd
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 64 deletions.
diff --git a/demo/example-vue-cli3/src/App.vue b/demo/example-vue-cli3/src/App.vue
@@ -10,20 +10,21 @@
         <small>Sample Dataset: Tips({{ filteredData.length }})</small>
       </div>
       <vue-pivottable-ui
-          :data="data"
-          :aggregatorName="aggregatorName"
-          :rendererName="rendererName"
-          :tableColorScaleGenerator="colorScaleGenerator"
-          :attributes="attributes"
-          :valueFilter="valueFilter"
-          :rows="rows"
-          :cols="cols"
-          :vals="vals"
-          :disabledFromDragDrop="disabledFromDragDrop"
-          :sortonlyFromDragDrop="sortonlyFromDragDrop"
-          :hiddenFromDragDrop="hiddenFromDragDrop"
-          :sorters="sorters"
-          @onRefresh="onRefresh"
+        v-model="config"
+        :data="data"
+        :aggregatorName="aggregatorName"
+        :rendererName="rendererName"
+        :tableColorScaleGenerator="colorScaleGenerator"
+        :attributes="attributes"
+        :valueFilter="valueFilter"
+        :rows="rows"
+        :cols="cols"
+        :vals="vals"
+        :disabledFromDragDrop="disabledFromDragDrop"
+        :sortonlyFromDragDrop="sortonlyFromDragDrop"
+        :hiddenFromDragDrop="hiddenFromDragDrop"
+        :sorters="sorters"
+        rowOrder="value_a_to_z"
       >
         <div v-if="loading" slot="output">
           loading...
@@ -35,6 +36,13 @@
           {{ name }}
         </template>
       </vue-pivottable-ui>
+      <!-- issue #14 -->
+      <!--
+      <div>
+        {{ Object.keys(config).length }}
+        {{ config }}
+      </div>
+      -->
     <footer>Released under the <a href="//github.com/seungwoo321/vue-pivottable/blob/master/LICENSE">MIT</a> license. <a href="//github.com/seungwoo321/vue-pivottable">View source.</a></footer>
   </div>
 </template>
@@ -58,6 +66,7 @@ export default {
           Dinner: true
         }
       },
+      config: {},
       PivotData: PivotUtilities.PivotData,
       filteredData: [],
       sortAs: PivotUtilities.sortAs,
@@ -85,13 +94,12 @@ export default {
       return {
         'Day of Week': this.sortAs(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'])
       }
+    },
+    unusedAttrs () {
+      return this.config.unusedAttrs
     }
   },
   methods: {
-    onRefresh (config) {
-      const PivotData = this.PivotData
-      this.filteredData = new PivotData(config).getFilteredData()
-    },
     colorScaleGenerator (values) {
       const scale = scaleLinear()
         .domain([0, Math.max.apply(null, values)])
@@ -102,21 +110,15 @@ export default {
     }
   },
   watch: {
-    pivotColumns: {
+    config: {
       handler (value, oldValue) {
-        if (value.length === oldValue.length) return
-        if (value.includes('Unused 1')) {
-          this.loading = true
-          setTimeout(() => {
-            this.data = tips2
-            this.loading = false
-          }, 1000)
+        const PivotData = this.PivotData
+        if (value.cols.indexOf('Unused 1') > -1 || value.rows.indexOf('Unused 1') > -1) {
+          this.data = tips2
+          this.filteredData = new PivotData(value).getFilteredData()
         } else {
-          this.loading = true
-          setTimeout(() => {
-            this.data = tips
-            this.loading = false
-          }, 1000)
+          this.data = tips
+          this.filteredData = new PivotData(value).getFilteredData()
         }
       },
       deep: true,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-pivottable",
-  "version": "0.3.78",
+  "version": "0.3.79",
   "main": "src/index.js",
   "files": [
     "dist",

diff --git a/src/PivottableUi.js b/src/PivottableUi.js
@@ -11,6 +11,10 @@ export default {
   mixins: [
     defaultProps
   ],
+  model: {
+    prop: 'config',
+    event: 'onRefresh'
+  },
   props: {
     hiddenAttributes: {
       type: Array,
@@ -53,6 +57,12 @@ export default {
     menuLimit: {
       type: Number,
       default: 500
+    },
+    config: {
+      type: Object,
+      default: function () {
+        return {}
+      }
     }
   },
   computed: {
@@ -86,33 +96,6 @@ export default {
             !this.hiddenFromDragDrop.includes(e)
         )
         .sort(sortAs(this.unusedOrder))
-    },
-    config () {
-      return {
-        derivedAttributes: this.derivedAttributes,
-        hiddenAttributes: this.hiddenAttributes,
-        hiddenFromAggregators: [],
-        hiddenFromDragDrop: [],
-        menuLimit: 500,
-        cols: [
-          'Party'
-        ],
-        rows: [
-          'Province'
-        ],
-        vals: [],
-        rowOrder: 'key_a_to_z',
-        colOrder: 'key_a_to_z',
-        exclusions: {},
-        inclusions: {},
-        unusedAttrsVertical: 85,
-        autoSortUnusedAttrs: false,
-        showUI: true,
-        sorters: {},
-        inclusionsInfo: {},
-        aggregatorName: 'Count',
-        rendererName: 'Table'
-      }
     }
   },
   data () {
@@ -179,17 +162,41 @@ export default {
     propsData: {
       handler (value) {
         if (this.pivotData.length === 0) return
+        const {
+          derivedAttributes,
+          hiddenAttributes,
+          hiddenFromAggregators,
+          hiddenFromDragDrop,
+          sortonlyFromDragDrop,
+          disabledFromDragDrop,
+          menuLimit,
+          rowLimit,
+          colLimit,
+          unusedAttrs,
+          sorters
+        } = this
         const props = {
-          ...this.$props,
+          derivedAttributes,
+          hiddenAttributes,
+          hiddenFromAggregators,
+          hiddenFromDragDrop,
+          sortonlyFromDragDrop,
+          disabledFromDragDrop,
+          menuLimit,
+          rowLimit,
+          colLimit,
+          attributes: value.attributes,
+          unusedAttrs,
+          sorters,
           data: this.materializedInput,
           rowOrder: value.rowOrder,
           colOrder: value.colOrder,
           valueFilter: value.valueFilter,
           rows: value.rows,
           cols: value.cols,
-          rendererName: this.rendererName,
-          aggregatorName: this.aggregatorName,
-          vals: this.vals
+          rendererName: value.rendererName,
+          aggregatorName: value.aggregatorName,
+          vals: value.vals
         }
         this.$emit('onRefresh', props)
       },
@@ -203,6 +210,10 @@ export default {
       this.propsData.vals = this.vals.slice()
       this.propsData.rows = this.rows
       this.propsData.cols = this.cols
+      this.propsData.rowOrder = this.rowOrder
+      this.propsData.colOrder = this.colOrder
+      this.propsData.rendererName = this.rendererName
+      this.propsData.aggregatorName = this.aggregatorName
       this.propsData.attributes = this.attributes.length > 0 ? this.attributes : Object.keys(this.attrValues)
       this.unusedOrder = this.unusedAttrs
       Object.keys(this.attrValues).map(this.assignValue)
@@ -235,7 +246,7 @@ export default {
       const attrValues = {}
       const materializedInput = []
       let recordsProcessed = 0
-      PivotData.forEachRecord(this.data, this.derivedAttributes, function (record) {
+      PivotData.forEachRecord(this.pivotData, this.derivedAttributes, function (record) {
         materializedInput.push(record)
         for (const attr of Object.keys(record)) {
           if (!(attr in attrValues)) {