@worksafevictoria/wcl7.5 1.1.0-beta.1 → 1.1.0-beta.11

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

@@ -0,0 +1,61 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as ChartStories from './index.stories';
+
+<Meta of={ChartStories} />
+# Charts
+
+Charts support links
+
+* [vue-google-charts](https://github.com/devstark-com/vue-google-charts "Package") (package documentation)
+* [Google-chart](https://developers.google.com/chart/ "Google charts") (customisation documentation)
+
+<Canvas of={ChartStories.Default} />
+
+## Chart options
+
+Visit Google-chart documentation for chart options.
+
+```tsx
+  options: {
+    title: 'graph',
+    pieSliceText: 'value',
+    is3D: true,
+    height: 600,
+    chartArea: { top: 20, bottom: 20 },
+    vAxis: { minValue: 0 },
+    animation: {
+      duration: 1000,
+      easing: 'out'
+    },
+    colors: [
+      '#3d3c36',
+      colors.orange100,
+    ]
+  }
+```
+
+## Chart filters
+
+Filtering options. These are passed to 'directory-filters' component.
+
+```tsx
+[
+  { record_id: 'DEATH_DATE', name: 'Year', date: true }, // Primary 
+  { record_id: 'GENDER', name: 'Gender' }, // Secondary 
+  { record_id: 'AGE_RANGE', name: 'Age range' },
+  { record_id: 'CATEGORY', name: 'Category' },
+  { record_id: 'INDUSTRY', name: 'Industry' },
+  { record_id: 'SIZE_', name: 'Size of Organisation' }
+]
+```
+
+## Filtering
+
+Currently three filters are available for generating charts
+
+**'primary':** Compare by Primary field (first in array)
+
+**'months':** Incremental view (Requires date as Primary filter)
+
+**'compare':** Compare Primary field with chosen field (default secondary)

package/src/components/Paragraphs/Chart/index.stories.js

@@ -0,0 +1,31 @@
+import Chart from './index.vue'
+import {
+  chart, filterFields, statsData
+} from './Constants'
+export default {
+  title: 'Paragraphs/Chart',
+  component: Chart,
+}
+export const Default = {
+  argTypes: {
+    "chart.type": {
+      control: "radio",
+      options: ["BarChart", "PieChart", "ColumnChart", "Table", "LineChart", "AreaChart", "BubbleChart", "ScatterChart"],
+    },
+    "chart.filter": {
+      control: "radio",
+      options: ["primary", "months", "compare"],
+    },
+  },
+  args: {
+    filterFields: filterFields,
+    chart: chart,
+    statsData: statsData
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+}
+
+
+

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

@@ -0,0 +1,331 @@
+<template>
+  <container>
+    <row>
+      <column class="pb-5">
+        <single-taxonomy
+          v-for="(t, i) in computedPropFilters"
+          :key="i"
+          :ref="`${t.record_id}`"
+          :data="t"
+          :results="filteredList.length"
+          :loading="isFiltering"
+          class="wcl-directory-filters__filterButton"
+          @onFilter="onFilter"
+        />
+        <filter-button
+          v-if="!hideReset"
+          :is-reset="true"
+          class="wcl-directory-filters__filterButton"
+          @clicked="reset"
+        />
+      </column>
+    </row>
+    <row>
+      <column>
+        <div>
+          <b-form-group
+            v-show="chart.filter === 'compare'"
+            label="Compare by:"
+            label-for="compare"
+          >
+            <b-form-select
+              id="compare"
+              v-model="graphSelected"
+              class="mb-1 mt-1"
+              :options="graphOptions"
+            ></b-form-select>
+          </b-form-group>
+          <g-chart
+            :type="filteredList.length > 0 ? chart.type : 'ColumnChart'"
+            :data="
+              filteredList.length > 0
+                ? chart.filter === 'primary'
+                  ? by_primary()
+                  : chart.filter === 'months'
+                  ? by_months()
+                  : compare()
+                : noData()
+            "
+            :options="chart.options"
+          />
+        </div>
+      </column>
+    </row>
+  </container>
+</template>
+
+<script>
+import { GChart } from 'vue-google-charts'
+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'
+
+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() {
+    return {
+      hideReset: true,
+      isFiltering: false,
+      filters: {
+        taxonomies: [],
+        selected: {},
+        availableBundles: []
+      },
+      graphSelected: null,
+      chartHeight: this.chart.options.height ? this.chart.options.height : 600
+    }
+  },
+  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))
+        } 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 (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 = {}
+
+      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]
+        }
+
+        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)])
+      })
+      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']
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-directory-filters {
+  &__filterButton {
+    display: inline-block;
+    padding-right: 16px;
+    line-height: 3;
+    &:last-child {
+      padding-right: 0px;
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/ListGroup/Link/list-link.stories.js

@@ -5,67 +5,62 @@ export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
-    },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: true
+    list: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    title: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    role: {
       table: {
         disable: true
       }
     },
-    showListLink: {
-      control: 'boolean',
-      defaultValue: true
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    title: {
+    footerHeading: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: false,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h3',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false,
+    showListLink: true
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { ListGroup },
+  setup() {
+    return { args };
+  },
   data() {
     return {
       storyData,
       storyDataAr
     }
   },
-  props: Object.keys(argTypes),
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)"
-    :sub-heading="(rtl ? storyDataAr.subHeading : storyData.subHeading)"
-    :footer-heading="(rtl ? storyDataAr.footer : storyDataAr.footer)"
-    :show-list-link="showListLink"  />`
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)"
+    :sub-heading="(args.rtl ? storyDataAr.subHeading : storyData.subHeading)"
+    :footer-heading="(args.rtl ? storyDataAr.footer : storyDataAr.footer)"
+    :show-list-link="args.showListLink" />`
 })
 
 export const Link = Template.bind({})

package/src/components/Paragraphs/ListGroup/list-group.stories.js

@@ -5,60 +5,63 @@ export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+    list: {
+      table: {
+        disable: true
+      }
     },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
+    title: {
+      table: {
+        disable: true
+      }
     },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: true
+    role: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    footerHeading: {
       table: {
         disable: true
       }
     },
-    title: {
+    showListLink: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: false,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h3',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { ListGroup },
+  setup() {
+    return { args }
+  },
   data() {
     return {
       storyData,
       storyDataAr
     }
   },
-  props: Object.keys(argTypes),
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)" />`
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)" />`
 })
 
 export const Default = Template.bind({})