@iamproperty/components 3.1.0 → 3.4.4

package/src/components/Chart/Chart.spec.js

@@ -1,201 +1,201 @@
-import { mount } from '@vue/test-utils'
-import Chart from './Chart.vue'
-
-describe('Chart component', () => {
-
-  const test = mount(Chart, {
-    propsData: {
-      max: 100,
-      min: 0,
-      yaxis: [
-        {
-          value: 0,
-          display: '£0'
-        },
-        {
-          value: 50,
-          display: '£50'
-        },
-        {
-          value: 100,
-          display: '£100'
-        }
-      ],
-      fields: [
-        { key: 'year' },
-        { key: 'Growth' },
-        { key: 'Growth2' }
-      ],
-      items: [
-        {
-          year: '2011',
-          growth: '£50.0',
-          growth2: '£50.10'
-        },
-        {
-          year: '2012',
-          growth: '£75.00',
-          growth2: '£50.10'
-        },
-        {
-          year: '2013',
-          growth: '£45.00',
-          growth2: '£57.10'
-        },
-        {
-          year: '2014',
-          growth: '£35.00',
-          growth2: '£80.10'
-        }
-      ]
-    }
-  })
-
-  // On load render a table
-  it('renders a thead', () => {
-
-    expect(test.find('thead').exists()).toBe(true)
-  })
-
-  it('renders a tbody', () => {
-
-    expect(test.find('tbody').exists()).toBe(true)
-  })
-
-  // Render a bar chart
-  it('renders a y-axis', () => {
-
-    expect(test.find('.chart__yaxis').exists()).toBe(true)
-  })
-
-  it('renders guidelines', () => {
-
-    expect(test.find('.chart__guidelines').exists()).toBe(true)
-  })
-
-
-  it('Numeric value and percent value is added to the table cells', () => {
-
-    expect(test.html()).toContain('<td data-label="Growth" data-numeric="50" style="--bottom:0%;--percent:50%;"><span data-group="2011" data-label="Growth">£50.0</span></td>')
-  })
-
-})
-
-
-describe('Line Chart component', () => {
-
-  const test = mount(Chart, {
-    propsData: {
-      type: 'line',
-      max: 100,
-      min: 0,
-      yaxis: [
-        {
-          value: 0,
-          display: '£0'
-        },
-        {
-          value: 50,
-          display: '£50'
-        },
-        {
-          value: 100,
-          display: '£100'
-        }
-      ],
-      fields: [
-        { key: 'year' },
-        { key: 'Growth' },
-        { key: 'Growth2' }
-      ],
-      items: [
-        {
-          year: '2011',
-          growth: '£50.0',
-          growth2: '£50.10'
-        },
-        {
-          year: '2012',
-          growth: '£75.00',
-          growth2: '£50.10'
-        },
-        {
-          year: '2013',
-          growth: '£45.00',
-          growth2: '£57.10'
-        },
-        {
-          year: '2014',
-          growth: '£35.00',
-          growth2: '£80.10'
-        }
-      ]
-    }
-  })
-
-  it('SVG line is created ', () => {
-
-    expect(test.html()).toContain('<path fill="none" d="M 0 50 L 66.66666666666667 25 L 133.33333333333334 55 L 200 65 "></path>')
-  })
-
-
-})
-
-describe('Pie Chart component', () => {
-
-  const test = mount(Chart, {
-    propsData: {
-      type: 'pie',
-      max: 100,
-      min: 0,
-      yaxis: [
-        {
-          value: 0,
-          display: '£0'
-        },
-        {
-          value: 50,
-          display: '£50'
-        },
-        {
-          value: 100,
-          display: '£100'
-        }
-      ],
-      fields: [
-        { key: 'year' },
-        { key: 'Growth' },
-        { key: 'Growth2' }
-      ],
-      items: [
-        {
-          year: '2011',
-          growth: '£50.0',
-          growth2: '£50.10'
-        },
-        {
-          year: '2012',
-          growth: '£75.00',
-          growth2: '£50.10'
-        },
-        {
-          year: '2013',
-          growth: '£45.00',
-          growth2: '£57.10'
-        },
-        {
-          year: '2014',
-          growth: '£35.00',
-          growth2: '£80.10'
-        }
-      ]
-    }
-  })
-
-  it('SVG pie section is created ', () => {
-
-    expect(test.html()).toContain('<path d="M -100 1.2246467991473532e-14 A 100 100 0 0 1 100 -2.4492935982947064e-14 L 0 0"></path>')
-  })
-
-
-})
+import { mount } from '@vue/test-utils'
+import Chart from './Chart.vue'
+
+describe('Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  // On load render a table
+  it('renders a thead', () => {
+
+    expect(test.find('thead').exists()).toBe(true)
+  })
+
+  it('renders a tbody', () => {
+
+    expect(test.find('tbody').exists()).toBe(true)
+  })
+
+  // Render a bar chart
+  it('renders a y-axis', () => {
+
+    expect(test.find('.chart__yaxis').exists()).toBe(true)
+  })
+
+  it('renders guidelines', () => {
+
+    expect(test.find('.chart__guidelines').exists()).toBe(true)
+  })
+
+
+  it('Numeric value and percent value is added to the table cells', () => {
+
+    expect(test.html()).toContain('<td data-label="Growth" data-numeric="50" style="--bottom:0%;--percent:50%;"><span data-group="2011" data-label="Growth">£50.0</span></td>')
+  })
+
+})
+
+
+describe('Line Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      type: 'line',
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  it('SVG line is created ', () => {
+
+    expect(test.html()).toContain('<path fill="none" d="M 0 50 L 66.66666666666667 25 L 133.33333333333334 55 L 200 65 "></path>')
+  })
+
+
+})
+
+describe('Pie Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      type: 'pie',
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  it('SVG pie section is created ', () => {
+
+    expect(test.html()).toContain('<path d="M -100 1.2246467991473532e-14 A 100 100 0 0 1 100 -2.4492935982947064e-14 L 0 0"></path>')
+  })
+
+
+})

package/src/components/Chart/Chart.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="container" ref="wrapper">
-    <slot></slot>
-    <figure class="chart__wrapper" ref="chartWrapper">
-      <figcaption v-html="caption"></figcaption>
-    <div :class="`chart__key chart__key--${type} h5`" role="presentation">
-      <div :key="index" v-for="(item,index) in fields" class="key">{{item.key}}</div>
-    </div>
-
-    <div :class="`chart chart--${type}`" ref="chart">
-
-      <div class="chart__yaxis" role="presentation">
-        <div :key="index" v-for="(point,index) in yaxis" :style="`--value: ${point.value};--percent:${((point.value-min)/(max-min))*100}%;`" class="axis__point">
-          <span>{{point.display}}</span>
-        </div>
-      </div>
-      <Table v-bind="$props">
-
-        <div class="chart__guidelines" role="presentation">
-          <div :key="index" v-for="(point,index) in yaxis" :data-value="point.value" :style="`--percent:${((point.value-min)/(max-min))*100}%;`" class="guideline">
-          </div>
-        </div>
-        <span class="lines" v-if="type == 'line'"></span>
-      </Table>
-      <div class="pies" v-if="type == 'pie'"></div>
-    </div>
-    </figure>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/charts.scss";
-</style>
-
-<script>
-import { ucfirst, unsnake } from '../../helpers/strings'
-import Table from '../../elements/Table/Table.vue'
-import chartModule from '../../../assets/js/modules/chart.js'
-
-export default {
-  name: 'Chart',
-  components: {
-    Table
-  },
-  props: {
-    type: {
-      type: String,
-      required: false,
-      default: 'bar'
-    },
-    caption: {
-      type: String,
-      required: false
-    },
-    max: {
-      type: Number,
-      required: true
-    },
-    min: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    yaxis: {
-      type: Array,
-      required: false
-    },
-    items: {
-      type: Array,
-      required: true
-    },
-    fields: {
-      type: Array,
-      required: true
-    }
-  },
-  mounted(){
-    this.$nextTick(function () {
-
-      // If the data gets updated we may need to recreate the tbody as it get detached when sorted in the table.js
-      const min = this.min;
-      const max = this.max - min;
-
-      chartModule(this.$refs.chartWrapper, min, max, this.type);
-    })
-  }
-}
-</script>
+<template>
+  <div class="container" ref="wrapper">
+    <slot></slot>
+    <figure class="chart__wrapper" ref="chartWrapper">
+      <figcaption v-html="caption"></figcaption>
+    <div :class="`chart__key chart__key--${type} h5`" role="presentation">
+      <div :key="index" v-for="(item,index) in fields" class="key">{{item.key}}</div>
+    </div>
+
+    <div :class="`chart chart--${type}`" ref="chart">
+
+      <div class="chart__yaxis" role="presentation">
+        <div :key="index" v-for="(point,index) in yaxis" :style="`--value: ${point.value};--percent:${((point.value-min)/(max-min))*100}%;`" class="axis__point">
+          <span>{{point.display}}</span>
+        </div>
+      </div>
+      <Table v-bind="$props">
+
+        <div class="chart__guidelines" role="presentation">
+          <div :key="index" v-for="(point,index) in yaxis" :data-value="point.value" :style="`--percent:${((point.value-min)/(max-min))*100}%;`" class="guideline">
+          </div>
+        </div>
+        <span class="lines" v-if="type == 'line'"></span>
+      </Table>
+      <div class="pies" v-if="type == 'pie'"></div>
+    </div>
+    </figure>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/charts.scss";
+</style>
+
+<script>
+import { ucfirst, unsnake } from '../../helpers/strings'
+import Table from '../../components/Table/Table.vue'
+import chartModule from '../../../assets/ts/modules/chart'
+
+export default {
+  name: 'Chart',
+  components: {
+    Table
+  },
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'bar'
+    },
+    caption: {
+      type: String,
+      required: false
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    yaxis: {
+      type: Array,
+      required: false
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    }
+  },
+  mounted(){
+    this.$nextTick(function () {
+
+      // If the data gets updated we may need to recreate the tbody as it get detached when sorted in the table.js
+      const min = this.min;
+      const max = this.max - min;
+
+      chartModule(this.$refs.chartWrapper, min, max, this.type);
+    })
+  }
+}
+</script>

package/src/components/Chart/README.md

@@ -1,18 +1,18 @@
-### Usage
-
-```
-<Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
-```
-
-###  Properties
-
-**The charts props inherit the table props** - As charts are an extension of the tables.
-
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| type  | String | bar | Changes the type of chart shown (bar, line or pie) or by passing none a table is shown. |
-| caption  | String | - | Optional but recommended for accessibility concerns. Describes and summarizes the chart and the data inside it. |
-| max  | Number | - | Required numeric value to be used to work out the size/position of the chart elements. |
-| min  | Number | 0 | Optional (deaults to 0) numeric value to be used to work out the size/position of the chart elements. |
+### Usage
+
+```
+<Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
+```
+
+###  Properties
+
+**The charts props inherit the table props** - As charts are an extension of the tables.
+
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| type  | String | bar | Changes the type of chart shown (bar, line or pie) or by passing none a table is shown. |
+| caption  | String | - | Optional but recommended for accessibility concerns. Describes and summarizes the chart and the data inside it. |
+| max  | Number | - | Required numeric value to be used to work out the size/position of the chart elements. |
+| min  | Number | 0 | Optional (deaults to 0) numeric value to be used to work out the size/position of the chart elements. |
 | yaxis  | Array | - | Array of labels to be shown along the y-axis |