From eb404feb32b2bc54e3f8df7105aef5fe539d2f6a Mon Sep 17 00:00:00 2001
From: ARYAN PATEL <patelaryan7751@gmail.com>
Date: Sun, 25 Sep 2022 09:05:55 +0530
Subject: [PATCH] Made all graph of Patient Dashboard responsive in mobile
 devices  (#3322)

* Made the ABG  graph responsive in mobile devices

* Made the graphs responsive in mobile devices

* fixed the screen stretch
---
 src/Components/Facility/Consultations/MedicineTables.tsx      | 2 +-
 src/Components/Facility/Consultations/components/LinePlot.tsx | 4 +++-
 .../Facility/Consultations/components/StackedLinePlot.tsx     | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Components/Facility/Consultations/MedicineTables.tsx b/src/Components/Facility/Consultations/MedicineTables.tsx
index abee8bf9b1d..55d038b57d2 100644
--- a/src/Components/Facility/Consultations/MedicineTables.tsx
+++ b/src/Components/Facility/Consultations/MedicineTables.tsx
@@ -74,7 +74,7 @@ export const MedicineTables = (props: any) => {
           {Object.keys(results).map((k: any, indx: number) => (
             <div key={indx}>
               {Object.keys(results[k].medication_given).length !== 0 && (
-                <div className="grid md:grid-cols-full gap-4">
+                <div className="flex flex-col space-y-4">
                   <div className="mt-4">
                     <div className="text-md font-semibold leading-relaxed text-gray-900">
                       {moment(k).format("LLL")}
diff --git a/src/Components/Facility/Consultations/components/LinePlot.tsx b/src/Components/Facility/Consultations/components/LinePlot.tsx
index 8480f641a11..17c56c9645c 100644
--- a/src/Components/Facility/Consultations/components/LinePlot.tsx
+++ b/src/Components/Facility/Consultations/components/LinePlot.tsx
@@ -14,7 +14,7 @@ export const LinePlot = (props: any) => {
     title: {
       text: `${title} [ {0|${yData[yData.length - 1]?.toFixed(2) || "NA"}} ]`,
       textStyle: {
-        fontSize: 20,
+        fontSize: 14,
         rich: {
           0: {
             fontSize: 14,
@@ -35,6 +35,8 @@ export const LinePlot = (props: any) => {
     },
     toolbox: {
       show: true,
+      orient: "vertical",
+      top: "9%",
       feature: {
         dataZoom: {
           yAxisIndex: "none",
diff --git a/src/Components/Facility/Consultations/components/StackedLinePlot.tsx b/src/Components/Facility/Consultations/components/StackedLinePlot.tsx
index f0d9378ad01..dad49e87f19 100644
--- a/src/Components/Facility/Consultations/components/StackedLinePlot.tsx
+++ b/src/Components/Facility/Consultations/components/StackedLinePlot.tsx
@@ -27,7 +27,7 @@ export const StackedLinePlot = (props: any) => {
           .join(" | ") +
         " ] ",
       textStyle: {
-        fontSize: 20,
+        fontSize: 14,
         rich: Object.assign(
           {},
           COLORS.map((x: any) => ({
@@ -50,6 +50,8 @@ export const StackedLinePlot = (props: any) => {
     },
     toolbox: {
       show: true,
+      orient: "vertical",
+      top: "9%",
       feature: {
         dataZoom: {
           yAxisIndex: "none",