feat(transit): add transit viz to dashboards - type 'transit'

src/charts/allCharts.ts

@@ -1,26 +1,38 @@
 // add every chart type here.
 // the name of the import will be the chart "type" in YAML.
 
-// plotly charts:
+// resizable charts:
 import area from './area.vue'
 import bar from './bar.vue'
 import bubble from './bubble.vue'
 import heatmap from './heatmap.vue'
+import hexagons from './hexagons.vue'
 import line from './line.vue'
 import pie from './pie.vue'
 import scatter from './scatter.vue'
+import transit from './transit.vue'
 
 // all other dashboard viz components:
 import flowmap from './flowmap.vue'
-import hexagons from './hexagons.vue'
 import links from './links.vue'
 import sankey from './sankey.vue'
 import map from './map-polygons.vue'
 
 // ----- EXPORT CHARTS HERE ---------------------------------------------------
 
-// export all plotly charts here - be sure to put plotly charts separately!
-export const plotlyCharts = { area, bar, bubble, heatmap, hexagons, line, pie, sankey, scatter }
+// export all resizable charts here - be sure to put plotly charts separately!
+export const plotlyCharts = {
+  area,
+  bar,
+  bubble,
+  heatmap,
+  hexagons,
+  line,
+  pie,
+  sankey,
+  transit,
+  scatter,
+}
 
 // export all remaining charts here:
 export default Object.assign({ flowmap, links, map }, plotlyCharts)

src/charts/transit.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+transit-demand.deck-map(
+  :root="fileSystemConfig.slug"
+  :subfolder="subfolder"
+  :config="config"
+  :thumbnail="false"
+)
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+
+import { FileSystemConfig } from '@/Globals'
+import TransitDemand from '@/plugins/transit-demand/TransitDemand.vue'
+
+@Component({ components: { TransitDemand } })
+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
+
+  private mounted() {
+    this.$emit('isLoaded')
+  }
+}
+</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;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>

src/plugins/transit-demand/LegendBox.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-#legend-container
-  h3 Legend
+.legend-container
+  p.control-label Legend
   .legend-item(v-for="item in rows" :key="item[0]")
     .legend-col-1(:style="{'background-color': item[0]}")
     span.legend-col-2 {{ item[1] }}
@@ -23,10 +23,9 @@ export default class LegendBox extends Vue {
 <style scoped lang="scss">
 @import '@/styles.scss';
 
-#legend-container {
+.legend-container {
   display: flex;
   flex-direction: column;
-  padding: 0.5rem 0.5rem;
   color: var(--text);
 
   h3 {
@@ -35,6 +34,12 @@ export default class LegendBox extends Vue {
   }
 }
 
+.control-label {
+  margin: 0 0;
+  font-size: 0.8rem;
+  font-weight: bold;
+}
+
 .legend-item {
   display: flex;
   flex-direction: row;