diff --git a/package.json b/package.json
index 12359301..9676c71a 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
"classnames": "^2.2.0",
"browserify-zlib": "ipfs/browserify-zlib",
"coriolis-data": "EDCD/coriolis-data",
- "d3": "3.5.16",
+ "d3": "4.6.0",
"fbemitter": "^2.0.0",
"lodash": "^4.15.0",
"lz-string": "^1.4.4",
diff --git a/src/app/components/BarChart.jsx b/src/app/components/BarChart.jsx
index 561921e2..8ab59851 100644
--- a/src/app/components/BarChart.jsx
+++ b/src/app/components/BarChart.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import d3 from 'd3';
+import * as d3 from 'd3';
import TranslatedComponent from './TranslatedComponent';
const MARGIN = { top: 15, right: 20, bottom: 40, left: 150 };
@@ -68,13 +68,13 @@ export default class BarChart extends TranslatedComponent {
this._updateDimensions = this._updateDimensions.bind(this);
this._hideTip = this._hideTip.bind(this);
- let scale = d3.scale.linear();
- let y0 = d3.scale.ordinal();
- let y1 = d3.scale.ordinal();
+ let scale = d3.scaleLinear();
+ let y0 = d3.scaleBand();
+ let y1 = d3.scaleBand();
- this.xAxis = d3.svg.axis().scale(scale).ticks(5).outerTickSize(0).orient('bottom').tickFormat(context.language.formats.s2);
- this.yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient('left');
- this.state = { scale, y0, y1, color: d3.scale.ordinal().range(props.colors) };
+ this.xAxis = d3.axisBottom(scale).ticks(5).tickSizeOuter(0).tickFormat(context.language.formats.s2);
+ this.yAxis = d3.axisLeft(y0).tickSizeOuter(0);
+ this.state = { scale, y0, y1, color: d3.scaleOrdinal().range(props.colors) };
}
/**
@@ -131,8 +131,8 @@ export default class BarChart extends TranslatedComponent {
let max = data.reduce((max, build) => (properties.reduce(((m, p) => (m > build[p] ? m : build[p])), max)), 0);
this.state.scale.range([0, innerWidth]).domain([0, max]);
- this.state.y0.domain(data.map(bName)).rangeRoundBands([0, innerHeight], 0.3);
- this.state.y1.domain(properties).rangeRoundBands([0, this.state.y0.rangeBand()]);
+ this.state.y0.domain(data.map(bName)).range([0, innerHeight], 0.3).padding(0.4);
+ this.state.y1.domain(properties).range([0, this.state.y0.bandwidth()]).padding(0.1);
this.setState({
barHeight,
@@ -192,7 +192,7 @@ export default class BarChart extends TranslatedComponent {
x={0}
y={y1(p)}
width={scale(build[p])}
- height={y1.rangeBand()}
+ height={y1.bandwidth()}
fill={color(p)}
onMouseOver={this._showTip.bind(this, build, p, propIndex)}
onMouseOut={this._hideTip}
diff --git a/src/app/components/DamageDealt.jsx b/src/app/components/DamageDealt.jsx
index e388ea89..5562db34 100644
--- a/src/app/components/DamageDealt.jsx
+++ b/src/app/components/DamageDealt.jsx
@@ -162,7 +162,7 @@ export default class DamageDealt extends TranslatedComponent {
let names = [];
let num = 1;
for (let i =0; i < ship.hardpoints.length; i++) {
- if (ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
+ if (ship.hardpoints[i].maxClass > 0 && ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
const m = ship.hardpoints[i].m;
let name = '' + num++ + ': ' + m.class + m.rating + (m.missile ? '/' + m.missile : '') + ' ' + translate(m.name || m.grp);
let engineering;
@@ -242,7 +242,7 @@ export default class DamageDealt extends TranslatedComponent {
let weapons = [];
for (let i = 0; i < ship.hardpoints.length; i++) {
- if (ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
+ if (ship.hardpoints[i].maxClass > 0 && ship.hardpoints[i].m && ship.hardpoints[i].enabled) {
const m = ship.hardpoints[i].m;
if (m.getDamage() && m.grp !== 'po') {
let dropoff = 1;
@@ -493,6 +493,7 @@ export default class DamageDealt extends TranslatedComponent {
series={this.state.weaponNames}
colors={DAMAGE_DEALT_COLORS}
func={this.state.calcDpsFunc}
+ points={200}
/>
@@ -508,6 +509,7 @@ export default class DamageDealt extends TranslatedComponent {
series={this.state.weaponNames}
colors={DAMAGE_DEALT_COLORS}
func={this.state.calcDpsFunc}
+ points={200}
/>
: null }
diff --git a/src/app/components/LineChart.jsx b/src/app/components/LineChart.jsx
index 30deac54..9cefe98a 100644
--- a/src/app/components/LineChart.jsx
+++ b/src/app/components/LineChart.jsx
@@ -1,8 +1,7 @@
import React from 'react';
-import d3 from 'd3';
+import * as d3 from 'd3';
import TranslatedComponent from './TranslatedComponent';
-const RENDER_POINTS = 20; // Only render 20 points on the graph
const MARGIN = { top: 15, right: 20, bottom: 35, left: 60 };
/**
@@ -13,6 +12,7 @@ export default class LineChart extends TranslatedComponent {
static defaultProps = {
xMin: 0,
yMin: 0,
+ points: 20,
colors: ['#ff8c0d']
};
@@ -29,6 +29,7 @@ export default class LineChart extends TranslatedComponent {
yUnit: React.PropTypes.string.isRequired,
series: React.PropTypes.array,
colors: React.PropTypes.array,
+ points: React.PropTypes.number,
};
/**
@@ -48,19 +49,19 @@ export default class LineChart extends TranslatedComponent {
let markerElems = [];
let detailElems = [];
- let xScale = d3.scale.linear();
- let xAxisScale = d3.scale.linear();
- let yScale = d3.scale.linear();
+ let xScale = d3.scaleLinear();
+ let xAxisScale = d3.scaleLinear();
+ let yScale = d3.scaleLinear();
let series = props.series;
let seriesLines = [];
- this.xAxis = d3.svg.axis().scale(xAxisScale).outerTickSize(0).orient('bottom');
- this.yAxis = d3.svg.axis().scale(yScale).ticks(6).outerTickSize(0).orient('left');
+ this.xAxis = d3.axisBottom(xAxisScale).tickSizeOuter(0);
+ this.yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0);
for(let i = 0, l = series ? series.length : 1; i < l; i++) {
let yAccessor = series ? function(d) { return yScale(d[1][this]); }.bind(series[i]) : (d) => yScale(d[1]);
- seriesLines.push(d3.svg.line().x((d) => xScale(d[0])).y(yAccessor));
- detailElems.push();
+ seriesLines.push(d3.line().x((d, i) => xScale(d[0])).y(yAccessor));
+ detailElems.push();
markerElems.push();
}
@@ -168,17 +169,17 @@ export default class LineChart extends TranslatedComponent {
* @param {Object} props React Component properties
*/
_updateSeriesData(props) {
- let { func, xMin, xMax, series } = props;
- let delta = (xMax - xMin) / RENDER_POINTS;
- let seriesData = new Array(RENDER_POINTS);
+ let { func, xMin, xMax, series, points } = props;
+ let delta = (xMax - xMin) / points;
+ let seriesData = new Array(points);
if (delta) {
- seriesData = new Array(RENDER_POINTS);
- for (let i = 0, x = xMin; i < RENDER_POINTS; i++) {
+ seriesData = new Array(points);
+ for (let i = 0, x = xMin; i < points; i++) {
seriesData[i] = [x, func(x)];
x += delta;
}
- seriesData[RENDER_POINTS - 1] = [xMax, func(xMax)];
+ seriesData[points - 1] = [xMax, func(xMax)];
} else {
let yVal = func(xMin);
seriesData = [[0, yVal], [1, yVal]];
diff --git a/src/app/components/PowerBands.jsx b/src/app/components/PowerBands.jsx
index d8dd8a5e..ad2ebcaf 100644
--- a/src/app/components/PowerBands.jsx
+++ b/src/app/components/PowerBands.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import d3 from 'd3';
+import * as d3 from 'd3';
import cn from 'classnames';
import TranslatedComponent from './TranslatedComponent';
import { wrapCtxMenu } from '../utils/UtilityFunctions';
@@ -46,10 +46,10 @@ export default class PowerBands extends TranslatedComponent {
*/
constructor(props, context) {
super(props);
- this.wattScale = d3.scale.linear();
- this.pctScale = d3.scale.linear().domain([0, 1]);
- this.wattAxis = d3.svg.axis().scale(this.wattScale).outerTickSize(0).orient('top').tickFormat(context.language.formats.r2);
- this.pctAxis = d3.svg.axis().scale(this.pctScale).outerTickSize(0).orient('bottom').tickFormat(context.language.formats.rPct);
+ this.wattScale = d3.scaleLinear();
+ this.pctScale = d3.scaleLinear().domain([0, 1]);
+ this.wattAxis = d3.axisTop(this.wattScale).tickSizeOuter(0).tickFormat(context.language.formats.r2);
+ this.pctAxis = d3.axisBottom(this.pctScale).tickSizeOuter(0).tickFormat(context.language.formats.rPct);
this._updateDimensions = this._updateDimensions.bind(this);
this._updateScales = this._updateScales.bind(this);
diff --git a/src/app/i18n/Language.jsx b/src/app/i18n/Language.jsx
index 57d26b67..f19bf439 100644
--- a/src/app/i18n/Language.jsx
+++ b/src/app/i18n/Language.jsx
@@ -6,7 +6,7 @@ import * as FR from './fr';
import * as IT from './it';
import * as RU from './ru';
import * as PL from './pl';
-import d3 from 'd3';
+import * as d3 from 'd3';
let fallbackTerms = EN.terms;
@@ -30,8 +30,8 @@ export function getLanguage(langCode) {
}
let currentTerms = lang.terms;
- let d3Locale = d3.locale(lang.formats);
- let gen = d3Locale.numberFormat('n');
+ let d3Locale = d3.formatLocale(lang.formats);
+ let gen = d3Locale.format('n');
if(lang === EN) {
translate = (t, x) => { return currentTerms[t + '_' + x] || currentTerms[t] || t; };
@@ -42,17 +42,19 @@ export function getLanguage(langCode) {
return {
formats: {
gen, // General number format (.e.g 1,001,001.1234)
- int: d3Locale.numberFormat(',.0f'), // Fixed to 0 decimal places (.e.g 1,001)
- f1: d3Locale.numberFormat(',.1f'), // Fixed to 1 decimal place (.e.g 1,001.1)
- f2: d3Locale.numberFormat(',.2f'), // Fixed to 2 decimal places (.e.g 1,001.10)
- s2: d3Locale.numberFormat('.2s'), // SI Format to 2 decimal places (.e.g 1.1k)
- pct: d3Locale.numberFormat('.2%'), // % to 2 decimal places (.e.g 5.40%)
- pct1: d3Locale.numberFormat('.1%'), // % to 1 decimal places (.e.g 5.4%)
- r1: d3Locale.numberFormat('.1r'), // Rounded to 1 significant number (.e.g 512 => 500, 4.122 => 4)
- r2: d3Locale.numberFormat('.2r'), // Rounded to 2 significant numbers (.e.g 512 => 510, 4.122 => 4.1)
- rPct: d3.format('%'), // % to 0 decimal places (.e.g 5%)
- 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)
+ int: d3Locale.format(',.0f'), // Fixed to 0 decimal places (.e.g 1,001)
+ f1: d3Locale.format(',.1f'), // Fixed to 1 decimal place (.e.g 1,001.1)
+ f2: d3Locale.format(',.2f'), // Fixed to 2 decimal places (.e.g 1,001.10)
+ s2: d3Locale.format('.2s'), // SI Format to 2 decimal places (.e.g 1.1k)
+ pct: d3Locale.format('.2%'), // % to 2 decimal places (.e.g 5.40%)
+ pct1: d3Locale.format('.1%'), // % to 1 decimal places (.e.g 5.4%)
+ 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)
time: (d) => (d < 0 ? '-' : '') + Math.floor(Math.abs(d) / 60) + ':' + ('00' + Math.floor(Math.abs(d) % 60)).substr(-2, 2)
},
translate,
diff --git a/src/less/charts.less b/src/less/charts.less
index b5c9a351..556e15d8 100755
--- a/src/less/charts.less
+++ b/src/less/charts.less
@@ -35,7 +35,8 @@ svg {
}
text {
- font-size: 0.8em;
+ font-size: 1.2em;
+ font-family: @fStandard;
fill: @primary-disabled;
}
@@ -55,7 +56,7 @@ svg {
}
.label {
- font-size: 0.75em;
+ font-size: 1.1em;
}
.text-tip {