function MainComponent() { const [chartData, setChartData] = React.useState([ { timestamp: '10:00', bpm: 70 }, { timestamp: '10:01', bpm: 72 }, { timestamp: '10:02', bpm: 75 }, { timestamp: '10:03', bpm: 78 }, { timestamp: '10:04', bpm: 80 } ]); const chartRef = React.useRef(null); const connectBluetooth = async ()=>{ try { const device = await navigator.bluetooth.requestDevice({ filters: [ { services: [ 'heart_rate' ] } ] }); const server = await device.gatt.connect(); const service = await server.getPrimaryService('heart_rate'); const characteristic = await service.getCharacteristic('heart_rate_measurement'); characteristic.startNotifications().then(()=>{ characteristic.addEventListener('characteristicvaluechanged', handleHeartRateChanged); }); } catch (error) { console.error('Failed to connect', error); } }; const handleHeartRateChanged = (event)=>{ const value = event.target.value; const bpm = value.getUint8(1); const timestamp = new Date().toLocaleTimeString(); setChartData((prevData)=>[ ...prevData, { timestamp, bpm } ]); }; React.useEffect(()=>{ if (chartRef.current) { const ctx = chartRef.current.getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: chartData.map((data)=>data.timestamp), datasets: [ { label: 'Heart Rate', data: chartData.map((data)=>data.bpm), borderColor: '#4caf50', fill: false } ] }, options: { responsive: true, scales: { x: { display: true }, y: { display: true, beginAtZero: true } } } }); } }, [ chartData ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col justify-center items-center font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-500 text-white p-4 text-center text-lg font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "Monitoramento Cardíaco via Smartwatch"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 w-full max-w-4xl bg-white shadow-md mt-6 rounded-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 rounded", onClick: connectBluetooth, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Conectar ao Smartwatch via Bluetooth")), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "Timestamp"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600", __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }, "BPM"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, chartData.map((data, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "whitespace-nowrap", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 95, columnNumber: 21 }, __self: this }, data.timestamp), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 96, columnNumber: 21 }, __self: this }, data.bpm))))))), /*#__PURE__*/ React.createElement("div", { className: "w-full mt-4", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: chartRef, className: "w-full h-[200px]", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(0.95); } 70% { transform: scale(1); } 100% { transform: scale(0.95); } } `)); }

Timestamp	BPM
10:00	70
10:01	72
10:02	75
10:03	78
10:04	80