Available in the OSS Version
Layout Manager - Overview
The igLayoutManager is a widget based on jQuery UI that implements different layout modes on a page.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Last Run Speed
Total Distance Last Week
49 km
Total Cal Last Week
3675 cal
Total Distance Last Month
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Modes include flow layout, vertical layout
and a border layout, which divides the container into left/right/footer/header/center regions. Further, the responsive and fluid column layouts are
based on a 12 column layout grid. Also supported is a grid layout which allows items to be positioned at arbitrary places on the screen and have
variable row and col spans. See the complete list of samples in the menu.
Code View
Copy to Clipboard
$('#layout').igLayoutManager({
layoutMode: "grid",
width: "100%",
height: "500px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
});
$("#speedLineChart").igDataChart({
width: "100%",
height: "283px",
dataSource: runningSpeedData,
axes: [
{
name: "kmAxis",
type: "categoryX",
label: "km"
},
{
name: "averageSpeedAxis",
type: "numericY",
minimumValue: 8,
maximumValue: 15,
title: "Speed (km/h)",
}
],
series: [
{
name: "speed",
type: "spline",
title: "speed",
xAxis: "kmAxis",
yAxis: "averageSpeedAxis",
valueMemberPath: "speedPerHour",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
brush: "#f60",
thickness: 3
}
]
});
$("#totalKmBarChart").igDataChart({
width: "100%",
height: "117px",
dataSource: lastMonthKmRun,
outlines: ["rgba(0,0,0,0)"],
axes: [{
name: "monthDayAxis",
type: "categoryX",
label: "monthDay",
interval: 1
},
{
name: "kmRunAxis",
type: "numericY",
title: "km"
}],
series: [{
name: "lastMonth",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "monthDayAxis",
yAxis: "kmRunAxis",
valueMemberPath: "kmRun",
brush: "#f60",
thickness: 0,
radius: 0
}]
});
<div id="layout-wrapper">
<div id="layout">
<div>
<div class="box">
<div class="box-title">Last Run Speed</div>
<div id="speedLineChart" class="chartElement"></div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Week</div>
<div class="box-body-big-text">49 km</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Cal Last Week</div>
<div class="box-body-big-text">3675 cal</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Month</div>
<div id="totalKmBarChart" class="chartElement"></div>
</div>
</div>
</div>
</div>
ul {
list-style-type: none;
}
#layout {
position: relative;
}
.ig-layout-item {
padding: 5px;
}
.ig-layout-item > div {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 5px;
}
.box {
background-color: #fff;
border: 1px solid #888;
color: grey;
}
.box-title {
color:#fff;
background-color:#888;
font-size: 16px;
padding: 6px 0 10px 10px;
}
.box table td {
padding: 0;
}
.box-body-big-text {
font-size: 60px;
margin-top: 15px;
text-align: center;
color: #f60;
}
@media all and (max-width: 910px) {
.box-title {
font-size: 14px;
}
.box-body-big-text {
font-size: 49px;
margin-top: 24px;
}
}
@media all and (max-width: 740px) {
.box-title {
font-size: 12px;
}
.box-body-big-text {
font-size: 38px;
margin-top: 34px;
}
}
@media all and (max-width: 570px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 20px;
margin-top: 47px;
}
}
@media all and (max-width: 360px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 17px;
margin-top: 45px;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ignite UI for jQuery Layout Manager - grid layout with absolute positioning</title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.layout.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Modernizr/jQuery/jQuery UI -->
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="/data-files/last-month-run-km.js"></script>
<script src="/data-files/running-speed.js"></script>
<style type="text/css">
ul {
list-style-type: none;
}
#layout {
position: relative;
}
.ig-layout-item {
padding: 5px;
}
.ig-layout-item > div {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 5px;
}
.box {
background-color: #fff;
border: 1px solid #888;
color: grey;
}
.box-title {
color:#fff;
background-color:#888;
font-size: 16px;
padding: 6px 0 10px 10px;
}
.box table td {
padding: 0;
}
.box-body-big-text {
font-size: 60px;
margin-top: 15px;
text-align: center;
color: #f60;
}
@media all and (max-width: 910px) {
.box-title {
font-size: 14px;
}
.box-body-big-text {
font-size: 49px;
margin-top: 24px;
}
}
@media all and (max-width: 740px) {
.box-title {
font-size: 12px;
}
.box-body-big-text {
font-size: 38px;
margin-top: 34px;
}
}
@media all and (max-width: 570px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 20px;
margin-top: 47px;
}
}
@media all and (max-width: 360px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 17px;
margin-top: 45px;
}
}
</style>
</head>
<body>
<div id="layout-wrapper">
<div id="layout">
<div>
<div class="box">
<div class="box-title">Last Run Speed</div>
<div id="speedLineChart" class="chartElement"></div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Week</div>
<div class="box-body-big-text">49 km</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Cal Last Week</div>
<div class="box-body-big-text">3675 cal</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Month</div>
<div id="totalKmBarChart" class="chartElement"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#layout').igLayoutManager({
layoutMode: "grid",
width: "100%",
height: "500px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
});
$("#speedLineChart").igDataChart({
width: "100%",
height: "283px",
dataSource: runningSpeedData,
axes: [
{
name: "kmAxis",
type: "categoryX",
label: "km"
},
{
name: "averageSpeedAxis",
type: "numericY",
minimumValue: 8,
maximumValue: 15,
title: "Speed (km/h)",
}
],
series: [
{
name: "speed",
type: "spline",
title: "speed",
xAxis: "kmAxis",
yAxis: "averageSpeedAxis",
valueMemberPath: "speedPerHour",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
brush: "#f60",
thickness: 3
}
]
});
$("#totalKmBarChart").igDataChart({
width: "100%",
height: "117px",
dataSource: lastMonthKmRun,
outlines: ["rgba(0,0,0,0)"],
axes: [{
name: "monthDayAxis",
type: "categoryX",
label: "monthDay",
interval: 1
},
{
name: "kmRunAxis",
type: "numericY",
title: "km"
}],
series: [{
name: "lastMonth",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "monthDayAxis",
yAxis: "kmRunAxis",
valueMemberPath: "kmRun",
brush: "#f60",
thickness: 0,
radius: 0
}]
});
});
</script>
</body>
</html>
var lastMonthKmRun = [
{ "monthDay": 1, "kmRun": 5 },
{ "monthDay": 2, "kmRun": 0 },
{ "monthDay": 3, "kmRun": 10 },
{ "monthDay": 4, "kmRun": 11 },
{ "monthDay": 5, "kmRun": 0 },
{ "monthDay": 6, "kmRun": 0 },
{ "monthDay": 7, "kmRun": 5 },
{ "monthDay": 8, "kmRun": 0 },
{ "monthDay": 9, "kmRun": 7 },
{ "monthDay": 10, "kmRun": 7 },
{ "monthDay": 11, "kmRun": 0 },
{ "monthDay": 12, "kmRun": 14 },
{ "monthDay": 13, "kmRun": 0 },
{ "monthDay": 14, "kmRun": 15 },
{ "monthDay": 15, "kmRun": 0 },
{ "monthDay": 16, "kmRun": 9 },
{ "monthDay": 17, "kmRun": 0 },
{ "monthDay": 18, "kmRun": 13 },
{ "monthDay": 19, "kmRun": 16 },
{ "monthDay": 20, "kmRun": 0 },
{ "monthDay": 21, "kmRun": 15 },
{ "monthDay": 22, "kmRun": 10 },
{ "monthDay": 23, "kmRun": 0 },
{ "monthDay": 24, "kmRun": 0 },
{ "monthDay": 25, "kmRun": 9 },
{ "monthDay": 26, "kmRun": 20 },
{ "monthDay": 27, "kmRun": 0 },
{ "monthDay": 28, "kmRun": 10 }
];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<style>
ul {
list-style-type: none;
}
#layout {
position: relative;
}
.ig-layout-item {
padding: 5px;
}
.ig-layout-item > div {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 5px;
}
.box {
background-color: #fff;
border: 1px solid #888;
color: grey;
}
.box-title {
color:#fff;
background-color:#888;
font-size: 16px;
padding: 6px 0 10px 10px;
}
.box table td {
padding: 0;
}
.box-body-big-text {
font-size: 60px;
margin-top: 15px;
text-align: center;
color: #f60;
}
@media all and (max-width: 910px) {
.box-title {
font-size: 14px;
}
.box-body-big-text {
font-size: 49px;
margin-top: 24px;
}
}
@media all and (max-width: 740px) {
.box-title {
font-size: 12px;
}
.box-body-big-text {
font-size: 38px;
margin-top: 34px;
}
}
@media all and (max-width: 570px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 20px;
margin-top: 47px;
}
}
@media all and (max-width: 360px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 17px;
margin-top: 45px;
}
}
</style>
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'grid-layout.ts' ).then( null, console.error.bind( console ) );
</script>
</body>
</html>
import { Component, NgModule, OnInit } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IgDataChartComponent, IgLayoutManagerComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/map';
declare var jQuery: any;
@Component({
selector: 'my-app',
template: `
<div id="layout-wrapper">
<ig-layout-manager widgetId="layout" [(options)]="layoutConfig">
<div>
<div class="box">
<div class="box-title">Last Run Speed</div>
<ig-data-chart widgetID="speedLineChart" class="chartElement" [(options)]="speedChartConfig"></ig-data-chart>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Week</div>
<div class="box-body-big-text">49 km</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Cal Last Week</div>
<div class="box-body-big-text">3675 cal</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Month</div>
<ig-data-chart widgetId="totalKmBarChart" class="chartElement" [(options)]="totalKmChartConfig"></ig-data-chart>
</div>
</div>
</ig-layout-manager>
</div>
`
})
export class AppComponent implements OnInit {
private lastMonthRunUrl: string = "/data-files/last-month-run-km.js";
private runningSpeedUrl: string = "/data-files/running-speed.js";
public runningSpeedData: any[] = [];
public lastMonthKmRun: any[] = [];
public layoutConfig = {
layoutMode: "grid",
width: "100%",
height: "500px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
};
public speedChartConfig = {
width: "100%",
height: "283px",
dataSource: this.runningSpeedData,
axes: [
{
name: "kmAxis",
type: "categoryX",
label: "km"
},
{
name: "averageSpeedAxis",
type: "numericY",
minimumValue: 8,
maximumValue: 15,
title: "Speed (km/h)",
}
],
series: [
{
name: "speed",
type: "spline",
title: "speed",
xAxis: "kmAxis",
yAxis: "averageSpeedAxis",
valueMemberPath: "speedPerHour",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
brush: "#f60",
thickness: 3
}
]
};
public totalKmChartConfig = {
width: "100%",
height: "117px",
dataSource: this.lastMonthKmRun,
outlines: ["rgba(0,0,0,0)"],
axes: [{
name: "monthDayAxis",
type: "categoryX",
label: "monthDay",
interval: 1
},
{
name: "kmRunAxis",
type: "numericY",
title: "km"
}],
series: [{
name: "lastMonth",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "monthDayAxis",
yAxis: "kmRunAxis",
valueMemberPath: "kmRun",
brush: "#f60",
thickness: 0,
radius: 0
}]
};
constructor(private http: Http) {}
public ngOnInit() {
let getLastMonth = this.http.get(this.lastMonthRunUrl).map(res => res.json());
let getRunningSpeed = this.http.get(this.runningSpeedUrl).map(res => res.json());
Observable.forkJoin([getLastMonth, getRunningSpeed]).subscribe(res => {
this.lastMonthKmRun = res[0];
this.runningSpeedData = res[1];
});
}
}
@NgModule({
bootstraps: [AppComponent],
declarations: [AppComponent, IgDataChartComponent, IgLayoutManagerComponent],
imports: [BrowserModule, HttpModule]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
<script src="/js-data/last-month-run-km"></script>
<script src="/js-data/running-speed"></script>
<style>
ul {
list-style-type: none;
}
#layout {
position: relative;
}
.ig-layout-item {
padding: 5px;
}
.ig-layout-item > div {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 5px;
}
.box {
background-color: #fff;
border: 1px solid #888;
color: grey;
}
.box-title {
color:#fff;
background-color:#888;
font-size: 16px;
padding: 6px 0 10px 10px;
}
.box table td {
padding: 0;
}
.box-body-big-text {
font-size: 60px;
margin-top: 15px;
text-align: center;
color: #f60;
}
@media all and (max-width: 910px) {
.box-title {
font-size: 14px;
}
.box-body-big-text {
font-size: 49px;
margin-top: 24px;
}
}
@media all and (max-width: 740px) {
.box-title {
font-size: 12px;
}
.box-body-big-text {
font-size: 38px;
margin-top: 34px;
}
}
@media all and (max-width: 570px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 20px;
margin-top: 47px;
}
}
@media all and (max-width: 360px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 17px;
margin-top: 45px;
}
}
</style>
</head>
<body>
<div id="app">
<script type="text/babel">
let App = React.createClass({
getConfig: function() {
return {
layout: {
layoutMode: "grid",
width: "100%",
height: "500px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
},
speedChart: {
width: "100%",
height: "283px",
dataSource: runningSpeedData,
axes: [
{
name: "kmAxis",
type: "categoryX",
label: "km"
},
{
name: "averageSpeedAxis",
type: "numericY",
minimumValue: 8,
maximumValue: 15,
title: "Speed (km/h)",
}
],
series: [
{
name: "speed",
type: "spline",
title: "speed",
xAxis: "kmAxis",
yAxis: "averageSpeedAxis",
valueMemberPath: "speedPerHour",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
brush: "#f60",
thickness: 3
}
]
},
totalKmChart: {
width: "100%",
height: "117px",
dataSource: lastMonthKmRun,
outlines: ["rgba(0,0,0,0)"],
axes: [{
name: "monthDayAxis",
type: "categoryX",
label: "monthDay",
interval: 1
},
{
name: "kmRunAxis",
type: "numericY",
title: "km"
}],
series: [{
name: "lastMonth",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "monthDayAxis",
yAxis: "kmRunAxis",
valueMemberPath: "kmRun",
brush: "#f60",
thickness: 0,
radius: 0
}]
}
};
},
render: function() {
return (
<div id="layout-wrapper">
<IgLayoutManager id="layout" options={this.getConfig().layout}>
<div>
<div class="box">
<div class="box-title">Last Run Speed</div>
<IgDataChart id="speedLineChart" class="chartElement" options={this.getConfig().speedChart} />
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Week</div>
<div class="box-body-big-text">49 km</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Cal Last Week</div>
<div class="box-body-big-text">3675 cal</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Month</div>
<IgDataChart id="totalKmBarChart" class="chartElement" options={this.getConfig().totalKmChart} />
</div>
</div>
</IgLayoutManager>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</div>
</body>
</html>