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

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,322 @@
+<template>
+  <container>
+    <row>
+      <column class="pb-5">
+        <single-taxonomy
+          v-for="(t, i) in computedPropFilters"
+          :key="i"
+          ref="items"
+          :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 setup>
+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'
+import { defineProps, computed, toRefs, ref, useTemplateRef } from 'vue'
+
+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 itemRefs = useTemplateRef('items')
+
+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 {
+      name: field.name,
+      record_id: field.record_id,
+      terms,
+    }
+  })
+  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 {
+          if (
+            filters.value.selected[filterKeys[i]].indexOf(
+              element[filterKeys[i]],
+            ) === -1
+          ) {
+            include = false
+          }
+        }
+      }
+    }
+    if (include) {
+      return element
+    }
+  })
+  return list
+})
+
+const onFilter = (filterParam) => {
+  hideReset.value = false
+  const allFiltersUnselected = Object.values(itemRefs.value).every(
+    (taxonomy) => {
+      return Object.values(taxonomy.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(itemRefs.value).forEach((key) => {
+    itemRefs.value[key].reset()
+  })
+  filters.value.selected = {}
+}
+const by_primary = () => {
+  let primaryFilter = filterFields.value[0]
+  let data = [[primaryFilter.name, chart.value.header]]
+  let keys = {}
+
+  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
+      })
+    }
+    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>
+
+<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/Directory/Records/CJ/index.vue

@@ -30,9 +30,9 @@
   </div>
 </template>
 <script>
-import Container from '../../../../Containers/Container'
-import Row from '../../../../Containers/Row'
-import Column from '../../../../Containers/Column'
+import Container from '../../../../Containers/Container/index.vue'
+import Row from '../../../../Containers/Row/index.vue'
+import Column from '../../../../Containers/Column/index.vue'
 import { format } from 'date-fns'
 
 export default {

package/src/components/Paragraphs/Directory/Records/HSCP/index.stories.js

@@ -0,0 +1,33 @@
+import hscpRecord from './index.vue'
+
+const cpData = 
+    {
+        title: 'Australian Nurses and Midwifery Federation - Victorian Branch',
+        fullAddress: 'Level 8/535 Elizabeth St Melbourne VIC 3000',
+        workPhone: '03 9555 9333',
+        tollfreePhone: '1800 555 333',
+        email: 'ohs@test.com.au',
+        website: 'https://www.anmfvic.asn.au/education-and-training/hsr-training/events',
+        contact1: 'Christina Groebl',
+        phone1: '03 9555 0222',
+        email1: 'cgroebl@test.com.au',
+        contact2: 'Joey Bradford',
+        phone2: '03 9555 0666',
+        email2: 'jbradford@test.com.au',
+        courses: ['HSR Initial', 'HSR Refresher'],
+        trainingVenues: ['Melbourne CBD', 'All Regional Victoria - HQ in Melbourne'],
+        id: '1'
+    }
+
+
+export default {
+    title: 'Paragraphs/Directory/SingleRecord',
+    component: hscpRecord,
+    tags: ['autodocs']
+}
+
+export const CourseProvider = {}
+
+CourseProvider.args = {
+    item: cpData,    
+}