refactor: display the right order for the temperature chart items (#188)

Author: moonflare

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "private": false,
   "dependencies": {
     "bulma": "^0.8.0",

src/components/temperature-chart/temperature-chart.js

@@ -6,10 +6,13 @@ import format from "date-fns/format";
 import fromUnixTime from "date-fns/fromUnixTime";
 
 export const TemperatureChart = ({ results = [], title }) => {
-  const yAxisData = results.map(item =>
+  // NOTE: Because of the way the Axes are displayed, we need
+  // to reverse the items order to show the original order
+  const itemsListReversed = results.reverse();
+  const yAxisData = itemsListReversed.map(item =>
     format(fromUnixTime(item.date), "dd.MM.yyyy / HH:mm")
   );
-  const xAxisData = results.map(item => ({
+  const xAxisData = itemsListReversed.map(item => ({
     value: item.temperature,
     itemStyle: { color: item.temperature > 37 ? "red" : "blue" }
   }));

src/components/temperature-chart/temperature-chart.stories.js

@@ -5,46 +5,16 @@ import { TemperatureChart } from "./temperature-chart";
 export default { title: "Temperature Chart" };
 
 const results = [
-  {
-    id: "134",
-    date: "1585409321",
-    temperature: 36.6
-  },
-  {
-    id: "136",
-    date: "1585409421",
-    temperature: 36
-  },
-  {
-    id: "139",
-    date: "1585409521",
-    temperature: 38.6
-  },
-  {
-    id: "140",
-    date: "1585409621",
-    temperature: 38.6
-  },
-  {
-    id: "134",
-    date: "1585409321",
-    temperature: 36.6
-  },
-  {
-    id: "136",
-    date: "1585409421",
-    temperature: 36
-  },
-  {
-    id: "139",
-    date: "1585409521",
-    temperature: 38.6
-  },
-  {
-    id: "140",
-    date: "1585409621",
-    temperature: 38.6
-  }
+  { date: 1588710285, temperature: 35 },
+  { date: 1588710285, temperature: 36 },
+  { date: 1588710285, temperature: 38 },
+  { date: 1588710285, temperature: 39 },
+  { date: 1588710285, temperature: 36.6 },
+  { date: 1588709754, temperature: 38.2 },
+  { date: 1588708675, temperature: 38 },
+  { date: 1588277085, temperature: 37 },
+  { date: 1588276813, temperature: 36 },
+  { date: 1588017389, temperature: 38 }
 ];
 
 export const temperatureChart = () => <TemperatureChart results={results} />;