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

package/bin/deploy.sh

@@ -22,4 +22,4 @@ cd storybook-static
 
 # Deploy to GH-Pages
 cd ..
-node node_modules/gh-pages/bin/gh-pages.js -d storybook-static -t true
+node node_modules/gh-pages/bin/gh-pages.js -d storybook-static

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.74",
+  "version": "1.1.0-beta.75",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/assets/styles/modal.scss

@@ -10,3 +10,54 @@
     border: none !important;
   }
 }
+
+.modal-dialog {
+  .modal-content {
+    .modal-body {
+      .section-group__block {
+        max-width: 100%;
+      }
+    }
+    border-radius: 8px;
+  }
+  .modal-body {
+    padding: 32px;
+    fieldset {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      legend {
+        font-size: 28px;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: 0px;
+        margin-bottom: 32px;
+      }
+      .option {
+        margin-bottom: 32px;
+        flex-basis: 50%;
+        display: flex;
+        @media screen and (max-width: 600px) {
+          flex-basis: 100%;
+        }
+        input[type='checkbox'] {
+          height: 24px;
+          border: 1px solid #bababa;
+          width: 24px;
+          cursor: pointer;
+        }
+        label {
+          margin: 0px;
+          width: 80%;
+          position: relative;
+          left: 16px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .modal-footer,
+  .modal-header {
+    border: none;
+  }
+}

package/src/components/Common/CardGridItem/index.vue

@@ -33,8 +33,8 @@
             [`card-grid-item__control-radio`]:
               isSelectable && buttonRole === 'radio',
             [`card-grid-item__selected-radio`]:
-              selected && buttonRole === 'radio'
-          }
+              selected && buttonRole === 'radio',
+          },
         ]"
       >
         <slot name="cardTop"></slot>
@@ -52,7 +52,7 @@
         :icon-is-bordered="iconIsBordered"
         :class="{
           [`text-left`]: iconPosition === 'top-left',
-          rtl: rtl
+          rtl: rtl,
         }"
       >
       </card-grid-item-icon>
@@ -63,8 +63,8 @@
             {
               rtl: rtl,
               [`card-grid-item__caretContainer__control-radio`]:
-                isSelectable && buttonRole === 'radio'
-            }
+                isSelectable && buttonRole === 'radio',
+            },
           ]"
         >
           <b-card-title
@@ -74,7 +74,7 @@
             :class="{
               [`card-grid-item__header--${headerSize}`]: true,
               [`card-grid-item__header--align-${headerTextAlign}`]: true,
-              'card-grid-item__header--cursor': isCardTitleSelectable
+              'card-grid-item__header--cursor': isCardTitleSelectable,
             }"
             @click="cardTitleClicked($event)"
           >
@@ -122,7 +122,7 @@
             class="d-inline card-grid-item-icon--top-right"
             :class="{
               [`text-right`]: iconPosition === 'top-right',
-              rtl: rtl
+              rtl: rtl,
             }"
             :rtl="rtl"
           >
@@ -134,7 +134,7 @@
           text-tag="div"
           class="card-grid-item__body"
           :class="{
-            rtl: rtl
+            rtl: rtl,
           }"
         >
           <div
@@ -142,7 +142,7 @@
             :class="{
               [descriptionClass]: !!descriptionClass,
               [`card-grid-item__description--withIcon`]:
-                iconPosition === 'before-description'
+                iconPosition === 'before-description',
             }"
           >
             <card-grid-item-icon
@@ -181,7 +181,7 @@
         v-if="caretPosition === 'bottom'"
         class="card-grid-item__caretContainer card-grid-item__caretContainer--bottom"
         :class="{
-          rtl: !rtl
+          rtl: !rtl,
         }"
       >
         <card-grid-item-caret :caret="caret" :rtl="rtl" />
@@ -196,52 +196,60 @@
 import CardGridItemIcon from './card-grid-item-icon.vue'
 import CardGridItemCaret from './card-grid-item-caret.vue'
 import RichText from '../../Paragraphs/RichText/index.vue'
-import parseISO from 'date-fns/parseISO'
+import parseISO from 'date-fns/parseISO/index.js'
 import { isAbsoluteUrl, isGovSite } from '../../../../lib/utility'
 import { BCard, BCardBody, BCardTitle, BCardText } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardGridItem',
-  components: {CardGridItemIcon, CardGridItemCaret, RichText, BCard, BCardBody, BCardTitle, BCardText  },
+  components: {
+    CardGridItemIcon,
+    CardGridItemCaret,
+    RichText,
+    BCard,
+    BCardBody,
+    BCardTitle,
+    BCardText,
+  },
   props: {
     backgroundVariant: {
       type: String,
       default: 'white',
       validator: (value) =>
-        ['white', 'transparent', 'light'].indexOf(value) >= 0
+        ['white', 'transparent', 'light'].indexOf(value) >= 0,
     },
     imageSrc: {
       type: String,
-      default: null
+      default: null,
     },
     imageAlt: {
       type: String,
-      default: null
+      default: null,
     },
     description: {
       type: String,
-      default: null
+      default: null,
     },
     stripDescriptionHtml: {
-      type: Boolean
+      type: Boolean,
     },
     descriptionClass: {
       type: String,
-      default: ''
+      default: '',
     },
     glyphSrc: {
       type: [Object, String],
-      default: null
+      default: null,
     },
     glyphIconComponent: {
       type: String,
-      default: null
+      default: null,
     },
     iconSize: {
       type: String,
       default: 'small',
       validator: (value) =>
-        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
     iconPosition: {
       type: String,
@@ -252,112 +260,113 @@ export default {
           'top-left',
           'top-right',
           'after-title',
-          'before-description'
-        ].indexOf(value) >= 0
+          'before-description',
+        ].indexOf(value) >= 0,
     },
     iconIsBordered: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showDivider: {
-      type: Boolean
+      type: Boolean,
     },
     cardHeaderTitle: {
       type: String,
-      default: null
+      default: null,
     },
     invertOnSelectBackground: {
       type: String,
       default: 'none',
-      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0
+      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0,
     },
     borderOnSelectBackground: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0
+        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     headerSize: {
       type: String,
       default: 'custom',
       validator: (value) =>
         ['medium', 'large', 'extra-large', 'extra-2x-large', 'custom'].indexOf(
-          value
-        ) >= 0
+          value,
+        ) >= 0,
     },
     headerTextAlign: {
       type: String,
       default: 'left',
-      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0
+      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0,
     },
     headerTag: {
       type: String,
       required: false,
-      default: 'h3'
+      default: 'h3',
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
     },
     caretPosition: {
       type: String,
       default: 'top',
-      validator: (value) => ['top', 'bottom', 'after-title'].indexOf(value) >= 0
+      validator: (value) =>
+        ['top', 'bottom', 'after-title'].indexOf(value) >= 0,
     },
     cardPadding: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
     borderType: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0
+        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0,
     },
     cardTextAlign: {
       type: String,
-      default: 'left'
+      default: 'left',
     },
     disableSelect: {
       type: Boolean,
-      default: false
+      default: false,
     },
     pillText: {
       type: String,
-      default: ''
+      default: '',
     },
     buttonRole: {
       type: String,
-      default: 'link'
+      default: 'link',
     },
     isSelected: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isExpandable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     link: {
       type: [String, Boolean],
-      default: false
+      default: false,
     },
     taxonomies: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     isCardTitleSelectable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data: () => ({
     isSelectable: false,
@@ -367,7 +376,7 @@ export default {
     isMobileView: false,
     isTabletView: false,
     selected: false,
-    isAbsoluteUrl
+    isAbsoluteUrl,
   }),
   computed: {
     cardClass() {
@@ -394,12 +403,12 @@ export default {
         [`card-grid-item__card--border-${this.borderType}`]: true,
         [`card-grid-item__card--bg-${this.backgroundVariant}`]: true,
         [`card-grid-item__card--select-${this.buttonRole}`]: true,
-        [`card-grid-item__card--align-${this.cardTextAlign}`]: true
+        [`card-grid-item__card--align-${this.cardTextAlign}`]: true,
       }
     },
     urlHostname() {
       return window.location.protocol + '//' + window.location.host
-    }
+    },
   },
   mounted() {
     this.selected = this.isSelected
@@ -468,8 +477,8 @@ export default {
       if (theEl && theEl.length > 0) {
         var content = {
           content: this.$diffInDays(
-            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created)
-          )
+            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created),
+          ),
         }
       }
       if (this.$gtm) {
@@ -484,33 +493,33 @@ export default {
           label: this.cardHeaderTitle,
           data: linkURL,
           ...content,
-          ...this.taxonomies
+          ...this.taxonomies,
         }
         // fire the default event
         this.$gtm.push({
           event: 'custom.interaction.tile.click',
           group: this?.parentGrid?.title,
-          ...attrs
+          ...attrs,
         })
         if (this.pillText === 'News') {
           this.$gtm.push({
             event: 'custom.interaction.news.click',
             group: 'News',
-            ...attrs
+            ...attrs,
           })
         }
         if (this.pillText === 'Event') {
           this.$gtm.push({
             event: 'custom.interaction.event.click',
             group: 'Event',
-            ...attrs
+            ...attrs,
           })
         }
         if (this.pillText === 'Safety alert') {
           this.$gtm.push({
             event: 'custom.interaction.safety.click',
             group: 'Safety alert',
-            ...attrs
+            ...attrs,
           })
         }
         if (
@@ -520,7 +529,7 @@ export default {
           this.$gtm.push({
             event: 'custom.interaction.outboundlink',
             category: this.cardHeaderTitle,
-            label: this.link
+            label: this.link,
           })
         }
       }
@@ -534,11 +543,11 @@ export default {
         this.$gtm.push({
           event: 'custom.interaction.outboundlink',
           category: this.cardHeaderTitle,
-          label: this.link
+          label: this.link,
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Global/Cookies/styles.scss

@@ -203,65 +203,65 @@ h3.cookie-header {
   }
 }
 
-.modal-content {
-  border: none !important;
-  fieldset {
-    .option {
-      margin-bottom: 24px;
-      display: flex;
-      margin-right: 0px;
-      padding-left: 24px;
-      float: right;
+// .modal-content {
+//   border: none !important;
+//   fieldset {
+//     .option {
+//       margin-bottom: 24px;
+//       display: flex;
+//       margin-right: 0px;
+//       padding-left: 24px;
+//       float: right;
 
-      @media screen and (max-width: 600px) {
-        flex-basis: 100%;
-      }
+//       @media screen and (max-width: 600px) {
+//         flex-basis: 100%;
+//       }
 
-      input[type='checkbox'] {
-        height: 24px;
-        border: 1px solid $gray;
-        width: 24px;
-        margin-left: 16px;
-        margin-right: 16px;
-        border-radius: 4px;
-      }
+//       input[type='checkbox'] {
+//         height: 24px;
+//         border: 1px solid $gray;
+//         width: 24px;
+//         margin-left: 16px;
+//         margin-right: 16px;
+//         border-radius: 4px;
+//       }
 
-      label {
-        font-size: 16px;
-        font-weight: 400;
-        vertical-align: middle;
-        position: relative;
-        margin-left: 24px;
-      }
-    }
+//       label {
+//         font-size: 16px;
+//         font-weight: 400;
+//         vertical-align: middle;
+//         position: relative;
+//         margin-left: 24px;
+//       }
+//     }
 
-    .modal-description {
-      margin-right: 100px;
-    }
-  }
-}
+//     .modal-description {
+//       margin-right: 100px;
+//     }
+//   }
+// }
 
-.modal-content h5 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 24px;
-  font-style: normal;
-  color: $black;
-}
+// .modal-content h5 {
+//   font-weight: 700;
+//   font-size: 20px;
+//   line-height: 24px;
+//   font-style: normal;
+//   color: $black;
+// }
 
-.modal {
-  background: rgba(0,0,0,0.5)
-}
+// .modal {
+//   background: rgba(0,0,0,0.5)
+// }
 
-.modal-backdrop {
-  display: none;
-}
+// .modal-backdrop {
+//   display: none;
+// }
 
-.modal-heading-text {
-  font-size: 26px;
-  font-weight: 700;
-  line-height: 32px;
-  letter-spacing: 0px;
-  margin-bottom: 0px;
-  margin-top: 0px;
-}
+// .modal-heading-text {
+//   font-size: 26px;
+//   font-weight: 700;
+//   line-height: 32px;
+//   letter-spacing: 0px;
+//   margin-bottom: 0px;
+//   margin-top: 0px;
+// }

package/src/components/Global/DirectoryFilters/SingleTaxonomy/index.vue

@@ -118,57 +118,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-// Putting all modal styling in one place
-// Not working from modal.scss
-.modal-dialog {
-  .modal-content {
-    .modal-body {
-      .section-group__block {
-        max-width: 100%;
-      }
-    }
-    border-radius: 8px;
-  }
-  .modal-body {
-    padding: 32px;
-    fieldset {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      legend {
-        font-size: 28px;
-        font-weight: 700;
-        line-height: 32px;
-        letter-spacing: 0px;
-        margin-bottom: 32px;
-      }
-      .option {
-        margin-bottom: 32px;
-        flex-basis: 50%;
-        display: flex;
-        @media screen and (max-width: 600px) {
-          flex-basis: 100%;
-        }
-        input[type='checkbox'] {
-          height: 24px;
-          border: 1px solid #bababa;
-          width: 24px;
-          cursor: pointer;
-        }
-        label {
-          margin: 0px;
-          width: 80%;
-          position: relative;
-          left: 16px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-  .modal-footer,
-  .modal-header {
-    border: none;
-  }
-}
-</style>

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>