From 0e4712bf2e470fdcdb64c427e7af2a33c2bd41e8 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Fri, 9 Dec 2022 16:00:09 +0500
Subject: [PATCH] Chart fixed

---
 src/assets/styles/_chartTable.scss | 12 ++++++++----
 src/assets/styles/_dataChart.scss  | 26 ++++++++++++++------------
 src/assets/styles/_general.scss    |  4 ++--
 src/assets/styles/_lineChart.scss  | 29 +++++++++++++++++++++++------
 src/components/LineChart.jsx       | 13 ++++++-------
 src/pages/Home.jsx                 |  3 ++-
 6 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/assets/styles/_chartTable.scss b/src/assets/styles/_chartTable.scss
index b7f7498..ba71337 100644
--- a/src/assets/styles/_chartTable.scss
+++ b/src/assets/styles/_chartTable.scss
@@ -39,10 +39,6 @@
 }
 
 @media (max-width: 1500px) {
-  .table {
-    max-width: 100%;
-  }
-
   .table-top {
     gap: 1.8rem;
   }
@@ -64,6 +60,14 @@
   .table {
     max-width: 100%;
   }
+
+  .table-row {
+    gap: 1rem;
+
+    div {
+      font-size: 1.4rem;
+    }
+  }
 }
 
 @media (max-width: 500px) {
diff --git a/src/assets/styles/_dataChart.scss b/src/assets/styles/_dataChart.scss
index 333b1b0..9cb2621 100644
--- a/src/assets/styles/_dataChart.scss
+++ b/src/assets/styles/_dataChart.scss
@@ -64,9 +64,9 @@
 }
 
 .chart-data {
-  display: flex;
-  gap: 3.9rem;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2.4rem;
 }
 
 @media (max-width: 1500px) {
@@ -80,21 +80,23 @@
     display: flex;
     justify-content: center;
   }
+}
+
+@media (max-width: 1200px) {
+  .tab {
+    font-size: 1.4rem;
+  }
 
   .chart-data {
     flex-direction: column;
   }
 }
 
-@media (max-width: 1200px) {
-  .tab {
-    font-size: 1.6rem;
-  }
-}
-
-@media (max-width: 1200px) {
-  .tab {
-    font-size: 1.4rem;
+@media (max-width: 1100px) {
+  .chart-data {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2.4rem;
   }
 }
 
diff --git a/src/assets/styles/_general.scss b/src/assets/styles/_general.scss
index a83339b..22ae605 100644
--- a/src/assets/styles/_general.scss
+++ b/src/assets/styles/_general.scss
@@ -8,9 +8,9 @@
 }
 
 .container {
-  padding: 0 1.5rem;
+  padding: 0 2rem;
   margin: 0 auto;
-  max-width: 154.2rem;
+  max-width: 155.2rem;
   width: 100%;
   // overflow-x: hidden;
 }
diff --git a/src/assets/styles/_lineChart.scss b/src/assets/styles/_lineChart.scss
index 13f4a77..c117a08 100644
--- a/src/assets/styles/_lineChart.scss
+++ b/src/assets/styles/_lineChart.scss
@@ -1,20 +1,37 @@
 .line-chart {
-  position: relative;
   width: 70rem;
   height: 35.5rem;
   overflow: hidden;
 }
 
-@media (max-width: 1500px) {
+@media (max-width: 1440px) {
   .line-chart {
-    width: 80%;
-    height: 100%;
+    width: 60rem;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
   .line-chart {
     width: 100%;
-    height: 100%;
+    height: 35.5rem;
   }
 }
+
+@media (max-width: 1100px) {
+  .line-chart {
+    height: 30rem;
+  }
+}
+
+@media (max-width: 425px) {
+  .line-chart {
+    height: 20rem;
+  }
+}
+
+// @media (max-width: 768px) {
+//   .line-chart {
+//     width: 100%;
+//     height: 100%;
+//   }
+// }
diff --git a/src/components/LineChart.jsx b/src/components/LineChart.jsx
index 6a03437..4825406 100644
--- a/src/components/LineChart.jsx
+++ b/src/components/LineChart.jsx
@@ -3,15 +3,15 @@ import { Line } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
   LineElement,
-  PointElement,
-  LinearScale,
-  Title,
   CategoryScale,
+  LinearScale,
+  PointElement,
+  Tooltip,
 } from 'chart.js';
 import { Api } from '../helpers/api';
 import { useState, useEffect } from 'react';
 
-ChartJS.register(LineElement, PointElement, LinearScale, Title, CategoryScale);
+ChartJS.register(LineElement, PointElement, LinearScale, Tooltip, CategoryScale);
 
 const LineChart = ({ activeRow }) => {
   const [dataLineChart, setDataLineChart] = useState();
@@ -67,7 +67,8 @@ const LineChart = ({ activeRow }) => {
   };
 
   const options = {
-    responsive: true,
+    // responsive: true,
+    maintainAspectRatio: false,
     radius: 5,
     hitRadius: 30,
     hoverRadius: 7,
@@ -78,8 +79,6 @@ const LineChart = ({ activeRow }) => {
         },
       },
       y: {
-        // min: 2,
-        // max: 5,
         ticks: {
           callback: (value) => value,
         },
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index d9efd8b..f04ef38 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -11,6 +11,7 @@ import DataChart from '../components/DataChart';
 // Icons
 import arrow from '../assets/icons/arrow.svg';
 import { Api } from '../helpers/api';
+import { dateReverse } from '../helpers/functions';
 
 const Home = () => {
   // Sets
@@ -107,7 +108,7 @@ const Home = () => {
                             key={news.id}
                             title={news.title}
                             shortDes={news.short_description}
-                            date={news.date}
+                            date={dateReverse(news.date)}
                             image={news.image}
                           />
                         );