JSFiddle - React, Tailwind, and code Playground

by Alexander Arutuniants

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
<div class="controlls"> <span class="btn_arrow previous inactive" ng-click="graphSelectorPrev()">Vorige</span>

    <p>{+ selector +}</p> <span class="btn_arrow next" ng-click="graphSelectorNext()">Volgende</span>

</div>

JavaScript

angular.module('myApp', [])
    .controller('BaseCtrl', function ($scope, data) {
    $scope.widgetData = false;
    $scope.graphData = false;
    $scope.graphSelectorIndex = 0;

    $scope.graphSelector = [{
        'byPeriod': 'Periode'
    }, {
        'byHour': 'Uur'
    }, {
        'byDay': 'Dag'
    }];

    $scope.graphSelectorByText = function (text) {
        switch (text) {
            case ('byPeriod'):
                $scope.selector = 'byPeriod'
                $scope.graphData = $scope.allGraphData.byPeriod;
                $scope.graphType = 'Line';
                break;
            case ('byDay'):
                $scope.selector = 'byDay'
                $scope.graphData = $scope.allGraphData.byDay;
                $scope.graphType = 'Line';
                break;
            case ('byHour'):
                $scope.selector = 'byHour'
                $scope.graphData = $scope.allGraphData.byHour;
                $scope.graphType = 'Bar';
                break;
        }
    }

    $scope.graphSelectorByInt = function (int) {
        switch (int) {
            case (0):
                $scope.selector = 'byPeriod';
                $scope.graphData = $scope.allGraphData.byPeriod;
                $scope.graphType = 'Line';
                break;
            case (1):
                $scope.selector = 'byDay';
                $scope.graphData = $scope.allGraphData.byDay;
                $scope.graphType = 'Line';
                break;
            case (2):
                $scope.selector = 'byHour';
                $scope.graphData = $scope.allGraphData.byHour;
                $scope.graphType = 'Bar'
                break;
        }
    }

    $scope.graphSelectorPrev = function () {
        $scope.graphSelectorIndex--;
        if ($scope.graphSelectorIndex < 0) {
            $scope.graphSelectorIndex = $scope.graphSelector.length - 1;
        }
        $scope.graphSelectorByInt($scope.graphSelectorIndex);
       ...