JSFiddle - React, Tailwind, and code Playground

by CodeRenaissance

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="../../js/jquery.animate-colors-min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/js/external/knockout-latest.js"></script>
<script src="http://igniteui.com/js/external/knockout.mapping-latest.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.combo.knockout-extensions.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.datachart.knockout-extensions.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

<div class="main-container">
			<div class="clear"></div>
        <div class="sample-bar-chart-holder">
                <div id="barColumnChart" data-bind='doughnutChart:{
                    data: data,
                    title:"Yearly Profit", 
                    labelPropertyName:"month", 
                    valuePropertyName:"revenue"}'/>
        </div>
    </div>
</div>

CSS

.float { float: left; margin: 10px 10px 0 0; }
        .clear { clear: both; }
        .hr { border-top: 1px solid #2CBDF9; margin-bottom: 10px; }
        .options-container { width: 220px; padding-top: 70px; }
        .main-container { width: 100%; height: 850px; }
        .editor-container { float: left; margin: 0 25px 20px 5px; }
        .editor-container .labels { display: block; font-size: 13px; padding-bottom: 5px; }
        .year-profit { float: right; margin-left: 5px; font-weight: bold; border: none; }
        .eidtors-title { padding: 0 0 3px 2px; }
        .number-container { float: right; font-size: 30px; width: 200px; text-align: right; margin-right: 20px; }
        .btn-refresh { float: right; width: 48px; height: 48px; padding: 0; margin: 0;
            border-image-width: 0; cursor: pointer; border: 1px solid #999;
            background-image: url(http://igniteui.com/images/samples/data-chart/music-controls-sprite.png); 
            background-position: -434px -2px; background-repeat: no-repeat; }
            .btn-refresh:hover { background-position: -434px -50px; }

        /* Line chart container and legend */
        .sample-line-chart-holder {
            position: relative;
            width: 100%;
        }
        #legendLineChart { position: absolute; top: 120px; left: 45px; border: none; background-color: transparent; font-weight: bold;}

        /* Polar chart container and legend */
        .sample-polar-chart-holder {
            position: relative;
            width: 33.3%;
            float: left;
            margin-top: 10px;
        }
        .polar-chart-legend { position: absolute; top: 250px; left: 15px; border: none; background-color: transparent; font-weight: bold; }

        /* Line chart container and legend */
        .sample-bar-chart-holder {
            position: relative;
            width: 100%;
            float: left;
            margin-top: 10px;
        }
        #legendBarColumnChart { position: absolute; top:...

JavaScript

$(function () {
  console.log($("div").igDoughnutChart);

  ko.customHelpers = {
      getChartBindingWrapper:function(fnOptionsTranslator, baseBinding) {
          return {
              init: function (element, valueAccessor) {
                  var newValueAccessor = function () {
                      var oldAccessorValue = ko.utils.unwrapObservable(valueAccessor());
                      var result = fnOptionsTranslator(oldAccessorValue);
                      return result;
                  };

                  if (baseBinding.init) {
                      baseBinding.init(element, newValueAccessor);
                  }
              }
          };
      },
      getJQueryBindingWrapper: function (fnOptionsTranslator, elementInitializerName) {
          return {
              init: function (element, valueAccessor) {
                var configOptions = ko.utils.unwrapObservable(valueAccessor());
                var translatedConfigOptions = fnOptionsTranslator(configOptions);

                  if ($(element)[elementInitializerName]) {
                      $(element)[elementInitializerName](translatedConfigOptions)
                  }
              }
          };
      }
  };
  
	ko.bindingHandlers.doughnutChart = ko.customHelpers.getJQueryBindingWrapper(function (options){
		options = options || {
			data: [],
			title:"", 
			labelPropertyName:"", 
			valuePropertyName:"", 
			width:"", 
			height:""
		};
    console.log(options);
		var igDataChartOptions = {
			width: options.width || "450px",
			height: options.height || "300px",
			series:[{
				name: options.valuePropertyName || "value",
				labelMemberPath: options.labelPropertyName || "name",
				valueMemberPath: options.valuePropertyName || "value",
				dataSource: options.data || [],
				labelsPosition: "bestFit"
			}]
		};
		
		return igDataChartOptions;
		
	}, "igDoughnutChart");

            var dynamicModel,
                overallProfit = 0,
               MTHS = ["January", "February",...