From 37c4d5e1b6da34d5ad87b44ed4f16b97008ca8e6 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Thu, 11 Feb 2021 12:44:37 +0100
Subject: [PATCH] update: AxisBottom component
---
src/components/Charts/AxisBottom.spec.tsx | 14 ++++
src/components/Charts/AxisBottom.tsx | 13 ++--
.../__snapshots__/AxisBottom.spec.tsx.snap | 76 +++++++++++++++++++
3 files changed, 98 insertions(+), 5 deletions(-)
diff --git a/src/components/Charts/AxisBottom.spec.tsx b/src/components/Charts/AxisBottom.spec.tsx
index b263fa1c5..cb98bb7e1 100644
--- a/src/components/Charts/AxisBottom.spec.tsx
+++ b/src/components/Charts/AxisBottom.spec.tsx
@@ -51,4 +51,18 @@ describe('AxisBottom component test', () => {
)
expect(wrapper.getElement()).toMatchSnapshot()
})
+
+ it('should correctly render WEEK format of AxisBottom', () => {
+ const wrapper = mount(
+ <AxisBottom {...mockProps} timeStep={TimeStep.WEEK} />
+ )
+ expect(wrapper.getElement()).toMatchSnapshot()
+ })
+
+ it('should correctly render HALF_AN_HOUR format of AxisBottom', () => {
+ const wrapper = mount(
+ <AxisBottom {...mockProps} timeStep={TimeStep.HALF_AN_HOUR} />
+ )
+ expect(wrapper.getElement()).toMatchSnapshot()
+ })
})
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index 80fc0df58..9bc1c1540 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -72,14 +72,17 @@ function TextAxis(props: TextTypeProps) {
)}
</text>
)
- case TimeStep.HOUR:
- return (index + 1) % 2 ? (
+ case TimeStep.WEEK:
+ return (
<text y="10" dy="0.71em" transform={`translate(${width})`}>
- <tspan className={style} textAnchor="middle">
- {dataload.date.hour}
+ <tspan className={style} x="0" textAnchor="middle">
+ {dataload.date.toLocaleString({ weekday: 'narrow' })}
+ </tspan>
+ <tspan className={style} x="0" dy="1.2em" textAnchor="middle">
+ {dataload.date.toLocaleString({ day: 'numeric' })}
</tspan>
</text>
- ) : null
+ )
case TimeStep.HALF_AN_HOUR:
return !(index % 4) ? (
<text x={width} y="10" dy="0.71em">
diff --git a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
index 62461a9ce..89eeb3e25 100644
--- a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
@@ -77,6 +77,44 @@ exports[`AxisBottom component test should correctly render DAY format of AxisBot
/>
`;
+exports[`AxisBottom component test should correctly render HALF_AN_HOUR format of AxisBottom 1`] = `
+<AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ marginBottom={10}
+ marginLeft={10}
+ selectedDate={"2020-11-03T00:00:00.000Z"}
+ timeStep={10}
+ xScale={[Function]}
+/>
+`;
+
exports[`AxisBottom component test should correctly render MONTH format of AxisBottom 1`] = `
<AxisBottom
data={
@@ -115,6 +153,44 @@ exports[`AxisBottom component test should correctly render MONTH format of AxisB
/>
`;
+exports[`AxisBottom component test should correctly render WEEK format of AxisBottom 1`] = `
+<AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ marginBottom={10}
+ marginLeft={10}
+ selectedDate={"2020-11-03T00:00:00.000Z"}
+ timeStep={30}
+ xScale={[Function]}
+/>
+`;
+
exports[`AxisBottom component test should correctly render YEAR format of AxisBottom 1`] = `
<AxisBottom
data={
--
GitLab