cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
               th, td, tr {
  font-size: 90%;  
  border-bottom: 1px solid gray;
  border-right: 1px solid gray; 
  padding: 10px;
  text-align: center;
}
#pieHeaders {
  text-align: center;
}
#pieCharts th {
  border: none;
}
img {
  height: 150px;
  display: in-line;
  float: left;
  padding-right: 30px;
}
#test {
  clear: both;
  padding-top: 15px;
}
#testh1 {
      -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#app {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    padding-left: 25px;

    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

h1, h2, p {
  text-align: left;
}


            
          
!
            
              //to do next: create the logic for the portfolios
//do this by creating a new array with the first cell a string naming the portfolio by allocation
//the rest will take the index positions of the funds' performace and weighting them ex. ((spy[4]*.6)+(agg[4]*.4)) for 60/40
//then create the .map just like the other tables used
//then just inject those two variables into the three test components (also rename them)
//fill out the top section <p>
//style it all up!
//footer with compliance statement
//add real fund data and you're done!
//expanded features: calendar year returns, CAGR (and growth of $100k to go with it), 
//a line chart (thats created by plotting the weighted calendar year returns?), import data from external source

//fund arrays and headers. parseFloat() will convert performance strings to numbers
var temp = ['Asset Class', 'Ticker', 'Name', '1yr', '3yr', '5yr', '10yr', 'Expense'];
var spy = ['Large-Cap U.S', 'SPY', 'S&P500 ETF', '4.44', '8.71', '13.44', '6.62', '0.09%'];
var agg = ['Intermediate-Term Bond', 'AGG', 'Barclays Total Bond ETF', '4.24', '3.47', '2.79', '4.47', '0.05%'];

//pie chart images and headers. random placeholders from internet
var pieHeader = ['Balanced Allocation', 'Growth Allocation', 'Conservative Allocation']
var balImg = 'http://docs.oracle.com/javafx/2/charts/img/pie-sample.png';
var grwImg = 'https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/img/pie-sample.png';
var consvImg = 'http://www.presentation-process.com/wp-content/uploads/non-uniform-pie-chart.jpg';
var pieCharts = [balImg, grwImg, consvImg];
    
//logic for mapping asset allocation pie charts
var pieHeadMap = pieHeader.map(function(prop) {
  return <th id ={prop}>{prop}</th>;
});

//logic for mapping fund info
var tableHead = temp.map(function(prop){
  return <th id ={prop}>{prop}</th>;
});
var spyDisplay = spy.map(function(prop) { 
  return <td id={prop}>{prop}</td>;
});
var aggDisplay = agg.map(function(prop) { 
  return <td id={prop}>{prop}</td>;
});

//top banner presentational component
var TopBanner = React.createClass({
  render: function () {
    return (
        <div id='topBanner'>
          <h1>Investment Selection Philosophy</h1>
            <p>blah blah blah</p>
        </div>
    );
  }
});

//fund list presentational component
var FundListDiv = React.createClass({
  render: function () {
    return (
      <div id='middleSection'>
          <h2>Fund Selection</h2>
          <table id='fundSelection'>
            <tr>{tableHead}</tr>
            <tr>{spyDisplay}</tr>
            <tr>{aggDisplay}</tr>
          </table>
        </div>
    );
  }
});

//clickable pie charts div
var AllocationDiv = React.createClass({
  getInitialState: function(){
    return {clicked: ''};
  },
  handleClick: function(prop) { 
    this.setState (
    {clicked: prop}
    ); 
  },
  render: function () {
    //look up why this.handleClick needs .bind and what .bind(this) is all about.
    //it takes an argument image from prop which is the full name of the image link. 
    //save images locally to match the var name to its not a mess in the switch statements
    var chartMap = pieCharts.map(function(prop){
      return <img onClick={this.handleClick.bind(null, prop)} id={prop} src={prop} />; //why does it take a second argument, null?
    }.bind(this)); 
	
    var imgVar = null; 
      switch (this.state.clicked){ 
        case 'http://docs.oracle.com/javafx/2/charts/img/pie-sample.png': imgVar = <TestComponentOne />; 
        break;
        case 'https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/img/pie-sample.png': imgVar = <TestComponentTwo />;
        break;
        case 'http://www.presentation-process.com/wp-content/uploads/non-uniform-pie-chart.jpg': imgVar = <TestComponentThree />;
        break;
      };
    return (
      <div id='bottomSection'>
          <h2>Select Desired Asset Allocation</h2>
          <div id='pieCharts'>
            <table>
              <tr id='pieHeaders'>{pieHeadMap}</tr>
            </table>
              <div>
                {chartMap}
                  <div id='test'>  
                    {imgVar}
                  </div>
              </div>
            </div>
        </div>
    );
  }
});
//test components for handleClick
var TestComponentOne = React.createClass({
  render: function() {
    return (
    <div>
      <h1 id='testh1'>Test1</h1>
    </div>
    );
  }
});
var TestComponentTwo = React.createClass({
  render: function() {
    return (
    <div>
      <h1 id='testh1'>Test2</h1>
    </div>
    );
  }
});
var TestComponentThree = React.createClass({
  render: function() {
    return (
    <div>
      <h1 id='testh1'>Test3</h1>
    </div>
    );
  }
});
//main rendering component. only job is to render all presentational components
var MyApp = React.createClass({

  render: function () {
    return (
      <div>
        <TopBanner />
        <FundListDiv />
        <AllocationDiv />
      </div>
    );
  }
});

ReactDOM.render(<MyApp />, document.getElementById('app'));

            
          
!
999px
Loading ..................

Console