JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<div ng-app="MyApp" ng-controller="DemoController">
  <b-bar-chart b-data="getData(question)"></b-bar-chart>
</div>

JavaScript

// App declaration
var MyApp = angular.module("MyApp", []);
// App controller
MyApp.controller("DemoController", ["$scope", function($scope) {
  $scope.getData = function (question) {
    return [
      {
        'name': 'Strongly Agree',
        'value': 1
      },
      {
        'name': 'Agree',
        'value': 2
      }
    ]
  }
}]);
MyApp.directive("bBarChart", function($compile){
	return {
  	restrict: "E",
		scope: {
      data: '&bData'
    },
    template: '<li ng-repeat="d in data_values">' +
      '<div class="percent">{{d.value|number:0}}<span>%</span></div>' +
      '<div class="fm-bar-text">{{d.name}}</div>' +
		'</li>',
    link: function(s, e, a){
    	s.data_values = s.data();
    }
  }
});