Mini Kabibi Habibi

Current Path : C:/Users/Public/Documents/DXTREME 13.1 Demos/DXTravel/DXTravel.Tablet/views/
Upload File :
Current File : C:/Users/Public/Documents/DXTREME 13.1 Demos/DXTravel/DXTravel.Tablet/views/MyTrips.dxview

<div data-options="dxView : { name: 'MyTrips', layout: 'default', 'current-navigation-item-id': 'trips' } ">

    <div data-options="dxContent : { targetPlaceholder: 'sidebar-content' } ">
        <div class="layout-left-offset">
            <h1>Upcoming Trips</h1>

            <div id="my-trips-list-widget" data-bind="dxList: { grouped: true, dataSource: nextTripsSource, scrollingEnabled: false, activeStateEnabled: false }">
                <div data-options="dxTemplate : { name: 'item' } " data-bind="dxAction: summaryAction">
                    <div style="font-size: 1.2em;" data-bind="text: title"></div>
                    <div data-bind="text: dates"></div>
                </div>
            </div>
        </div>
    </div>

    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <h1>Stats & Info</h1>

        <div class="my-trips-grid-left map-icon"></div>

        <div class="my-trips-grid-right my-trips-grid-bottom-step">
            <div class="my-trips-map" data-bind="dxMap: {
                autoScale: true,
                markers: mapMarkersSource.items,
                width: '100%',
                height: '100%'
            }">
            </div>
        </div>

        <div class="my-trips-grid-left time-icon">
        </div>

        <div class="my-trips-grid-right">
            <h2>Time traveled</h2>
            <div class="my-trips-chart" data-bind="dxChart: {
                    dataSource: chartSource,
                    margin: {
                        left: 0,
                        top: 0,
                        bottom: 0,
                        right: 0
                    },
                    legend: {
                        visible: false
                    },
                    valueAxis: {
                        grid: {
                            visible: true
                        },
                        label: {
                            visible: false,
                            format: 'decimal'
                        },
                        axisDivisionFactor: 55
                    },    
                    argumentAxis: {
                        type: 'discrete',
                        label: {                            
                            format: 'decimal'
                        }
                    },
                    series: {
                        type: 'bar',
                        color: '#a8a9ad',
                        argumentField: 'year',
                        valueField: 'days',
                        hover: {
                            enabled: false
                        },
                        label: {
                            visible: true,
                            position: 'inside',
                            backgroundColor: 'rgba(0,0,0,0.001)'
                        }
                    }
                }">
            </div>
        </div>

    </div>
</div>