[FEATURE] Ajout d'un bloc Stat (PIX-1643).

components/ChartSection.vue

@@ -1,6 +1,5 @@
 <template>
   <section>
-    <prismic-rich-text :field="title" />
     <line-chart :type="'line'" :data="data" :width="300" :height="110" />
   </section>
 </template>
@@ -14,10 +13,6 @@ export default {
     LineChart,
   },
   props: {
-    title: {
-      type: Array,
-      default: null,
-    },
     data: {
       type: Object,
       default: null,

components/SliceZone.vue

@@ -62,6 +62,9 @@
       <template v-if="slice.slice_type === 'latest_news'">
         <latest-news-slice :slice="slice" />
       </template>
+      <template v-if="slice.slice_type === 'stat'">
+        <stat :slice="slice" />
+      </template>
     </section>
   </div>
 </template>
@@ -80,6 +83,7 @@ import WebSnippet from '@/components/slices/WebSnippet'
 import FeaturesSlice from '@/components/slices/Features'
 import MultipleBlockSlice from '@/components/slices/MultipleBlock'
 import PartnersLogosSlice from '@/components/slices/PartnersLogos'
+import Stat from '@/components/slices/Stat'
 
 export default {
   name: 'SliceZone',
@@ -97,6 +101,7 @@ export default {
     FeaturesSlice,
     ProcessSlice,
     PartnersLogosSlice,
+    Stat,
   },
   props: {
     slices: {

components/slices/Stat.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="stat">
+    <prismic-rich-text :field="content.block_title" />
+    <prismic-rich-text :field="content.block_presentation" />
+    <chart-section :data="chartData" />
+  </div>
+</template>
+
+<script>
+import ChartSection from '~/components/ChartSection'
+
+export default {
+  name: 'StatSlice',
+  components: {
+    ChartSection,
+  },
+  props: {
+    slice: {
+      type: Object,
+      default: null,
+    },
+  },
+  computed: {
+    content() {
+      return this.slice.primary
+    },
+    data() {
+      return this.slice.items
+    },
+
+    chartData() {
+      function backgroundColorFrom(color) {
+        const hex = color.replace('#', '')
+        const r = parseInt(hex.substring(0, 2), 16)
+        const g = parseInt(hex.substring(2, 4), 16)
+        const b = parseInt(hex.substring(4, 6), 16)
+
+        return 'rgba(' + r + ',' + g + ',' + b + ',0.2)'
+      }
+
+      const valueData = this.data.map((data) => data.data_value)
+      const labelData = this.data.map((data) => data.data_date)
+      const chartData = {
+        datasets: [
+          {
+            backgroundColor: backgroundColorFrom(
+              this.content.block_graph_color
+            ),
+            borderColor: this.content.block_graph_color,
+            data: valueData,
+            label: this.content.block_data_name[0].text,
+            type: 'line',
+          },
+        ],
+        labels: labelData,
+      }
+      return chartData
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.stat {
+  text-align: center;
+  max-width: 1140px;
+  margin: 0 50px;
+
+  @include device-is('desktop') {
+    margin: 0 auto;
+  }
+
+  canvas {
+    margin: 40px 0;
+  }
+}
+</style>

pages/pix-site/stats.vue

@@ -7,12 +7,10 @@
     </header>
     <main class="page-body">
       <div class="container md padding-container">
-        <chart-section
-          v-for="(chart, index) in chartsData"
-          :key="`chart-${index}`"
-          :title="document[chart.key]"
-          :data="chart.data"
-        />
+        <div v-for="(chart, index) in chartsData" :key="`chart-${index}`">
+          <prismic-rich-text :field="document[chart.key]" />
+          <chart-section :data="chart.data" />
+        </div>
       </div>
     </main>
   </main>

tests/components/slices/Stat.test.js

@@ -0,0 +1,70 @@
+import { shallowMount } from '@vue/test-utils'
+import { documentFetcher } from '~/services/document-fetcher'
+import Stat from '~/components/slices/Stat'
+
+jest.mock('~/services/document-fetcher')
+
+describe('Stat slice', () => {
+  let component
+  const get = jest.fn()
+
+  beforeEach(() => {
+    documentFetcher.mockReturnValue({
+      get,
+    })
+
+    get.mockResolvedValueOnce({
+      data: {
+        id: '',
+        meta: '',
+        page_title: '',
+      },
+    })
+  })
+
+  describe('Slice: Stat', () => {
+    beforeEach(() => {})
+
+    describe('#chartData', () => {
+      it('should return char datas', () => {
+        // given
+        component = shallowMount(Stat, {
+          stubs: {
+            fa: true,
+            'prismic-rich-text': true,
+            'chart-section': true,
+          },
+          propsData: {
+            slice: {
+              primary: {
+                block_data_name: [{ text: 'Data name' }],
+                block_graph_color: '#4700ff',
+              },
+              items: [
+                { data_value: 45, data_date: '2020-08-12' },
+                { data_value: 100, data_date: '2020-09-12' },
+              ],
+            },
+          },
+        })
+
+        // when
+        const result = component.vm.chartData
+
+        // then
+        expect(result).toEqual({
+          datasets: [
+            {
+              backgroundColor: 'rgba(71,0,255,0.2)',
+              borderColor: '#4700ff',
+              data: [45, 100],
+              label: 'Data name',
+              type: 'line',
+            },
+          ],
+          labels: ['2020-08-12', '2020-09-12'],
+        })
+      })
+    })
+  })
+})