feat(sankey): Sankey learned "only show changes" and can be embedded …

…in dashboards

Chart type "sankey" now works, simply specify the csv file.

src/charts/allCharts.ts

@@ -13,11 +13,15 @@ import scatter from './scatter.vue'
 // all other dashboard viz components:
 import flowmap from './flowmap.vue'
 import links from './links.vue'
+import sankey from './sankey.vue'
 import map from './map-polygons.vue'
 
-// export the charts here - be sure to put plotly charts separately!
+// ----- EXPORT CHARTS HERE ---------------------------------------------------
 
-export const plotlyCharts = { area, bar, bubble, heatmap, line, pie, scatter }
+// export all plotly charts here - be sure to put plotly charts separately!
+export const plotlyCharts = { area, bar, bubble, heatmap, line, pie, sankey, scatter }
+
+// export all remaining charts here:
 export default Object.assign({ flowmap, links, map }, plotlyCharts)
 
 // ----- HELPER FUNCTIONS -----------------------------------------------------

src/charts/links.vue

@@ -22,9 +22,9 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) config!: any
 
   private mounted() {
-    console.log(this.fileSystemConfig)
-    console.log('subfolder', this.subfolder)
-    console.log('config', this.config)
+    // console.log(this.fileSystemConfig)
+    // console.log('subfolder', this.subfolder)
+    // console.log('config', this.config)
     this.$emit('isLoaded')
   }
 }

src/charts/sankey.vue

@@ -0,0 +1,52 @@
+<template lang="pug">
+sankey-diagram.deck-map(
+  :root="fileSystemConfig.slug"
+  :subfolder="subfolder"
+  :config="config"
+  :thumbnail="false"
+  :dimensions="dimensions"
+)
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+
+import { FileSystemConfig } from '@/Globals'
+import SankeyDiagram from '@/plugins/sankey/SankeyDiagram.vue'
+
+@Component({ components: { SankeyDiagram } })
+export default class VueComponent extends Vue {
+  @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
+  @Prop({ required: true }) subfolder!: string
+  @Prop({ required: true }) files!: string[]
+  @Prop({ required: true }) config!: any
+  @Prop() cardId!: string
+
+  private dimensions: { width: number; height: number } = { width: 0, height: 0 }
+
+  private mounted() {
+    this.$emit('dimension-resizer', { id: this.cardId, resizer: this.changeDimensions })
+    this.$emit('isLoaded')
+  }
+
+  /** Our dashboard system tells us procedurally when we have a new dimension */
+  private changeDimensions(dimensions: { width: number; height: number }) {
+    this.dimensions = dimensions
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.deck-map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+</style>