Timeline Grouping | Data Views | MESCIUS DataViewsJS React Demos

This example shows how to use the Timeline Grouping Strategy with the Grid Layout Engine to present a data set on a timeline, useful for things like meeting plans or convention schedules. In the sample, you can change the position of the timeline axis as well as the visibility and position of the headers of the data. To create a timeline view using date-based data, these are the key components: Reference timelinegrouping.js and gridlayout.js. Initialize the time line strategy with TimelineGrouping = new GC.DataViews.TimelineGrouping({}); Use GridLayout to group the data by date using the grouping option array. Set the timeline strategy with groupStrategy: TimelineGrouping. The timeline strategy offers many options that are set with simple options. In this demo, those options can be turned on and off with the buttons along the top.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Timeline/TimelineGrouping/react/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="grouping, timeline" />
<meta
name="description"
content="This example shows how to use the Timeline Grouping Strategy with the Grid Layout Engine to present a data set on a timeline, useful for things like meeting plans or convention schedules."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Timeline Grouping | Data Views | MESCIUS DataViewsJS React Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.timeline.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'react',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript">
System.import('./app.js');
</script>
</body>
</html>

import _ from 'lodash';
import React from 'react';
import ReactDOM from 'react-dom';
import DataView from '@grapecity/dataviews.react';
import { GridLayout } from '@grapecity/dataviews.grid';
import TimelineGrouping from '@grapecity/dataviews.timeline';
import { data } from './data';
import locale from './locale';
const { useState } = React;
const timeFormatter = 'hh:mmtt';
const presenter = '<img class="employee-photo" src={{=it.photo}} />';
const cols = [
{ id: 'topic', dataField: 'topic' },
{ id: 'start', dataField: 'start', format: 'MMMM dd, hh:mmtt' },
{ id: 'end', dataField: 'end', format: timeFormatter },
{ id: 'speaker', dataField: 'speaker' },
{ id: 'content', dataField: 'content' },
{ id: 'photo', dataField: 'photo', presenter },
];
const groupDetailEventTemplate = `<div style="margin:5px;">
<div style="font-size:14px;font-weight: bold;">{{=it.topic}}</div>
<blockquote style="padding-left: 15px;display: block;font-size:13px;font-family: "Helvetic Neue, Helvetica, Arial">{{=it.content}}</blockquote>
<span style="margin-right: auto" >{{=it.start}}</span>
</div>`;
const groupSummaryEventTemplate = `<div style="margin:5px;height:60px;">
<div style="position:absolute;left:0px;width:50px;" data-column="photo"></div>
<div style="position:absolute;left:50px;">
<div>{{=it.topic}}</div>
<div>{{=it.start}}
</div>`;
const groupHeaderMiddleTemplate = `<div>
<div style="top:12px;text-align: center;">
<div>
<div class="group-header-middle">
<div>{{=it.name}}</div>
</div>
</div>
</div>
</div>`;
const groupHeaderLeftTemplate = `<div style="position: relative;">
<div style="padding-left:20px;font-size:20px;"><span style="color:#131313;">{{=it.name}}</span></div>
</div>`;
const groupHeaderRightTemplate = `<div style="position: relative;">
<div style="padding-right:20px;font-size:20px;text-align: right;">
<span style="color:#131313;">{{=it.name}}</span>
</div>
</div>`;
const ghTemplate = `<div class="timeline-group-header">
<div class="point"></div>
<span class="label">{{=it.name}}<span>
</div>`;
const formatter = new GC.DataViews.GeneralFormatter('mmmm dd');
const timeline = new TimelineGrouping({});
const layout = new GridLayout({
grouping: {
field: 'start',
converter(field) {
return formatter.format(field);
},
},
autoRowHeight: true,
rowTemplate: groupDetailEventTemplate,
groupStrategy: timeline,
});
const App = () => {
const [showGroupHeader, setShowGroupHeader] = useState(false);
const [axisLocation, setAxisLocation] = useState('middle');
const [headerLocation, setHeaderLocation] = useState('top');
const toggleGroupHeader = () => {
setShowGroupHeader(!showGroupHeader);
};
const toggleHeaderLocation = () => {
setHeaderLocation(headerLocation === 'top' ? 'onAxis' : 'top');
};
const btnClass = (target) => {
const active = target === axisLocation ? ' active' : '';
return `btn btn-default${active}`;
};
const makeOptions = () => {
let template;
if (headerLocation === 'top') {
template =
axisLocation === 'left'
? groupHeaderLeftTemplate
: axisLocation === 'right'
? groupHeaderRightTemplate
: groupHeaderMiddleTemplate;
} else {
template = ghTemplate;
}
const header = showGroupHeader
? {
visible: true,
template,
height: headerLocation === 'top' ? 35 : 60,
}
: {
template: null,
visible: false,
};
const options = {
grouping: _.assign({}, layout.options.grouping, { header }),
rowTemplate: showGroupHeader ? groupSummaryEventTemplate : groupDetailEventTemplate,
};
const groupingOptions = {
axisLocation,
groupHeaderLocation: headerLocation,
gutter: showGroupHeader && headerLocation !== 'top' ? 120 : 13,
};
return { options, groupingOptions };
};
const { options, groupingOptions } = makeOptions();
return (
<div className="main-container">
<div className="sample-options">
<div className="option-row" id="timelineCommandPanel">
<div className="btn-group" role="group">
<button type="button" className="btn btn-default" onClick={toggleGroupHeader}>
{showGroupHeader ? locale.hideHeader : locale.showHeader}
</button>
<button type="button" className="btn btn-default" onClick={toggleHeaderLocation}>
{locale.location} {headerLocation}
</button>
</div>
</div>
<div className="option-row">
<div>
<label>{locale.display}</label>
</div>
<div className="btn-group" role="group">
<button className={btnClass('left')} onClick={() => setAxisLocation('left')}>
{locale.left}
</button>
<button className={btnClass('middle')} onClick={() => setAxisLocation('middle')}>
{locale.middle}
</button>
<button className={btnClass('right')} onClick={() => setAxisLocation('right')}>
{locale.right}
</button>
</div>
</div>
</div>
<DataView
id="grid"
className="grid"
data={data}
cols={cols}
layout={layout}
options={options}
groupingOptions={groupingOptions}
/>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

import _ from 'lodash';
export const data = [
{
topic: 'Arrivals',
start: 'June 1,2018 9:00:00',
end: 'June 1,2018 20:00:00',
content: 'All members arrive today and registration begins.',
speaker: 'Alice',
},
{
topic: 'Introductions - Name Game, Hopes, Fears & Expectations',
start: 'June 2,2018 9:00:00',
end: 'June 2,2018 10:30:00',
content:
'Learn who your peers are by introducing yourselfs and playing the name game. Following that, we will discuss what you hope toget out of this conference and what concerns you have.',
speaker: 'Steve',
},
{
topic: 'COFFEE BREAK',
start: 'June 2,2018 10:30:00',
end: 'June 2,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'What is Permaculture & Why do we need it',
start: 'June 2,2018 11:00:00',
end: 'June 2,2018 12:30:00',
content:
'Permaculture is a multi-faceted, in depth design system of agricultural and social design principles centered around simulating or directly utilizing the patterns and features observed in natural ecosystems. They will help us create appropriate, site-specific designs that are both sustainable and regenerative. ',
speaker: 'Steve',
},
{
topic: 'LUNCH BREAK',
start: 'June 2,2018 12:30:00',
end: 'June 2,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Permaculture Ethics & Philosophies',
start: 'June 2,2018 13:30:00',
end: 'June 2,2018 15:00:00',
content:
'Permaculture principles are a list of attitudes, approaches, and actions that are practical and not system specific.',
speaker: 'Steve',
},
{
topic: 'COFFEE BREAK',
start: 'June 2,2018 15:00:00',
end: 'June 2,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Permaculture Principals',
start: 'June 2,2018 15:30:00',
end: 'June 2,2018 16:30:00',
content:
'Permaculture was created through the synthesis of many design systems, with the emphasis on nature as the penultimate one. The creation of a modern agricultural sector with a much smaller number of large-scale industrial operations would help.',
speaker: 'Steve',
},
{
topic: 'DINNER',
start: 'June 2,2018 17:00:00',
end: 'June 2,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: Journey to planet earth',
start: 'June 2,2018 19:00:00',
end: 'June 2,2018 21:00:00',
content:
'The opening episode journeys across the planet, from Pole to Pole, discovering how its seasonal journey affects the lives on earth.',
speaker: '',
},
{
topic: 'Natural Systems & Succesion',
start: 'June 3,2018 9:00:00',
end: 'June 3,2018 10:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: 'Steve',
},
{
topic: 'COFFEE BREAK',
start: 'June 3,2018 10:30:00',
end: 'June 3,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Theory into Practice Site Tour',
start: 'June 3,2018 11:00:00',
end: 'June 3,2018 12:30:00',
content:
"We will see our organization theories applied in the real world with a site tour of the model agricutlural system. If you expereiments work, we will begin applying this in Xi'an. After that, the order goes Raleigh, Pittsburgh, Kirkland, Sendai, Shanghai, Hanoi, Noida, and, finally Rome. The model is on site and very small, so now special travel required.",
speaker: 'Tony',
},
{
topic: 'LUNCH BREAK',
start: 'June 3,2018 12:30:00',
end: 'June 3,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Web of Life',
start: 'June 3,2018 13:30:00',
end: 'June 3,2018 15:00:00',
content:
'Goal is to maximise the sustainability of the web of life. The creation of a modern agricultural sector with a much smaller number of large-scale industrial operations would help.The modern agriculture and forest need high precision measurement of plant leaf, in order to confirm the best measure force, it needs exactite measurement of elastic mould quantity of the plant.',
speaker: 'Tony',
},
{
topic: 'COFFEE BREAK',
start: 'June 3,2018 15:00:00',
end: 'June 3,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Economics',
start: 'June 3,2018 15:30:00',
end: 'June 3,2018 16:30:00',
content:
'One view of economics is that it is the study of the economy. The first priority in developing a new socialist countryside is to develop modern agriculture and promote steady expansion of grain production and sustained increase in rural incomes. ',
speaker: 'Tony',
},
{
topic: 'DINNER',
start: 'June 3,2018 17:00:00',
end: 'June 3,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: Money as Debt',
start: 'June 3,2018 19:00:00',
end: 'June 3,2018 21:00:00',
content: 'You can have money on paper. This film proves it.',
speaker: '',
},
{
topic: 'Design Tools SADIMET',
start: 'June 4,2018 9:00:00',
end: 'June 4,2018 10:30:00',
content:
'Design tools introduction.The modern agriculture and forest need high precision measurement of plant leaf, in order to confirm the best measure force, it needs exactite measurement of elastic mould quantity of the plant. ',
speaker: 'Steve',
},
{
topic: 'COFFEE BREAK',
start: 'June 4,2018 10:30:00',
end: 'June 4,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Zone & Sector Analysis',
start: 'June 4,2018 11:00:00',
end: 'June 4,2018 12:30:00',
content: 'This session gives a systematic approach to surveying agricultral zones.',
speaker: 'Steve',
},
{
topic: 'LUNCH BREAK',
start: 'June 4,2018 12:30:00',
end: 'June 4,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners. ',
speaker: '',
},
{
topic: 'Group Dynamics',
start: 'June 4,2018 13:30:00',
end: 'June 4,2018 15:00:00',
content:
'This session starts with introducing the basic characteristics of courses and then analyzes the problems in teaching groups of educated people. Corresponding creative measure and advice is provided. There is no I in team but there certainly is on in win. Steve, our speaker is a winner, but very humble. ',
speaker: 'Steve',
},
{
topic: 'COFFEE BREAK',
start: 'June 4,2018 15:00:00',
end: 'June 4,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Group Dynamics',
start: 'June 4,2018 15:30:00',
end: 'June 4,2018 16:30:00',
content:
'This session starts with introducing the basic characteristics of courses and then analyzes the problems in teaching groups of educated people. Corresponding creative measure and advice is provided. There is no I in team but there certainly is on in win. Steve, our speaker is a winner, but very humble.  ',
speaker: 'Steve',
},
{
topic: 'DINNER',
start: 'June 4,2018 17:00:00',
end: 'June 4,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: A Farm for the Future',
start: 'June 4,2018 19:00:00',
end: 'June 4,2018 21:00:00',
content:
'Modern agriculture and animal husbandry in the Netherlands lead the world in technology, facilities, education and professionalism. ',
speaker: '',
},
{
topic: 'Soil Introduction',
start: 'June 5,2018 9:00:00',
end: 'June 5,2018 10:30:00',
content:
'Permaculture principles are a list of attitudes, approaches, and actions that are practical and not system specific. We will develop modern agriculture and promote the building of a new socialist countryside.   ',
speaker: 'Fiona',
},
{
topic: 'COFFEE BREAK',
start: 'June 5,2018 10:30:00',
end: 'June 5,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Soil Erosion & Conservation',
start: 'June 5,2018 11:00:00',
end: 'June 5,2018 12:30:00',
content:
'Soil erosion is a naturally occurring process on all land. The agents of soil erosion are water and wind, each contributing a significant amount of soil loss each year. Soil erosion may be a slow process that continues relatively unnoticed, or it may occur at an alarming rate causing serious loss of topsoil. ',
speaker: 'Steve',
},
{
topic: 'LUNCH BREAK',
start: 'June 5,2018 12:30:00',
end: 'June 5,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Soil & Practical Gardening',
start: 'June 5,2018 13:30:00',
end: 'June 5,2018 15:00:00',
content:
'Practical gardening tips for the everyday scientist. Including tips, tricks for specific soil types and helps for an abundant harvest.',
speaker: 'Tony',
},
{
topic: 'COFFEE BREAK',
start: 'June 5,2018 15:00:00',
end: 'June 5,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Soil Practical Gardening',
start: 'June 5,2018 15:30:00',
end: 'June 5,2018 16:30:00',
content:
'Practical gardening tips for the everyday scientist. Including tips, tricks for specific soil types and helps for an abundant harvest. ',
speaker: 'Tony',
},
{
topic: 'DINNER',
start: 'June 5,2018 17:00:00',
end: 'June 5,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: Dirt the Movie',
start: 'June 5,2018 19:00:00',
end: 'June 5,2018 21:00:00',
content:
'DIRT! The Movie–narrated by Jamie Lee Curtis–brings to life the environmental, economic, social and political impact that the soil has. It shares the stories of experts from all over the world who study and are able to harness the beauty and power of a respectful and mutually beneficial relationship with soil. ',
speaker: '',
},
{
topic: 'Climate',
start: 'June 6,2018 9:00:00',
end: 'June 6,2018 10:30:00',
content:
'This session will insist on the fact that agriculture will not be confronted with unknown situations and that solutions do exist; that we must work with climate change, not against it. ',
speaker: 'Fiona',
},
{
topic: 'TEA BREAK',
start: 'June 6,2018 10:30:00',
end: 'June 6,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners. ',
speaker: '',
},
{
topic: 'Micro Climate',
start: 'June 6,2018 11:00:00',
end: 'June 6,2018 12:30:00',
content:
'A microclimate is the climate of a small area that is different from the area around it. It may be warmer or colder, wetter or drier, or more or less prone to frosts. Microclimates may be quite small - a protected courtyard next to a building, for example, that is warmer than an exposed field nearby.',
speaker: 'Fiona',
},
{
topic: 'LUNCH BREAK',
start: 'June 6,2018 12:30:00',
end: 'June 6,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Design Tools - Site Surveying',
start: 'June 6,2018 13:30:00',
end: 'June 6,2018 15:00:00',
content:
'VisiSite is a wireless site survey tool that creates high-quality soil maps that allow you to visualize your farm on any screen.  ',
speaker: 'Steve',
},
{
topic: 'TEA BREAK',
start: 'June 6,2018 15:00:00',
end: 'June 6,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Cycles of Degredation & Solutions',
start: 'June 6,2018 15:30:00',
end: 'June 6,2018 16:30:00',
content:
'Soil is the earth’s fragile skin that anchors all life on Earth. It is comprised of countless species that create a dynamic and complex ecosystem and is among the most precious resources to humans. Increased demand for agriculture commodities generates incentives to convert forests and grasslands to farm fields and pastures. The transition to agriculture from natural vegetation often cannot hold onto the soil and many of these plants, such as coffee, cotton, palm oil, soybean and wheat, can actually increase soil erosion beyond the soil’s ability to maintain itself.',
speaker: 'Tony',
},
{
topic: 'DINNER',
start: 'June 6,2018 17:00:00',
end: 'June 6,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: Global Gardener 1',
start: 'June 6,2018 19:00:00',
end: 'June 6,2018 21:00:00',
content:
'Global Gardener is a documentary film series about the permaculture approach to sustainable agriculture. The series was produced by Julian Russell for the Australian Broadcasting Corporation; it premiered on Australian television in 1991.',
speaker: '',
},
{
topic: 'Trees',
start: 'June 7,2018 9:00:00',
end: 'June 7,2018 10:30:00',
content: 'Trees are those big things that growing out of the ground. Go hug one..',
speaker: 'Steve',
},
{
topic: 'COFFEE BREAK',
start: 'June 7,2018 10:30:00',
end: 'June 7,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners. ',
speaker: '',
},
{
topic: 'Forest Systems',
start: 'June 7,2018 11:00:00',
end: 'June 7,2018 12:30:00',
content: 'This is a sales pitch for Forest systems. They want you to pay them money to go play in the woods.',
speaker: 'Steve',
},
{
topic: 'LUNCH BREAK',
start: 'June 7,2018 12:30:00',
end: 'June 7,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Earthworks',
start: 'June 7,2018 13:30:00',
end: 'June 7,2018 15:00:00',
content:
'A resource for soils and foundations, this book is a bridge between the world of geotechnical engineering and foundation design and construction activities and inspections dealing with soil conditions and building foundations. ',
speaker: 'Tony',
},
{
topic: 'COFFEE BREAK',
start: 'June 7,2018 15:00:00',
end: 'June 7,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Tree Planting',
start: 'June 7,2018 15:30:00',
end: 'June 7,2018 16:30:00',
content:
'Snippet - Set the tree in the middle of the hole. Avoid planting the tree too deep. If the root collar sits below the top of the hole, compact some soil under the tree so that the root flare at the base of the trunk is slightly above ground level.',
speaker: 'Tony',
},
{
topic: 'DINNER',
start: 'June 7,2018 17:00:00',
end: 'June 7,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: Global Gardener 2',
start: 'June 7,2018 19:00:00',
end: 'June 7,2018 21:00:00',
content:
'Global Gardener is a series of four half-hour programs looking at examples of garden in different bioregions. BILL MOLLISON is a practical visionary.  ',
speaker: '',
},
{
topic: 'Water',
start: 'June 8,2018 9:00:00',
end: 'June 8,2018 10:30:00',
content: 'Water is important. You should attend.',
speaker: 'Fiona',
},
{
topic: 'COFFEE BREAK',
start: 'June 8,2018 10:30:00',
end: 'June 8,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Earthworks',
start: 'June 8,2018 11:00:00',
end: 'June 8,2018 12:30:00',
content:
'A resource for soils and foundations, this book is a bridge between the world of geotechnical engineering and foundation design and construction activities and inspections dealing with soil conditions and building foundations. ',
speaker: 'Steve',
},
{
topic: 'LUNCH BREAK',
start: 'June 8,2018 12:30:00',
end: 'June 8,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Aquaculture',
start: 'June 8,2018 13:30:00',
end: 'June 8,2018 15:00:00',
content:
'Aquaculture, also known as aquafarming, is the farming of aquatic organisms such as fish, crustaceans, molluscs and aquatic plants. Aquaculture involves cultivating freshwater and saltwater populations under controlled conditions, and can be contrasted with commercial fishing, which is the harvesting of wild fish.',
speaker: 'Steve',
},
{
topic: 'TEA BREAK',
start: 'June 8,2018 15:00:00',
end: 'June 8,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Review',
start: 'June 8,2018 15:30:00',
end: 'June 8,2018 16:30:00',
content:
'Tony is going to give a really boring review of what has happend so far. Probably a good time to take a walk.',
speaker: 'Tony',
},
{
topic: 'DINNER',
start: 'June 8,2018 17:00:00',
end: 'June 8,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: Global Gardener 3',
start: 'June 8,2018 19:00:00',
end: 'June 8,2018 21:00:00',
content: 'Global Gardener is a documentary film series about the permaculture approach to sustainable agriculture.',
speaker: '',
},
{
topic: 'Herb Introduction',
start: 'June 9,2018 9:00:00',
end: 'June 9,2018 10:30:00',
content: 'No, not Herb, the security gard in the lobby. This session introduces herbs that you grow.',
speaker: 'Fiona',
},
{
topic: 'TEA BREAK',
start: 'June 9,2018 10:30:00',
end: 'June 9,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Herb Practical',
start: 'June 9,2018 11:00:00',
end: 'June 9,2018 12:30:00',
content: 'While Herb the Security Guard is a pretty practical guy, this covers how herbs are farmed in practive.',
speaker: 'Fiona',
},
{
topic: 'LUNCH BREAK',
start: 'June 9,2018 12:30:00',
end: 'June 9,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Afternooon Off',
start: 'June 9,2018 13:30:00',
end: 'June 9,2018 16:30:00',
content: 'You are probably so bored that you are questioning your reason for being here. Take a walk in the woods.',
speaker: '',
},
{
topic: 'DINNER',
start: 'June 9,2018 17:00:00',
end: 'June 9,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Film: Global Gardener 4',
start: 'June 9,2018 19:00:00',
end: 'June 9,2018 21:00:00',
content: 'Global Gardener is a documentary film series about the permaculture approach to sustainable agriculture.',
speaker: '',
},
{
topic: 'Building Environment Buildings',
start: 'June 10,2018 9:00:00',
end: 'June 10,2018 10:30:00',
content:
"Green building (also known as green construction or sustainable building) refers to both a structure and the using of processes that are environmentally responsible and resource-efficient throughout a building's life-cycle: from siting to design, construction, operation, maintenance, renovation, and demolition. In other words, green building design involves finding the balance between homebuilding and the sustainable environment. This requires close cooperation of the design team, the architects, the engineers, and the client at all project stages. The Green Building practice expands and complements the classical building design concerns of economy, utility, durability, and comfort",
speaker: 'Steve',
},
{
topic: 'TEA BREAK',
start: 'June 10,2018 10:30:00',
end: 'June 10,2018 11:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners. ',
speaker: '',
},
{
topic: 'Design Tools Methods',
start: 'June 10,2018 11:00:00',
end: 'June 10,2018 12:30:00',
content: 'There are tons of design tools out there, but do you know how to use them?',
speaker: 'Tony',
},
{
topic: 'LUNCH BREAK',
start: 'June 10,2018 12:30:00',
end: 'June 10,2018 13:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Environmental Energy',
start: 'June 10,2018 13:30:00',
end: 'June 10,2018 15:00:00',
content:
'Hippies think that they can get energy from the environment just by concentrating on it. Let us try that. ',
speaker: 'Steve',
},
{
topic: 'COFFEE BREAK',
start: 'June 10,2018 15:00:00',
end: 'June 10,2018 15:30:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners.',
speaker: '',
},
{
topic: 'Design Groups Site Introduction - Customer Brief',
start: 'June 10,2018 15:30:00',
end: 'June 10,2018 16:30:00',
content:
'This group actually did something for the customer and got paid real money. We will cover their case so you can too.',
speaker: 'Tony',
},
{
topic: 'DINNER',
start: 'June 10,2018 17:00:00',
end: 'June 10,2018 19:00:00',
content: 'Mingle with speakers at coffee and lunch breaks, and conference dinners. ',
speaker: '',
},
{
topic: 'Film: Spaceballs',
start: 'June 10,2018 19:00:00',
end: 'June 10,2018 21:00:00',
content:
"Planet Spaceballs President Skroob sends Lord Dark Helmet to steal planet Druidia's abundant supply of air to replenish their own, and only Lone Starr can stop them.",
speaker: '',
},
];
const imageNames = ['ds', 'gw', 'bw', 'hh', 'ac'];
let index = 0;
function getImage() {
let imageName;
imageName = imageNames[index % 5];
index++;
return `${imageName}.jpg`;
}
const SITE_ROOT = window.process.env.SITE_ROOT;
_.each(data, (rec) => {
rec.photo = `${SITE_ROOT}/images/${getImage()}`;
_.each(rec, (val, prop) => {
if (prop === 'start' || prop === 'end') {
rec[prop] = new Date(val);
}
});
});

module.exports = {
display: 'Axis Location:',
left: 'Left',
middle: 'Middle',
right: 'Right',
hideHeader: 'Hide Header',
showHeader: 'Show Header',
location: 'Header Position: ',
};

.main-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.sample-options {
background: #fbfbfb;
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.sample-options label {
display: inline-block;
font-weight: normal;
margin: 0;
margin-right: 5px;
}
.sample-options .option-row {
display: flex;
align-items: center;
margin-right: 5px;
}
.grid {
height: 100%;
width: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.gc-grid {
border: 1px none #fff;
}
.employee-photo {
border: solid 1px #e0e0e0;
border-radius: 50%;
height: 40px;
margin-left: 5px;
margin-right: 5px;
width: 40px;
}
.timeline-leftshape-group {
width: 0;
}
.timeline-rightshape-group {
width: 0;
}
.timelineLeftBtns {
display: inline-block;
}
.timelineRightBtns {
display: inline-block;
float: right;
}
.gc-cell-border {
border: 0;
}
.gc-group-header-row {
background: initial;
}
.timeline-group-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.timeline-group-header .point {
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #6cc8cc;
}
.timeline-group-header .label {
background-color: white;
color: #333;
}
.group-header-middle {
font-size: 12px;
display: inline-block;
background: white;
color: #333;
padding: 5px;
border-top: 3px solid #6cc8cc;
border-left: 1px solid #b4bbcd;
border-right: 1px solid #b4bbcd;
border-bottom: 1px solid #b4bbcd;
}
@media only screen and (max-width: 768px) {
.timelineLeftBtns {
display: none;
}
.timelineRightBtns {
float: left;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UaW1lbGluZS9UaW1lbGluZUdyb3VwaW5nL3JlYWN0L3N0eWxlcy5zY3NzIiwiRGF0YVZpZXdzL1RpbWVsaW5lL1RpbWVsaW5lR3JvdXBpbmcvcmVhY3Qvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxXQUFBO0FDRkY7O0FES0E7RUFDRSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsaUJBQUE7RUFDQSxnQkFBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0ZGO0FESUU7RUFDRSxxQkFBQTtFQUNBLG1CQUFBO0VBQ0EsU0FBQTtFQUNBLGlCQUFBO0FDRko7QURLRTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLGlCQUFBO0FDSEo7O0FET0E7RUFDRSxZQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDSkY7O0FET0E7RUFDRSxxQkFBQTtBQ0pGOztBRE9BO0VBQ0UseUJBQUE7RUFDQSxrQkFBQTtFQUNBLFlBQUE7RUFDQSxnQkFBQTtFQUNBLGlCQUFBO0VBQ0EsV0FBQTtBQ0pGOztBRE9BO0VBQ0UsUUFBQTtBQ0pGOztBRE9BO0VBQ0UsUUFBQTtBQ0pGOztBRE9BO0VBQ0UscUJBQUE7QUNKRjs7QURPQTtFQUNFLHFCQUFBO0VBQ0EsWUFBQTtBQ0pGOztBRE9BO0VBQ0UsU0FBQTtBQ0pGOztBRE9BO0VBQ0UsbUJBQUE7QUNKRjs7QURPQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLG1CQUFBO0VBQ0EsdUJBQUE7QUNKRjtBRE1FO0VBQ0UsV0FBQTtFQUNBLFlBQUE7RUFDQSxrQkFBQTtFQUNBLHlCQXpGUTtBQ3FGWjtBRE9FO0VBQ0UsdUJBQUE7RUFDQSxXQUFBO0FDTEo7O0FEU0E7RUFDRSxlQUFBO0VBQ0EscUJBQUE7RUFDQSxpQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0EsNkJBQUE7RUFDQSw4QkFBQTtFQUNBLCtCQUFBO0VBQ0EsZ0NBQUE7QUNORjs7QURTQTtFQUNFO0lBQ0UsYUFBQTtFQ05GOztFRFNBO0lBQ0UsV0FBQTtFQ05GO0FBQ0YiLCJmaWxlIjoiRGF0YVZpZXdzL1RpbWVsaW5lL1RpbWVsaW5lR3JvdXBpbmcvcmVhY3Qvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIiRib3JkZXItY29sb3I6ICNiNGJiY2Q7XG4kZG90LWNvbG9yOiAjNmNjOGNjO1xuXG4ubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBmbGV4LXdyYXA6IG5vd3JhcDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMTBweDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcblxuICBsYWJlbCB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gICAgbWFyZ2luOiAwO1xuICAgIG1hcmdpbi1yaWdodDogNXB4O1xuICB9XG5cbiAgLm9wdGlvbi1yb3cge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgfVxufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAxcHggbm9uZSAjZmZmO1xufVxuXG4uZW1wbG95ZWUtcGhvdG8ge1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGhlaWdodDogNDBweDtcbiAgbWFyZ2luLWxlZnQ6IDVweDtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gIHdpZHRoOiA0MHB4O1xufVxuXG4udGltZWxpbmUtbGVmdHNoYXBlLWdyb3VwIHtcbiAgd2lkdGg6IDA7XG59XG5cbi50aW1lbGluZS1yaWdodHNoYXBlLWdyb3VwIHtcbiAgd2lkdGg6IDA7XG59XG5cbi50aW1lbGluZUxlZnRCdG5zIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4udGltZWxpbmVSaWdodEJ0bnMge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZsb2F0OiByaWdodDtcbn1cblxuLmdjLWNlbGwtYm9yZGVyIHtcbiAgYm9yZGVyOiAwO1xufVxuXG4uZ2MtZ3JvdXAtaGVhZGVyLXJvdyB7XG4gIGJhY2tncm91bmQ6IGluaXRpYWw7XG59XG5cbi50aW1lbGluZS1ncm91cC1oZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAucG9pbnQge1xuICAgIHdpZHRoOiAyNnB4O1xuICAgIGhlaWdodDogMjZweDtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJGRvdC1jb2xvcjtcbiAgfVxuXG4gIC5sYWJlbCB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gICAgY29sb3I6ICMzMzM7XG4gIH1cbn1cblxuLmdyb3VwLWhlYWRlci1taWRkbGUge1xuICBmb250LXNpemU6IDEycHg7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgYmFja2dyb3VuZDogd2hpdGU7XG4gIGNvbG9yOiAjMzMzO1xuICBwYWRkaW5nOiA1cHg7XG4gIGJvcmRlci10b3A6IDNweCBzb2xpZCAkZG90LWNvbG9yO1xuICBib3JkZXItbGVmdDogMXB4IHNvbGlkICRib3JkZXItY29sb3I7XG4gIGJvcmRlci1yaWdodDogMXB4IHNvbGlkICRib3JkZXItY29sb3I7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAkYm9yZGVyLWNvbG9yO1xufVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC50aW1lbGluZUxlZnRCdG5zIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5cbiAgLnRpbWVsaW5lUmlnaHRCdG5zIHtcbiAgICBmbG9hdDogbGVmdDtcbiAgfVxufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC13cmFwOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG59XG4uc2FtcGxlLW9wdGlvbnMgbGFiZWwge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIG1hcmdpbjogMDtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW4tcmlnaHQ6IDVweDtcbn1cblxuLmdyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuXG4uZ2MtZ3JpZCB7XG4gIGJvcmRlcjogMXB4IG5vbmUgI2ZmZjtcbn1cblxuLmVtcGxveWVlLXBob3RvIHtcbiAgYm9yZGVyOiBzb2xpZCAxcHggI2UwZTBlMDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBoZWlnaHQ6IDQwcHg7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xuICB3aWR0aDogNDBweDtcbn1cblxuLnRpbWVsaW5lLWxlZnRzaGFwZS1ncm91cCB7XG4gIHdpZHRoOiAwO1xufVxuXG4udGltZWxpbmUtcmlnaHRzaGFwZS1ncm91cCB7XG4gIHdpZHRoOiAwO1xufVxuXG4udGltZWxpbmVMZWZ0QnRucyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cblxuLnRpbWVsaW5lUmlnaHRCdG5zIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBmbG9hdDogcmlnaHQ7XG59XG5cbi5nYy1jZWxsLWJvcmRlciB7XG4gIGJvcmRlcjogMDtcbn1cblxuLmdjLWdyb3VwLWhlYWRlci1yb3cge1xuICBiYWNrZ3JvdW5kOiBpbml0aWFsO1xufVxuXG4udGltZWxpbmUtZ3JvdXAtaGVhZGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG59XG4udGltZWxpbmUtZ3JvdXAtaGVhZGVyIC5wb2ludCB7XG4gIHdpZHRoOiAyNnB4O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzZjYzhjYztcbn1cbi50aW1lbGluZS1ncm91cC1oZWFkZXIgLmxhYmVsIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIGNvbG9yOiAjMzMzO1xufVxuXG4uZ3JvdXAtaGVhZGVyLW1pZGRsZSB7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbiAgY29sb3I6ICMzMzM7XG4gIHBhZGRpbmc6IDVweDtcbiAgYm9yZGVyLXRvcDogM3B4IHNvbGlkICM2Y2M4Y2M7XG4gIGJvcmRlci1sZWZ0OiAxcHggc29saWQgI2I0YmJjZDtcbiAgYm9yZGVyLXJpZ2h0OiAxcHggc29saWQgI2I0YmJjZDtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNiNGJiY2Q7XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLnRpbWVsaW5lTGVmdEJ0bnMge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cblxuICAudGltZWxpbmVSaWdodEJ0bnMge1xuICAgIGZsb2F0OiBsZWZ0O1xuICB9XG59Il19 */

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);

Timeline Grouping (React)