Fix additional report issues (#303)

Author: joanagmaia

frontend/src/i18n/en.js

@@ -550,7 +550,8 @@ const en = {
       },
       Sentiment: {
         averageSentiment: '[Sentiment] Average',
-        date: '[Sentiment] Date'
+        date: '[Sentiment] Date',
+        platform: '[Sentiment] Platform'
       }
     }
   },

frontend/src/modules/report/report-charts.js

@@ -95,15 +95,16 @@ export function chartOptions(widget, resultSet) {
   ) {
     const platforms = (
       resultSet ? resultSet.tablePivot() : []
-    ).map((p) => p['Activities.platform'])
+    )
+      .map((p) => p['Activities.platform'])
+      .filter((item, i, ar) => ar.indexOf(item) === i)
+
     let mappedColors = platforms.map((p) => {
-      if (p in platformColors) {
-        return platformColors[p]
-      }
-      return null
+      return platformColors[p]
     })
     const defaultColors =
       chartTypeOptions.colors || defaultChartOptions.colors
+
     let restColors = defaultColors.filter(
       (c) => !mappedColors.includes(c)
     )
@@ -115,6 +116,7 @@ export function chartOptions(widget, resultSet) {
       }
       return c
     })
+
     chartTypeOptions = {
       ...chartTypeOptions,
       colors: [...mappedColors, ...restColors]

frontend/src/modules/widget/components/cube/_query_builder/ChartType.vue

@@ -74,7 +74,9 @@ export default {
   computed: {
     model: {
       get() {
-        return this.chartType
+        return this.modelValue === 'line'
+          ? 'area'
+          : this.modelValue
       },
       set(value) {
         this.updateChartType(value)

frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue

@@ -13,7 +13,7 @@
         v-model="value"
         clearable
         filterable
-        :disabled="measures.length === 0"
+        :disabled="computedDimensions.length <= 1"
         class="w-full"
         @mouseleave="onSelectMouseLeave"
       >
@@ -94,7 +94,8 @@ export default {
           'Members.joinedAt',
           'Members.organization',
           'Tags.name'
-        ]
+        ],
+        'Sentiment.averageSentiment': ['Sentiment.platform']
       }
     }
   },
@@ -111,8 +112,26 @@ export default {
     },
     value: {
       get() {
+        const measure = this.measures[0]
+
+        // Select first option by default if measure changes
+        if (measure) {
+          const hasOption = this.measureDimensions[
+            measure.name
+          ]?.includes(this.dimensions?.[0]?.name)
+
+          if (
+            !hasOption &&
+            this.measureDimensions[measure.name]?.[0]
+          ) {
+            this.setDimensions([
+              this.measureDimensions[measure.name][0]
+            ])
+          }
+        }
+
         return this.translatedOptions(this.dimensions).map(
-          (i) => i.label
+          (i) => i.name
         )?.[0]
       },
       set(value) {

frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="widget-filter-container">
+  <div
+    v-if="!!computedFilters.length"
+    class="widget-filter-container"
+  >
     <div class="flex items-center justify-between">
       <div class="font-semibold text-sm">Filters</div>
     </div>
@@ -130,6 +133,28 @@
                 />
               </el-option-group>
             </el-select>
+            <el-select
+              v-else-if="filter.select === 'Members.score'"
+              v-model="filter.value"
+              class="third-filter"
+              placeholder="Value"
+              @change="
+                (value) =>
+                  handleFilterChange(
+                    'third-option',
+                    value,
+                    index
+                  )
+              "
+            >
+              <el-option
+                v-for="engagementLevel of computedEngagementLevelTypes"
+                :key="engagementLevel.label"
+                :label="engagementLevel.label"
+                :value="engagementLevel.label"
+                @mouseleave="onSelectMouseLeave"
+              />
+            </el-select>
             <el-input
               v-else
               v-model="filter.value"
@@ -180,8 +205,10 @@ import { onSelectMouseLeave } from '@/utils/select'
 import { mapGetters, mapActions } from 'vuex'
 import { CrowdIntegrations } from '@/integrations/integrations-config'
 import { ActivityModel } from '@/modules/activity/activity-model'
+import { MemberModel } from '@/modules/member/member-model'
 
-const { fields } = ActivityModel
+const { fields: activityFields } = ActivityModel
+const { fields: memberFields } = MemberModel
 
 export default {
   name: 'FilterComponent',
@@ -296,28 +323,28 @@ export default {
         : this.availableDimensions.filter((d) => {
             return this.measureDimensionFilters[
               measure.name
-            ][dimension] === undefined
+            ]?.[dimension] === undefined
               ? false
               : this.measureDimensionFilters[measure.name][
                   dimension
                 ].includes(d.name)
           })
     },
     computedActivityTypes() {
-      return fields.type
+      return activityFields.type
         .dropdownOptions()
         .filter((i) =>
           Object.keys(this.activeIntegrationsList).includes(
             i.label.key
           )
         )
     },
+    computedEngagementLevelTypes() {
+      return memberFields.engagementLevel.dropdownOptions()
+    },
     ...mapGetters({
       activeIntegrationsList: 'integration/activeList'
-    }),
-    fields() {
-      return fields
-    }
+    })
   },
   async created() {
     await this.doFetchIntegrations()
@@ -372,10 +399,19 @@ export default {
           ].every((value) => value !== '' && value != null)
         })
         .map((filter) => {
+          let values = [filter.value]
+
+          // Members engagement level needs to be parsed differently
+          if (filter.select === 'Members.score') {
+            values = this.computedEngagementLevelTypes
+              .filter((t) => t.label === filter.value)?.[0]
+              .value.map((v) => `${v}`)
+          }
+
           return {
             member: filter.select,
             operator: filter.operator,
-            values: [filter.value]
+            values
           }
         })
 

frontend/src/modules/widget/components/cube/_query_builder/TimeDimensionSelect.vue

@@ -11,6 +11,7 @@
       "
       clearable
       filterable
+      :disabled="computedTimeDimensions.length <= 1"
       class="w-full"
       @change="handleTimeChange"
     >

frontend/src/modules/widget/components/cube/widget-cube-builder.vue

@@ -60,19 +60,18 @@
               <div class="w-full mb-6">
                 <ChartType
                   v-model="model.settings.chartType"
-                  :chart-type="
-                    chartType === 'line'
-                      ? 'area'
-                      : chartType
-                  "
                   :update-chart-type="updateChartType"
                 ></ChartType>
               </div>
               <div class="w-full mb-6">
                 <MeasureSelect
                   :translated-options="translatedOptions"
                   :measures="measures"
-                  :available-measures="availableMeasures"
+                  :available-measures="
+                    availableMeasures.filter(
+                      (m) => m.name !== 'Identities.count'
+                    )
+                  "
                   :set-measures="setMeasures"
                 />
               </div>
@@ -110,6 +109,7 @@
               <div
                 v-if="
                   model.settings.chartType === 'area' ||
+                  model.settings.chartType === 'line' ||
                   model.settings.chartType === 'bar' ||
                   model.settings.chartType === 'table'
                 "
@@ -321,6 +321,7 @@ export default {
 
     const initialCharType =
       this.widget.settings?.chartType || 'line'
+
     return {
       mapWidget,
       chartOptions,

frontend/src/modules/widget/components/widget.vue

@@ -1,10 +1,5 @@
 <template>
   <div class="widget">
-    <div
-      v-show="loading"
-      v-loading="loading"
-      class="app-page-spinner"
-    ></div>
     <div
       v-if="!number"
       class="flex items-center leading-normal justify-between"
@@ -33,7 +28,12 @@
       </router-link>
     </div>
     <div class="pt-4">
-      <slot></slot>
+      <div
+        v-if="loading"
+        v-loading="loading"
+        class="app-page-spinner !relative top-2"
+      ></div>
+      <slot v-else></slot>
     </div>
     <el-dropdown
       v-if="config.settings"