@worksafevictoria/wcl7.5 1.6.0 → 1.7.0

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

@@ -0,0 +1,29 @@
+import { Canvas, Meta } from '@storybook/blocks';
+ 
+import * as GeoStories from './index.stories';
+ 
+<Meta of={GeoStories} />
+ 
+# Map
+ 
+Map support links
+
+- [vue3-google-map](https://vue3-google-map.com/ 'Documentation') (package documentation)
+- [Google-maps](https://developers.google.com/maps/documentation/javascript 'Google maps') (customisation documentation)
+
+<Canvas of={GeoStories.Default} />
+
+## Map 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' },
+]
+```

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

@@ -0,0 +1,15 @@
+import GeoChart from './index.vue'
+import { filterFields, statsData } from './Constants'
+export default {
+  title: 'Paragraphs/Map',
+  component: GeoChart,
+}
+export const Default = {
+  args: {
+    filterFields: filterFields,
+    statsData: statsData,
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+}

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

@@ -0,0 +1,295 @@
+<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>
+          <GoogleMap
+            api-key="AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c"
+            :style="`width: 100%; height: ${mapHeight}`"
+            :center="center"
+            :zoom="zoom"
+            :zoom-control="true"
+            :mapTypeControl="false"
+            :streetViewControl="false"
+            :fullscreenControl="true"
+          >
+            <!-- <CustomControl
+              position="TOP_CENTER"
+              class="mt-4"
+              style="background-color: rgba(0, 0, 0, 0.2); border-radius: 5px"
+              ><row>
+                <column class="py-2 px-3">
+                  <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>
+            </CustomControl> -->
+            <!-- <MarkerCluster> -->
+            <Marker
+              v-for="(location, i) in postcodes"
+              :options="{
+                position: location.center,
+                label: `${location.deaths}`,
+                title: `${location.deaths} ${location.deaths > 1 ? 'deaths' : 'death'}`,
+              }"
+              :key="i"
+            />
+            <!-- </MarkerCluster> -->
+          </GoogleMap>
+        </div>
+      </column>
+    </row>
+  </container>
+</template>
+
+<script>
+import postcode from './postcode_location.json'
+import {
+  GoogleMap,
+  Marker,
+  MarkerCluster,
+  Circle,
+  CustomControl,
+  InfoWindow,
+} from 'vue3-google-map'
+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, BButton } from 'bootstrap-vue-next'
+
+export default {
+  name: 'GeoChart',
+  components: {
+    Row,
+    Column,
+    Container,
+    FilterButton,
+    SingleTaxonomy,
+    BFormGroup,
+    BFormSelect,
+    GoogleMap,
+    Marker,
+    MarkerCluster,
+    Circle,
+    CustomControl,
+    InfoWindow,
+    BButton,
+  },
+  props: {
+    statsData: { type: Array, default: () => [] },
+    filterFields: { type: Array, default: () => [] },
+    chart: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      postcode,
+      zoom: 7,
+      mapHeight: '700px',
+      center: { lat: -36.5, lng: 145.3 },
+      hideReset: true,
+      isFiltering: false,
+      filters: {
+        taxonomies: [],
+        selected: {},
+        availableBundles: [],
+      },
+    }
+  },
+  mounted() {
+    this.resize()
+    window.onresize = () => {
+      this.resize()
+    }
+  },
+  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
+    },
+    postcodes: function () {
+      if (this.filteredList.length > 1) {
+        let location = {}
+        this.filteredList.forEach((item) => {
+          if (location[item.POSTCODE]) {
+            location[item.POSTCODE].deaths++
+          } else {
+            let pc = this.postcode.find((obj) => obj.postcode == item.POSTCODE)
+            if (pc) {
+              location[item.POSTCODE] = {
+                center: { lat: pc.lat, lng: pc.long },
+                deaths: 1,
+              }
+            } else {
+              console.log('🚀 ~ item.POSTCODE:', item.POSTCODE)
+            }
+          }
+        })
+        return location
+      }
+    },
+  },
+  methods: {
+    resize() {
+      if (window.innerWidth > 980) {
+        this.zoom = 7
+        this.mapHeight = '700px'
+      } else if (window.innerWidth <= 980) {
+        this.zoom = 6
+        this.mapHeight = '500px'
+      }
+    },
+    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 = {}
+    },
+    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>