Spaces:
Sleeping
Sleeping
File size: 2,743 Bytes
c993983 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 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;
|