feat(MED-161): separate doctor analysis view

2025-09-17 11:16:09 +03:00
parent 46774b286e
commit c51808d899
3 changed files with 285 additions and 1 deletions
--- a/app/doctor/_components/analysis-level-bar.tsx
+++ b/app/doctor/_components/analysis-level-bar.tsx
@@ -0,0 +1,134 @@
+import { useMemo } from 'react';
+
+import { ArrowDown } from 'lucide-react';
+
+import { cn } from '@kit/ui/utils';
+import { AnalysisResultForDisplay } from './analysis-doctor';
+
+export enum AnalysisResultLevel {
+  VERY_LOW = 0,
+  LOW = 1,
+  NORMAL = 2,
+  HIGH = 3,
+  VERY_HIGH = 4,
+}
+
+const Level = ({
+  isActive = false,
+  color,
+  isFirst = false,
+  isLast = false,
+  arrowLocation,
+}: {
+  isActive?: boolean;
+  color: 'destructive' | 'success' | 'warning' | 'gray-200';
+  isFirst?: boolean;
+  isLast?: boolean;
+  arrowLocation?: number;
+}) => {
+  return (
+    <div
+      className={cn(`bg-${color} relative h-3 flex-1`, {
+        'opacity-20': !isActive,
+        'rounded-l-lg': isFirst,
+        'rounded-r-lg': isLast,
+      })}
+    >
+      {isActive && (
+        <div
+          className="absolute top-[-14px] left-1/2 -translate-x-1/2 rounded-[10px] bg-white p-[2px]"
+          style={{ left: `${arrowLocation}%` }}
+        >
+          <ArrowDown strokeWidth={2} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const AnalysisLevelBarSkeleton = () => {
+  return (
+    <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
+      <Level color="gray-200" />
+    </div>
+  );
+};
+
+const AnalysisLevelBar = ({
+  normLowerIncluded = true,
+  normUpperIncluded = true,
+  level,
+  results,
+}: {
+  normLowerIncluded?: boolean;
+  normUpperIncluded?: boolean;
+  level: AnalysisResultLevel;
+  results: AnalysisResultForDisplay;
+}) => {
+
+  const { norm_lower: lower, norm_upper: upper, response_value: value } = results;
+  const arrowLocation = useMemo(() => {
+    if (value < lower!) {
+      return 0;
+    }
+    
+    if (normLowerIncluded || normUpperIncluded) {
+      return 50;
+    }
+
+    const calculated = ((value - lower!) / (upper! - lower!)) * 100;
+    
+    if (calculated > 100) {
+      return 100;
+    }
+    
+    return calculated;
+  }, [value, upper, lower]);
+
+  const [isVeryLow, isLow, isHigh, isVeryHigh] = useMemo(() => [
+    level === AnalysisResultLevel.VERY_LOW,
+    level === AnalysisResultLevel.LOW,
+    level === AnalysisResultLevel.HIGH,
+    level === AnalysisResultLevel.VERY_HIGH,
+  ], [level, value, upper, lower]);
+
+  const hasAbnormalLevel = isVeryLow || isLow || isHigh || isVeryHigh;
+
+  return (
+    <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
+      {normLowerIncluded && (
+        <>
+          <Level
+            isActive={isVeryLow}
+            color="destructive"
+            isFirst
+          />
+          <Level isActive={isLow} color="warning" />
+        </>
+      )}
+
+      <Level
+        isFirst={!normLowerIncluded}
+        isLast={!normUpperIncluded}
+        {...(hasAbnormalLevel ? { color: "warning", isActive: false } : { color: "success", isActive: true })}
+        arrowLocation={arrowLocation}
+      />
+
+      {normUpperIncluded && (
+        <>
+          <Level
+            isActive={isHigh}
+            color="warning"
+          />
+          <Level
+            isActive={isVeryHigh}
+            color="destructive"
+            isLast
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AnalysisLevelBar;