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

Chart performance tweaks, UI tweaks

Browse Source
This commit is contained in:
Colin McLeod
2015-06-15 21:46:55 -07:00
parent bee4f7e6bc
commit b94e6126cd
4 changed files with 47 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/js/directives/directive-area-chart.js
View File

@@ -19,7 +19,8 @@ angular.module('app').directive('areaChart', ['$window', function($window) {
xAxis = d3.svg.axis().outerTickSize(0).orient('bottom').tickFormat(d3.format('.2r')),
yAxis = d3.svg.axis().ticks(6).outerTickSize(0).orient('left').tickFormat(fmt),
x = d3.scale.linear(),
y = d3.scale.linear();
y = d3.scale.linear(),
data = [];
// Create chart
var svg = d3.select(element[0]).append('svg');
@@ -61,13 +62,35 @@ angular.module('app').directive('areaChart', ['$window', function($window) {
// Create and Add tooltip
var tip = vis.append('g').style('display', 'none');
tip.append('rect').attr('width', '4em').attr('height', '2em').attr('x', '0.5em').attr('y', '-1em').attr('class', 'tip');
tip.append('rect').attr('width', '5em').attr('height', '2em').attr('x', '0.5em').attr('y', '-1em').attr('class', 'tip');
tip.append('circle')
.attr('class', 'marker')
.attr('r', 4);
tip.append('text').attr('class', 'label x').attr('y', '-0.25em');
tip.append('text').attr('class', 'label y').attr('y', '0.85em');
vis.insert('path', ':first-child') // Area/Path to appear behind everything else
.data([data])
.attr('class', 'area')
.attr('fill', 'url(#gradient)')
.attr('d', area)
.on('mouseover', showTip)
.on('mouseout', hideTip)
.on('mousemove', moveTip)
.call(drag);
drag
.on('dragstart', function() {
dragging = true;
moveTip.call(this);
showTip();
})
.on('dragend', function() {
dragging = false;
hideTip();
})
.on('drag', moveTip);
/**
* Watch for changes in the series data (mass changes, etc)
*/
@@ -78,8 +101,9 @@ angular.module('app').directive('areaChart', ['$window', function($window) {
var width = element[0].parentElement.offsetWidth,
height = width * 0.5,
w = width - margin.left - margin.right,
h = height - margin.top - margin.bottom,
data = [];
h = height - margin.top - margin.bottom;
data.length = 0; // Reset Data array
if (series.xMax == series.xMin) {
var yVal = func(series.xMin);
@@ -95,7 +119,7 @@ angular.module('app').directive('areaChart', ['$window', function($window) {
// Update Chart Size
svg.attr('width', width).attr('height', height);
// Update domain and scale for axes;
// Update domain and scale for axes
x.range([0, w]).domain([series.xMin, series.xMax]).clamp(true);
xAxis.scale(x);
xLbl.attr('transform', 'translate(0,' + h + ')');
@@ -106,30 +130,9 @@ angular.module('app').directive('areaChart', ['$window', function($window) {
vis.selectAll('.y.axis').call(yAxis);
vis.selectAll('.x.axis').call(xAxis);
// Remove existing elements
vis.selectAll('path.area').remove();
vis.insert('path', ':first-child') // Area/Path to appear behind everything else
.datum(data)
.attr('class', 'area')
.attr('fill', 'url(#gradient)')
.attr('d', area)
.on('mouseover', showTip)
.on('mouseout', hideTip)
.on('mousemove', moveTip)
.call(drag);
drag
.on('dragstart', function() {
dragging = true;
moveTip.call(this);
showTip();
})
.on('dragend', function() {
dragging = false;
hideTip();
})
.on('drag', moveTip);
vis.selectAll('path.area') // Area/Path to appear behind everything else
.data([data])
.attr('d', area);
}
function showTip() {
@@ -145,8 +148,8 @@ angular.module('app').directive('areaChart', ['$window', function($window) {
function moveTip() {
var xPos = d3.mouse(this)[0], x0 = x.invert(xPos), y0 = func(x0), flip = (x0 / x.domain()[1] > 0.75);
tip.attr('transform', 'translate(' + x(x0) + ',' + y(y0) + ')');
tip.selectAll('rect').attr('x', flip ? '-4.5em' : '0.5em').style('text-anchor', flip ? 'end' : 'start');
tip.selectAll('text.label').attr('x', flip ? '-1em' : '1em').style('text-anchor', flip ? 'end' : 'start');
tip.selectAll('rect').attr('x', flip ? '-6.25em' : '0.5em').style('text-anchor', flip ? 'end' : 'start');
tip.selectAll('text.label').attr('x', flip ? '-2em' : '1em').style('text-anchor', flip ? 'end' : 'start');
tip.select('text.label.x').text(fmtLong(x0) + ' ' + labels.xAxis.unit);
tip.select('text.label.y').text(fmtLong(y0) + ' ' + labels.yAxis.unit);
}

31
app/js/shipyard/module-shipyard.js
View File

@@ -176,15 +176,15 @@ angular.module('shipyard', ['ngLodash'])
.value('calcJumpRange', function(mass, fsd, fuel) {
return Math.pow(Math.min(fuel === undefined ? fsd.maxfuel : fuel, fsd.maxfuel) / fsd.fuelmul, 1 / fsd.fuelpower ) * fsd.optmass / mass;
})
/**
* Calculate the maximum single jump range based on mass and a specific FSD
/**
* Calculate the total range based on mass and a specific FSD, and all fuel available
*
* @param {number} mass Mass of a ship: laden, unlanden, partially laden, etc
* @param {object} fsd The FDS object/component with maxfuel, fuelmul, fuelpower, optmass
* @param {number} fuel Optional - The fuel consumed during the jump (must be less than the drives max fuel per jump)
* @param {number} fuel The total fuel available
* @return {number} Distance in Light Years
*/
.value('calcTotalRangev1', function(mass, fsd, fuel) {
.value('calcTotalRange', function(mass, fsd, fuel) {
var fuelRemaining = fuel % fsd.maxfuel; // Fuel left after making N max jumps
var jumps = fuel / fsd.maxfuel;
mass += fuelRemaining;
@@ -196,29 +196,6 @@ angular.module('shipyard', ['ngLodash'])
totalRange += Math.pow(fsd.maxfuel / fsd.fuelmul, 1 / fsd.fuelpower ) * fsd.optmass / mass;
}
return totalRange;
})
/**
* Calculate the maximum single jump range based on mass and a specific FSD
*
* @param {number} mass Mass of a ship: laden, unlanden, partially laden, etc
* @param {object} fsd The FDS object/component with maxfuel, fuelmul, fuelpower, optmass
* @param {number} fuel Optional - The fuel consumed during the jump (must be less than the drives max fuel per jump)
* @return {number} Distance in Light Years
*/
.value('calcTotalRange', function(mass, fsd, fuel) {
var maxfuel = fsd.maxfuel;
var maxJumpCount = Math.floor(fuel / maxfuel);
var fuelRemaining = fuel % maxfuel;
var jumpCoefficient = Math.pow(fsd.maxfuel / fsd.fuelmul, 1 / fsd.fuelpower);
mass += fuelRemaining;
var massCoefficient = (fsd.optmass / maxfuel) * (Math.log(mass + (maxJumpCount * maxfuel)) - Math.log(mass));
var totalDistance = (jumpCoefficient * massCoefficient);
if (fuelRemaining > 0) {
totalDistance += Math.pow(fuelRemaining / fsd.fuelmul, 1 / fsd.fuelpower ) * fsd.optmass / mass;
}
return totalDistance;
})
/**
* Calculate the a ships shield strength based on mass, shield generator and shield boosters used.

29
app/less/charts.less
View File

@@ -1,29 +1,14 @@
.chart {
.user-select-none();
display: inline-block;
margin: 0;
cursor: default;
overflow: hidden;
.medPhone({
.axis {
font-size: 0.8em;
width: 33%;
box-sizing: border-box;
.tablet({
width: 50%;
});
.largePhone({
width: 100%;
});
h3 {
text-align: center;
&[ng-click] {
cursor: pointer;
g.tick:nth-child(2n + 1) text {
display: none;
}
}
}
});
}
svg {

4
app/views/page-outfit.html
View File

@@ -266,12 +266,12 @@
<div class="group dbl">
<h1>Jump Range</h1>
<div area-chart config="jrChart" series="jrSeries"></div>
<div class="chart" area-chart config="jrChart" series="jrSeries"></div>
</div>
<div class="group dbl">
<h1>Total Range</h1>
<div area-chart config="trChart" series="trSeries"></div>
<div class="chart" area-chart config="trChart" series="trSeries"></div>
</div>
<div class="group dbl">