JSFiddle - React, Tailwind, and code Playground

by apimenov93

HTML

<div  ng-app="ui.donut">
    <div ng-controller="donutController">
        <ui-donut map="data" options="options"></ui-donut>
    </div>
</div>

JavaScript

var app = angular.module('ui.donut', []);
 
 app.controller("donutController", function($scope) {
        $scope.data = [{
            label: 'On trip',
            value: 60
        }, {
            label: 'Idle',
            value: 40
        }];

        $scope.options = [{
        	width : 450,
        	height : 200,
        	arcOuterRadius : 0.8,
        	arcInnerRadius : 0.6,
        	labelOuterRadius :0.8,
        	labelInnerRadius : 0.9,
        	colorArray : ["#a05d56", "#d0743c"],
        	text : "Vehicle",
        	total : 100
        }];
    });
 donutDirective = function() {
        return {
            restrict: 'E',
            scope: {
                map: '=',
                options: '='
            },
            link: function(scope, element) {
                var defaultOptions = {
                    width: 450,
                    height: 200,
                    arcOuterRadius: 0.8,
                    arcInnerRadius: 0.6,
                    labelOuterRadius: 0.8,
                    labelInnerRadius: 0.8,
                    colorArray: ["#7b6888", "#6b486b",],
                    text: "Cars",
                    total: 75,
                };
                console.log(defaultOptions);
                delete scope.options;
                scope.options = angular.merge(defaultOptions,scope.options);
                console.log(scope.options===defaultOptions);
                
            }
        };
    };
app.directive('uiDonut', donutDirective);