diff --git a/src/components/Charts/AxisBottom.spec.tsx b/src/components/Charts/AxisBottom.spec.tsx index b263fa1c5811d15be0de247d0c28fe17464517ca..cb98bb7e1a7fde7cfd99983c29fa3adb6f431f9b 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 80fc0df58c16f577a8337d37655c01f5df998fa2..9bc1c15404e620a10e2b6988172d057444616921 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 62461a9cefb88e448efd6299b507741b1d7ddd4a..89eeb3e251800182eddcf4dab328b4eb9935af73 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={