Commit latest changes and obj loader.

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
-  presets: [
+  presets: ['@vue/cli-plugin-babel/preset'],
-    '@vue/cli-plugin-babel/preset'
+  exclude: [
+    /(Speckle.js\.). /
   ]
 }

package-lock.json

@@ -8,8 +8,8 @@
       "name": "speckle-revit-dashboard-app",
       "version": "0.1.0",
       "dependencies": {
-        "@speckle/objectloader": "^2.0.0",
+        "@speckle/objectloader": "2.0.3",
-        "@speckle/viewer": "^2.1.0",
+        "@speckle/viewer": "^2.1.1",
         "chart.js": "^2.9.4",
         "color-interpolate": "^1.0.5",
         "colorjs.io": "^0.0.3",
@@ -1494,14 +1494,14 @@
       "dev": true
     },
     "node_modules/@speckle/objectloader": {
-      "version": "2.0.0",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@speckle/objectloader/-/objectloader-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@speckle/objectloader/-/objectloader-2.0.3.tgz",
-      "integrity": "sha512-s1vH5gGzB5nJgrMFESaQqGJZuzVOAViKP1Xk9ZZV/zSP2b4vpkINMDC1WQvP9j2kqzCjQcQfkl+KqM6IuGvHgg=="
+      "integrity": "sha512-hSyJU0ktZOYbgjDtwrHHXowRu5L0lxoO32N2JPJUjURoy+M1ZpvJVGyT4jKG03HvH30j9rynja0PVjVoW9LdEw=="
     },
     "node_modules/@speckle/viewer": {
-      "version": "2.1.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@speckle/viewer/-/viewer-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@speckle/viewer/-/viewer-2.1.1.tgz",
-      "integrity": "sha512-JJXiP+dyXmIwLXi0wRM0qkFBPsgWb8f5+qfJINYrR6AuBNuQ+05O2qTAVKzCULmLpLi8Q/wlwIAHJA63gcutCw==",
+      "integrity": "sha512-OQWLfVIb79AJJYEl90kk9Ra/WcmpmDaloTgbkaRQOC0jMNmhFSFfrsFvfNX5G3BdhuDGKpbSwDx2j81xJucKJQ==",
       "dependencies": {
         "camera-controls": "^1.28.0",
         "lodash.debounce": "^4.0.8",
@@ -16942,14 +16942,14 @@
       "dev": true
     },
     "@speckle/objectloader": {
-      "version": "2.0.0",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@speckle/objectloader/-/objectloader-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@speckle/objectloader/-/objectloader-2.0.3.tgz",
-      "integrity": "sha512-s1vH5gGzB5nJgrMFESaQqGJZuzVOAViKP1Xk9ZZV/zSP2b4vpkINMDC1WQvP9j2kqzCjQcQfkl+KqM6IuGvHgg=="
+      "integrity": "sha512-hSyJU0ktZOYbgjDtwrHHXowRu5L0lxoO32N2JPJUjURoy+M1ZpvJVGyT4jKG03HvH30j9rynja0PVjVoW9LdEw=="
     },
     "@speckle/viewer": {
-      "version": "2.1.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@speckle/viewer/-/viewer-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@speckle/viewer/-/viewer-2.1.1.tgz",
-      "integrity": "sha512-JJXiP+dyXmIwLXi0wRM0qkFBPsgWb8f5+qfJINYrR6AuBNuQ+05O2qTAVKzCULmLpLi8Q/wlwIAHJA63gcutCw==",
+      "integrity": "sha512-OQWLfVIb79AJJYEl90kk9Ra/WcmpmDaloTgbkaRQOC0jMNmhFSFfrsFvfNX5G3BdhuDGKpbSwDx2j81xJucKJQ==",
       "requires": {
         "camera-controls": "^1.28.0",
         "lodash.debounce": "^4.0.8",

package.json

@@ -8,8 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@speckle/objectloader": "^2.0.0",
+    "@speckle/objectloader": "2.0.3",
-    "@speckle/viewer": "^2.1.0",
+    "@speckle/viewer": "^2.1.1",
     "chart.js": "^2.9.4",
     "color-interpolate": "^1.0.5",
     "colorjs.io": "^0.0.3",

src/components/ObjectLoaderTest.vue

@@ -0,0 +1,180 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col class="col-6">
+        <v-card max-height="500px">
+          <v-card-title>Elements Per Level/Category</v-card-title>
+          <v-card-text>
+            <horizontal-barchart v-if="objsByLevelData" :chart-data="objsByLevelData" :options="options"></horizontal-barchart>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col class="col-6">
+        <v-card max-height="500px">
+          <v-card-title>Available Families and Types</v-card-title>
+          <v-card-text>
+            <v-expansion-panels>
+              <v-expansion-panel
+                  v-for="(item,key) in availableFamTypes"
+                  :key="key"
+              >
+                <v-expansion-panel-header>
+                  {{ key }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                  <ul>
+                    <li v-for="(count, type) in item" :key="type">{{type}}: {{count}}</li>
+                  </ul>
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-card>
+          <v-card-title>Hi!</v-card-title>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+
+</template>
+
+<script>
+import ObjectLoader from '@speckle/objectloader'
+import HorizontalBarchart from "@/components/charts/HorizontalBarchart";
+import interpolate from "color-interpolate";
+
+export default {
+  name: "ObjectLoaderTest",
+  components: {HorizontalBarchart},
+  props: ["streamId", "objectId"],
+  data() {
+    return {
+      loader: null,
+      objsPerLevel: null,
+      colorRange: interpolate(["#047EFB","#4caf50"]),
+      availableLevels: null,
+      availableFamTypes: null,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            stacked: true,
+            categoryPercentage: 0.5,
+            barPercentage: 1
+          }],
+          yAxes: [{
+            stacked: true
+          }]
+        }
+      },
+    }
+  },
+  methods: {
+    getRandomInt() {
+      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+    }
+  },
+  computed: {
+    objsByLevelData() {
+      // Fast exit if no object has been set yet
+      if (!this.objsPerLevel) return null
+
+      var labels = []
+      var dataSets = []
+      var count = 0
+      // Loop through categories
+      for (const [key, value] of Object.entries(this.objsPerLevel)) {
+        // Create empty data set
+        let dataSet = {
+          label: key,
+          backgroundColor: this.colorRange(count / Object.keys(this.objsPerLevel).length),
+          data: []
+        }
+        count++
+        // Loop through levels on each category
+        for (const [lvlKey, lvlValue] of Object.entries(value)) {
+          // Append level name to labels if it hasn't already
+          if (labels.indexOf(lvlKey) === -1) labels.push(lvlKey)
+          // Push category count per level to dataset data
+          dataSet.data.push(Object.keys(lvlValue).length)
+        }
+        // Add dataset to list
+        dataSets.push(dataSet)
+      }
+      return {
+        labels,
+        datasets: dataSets,
+      }
+    }
+  },
+  async mounted() {
+    this.loader = new ObjectLoader({
+      serverUrl: process.env.VUE_APP_SERVER_URL,
+      streamId: this.streamId,
+      objectId: this.objectId
+    })
+    var total = 0
+    var count = 0
+
+    function shouldIgnore(obj) {
+      return obj.speckle_type.startsWith("Objects.Geometry") ||
+          obj.speckle_type.endsWith("DataChunk")
+    }
+
+    const objectsPerLevel = {}
+    const availableCategoriesAndTypes = {}
+    for await (let obj of this.loader.getObjectIterator()) {
+
+      if (!total) total = obj.totalChildrenCount
+      console.log(`Progress: ${count++}/${total}`)
+      // Objects per level
+      if (obj.level) {
+        var cat = obj.family || "None";
+        var lvl = obj.level.name
+        if (!objectsPerLevel[cat])
+          objectsPerLevel[cat] = {}
+        if (!objectsPerLevel[cat][lvl])
+          objectsPerLevel[cat][lvl] = {}
+
+        objectsPerLevel[cat][lvl][obj.elementId] = obj
+      }
+      // Available types and categories
+      if (obj.category) {
+        if (!availableCategoriesAndTypes[obj.category]) availableCategoriesAndTypes[obj.category] = {}
+        if (!availableCategoriesAndTypes[obj.category][obj.family]) {
+          availableCategoriesAndTypes[obj.category][obj.family] = 0
+        }
+        availableCategoriesAndTypes[obj.category][obj.family]++
+      }
+    }
+    this.objsPerLevel = objectsPerLevel
+    this.availableFamTypes = availableCategoriesAndTypes
+
+  }
+}
+</script>
+
+<style scoped>
+.scroll-box {
+  overflow: scroll;
+  padding: 1em;
+}
+.v-card {
+  display: flex !important;
+  flex-direction: column;
+}
+
+.v-card__text {
+  flex-grow: 1;
+  overflow: auto;
+}
+</style>

src/components/RevitCategories.vue

@@ -7,7 +7,7 @@
 
 <script>
 import RandomChart from "@/components/charts/RandomChart";
-import Doughnut from "@/components/charts/LineChart";
+import Doughnut from "@/components/charts/DoughnutChart";
 import interpolate from "color-interpolate"
 
 function componentToHex(c) {
@@ -27,8 +27,28 @@ export default {
     return {
       options: {
         responsive: true,
+        maintainAspectRatio: false,
         legend: {
-          display: false
+          position: 'right'
+        },
+        pieceLabel: {
+          // mode 'label', 'value' or 'percentage', default is 'percentage'
+          mode: 'value',
+
+          // precision for percentage, default is 0
+          precision: 0,
+
+          // font size, default is defaultFontSize
+          fontSize: 18,
+
+          // font color, default is '#fff'
+          fontColor: '#fff',
+
+          // font style, default is defaultFontStyle
+          fontStyle: 'bold',
+
+          // font family, default is defaultFontFamily
+          fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
         }
       },
       colorRange: interpolate(["#047EFB","#4caf50"])

src/components/RevitStream.vue

@@ -17,14 +17,15 @@
         </v-col>
       </v-row>
       <v-row>
-        <v-col class="col-6">
+        <v-col class="col-12">
           <revit-categories :revit-data="refObj"></revit-categories>
         </v-col>
-        <v-col class="col-6">
+        <v-col class="col-12">
-          <traverse-test :stream-id="streamId" :object="refObj"></traverse-test>
+<!--          <traverse-test :stream-id="streamId" :object="refObj"></traverse-test>-->
+          <object-loader-test v-if="selectedCommit" :stream-id="streamId" :object-id="selectedCommit.referencedObject"></object-loader-test>
         </v-col>
-        <v-col></v-col>
       </v-row>
+      <v-row><v-col></v-col></v-row>
     </v-container>
   </v-container>
 </template>
@@ -34,10 +35,11 @@ import {getStreamCommits, getStreamObject} from "@/speckleUtils";
 import RevitProjectInfo from "@/components/RevitProjectInfo";
 import RevitCategories from "@/components/RevitCategories";
 import TraverseTest from "@/components/TraverseTest";
+import ObjectLoaderTest from "@/components/ObjectLoaderTest";
 
 export default {
   name: "RevitStream",
-  components: {TraverseTest, RevitCategories, RevitProjectInfo},
+  components: {ObjectLoaderTest, RevitCategories, RevitProjectInfo},
   props: [ "streamId" ],
   data(){
     return {
@@ -114,4 +116,8 @@ export default {
   background-repeat: no-repeat;
   /*background-attachment: fixed;*/
 }
+.max-h {
+  max-height: 400px;
+  height: 400px;
+}
 </style>

src/components/charts/HorizontalBarchart.js

@@ -0,0 +1,13 @@
+import { HorizontalBar, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: HorizontalBar,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options)
+  }
+}

src/components/charts/RandomChart.vue

@@ -1,15 +1,15 @@
 <template>
   <div style="display: block">
-    <line-chart v-if="datacollection" :chart-data="datacollection" :options="options"></line-chart>
+    <doughnut-chart v-if="datacollection" :chart-data="datacollection" :options="options"></doughnut-chart>
   </div>
 </template>
 
 <script>
-import LineChart from './LineChart.js'
+import DoughnutChart from './DoughnutChart.js'
 
 export default {
   components: {
-    LineChart
+    DoughnutChart
   },
   data () {
     return {