Add engine and FSD profiles

ChangeLog.md

@@ -2,6 +2,7 @@
   * Power management panel now displays modules in descending order of power usage by default
   * Shot speed can no longer be modified directly.  Its value is derived from the range modifier for Long Range and Focused modifications
   * Ensure that jump range chart updates when fuel slider is changed
+  * Add 'Engine profile' and 'FSD profile' charts.  These show how your maximum speed/jump range will alter as you alter the mass of your build
 
 #2.2.18
   * Change methodology for calculating explorer role; can result in lighter builds

src/app/components/EngineProfile.jsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import TranslatedComponent from './TranslatedComponent';
+import { Ships } from 'coriolis-data/dist';
+import ShipSelector from './ShipSelector';
+import { nameComparator } from '../utils/SlotFunctions';
+import LineChart from '../components/LineChart';
+import Slider from '../components/Slider';
+import * as ModuleUtils from '../shipyard/ModuleUtils';
+import Module from '../shipyard/Module';
+import * as Calc from '../shipyard/Calculations';
+
+/**
+ * Engine profile for a given ship
+ */
+export default class EngineProfile extends TranslatedComponent {
+  static PropTypes = {
+    ship: React.PropTypes.object.isRequired,
+    chartWidth: React.PropTypes.number.isRequired,
+    code: React.PropTypes.string.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    const ship = this.props.ship;
+
+    this.state = {
+      cargo: ship.cargoCapacity,
+      calcMaxSpeedFunc: this._calcMaxSpeed.bind(this, ship)
+    };
+  }
+
+  /**
+   * Update the state if our ship changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.code != this.props.code) {
+      this.setState({ cargo: nextProps.ship.cargoCapacity, calcMaxSpeedFunc: this._calcMaxSpeed.bind(this, nextProps.ship) });
+    }
+    return true;
+  }
+
+  /**
+   * Calculate the maximum speed for this ship across its applicable mass
+   * @param  {Object}  ship          The ship
+   * @param  {Object}  mass          The mass at which to calculate the top speed
+   * @return {number}                The maximum speed
+   */
+  _calcMaxSpeed(ship, mass) {
+    // Obtain the thrusters for this ship
+    const thrusters = ship.standard[1].m;
+
+    // Obtain the top speed
+    return Calc.speed(mass, ship.speed, thrusters, ship.engpip)[4];
+  }
+
+  /**
+   * Update cargo level
+   * @param  {number} cargoLevel Cargo level 0 - 1
+   */
+  _cargoChange(cargoLevel) {
+    let ship = this.props.ship;
+    let cargo = Math.round(ship.cargoCapacity * cargoLevel);
+    this.setState({
+      cargo
+    });
+  }
+
+  /**
+   * Render engine profile
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { ship } = this.props;
+    const { cargo } = this.state;
+
+    // Calculate bounds for our line chart
+    const thrusters = ship.standard[1].m;
+    const minMass = thrusters.getMinMass();
+    const maxMass = thrusters.getMaxMass();
+    const minSpeed = Calc.speed(maxMass, ship.speed, thrusters, ship.engpip)[4];
+    const maxSpeed = Calc.speed(minMass, ship.speed, thrusters, ship.engpip)[4];
+    let mass = ship.unladenMass + ship.fuelCapacity + cargo;
+    let mark;
+    if (mass < minMass) {
+      mark = minMass;
+    } else if (mass > maxMass) {
+      mark = maxMass;
+    } else {
+      mark = mass;
+    }
+
+    const cargoPercent = cargo / ship.cargoCapacity;
+
+    const code = ship.toString() + '.' + ship.getModificationsString() + '.' + ship.getPowerEnabledString();
+
+    // This graph has a precipitous fall-off so we use lots of points to make it look a little smoother
+    return (
+      <span>
+        <h1>{translate('engine profile')}</h1>
+        <LineChart
+          width={this.props.chartWidth}
+          xMin={minMass}
+          xMax={maxMass}
+          yMin={minSpeed}
+          yMax={maxSpeed}
+          xMark={mark}
+          xLabel={translate('mass')}
+          xUnit={translate('T')}
+          yLabel={translate('maximum speed')}
+          yUnit={translate('m/s')}
+          func={this.state.calcMaxSpeedFunc}
+          points={1000}
+          code={code}
+        />
+        {ship.cargoCapacity ? 
+        <span>
+          <h3>{translate('cargo carried')}</h3>
+          <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+            <tbody >
+              <tr>
+                <td>
+                  <Slider
+                    axis={true}
+                    onChange={this._cargoChange.bind(this)}
+                    axisUnit={translate('T')}
+                    percent={cargoPercent}
+                    max={ship.cargoCapacity}
+                    scale={sizeRatio}
+                    onResize={onWindowResize}
+                  />
+                </td>
+                <td className='primary' style={{ width: '5em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
+                  {formats.int(cargo)}{units.T}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </span> : '' }
+      </span>
+    );
+  }
+}

src/app/components/FSDProfile.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import TranslatedComponent from './TranslatedComponent';
+import { Ships } from 'coriolis-data/dist';
+import ShipSelector from './ShipSelector';
+import { nameComparator } from '../utils/SlotFunctions';
+import LineChart from '../components/LineChart';
+import Slider from '../components/Slider';
+import * as ModuleUtils from '../shipyard/ModuleUtils';
+import Module from '../shipyard/Module';
+import * as Calc from '../shipyard/Calculations';
+
+/**
+ * FSD profile for a given ship
+ */
+export default class FSDProfile extends TranslatedComponent {
+  static PropTypes = {
+    ship: React.PropTypes.object.isRequired,
+    chartWidth: React.PropTypes.number.isRequired,
+    code: React.PropTypes.string.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    const ship = this.props.ship;
+
+    this.state = {
+      cargo: ship.cargoCapacity,
+      calcMaxRangeFunc: this._calcMaxRange.bind(this, ship)
+    };
+  }
+
+  /**
+   * Update the state if our ship changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.code != this.props.code) {
+      this.setState({ cargo: nextProps.ship.cargoCapacity, calcMaxRangeFunc: this._calcMaxRange.bind(this, nextProps.ship) });
+    }
+    return true;
+  }
+
+  /**
+   * Calculate the maximum range for this ship across its applicable mass
+   * @param  {Object}  ship          The ship
+   * @param  {Object}  mass          The mass at which to calculate the maximum range
+   * @return {number}                The maximum range
+   */
+  _calcMaxRange(ship, mass) {
+    // Obtain the FSD for this ship
+    const fsd = ship.standard[2].m;
+
+    // Obtain the maximum range
+    return Calc.jumpRange(mass, fsd, fsd.getMaxFuelPerJump());
+  }
+
+  /**
+   * Update cargo level
+   * @param  {number} cargoLevel Cargo level 0 - 1
+   */
+  _cargoChange(cargoLevel) {
+    let ship = this.props.ship;
+    let cargo = Math.round(ship.cargoCapacity * cargoLevel);
+    this.setState({
+      cargo
+    });
+  }
+
+  /**
+   * Render engine profile
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { ship } = this.props;
+    const { cargo } = this.state;
+
+    
+    // Calculate bounds for our line chart - use thruster info for X
+    const thrusters = ship.standard[1].m;
+    const fsd = ship.standard[2].m;
+    const minMass = thrusters.getMinMass();
+    const maxMass = thrusters.getMaxMass();
+    const minRange = 0;
+    const maxRange = Calc.jumpRange(minMass + fsd.getMaxFuelPerJump(), fsd, fsd.getMaxFuelPerJump());
+    let mass = ship.unladenMass + fsd.getMaxFuelPerJump() + cargo;
+    let mark;
+    if (mass < minMass) {
+      mark = minMass;
+    } else if (mass > maxMass) {
+      mark = maxMass;
+    } else {
+      mark = mass;
+    }
+
+    const cargoPercent = cargo / ship.cargoCapacity;
+
+    const code = ship.name + ship.toString() + '.' + ship.getModificationsString() + '.' + ship.getPowerEnabledString();
+
+    return (
+      <span>
+        <h1>{translate('fsd profile')}</h1>
+        <LineChart
+          width={this.props.chartWidth}
+          xMin={minMass}
+          xMax={maxMass}
+          yMin={minRange}
+          yMax={maxRange}
+          xMark={mark}
+          xLabel={translate('mass')}
+          xUnit={translate('T')}
+          yLabel={translate('maximum range')}
+          yUnit={translate('LY')}
+          func={this.state.calcMaxRangeFunc}
+          points={200}
+          code={code}
+        />
+        {ship.cargoCapacity ? 
+        <span>
+          <h3>{translate('cargo carried')}</h3>
+          <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+            <tbody >
+              <tr>
+                <td>
+                  <Slider
+                    axis={true}
+                    onChange={this._cargoChange.bind(this)}
+                    axisUnit={translate('T')}
+                    percent={cargoPercent}
+                    max={ship.cargoCapacity}
+                    scale={sizeRatio}
+                    onResize={onWindowResize}
+                  />
+                </td>
+                <td className='primary' style={{ width: '5em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
+                  {formats.int(cargo)}{units.T}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </span> : '' }
+      </span>
+    );
+  }
+}

src/app/components/JumpRange.jsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import TranslatedComponent from './TranslatedComponent';
+import { Ships } from 'coriolis-data/dist';
+import ShipSelector from './ShipSelector';
+import { nameComparator } from '../utils/SlotFunctions';
+import LineChart from '../components/LineChart';
+import Slider from '../components/Slider';
+import * as ModuleUtils from '../shipyard/ModuleUtils';
+import Module from '../shipyard/Module';
+import * as Calc from '../shipyard/Calculations';
+
+/**
+ * Jump range for a given ship
+ */
+export default class JumpRange extends TranslatedComponent {
+  static PropTypes = {
+    ship: React.PropTypes.object.isRequired,
+    chartWidth: React.PropTypes.number.isRequired,
+    code: React.PropTypes.string.isRequired
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context   React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    const ship = this.props.ship;
+
+    this.state = {
+      fuelLevel: 1,
+      calcJumpRangeFunc: this._calcJumpRange.bind(this, ship)
+    };
+  }
+
+  /**
+   * Update the state if our ship changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   * @return {boolean}            Returns true if the component should be rerendered
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.code != this.props.code) {
+      this.setState({ fuelLevel: 1,
+                      calcJumpRangeFunc: this._calcJumpRange.bind(this, nextProps.ship) });
+    }
+    return true;
+  }
+
+  /**
+   * Calculate the jump range this ship at a given cargo
+   * @param  {Object}  ship          The ship
+   * @param  {Object}  cargo         The cargo
+   * @return {number}                The jump range
+   */
+  _calcJumpRange(ship, cargo) {
+    // Obtain the FSD for this ship
+    const fsd = ship.standard[2].m;
+
+    const fuel = this.state.fuelLevel * ship.fuelCapacity;
+
+    // Obtain the jump range
+    return Calc.jumpRange(ship.unladenMass + fuel + cargo, fsd, fuel);
+  }
+
+  /**
+   * Update fuel level
+   * @param  {number} fuelLevel Fuel level 0 - 1
+   */
+  _fuelChange(fuelLevel) {
+    this.setState({
+      fuelLevel,
+    });
+  }
+
+  /**
+   * Render engine profile
+   * @return {React.Component} contents
+   */
+  render() {
+    const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context;
+    const { formats, translate, units } = language;
+    const { ship } = this.props;
+    const { fuelLevel } = this.state;
+
+    const code = ship.toString() + '.' + ship.getModificationsString() + '.' + fuelLevel;
+
+    return (
+      <span>
+        <h1>{translate('jump range')}</h1>
+        <LineChart
+          width={this.props.chartWidth}
+          xMax={ship.cargoCapacity}
+          yMax={ship.unladenRange}
+          xLabel={translate('cargo')}
+          xUnit={translate('T')}
+          yLabel={translate('jump range')}
+          yUnit={translate('LY')}
+          func={this.state.calcJumpRangeFunc}
+          points={200}
+          code={code}
+        />
+        <h3>{translate('fuel carried')}</h3>
+        <table style={{ width: '100%', lineHeight: '1em', backgroundColor: 'transparent' }}>
+          <tbody >
+            <tr>
+              <td>
+                <Slider
+                  axis={true}
+                  onChange={this._fuelChange.bind(this)}
+                  axisUnit={translate('T')}
+                  percent={fuelLevel}
+                  max={ship.fuelCapacity}
+                  scale={sizeRatio}
+                  onResize={onWindowResize}
+                />
+              </td>
+              <td className='primary' style={{ width: '10em', verticalAlign: 'top', fontSize: '0.9em', textAlign: 'left' }}>
+                {formats.f2(fuelLevel * ship.fuelCapacity)}{units.T} {formats.pct1(fuelLevel)}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </span>
+    );
+  }
+}

src/app/components/LineChart.jsx

@@ -24,6 +24,7 @@ export default class LineChart extends TranslatedComponent {
     xMin: React.PropTypes.number,
     xMax: React.PropTypes.number.isRequired,
     xUnit: React.PropTypes.string.isRequired,
+    xMark: React.PropTypes.number,
     yLabel: React.PropTypes.string.isRequired,
     yMin: React.PropTypes.number,
     yMax: React.PropTypes.number.isRequired,
@@ -120,7 +121,7 @@ export default class LineChart extends TranslatedComponent {
 
     this.state.xScale.range([0, innerWidth]).domain([xMin, xMax || 1]).clamp(true);
     this.state.xAxisScale.range([0, innerWidth]).domain([xMin, xMax]).clamp(true);
-    this.state.yScale.range([innerHeight, 0]).domain([yMin, yMax * 1.1]); // 10% higher than maximum value for tooltip visibility
+    this.state.yScale.range([innerHeight, 0]).domain([yMin, yMax + (yMax - yMin) * 0.1]); // 10% higher than maximum value for tooltip visibility
     this.setState({ innerWidth, outerHeight, innerHeight });
   }
 
@@ -186,7 +187,7 @@ export default class LineChart extends TranslatedComponent {
       markerElems.push(<circle key={i} className='marker' r='4' />);
     }
 
-    const tipHeight = 2 + (1.2 * (seriesLines ? seriesLines.length : 0.8))
+    const tipHeight = 2 + (1.2 * (seriesLines ? seriesLines.length : 0.8));
 
     this.setState({ markerElems, detailElems, seriesLines, seriesData, tipHeight });
   }
@@ -228,13 +229,17 @@ export default class LineChart extends TranslatedComponent {
       return null;
     }
 
-    let { xLabel, yLabel, xUnit, yUnit, colors } = this.props;
+    let { xMin, xMax, xLabel, yLabel, xUnit, yUnit, xMark, colors } = this.props;
     let { innerWidth, outerHeight, innerHeight, tipHeight, detailElems, markerElems, seriesData, seriesLines } = this.state;
     let line = this.line;
     let lines = seriesLines.map((line, i) => <path key={i} className='line' fill='none' stroke={colors[i]} strokeWidth='1' d={line(seriesData)} />).reverse();
 
+    const markX = xMark ? innerWidth * (xMark - xMin) / (xMax - xMin) : 0;
+    const xmark = xMark ? <path key={'mark'} className='line' fill='none' strokeDasharray='5,5' stroke={colors[0]} strokeWidth='1' d={'M ' + markX + ' ' + innerHeight + ' L ' + markX + ' 0'} /> : '';
+
     return <svg style={{ width: '100%', height: outerHeight }}>
       <g transform={`translate(${MARGIN.left},${MARGIN.top})`}>
+        <g>{xmark}</g>
         <g>{lines}</g>
         <g className='x axis' ref={(elem) => d3.select(elem).call(this.xAxis)} transform={`translate(0,${innerHeight})`}>
           <text className='cap' y='30' dy='.1em' x={innerWidth / 2} style={{ textAnchor: 'middle' }}>

src/app/i18n/en.js

@@ -281,6 +281,12 @@ The retrofit costs provides information about the costs of changing the base bui
 
 The reload costs provides information about the costs of reloading your current build.</p>
 
+<h2>Engine Profile</h2>
+The engine profile panel provides information about the capabilities of your current thrusters.  The graph shows you how the maximum speed (with 4 pips to engines) alters with the overall mass of your build.  The slider can be altered to change the amount of cargo you have on-board.  Your engine profile can be altered by obtaining different thrusters or engineering your existing thrusters.</p>
+
+<h2>FSD Profile</h2>
+The FSD profile panel provides information about the capabilities of your current frame shift drive.  The graph shows you how the maximum jump range alters with the overall mass of your build.  The slider can be altered to change the amount of cargo you have on-board.  Your FSD profile can be altered by obtaining a different FSD or engineering your existing FSD.</p>
+
 <h2>Jump Range</h2>
 The jump range panel provides information about the build&apos; jump range.  The graph shows how the build&apos;s jump range changes with the amount of cargo on-board.  The slider can be altered to change the amount of fuel you have on-board.</p>
 

src/app/pages/OutfittingPage.jsx

@@ -8,7 +8,7 @@ import Persist from '../stores/Persist';
 import Ship from '../shipyard/Ship';
 import { toDetailedBuild } from '../shipyard/Serializer';
 import { outfitURL } from '../utils/UrlGenerators';
-import { FloppyDisk, Bin, Switch, Download, Reload, Fuel, LinkIcon, ShoppingIcon } from '../components/SvgIcons';
+import { FloppyDisk, Bin, Switch, Download, Reload, LinkIcon, ShoppingIcon } from '../components/SvgIcons';
 import ShipSummaryTable from '../components/ShipSummaryTable';
 import StandardSlotSection from '../components/StandardSlotSection';
 import HardpointsSlotSection from '../components/HardpointsSlotSection';
@@ -17,18 +17,17 @@ import UtilitySlotSection from '../components/UtilitySlotSection';
 import OffenceSummary from '../components/OffenceSummary';
 import DefenceSummary from '../components/DefenceSummary';
 import MovementSummary from '../components/MovementSummary';
+import EngineProfile from '../components/EngineProfile';
+import FSDProfile from '../components/FSDProfile';
+import JumpRange from '../components/JumpRange';
 import DamageDealt from '../components/DamageDealt';
 import DamageReceived from '../components/DamageReceived';
-import LineChart from '../components/LineChart';
 import PowerManagement from '../components/PowerManagement';
 import CostSection from '../components/CostSection';
 import ModalExport from '../components/ModalExport';
 import ModalPermalink from '../components/ModalPermalink';
 import Slider from '../components/Slider';
 
-const SPEED_SERIES = ['boost', '4 Pips', '2 Pips', '0 Pips'];
-const SPEED_COLORS = ['#0088d2', '#ff8c0d', '#D26D00', '#c06400'];
-
 /**
  * Document Title Generator
  * @param  {String} shipName  Ship Name
@@ -81,7 +80,6 @@ export default class OutfittingPage extends Page {
       ship.buildWith(data.defaults);  // Populate with default components
     }
 
-    let fuelCapacity = ship.fuelCapacity;
     this._getTitle = getTitle.bind(this, data.properties.name);
 
     return {
@@ -93,12 +91,7 @@ export default class OutfittingPage extends Page {
       shipId,
       ship,
       code,
-      savedCode,
-      fuelCapacity,
-      fuelLevel: 1,
-      jumpRangeChartFunc: ship.calcJumpRangeWith.bind(ship, fuelCapacity),
-      fastestRangeChartFunc: ship.calcFastestRangeWith.bind(ship, fuelCapacity),
-      speedChartFunc: ship.calcSpeedsWith.bind(ship, fuelCapacity)
+      savedCode
     };
   }
 
@@ -193,13 +186,9 @@ export default class OutfittingPage extends Page {
    * Trigger render on ship model change
    */
   _shipUpdated() {
-    let { shipId, buildName, ship, fuelCapacity } = this.state;
+    let { shipId, buildName, ship } = this.state;
     let code = ship.toString();
 
-    if (fuelCapacity != ship.fuelCapacity) {
-      this._fuelChange(this.state.fuelLevel);
-    }
-
     this._updateRoute(shipId, buildName, code);
     this.setState({ code });
   }
@@ -214,23 +203,6 @@ export default class OutfittingPage extends Page {
     Router.replace(outfitURL(shipId, code, buildName));
   }
 
-  /**
-   * Update current fuel level
-   * @param  {number} fuelLevel Fuel leval 0 - 1
-   */
-  _fuelChange(fuelLevel) {
-    let ship = this.state.ship;
-    let fuelCapacity = ship.fuelCapacity;
-    let fuel = fuelCapacity * fuelLevel;
-    this.setState({
-      fuelLevel,
-      fuelCapacity,
-      jumpRangeChartFunc: ship.calcJumpRangeWith.bind(ship, fuel),
-      fastestRangeChartFunc: ship.calcFastestRangeWith.bind(ship, fuel),
-      speedChartFunc: ship.calcSpeedsWith.bind(ship, fuel)
-    });
-  }
-
   /**
    * Update dimenions from rendered DOM
    */
@@ -240,7 +212,7 @@ export default class OutfittingPage extends Page {
     if (elem) {
       this.setState({
         thirdChartWidth: findDOMNode(this.refs.chartThird).offsetWidth,
-        halfChartWidth: findDOMNode(this.refs.chartHalf).offsetWidth
+        halfChartWidth: findDOMNode(this.refs.chartThird).offsetWidth * 3 / 2
       });
     }
   }
@@ -323,7 +295,7 @@ export default class OutfittingPage extends Page {
     let state = this.state,
         { language, termtip, tooltip, sizeRatio, onWindowResize } = this.context,
         { translate, units, formats } = language,
-        { ship, code, savedCode, buildName, newBuildName, halfChartWidth, thirdChartWidth, fuelCapacity, fuelLevel } = state,
+        { ship, code, savedCode, buildName, newBuildName, halfChartWidth, thirdChartWidth } = state,
         hide = tooltip.bind(null, null),
         menu = this.props.currentMenu,
         shipUpdated = this._shipUpdated,
@@ -333,6 +305,9 @@ export default class OutfittingPage extends Page {
         hStr = ship.getHardpointsString() + '.' + ship.getModificationsString(),
         iStr = ship.getInternalString() + '.' + ship.getModificationsString();
 
+    // Code can be blank for a default loadout.  Prefix it with the ship name to ensure that changes in default ships is picked up
+    code = ship.name + (code || '');
+
     return (
       <div id='outfit' className={'page'} style={{ fontSize: (sizeRatio * 0.9) + 'em' }}>
         <div id='overview'>
@@ -366,13 +341,13 @@ export default class OutfittingPage extends Page {
           </div>
         </div>
 
-        <ShipSummaryTable ship={ship} code={code || ''} />
-        <StandardSlotSection ship={ship} code={code || ''} onChange={shipUpdated} currentMenu={menu} />
+        <ShipSummaryTable ship={ship} code={code} />
+        <StandardSlotSection ship={ship} code={code} onChange={shipUpdated} currentMenu={menu} />
         <InternalSlotSection ship={ship} code={iStr} onChange={shipUpdated} currentMenu={menu} />
         <HardpointsSlotSection ship={ship} code={hStr || ''} onChange={shipUpdated} currentMenu={menu} />
         <UtilitySlotSection ship={ship} code={hStr || ''} onChange={shipUpdated} currentMenu={menu} />
 
-        <div className='group third'>
+        <div ref='chartThird' className='group third'>
           <OffenceSummary ship={ship} code={code}/>
         </div>
         <div className='group third'>
@@ -382,48 +357,19 @@ export default class OutfittingPage extends Page {
           <MovementSummary ship={ship} code={code}/>
         </div>
 
-        <PowerManagement ship={ship} code={code || ''} onChange={shipUpdated} />
-        <CostSection ship={ship} buildName={buildName} code={code || ''} />
+        <PowerManagement ship={ship} code={code} onChange={shipUpdated} />
+        <CostSection ship={ship} buildName={buildName} code={code} />
 
-        <div ref='chartHalf' className='group half' />
-        <div className='group half' />
+        <div className='group third'>
+          <EngineProfile ship={ship} code={code} chartWidth={thirdChartWidth} />
+        </div>
 
-        <div ref='chartThird' className='group third'>
-          <h1>{translate('jump range')}</h1>
-          <LineChart
-            width={thirdChartWidth}
-            xMax={ship.cargoCapacity}
-            yMax={ship.unladenRange}
-            xUnit={translate('T')}
-            yUnit={translate('LY')}
-            yLabel={translate('jump range')}
-            xLabel={translate('cargo')}
-            func={state.jumpRangeChartFunc}
-            code={state.fuelLevel}
-          />
-          <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 className='group third'>
+          <FSDProfile ship={ship} code={code} chartWidth={thirdChartWidth} />
+        </div>
+
+        <div className='group third'>
+          <JumpRange ship={ship} code={code} chartWidth={thirdChartWidth} />
         </div>
 
         <div>
@@ -438,56 +384,3 @@ export default class OutfittingPage extends Page {
     );
   }
 }
-//        <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}
-//          />
-//        </div>
-//        <div className='group third'>
-//          <h1>{translate('speed')}</h1>
-//          <LineChart
-//            width={chartWidth}
-//            xMax={ship.cargoCapacity}
-//            yMax={ship.topBoost + 10}
-//            xUnit={translate('T')}
-//            yUnit={translate('m/s')}
-//            yLabel={translate('speed')}
-//            series={SPEED_SERIES}
-//            colors={SPEED_COLORS}
-//            xLabel={translate('cargo')}
-//            func={state.speedChartFunc}
-//          />
-//        </div>
-//        <div className='group half'>
-//          <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>