From c04a92c26c8ddda6a87e407f609b8d554001e841 Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 20 Nov 2020 15:36:38 +0100
Subject: [PATCH 1/3] Add simple Stat slice with only title and presentation

---
 components/SliceZone.vue   |  5 +++++
 components/slices/Stat.vue | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 components/slices/Stat.vue

diff --git a/components/SliceZone.vue b/components/SliceZone.vue
index 44019795c..5cc83e08f 100644
--- a/components/SliceZone.vue
+++ b/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: {
diff --git a/components/slices/Stat.vue b/components/slices/Stat.vue
new file mode 100644
index 000000000..4c1efdc4c
--- /dev/null
+++ b/components/slices/Stat.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="stat">
+    <prismic-rich-text :field="content.block_title" />
+    <prismic-rich-text :field="content.block_presentation" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatSlice',
+  props: {
+    slice: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      rows: [],
+    }
+  },
+  computed: {
+    content() {
+      return this.slice.primary
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 1140px;
+}
+</style>

From 99301238c56fe88958645bafe5a0a37ab7799351 Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 20 Nov 2020 16:31:40 +0100
Subject: [PATCH 2/3] Extract title of ChartSection

We only want to have the Chart in the ChartSection
---
 components/ChartSection.vue |  5 -----
 pages/pix-site/stats.vue    | 10 ++++------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/components/ChartSection.vue b/components/ChartSection.vue
index f4d94f824..414a1d6fd 100644
--- a/components/ChartSection.vue
+++ b/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,
diff --git a/pages/pix-site/stats.vue b/pages/pix-site/stats.vue
index 2f8aeb6e2..772118ace 100644
--- a/pages/pix-site/stats.vue
+++ b/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>

From a1a2175944476ad2871a22a3b08289666a025af6 Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 20 Nov 2020 16:42:44 +0100
Subject: [PATCH 3/3] Add ChartSection in Stat Slice

---
 components/slices/Stat.vue           | 57 ++++++++++++++++++----
 tests/components/slices/Stat.test.js | 70 ++++++++++++++++++++++++++++
 2 files changed, 118 insertions(+), 9 deletions(-)
 create mode 100644 tests/components/slices/Stat.test.js

diff --git a/components/slices/Stat.vue b/components/slices/Stat.vue
index 4c1efdc4c..f3d33425b 100644
--- a/components/slices/Stat.vue
+++ b/components/slices/Stat.vue
@@ -2,37 +2,76 @@
   <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,
     },
   },
-  data() {
-    return {
-      rows: [],
-    }
-  },
   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 {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0 auto;
+  text-align: center;
   max-width: 1140px;
+  margin: 0 50px;
+
+  @include device-is('desktop') {
+    margin: 0 auto;
+  }
+
+  canvas {
+    margin: 40px 0;
+  }
 }
 </style>
diff --git a/tests/components/slices/Stat.test.js b/tests/components/slices/Stat.test.js
new file mode 100644
index 000000000..526c79aa2
--- /dev/null
+++ b/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'],
+        })
+      })
+    })
+  })
+})