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
ohcnetwork · Sep 25, 2022 · eb404fe · eb404fe
1 parent c1c2fcb
commit eb404fe
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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",