Fix up formats for d3 v4

This commit is contained in:
Cmdr McDonald
2017-02-21 21:35:54 +00:00
parent d2d8f084d2
commit fd5ff3b6a8
4 changed files with 60 additions and 43 deletions

View File

@@ -69,8 +69,8 @@ export default class DamageDealt extends TranslatedComponent {
const ship = this.props.ship;
const against = DamageDealt.DEFAULT_AGAINST;
const range = 0.1667;
const maxRange = 6000;
const range = 0.5;
const maxRange = this._calcMaxRange(ship);
const maxDps = this._calcMaxDps(ship, against)
const weaponNames = this._weaponNames(ship, context);
@@ -83,7 +83,8 @@ export default class DamageDealt extends TranslatedComponent {
maxRange,
maxDps,
weaponNames,
calcDpsFunc: this._calcDps.bind(this, context, ship, weaponNames, against)
calcHullDpsFunc: this._calcDps.bind(this, context, ship, weaponNames, against, true),
calcShieldsDpsFunc: this._calcDps.bind(this, context, ship, weaponNames, against, false)
};
}
@@ -91,7 +92,7 @@ export default class DamageDealt extends TranslatedComponent {
* Set the initial weapons state
*/
componentWillMount() {
const data = this._calcWeaponsDps(this.props.ship, this.state.against, this.state.range * this.state.maxRange);
const data = this._calcWeaponsDps(this.props.ship, this.state.against, this.state.range * this.state.maxRange, true);
this.setState({ weapons: data.weapons, totals: data.totals });
}
@@ -103,12 +104,13 @@ export default class DamageDealt extends TranslatedComponent {
*/
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.code != this.props.code) {
const data = this._calcWeaponsDps(nextProps.ship, this.state.against, this.state.range * this.state.maxRange);
const data = this._calcWeaponsDps(nextProps.ship, this.state.against, this.state.range * this.state.maxRange, this.props.hull);
const weaponNames = this._weaponNames(nextProps.ship, nextContext);
this.setState({ weapons: data.weapons,
totals: data.totals,
weaponNames,
calcDpsFunc: this._calcDps.bind(this, nextContext, nextProps.ship, this.state.weaponNames, this.state.against) });
calcHullDpsFunc: this._calcDps.bind(this, nextContext, nextProps.ship, this.state.weaponNames, this.state.against, true),
calcShieldsDpsFunc: this._calcDps.bind(this, nextContext, nextProps.ship, this.state.weaponNames, this.state.against, false) });
}
return true;
}
@@ -124,7 +126,7 @@ export default class DamageDealt extends TranslatedComponent {
for (let i =0; i < ship.hardpoints.length; i++) {
if (ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
const m = ship.hardpoints[i].m;
const thisDps = m.getDps() * (m.getPiercing() >= against.properties.hardness ? 1 : m.getPiercing() / against.properties.hardness);
const thisDps = m.getDps();// * (m.getPiercing() >= against.properties.hardness ? 1 : m.getPiercing() / against.properties.hardness);
if (thisDps > maxDps) {
maxDps = thisDps;
}
@@ -140,18 +142,35 @@ export default class DamageDealt extends TranslatedComponent {
* @param {Object} range The engagement range
* @return {array} The array of weapon DPS
*/
_calcDps(context, ship, weaponNames, against, range) {
_calcDps(context, ship, weaponNames, against, hull, range) {
let results = {}
let weaponNum = 0;
for (let i = 0; i < ship.hardpoints.length; i++) {
if (ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
const m = ship.hardpoints[i].m;
results[weaponNames[weaponNum++]] = this._calcWeaponDps(context, m, against, range);
results[weaponNames[weaponNum++]] = this._calcWeaponDps(context, m, against, hull, range);
}
}
return results;
}
/**
*
*/
_calcMaxRange(ship) {
let maxRange = 1000;
for (let i =0; i < ship.hardpoints.length; i++) {
if (ship.hardpoints[i].maxClass > 0 && ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
const thisRange = ship.hardpoints[i].m.getRange();
if (thisRange > maxRange) {
maxRange = thisRange;
}
}
}
return maxRange;
}
/**
* Obtain the weapon names for this ship
* @param {Object} ship The ship
@@ -182,7 +201,7 @@ export default class DamageDealt extends TranslatedComponent {
}
_calcWeaponDps(context, m, against, range) {
_calcWeaponDps(context, m, against, hull, range) {
const translate = context.language.translate
let dropoff = 1;
if (m.getFalloff()) {
@@ -214,7 +233,7 @@ export default class DamageDealt extends TranslatedComponent {
const effectiveDpsHull = m.getDps() * effectivenessHull;
const effectiveSDpsHull = (m.getClip() ? (m.getClip() * m.getDps() / m.getRoF()) / ((m.getClip() / m.getRoF()) + m.getReload()) * effectivenessHull : effectiveDpsHull);
return effectiveSDpsHull;
return hull ? effectiveSDpsHull : effectiveSDpsShields;
}
/**
@@ -222,7 +241,7 @@ export default class DamageDealt extends TranslatedComponent {
* @param {Object} ship The ship which will deal the damage
* @param {Object} against The ship against which damage will be dealt
* @param {Object} range The engagement range
* @return {boolean} Returns the per-weapon damage
* @return {object} Returns the per-weapon damage
*/
_calcWeaponsDps(ship, against, range) {
const translate = this.context.language.translate;
@@ -319,7 +338,8 @@ export default class DamageDealt extends TranslatedComponent {
weapons: data.weapons,
totals: data.totals,
maxDps,
calcDpsFunc: this._calcDps.bind(this, this.context, this.props.ship, this.state.weaponNames, against) });
calcHullDpsFunc: this._calcDps.bind(this, this.context, this.props.ship, this.state.weaponNames, against, true),
calcShieldsDpsFunc: this._calcDps.bind(this, this.context, this.props.ship, this.state.weaponNames, against, false) });
}
/**
@@ -385,11 +405,11 @@ export default class DamageDealt extends TranslatedComponent {
{weapon.classRating} {translate(weapon.name)}
{weapon.engineering ? ' (' + weapon.engineering + ')' : null }
</td>
<td className='ri'>{formats.round1(weapon.effectiveDpsShields)}</td>
<td className='ri'>{formats.round1(weapon.effectiveSDpsShields)}</td>
<td className='ri'>{formats.f1(weapon.effectiveDpsShields)}</td>
<td className='ri'>{formats.f1(weapon.effectiveSDpsShields)}</td>
<td className='ri'>{formats.pct(weapon.effectivenessShields)}</td>
<td className='ri'>{formats.round1(weapon.effectiveDpsHull)}</td>
<td className='ri'>{formats.round1(weapon.effectiveSDpsHull)}</td>
<td className='ri'>{formats.f1(weapon.effectiveDpsHull)}</td>
<td className='ri'>{formats.f1(weapon.effectiveSDpsHull)}</td>
<td className='ri'>{formats.pct(weapon.effectivenessHull)}</td>
</tr>);
}
@@ -407,7 +427,8 @@ export default class DamageDealt extends TranslatedComponent {
this.setState({ range,
weapons: data.weapons,
totals: data.totals,
calcDpsFunc: this.props.ship.calcDps.bind(this, this.props.ship, this.state.weaponNames, against) });
calcHullDpsFunc: this._calcDps.bind(this, this.context, this.props.ship, this.state.weaponNames, this.state.against, true),
calcShieldsDpsFunc: this._calcDps.bind(this, this.context, this.props.ship, this.state.weaponNames, this.state.against, false) });
}
/**
@@ -419,7 +440,6 @@ export default class DamageDealt extends TranslatedComponent {
const { formats, translate, units } = language;
const { expanded, maxRange, range, totals } = this.state;
const sortOrder = this._sortOrder;
const onCollapseExpand = this._onCollapseExpand;
@@ -450,11 +470,11 @@ export default class DamageDealt extends TranslatedComponent {
<tfoot>
<tr className='main'>
<td className='ri'><i>{translate('total')}</i></td>
<td className='ri'><i>{formats.round1(totals.effectiveDpsShields)}</i></td>
<td className='ri'><i>{formats.round1(totals.effectiveSDpsShields)}</i></td>
<td className='ri'><i>{formats.f1(totals.effectiveDpsShields)}</i></td>
<td className='ri'><i>{formats.f1(totals.effectiveSDpsShields)}</i></td>
<td className='ri'><i>{formats.pct(totals.effectivenessShields)}</i></td>
<td className='ri'><i>{formats.round1(totals.effectiveDpsHull)}</i></td>
<td className='ri'><i>{formats.round1(totals.effectiveSDpsHull)}</i></td>
<td className='ri'><i>{formats.f1(totals.effectiveDpsHull)}</i></td>
<td className='ri'><i>{formats.f1(totals.effectiveSDpsHull)}</i></td>
<td className='ri'><i>{formats.pct(totals.effectivenessHull)}</i></td>
</tr>
</tfoot>
@@ -484,15 +504,14 @@ export default class DamageDealt extends TranslatedComponent {
<h1>{translate('damage against shields')}</h1>
<LineChart
width={this.props.chartWidth}
xMax={6000}
xMax={maxRange}
yMax={this.state.maxDps}
xLabel={translate('distance')}
xUnit={translate('m')}
yLabel={translate('damage')}
yUnit={translate('ps')}
yLabel={translate('sdps')}
series={this.state.weaponNames}
colors={DAMAGE_DEALT_COLORS}
func={this.state.calcDpsFunc}
func={this.state.calcShieldsDpsFunc}
points={200}
/>
</div>
@@ -500,15 +519,14 @@ export default class DamageDealt extends TranslatedComponent {
<h1>{translate('damage against hull')}</h1>
<LineChart
width={this.props.chartWidth}
xMax={6000}
xMax={maxRange}
yMax={this.state.maxDps}
xLabel={translate('distance')}
xUnit={translate('m')}
yLabel={translate('damage')}
yUnit={translate('ps')}
yLabel={translate('sdps')}
series={this.state.weaponNames}
colors={DAMAGE_DEALT_COLORS}
func={this.state.calcDpsFunc}
func={this.state.calcHullDpsFunc}
points={200}
/>
</div>

View File

@@ -26,7 +26,7 @@ export default class LineChart extends TranslatedComponent {
yLabel: React.PropTypes.string.isRequired,
yMin: React.PropTypes.number,
yMax: React.PropTypes.number.isRequired,
yUnit: React.PropTypes.string.isRequired,
yUnit: React.PropTypes.string,
series: React.PropTypes.array,
colors: React.PropTypes.array,
points: React.PropTypes.number,
@@ -99,7 +99,7 @@ export default class LineChart extends TranslatedComponent {
let yVal = series ? y0[series[i]] : y0;
yTotal += yVal;
return (series ? translate(series[i]) : '') + ' ' + formats.f2(yVal);
}).append('tspan').attr('class', 'metric').text(' ' + yUnit);
}).append('tspan').attr('class', 'metric').text(yUnit ? ' ' + yUnit : '');
tips.selectAll('text').each(function() {
if (this.getBBox().width > tipWidth) {
@@ -228,7 +228,7 @@ export default class LineChart extends TranslatedComponent {
let { xLabel, yLabel, xUnit, yUnit, 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' stroke={colors[i]} strokeWidth='2' d={line(seriesData)} />);
let lines = seriesLines.map((line, i) => <path key={i} className='line' fill='none' stroke={colors[i]} strokeWidth='1' d={line(seriesData)} />);
return <svg style={{ width: '100%', height: outerHeight }}>
<g transform={`translate(${MARGIN.left},${MARGIN.top})`}>
@@ -242,7 +242,7 @@ export default class LineChart extends TranslatedComponent {
<g className='y axis' ref={(elem) => d3.select(elem).call(this.yAxis)}>
<text className='cap' transform='rotate(-90)' y='-50' dy='.1em' x={innerHeight / -2} style={{ textAnchor: 'middle' }}>
<tspan>{yLabel}</tspan>
<tspan className='metric'> ({yUnit})</tspan>
{ yUnit && <tspan className='metric'> ({yUnit})</tspan> }
</text>
</g>
<g ref={(g) => this.tipContainer = d3.select(g)} style={{ display: 'none' }}>

View File

@@ -31,7 +31,8 @@ export function getLanguage(langCode) {
let currentTerms = lang.terms;
let d3Locale = d3.formatLocale(lang.formats);
let gen = d3Locale.format('n');
let gen = d3Locale.format('');
const round = function(x, n) { var ten_n = Math.pow(10,n); return Math.round(x * ten_n) / ten_n; }
if(lang === EN) {
translate = (t) => { return currentTerms[t] || t; };
@@ -51,10 +52,8 @@ export function getLanguage(langCode) {
r1: d3Locale.format('.1r'), // Rounded to 1 significant number (.e.g 512 => 500, 4.122 => 4)
r2: d3Locale.format('.2r'), // Rounded to 2 significant numbers (.e.g 512 => 510, 4.122 => 4.1)
rPct: d3Locale.format('.0%'), // % to 0 decimal places (.e.g 5%)
round1: d3Locale.format('.1r'), // Rounded to 0-1 decimal places (.e.g 5.1, 4)
round: d3Locale.format('.2r'), // Rounded to 0-2 decimal places (.e.g 5.12, 4.1)
//round1: (d) => gen(d3.round(d, 1)), // Rounded to 0-1 decimal places (.e.g 5.1, 4)
//round: (d) => gen(d3.round(d, 2)), // Rounded to 0-2 decimal places (.e.g 5.12, 4.1)
round1: (d) => gen(round(d, 1)), // Round to 0-1 decimal places (e.g. 5.1, 4)
round: (d) => gen(round(d, 2)), // Rounded to 0-2 decimal places (.e.g 5.12, 4.1)
time: (d) => (d < 0 ? '-' : '') + Math.floor(Math.abs(d) / 60) + ':' + ('00' + Math.floor(Math.abs(d) % 60)).substr(-2, 2)
},
translate,

View File

@@ -266,7 +266,7 @@ Along the top of this panel are the number of pips you put in to your ENG capaci
</dl>
<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.
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>
<h2>Damage Dealt</h2>
The damage dealt panel provides information about the effectiveness of your build&apos;s weapons against opponents&apos; shields and hull at different engagement distances.</p>
@@ -281,7 +281,7 @@ Total effective DPS, SDPS and effectiveness against both shields and hull are pr
At the bottom of this panel you can change your engagement range. The engagement range is the distance between your ship and your target. Many weapons suffer from what is known as damage falloff, where their effectiveness decreases the further the distance between your ship and your target. This allows you to model the effect of engaging at different ranges.
Note that this panel only shows enabled weapons, so if you want to see your overall effectiveness for a subset of your weapons you can disable the undesired weapons in the power management panel.
Note that this panel only shows enabled weapons, so if you want to see your overall effectiveness for a subset of your weapons you can disable the undesired weapons in the power management panel.</p>
<h2>Damage Received</h2>
The damage received panel provides information about the effectiveness of your build&apos;s defences against opponent&apos;s weapons at different engagement range. Features and functions are the same as the damage dealt panel, except that it does take in to account your build&apos;s resistances.</p>