JSFiddle - React, Tailwind, and code Playground

by activescott

HTML

<body ng-app="test" ng-controller="Ctrl">
<div ng-repeat="result in results.items">
    test
    <!-- results -->
    <ng-chart></ng-chart>
</div>
</body>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<style>

JavaScript

var myApp = angular.module('test', [])

myApp.directive('ngChart', function() {
  var directiveDefinitionObject = {
    restrict: 'E',
    replace: true,
    scope: true,
    template: '<ul style="list-style:none; margin:0;">'  +
                '<li ng-repeat="testResult in results.items[$index].results">'+
                    '<table class="table">'+
                        '<tr>'+
                            '<td style="border:1px solid; width:180px;">{{testResult.test.title}}</td>'+
      '<td ng-tests id="histogram{{$index}}" style="border:1px solid" index="{{$index}}" data="testResult" low="testResult.test.range_low" high="testResult.test.range_high" ng-init="countIndex()">'+
                        '</td>'+
                            '<td style="border:1px solid; width:100px;">{{testResult.test.range_low}}-{{testResult.test.range_high}}</td>'+
                        '</tr>'+
                    '</table>'+
                '</li>' +
            '</ul>'



  };
  return directiveDefinitionObject;
});

myApp.directive('ngTests', function(){

    return function(scope, element, attrs){
        var w = 470, h = 50,
        low = scope.$eval(attrs.low);
        high = scope.$eval(attrs.high);
        //indexValue = scope.$eval(attrs.index) - 1;

        var dataset = [low, high];

        attrs.$observe('index', function(observedIndex) {
            console.log('observedIndex:', observedIndex);
            indexValue = observedIndex;
            var stringifyId = indexValue.toString();
            
            
           // console.log(iElement('#histogram' + indexValue))
    
            var DOMObjc = '#histogram' + stringifyId;
    
            //console.log("my index is: " + DOMObjc)
    
            element.text("my index is: " + DOMObjc)
            // D3 section
            var chart = d3.select(DOMObjc)
            .data(dataset[0])
            .append('svg')
            .append('rect')
            .attr("x", 0)
            .attr("y", 0)
           ...