<StackLayout class="page-area">
    <!-- Volani -->
    <RadCartesianChart *ngIf="(callsObservableKeys && callsObservableKeys.length > 0)" height="350" tkExampleTitle
                       tkToggleNavButton>
        <CategoricalAxis tkCartesianHorizontalAxis allowPan="true" allowZoom="true"></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis allowPan="true" allowZoom="true"></LinearAxis>
        <RadLegendView tkCartesianLegend position="Top" enableSelection="true"></RadLegendView>
        <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" horizontalStripLinesVisible="true"
                               horizontalStrokeColor="#dddddddd" horizontalStrokeWidth="2"
                               horizontalStripLineColor="#ffffffff, #ffffffff"></RadCartesianChartGrid>
        <BarSeries tkCartesianSeries *ngFor="let key of callsObservableKeys"
                    [items]="callsObservable[key]"
                    stackMode="Stack" categoryProperty="date" valueProperty="quantity" showLabels="true"
                    legendTitle="{{typeToDisplayName[key]}}">
        </BarSeries>
        <Palette tkCartesianPalette paletteMode="Item">
            <PaletteEntry tkCartesianPaletteEntry fillColor="#fcc11e" strokeColor="white" strokeWidth="1"></PaletteEntry>
            <PaletteEntry tkCartesianPaletteEntry fillColor="#007bc2" strokeColor="white" strokeWidth="1"></PaletteEntry>
            <PaletteEntry tkCartesianPaletteEntry fillColor="#89ba17" strokeColor="white" strokeWidth="1"></PaletteEntry>
        </Palette>    
    </RadCartesianChart>
    <!-- SMS -->
    <RadCartesianChart *ngIf="(messagesObservableKeys && messagesObservableKeys.length > 0)" height="350" tkExampleTitle
                       tkToggleNavButton>
        <CategoricalAxis tkCartesianHorizontalAxis allowPan="true" allowZoom="true"></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis allowPan="true" allowZoom="true"></LinearAxis>
        <RadLegendView tkCartesianLegend position="Top" enableSelection="true"></RadLegendView>
        <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" horizontalStripLinesVisible="true"
                               horizontalStrokeColor="#dddddddd" horizontalStrokeWidth="2"
                               horizontalStripLineColor="#ffffffff, #ffffffff"></RadCartesianChartGrid>
        <BarSeries tkCartesianSeries *ngFor="let key of messagesObservableKeys"
                    [items]="messagesObservable[key]"
                    stackMode="Stack" categoryProperty="date" valueProperty="quantity" showLabels="true"
                    legendTitle="{{typeToDisplayName[key]}}">
        </BarSeries>
        <Palette tkCartesianPalette paletteMode="Item">
            <PaletteEntry tkCartesianPaletteEntry fillColor="#fcc11e" strokeColor="white" strokeWidth="1"></PaletteEntry>
            <PaletteEntry tkCartesianPaletteEntry fillColor="#007bc2" strokeColor="white" strokeWidth="1"></PaletteEntry>
        </Palette>
    </RadCartesianChart>
    <!-- Data -->
    <RadCartesianChart *ngIf="(dataObservableKeys && dataObservableKeys.length > 0)" height="350" tkExampleTitle
                       tkToggleNavButton>
        <CategoricalAxis tkCartesianHorizontalAxis allowPan="false" allowZoom="false"></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis allowPan="false" allowZoom="false"></LinearAxis>
        <RadLegendView tkCartesianLegend position="Top" enableSelection="false"></RadLegendView>
        <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" horizontalStripLinesVisible="true"
                               horizontalStrokeColor="#dddddddd" horizontalStrokeWidth="2"
                               horizontalStripLineColor="#ffffffff, #ffffffff"></RadCartesianChartGrid>
        <BarSeries tkCartesianSeries *ngFor="let key of dataObservableKeys" [items]="dataObservable[key]" 
                    stackMode="Stack" categoryProperty="date" valueProperty="quantity" showLabels="true"
                    legendTitle="{{typeToDisplayName[key]}} {{key === 'data' ? '(MB)' : ''}}">
        </BarSeries>
        <Palette tkCartesianPalette>
            <PaletteEntry tkCartesianPaletteEntry fillColor="#fcc11e" strokeColor="white" strokeWidth="1"></PaletteEntry>
        </Palette>
    </RadCartesianChart>
    <!-- <Label *ngIf="(!dataObservableKeys || !callsObservableKeys || !messagesObservableKeys)"
           text="Načítám data pro statistiky čerpání."
           class="no-data m-10" textWrap="true"></Label> -->
</StackLayout>
