gantt-source_management 3.37.5

package/cypress/e2e/locale.test.ts

@@ -0,0 +1,102 @@
+function plural(n) {
+  return n % 10 < 5 && n % 10 > 1 && ~~(n / 10) % 10 !== 1; // eslint-disable-line
+}
+/* eslint-disable */
+function translate(number, withoutSuffix, key) {
+  const result = `${number} `;
+  switch (key) {
+    case 'm':
+      return withoutSuffix ? 'minuta' : 'minutę';
+    case 'mm':
+      return result + (plural(number) ? 'minuty' : 'minut');
+    case 'h':
+      return withoutSuffix ? 'godzina' : 'godzinę';
+    case 'hh':
+      return result + (plural(number) ? 'godziny' : 'godzin');
+    case 'MM':
+      return result + (plural(number) ? 'miesiące' : 'miesięcy');
+    case 'yy':
+      return result + (plural(number) ? 'lata' : 'lat');
+  }
+}
+/* eslint-enable */
+
+const monthFormat =
+  'stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia'.split('_');
+const monthStandalone =
+  'styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień'.split('_');
+const MONTHS_IN_FORMAT = /D MMMM/;
+
+const months = (dayjsInstance, format) => {
+  if (MONTHS_IN_FORMAT.test(format)) {
+    return monthFormat[dayjsInstance.month()];
+  }
+  return monthStandalone[dayjsInstance.month()];
+};
+months.s = monthStandalone;
+months.f = monthFormat;
+
+const locale = {
+  name: 'pl',
+  weekdays: 'niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota'.split('_'),
+  weekdaysShort: 'ndz_pon_wt_śr_czw_pt_sob'.split('_'),
+  weekdaysMin: 'Nd_Pn_Wt_Śr_Cz_Pt_So'.split('_'),
+  months,
+  monthsShort: 'sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru'.split('_'),
+  ordinal: (n) => `${n}.`,
+  weekStart: 1,
+  yearStart: 4,
+  relativeTime: {
+    future: 'za %s',
+    past: '%s temu',
+    s: 'kilka sekund',
+    m: translate,
+    mm: translate,
+    h: translate,
+    hh: translate,
+    d: '1 dzień',
+    dd: '%d dni',
+    M: 'miesiąc',
+    MM: translate,
+    y: 'rok',
+    yy: translate,
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD.MM.YYYY',
+    LL: 'D MMMM YYYY',
+    LLL: 'D MMMM YYYY HH:mm',
+    LLLL: 'dddd, D MMMM YYYY HH:mm',
+  },
+};
+
+describe('Locale', () => {
+  it('should update and display locale configuration', () => {
+    let state;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        expect(state.get('config.locale.weekdays.6')).to.eq('Saturday');
+      })
+      .get('.gstc__chart-calendar-date[data-gstcid="gstcid-1580511600000"] .gstc-date-small')
+      .should('be.visible')
+      .then(($el) => {
+        expect($el.text()).to.eq('Saturday');
+        state.update('config.locale', locale);
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        expect(state.get('config.locale.weekdays.6')).to.eq('sobota');
+      })
+      .get('.gstc__chart-calendar-date[data-gstcid="gstcid-1580511600000"] .gstc-date-small')
+      .should('be.visible')
+      .wait(Cypress.env('wait'))
+      .then(($el) => {
+        // @ts-ignore
+        expect($el.text()).to.eq('sobota');
+      });
+  });
+});

package/cypress/e2e/move-items-outside.test.ts

@@ -0,0 +1,437 @@
+import { DataChartTime, DataScrollHorizontal, ItemData } from '../../dist/gstc';
+import { fixed } from '../helpers';
+
+describe('Move items outside view', () => {
+  it('should calculate right scroll and item position', () => {
+    let state, gstc;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .scrollH(1000)
+      .get('#expand-time')
+      .click()
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        state.update('config.scroll.horizontal.multiplier', 3);
+        state.update('config.chart.items.gstcid-2.time', (itemTime) => {
+          itemTime.start = gstc.api.time.date('2020-03-25').valueOf();
+          itemTime.end = gstc.api.time.date('2020-03-30').endOf('day').valueOf();
+          return itemTime;
+        });
+      })
+      .get('.gstc__list-column-row-expander-toggle[data-gstcid="gstcid-1"]')
+      .click()
+      .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-2"]')
+      .should('be.visible')
+      .then(() => {
+        const time: DataChartTime = state.get('$data.chart.time');
+        expect(time.toDate.format('YYYY-MM-DD')).to.eq('2020-03-31');
+      })
+      .move('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-2"]', 160, 0)
+      .move('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-2"]', 100, 0)
+      .then(() => {
+        const horizontalScroll: DataScrollHorizontal = state.get('$data.scroll.horizontal');
+        const time: DataChartTime = state.get('$data.chart.time');
+        expect(time.toDate.format('YYYY-MM-DD')).to.eq('2020-04-02');
+        expect(horizontalScroll.data.leftGlobalDate.format('YYYY-MM-DD')).to.eq('2020-03-18');
+        const itemsData = state.get('$data.chart.items');
+        expect(itemsData['gstcid-2'].time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-04-02 23:59:59');
+      });
+  });
+
+  it('should calculate right item position in normal mode', () => {
+    const itemClass = '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-15"]';
+    let state, gstc, secondaryItem, secondaryItemData;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .then(() => {
+        gstc.api.scrollToTime(gstc.api.time.date('2020-02-14'), false);
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        state.update('config.scroll.horizontal.multiplier', 3);
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-02-20').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-24').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-20 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-24 23:59:59');
+        expect(fixed(itemData.width)).to.eq(fixed(itemData.actualWidth));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.eq(fixed(itemData.position.actualRight));
+        secondaryItemData = gstc.api.mergeDeep({}, itemData);
+        secondaryItem = gstc.api.mergeDeep({}, state.get('config.chart.items.gstcid-15'));
+      })
+      .get(itemClass)
+      .should('be.visible')
+      .move(itemClass, 250, 0)
+      .get(itemClass)
+      .should('be.visible')
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-23 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-27 23:59:59');
+
+        expect(fixed(itemData.position.left)).to.be.greaterThan(fixed(secondaryItemData.position.left));
+        expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(secondaryItemData.position.right));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(itemData.position.actualRight));
+        expect(fixed(itemData.width)).to.eq(fixed(secondaryItemData.width));
+        expect(fixed(itemData.actualWidth)).to.be.lessThan(fixed(itemData.width));
+
+        const item = state.get('config.chart.items.gstcid-15');
+        expect(item.time.start).to.be.greaterThan(secondaryItem.time.start);
+        expect(item.time.end).to.be.greaterThan(secondaryItem.time.end);
+      });
+  });
+
+  // it('should calculate right item position in normal mode with hidden dates', () => {
+  //   const itemClass = '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-15"]';
+  //   let state, gstc, secondaryItem, secondaryItemData;
+  //   cy.load('/examples/complex-1')
+  //     .window()
+  //     .then((win) => {
+  //       // @ts-ignore
+  //       state = win.state;
+  //       // @ts-ignore
+  //       gstc = win.gstc;
+  //     })
+  //     .then(() => {
+  //       gstc.api.scrollToTime(gstc.api.time.date('2020-02-14'), false);
+  //     })
+  //     .wait(Cypress.env('wait'))
+  //     .get('#hide-weekends')
+  //     .click()
+  //     .wait(Cypress.env('wait'))
+  //     .then(() => {
+  //       state.update('config.chart.items.gstcid-15', (item) => {
+  //         item.time.start = gstc.api.time.date('2020-02-20').valueOf();
+  //         item.time.end = gstc.api.time.date('2020-02-26').endOf('day').valueOf();
+  //         return item;
+  //       });
+  //     })
+  //     .wait(Cypress.env('wait'))
+  //     .then(() => {
+  //       const itemData = state.get('$data.chart.items.gstcid-15');
+  //       expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-20 00:00:00');
+  //       expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-26 23:59:59');
+  //       expect(fixed(itemData.width)).to.eq(fixed(itemData.actualWidth));
+  //       expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+  //       expect(fixed(itemData.position.right)).to.eq(fixed(itemData.position.actualRight));
+  //       secondaryItemData = gstc.api.mergeDeep({}, itemData);
+  //       secondaryItem = gstc.api.mergeDeep({}, state.get('config.chart.items.gstcid-15'));
+  //     })
+  //     .get(itemClass)
+  //     .should('be.visible')
+  //     .move(itemClass, 400, 0)
+  //     .get(itemClass)
+  //     .should('be.visible')
+  //     .then(() => {
+  //       const itemData = state.get('$data.chart.items.gstcid-15');
+  //       expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-27 00:00:00');
+  //       expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-03-04 23:59:59');
+  //       expect(fixed(itemData.position.left)).to.be.greaterThan(fixed(secondaryItemData.position.left));
+  //       expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(secondaryItemData.position.right));
+  //       expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+  //       expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(itemData.position.actualRight));
+  //       expect(fixed(itemData.width)).to.eq(fixed(secondaryItemData.width));
+  //       expect(fixed(itemData.actualWidth)).to.be.lessThan(fixed(itemData.width));
+
+  //       const item = state.get('config.chart.items.gstcid-15');
+  //       expect(item.time.start).to.be.greaterThan(secondaryItem.time.start);
+  //       expect(item.time.end).to.be.greaterThan(secondaryItem.time.end);
+  //     });
+  // });
+
+  it('should calculate right item position in normal mode with hidden dates when moving out of time (left)', () => {
+    const itemClass = '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-15"]';
+    let state, gstc, secondaryItem, secondaryItemData;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .get('#hide-weekends')
+      .click()
+      .get('#expand-time')
+      .click()
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        state.update('config.scroll.horizontal.multiplier', 3);
+        state.update('config.plugin.ItemMovement.autoScroll.edgeThreshold.horizontal', 0);
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-02-04').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-10').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        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-10 23:59:59');
+        expect(fixed(itemData.width)).to.eq(fixed(itemData.actualWidth));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.eq(fixed(itemData.position.actualRight));
+        secondaryItemData = gstc.api.mergeDeep({}, itemData);
+        secondaryItem = gstc.api.mergeDeep({}, state.get('config.chart.items.gstcid-15'));
+      })
+      .get(itemClass)
+      .should('be.visible')
+      .move(itemClass, -100, 0)
+      .move(itemClass, -83, 0)
+      .move(itemClass, -83, 0)
+      .move(itemClass, -83, 0)
+      .get(itemClass)
+      .should('be.visible')
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-29 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-04 23:59:59');
+        expect(fixed(itemData.position.left)).to.be.lessThan(fixed(secondaryItemData.position.left));
+        expect(fixed(itemData.position.right)).to.be.lessThan(fixed(secondaryItemData.position.right));
+        expect(fixed(itemData.position.left)).not.to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.be.eq(fixed(itemData.position.actualRight));
+        expect(fixed(itemData.width)).to.eq(fixed(secondaryItemData.width));
+        expect(fixed(itemData.actualWidth)).to.be.lessThan(fixed(itemData.width));
+
+        const item = state.get('config.chart.items.gstcid-15');
+        expect(item.time.start).to.be.below(secondaryItem.time.start);
+        expect(item.time.end).to.be.below(secondaryItem.time.end);
+      });
+  });
+
+  it('should calculate right item position in normal mode with hidden dates when moving out of time (right)', () => {
+    const itemClass = '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-15"]';
+    let state, gstc, secondaryItem, secondaryItemData;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .then(() => {
+        gstc.api.scrollToTime(gstc.api.time.date('2020-03-13'), false);
+      })
+      .wait(Cypress.env('wait'))
+      .get('#expand-time')
+      .click()
+      .get('#hide-weekends')
+      .click()
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        state.update('config.scroll.horizontal.multiplier', 3);
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-03-20').valueOf();
+          item.time.end = gstc.api.time.date('2020-03-26').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-03-20 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-03-26 23:59:59');
+        expect(fixed(itemData.width)).to.eq(fixed(itemData.actualWidth));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.eq(fixed(itemData.position.actualRight));
+        secondaryItemData = gstc.api.mergeDeep({}, itemData);
+        secondaryItem = gstc.api.mergeDeep({}, state.get('config.chart.items.gstcid-15'));
+      })
+      .get(itemClass)
+      .should('be.visible')
+      .move(itemClass, 400, 0)
+      .move(itemClass, 50, 0)
+      .move(itemClass, 50, 0)
+      .move(itemClass, 80, 0)
+      .scrollH(100)
+      .get(itemClass)
+      .should('be.visible')
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-03-31 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-04-06 23:59:59');
+        expect(fixed(itemData.position.left)).to.be.greaterThan(fixed(secondaryItemData.position.left));
+        expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(secondaryItemData.position.right));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.be.eq(fixed(itemData.position.actualRight));
+        //expect(fixed(itemData.width)).to.eq(fixed(secondaryItemData.width)); // TODO: DST is changing the width
+
+        const item = state.get('config.chart.items.gstcid-15');
+        expect(item.time.start).to.be.greaterThan(secondaryItem.time.start);
+        expect(item.time.end).to.be.greaterThan(secondaryItem.time.end);
+      });
+  });
+
+  it('should calculate right item position in calculatedZoomMode', () => {
+    const itemClass = '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-15"]';
+    let state, gstc, secondaryItem, secondaryItemData;
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .then(() => {
+        state.update('config.scroll.horizontal.multiplier', 3);
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-01-20').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-24').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 23:59:59');
+        expect(fixed(itemData.width)).to.eq(fixed(itemData.actualWidth));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.eq(fixed(itemData.position.actualRight));
+        secondaryItemData = gstc.api.mergeDeep({}, itemData);
+        secondaryItem = gstc.api.mergeDeep({}, state.get('config.chart.items.gstcid-15'));
+      })
+      .get(itemClass)
+      .should('be.visible')
+      .move(itemClass, 300, 0)
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-29 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-02 23:59:59');
+
+        expect(fixed(itemData.position.left)).to.be.greaterThan(fixed(secondaryItemData.position.left));
+        expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(secondaryItemData.position.right));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(itemData.position.actualRight)); // probably cypress bug because in the console everything is fine
+        expect(fixed(itemData.width)).to.eq(fixed(secondaryItemData.width));
+        expect(fixed(itemData.actualWidth)).to.be.lessThan(fixed(itemData.width)); // probably cypress bug because in the console everything is fine
+
+        const item = state.get('config.chart.items.gstcid-15');
+        expect(item.time.start).to.be.greaterThan(secondaryItem.time.start);
+        expect(item.time.end).to.be.greaterThan(secondaryItem.time.end);
+      });
+  });
+
+  it('should calculate right item position in calculatedZoomMode with hidden weekends', () => {
+    const itemClass = '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-15"]';
+    let state, gstc;
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .get('#hide-weekends')
+      .click()
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        state.update('config.scroll.horizontal.multiplier', 3);
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-01-24').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-31').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-31 23:59:59');
+        expect(fixed(itemData.width)).to.eq(fixed(itemData.actualWidth));
+        expect(fixed(itemData.position.left)).to.eq(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.eq(fixed(itemData.position.actualRight));
+      })
+      .move(itemClass, 50, 0)
+      .move(itemClass, 50, 0)
+      .then(() => {
+        const itemData: ItemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-30 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-06 23:59:59');
+        const time: DataChartTime = state.get('$data.chart.time');
+        const cellWidth = time.allDates[time.level][0].width;
+        expect(fixed(itemData.width)).to.eq(fixed(6 * cellWidth));
+        expect(fixed(itemData.actualWidth)).to.eq(fixed(2 * cellWidth));
+      })
+      .get(itemClass)
+      .should('be.visible')
+      .get('#btn-next-month')
+      .click()
+      .wait(300)
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-30 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-06 23:59:59');
+        const time: DataChartTime = state.get('$data.chart.time');
+        const cellWidth = time.allDates[time.level][0].width;
+        expect(fixed(itemData.width)).to.eq(fixed(6 * cellWidth));
+        expect(fixed(itemData.actualWidth)).to.eq(fixed(4 * cellWidth));
+      });
+  });
+
+  it('should show arrow on hidden dates when scroll is moved to the end of the view', () => {
+    const itemClass = '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-15"]';
+    let state, gstc;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .get('#hide-weekends')
+      .click()
+      .wait(Cypress.env('wait'))
+      .get('#expand-time')
+      .click()
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        state.update('config.scroll.horizontal.multiplier', 3);
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-03-10').valueOf();
+          item.time.end = gstc.api.time.date('2020-04-01').endOf('day').valueOf();
+          return item;
+        });
+        gstc.api.scrollToTime(gstc.api.time.date('2020-03-16'), false);
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const itemData = state.get('$data.chart.items.gstcid-15');
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-03-10 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-04-01 23:59:59');
+        expect(fixed(itemData.width)).to.be.greaterThan(fixed(itemData.actualWidth));
+        expect(fixed(itemData.position.left)).to.be.lessThan(fixed(itemData.position.actualLeft));
+        expect(fixed(itemData.position.right)).to.be.greaterThan(fixed(itemData.position.actualRight));
+      })
+      .get(`${itemClass} .gstc__chart-timeline-items-row-item--left-cut-icon`)
+      .should('be.visible')
+      .get(`${itemClass} .gstc__chart-timeline-items-row-item--right-cut-icon`)
+      .should('be.visible');
+  });
+});

package/cypress/e2e/rows.test.ts

@@ -0,0 +1,50 @@
+describe('Rows', () => {
+  it('should hide items from collapsed rows', () => {
+    let state, gstc;
+    const toggleClass = '.gstc__list-column-row-expander-toggle[data-gstcid="gstcid-1"]';
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        function getRandomFaceImage() {
+          return `./faces/face-${Math.ceil(Math.random() * 50)}.jpg`;
+        }
+        const iterations = 100;
+        const GSTCID = gstc.api.GSTCID;
+        const rows = {};
+        for (let i = 0; i < iterations; i++) {
+          const id = GSTCID(String(i));
+          rows[id] = {
+            id,
+            label: `John Doe ${i}`,
+            parentId: i === 1 ? undefined : GSTCID(String(1)), //withParent ? GSTCID(String(i - 1)) : undefined,
+            expanded: false,
+            img: getRandomFaceImage(),
+            progress: Math.floor(Math.random() * 100),
+          };
+        }
+        state.update('config.list.rows', rows);
+      })
+      .wait(Cypress.env('wait'))
+      .get(toggleClass)
+      .click()
+      .wait(Cypress.env('wait'))
+      .click()
+      .wait(Cypress.env('wait'))
+      .move('.gstc__list-column-header-resizer-dots--gstcid-progress', 20, 0)
+      .wait(Cypress.env('wait'))
+      .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-2"]')
+      .should('not.exist')
+      .get('#btn-next-month')
+      .click()
+      .wait(300)
+      .get('#btn-prev-month')
+      .click()
+      .wait(300)
+      .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-2"]')
+      .should('not.exist');
+  });
+});