JSFiddle - React, Tailwind, and code Playground

by Roydon DSouza

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div>
    <div ng-controller="mainCtrl">
        <fs-area bind="glucoseData" extra="patientData" width="900" height="400"></fs-area>
    </div>
</div>

CSS

/* axis line test */
 .axis path {
    fill: none;
    stroke:#000;
    stroke-width: 1.5px;
    shape-rendering: crispEdges;
}
/* axis tick marks */
 .axis line {
    fill: none;
    stroke: #000;
    stroke-width: 1.1px;
    shape-rendering: crispEdges;
}
/* controls the axis text */
 .axis text {
    fill: #333;
    stroke: none;
    shape-rendering: crispEdges;
    font-size: 16px;
}
/* controls the area */
 .area.fill {
    fill: #28ff44;
    fill-opacity: 0.2;
}
/* controls the top line in area */
 .area.line {
    fill: none;
    stroke: #5ab5eb;
    stroke-width: 3.0px;
}
.area.line.points {
    fill: #c6d6ff;
    stroke: #27c100;
    stroke-width: 2.0px;
}
.area.line.points.bad {
    fill: #ff0100;
    stroke: #fff600 stroke-width: 1.5px
}
/* histogram styles */
 .histo.rect {
    fill: #058dc7;
}
.bar.rect {
    fill: #0074bd;
    stroke: none;
}
.bar.text {
    fill: #000;
    stroke: none;
    font-size: 12px;
}
.legend {
    font-size: 12px;
}
rect {
    stroke-width: 2;
}

JavaScript

var app = angular.module('charts', []);
app.controller('mainCtrl', function AppCtrl($scope) {
    $scope.glucoseData = [{
        "time": "2014-12-27T14:28:52.000Z",
        "count": 100.6,
        "when": "before"
    }, {
        "time": "2014-12-27T21:10:52.000Z",
        "count": 140.6,
        "when": "after"
    }, {
        "time": "2014-12-28T04:28:52.000Z",
        "count": 111.6,
        "when": "before"
    }, {
        "time": "2014-12-28T13:10:52.000Z",
        "count": 94.6,
        "when": "after"
    }, {
        "time": "2014-12-28T23:28:52.000Z",
        "count": 139.6,
        "when": "before"
    }, {
        "time": "2014-12-29T12:10:52.000Z",
        "count": 103.6,
        "when": "after"
    }, {
        "time": "2014-12-29T17:20:52.000Z",
        "count": 143.6,
        "when": "before"
    }, {
        "time": "2014-12-30T03:20:52.000Z",
        "count": 100.6,
        "when": "after"
    }];
    $scope.patientData = {
        "before_meal_goal": 90,
        "after_meal_goal": 140
    };
}).directive('fsArea', [function ($scope, scope, $watchCollection) {
    return {
        restrict: 'E',

        // set up the isolate scope so that we don't clobber parent scope
        scope: {
            onClick: '=',
            width: '=',
            height: '=',
            bind: '=',
            extra: '=',
            label: '@',
            field: '@',
            duration: '@',
            delay: '@',
            plot: '@',
            pointRadius: '@'
        },

        link: function (scope, element, attrs) {

            function getDate(d) {
                return new Date(d);
            }

            var margin = {
                top: 20,
                right: 100,
                bottom: 30,
                left: 80
            };

            // default width/height - mainly to create initial aspect ratio
            var width = scope.width || 1280;
            var height = scope.height || 700;

            var minVal = 50;

    ...