gantt-source_management 3.37.5

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/.eslintrc.json

@@ -0,0 +1,39 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "es2017": true,
+    "jest": true,
+    "node": true,
+    "cypress/globals": true
+  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/eslint-recommended"],
+  "globals": {
+    "page": true,
+    "browser": true,
+    "context": true,
+    "jestPuppeteer": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "prettier", "cypress"],
+  "rules": {
+    "semi": ["error", "always"],
+    "quotes": [
+      "error",
+      "single",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ],
+    "no-undef": "warn",
+    "no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "no-console": "error"
+  },
+  "ignorePatterns": ["**/*.d.ts", "node_modules", ".git", ".history", "dist", "types", "./*.js", "examples/**/*.*"]
+}

package/.prettierrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  semi: true,
+  printWidth: 120
+};

package/README.md

@@ -0,0 +1,129 @@
+<h1 align="center">gantt-schedule-timeline-calendar</h1>
+
+<h2 align="center">Gantt, schedule, timeline and calendar components all in one!</h2>
+
+<p align="center">
+  <img src="https://neuronet.io/screenshots/mainapp.jpg" alt="gantt-schedule-timeline-calendar">
+</p>
+
+<h3>gantt-schedule-timeline-calendar is all-in-one component that you can use in different scenarios.</h3>
+Keywords: [ gantt, javascript gantt, typescript gantt, project manager, js gantt, js scheduler, js timeline, javascript timeline, javascript schedule, js scheduler, javascript calendar ]
+<br/><br/><br/>
+<p align="center">
+  <img src="https://img.shields.io/npm/v/gantt-schedule-timeline-calendar.svg">
+  <img src="https://snyk.io/test/github/neuronetio/gantt-schedule-timeline-calendar/badge.svg">
+  <img src="https://app.codacy.com/project/badge/Grade/732e0ef156344594b48584af97ba1e4a">
+  <img src="https://neuronet.io/screenshots/typescript.svg">
+  <img src="https://neuronet.io/screenshots/eslint.svg">
+  <img src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/qdqmtw/master&style=flat&logo=cypress">
+  <img src="https://api.travis-ci.com/neuronetio/gantt-schedule-timeline-calendar.svg?branch=master">
+  <img src="https://img.shields.io/npm/dm/gantt-schedule-timeline-calendar.svg">
+  <!--<img src="https://img.badgesize.io/neuronetio/gantt-schedule-timeline-calendar/master/dist/gstc.esm.min.js?compression=gzip">-->
+</p>
+<br>
+<br />
+<h3 align="center">And always remember, to leave a <a href="https://github.com/neuronetio/gantt-schedule-timeline-calendar">star :star:</a></h3>
+<br />
+
+<h2 align="center">FEATURES</h2>
+
+- elastic - you can change almost everything from DOM tree to logic (without any compilation, without modifying original code - with config, state or plugin)
+- super fast! even with large dataset
+- multiple items in one row - suitable for various applications like booking, reservation, resource manager, multimedia editor etc.
+- tree like structures - collapsible / expandable groups
+- moveable / resizable items with ability to configure which items can move at the moment and how
+- secure html templates
+- snap to specified time when resizing / moving
+- templates & slots support to easily change html content of each component
+- background grid on which you can place your html content
+- selectable cells and items with a choice of what can be selected at the moment
+- gradual time zoom up to seconds
+- resizable list columns (in realtime)
+- sortable and searchable list columns
+- BEM based CSS rules (easy to change appearance)
+- you can easily add third party libraries
+- highly configurable
+- mobile ready
+- Daylight saving time (DST) support
+- plugins support
+- attractive visually
+- written in typescript
+- offline license key (after purchase)
+
+<p>
+You can use it in <strong>react</strong>, <strong>vue</strong>, <strong>angular</strong>, <strong>svelte</strong> or any other projects.
+</p>
+
+<p>
+You can use it as <strong>schedule</strong> for reservation system. You can use it for organizing <strong>events</strong>. You can use it as <strong>gantt chart</strong>. You can use it as <strong>calendar</strong> for different purposes.
+You can even use it as a <strong>multimedia timeline editor</strong>!
+</p>
+
+<p>
+<strong>gantt-schedule-timeline-calendar</strong> is very extensible and elastic. You can make your own plugins or modify configuration in couple of ways to achieve your goals.
+You can control almost everything. You can change html structure, stylize every html element and even override original components without any compilation stage!
+</p>
+
+<h2 align="center">EXAMPLES</h2>
+
+<a href="https://gantt-schedule-timeline-calendar.neuronet.io/examples" target="_blank">Online examples</a>
+
+You can checkout [examples folder](https://github.com/neuronetio/gantt-schedule-timeline-calendar/tree/master/examples) too.
+To run examples locally, clone this repository and run `npm run examples` in the root folder.
+```bash
+git clone https://github.com/neuronetio/gantt-schedule-timeline-calendar.git
+cd gantt-schedule-timeline-calendar
+npm i
+npm run examples
+```
+
+<h2 align="center">REACT, NEXTJS, ANGULAR, SVELTE AND VUE EXAMPLES</h2>
+
+- [react gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/react-gantt-schedule-timeline-calendar-example)
+- [nextjs/react gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/nextjs-gantt-schedule-timeline-calendar-example)
+- [angular gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/angular-gantt-schedule-timeline-calendar-example)
+- [vue gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar-example)
+- [vue3 composition api with vite gantt-schedule-timeline-calendar example](https://github.com/neuronetio/vue3-vite-gantt-schedule-timeline-calendar-example)
+- [svelte gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/svelte-gantt-schedule-timeline-calendar-example)
+
+<h2 align="center">SCREENSHOTS</h2>
+
+<p align="center">
+  <img src="https://neuronet.io/screenshots/item-types.png" alt="gantt-schedule-timeline-calendar item types">
+  <br />
+  <img src="https://neuronet.io/screenshots/item-types-selected.png" alt="gantt-schedule-timeline-calendar item types">
+  <br />
+  <img src="https://neuronet.io/screenshots/item-types-selected-2.png" alt="gantt-schedule-timeline-calendar item types">
+  <br />
+  <img src="https://neuronet.io/screenshots/select-cells.gif" alt="gantt-schedule-timeline-calendar select cells">
+  <br />
+  <img src="https://neuronet.io/screenshots/linked-items-2.gif" alt="gantt-schedule-timeline-calendar linked items">
+  <br />
+  <img src="https://neuronet.io/screenshots/select-items.gif" alt="gantt-schedule-timeline-calendar select items">
+  <br />
+  <img src="https://neuronet.io/screenshots/linked-items.gif" alt="gantt-schedule-timeline-calendar linked-items 2">
+</p>
+<hr />
+
+<h2 align="center">INSTALL</h2>
+
+`npm i gantt-schedule-timeline-calendar`
+
+or
+
+`<script src="https://cdn.jsdelivr.net/npm/gantt-schedule-timeline-calendar/dist/gstc.wasm.umd.min.js"></script>`
+
+<h2 align="center">DOCUMENTATION</h2>
+
+[Documentation can be found here](https://gantt-schedule-timeline-calendar.neuronet.io)
+
+<h2 align="center">NEED HELP?</h2>
+
+Let us know neuronet.io@gmail.com
+
+<h2 align="center">LICENSE</h2>
+
+[NEURONET Free / Trial License Terms](https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
+
+You can generate [free or trial license key here](https://gstc.neuronet.io/free-key).
+If you need a full commercial license, please visit [pricing page](https://gantt-schedule-timeline-calendar.neuronet.io/pricing).

package/cypress/e2e/add-rows-items.test.ts

@@ -0,0 +1,26 @@
+import { GridRows } from '../../dist/gstc';
+
+describe('Add rows & items', () => {
+  it('should add rows and display grid properly', () => {
+    let state;
+    cy.load('/examples/add-rows-items')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+      })
+      .then(() => {
+        const gridRows: GridRows = state.get('$data.chart.grid.rows');
+        const keys = Object.keys(gridRows);
+        expect(keys.length).to.eq(11);
+        expect(Object.keys(gridRows[keys[0]].cells).length).to.be.greaterThan(0);
+      }).get('.gstc__chart-timeline-grid-row-cell').should('be.visible')
+      .get('#add-rows').click().wait(Cypress.env('wait'))
+      .then(() => {
+        const gridRows: GridRows = state.get('$data.chart.grid.rows');
+        const keys = Object.keys(gridRows);
+        expect(keys.length).to.eq(11);
+        expect(Object.keys(gridRows[keys[0]].cells).length).to.be.greaterThan(0);
+      }).get('.gstc__chart-timeline-grid-row-cell').should('be.visible');
+  });
+});

package/cypress/e2e/basic.test.ts

@@ -0,0 +1,173 @@
+import DeepState from 'deep-state-observer';
+
+describe('Basic', () => {
+  function basicTest(path) {
+    return it(`Simple (${path})`, () => {
+      let state: DeepState, gstc;
+      cy.load(path)
+        .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-1"] .gstc__chart-timeline-items-row-item-label')
+        .should(($el) => {
+          expect($el.text()).to.eq('Item 1');
+        })
+        .window()
+        .then((win) => {
+          // @ts-ignore
+          state = win.state as DeepState;
+          // @ts-ignore
+          gstc = win.gstc;
+          expect(state.get('config.chart.items.gstcid-1.label')).to.eq('Item 1');
+          state.update('config.chart.items.gstcid-1.label', 'New label 1');
+          expect(state.get('config.chart.items.gstcid-1.label')).to.eq('New label 1');
+        })
+        .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-1"] .gstc__chart-timeline-items-row-item-label')
+        .should(($el) => {
+          expect($el.text()).to.eq('New label 1');
+        })
+        .then(() => {
+          cy.log('rows', Object.keys(state.get('$data.list.rows')));
+          cy.log('rowsIds', state.get('$data.list.rowsIds'));
+          cy.log('visibleRows', state.get('$data.list.visibleRows').join(','));
+          cy.log('itemRowMap keys', Object.keys(state.get('$data.itemRowMap')).join(','));
+          cy.log('rowsIds', state.get('$data.list.rowsIds').join(','));
+          cy.log('$data.chart.grid.rows', Object.keys(state.get('$data.chart.grid.rows')).join(','));
+          cy.log('$data.chart.items', Object.keys(state.get('$data.chart.items')).join(','));
+        })
+        .then(() => {
+          expect(Object.keys(state.get('$data.chart.grid.rows')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.grid.cells')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.items')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.list.rows')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.items')).join(',')).to.eq(
+            Object.keys(state.get('$data.itemRowMap')).join(',')
+          );
+          expect(Object.keys(state.get('$data.list.rows')).join(',')).to.eq(state.get('$data.list.rowsIds').join(','));
+          expect(state.get('$data.list.visibleRowsHeight')).to.be.greaterThan(0);
+          expect(state.get('$data.list.rowsWithParentsExpanded').join(',')).to.eq(
+            Object.keys(state.get('$data.list.rows')).join(',') // all rows should be visible
+          );
+          expect(state.get('$data.list.rowsWithParentsExpanded').length).to.be.greaterThan(0);
+        })
+        //
+        // Update rows
+        //
+        .then(() => {
+          cy.log('Update rows');
+          state.update('config', (config) => {
+            config.list.rows = {
+              'gstcid-1': {
+                id: 'gstcid-1',
+                label: 'Row 1',
+              },
+              'gstcid-2': {
+                id: 'gstcid-2',
+                label: 'Row 2',
+              },
+            };
+            config.chart.items = {
+              'gstcid-1': {
+                id: 'gstcid-1',
+                label: 'Item 1',
+                rowId: 'gstcid-1',
+                time: {
+                  start: gstc.api.time.date('2020-01-01').startOf('day').valueOf(),
+                  end: gstc.api.time.date('2020-01-02').endOf('day').valueOf(),
+                },
+              },
+              'gstcid-2': {
+                id: 'gstcid-2',
+                label: 'Item 2',
+                rowId: 'gstcid-2',
+                time: {
+                  start: gstc.api.time.date('2020-01-15').startOf('day').valueOf(),
+                  end: gstc.api.time.date('2020-01-20').endOf('day').valueOf(),
+                },
+              },
+            };
+            return config;
+          });
+        })
+        .then(() => {
+          cy.log('rows', Object.keys(state.get('$data.list.rows')));
+          cy.log('rowsIds', state.get('$data.list.rowsIds'));
+          cy.log('visibleRows', state.get('$data.list.visibleRows').join(','));
+          cy.log('itemRowMap keys', Object.keys(state.get('$data.itemRowMap')).join(','));
+          cy.log('$data.chart.grid.rows', Object.keys(state.get('$data.chart.grid.rows')).join(','));
+          cy.log('$data.chart.items', Object.keys(state.get('$data.chart.items')).join(','));
+          cy.log('config.version', state.get('config.version'));
+        })
+        .then(() => {
+          expect(Object.keys(state.get('$data.chart.grid.rows')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.grid.cells')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.items')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.list.rows')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.items')).join(',')).to.eq(
+            Object.keys(state.get('$data.itemRowMap')).join(',')
+          );
+          expect(Object.keys(state.get('$data.list.rows')).join(',')).to.eq(state.get('$data.list.rowsIds').join(','));
+          expect(state.get('$data.list.rowsWithParentsExpanded').length).to.be.greaterThan(0);
+          expect(state.get('$data.list.visibleRows').length).to.be.greaterThan(0);
+          expect(state.get('$data.list.visibleRowsHeight')).to.be.greaterThan(0);
+          expect(state.get('$data.list.rowsWithParentsExpanded').join(',')).to.eq(
+            state.get('$data.list.visibleRows').join(',') // there is only one row so it will work
+          );
+          expect(state.get('$data.list.rowsWithParentsExpanded').length).to.be.greaterThan(0);
+        })
+        //
+        // Update again
+        //
+        .then(() => {
+          cy.log('Update again');
+          state.update('config', (config) => {
+            config.list.rows = {
+              'gstcid-13': {
+                id: 'gstcid-13',
+                label: 'Row 2',
+              },
+            };
+            config.chart.items = {
+              'gstcid-400': {
+                id: 'gstcid-400',
+                label: 'Item 2',
+                rowId: 'gstcid-13',
+                time: {
+                  start: gstc.api.time.date('2020-01-15').startOf('day').valueOf(),
+                  end: gstc.api.time.date('2020-01-20').endOf('day').valueOf(),
+                },
+              },
+            };
+            return config;
+          });
+        })
+        .wait(100)
+        .then(() => {
+          cy.log('rows', Object.keys(state.get('$data.list.rows')));
+          cy.log('rowsIds', state.get('$data.list.rowsIds'));
+          cy.log('visibleRows', state.get('$data.list.visibleRows').join(','));
+          cy.log('itemRowMap keys', Object.keys(state.get('$data.itemRowMap')).join(','));
+          cy.log('$data.chart.grid.rows', Object.keys(state.get('$data.chart.grid.rows')).join(','));
+          cy.log('$data.chart.items', Object.keys(state.get('$data.chart.items')).join(','));
+          cy.log('config.version', state.get('config.version'));
+        })
+        .then(() => {
+          expect(Object.keys(state.get('$data.chart.grid.rows')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.grid.cells')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.items')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.list.rows')).length).to.be.greaterThan(0);
+          expect(Object.keys(state.get('$data.chart.items')).join(',')).to.eq(
+            Object.keys(state.get('$data.itemRowMap')).join(',')
+          );
+          expect(Object.keys(state.get('$data.list.rows')).join(',')).to.eq(state.get('$data.list.rowsIds').join(','));
+          expect(state.get('$data.list.rowsWithParentsExpanded').length).to.be.greaterThan(0);
+          expect(state.get('$data.list.visibleRows').length).to.be.greaterThan(0);
+          expect(state.get('$data.list.visibleRowsHeight')).to.be.greaterThan(0);
+          expect(state.get('$data.list.rowsWithParentsExpanded').join(',')).to.eq(
+            state.get('$data.list.visibleRows').join(',') // there is only one row so it will work
+          );
+          expect(state.get('$data.list.rowsWithParentsExpanded').length).to.be.greaterThan(0);
+        });
+    });
+  }
+
+  basicTest('/examples/simple/simple.esm.html');
+  basicTest('/examples/simple/simple.umd.html');
+});

package/cypress/e2e/calculated-zoom-mode.test.ts

@@ -0,0 +1,163 @@
+import DeepState from 'deep-state-observer';
+import { GSTCResult, Item, ItemData } from '../../dist/gstc';
+
+describe('Calculated zoom mode', () => {
+  it('should change calculatedZoomMode', () => {
+    let state: DeepState, gstc, initialFrom, initialTo, from, to;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        initialFrom = state.get('config.chart.time.from');
+        initialTo = state.get('config.chart.time.to');
+        from = gstc.api.time.date().startOf('month').valueOf();
+        to = gstc.api.time.date().endOf('month').valueOf();
+        const startDate = gstc.api.time.date('2020-02-01');
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = true;
+          time.from = startDate.startOf('month').valueOf();
+          time.to = startDate.endOf('month').valueOf();
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        expect(state.get('config.chart.time.from')).to.eq(initialFrom);
+        expect(state.get('$data.chart.time.fromDate').valueOf()).to.eq(initialFrom);
+        expect(state.get('config.chart.time.to')).to.be.lessThan(initialTo);
+        expect(state.get('$data.chart.time.toDate').valueOf()).to.be.lessThan(initialTo);
+        expect(state.get('config.chart.time.calculatedZoomMode')).to.eq(true);
+      })
+      .get('.gstc__scroll-bar--horizontal')
+      .should('not.exist')
+      .log(`updating from to`)
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.from = initialFrom;
+          time.to = initialTo;
+          time.calculatedZoomMode = false;
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        expect(state.get('config.chart.time.from')).to.eq(initialFrom);
+        expect(state.get('$data.chart.time.fromDate').valueOf()).to.eq(initialFrom);
+        expect(state.get('config.chart.time.to')).to.be.eq(initialTo);
+        expect(state.get('$data.chart.time.toDate').valueOf()).to.eq(initialTo);
+        expect(state.get('config.chart.time.calculatedZoomMode')).to.eq(false);
+      })
+      .get('.gstc__scroll-bar--horizontal')
+      .should('exist')
+      .get('.gstc__chart-timeline-items-row-item')
+      .should('exist')
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.from = from;
+          time.to = to;
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__chart-timeline-items-row-item')
+      .should('not.exist')
+      .then(() => {
+        expect(state.get('config.chart.time.from')).to.eq(from);
+        expect(state.get('$data.chart.time.fromDate').valueOf()).to.eq(from);
+        expect(state.get('config.chart.time.to')).to.be.eq(to);
+        expect(state.get('$data.chart.time.toDate').valueOf()).to.eq(to);
+        expect(state.get('config.chart.time.calculatedZoomMode')).to.eq(false);
+      });
+  });
+
+  it('should move items one cell at time after calculatedZoomMode change', () => {
+    const itemId = 'gstcid-15';
+    const itemClass = `.gstc__chart-timeline-items-row-item[data-gstcid="${itemId}"]`;
+    let state: DeepState, gstc: GSTCResult;
+    cy.load('/examples/complex-1')
+      .scrollH(10)
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        const startDate = gstc.api.time.date('2020-02-01');
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = true;
+          time.from = startDate.startOf('month').valueOf();
+          time.to = startDate.endOf('month').valueOf();
+          return time;
+        });
+        state.update(`config.chart.items.${itemId}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-05').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-07').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .move(itemClass, 40, 0)
+      .then(() => {
+        const itemData: ItemData = state.get(`$data.chart.items.${itemId}`);
+        const item: Item = state.get(`config.chart.items.${itemId}`);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-06 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-08 23:59:59');
+        expect(item.time.start).to.eq(itemData.time.startDate.valueOf());
+        expect(item.time.end).to.eq(itemData.time.endDate.valueOf());
+      });
+  });
+
+  it('should resize items one cell at time after calculatedZoomMode change', () => {
+    const itemId = 'gstcid-15';
+    const itemClass = `.gstc__chart-timeline-items-row-item[data-gstcid="${itemId}"]`;
+    const itemLeftResizingHandleClass = `.gstc__chart-timeline-items-row-item-resizing-handle--left[data-gstcid="${itemId}"]`;
+    const itemRightResizingHandleClass = `.gstc__chart-timeline-items-row-item-resizing-handle--right[data-gstcid="${itemId}"]`;
+    let state: DeepState, gstc: GSTCResult;
+    cy.load('/examples/complex-1')
+      .scrollH(10)
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        const startDate = gstc.api.time.date('2020-02-01');
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = true;
+          time.from = startDate.startOf('month').valueOf();
+          time.to = startDate.endOf('month').valueOf();
+          return time;
+        });
+        state.update(`config.chart.items.${itemId}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-05').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-07').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .get(itemClass)
+      .click()
+      .wait(Cypress.env('wait'))
+      .move(itemRightResizingHandleClass, 40, 0)
+      .then(() => {
+        const itemData: ItemData = state.get(`$data.chart.items.${itemId}`);
+        const item: Item = state.get(`config.chart.items.${itemId}`);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-05 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-08 23:59:59');
+        expect(item.time.start).to.eq(itemData.time.startDate.valueOf());
+        expect(item.time.end).to.eq(itemData.time.endDate.valueOf());
+      })
+      .move(itemLeftResizingHandleClass, -40, 0)
+      .then(() => {
+        const itemData: ItemData = state.get(`$data.chart.items.${itemId}`);
+        const item: Item = state.get(`config.chart.items.${itemId}`);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-04 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-08 23:59:59');
+        expect(item.time.start).to.eq(itemData.time.startDate.valueOf());
+        expect(item.time.end).to.eq(itemData.time.endDate.valueOf());
+      });
+  });
+});