Perspective

slanatech · Jul 21, 2020 · 1f31364 · 1f31364
1 parent 4077585
commit 1f31364
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 46 deletions.
diff --git a/public/data/superstore.arrow b/public/data/superstore.arrow
diff --git a/src/components/perspective/DbPerspective.vue b/src/components/perspective/DbPerspective.vue
@@ -1,6 +1,6 @@
 /* DbPerspective * Perspective viewer: https://perspective.finos.org/ */
 <template>
-  <perspective-viewer ref="pv" class="perspective-viewer-vaporwave" :columns="['Sales', 'Profit']" />
+  <perspective-viewer ref="pv" class="perspective-viewer-material-dark" :columns="['Sales', 'Profit']" />
 </template>
 <script>
 import '@finos/perspective-viewer';
@@ -27,35 +27,8 @@ export default {
       default: 0
     },
     data: {
-      type: Array,
-      default: () => []
-    },
-    autoDraw: Boolean,
-    barWidth: {
-      type: Number,
-      default: 8
-    },
-    growDuration: {
-      type: Number,
-      default: 0.5
-    },
-    gradient: {
-      type: Array,
-      default: () => ['#6fa8dc', '#42b983']
-    },
-    max: {
-      type: Number,
-      default: -Infinity
-    },
-    min: {
-      type: Number,
-      default: Infinity
-    },
-    height: Number,
-    width: Number,
-    padding: {
-      type: Number,
-      default: 8
+      type: Object,
+      default: null
     }
   },
   watch: {
@@ -69,20 +42,12 @@ export default {
     }
   },
   mounted() {
-    window.addEventListener('resize', this.handleResize);
-    this.initSize();
     // TEMP
     let p = this.$refs.pv;
-    p.load(this.testData);
+    p.load(this.data);
     let a = 1;
   },
   methods: {
-    initSize() {
-      this.$nextTick(() => {
-        this.lineHeight = this.height ? this.height : this.$refs.chart.clientHeight;
-        this.lineWidth = this.width ? this.width : this.$refs.chart.clientWidth - 10;
-      });
-    },
     handleResize(/*event*/) {
       this.$nextTick(() => {
         // TODO Something wrong with this -10 ... Reconsider

diff --git a/src/demo/views/Perspective.vue b/src/demo/views/Perspective.vue
@@ -16,7 +16,6 @@ export default {
   mixins: [demodashboard],
   data() {
     return {
-      isDark: false,
       dbdata: new DbData(),
       // Declare Dashboard Layout. Add widgets to your dashboard, specifying how many columns and rows
       // each widget takes. Dashblocks provides 16-columns CSS Grid layout.
@@ -37,14 +36,19 @@ export default {
       ready: false
     };
   },
-  mounted() {
-    this.$store.dispatch('setDashboardSpec', { spec: JSON.stringify(this.dbspec, null, '\t') });
-    this.initialize();
+  async mounted() {
+    await this.$store.dispatch('setDashboardSpec', { spec: JSON.stringify(this.dbspec, null, '\t') });
+    await this.initialize();
     this.ready = true;
   },
   methods: {
-    initialize: function() {
-      // TODO
+    initialize: async function() {
+      // Fetch data from Arrow file
+      const data = await fetch('data/superstore.arrow');
+      const dataBuffer = await data.arrayBuffer();
+      this.dbdata.setWData('wP', {
+        data: Object.freeze(dataBuffer)
+      });
     }
   }
 };

diff --git a/src/demo/views/Playground.vue b/src/demo/views/Playground.vue
@@ -37,7 +37,7 @@ export default {
       ready: false
     };
   },
-  mounted() {
+  async mounted() {
     this.$store.dispatch('setDashboardSpec', { spec: JSON.stringify(this.dbspec, null, '\t') });
     this.initialize();
     this.ready = true;