@worksafevictoria/wcl7.5 1.1.0-beta.73 → 1.1.0-beta.75

package/src/components/Paragraphs/Chart/index.vue

@@ -5,7 +5,7 @@
         <single-taxonomy
           v-for="(t, i) in computedPropFilters"
           :key="i"
-          :ref="`${t.record_id}`"
+          :ref="elRef[`${t.record_id}`]"
           :data="t"
           :results="filteredList.length"
           :loading="isFiltering"
@@ -42,8 +42,8 @@
                 ? chart.filter === 'primary'
                   ? by_primary()
                   : chart.filter === 'months'
-                  ? by_months()
-                  : compare()
+                    ? by_months()
+                    : compare()
                 : noData()
             "
             :options="chart.options"
@@ -54,264 +54,252 @@
   </container>
 </template>
 
-<script>
+<script setup>
 import { GChart } from 'vue-google-charts'
-import Container from '../../Containers/Container/index.vue' 
+import Container from '../../Containers/Container/index.vue'
 import Column from '../../Containers/Column/index.vue'
 import Row from '../../Containers/Row/index.vue'
 import FilterButton from '../../Common/FilterButton/index.vue' // Reset
 import SingleTaxonomy from '../../Global/DirectoryFilters/SingleTaxonomy/index.vue'
 import { BFormGroup, BFormSelect } from 'bootstrap-vue-next'
+import { defineProps, computed, toRefs, ref } from 'vue'
 
-export default {
-  name: 'Chart',
-  components: {
-    Row,
-    Column,
-    Container,
-    GChart,
-    FilterButton,
-    SingleTaxonomy,
-    BFormGroup,
-    BFormSelect
-  },
-  props: {
-    statsData: { type: Array, default: () => [] },
-    filterFields: { type: Array, default: () => [] },
-    chart: { type: Object, default: () => {} }
-  },
-  data() {
+const props = defineProps({
+  statsData: { type: Array, default: () => [] },
+  filterFields: { type: Array, default: () => [] },
+  chart: { type: Object, default: () => {} },
+})
+
+const { statsData, filterFields, chart } = toRefs(props)
+
+const hideReset = ref(true)
+const isFiltering = ref(false)
+const filters = ref({
+  taxonomies: [],
+  selected: {},
+  availableBundles: [],
+})
+const graphSelected = ref(null)
+const chartHeight = ref(
+  chart.value.options.height ? chart.value.options.height : 600,
+)
+const elRef = ref({})
+
+const graphOptions = computed(() => {
+  return filterFields.value.slice(1).map((field) => {
+    if (!graphSelected.value) {
+      graphSelected.value = field.record_id
+    }
+    return { value: field.record_id, text: field.name }
+  })
+})
+
+const computedPropFilters = computed(() => {
+  let fields = filterFields.value.map((field) => {
+    let terms = null
+    if (field.date) {
+      terms = statsData.value
+        .map((item) => item[field.record_id].split('/')[2]) // Date field get year
+        .filter((value, index, self) => self.indexOf(value) === index)
+        .map((value) => {
+          return { tid: value, name: value, preselected: false }
+        })
+        .sort((a, b) => a.name.localeCompare(b.name))
+    } else {
+      terms = statsData.value
+        .map((item) => item[field.record_id])
+        .filter((value, index, self) => self.indexOf(value) === index)
+        .map((value) => {
+          return { tid: value, name: value, preselected: false }
+        })
+        .sort((a, b) => a.name.localeCompare(b.name))
+    }
     return {
-      hideReset: true,
-      isFiltering: false,
-      filters: {
-        taxonomies: [],
-        selected: {},
-        availableBundles: []
-      },
-      graphSelected: null,
-      chartHeight: this.chart.options.height ? this.chart.options.height : 600
+      name: field.name,
+      record_id: field.record_id,
+      terms,
     }
-  },
-  computed: {
-    graphOptions: function() {
-      return this.filterFields.slice(1).map((field) => {
-        if (!this.graphSelected) {
-          this.graphSelected = field.record_id
-        }
-        return { value: field.record_id, text: field.name }
-      })
-    },
-    computedPropFilters: function() {
-      let fields = this.filterFields.map((field) => {
-        let terms = null
-        if (field.date) {
-          terms = this.statsData
-            .map((item) => item[field.record_id].split('/')[2]) // Date field get year
-            .filter((value, index, self) => self.indexOf(value) === index)
-            .map((value) => {
-              return { tid: value, name: value, preselected: false }
-            })
-            .sort((a, b) => a.name.localeCompare(b.name))
+  })
+  return fields
+})
+
+const filteredList = computed(() => {
+  let filterKeys = Object.keys(filters.value.selected).map((key) => key)
+  let list = statsData.value.filter((element) => {
+    let include = true
+    for (var i = 0, n = filterKeys.length; i < n; ++i) {
+      if (filters.value.selected[filterKeys[i]].length > 0) {
+        let filterType = filterFields.value.find(
+          (item) => item.record_id === filterKeys[i],
+        )
+        if (filterType.date) {
+          // Filter by year
+          if (
+            filters.value.selected[filterKeys[i]].indexOf(
+              element[filterKeys[i]].split('/')[2],
+            ) === -1
+          ) {
+            include = false
+          }
         } else {
-          terms = this.statsData
-            .map((item) => item[field.record_id])
-            .filter((value, index, self) => self.indexOf(value) === index)
-            .map((value) => {
-              return { tid: value, name: value, preselected: false }
-            })
-            .sort((a, b) => a.name.localeCompare(b.name))
-        }
-        return {
-          name: field.name,
-          record_id: field.record_id,
-          terms
-        }
-      })
-      return fields
-    },
-    filteredList: function() {
-      let filterKeys = Object.keys(this.filters.selected).map((key) => key)
-      let list = this.statsData.filter((element) => {
-        let include = true
-        for (var i = 0, n = filterKeys.length; i < n; ++i) {
-          if (this.filters.selected[filterKeys[i]].length > 0) {
-            let filterType = this.filterFields.find(
-              (item) => item.record_id === filterKeys[i]
-            )
-            if (filterType.date) {
-              // Filter by year
-              if (
-                this.filters.selected[filterKeys[i]].indexOf(
-                  element[filterKeys[i]].split('/')[2]
-                ) === -1
-              ) {
-                include = false
-              }
-            } else {
-              if (
-                this.filters.selected[filterKeys[i]].indexOf(
-                  element[filterKeys[i]]
-                ) === -1
-              ) {
-                include = false
-              }
-            }
+          if (
+            filters.value.selected[filterKeys[i]].indexOf(
+              element[filterKeys[i]],
+            ) === -1
+          ) {
+            include = false
           }
         }
-        if (include) {
-          return element
-        }
-      })
-      return list
-    }
-  },
-  methods: {
-    onFilter(filters) {
-      this.hideReset = false
-      const allFiltersUnselected = Object.values(this.$refs).every(
-        (taxonomy) => {
-          return Object.values(taxonomy[0].selectedFilters).every(
-            (filter) => filter.filter((item) => !item.preselected).length === 0
-          )
-        }
-      )
-      if (allFiltersUnselected) {
-        this.hideReset = true
       }
-      Object.keys(filters).forEach((filter) => {
-        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
-      })
-    },
-    reset() {
-      this.hideReset = true
-      Object.keys(this.$refs).forEach((key) => {
-        this.$refs[key][0].reset()
-      })
-      this.filters.selected = {}
-    },
-    by_primary() {
-      let primaryFilter = this.filterFields[0]
-      let data = [[primaryFilter.name, this.chart.header]]
-      let keys = {}
+    }
+    if (include) {
+      return element
+    }
+  })
+  return list
+})
 
-      this.filteredList.forEach((element) => {
-        // Work off primary field
-        let group = null
-        if (primaryFilter.date) {
-          group = `${element[primaryFilter.record_id].split('/')[2]} `
-        } else {
-          group = element[primaryFilter.record_id]
-        }
+const onFilter = (filterParam) => {
+  hideReset.value = false
+  const allFiltersUnselected = Object.values(elRef.value).every((taxonomy) => {
+    return Object.values(taxonomy[0].selectedFilters).every(
+      (filter) => filter.filter((item) => !item.preselected).length === 0,
+    )
+  })
+  if (allFiltersUnselected) {
+    hideReset.value = true
+  }
+  Object.keys(filterParam).forEach((filter) => {
+    filters.value.selected[filter] = filterParam[filter].map((obj) => obj.tid)
+  })
+}
+const reset = () => {
+  hideReset.value = true
+  Object.keys(elRef).forEach((key) => {
+    elRef[key][0].reset()
+  })
+  filters.value.selected = {}
+}
+const by_primary = () => {
+  let primaryFilter = filterFields.value[0]
+  let data = [[primaryFilter.name, chart.value.header]]
+  let keys = {}
 
-        if (group in keys) {
-          keys[group]++
-        } else {
-          keys[group] = 1
-        }
-      })
-      Object.keys(keys).forEach((item) => {
-        data.push([item, keys[item]])
-      })
-      if (this.chart.type === 'BarChart') {
-        this.chart.options.height = data[0].length * 200
-      } else {
-        this.chart.options.height = this.chartHeight
-      }
-      return data
-    },
-    by_months() {
-      let primaryFilter = this.filterFields[0]
-      if (!primaryFilter.date) {
-        return ['Requires date in primary field']
-      }
-      let data = [
-        ['Month'],
-        ['Jan'],
-        ['Feb'],
-        ['Mar'],
-        ['Apr'],
-        ['May'],
-        ['Jun'],
-        ['Jul'],
-        ['Aug'],
-        ['Sep'],
-        ['Oct'],
-        ['Nov'],
-        ['Dec']
-      ]
-      let years = this.filteredList
-        .map((item) => item[primaryFilter.record_id].split('/')[2])
-        .filter((value, index, self) => self.indexOf(value) === index)
-      data[0].push(...years)
-      for (var i = 1, n = data.length; i < n; ++i) {
-        for (var j = 0, m = years.length; j < m; ++j) {
-          data[i].push(0)
-        }
-      }
-      this.filteredList.forEach((element) => {
-        let year = element[primaryFilter.record_id].split('/')[2]
-        let month = element[primaryFilter.record_id].split('/')[1]
-        data[month][data[0].indexOf(year)]++
-      })
-      for (var i = 2; i < data.length; i++) {
-        for (var j = 1; j < data[i].length; j++) {
-          data[i][j] = data[i][j] + data[i - 1][j]
-        }
-      }
-      if (this.chart.type === 'BarChart') {
-        this.chart.options.height = data[0].length * 200
-      } else {
-        this.chart.options.height = this.chartHeight
-      }
-      return data
-    },
-    compare() {
-      let primaryFilter = this.filterFields[0]
-      let comparison = this.filteredList
-        .map((item) => item[this.graphSelected])
-        .filter((value, index, self) => self.indexOf(value) === index)
-        .sort((a, b) => a.localeCompare(b))
-      let data = [['Year', ...comparison]]
-      let keys = {}
-      this.filteredList.forEach((element) => {
-        let group = null
-        if (primaryFilter.date) {
-          group = `${element[primaryFilter.record_id].split('/')[2]} `
-        } else {
-          group = element[primaryFilter.record_id]
-        }
-        if (group in keys) {
-        } else {
-          keys[group] = {}
-          comparison.forEach((co) => {
-            keys[group][co] = 0
-          })
-        }
-        keys[group][element[this.graphSelected]]++
-      })
-      Object.keys(keys).forEach((key) => {
-        data.push([key, ...Object.entries(keys[key]).map(([k, v]) => v)])
+  filteredList.value.forEach((element) => {
+    // Work off primary field
+    let group = null
+    if (primaryFilter.date) {
+      group = `${element[primaryFilter.record_id].split('/')[2]} `
+    } else {
+      group = element[primaryFilter.record_id]
+    }
+
+    if (group in keys) {
+      keys[group]++
+    } else {
+      keys[group] = 1
+    }
+  })
+  Object.keys(keys).forEach((item) => {
+    data.push([item, keys[item]])
+  })
+  if (chart.value.type === 'BarChart') {
+    chart.value.options.height = data[0].length * 200
+  } else {
+    chart.value.options.height = chartHeight.value
+  }
+  return data
+}
+const by_months = () => {
+  let primaryFilter = filterFields.value[0]
+  if (!primaryFilter.date) {
+    return ['Requires date in primary field']
+  }
+  let data = [
+    ['Month'],
+    ['Jan'],
+    ['Feb'],
+    ['Mar'],
+    ['Apr'],
+    ['May'],
+    ['Jun'],
+    ['Jul'],
+    ['Aug'],
+    ['Sep'],
+    ['Oct'],
+    ['Nov'],
+    ['Dec'],
+  ]
+  let years = filteredList.value
+    .map((item) => item[primaryFilter.record_id].split('/')[2])
+    .filter((value, index, self) => self.indexOf(value) === index)
+  data[0].push(...years)
+  for (var i = 1, n = data.length; i < n; ++i) {
+    for (var j = 0, m = years.length; j < m; ++j) {
+      data[i].push(0)
+    }
+  }
+  filteredList.value.forEach((element) => {
+    let year = element[primaryFilter.record_id].split('/')[2]
+    let month = element[primaryFilter.record_id].split('/')[1]
+    data[month][data[0].indexOf(year)]++
+  })
+  for (var i = 2; i < data.length; i++) {
+    for (var j = 1; j < data[i].length; j++) {
+      data[i][j] = data[i][j] + data[i - 1][j]
+    }
+  }
+  if (chart.value.type === 'BarChart') {
+    chart.value.options.height = data[0].length * 200
+  } else {
+    chart.value.options.height = chartHeight.value
+  }
+  return data
+}
+const compare = () => {
+  let primaryFilter = filterFields.value[0]
+  let comparison = filteredList.value
+    .map((item) => item[graphSelected.value])
+    .filter((value, index, self) => self.indexOf(value) === index)
+    .sort((a, b) => a.localeCompare(b))
+  let data = [['Year', ...comparison]]
+  let keys = {}
+  filteredList.value.forEach((element) => {
+    let group = null
+    if (primaryFilter.date) {
+      group = `${element[primaryFilter.record_id].split('/')[2]} `
+    } else {
+      group = element[primaryFilter.record_id]
+    }
+    if (group in keys) {
+    } else {
+      keys[group] = {}
+      comparison.forEach((co) => {
+        keys[group][co] = 0
       })
-      if (this.chart.type === 'BarChart') {
-        this.chart.options.height = data[0].length * 200
-      } else {
-        this.chart.options.height = this.chartHeight
-      }
-      return data
-    },
-    noData() {
-      return [
-        [
-          { label: 'Results', type: 'string' },
-          { label: 'Results', type: 'number' },
-          { role: 'style', type: 'string' },
-          { role: 'annotation', type: 'string' }
-        ],
-        ['', 0, null, 'No results found']
-      ]
     }
+    keys[group][element[graphSelected.value]]++
+  })
+  Object.keys(keys).forEach((key) => {
+    data.push([key, ...Object.entries(keys[key]).map(([k, v]) => v)])
+  })
+  if (chart.value.type === 'BarChart') {
+    chart.value.options.height = data[0].length * 200
+  } else {
+    chart.value.options.height = chartHeight.value
   }
+  return data
+}
+const noData = () => {
+  return [
+    [
+      { label: 'Results', type: 'string' },
+      { label: 'Results', type: 'number' },
+      { role: 'style', type: 'string' },
+      { role: 'annotation', type: 'string' },
+    ],
+    ['', 0, null, 'No results found'],
+  ]
 }
 </script>
 

package/src/components/Paragraphs/TabbedCards/index.vue

@@ -28,15 +28,15 @@
             :show-divider="false"
             :header-size="'large'"
             class="tabbed-card"
-            :class="card === selectedCard ? 'isSelected' : ''"
+            :class="checkSelectedCard(card) ? 'isSelected' : ''"
             :card-padding="'small'"
             :card-header-title="card.title"
-            :caret="card === selectedCard ? 'up' : 'down'"
+            :caret="checkSelectedCard(card) ? 'up' : 'down'"
             :caret-position="'bottom'"
             :rtl="rtl || card.rtl"
             :description="card.text"
             :button-role="'link'"
-            :is-selected="card === selectedCard"
+            :is-selected="checkSelectedCard(card)"
             :is-expandable="true"
           />
         </template>
@@ -65,7 +65,6 @@
 </template>
 
 <script>
-import { toRaw } from 'vue'
 import CardGrid from './../../Common/CardGrid/index.vue'
 import CardGridItem from './../../Common/CardGridItem/index.vue'
 import Column from './../../Containers/Column/index.vue'
@@ -152,10 +151,11 @@ export default {
       let end = start + this.cols
       return rows.slice(start, end)
     },
+    checkSelectedCard(card) {
+      return JSON.stringify(card) === JSON.stringify(this.selectedCard);
+    },
     setCurrentRow(rowIndex, card) {
-      const rawCard = toRaw(this.selectedCard);
-      const sameCardSelected =
-      card.selectedCard.title === rawCard?.title || !card.selectedCard.title
+      const sameCardSelected = this.checkSelectedCard(card.selectedCard) || !card.selectedCard
 
       this.selectedCard = null
       this.selectedRow = null