JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<head>
    <title>itemDetailPage</title>
    <!--link href="default.css" rel="stylesheet" />
    <link href="itemDetail.css" rel="stylesheet" /-->
    <script src="itemDetail.js"></script>
    <script type="text/javascript" src="https://rawgithub.com/mbostock/d3/master/d3.min.js"></script>
</head>
<body onload="onloadcode()">
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
             <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>

        </header>
        <div class="content" aria-label="Main content" role="main">
            <article>
                <header>
                     <h2 class="item-title">Microsoft</h2>

                     <h4 class="item-subtitle">MSFT &#9650;$5 (x%)</h4>

                </header>
                <!--<img class="item-chart" src="#" />-->
                <div class="chart-content" style="width:500px; float:left">
                    <div id="chart-candle" class="item-chart-candlestick" style="width:100%; height:400px">
                        <!-- not sure why, but height must be applied inline or it is disregarded -->
                        <!-- not sure why, but height must be applied inline or it is disregarded -->
                    </div>
                    <div id="chart-volume" class="item-chart-volume" style="width:100%; height:100px">
                        <!-- not sure why, but height must be applied inline or it is disregarded -->
                        <!-- not sure why, but height must be applied inline or it is disregarded -->
                    </div>
                </div>
                <div class="item-content" style="width:400px; float:left">
                    <div id="news">
                        <ul>
                           ...

CSS

body {
     font-family:"Segoe UI"
 }
 /* ===================   d3 css   ===================   */
 path.line {
     fill: none;
     stroke: #fff;
     stroke-width: 1.5px;
 }
 path.area {
     fill: #7394ff;
 }
 .axis {
     shape-rendering: crispEdges;
 }
 .x.axis line {
     stroke: #0ff;
 }
 .x.axis .minor {
     stroke-opacity: .5;
 }
 .x.axis path {
     display: none;
 }
 .y.axis line, .y.axis path {
     fill: none;
     stroke: #FFF;
 }
 /*  ===================   itemDetail css   ===================    */
 .itemdetailpage .content {
     -ms-grid-row: 1;
     -ms-grid-row-span: 2;
     display: block;
     height: 100%;
     overflow-x: auto;
     position: relative;
     width: 100%;
     z-index: 0;
 }
 .itemdetailpage .content article {
     /* Define a multi-column, horizontally scrolling article by default. */
     /*column-fill: auto;
        column-gap: 80px;
        column-width: 600px;*/
     /* was 480 */
     /* Create a 2x2 col layout */
     display: -ms-grid;
     -ms-grid-columns: 480px 1fr;
     /* 2 columns */
     -ms-grid-rows: 120px 1fr;
     /* 2 rows  */
     height: calc(100% - 183px);
     margin-left: 120px;
     margin-top: 133px;
     /*width: 600px;*/
     /* was 480 */
 }
 .itemdetailpage .content article #news {
     height: calc(100% - 183px);
 }
 .itemdetailpage .content article header {
     -ms-grid-column: 1;
     -ms-grid-column-span: 2;
     -ms-grid-row: 1;
 }
 .itemdetailpage .content article header .item-title {
     margin-bottom: 19px;
 }
 .itemdetailpage .content article header .item-subtitle {
     margin-bottom: 16px;
     margin-top: 0;
 }
 .itemdetailpage .content article .item-image {
     height: 240px;
     width: 460px;
 }
 .itemdetailpage .content article .item-content p {
     margin-top: 10px;
     margin-bottom: 20px;
     margin-right: 20px;
 }
 .itemdetailpage .content article .chart-content {
     -ms-grid-column: 1;
     -ms-grid-column-span: 1;
     -ms-grid-row: 2;
     -ms-grid-row-span: 1;
  ...

JavaScript

/* top right bottom left */
var m = [10, 35, 20, 0];

function onloadcode() {
    console.log(" ================== ON LOAD =====================");
    var days = 31; // # days to display
    var endDate = new Date(); // right now
    var startDate = new Date();
    var i = 0;
    startDate.setTime(startDate.getTime() - (days * 24 * 60 * 60 * 1000));

    // fake data
    var items = [{
        "symbol": "MSFT",
            "Date": "2013-06-18",
            "Open": "34.31",
            "High": "35.99",
            "Low": "33.49",
            "Close": "35.74",
            "adjClose": "34.36",
            "Volume": "30065400"
    }, {
        "symbol": "MSFT",
            "Date": "2013-06-19",
            "Open": "34.38",
            "High": "34.99",
            "Low": "35.49",
            "Close": "35.74",
            "adjClose": "34.36",
            "Volume": "31055400"
    }, {
        "symbol": "MSFT",
            "Date": "2013-06-20",
            "Open": "34.75",
            "High": "34.44",
            "Low": "35.96",
            "Close": "36.27",
            "adjClose": "33.94",
            "Volume": "37630000"
    }, {
        "symbol": "MSFT",
            "Date": "2013-06-21",
            "Open": "34.41",
            "High": "34.37",
            "Low": "35.58",
            "Close": "36.17",
            "adjClose": "34.01",
            "Volume": "15994400"
    }, {
        "symbol": "MSFT",
            "Date": "2013-06-22",
            "Open": "33.66",
            "High": "34.24",
            "Low": "35.28",
            "Close": "35.67",
            "adjClose": "34.21",
            "Volume": "26085900"
    }, {
        "symbol": "MSFT",
            "Date": "2013-06-23",
            "Open": "34.09",
            "High": "34.59",
            "Low": "34.90",
            "Close": "35.69",
            "adjClose": "34.33",
            "Volume": "32396900"
    }, {
        "symbol": "MSFT",
            "Date": "2013-06-24",
            "Open": "34.35",
           ...