Add metric drilldown

client/web/compose/src/components/PageBlocks/MetricBase.vue

@@ -21,6 +21,8 @@
           v-for="(v, i) in formatResponse(m, mi)"
           :key="i"
           class="w-100 h-100 px-2 py-1"
+          :class="m.drillDown.enabled ? 'pointer' : ''"
+          @click="drillDown(m, mi)"
         >
           <!-- <h3 :style="genStyle(m.labelStyle)">
             {{ v.label }}
@@ -40,7 +42,7 @@ import base from './base'
 import numeral from 'numeral'
 import moment from 'moment'
 import MetricItem from './Metric/Item'
-import { NoID } from '@cortezaproject/corteza-js'
+import { NoID, compose } from '@cortezaproject/corteza-js'
 import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
@@ -78,6 +80,7 @@ export default {
   mounted () {
     this.$root.$on('metric.update', this.refresh)
     this.$root.$on(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
+    this.$root.$on('drill-down-chart', this.drillDown)
   },
 
   beforeDestroy () {
@@ -150,7 +153,49 @@ export default {
         this.processing = false
       }
     },
+    /**
+     *
+     * @param {*} name
+     * Based on drill down configuration, either changes the linked block on the page
+     * or opens it in a modal wit the filter and dimensions from the chart and the clicked value
+     */
+    drillDown ({ label: name, filter, moduleID, drillDown }, metricIndex) {
+      if (!drillDown.enabled) {
+        return
+      }
 
+      if (drillDown.blockID) {
+        // Use linked record list to display drill down data
+        const { pageID = NoID } = this.page
+        const { recordID = NoID } = this.record || {}
+        // Construct its uniqueID to identify it
+        const recordListUniqueID = [pageID, recordID, drillDown.blockID].map(v => v || NoID).join('-')
+        this.$root.$emit(`drill-down-recordList:${recordListUniqueID}`, filter)
+      } else {
+        // Open in modal
+        const metricID = `${this.block.blockID}-${name.replace(/\s+/g, '-').toLowerCase()}-${moduleID}-${metricIndex}`
+
+        const block = new compose.PageBlockRecordList({
+          title: name,
+          blockID: `drillDown-${metricID}`,
+          options: {
+            moduleID,
+            prefilter: filter,
+            presort: '',
+            hideRecordReminderButton: true,
+            hideRecordViewButton: false,
+            hideConfigureFieldsButton: false,
+            hideImportButton: true,
+            selectable: true,
+            allowExport: true,
+            perPage: 14,
+            showTotalCount: true,
+            magnifyOption: 'modal',
+          },
+        })
+        this.$root.$emit('magnify-page-block', { block })
+      }
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue

@@ -40,6 +40,8 @@
         </b-col>
       </b-row>
 
+      <hr>
+
       <b-row
         class="mt-3"
       >
@@ -242,6 +244,33 @@
                   class="mb-1"
                 />
               </b-form-group>
+
+              <b-form-group
+                :description="$t('metric.drillDown.description')"
+                label-class="d-flex align-items-center"
+                class="mb-1"
+              >
+                <template #label>
+                  {{ $t('metric.drillDown.label') }}
+                  <b-form-checkbox
+                    v-model="edit.drillDown.enabled"
+                    switch
+                    class="ml-1"
+                  />
+                </template>
+
+                <vue-select
+                  v-model="edit.drillDown.blockID"
+                  :options="drillDownOptions"
+                  :disabled="!edit.drillDown.enabled"
+                  :get-option-label="o => o.title || o.kind"
+                  :reduce="option => option.blockID"
+                  :clearable="true"
+                  :placeholder="$t('metric.drillDown.openInModal')"
+                  append-to-body
+                  class="block-selector bg-white w-100"
+                />
+              </b-form-group>
             </fieldset>
           </b-card>
 
@@ -297,7 +326,7 @@ import MStyle from './MStyle'
 import { mapGetters } from 'vuex'
 import MetricBase from '../MetricBase'
 import { VueSelect } from 'vue-select'
-import { compose } from '@cortezaproject/corteza-js'
+import { compose, NoID } from '@cortezaproject/corteza-js'
 
 export default {
   i18nOptions: {
@@ -367,6 +396,10 @@ export default {
         this.options.metrics = m
       },
     },
+
+    drillDownOptions () {
+      return this.page.blocks.filter(({ blockID, kind, options = {} }) => kind === 'RecordList' && blockID !== NoID && options.moduleID === this.edit.moduleID)
+    },
   },
 
   watch: {
@@ -400,6 +433,10 @@ export default {
         valueStyle: {
           backgroundColor: '#FFFFFF',
         },
+        drillDown: {
+          enabled: false,
+          blockID: '',
+        },
       }
       this.metrics.push(m)
       this.editMetric(m)

lib/js/src/compose/types/page-block/metric.ts

@@ -6,6 +6,11 @@ const kind = 'Metric'
 
 type Reporter = (p: ReporterParams) => Promise<any>
 
+interface DrillDown {
+  enabled: boolean;
+  blockID?: string;
+}
+
 interface ReporterParams {
   moduleID: string;
   filter?: string;
@@ -36,6 +41,7 @@ interface Metric {
   // @todo allow conditional styles; eg. if value is < 10 render with bold red text
   labelStyle?: Style;
   valueStyle?: Style;
+  drillDown: DrillDown;
 }
 
 interface Options {
@@ -68,7 +74,10 @@ export class PageBlockMetric extends PageBlock {
     Apply(this.options, o, Boolean, 'showRefresh')
     Apply(this.options, o, String, 'magnifyOption')
     if (o.metrics) {
-      this.options.metrics = o.metrics
+      this.options.metrics = o.metrics.map((m) => ({
+        ...m,
+        drillDown: m.drillDown || { enabled: false },
+      }))
     }
   }
 

locale/en/corteza-webapp-compose/block.yaml

@@ -185,6 +185,10 @@ iframe:
   srcLabel: URL to show in the iframe
 metric:
   defaultMetricLabel: Unnamed metric
+  drillDown:
+    label: Drill down
+    description: If a record list is selected, it will be used to display the drill down data. If no record list is selected the drill down data will be shown in a modal.
+    openInModal: Open in modal
   edit:
     bucketLabel: Bucket size
     bucketPlaceholder: Select a bucket size