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 @@
@@ -14,10 +13,6 @@ export default {
LineChart,
},
props: {
- title: {
- type: Array,
- default: null,
- },
data: {
type: Object,
default: null,
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 @@
+
+
+
@@ -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..f3d33425b
--- /dev/null
+++ b/components/slices/Stat.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
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 @@
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'],
+ })
+ })
+ })
+ })
+})