allow multiple metrics in dropdown from config.display.fill.values

src/charts/map-polygons.vue

@@ -13,29 +13,43 @@
     @update="changeConfiguration")
 
   .config-bar
-    img.img-button(@click="useCircles=false" src="../assets/btn-polygons.jpg" title="Shapes")
-    img.img-button(@click="useCircles=true" src="../assets/btn-circles.jpg" title="Circles")
+    .filter
+      p Display
+      b-dropdown(v-model="datasetValuesColumn"
+        aria-role="list" position="is-top-right" :mobile-modal="false" :close-on-click="true"
+        @change="handleUserSelectedNewMetric"
+      )
+        template(#trigger="{ active }")
+          b-button.is-warning(:label="datasetValuesColumn" :icon-right="active ? 'menu-up' : 'menu-down'")
+
+        b-dropdown-item(v-for="option in datasetValuesColumnOptions"
+          :key="option" :value="option" aria-role="listitem") {{ option }}
 
     .filter(v-for="filter in Object.keys(filters)")
-      p: b {{ filter }}
+      p {{ filter }}
       b-dropdown(
         multiple
         v-model="filters[filter].active"
         @change="handleUserSelectedNewFilters(filter)"
         aria-role="list" position="is-top-right" :mobile-modal="false" :close-on-click="true"
       )
         template(#trigger="{ active }")
-          b-button.is-primary.is-outlined(
+          b-button.is-primary(
+            :type="filters[filter].active.length ? '' : 'is-outlined'"
             :label="filterLabel(filter)"
             :icon-right="active ? 'menu-up' : 'menu-down'"
           )
 
         b-dropdown-item(v-for="option in filters[filter].options"
           :key="option" :value="option" aria-role="listitem") {{ option }}
 
-    input.slider.is-small.is-fullwidth.is-danger(
+    input.slider.is-small.is-fullwidth.is-primary(
       id="sliderOpacity" min="0" max="100" v-model="sliderOpacity" step="5" type="range")
 
+    .map-type-buttons
+      img.img-button(@click="useCircles=false" src="../assets/btn-polygons.jpg" title="Shapes")
+      img.img-button(@click="useCircles=true" src="../assets/btn-circles.jpg" title="Circles")
+
 </template>
 
 <script lang="ts">
@@ -366,12 +380,18 @@ export default class VueComponent extends Vue {
     return label
   }
 
+  private handleUserSelectedNewMetric() {
+    console.log('METRIC', this.datasetValuesColumn)
+    this.filterListener()
+  }
+
   private handleUserSelectedNewFilters(column: string) {
     const active = this.filters[column].active
     this.datamanager.setFilter(this.datasetFilename, column, active)
   }
 
   private datasetValuesColumn = ''
+  private datasetValuesColumnOptions = []
 
   private updateChart() {
     // dataRows come back as an object of columnName: values[].
@@ -388,20 +408,26 @@ export default class VueComponent extends Vue {
     const datasetJoinCol = this.datasetJoinColumn // used to be this.config.display.fill.join
     if (!datasetJoinCol) throw Error(`Cannot find column ${datasetJoinCol}`)
 
-    // value columns can be a string; a string,with,commas; or an array
+    // value columns can be a string; a string,with,commas; or an array; or missing!
     let valueColumns = this.config.display.fill.values
     let datasetValuesCol = valueColumns
 
     // figure out first (only?) data column to be displayed
     if (Array.isArray(valueColumns)) {
       datasetValuesCol = valueColumns[0] // TODO for now
     } else if (valueColumns.indexOf(',') > -1) {
+      // comma,separated,list:
       valueColumns = valueColumns.split(',').map((f: any) => f.trim())
       datasetValuesCol = valueColumns[0] // TODO for now
+    } else {
+      // just one item
+      valueColumns = [valueColumns]
+      datasetValuesCol = valueColumns[0] // TODO for now
     }
 
     if (!datasetValuesCol) throw Error(`Need to specify column for data values`)
     this.datasetValuesColumn = datasetValuesCol
+    this.datasetValuesColumnOptions = valueColumns
 
     this.setupFilters()
 
@@ -492,9 +518,12 @@ export default class VueComponent extends Vue {
     width: 8rem;
   }
 
+  .map-type-buttons {
+    margin: auto 0 0 0.5rem;
+  }
+
   .img-button {
-    margin-top: auto;
-    margin-right: 0.15rem;
+    margin: 0 0rem -5px 0.5rem;
     height: 2.3rem;
     width: 2.3rem;
     border: var(--borderThin);
@@ -506,7 +535,7 @@ export default class VueComponent extends Vue {
 }
 
 .filter {
-  margin-left: 0.5rem;
+  margin-right: 0.5rem;
   display: flex;
   flex-direction: column;
   -webkit-user-select: none;
@@ -517,6 +546,7 @@ export default class VueComponent extends Vue {
 
 .filter p {
   margin: -0.25rem 0 0 0;
+  font-weight: bold;
 }
 
 @media only screen and (max-width: 640px) {

src/components/PolygonAndCircleMap.vue

@@ -41,7 +41,6 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('props')
-  @Watch('bump')
   private handlePropsChanged() {
     if (this.layerManager) this.updateLayers()
   }
@@ -162,23 +161,27 @@ export default class VueComponent extends Vue {
             radiusMaxPixels: 250,
             radiusUnits: 'pixels',
             lineWidthMinPixels: 1,
+            getLineColor: this.props.dark ? [100, 100, 100] : [255, 255, 255],
             getPosition: (d: any) => d.geometry.coordinates,
             getRadius: (d: any) => 15 * Math.sqrt(d.properties.value / this.props.maxValue),
             getFillColor: (d: any) => {
               if (this.props.colors.length === 1) return colorsAsRGB[0]
-
               const v = d.properties[this.props.activeColumn]
               if (isNaN(v)) return this.props.dark ? [100, 100, 100] : [200, 200, 200]
-
               let ratio = v / this.props.maxValue
               if (this.props.expColors) ratio = Math.sqrt(ratio)
-
               return setColorBasedOnValue(ratio) as any
             },
-            getLineColor: this.props.dark ? [100, 100, 100] : [255, 255, 255],
-            parameters: {
-              depthTest: false,
+            updateTriggers: {
+              getFillColor: {
+                dark: this.props.dark,
+                colors: this.props.colors,
+                activeColumn: this.props.activeColumn,
+                maxValue: this.props.maxValue,
+              },
             },
+            transitions: { getFillColor: 250 },
+            parameters: { depthTest: false },
           })
         : new GeoJsonLayer({
             id: 'shapefileLayer',
@@ -191,23 +194,16 @@ export default class VueComponent extends Vue {
             opacity: 0.01 * this.props.opacity,
             autoHighlight: true,
             highlightColor: [255, 0, 200],
-            parameters: {
-              depthTest: false,
-            },
-
+            getLineWidth: 1,
             getLineColor: this.props.dark ? [96, 96, 96, 96] : [192, 192, 192, 64],
             getFillColor: (d: any) => {
               if (this.props.colors.length === 1) return colorsAsRGB[0]
-
               const v = d.properties[this.props.activeColumn]
               if (isNaN(v)) return this.props.dark ? [40, 40, 40] : [224, 224, 224, 128]
-
               let ratio = v / this.props.maxValue
               if (this.props.expColors) ratio = Math.sqrt(ratio)
-
               return setColorBasedOnValue(ratio) as any
             },
-            getLineWidth: 1,
             getTooltip: this.getTooltip,
             updateTriggers: {
               getFillColor: {
@@ -217,10 +213,8 @@ export default class VueComponent extends Vue {
                 maxValue: this.props.maxValue,
               },
             },
-
-            transitions: {
-              getFillColor: 250,
-            },
+            transitions: { getFillColor: 250 },
+            parameters: { depthTest: false },
           })
     )
   }

src/components/viz-configurator/Fill.vue

@@ -83,7 +83,7 @@ export default class VueComponent extends Vue {
     { ramp: 'Viridis', style: style.sequential, reverse: true }, // , reverse: true },
     { ramp: 'Plasma', style: style.sequential, reverse: true }, // , reverse: true },
     { ramp: 'Blues', style: style.sequential }, // , reverse: true },
-    // { ramp: 'Greens', style: style.sequential }, // , reverse: true },
+    { ramp: 'Greens', style: style.sequential }, // , reverse: true },
     { ramp: 'Purples', style: style.sequential }, // , reverse: true },
     { ramp: 'Oranges', style: style.sequential }, // , reverse: true },
     { ramp: 'PRGn', style: style.diverging, reverse: true },
@@ -135,7 +135,7 @@ export default class VueComponent extends Vue {
       }
     } else if (datasetIds.length) {
       const secondColumn = Object.keys(this.datasets[datasetIds[0]])[1]
-      console.log(secondColumn)
+      // console.log(secondColumn)
       if (secondColumn) this.dataColumn = `${datasetIds[0]}/${secondColumn}`
     }
   }

src/views/DashBoard.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 #dashboard.dashboard(:class="{wiide}")
   .dashboard-content(:class="{wiide}" :style="dashWidthCalculator")
-    .dashboard-header(v-if="!fullScreenCardId" :class="{wiide}")
+    .dashboard-header(v-if="!fullScreenCardId && (title + description)" :class="{wiide}")
       h2 {{ title }}
       p {{ description }}
 
@@ -320,11 +320,9 @@ export default class VueComponent extends Vue {
     let tag = '...'
 
     if (this.$store.state.locale === 'de') {
-      tag =
-        header[`${element}_de`] || header[`${element}`] || header[`${element}_en`] || 'Dashboard'
+      tag = header[`${element}_de`] || header[`${element}`] || header[`${element}_en`] || ''
     } else {
-      tag =
-        header[`${element}_en`] || header[`${element}`] || header[`${element}_de`] || 'Dashboard'
+      tag = header[`${element}_en`] || header[`${element}`] || header[`${element}_de`] || ''
     }
 
     return tag