Skip to content

Commit

Permalink
remove duplicate suspense boundary and fix charts padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@sainak
sainak committed Nov 5, 2024
1 parent 05ca9c6 commit 6b02b58
Show file tree
Hide file tree
Showing 8 changed files with 48 additions and 52 deletions.
18 changes: 9 additions & 9 deletions src/components/Facility/Consultations/ABGPlots.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const ABGPlots = (props: any) => {
return (
<div>
<div className="grid-row-1 grid gap-4 md:grid-cols-2">
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="PH"
name="PH"
Expand All @@ -56,7 +56,7 @@ export const ABGPlots = (props: any) => {
high={7.45}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="PCO2 (mm Hg)"
name="PCO2"
Expand All @@ -66,7 +66,7 @@ export const ABGPlots = (props: any) => {
high={45}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="PO2 (mm Hg)"
name="PO2"
Expand All @@ -76,7 +76,7 @@ export const ABGPlots = (props: any) => {
high={200}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="HCO3 (mmol/L)"
name="HCO3"
Expand All @@ -86,7 +86,7 @@ export const ABGPlots = (props: any) => {
high={26}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Base Excess (mmol/L)"
name="Base Excess"
Expand All @@ -96,7 +96,7 @@ export const ABGPlots = (props: any) => {
high={2}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Lactate (mmol/L)"
name="Lactate"
Expand All @@ -107,7 +107,7 @@ export const ABGPlots = (props: any) => {
high={2}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Sodium (mmol/L)"
name="Sodium"
Expand All @@ -117,7 +117,7 @@ export const ABGPlots = (props: any) => {
high={145}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Potassium (mmol/L)"
name="Potassium"
Expand All @@ -127,7 +127,7 @@ export const ABGPlots = (props: any) => {
high={5.5}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="FIO2(Ventilator)(%)"
name="fio2"
Expand Down
4 changes: 2 additions & 2 deletions src/components/Facility/Consultations/DialysisPlots.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const DialysisPlots = (props: any) => {
return (
<div>
<div className="grid-row-1 grid gap-4 md:grid-cols-2">
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Dialysis Fluid Balance"
name="Fluid Balance"
Expand All @@ -55,7 +55,7 @@ export const DialysisPlots = (props: any) => {
/>
</div>

<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Dialysis Net Balance"
name="Net Balance"
Expand Down
26 changes: 13 additions & 13 deletions src/components/Facility/Consultations/NutritionPlots.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,23 +182,23 @@ export const NutritionPlots = (props: any) => {
<div
className={showIO ? "grid-row-1 grid gap-4 md:grid-cols-2" : "hidden"}
>
<div className="rounded-lg border bg-white px-4 pt-4 md:col-span-2">
<div className="rounded-lg border bg-white p-4 md:col-span-2">
<LinePlot
title="IO Balance"
name="IO Balance"
xData={dates}
yData={IOvalues}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4">
<div className="rounded-lg border bg-white p-4">
<LinePlot
title="Total Intake"
name="Total Intake"
xData={dates}
yData={yAxisData("total_intake_calculated")}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4">
<div className="rounded-lg border bg-white p-4">
<LinePlot
title="Total Output"
name="Total Output"
Expand All @@ -221,22 +221,22 @@ export const NutritionPlots = (props: any) => {
)}
</div>
<div className={showIntake ? "grid gap-4 md:grid-cols-2" : "hidden"}>
<div className="rounded-lg border bg-white px-4 pt-4 md:col-span-2">
<div className="rounded-lg border bg-white p-4 md:col-span-2">
<LinePlot
title="Total Intake"
name="Total Intake"
xData={dates}
yData={yAxisData("total_intake_calculated")}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4">
<div className="rounded-lg border bg-white p-4">
<StackedLinePlot
title="Infusions"
xData={dates}
yData={Object.values(infusionsData)}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
<div className="rounded-lg border bg-white p-4 text-secondary-900">
<h3 className="text-lg">Infusions:</h3>
<div className="h-72 overflow-y-auto pb-2">
{Object.entries(results).map((obj: any) => {
Expand All @@ -257,14 +257,14 @@ export const NutritionPlots = (props: any) => {
})}
</div>
</div>
<div className="rounded-lg border bg-white px-4 pt-4">
<div className="rounded-lg border bg-white p-4">
<StackedLinePlot
title="IV Fluids"
xData={dates}
yData={Object.values(IVFluidsData)}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
<div className="rounded-lg border bg-white p-4 text-secondary-900">
<h3 className="text-lg">IV Fluids:</h3>
<div className="h-72 overflow-y-auto pb-2">
{Object.entries(results).map((obj: any) => {
Expand All @@ -285,14 +285,14 @@ export const NutritionPlots = (props: any) => {
})}
</div>
</div>
<div className="rounded-lg border bg-white px-4 pt-4">
<div className="rounded-lg border bg-white p-4">
<StackedLinePlot
title="Feeds"
xData={dates}
yData={Object.values(FeedsData)}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
<div className="rounded-lg border bg-white p-4 text-secondary-900">
<h3 className="text-lg">Feeds:</h3>
<div className="h-72 overflow-y-auto pb-2">
{Object.entries(results).map((obj: any) => {
Expand Down Expand Up @@ -332,22 +332,22 @@ export const NutritionPlots = (props: any) => {
showOutput ? "grid-row-1 grid gap-4 md:grid-cols-2" : "hidden"
}
>
<div className="rounded-lg border bg-white px-4 pt-4 md:col-span-2">
<div className="rounded-lg border bg-white p-4 md:col-span-2">
<LinePlot
title="Total Output"
name="Total Output"
xData={dates}
yData={yAxisData("total_output_calculated")}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4">
<div className="rounded-lg border bg-white p-4">
<StackedLinePlot
title="Output"
xData={dates}
yData={Object.values(OutputData)}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
<div className="rounded-lg border bg-white p-4 text-secondary-900">
<h3 className="text-lg">Output:</h3>
<div className="h-72 overflow-y-auto pb-2">
{Object.entries(results).map((obj: any) => {
Expand Down
16 changes: 8 additions & 8 deletions src/components/Facility/Consultations/PrimaryParametersPlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,10 @@ export const PrimaryParametersPlot = ({
return (
<div>
<div className="grid gap-4 md:grid-cols-2" id="vital-section">
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<StackedLinePlot title="BP" xData={dates} yData={BPData} />
</div>
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<LinePlot
title="Pulse"
name="Pulse"
Expand All @@ -140,26 +140,26 @@ export const PrimaryParametersPlot = ({
high={100}
/>
</div>
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<LinePlot
title="Temperature (F)"
name="Temperature"
xData={dates}
yData={yAxisData("temperature")}
/>
</div>
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<LinePlot
title="Resp"
name="Resp"
xData={dates}
yData={yAxisData("resp")}
/>
</div>
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<StackedLinePlot title="Insulin" xData={dates} yData={InsulinData} />
</div>
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<LinePlot
title="SPO2 (%)"
name="spo2"
Expand All @@ -169,7 +169,7 @@ export const PrimaryParametersPlot = ({
high={100}
/>
</div>
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<LinePlot
title="Ventilator FIO2 (%)"
name="fio2"
Expand All @@ -179,7 +179,7 @@ export const PrimaryParametersPlot = ({
high={60}
/>
</div>
<div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
<div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
<h3 className="text-sm">Rhythm</h3>
{Object.keys(rhythmValues).length === 0 ? (
<div className="flex h-64 items-center justify-center">
Expand Down
24 changes: 12 additions & 12 deletions src/components/Facility/Consultations/VentilatorPlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const VentilatorPlot = (props: any) => {
return (
<div>
<div className="grid-row-1 grid gap-4 md:grid-cols-2">
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="PIP"
name="PIP"
Expand All @@ -90,7 +90,7 @@ export const VentilatorPlot = (props: any) => {
high={30}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="MAP"
name="MAP"
Expand All @@ -100,7 +100,7 @@ export const VentilatorPlot = (props: any) => {
high={25}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Resp Rate"
name="resp"
Expand All @@ -110,7 +110,7 @@ export const VentilatorPlot = (props: any) => {
high={20}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Pressure Support"
name="Pressure Support"
Expand All @@ -120,15 +120,15 @@ export const VentilatorPlot = (props: any) => {
high={15}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Tidal Volume"
name="Tidal Volume"
xData={dates}
yData={yAxisData("ventilator_tidal_volume")}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="PEEP"
name="PEEP"
Expand All @@ -138,7 +138,7 @@ export const VentilatorPlot = (props: any) => {
high={10}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="FiO2"
name="FiO2"
Expand All @@ -148,7 +148,7 @@ export const VentilatorPlot = (props: any) => {
high={60}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="SpO2"
name="SpO2"
Expand All @@ -158,7 +158,7 @@ export const VentilatorPlot = (props: any) => {
high={100}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="EtCo2"
name="EtCo2"
Expand All @@ -168,23 +168,23 @@ export const VentilatorPlot = (props: any) => {
high={45}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<BinaryChronologicalChart
title="Bilateral Air Entry"
data={bilateral}
trueName="Yes"
falseName="No"
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Oxygen Flow Rate"
name="Oxygen Flow Rate"
xData={dates}
yData={yAxisData("ventilator_oxygen_modality_oxygen_rate")}
/>
</div>
<div className="rounded-lg border bg-white px-4 pt-4 shadow">
<div className="rounded-lg border bg-white p-4 shadow">
<LinePlot
title="Flow Rate"
name="Flow Rate"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Facility/Consultations/components/LinePlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ export const LinePlot = (props: any) => {
))}
<Suspense
fallback={
<div className="mb-4 grid h-16 place-items-center">
<div className="grid h-16 place-items-center">
<CircularProgress />
</div>
}
Expand Down
Loading

0 comments on commit 6b02b58

Please sign in to comment.