Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-08 14:33:22 +00:00
Code Issues Projects Releases Wiki Activity

Move to newer version of d3

Browse Source
This commit is contained in:
Cmdr McDonald
2017-02-21 19:22:14 +00:00
parent bc31be5884
commit d2d8f084d2
7 changed files with 55 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -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",

20
src/app/components/BarChart.jsx
View File

@@ -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}

6
src/app/components/DamageDealt.jsx
View File

@@ -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}
/>
</div>
<div className='group half'>
@@ -508,6 +509,7 @@ export default class DamageDealt extends TranslatedComponent {
series={this.state.weaponNames}
colors={DAMAGE_DEALT_COLORS}
func={this.state.calcDpsFunc}
points={200}
/>
</div>
</span> : null }

31
src/app/components/LineChart.jsx
View File

@@ -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 = [<text key='lbl' className='text-tip x' y='1.25em'/>];
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(<text key={i} className='text-tip y' y={1.25 * (i + 2) + 'em'}/>);
seriesLines.push(d3.line().x((d, i) => xScale(d[0])).y(yAccessor));
detailElems.push(<text key={i} className='text-tip y' stroke={props.colors[i]} y={1.25 * (i + 2) + 'em'}/>);
markerElems.push(<circle key={i} className='marker' r='4' />);
}
@@ -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]];

10
src/app/components/PowerBands.jsx
View File

@@ -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);

30
src/app/i18n/Language.jsx
View File

@@ -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) => { return 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,

5
src/less/charts.less
View File

@@ -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 {