angular-slickgrid 4.1.4 → 4.2.0

package/src/app/examples/grid-angular.component.ts

@@ -0,0 +1,370 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import {
+  AngularGridInstance,
+  AngularUtilService,
+  BsDropDownService,
+  Column,
+  Editors,
+  FieldType,
+  Filters,
+  Formatters,
+  GridOption,
+  OnEventArgs,
+  SlickNamespace,
+} from './../modules/angular-slickgrid';
+import { EditorNgSelectComponent } from './editor-ng-select.component';
+import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
+import { CustomAngularComponentFilter } from './custom-angularComponentFilter';
+import { CustomTitleFormatterComponent } from './custom-titleFormatter.component';
+import { FilterNgSelectComponent } from './filter-ng-select.component';
+
+// using external non-typed js libraries
+declare const Slick: SlickNamespace;
+declare const $: any;
+
+const NB_ITEMS = 100;
+
+@Component({
+  templateUrl: './grid-angular.component.html',
+  styleUrls: ['./grid-angular.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class GridAngularComponent implements OnInit {
+  title = 'Example 22: Use of Angular Components';
+  subTitle = `
+  <h3>Filters, Editors, AsyncPostRender with Angular Components</h3>
+  Grid with usage of Angular Components as Editor &amp; AsyncPostRender (similar to Formatter).
+  <ul>
+    <li>Support of Angular Component as Custom Editor (click on any "Assignee" name cell)</li>
+    <ul>
+      <li>That column uses <a href="https://github.com/ng-select/ng-select" target="_blank">ng-select</a> as a custom editor as an Angular Component
+      <li>Increased Grid Options "rowHeight" &amp; "headerRowHeight" to 45 so that the "ng-select" fits in the cell. Ideally it would be better to override the ng-select css styling to change it's max height</li>
+    </ul>
+    <li>Support of Angular Component as Custom Filter ("Assignee" columns), which also uses "ng-select"
+    <li>The 2nd "Assignee" column (showing in bold text) uses "asyncPostRender" with an Angular Component</li>
+    <ul>
+      <li>Why can't we use Angular Component as Customer Formatter and why do I see a slight delay in loading the data?</li>
+      <li>It's totally normal since SlickGrid Formatters only accept strings (synchronously),
+      so we cannot use that (Angular requires at least 1 full cycle to render the element), so we are left with SlickGrid "asyncPostRender" and
+      it works but as the name suggest it's async users might see noticeable delay in loading the data
+      </li>
+    </ul>
+  </ul>
+  `;
+
+  private _commandQueue: any[] = [];
+  angularGrid!: AngularGridInstance;
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  gridObj: any;
+  isAutoEdit = true;
+  alertWarning: any;
+  updatedObject: any;
+  selectedLanguage = 'en';
+  assignees = [
+    { id: '', name: '' },
+    { id: '1', name: 'John' },
+    { id: '2', name: 'Pierre' },
+    { id: '3', name: 'Paul' },
+  ];
+
+  constructor(private angularUtilService: AngularUtilService, private bsDropdown: BsDropDownService, private translate: TranslateService) { }
+
+  ngOnInit(): void {
+    this.prepareGrid();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.gridObj = angularGrid.slickGrid;
+  }
+
+  prepareGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'title',
+        minWidth: 100,
+        filterable: true,
+        sortable: true,
+        type: FieldType.string,
+        editor: {
+          model: Editors.longText,
+          minLength: 5,
+          maxLength: 255,
+        },
+        onCellChange: (e: Event, args: OnEventArgs) => {
+          console.log(args);
+          this.alertWarning = `Updated Title: ${args.dataContext.title}`;
+        }
+      }, {
+        id: 'assignee',
+        name: 'Assignee',
+        field: 'assignee',
+        minWidth: 100,
+        filterable: true,
+        sortable: true,
+        filter: {
+          model: new CustomAngularComponentFilter(), // create a new instance to make each Filter independent from each other
+          collection: this.assignees,
+          params: {
+            component: FilterNgSelectComponent,
+          }
+        },
+        queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property
+        queryFieldSorter: 'assignee.name',
+        formatter: Formatters.complexObject,
+        params: {
+          complexFieldLabel: 'assignee.name',
+        },
+        exportWithFormatter: true,
+        editor: {
+          model: CustomAngularComponentEditor,
+          collection: this.assignees,
+          params: {
+            component: EditorNgSelectComponent,
+          }
+        },
+        onCellChange: (e: Event, args: OnEventArgs) => {
+          console.log(args);
+          this.alertWarning = `Updated Title: ${args.dataContext.title}`;
+        }
+      }, {
+        id: 'assignee2',
+        name: 'Assignee with Angular Component',
+        field: 'assignee',
+        minWidth: 125,
+        filterable: true,
+        sortable: true,
+        filter: {
+          model: new CustomAngularComponentFilter(), // create a new instance to make each Filter independent from each other
+          collection: this.assignees,
+          params: {
+            component: FilterNgSelectComponent,
+          }
+        },
+        queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property
+        queryFieldSorter: 'assignee.name',
+
+        // loading formatter, text to display while Post Render gets processed
+        formatter: () => '...',
+
+        // to load an Angular Component, you cannot use a Formatter since Angular needs at least 1 cycle to render everything
+        // you can use a PostRenderer but you will visually see the data appearing,
+        // which is why it's still better to use regular Formatter (with jQuery if need be) instead of Angular Component
+        asyncPostRender: this.renderAngularComponent.bind(this),
+        params: {
+          component: CustomTitleFormatterComponent,
+          angularUtilService: this.angularUtilService,
+          complexFieldLabel: 'assignee.name' // for the exportCustomFormatter
+        },
+        exportCustomFormatter: Formatters.complexObject,
+      }, {
+        id: 'complete',
+        name: '% Complete',
+        field: 'percentComplete',
+        minWidth: 100,
+        filterable: true,
+        formatter: Formatters.multiple,
+        type: FieldType.number,
+        editor: {
+          model: Editors.singleSelect,
+
+          // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
+          enableRenderHtml: true,
+          collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '<i class="fa fa-percent" style="color:cadetblue"></i>' })),
+          customStructure: {
+            value: 'value',
+            label: 'label',
+            labelSuffix: 'symbol'
+          },
+          editorOptions: {
+            maxHeight: 400
+          }
+        },
+        filter: {
+          model: Filters.slider,
+          operator: '>=',
+          params: { hideSliderNumber: false }
+        },
+        params: {
+          formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar],
+        }
+      }, {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        minWidth: 100,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+        sortable: true,
+        type: FieldType.date,
+        editor: {
+          model: Editors.date
+        },
+      }, {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        minWidth: 100,
+        filterable: true,
+        sortable: true,
+        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+        type: FieldType.date,
+        editor: {
+          model: Editors.date
+        },
+      },
+      {
+        id: 'action',
+        name: 'Action',
+        field: 'id',
+        formatter: () => `<div class="fake-hyperlink">Action <i class="fa fa-caret-down"></i></div>`,
+        cellMenu: {
+          commandTitle: 'Commands',
+          commandItems: [
+            {
+              command: 'help',
+              title: 'Help',
+              iconCssClass: 'fa fa-question-circle text-info',
+              positionOrder: 66,
+              action: () => alert('Please Help!'),
+            },
+            {
+              command: 'delete-row', title: 'Delete Row', positionOrder: 64,
+              iconCssClass: 'fa fa-times color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light',
+              action: (_event, args) => this.angularGrid.gridService.deleteItemById(args.dataContext.id)
+            },
+          ]
+        }
+      }
+    ];
+
+    this.gridOptions = {
+      asyncEditorLoading: false,
+      autoEdit: this.isAutoEdit,
+      autoCommitEdit: false,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+      headerRowHeight: 45,
+      rowHeight: 45, // increase row height so that the ng-select fits in the cell
+      editable: true,
+      enableCellMenu: true,
+      enableCellNavigation: true,
+      enableColumnPicker: true,
+      enableExcelCopyBuffer: true,
+      enableFiltering: true,
+      enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
+      asyncPostRenderDelay: 0,    // also make sure to remove any delay to render it
+      editCommandHandler: (item, column, editCommand) => {
+        this._commandQueue.push(editCommand);
+        editCommand.execute();
+      },
+      i18n: this.translate,
+      params: {
+        angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
+      }
+    };
+
+    this.dataset = this.mockData(NB_ITEMS);
+  }
+
+  mockData(itemCount: number, startingIndex = 0) {
+    // mock a dataset
+    const tempDataset = [];
+    for (let i = startingIndex; i < (startingIndex + itemCount); i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 10);
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor((Math.random() * 29));
+      const randomPercent = Math.round(Math.random() * 100);
+
+      tempDataset.push({
+        id: i,
+        title: 'Task ' + i,
+        assignee: i % 3 ? this.assignees[3] : i % 2 ? this.assignees[2] : this.assignees[1],
+        duration: Math.round(Math.random() * 100) + '',
+        percentComplete: randomPercent,
+        percentCompleteNumber: randomPercent,
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: new Date(randomYear, (randomMonth + 1), randomDay),
+        effortDriven: (i % 5 === 0),
+      });
+    }
+    return tempDataset;
+  }
+
+  onCellChanged(e: Event, args: any) {
+    this.updatedObject = args.item;
+  }
+
+  onCellClicked(e: Event, args: any) {
+    const metadata = this.angularGrid.gridService.getColumnFromEventArguments(args);
+    console.log(metadata);
+
+    if (metadata.columnDef.id === 'edit') {
+      this.alertWarning = `open a modal window to edit: ${metadata.dataContext.title}`;
+
+      // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
+      this.angularGrid.gridService.highlightRow(args.row, 1500);
+
+      // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
+      // this.angularGrid.gridService.setSelectedRow(args.row);
+    } else if (metadata.columnDef.id === 'delete') {
+      if (confirm('Are you sure?')) {
+        this.angularGrid.gridService.deleteItemById(metadata.dataContext.id);
+      }
+    }
+  }
+
+  onCellValidationError(e: Event, args: any) {
+    alert(args.validationResults.msg);
+  }
+
+  changeAutoCommit() {
+    this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit;
+    this.gridObj.setOptions({
+      autoCommitEdit: this.gridOptions.autoCommitEdit
+    });
+    return true;
+  }
+
+  setAutoEdit(isAutoEdit: boolean) {
+    this.isAutoEdit = isAutoEdit;
+    this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
+    return true;
+  }
+
+  undo() {
+    const command = this._commandQueue.pop();
+    if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      command.undo();
+      this.gridObj.gotoCell(command.row, command.cell, false);
+    }
+  }
+
+  renderAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
+    if (colDef.params.component) {
+      const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component);
+      Object.assign(componentOutput.componentRef.instance, { item: dataContext });
+
+      // use a delay to make sure Angular ran at least a full cycle and make sure it finished rendering the Component
+      setTimeout(() => $(cellNode).empty().html(componentOutput.domElement));
+    }
+  }
+
+  /* Create an Action Dropdown Menu */
+  deleteCell(rowNumber: number) {
+    const item = this.angularGrid.dataView.getItem(rowNumber);
+    this.angularGrid.gridService.deleteItemById(item.id);
+  }
+}

package/src/app/examples/grid-autoheight.component.html

@@ -0,0 +1,52 @@
+<div class="container-fluid">
+  <h2>
+    {{title}}
+    <span class="float-end">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-autoheight.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <div class="row row-cols-lg-auto g-1 align-items-center">
+    <div class="col">
+      <label for="columnSelect">Single Search:</label>
+    </div>
+    <div class="col">
+      <select class="form-select" class="form-select" data-test="search-column-list" name="selectedColumn"
+              [(ngModel)]="selectedColumn"
+              (ngModelChange)="updateFilter()">
+        <option [ngValue]="field" *ngFor="let field of columnDefinitions">{{field.name}}</option>
+      </select>
+    </div>
+    <div class="col">
+      <select class="form-select" data-test="search-operator-list" name="selectedOperator"
+              [(ngModel)]="selectedOperator" (ngModelChange)="updateFilter()">
+        <option [ngValue]="operator" *ngFor="let operator of operatorList">{{operator}}</option>
+      </select>
+    </div>
+
+    <div class="col">
+      <div class="input-group">
+        <input type="text" class="form-control" data-test="search-value-input" name="searchValue"
+               placeholder="search value" autocomplete="off" (input)="updateFilter()" [(ngModel)]="searchValue">
+        <button class="btn btn-outline-secondary d-flex align-items-center pl-2 pr-2" data-test="clear-search-value"
+                (click)="cleargridSearchInput()">
+          <span class="fa fa-times"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <hr />
+
+  <angular-slickgrid gridId="grid23"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions"
+                     [dataset]="dataset"
+                     (onAngularGridCreated)="angularGridReady($event.detail)">
+  </angular-slickgrid>
+</div>

package/src/app/examples/grid-autoheight.component.ts

@@ -0,0 +1,147 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  AngularGridInstance,
+  Column,
+  FieldType,
+  Formatters,
+  GridOption,
+  OperatorString,
+  SlickDataView,
+  SlickGrid,
+} from './../modules/angular-slickgrid';
+
+@Component({
+  styles: ['.duration-bg { background-color: #e9d4f1 !important }'],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './grid-autoheight.component.html'
+})
+export class GridAutoHeightComponent implements OnInit {
+  title = 'Example 23: Grid AutoHeight';
+  subTitle = `
+  The SlickGrid option "autoHeight" can be used if you wish to keep the full height of the grid without any scrolling
+  <ul>
+  <li>You define a fixed grid width via "gridWidth" in the View</li>
+  <li>You can still use the "autoResize" for the width to be resized automatically (the height will never change in this case)</li>
+  <li>This dataset has 25 rows, if you scroll down the page you can see the entire set is shown without any grid scrolling (though you might have browser scrolling)</li>
+  </ul>
+  `;
+
+  angularGrid!: AngularGridInstance;
+  grid!: SlickGrid;
+  dataView!: SlickDataView;
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  operatorList: OperatorString[] = ['=', '<', '<=', '>', '>=', '<>', 'StartsWith', 'EndsWith'];
+  selectedOperator = '=';
+  searchValue = '';
+  selectedColumn?: Column;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.prepareGrid();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  prepareGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title', name: 'Title', field: 'title',
+        sortable: true,
+        type: FieldType.string
+      },
+      {
+        id: 'duration', name: 'Duration (days)', field: 'duration',
+        sortable: true,
+        type: FieldType.number
+      },
+      {
+        id: 'complete', name: '% Complete', field: 'percentComplete',
+        formatter: Formatters.percentCompleteBar,
+        type: FieldType.number
+      },
+      {
+        id: 'start', name: 'Start', field: 'start',
+        formatter: Formatters.dateIso,
+        sortable: true,
+        type: FieldType.date
+      },
+      {
+        id: 'finish', name: 'Finish', field: 'finish',
+        formatter: Formatters.dateIso, sortable: true,
+        type: FieldType.date
+      },
+      {
+        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
+        formatter: Formatters.checkmark,
+        type: FieldType.number
+      }
+    ];
+    this.selectedColumn = this.columnDefinitions[0];
+
+    this.gridOptions = {
+      // if you want to disable autoResize and use a fixed width which requires horizontal scrolling
+      // it's advised to disable the autoFitColumnsOnFirstLoad as well
+      // enableAutoResize: false,
+      // autoFitColumnsOnFirstLoad: false,
+
+      autoHeight: true,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+
+      // enable the filtering but hide the user filter row since we use our own single filter
+      enableFiltering: true,
+      showHeaderRow: false, // hide the filter row (header row)
+
+      enableGridMenu: false, // disable grid menu & remove vertical scroll
+      alwaysShowVerticalScroll: false,
+      enableColumnPicker: true,
+      enableCellNavigation: true,
+      enableRowSelection: true
+    };
+
+    // mock a dataset
+    const mockedDataset = [];
+    for (let i = 0; i < 25; i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 10);
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor((Math.random() * 29));
+      const randomPercent = Math.round(Math.random() * 100);
+
+      mockedDataset[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 100) + '',
+        percentComplete: randomPercent,
+        percentCompleteNumber: randomPercent,
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: new Date(randomYear, (randomMonth + 1), randomDay),
+        effortDriven: (i % 5 === 0)
+      };
+    }
+    this.dataset = mockedDataset;
+  }
+
+  //
+  // -- if any of the Search form input changes, we'll call the updateFilter() method
+  //
+
+  cleargridSearchInput() {
+    this.searchValue = '';
+    this.updateFilter();
+  }
+
+  updateFilter() {
+    this.angularGrid.filterService.updateSingleFilter({
+      columnId: `${this.selectedColumn!.id || ''}`,
+      operator: this.selectedOperator as OperatorString,
+      searchTerms: [this.searchValue || '']
+    });
+  }
+}

package/src/app/examples/grid-basic.component.html

@@ -0,0 +1,29 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    {{title}}
+    <span class="float-end">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-basic.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <h3>Grid 1</h3>
+  <angular-slickgrid gridId="grid1"
+                     [columnDefinitions]="columnDefinitions1"
+                     [gridOptions]="gridOptions1"
+                     [dataset]="dataset1">
+  </angular-slickgrid>
+
+  <hr />
+
+  <h3>Grid 2 <small>(with local Pagination)</small></h3>
+  <angular-slickgrid gridId="grid2"
+                     [columnDefinitions]="columnDefinitions2"
+                     [gridOptions]="gridOptions2"
+                     [dataset]="dataset2">
+  </angular-slickgrid>
+</div>

package/src/app/examples/grid-basic.component.ts

@@ -0,0 +1,82 @@
+import { Component, OnInit } from '@angular/core';
+import { Column, GridOption, Formatters } from './../modules/angular-slickgrid';
+
+const NB_ITEMS = 995;
+
+@Component({
+  templateUrl: './grid-basic.component.html'
+})
+export class GridBasicComponent implements OnInit {
+  title = 'Example 1: Basic Grids';
+  subTitle = `
+    Basic Grids with fixed sizes (800 x 225) set by "gridHeight" & "gridWidth"
+    <ul>
+      <li><a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step" target="_blank">Wiki HOWTO link</a></li>
+    </ul>
+  `;
+
+  columnDefinitions1: Column[] = [];
+  columnDefinitions2: Column[] = [];
+  gridOptions1!: GridOption;
+  gridOptions2!: GridOption;
+  dataset1!: any[];
+  dataset2!: any[];
+
+  ngOnInit(): void {
+    this.columnDefinitions1 = [
+      { id: 'title', name: 'Title', field: 'title', sortable: true },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
+      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
+      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
+      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
+    ];
+    this.gridOptions1 = {
+      enableAutoResize: false,
+      enableSorting: true,
+      gridHeight: 225,
+      gridWidth: 800,
+    };
+
+    // copy the same Grid Options and Column Definitions to 2nd grid
+    // but also add Pagination in this grid
+    this.columnDefinitions2 = this.columnDefinitions1;
+    this.gridOptions2 = {
+      ...this.gridOptions1,
+      ...{
+        enablePagination: true,
+        pagination: {
+          pageSizes: [5, 10, 20, 25, 50],
+          pageSize: 5
+        },
+      }
+    };
+
+    // mock some data (different in each dataset)
+    this.dataset1 = this.mockData(NB_ITEMS);
+    this.dataset2 = this.mockData(NB_ITEMS);
+  }
+
+  mockData(count: number) {
+    // mock a dataset
+    const mockDataset = [];
+    for (let i = 0; i < count; i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 10);
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor((Math.random() * 29));
+      const randomPercent = Math.round(Math.random() * 100);
+
+      mockDataset[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 100) + '',
+        percentComplete: randomPercent,
+        start: new Date(randomYear, randomMonth + 1, randomDay),
+        finish: new Date(randomYear + 1, randomMonth + 1, randomDay),
+        effortDriven: (i % 5 === 0)
+      };
+    }
+
+    return mockDataset;
+  }
+}