Reinstate jump range graph

ChangeLog.md

@@ -22,6 +22,9 @@
   * Update shield recovery/regeneration calculations
   * Pin menu to top of page
   * Switch to custom shortlink method to avoid google length limitations
+  * Ensure that information is not lost on narrow screens
+  * Do not lose ship selector selection on narrow screens
+  * Reinstate jump range graph
 
 #2.2.5
   * Calculate rate of fire for multi-burst weapons

src/app/pages/OutfittingPage.jsx

@@ -338,7 +338,7 @@ export default class OutfittingPage extends Page {
         <PowerManagement ship={ship} code={code} onChange={shipUpdated} />
         <CostSection ship={ship} buildName={buildName} code={sStr + hStr + iStr} />
 
-        <div ref='chartThird' className='group third'>
+        <div className='group third'>
           <OffenceSummary ship={ship} code={code}/>
         </div>
 
@@ -350,6 +350,43 @@ export default class OutfittingPage extends Page {
           <MovementSummary ship={ship} code={code}/>
         </div>
 
+        <div ref='chartThird' className='group third'>
+          <h1>{translate('jump range')}</h1>
+          <LineChart
+            width={chartWidth}
+            xMax={ship.cargoCapacity}
+            yMax={ship.unladenRange}
+            xUnit={translate('T')}
+            yUnit={translate('LY')}
+            yLabel={translate('jump range')}
+            xLabel={translate('cargo')}
+            func={state.jumpRangeChartFunc}
+          />
+          <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+            <tbody >
+              <tr>
+                <td style={{ verticalAlign: 'top', padding: 0, width: '2.5em' }} onMouseEnter={termtip.bind(null, 'fuel level')} onMouseLeave={hide}>
+                  <Fuel className='xl primary-disabled' />
+                </td>
+                <td>
+                  <Slider
+                    axis={true}
+                    onChange={this._fuelChange}
+                    axisUnit={translate('T')}
+                    percent={fuelLevel}
+                    max={fuelCapacity}
+                    scale={sizeRatio}
+                    onResize={onWindowResize}
+                  />
+                </td>
+                <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
+                  {formats.f2(fuelLevel * fuelCapacity)}{units.T} {formats.pct1(fuelLevel)}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
         <div>
           <DamageDealt ship={ship} code={code} currentMenu={menu}/>
         </div>
@@ -357,8 +394,8 @@ export default class OutfittingPage extends Page {
         <div>
           <DamageReceived ship={ship} code={code} currentMenu={menu}/>
         </div>
-
       </div>
+
     );
   }
 }