Change chart label colour to black; persist select outfitting subpage

src/app/components/OutfittingSubpages.jsx

@@ -2,8 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Ships } from 'coriolis-data/dist';
 import Ship from '../shipyard/Ship';
-import { Insurance } from '../shipyard/Constants';
-import { slotName, slotComparator } from '../utils/SlotFunctions';
+import Persist from '../stores/Persist';
 import TranslatedComponent from './TranslatedComponent';
 import PowerManagement from './PowerManagement';
 import CostSection from './CostSection';
@@ -42,9 +41,12 @@ export default class OutfittingSubpages extends TranslatedComponent {
   constructor(props) {
     super(props);
     this._powerTab = this._powerTab.bind(this);
+    this._profilesTab = this._profilesTab.bind(this);
+    this._offenceTab = this._offenceTab.bind(this);
+    this._defenceTab = this._defenceTab.bind(this);
 
     this.state = {
-      tab: 'power'
+      tab: Persist.getOutfittingTab() || 'power',
     };
   }
 
@@ -62,6 +64,7 @@ export default class OutfittingSubpages extends TranslatedComponent {
    */
   _powerTab() {
     let { ship, buildName, code, onChange } = this.props;
+    Persist.setOutfittingTab('power');
 
     return <div>
       <PowerManagement ship={ship} code={code} onChange={onChange} />
@@ -77,6 +80,7 @@ export default class OutfittingSubpages extends TranslatedComponent {
     const { ship, opponent, cargo, fuel, eng, boost, engagementRange } = this.props;
     const { translate } = this.context.language;
     let realBoost = boost && ship.canBoost();
+    Persist.setOutfittingTab('profiles');
 
     const engineProfileMarker = `${ship.toString()}:${cargo}:${fuel}:${eng}:${realBoost}`;
     const fsdProfileMarker = `${ship.toString()}:${cargo}:${fuel}`;
@@ -117,6 +121,7 @@ export default class OutfittingSubpages extends TranslatedComponent {
    */
   _offenceTab() {
     const { ship, sys, eng, wep, cargo, fuel, boost, engagementRange, opponent, opponentBuild } = this.props;
+    Persist.setOutfittingTab('offence');
 
     const marker = `${ship.toString()}:${opponent.name}:${opponentBuild}:${engagementRange}`;
 
@@ -131,6 +136,7 @@ export default class OutfittingSubpages extends TranslatedComponent {
    */
   _defenceTab() {
     const { ship, sys, eng, wep, cargo, fuel, boost, engagementRange, opponent, opponentBuild } = this.props;
+    Persist.setOutfittingTab('defence');
 
     const marker = `${ship.toString()}:${opponent.name}:${opponentBuild}:${engagementRange}`;
 
@@ -144,7 +150,7 @@ export default class OutfittingSubpages extends TranslatedComponent {
    * @return {React.Component} Contents
    */
   render() {
-    const tab = this.state.tab || 'power';
+    const tab = this.state.tab;
     const translate = this.context.language.translate;
     let tabSection;
 

src/app/components/PieChart.jsx

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import Measure from 'react-measure';
 import * as d3 from 'd3';
 
-const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#519032', '#D5420D'];
-const LABEL_COLOUR = '#FFFFFF';
+const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
+const LABEL_COLOUR = '#000000';
 
 /**
  * A pie chart

src/app/components/VerticalBarChart.jsx

@@ -3,8 +3,8 @@ import Measure from 'react-measure';
 import * as d3 from 'd3';
 import TranslatedComponent from './TranslatedComponent';
 
-const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#519032', '#D5420D'];
-const LABEL_COLOUR = '#FFFFFF';
+const CORIOLIS_COLOURS = ['#FF8C0D', '#1FB0FF', '#71A052', '#D5D54D'];
+const LABEL_COLOUR = '#000000';
 
 const margin = { top: 10, right: 0, bottom: 0, left: 55 };
 
@@ -105,7 +105,7 @@ export default class VerticalBarChart extends TranslatedComponent {
         .attr('x', 100)
         .attr('y', 100)
         .attr('stroke-width', '0px')
-        .attr('fill', '#ffffff')
+        .attr('fill', LABEL_COLOUR)
         .attr('x', d => this.x(d.label) + this.x.bandwidth() / 2)
         .attr('y', d => this.y(d.value) + 15)
         .text(d => d.value);

src/app/stores/Persist.js

@@ -5,6 +5,7 @@ const LS_KEY_BUILDS = 'builds';
 const LS_KEY_COMPARISONS = 'comparisons';
 const LS_KEY_LANG = 'NG_TRANSLATE_LANG_KEY';
 const LS_KEY_COST_TAB = 'costTab';
+const LS_KEY_OUTFITTING_TAB = 'outfittingTab';
 const LS_KEY_INSURANCE = 'insurance';
 const LS_KEY_SHIP_DISCOUNT = 'shipDiscount';
 const LS_KEY_MOD_DISCOUNT = 'moduleDiscount';
@@ -98,6 +99,7 @@ export class Persist extends EventEmitter {
     this.builds = buildJson && typeof buildJson == 'object' ? buildJson : {};
     this.comparisons = comparisonJson && typeof comparisonJson == 'object' ? comparisonJson : {};
     this.costTab = _getString(LS_KEY_COST_TAB);
+    this.outfittingTab = _getString(LS_KEY_OUTFITTING_TAB);
     this.state =  _get(LS_KEY_STATE);
     this.sizeRatio = _get(LS_KEY_SIZE_RATIO) || 1;
     this.tooltipsEnabled = tips === null ? true : tips;
@@ -472,6 +474,22 @@ export class Persist extends EventEmitter {
     return this.costTab;
   }
 
+  /**
+   * Persist selected outfitting tab
+   * @param {string} tabName Cost tab name
+   */
+  setOutfittingTab(tabName) {
+    this.outfittingTab = tabName;
+    _put(LS_KEY_OUTFITTING_TAB, tabName);
+  }
+  /**
+   * Get the current outfitting tab
+   * @return {string} the current outfitting tab
+   */
+  getOutfittingTab() {
+    return this.outfittingTab;
+  }
+
   /**
    * Retrieve the last router state from local storage
    * @return {Object} state State object containing state name and params