@worksafevictoria/wcl7.5 1.1.1 → 1.1.3

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/includes/scss/vars/src/colors.scss

@@ -20,6 +20,21 @@ $yellow: #ffd229;
 $lightyellow: #fff6d4;
 $outline: #da47ff;
 $outline-dark: #ffffff;
+// Functional colours
+$wsv-fun-dark-green: #576D2F;
+$wsv-fun-dark-blue: #104f77;
+$wsv-fun-dark-purple: #55356b;
+$wsv-fun-dark-red: #760031;
+$wsv-fun-dark-brown: #763b00;
+$wsv-fun-dark-caramel: #cb7c2d;
+$wsv-fun-light-teal: #7ac2b5;
+$wsv-fun-light-blue: #8ecade;
+$wsv-fun-light-purple: #9871a8;
+$wsv-fun-light-fuchsia: #f16a7e;
+$wsv-fun-light-green: #edeb72;
+$wsv-fun-light-brown: #dbc38b;
+
+
 
 $theme-colors: (
   'gold': $gold,
@@ -43,7 +58,20 @@ $theme-colors: (
   'yellow': $yellow,
   'lightyellow': $lightyellow,
   'outline': $outline,
-  'outline-dark': $outline-dark
+  'outline-dark': $outline-dark,
+  // Functional colours
+  'wsv-fun-dark-green':$wsv-fun-dark-green,
+  'wsv-fun-dark-blue':$wsv-fun-dark-blue,
+  'wsv-fun-dark-purple':$wsv-fun-dark-purple,
+  'wsv-fun-dark-red':$wsv-fun-dark-red,
+  'wsv-fun-dark-brown':$wsv-fun-dark-brown,
+  'wsv-fun-dark-caramel':$wsv-fun-dark-caramel,
+  'wsv-fun-light-teal':$wsv-fun-light-teal,
+  'wsv-fun-light-blue':$wsv-fun-light-blue,
+  'wsv-fun-light-purple':$wsv-fun-light-purple,
+  'wsv-fun-light-fuchsia':$wsv-fun-light-fuchsia,
+  'wsv-fun-light-green':$wsv-fun-light-green,
+  'wsv-fun-light-brown':$wsv-fun-light-brown
 );
 
 :export {

package/src/index.js

@@ -1,17 +1,17 @@
 // Global Components
-import Container from './components/Containers/Container'
-import Row from './components/Containers/Row'
-import Column from './components/Containers/Column'
-import HomepageHeader from './components/Containers/HomepageHeader'
-import Subheader from './components/Containers/Subheader'
-import SectionGroup from './components/Containers/SectionGroup'
+import Container from './components/Containers/Container/index.vue'
+import Row from './components/Containers/Row/index.vue'
+import Column from './components/Containers/Column/index.vue'
+import HomepageHeader from './components/Containers/HomepageHeader/index.vue'
+import Subheader from './components/Containers/Subheader/index.vue'
+import SectionGroup from './components/Containers/SectionGroup/index.vue'
 
-import AppHeader from './components/Global/AppHeader'
-import AppFooter from './components/Global/AppFooter'
-import HeroHeader from './components/Global/HeroHeader'
-import SocialShare from './components/Global/SocialShare'
-import Strip from './components/Global/Strip'
-import AlertStrip from './components/Global/AlertStrip'
+import AppHeader from './components/Global/AppHeader/index.vue'
+import AppFooter from './components/Global/AppFooter/index.vue'
+import HeroHeader from './components/Global/HeroHeader/index.vue'
+import SocialShare from './components/Global/SocialShare/index.vue'
+import Strip from './components/Global/Strip/index.vue'
+import AlertStrip from './components/Global/AlertStrip/index.vue'
 import CardGrid from './components/Common/CardGrid/index.vue'
 import CardGridItem from './components/Common/CardGridItem/index.vue'
 import Cookies from './components/Global/Cookies/index.vue'
@@ -20,35 +20,36 @@ import GlobalNotice from './components/Global/GlobalNotice/index.vue'
 import ContrastMode from './components/Global/ContrastMode/index.vue'
 
 // Paragraphs
-import RichText from './components/Paragraphs/RichText'
-import TextMedia from './components/Paragraphs/TextMedia'
-import Accordion from './components/Paragraphs/Accordion'
-import TabbedCards from './components/Paragraphs/TabbedCards'
-import BrowseContent from './components/Paragraphs/BrowseContent'
-import TaskFinder from './components/Paragraphs/TaskFinder'
-import ListGroup from './components/Paragraphs/ListGroup'
-import ScrollSpy from './components/Paragraphs/ScrollSpy'
-import Directory from './components/Paragraphs/Directory'
-import SelectableCards from './components/Paragraphs/SelectableCards'
-import VideoMedia from './components/Paragraphs/VideoPlayer'
-import VideoGrid from './components/Paragraphs/VideoGrid'
-import Statistics from './components/Paragraphs/Statistics'
-import ProofPoints from './components/Paragraphs/ProofPoints'
-import TabulatedData from './components/Paragraphs/TabulatedData'
-import Breakout from './components/Paragraphs/Breakout'
-import Tabs from './components/Paragraphs/Tabs'
-import MarketingBanner from './components/Paragraphs/MarketingBanner'
-import RelatedInformation from './components/Paragraphs/RelatedInformation'
-import Calculator from './components/Paragraphs/Calculator'
+import RichText from './components/Paragraphs/RichText/index.vue'
+import TextMedia from './components/Paragraphs/TextMedia/index.vue'
+import Accordion from './components/Paragraphs/Accordion/index.vue'
+import TabbedCards from './components/Paragraphs/TabbedCards/index.vue'
+import BrowseContent from './components/Paragraphs/BrowseContent/index.vue'
+import TaskFinder from './components/Paragraphs/TaskFinder/index.vue'
+import ListGroup from './components/Paragraphs/ListGroup/index.vue'
+import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
+import Directory from './components/Paragraphs/Directory/index.vue'
+import SelectableCards from './components/Paragraphs/SelectableCards/index.vue'
+import VideoMedia from './components/Paragraphs/VideoPlayer/index.vue'
+import VideoGrid from './components/Paragraphs/VideoGrid/index.vue'
+import Statistics from './components/Paragraphs/Statistics/index.vue'
+import ProofPoints from './components/Paragraphs/ProofPoints/index.vue'
+import TabulatedData from './components/Paragraphs/TabulatedData/index.vue'
+import Breakout from './components/Paragraphs/Breakout/index.vue'
+import Tabs from './components/Paragraphs/Tabs/index.vue'
+import MarketingBanner from './components/Paragraphs/MarketingBanner/index.vue'
+import RelatedInformation from './components/Paragraphs/RelatedInformation/index.vue'
+import Calculator from './components/Paragraphs/Calculator/index.vue'
+import Chart from './components/Paragraphs/Chart/index.vue'
 
 // SubComponents
-import FormAddressPostcode from './components/SubComponents/FormAddressPostcode'
-import CtaButton from './components/SubComponents/CtaButton'
-import Pagination from './components/SubComponents/Pagination'
-import SingleImage from './components/SubComponents/SingleImage'
-import Loading from './components/SubComponents/Loading'
-import Icon from './components/SubComponents/Icon'
-import Breadcrumb from './components/SubComponents/Breadcrumb'
+import FormAddressPostcode from './components/SubComponents/FormAddressPostcode/index.vue'
+import CtaButton from './components/SubComponents/CtaButton/index.vue'
+import Pagination from './components/SubComponents/Pagination/index.vue'
+import SingleImage from './components/SubComponents/SingleImage/index.vue'
+import Loading from './components/SubComponents/Loading/index.vue'
+import Icon from './components/SubComponents/Icon/index.vue'
+import Breadcrumb from './components/SubComponents/Breadcrumb/index.vue'
 import CardGroup from './components/SubComponents/CardGroup/index.vue'
 import Search from './components/SubComponents/Search/index.vue'
 import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
@@ -98,7 +99,8 @@ export {
   Tabs,
   MarketingBanner,
   RelatedInformation,
-  Calculator
+  Calculator,
+  Chart
 }
 
 // Export Sub Components