npm package: @hzg0304/medical-temperature-chart-component
Description: A React component for displaying medical temperature charts
Author: hzg0304
Latest version: 1.1.1

Medical Temperature Chart Component
一个专业的 React 医疗体温图表组件库，用于显示患者的体温、脉搏、心率等医疗数据的可视化图表。

✨ 特性
📊 完整的医疗数据可视化 - 体温、脉搏、心率、呼吸等数据展示
🔥 物理降温支持 - 支持显示物理降温前后的体温对比
💓 多数据源支持 - 脉搏、心率数据同时显示和对比
🫁 呼吸频率记录 - 完整的呼吸数据记录和展示
📋 医疗信息表格 - 血压、入水量、出水量等详细信息
🎨 高度可定制 - 支持自定义样式、配置和事件回调
📱 响应式设计 - 适配不同屏幕尺寸
🔧 TypeScript 支持 - 完整的类型定义和 IntelliSense 支持
🚀 零依赖 - 除 React 外无其他运行时依赖
📦 轻量级 - 体积小，性能优异
📦 安装
bash
npm install medical-temperature-chart
或使用 yarn:

bash
yarn add medical-temperature-chart
🚀 快速开始
jsx
import React from 'react';
import { MedicalTemperatureChart } from 'medical-temperature-chart';

const patientData = {
  name: "张三",
  age: "32岁",
  gender: "男",
  inDate: "2023-08-01",
  diag: "感冒",
  dept: "内科",
  bed: "101",
  medicalNo: "202300123",
  outDate: "2023-08-07",
  dates: ["2023-08-01", "2023-08-02", "2023-08-03"],
  hospitalDays: [1, 2, 3],
  times: ["3", "7", "11", "15", "19", "23"],
  temperature: [
    [38.7, 38.9, 38.5],
    [38.5, 38.5, null],
    [38.5, 38.4, 38.2],
    [38.6, 36.5, 38.8],
    [38.9, 38.8, 38.5],
    [null, 38.9, 38.8]
  ],
  pulse: [
    [112, 110, 109],
    [85, 90, 83],
    [108, 85, 90],
    [null, 90, 83],
    [108, 85, 90],
    [100, null, null]
  ],
  heartRate: [
    [115, 112, 111],
    [88, 93, 86],
    [110, 88, 93],
    [90, 93, 86],
    [110, 88, 93],
    [102, 95, 98]
  ],
  breath: [30, 30, null, null, 35, 35, 35, 35, 35, 35, null, null, 24, 25, 26, 27],
  bloodPressure: ["120/85", "121/84", ""],
  intake: ["1180ml", "", ""],
  output: ["500ml", "", ""],
  bowel: [1, 3, ""],
  urine: [6, 3, ""],
  height: ["167cm", "", ""],
  weight: ["85kg", "80kg", ""],
  allergy: ["无", "阿莫西林", ""]
};

function App() {
  return (
    <div>
      <MedicalTemperatureChart 
        patientData={patientData}
        onPrint={() => console.log('打印')}
        onExport={() => console.log('导出')}
        onSave={() => console.log('保存')}
      />
    </div>
  );
}

export default App;
📚 API 文档
MedicalTemperatureChartProps
属性	类型	必需	默认值	描述
patientData	PatientData	✅	-	患者医疗数据
chartConfig	Partial<ChartConfig>	❌	defaultConfig	图表配置选项
className	string	❌	''	自定义 CSS 类名
showButtons	boolean	❌	true	是否显示操作按钮
onPrint	() => void	❌	-	打印按钮点击回调
onExport	() => void	❌	-	导出按钮点击回调
onSave	() => void	❌	-	保存按钮点击回调
PatientData 接口
typescript
interface PatientData {
  // 基本信息
  name: string;           // 患者姓名
  age: string;            // 年龄
  gender: string;         // 性别
  inDate: string;         // 入院日期
  diag: string;           // 诊断
  dept: string;           // 科室
  bed: string;            // 床位号
  medicalNo: string;      // 病案号
  outDate: string;        // 出院日期
  
  // 时间数据
  dates: string[];        // 日期数组
  hospitalDays: number[]; // 住院天数
  times: string[];        // 时间点 ["3", "7", "11", "15", "19", "23"]
  
  // 医疗数据 (二维数组：[时间点][日期])
  temperature: (number | string | null)[][]; // 体温数据
  pulse: (number | null)[][];                // 脉搏数据
  heartRate: (number | null)[][];            // 心率数据
  breath: (number | null)[];                 // 呼吸数据
  
  // 其他医疗数据 (按日期排列)
  bloodPressure: string[];  // 血压
  intake: string[];         // 入水量
  output: string[];         // 出水量
  bowel: (number | string)[]; // 大便次数
  urine: (number | string)[]; // 小便次数
  height: string[];         // 身高
  weight: string[];         // 体重
  allergy: string[];        // 过敏药物
}
ChartConfig 接口
typescript
interface ChartConfig {
  width: number;        // 图表宽度 (默认: 1160)
  height: number;       // 图表高度 (默认: 800)
  tempMin: number;      // 温度最小值 (默认: 35)
  tempMax: number;      // 温度最大值 (默认: 41)
  pulseMin: number;     // 脉搏最小值 (默认: 20)
  pulseMax: number;     // 脉搏最大值 (默认: 160)
  gridCols: number;     // 网格列数 (默认: 42)
  gridRows: number;     // 网格行数 (默认: 30)
  chartStartY: number;  // 图表起始Y坐标 (默认: 90)
  chartHeight: number;  // 图表区域高度 (默认: 500)
}
🔥 高级用法
自定义图表配置
jsx
const customChartConfig = {
  width: 1200,
  height: 900,
  gridCols: 48, // 8天 * 6个时间点
  chartHeight: 600
};

<MedicalTemperatureChart 
  patientData={patientData}
  chartConfig={customChartConfig}
  className="my-custom-chart"
  showButtons={false}
/>
物理降温数据格式
体温数据支持物理降温格式，使用 | 分隔原始温度和降温后温度：

jsx
const temperatureWithCooling = [
  [38.7, "39.1|37.0", 38.5], // 39.1°C 物理降温后 37.0°C
  [38.5, 38.5, null],
  // ... 更多数据
];
事件处理
jsx
const handlePrint = () => {
  // 自定义打印逻辑
  window.print();
};

const handleExport = () => {
  // 导出为 PDF 或图片
  // 可以使用 html2canvas 或 jsPDF
};

const handleSave = () => {
  // 保存数据到服务器
  fetch('/api/save-chart', {
    method: 'POST',
    body: JSON.stringify(patientData)
  });
};

<MedicalTemperatureChart 
  patientData={patientData}
  onPrint={handlePrint}
  onExport={handleExport}
  onSave={handleSave}
/>
🎨 自定义样式
jsx
// 使用自定义 CSS 类
<MedicalTemperatureChart 
  patientData={patientData}
  className="my-custom-chart"
/>
css
/* 自定义样式 */
.my-custom-chart {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.my-custom-chart .chart-header h1 {
  color: #0066cc;
  font-size: 24px;
}

.my-custom-chart .patient-info {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
}
📊 数据格式说明
温度数据格式
普通体温: 38.5 (数字)
物理降温: "39.1|37.0" (字符串，原始温度|降温后温度)
缺失数据: null
二维数组数据结构
javascript
// temperature[时间点索引][日期索引]
const temperature = [
  [38.7, 38.9, 38.5], // 3点的体温数据，对应3天
  [38.5, 38.5, null], // 7点的体温数据
  [38.5, 38.4, 38.2], // 11点的体温数据
  // ... 继续其他时间点
];
🛠️ 开发
本地开发
bash
# 克隆项目
git clone https://github.com/your-username/medical-temperature-chart.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 类型检查
npm run type-check

# 构建
npm run build
构建命令
bash
# 清理构建目录
npm run clean

# 类型检查
npm run type-check

# 构建库
npm run build

# 预览构建结果
npm run preview
🔧 技术栈
React - UI 框架
TypeScript - 类型安全
SVG - 高质量图表渲染
Rollup - 库打包工具
Vite - 开发服务器
📋 浏览器支持
Chrome >= 60
Firefox >= 60
Safari >= 12
Edge >= 79
🤝 贡献
欢迎贡献代码！请查看 贡献指南。

贡献步骤
Fork 项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

📞 支持
如果您在使用过程中遇到问题：

查看 Issues
创建新的 Issue
发送邮件到 your.email@example.com
🎯 路线图
 添加更多图表类型
 支持数据导出功能
 添加打印优化
 国际化支持
 移动端优化
 主题自定义
💡 示例项目
查看 示例项目 了解更多使用方法。

如果这个项目对您有帮助，请给个 ⭐️ 支持一下！

Made with ❤️ by Your Name