<ion-view hide-back-button="true" view-title="{{'Graphs' | translate}}" class="graphs">
        <ion-nav-title>{{tile.name | limitTo:17}}{{tile.name.length > 17 ? '...':''}}</ion-nav-title>
        <ion-nav-buttons>
            <a class="button icon-left ion-chevron-left button-clear button-dark ng-hide" on-tap="goBack()" ng-show="!isAndroid">{{'GoBack' | translate}}</a>
            <a class="button icon-left ion-android-arrow-back button-clear button-dark ng-hide" on-tap="goBack()" ng-show="isAndroid"></a>
        </ion-nav-buttons>

    <ion-header-bar class="bar-stable" ng-if="isIPad">
        <h2 class="title">{{'Graphs' | translate}}</h2>
    </ion-header-bar>

    <ion-content has-bouncing="false" class="has-header">

        <div class="graph-container">
            <div class="consumption-container">
                <div class="consumption">{{'ConsumptionInW' | translate}}</div>
                <div id="average" class="average">{{'AverageDuringPeriod' | translate}} {{average}} {{unit}}</div>
            </div>
            <div class="sum" ng-show="type === 'power'">{{consumption}} {{unit}}</div>
            <graph class="graph" data="chartData" unit="unit" type="day" menu="#graphmenu" text-to-hide="#average"></graph>

            <div id="graphmenu" class="graph-options hidden">
            <div class="graph-menu">
            <div class="col-3 text-center" ng-class="{'active':type === 'power'}" on-tap="setType('power')">
            <div>{{'Watt' | translate}}</div>
            </div>
            <div class="col-3 text-center" ng-class="{'active':type === 'energy'}" on-tap="setType('energy')">
            <div>{{'kWh' | translate}}</div>
            </div>
            <div class="col-3 text-center" ng-class="{'active':type === 'cost'}" on-tap="setType('cost')">
            <div>{{'CHF' | translate}}</div>
            </div>
            </div>
            <a class="menu-toggle" toggle-menu menu="#graphcockpit"></a>

            <div class="middle">
            <ng-include src="'img/cockpit.svg'"></ng-include>
            <h2>{{'GoToCockpit' | translate}}</h2>
            </div>
            <div class="graph-menu bottom">
            <!--<div class="col-2 text-center active">-->
            <!--<div>Day</div>-->
            <!--</div>-->
            <!--<div class="col-2 text-center">-->
            <!--<div>Week</div>-->
            <!--</div>-->
            <!--<div class="col-2 text-center">-->
            <!--<div>Month</div>-->
            <!--</div>-->
            <!--<div class="col-2 text-center">-->
            <!--<div>Year</div>-->
            <!--</div>-->
            <!--<div class="col-2 text-center active">-->
            <!--<div>Float</div>-->
            <!--</div>-->
            </div>
            </div>

            <div id="graphcockpit" class="graph-cockpit hidden">

                <div class="title">{{'CostReport' | translate}}</div>

                <div class="costs">
                    <div class="col-3 cost first">
                        {{'Today' | translate}}
                        <div class="amount">{{dayCost}}</div>
                        <div class="amount kwh main-color">{{dayEnergy}}</div>
                    </div>
                    <div class="col-3 cost">
                        {{'ThisMonth' | translate}}
                        <div class="amount">{{monthCost}}</div>
                        <div class="amount kwh main-color">{{monthEnergy}}</div>
                    </div>
                    <div class="col-3 cost last">
                        {{'AllTimes' | translate}}
                        <div class="amount">{{allCost}}</div>
                        <div class="amount kwh main-color">{{allEnergy}}</div>
                    </div>
                </div>

                <a class="menu-toggle" toggle-menu menu="#graphcockpit,#graphmenu"></a>

                <div class="graph-button">
                    <ng-include src="'img/graph.svg'"></ng-include>
                    <h2>{{'GoToGraph' | translate}}</h2>
                </div>

            </div>

        </div>

    </ion-content>
</ion-view>