update: AxisBottom component

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()
+  })
 })

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">

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={