Spaces:
Sleeping
Sleeping
| import React from 'react'; | |
| import './AnalysisHelp.css'; | |
| interface Props { | |
| isOpen: boolean; | |
| onClose: () => void; | |
| } | |
| const AnalysisHelp: React.FC<Props> = ({ isOpen, onClose }) => { | |
| if (!isOpen) return null; | |
| return ( | |
| <div className="analysis-help-panel"> | |
| <div className="help-header"> | |
| <h3>🔍 Analysis Guide</h3> | |
| <button className="help-close" onClick={onClose}>×</button> | |
| </div> | |
| <div className="help-scroll"> | |
| <section className="help-section"> | |
| <h4>🖱️ Smart Selection</h4> | |
| <p>Drag an area on the map to batch select streams. | |
| <strong> Red bubbles</strong> are Hot streams (waste heat), | |
| <strong> Blue bubbles</strong> are Cold streams (heat demand). | |
| </p> | |
| </section> | |
| <section className="help-section"> | |
| <h4>📂 Scenarios</h4> | |
| <p>Save different project versions (e.g., "Night Shift" vs "Day Shift") as Scenarios to compare their energy performance side-by-side.</p> | |
| </section> | |
| <section className="help-section"> | |
| <h4>📉 Composite Curves</h4> | |
| <p>The <strong>horizontal overlap</strong> between the Hot and Cold lines represents the heat we can recover. The remaining gaps show the external energy we still need to pay for.</p> | |
| </section> | |
| <section className="help-section"> | |
| <h4>⛰️ Grand Composite Curve</h4> | |
| <p>Identifies the "Pinch Point" (the bottleneck). Pockets in the curve show where heat can be swapped internally without needing a heat pump.</p> | |
| </section> | |
| <section className="help-section"> | |
| <h4>⚡ Heat Pump Integration</h4> | |
| <p>The system automatically selects the highest-efficiency heat pump for your temperatures. Higher <strong>COP</strong> values mean better electricity-to-heat conversion.</p> | |
| </section> | |
| <section className="help-section"> | |
| <h4>📈 Performance Metrics</h4> | |
| <p><strong>Heating Savings:</strong> The percentage of energy saved compared to your current status quo. Aim for high recovery first!</p> | |
| </section> | |
| <div className="help-footer"> | |
| <p>✨ <em>Tip: Use the "Report" button to generate a full PDF-ready dashboard with all your interactive charts.</em></p> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default AnalysisHelp; | |