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

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,313 @@
+<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>
+        <GoogleMap
+          api-key="AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c"
+          map-id="18650d0e6b0daeb1"
+          :style="`width: 100%; height: ${mapHeight}`"
+          :center="center"
+          :zoom="zoom"
+          :zoom-control="true"
+          :mapTypeControl="false"
+          :streetViewControl="false"
+          :fullscreenControl="true"
+        >
+          <Polygon
+            v-for="(location, i) in lgaBoundaries"
+            :options="location"
+            :key="i + polygonKey"
+          />
+          <CustomControl position="BOTTOM_CENTER">
+            <h4 v-if="unknownLGA">
+              <BBadge variant="light"> Unknown LGA {{ unknownLGA }} </BBadge>
+            </h4>
+          </CustomControl>
+          <AdvancedMarker
+            v-for="(location, i) in centerLGA"
+            :options="{
+              position: location.center,
+              title: `${location.lga} (${location.deaths} ${location.deaths > 1 ? 'fatalities' : 'fatality'})`,
+            }"
+            :key="i"
+            :pin-options="{
+              background: '#fdcd59',
+              glyph: `${location.deaths}`,
+              glyphColor: 'black',
+              borderColor: '#000000',
+              scale: 1,
+            }"
+          />
+        </GoogleMap>
+      </column>
+    </row>
+  </container>
+</template>
+
+<script>
+import lga from './lga-map.json'
+import {
+  GoogleMap,
+  Marker,
+  MarkerCluster,
+  Circle,
+  CustomControl,
+  InfoWindow,
+  Polygon,
+  AdvancedMarker,
+} 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, BBadge } from 'bootstrap-vue-next'
+
+export default {
+  name: 'GeoChart',
+  components: {
+    Row,
+    Column,
+    Container,
+    FilterButton,
+    SingleTaxonomy,
+    BFormGroup,
+    BFormSelect,
+    GoogleMap,
+    Marker,
+    MarkerCluster,
+    Circle,
+    CustomControl,
+    InfoWindow,
+    BButton,
+    Polygon,
+    AdvancedMarker,
+    BBadge,
+  },
+  props: {
+    statsData: { type: Array, default: () => [] },
+    filterFields: { type: Array, default: () => [] },
+    chart: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      lga,
+      zoom: 7,
+      mapHeight: '700px',
+      center: { lat: -36.5, lng: 145.3 },
+      hideReset: true,
+      isFiltering: false,
+      filters: {
+        taxonomies: [],
+        selected: {},
+        availableBundles: [],
+      },
+      unknownLGA: 0,
+      polygonKey: 1,
+    }
+  },
+  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
+    },
+    centerLGA: function () {
+      if (this.filteredList.length > 1) {
+        let location = {}
+        this.unknownLGA = 0
+        this.filteredList.forEach((item) => {
+          if (location[item.LGA]) {
+            location[item.LGA].deaths++
+          } else {
+            let pc = this.lga.find(
+              (obj) =>
+                obj.name ==
+                item.LGA.replace('-', ' ')
+                  .toUpperCase()
+                  .substring(0, obj.name.length),
+            )
+            if (pc) {
+              location[item.LGA] = {
+                center: { lat: pc.labelpoint[0], lng: pc.labelpoint[1] },
+                deaths: 1,
+                lga: pc.name,
+              }
+            } else {
+              this.unknownLGA++
+            }
+          }
+        })
+        return location
+      }
+    },
+    lgaBoundaries: function () {
+      let lgaData = lga.map((item) => {
+        return {
+          strokeColor: '#000000',
+          strokeOpacity: 0.8,
+          strokeWeight: 1,
+          fillColor: '#bababa',
+          fillOpacity: 0.5,
+          paths: item.boundaries.map((item) => {
+            return { lng: item[0], lat: item[1] }
+          }),
+        }
+      })
+      return lgaData
+    },
+  },
+  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>