gantt-source_management 3.37.5

package/cypress/e2e/scroll-bar.test.ts

@@ -0,0 +1,357 @@
+import DeepState from 'deep-state-observer';
+import { Data, DataChartDimensions, DataChartTime, DataScrollHorizontal } from '../../dist/gstc';
+import { round } from '../helpers';
+
+describe('Scroll bar', () => {
+  it('Movement (not precise)', () => {
+    const horizontalScrollBarSelector = '.gstc__scroll-bar-inner--horizontal';
+    const verticalScrollBarSelector = '.gstc__scroll-bar-inner--vertical';
+    let state: DeepState;
+    let merge;
+
+    cy.load('/examples/simple/simple.esm.html')
+      .get(horizontalScrollBarSelector)
+      .should(($el) => {
+        expect($el.css('left')).to.eq('0px');
+      })
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        merge = win.gstc.api.mergeDeep;
+        const dimensions: DataChartDimensions = state.get('$data.chart.dimensions');
+        cy.log('$data.scroll.horizontal', state.get('$data.scroll.horizontal'));
+        cy.log('$data.chart.dimensions', dimensions);
+        cy.log('widthWithoutScrollBar', dimensions.widthWithoutScrollBar);
+      })
+      .then(() => {
+        const $data: Data = { ...state.get('$data') };
+        expect($data.scroll.horizontal.absolutePosPx).to.eq(0);
+        expect($data.scroll.horizontal.maxHandlePosPx).to.be.greaterThan(0);
+        expect($data.scroll.vertical.handlePosPx).to.eq(0);
+        expect(isNaN($data.scroll.vertical.handlePosPx)).to.eq(false);
+      })
+      .get('.gstc__list-column-row[data-gstcid="gstcid-1"]')
+      .scrollH(800)
+      .then(() => {
+        const scroll = state.get('$data.scroll');
+        cy.log('horizontal', scroll.horizontal);
+        expect(scroll.horizontal.absolutePosPx).to.be.greaterThan(0);
+        expect(scroll.horizontal.maxHandlePosPx).to.be.greaterThan(0);
+      })
+      .get(verticalScrollBarSelector)
+      .should(($el) => {
+        expect($el.css('top')).to.eq('0px');
+      })
+      .then(() => {
+        const scroll = state.get('$data.scroll');
+        cy.log('vertical', scroll.vertical);
+        expect(scroll.vertical.absolutePosPx).to.eq(0);
+        expect(scroll.vertical.maxHandlePosPx).to.be.greaterThan(0);
+        expect(isNaN(scroll.vertical.handlePosPx)).to.eq(false);
+      })
+      .scrollV(400)
+      .then(() => {
+        const scroll = state.get('$data.scroll');
+        cy.log('vertical', scroll.vertical);
+        expect(scroll.vertical.absolutePosPx).to.be.greaterThan(0);
+        expect(scroll.vertical.maxHandlePosPx).to.be.greaterThan(0);
+        expect(isNaN(scroll.vertical.handlePosPx)).to.eq(false);
+      })
+      .get('.gstc__list-column-row[data-gstcid="gstcid-12"]')
+      .then(() => {
+        cy.log('state', merge({}, state.get()));
+      })
+      .then(() => {
+        const $vertical = Cypress.$(verticalScrollBarSelector);
+        const $horizontal = Cypress.$(horizontalScrollBarSelector);
+        const v = merge({}, state.get('$data.scroll.vertical'));
+        const h = merge({}, state.get('$data.scroll.horizontal'));
+        cy.log('vertical', v);
+        cy.log('horizontal', h);
+        expect(round(v.handlePosPx)).to.eq(round($vertical.css('top')));
+        expect(round(h.handlePosPx)).to.eq(round($horizontal.css('left')));
+        expect(round(v.innerHandleSize)).to.eq(round($vertical.height()));
+        expect(round(h.innerHandleSize)).to.eq(round($horizontal.width()));
+        expect(round(state.get('$data.chart.dimensions.widthWithoutScrollBar'))).to.eq(round(h.scrollSize));
+        expect(round(state.get('$data.chart.dimensions.heightWithoutScrollBar'))).to.eq(round(v.scrollSize));
+      });
+  });
+
+  it('Movement (precise)', () => {
+    const horizontalScrollBarSelector = '.gstc__scroll-bar-inner--horizontal';
+    const verticalScrollBarSelector = '.gstc__scroll-bar-inner--vertical';
+    let state: DeepState;
+    let merge;
+
+    cy.load('/examples/simple/simple.esm.html')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        merge = win.gstc.api.mergeDeep;
+        state.update('config.scroll.horizontal.precise', true);
+        state.update('config.scroll.vertical.precise', true);
+      })
+      .get(horizontalScrollBarSelector)
+      .should(($el) => {
+        expect($el.css('left')).to.eq('0px');
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const scroll = state.get('$data.scroll');
+        cy.log('horizontal', scroll.horizontal);
+        expect(scroll.horizontal.absolutePosPx).to.eq(0);
+        expect(scroll.horizontal.maxHandlePosPx).to.be.greaterThan(0);
+      })
+      .get('.gstc__list-column-row[data-gstcid="gstcid-1"]')
+      .should('be.visible')
+      .scrollH(800)
+      .then(() => {
+        const scroll = state.get('$data.scroll');
+        cy.log('horizontal', scroll.horizontal);
+        expect(scroll.horizontal.absolutePosPx).to.be.greaterThan(0);
+        expect(scroll.horizontal.maxHandlePosPx).to.be.greaterThan(0);
+      })
+      .get(verticalScrollBarSelector)
+      .should(($el) => {
+        expect($el.css('top')).to.eq('0px');
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const scroll = state.get('$data.scroll');
+        cy.log('vertical', scroll.vertical);
+        expect(scroll.vertical.absolutePosPx).to.eq(0);
+        expect(scroll.vertical.maxHandlePosPx).to.be.greaterThan(0);
+        expect(isNaN(scroll.vertical.handlePosPx)).to.eq(false);
+      })
+      .scrollV(400)
+      .then(() => {
+        const scroll = state.get('$data.scroll');
+        cy.log('vertical', scroll.vertical);
+        expect(scroll.vertical.absolutePosPx).to.be.greaterThan(0);
+        expect(scroll.vertical.maxHandlePosPx).to.be.greaterThan(0);
+        expect(isNaN(scroll.vertical.handlePosPx)).to.eq(false);
+      })
+      .get('.gstc__list-column-row[data-gstcid="gstcid-12"]')
+      .then(() => {
+        cy.log('state', merge({}, state.get()));
+      })
+      .then(() => {
+        const $vertical = Cypress.$(verticalScrollBarSelector);
+        const $horizontal = Cypress.$(horizontalScrollBarSelector);
+        const scroll = state.get('$data.scroll');
+        const v = scroll.vertical;
+        const h = scroll.horizontal;
+        cy.log('vertical', v);
+        cy.log('horizontal', h);
+        expect(round(v.handlePosPx)).to.eq(round($vertical.css('top')));
+        expect(round(h.handlePosPx)).to.eq(round($horizontal.css('left')));
+        expect(round(v.innerHandleSize)).to.eq(round($vertical.height()));
+        expect(round(h.innerHandleSize)).to.eq(round($horizontal.width()));
+        expect(round(state.get('$data.chart.dimensions.widthWithoutScrollBar'))).to.eq(round(h.scrollSize));
+        expect(round(state.get('$data.chart.dimensions.heightWithoutScrollBar'))).to.eq(round(v.scrollSize));
+      })
+      //
+      // preciseOffset
+      //
+      .scrollH(-20)
+      .then(() => {
+        const $scroll = Cypress.$(horizontalScrollBarSelector);
+        const scrollData = state.get('$data.scroll.horizontal');
+        expect(round(scrollData.handlePosPx)).to.eq(round($scroll.css('left')));
+        expect(round(scrollData.innerHandleSize)).to.eq(round($scroll.width()));
+        expect(round(state.get('$data.chart.dimensions.widthWithoutScrollBar'))).to.eq(round(scrollData.scrollSize));
+        expect(scrollData.preciseOffset).to.be.lessThan(0);
+      })
+      .scrollV(-20)
+      .then(() => {
+        const $scroll = Cypress.$(verticalScrollBarSelector);
+        const scrollData = state.get('$data.scroll.vertical');
+        expect(round(scrollData.handlePosPx)).to.eq(round($scroll.css('top')));
+        expect(round(scrollData.innerHandleSize)).to.eq(round($scroll.height()));
+        expect(round(state.get('$data.chart.dimensions.heightWithoutScrollBar'))).to.eq(round(scrollData.scrollSize));
+        expect(scrollData.preciseOffset).to.be.lessThan(0);
+      });
+  });
+
+  it('should scroll with api', () => {
+    let gstc, scrollTo;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        gstc = win.gstc;
+        scrollTo = gstc.api.time.date('2020-02-20');
+        gstc.api.scrollToTime(scrollTo.valueOf());
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-5"]')
+      .should('be.visible')
+      .then(($el) => {
+        const date = gstc.api.time.findDateAtTime(scrollTo.valueOf());
+        expect(round($el.position().left)).to.eq(round(date.currentView.leftPx));
+      })
+      .then(() => {
+        gstc.api.scrollToTime(scrollTo.valueOf(), false);
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-5"]')
+      .should('be.visible')
+      .then(($el) => {
+        const date = gstc.api.time.findDateAtTime(scrollTo.valueOf());
+        expect(round($el.position().left)).to.eq(round(date.currentView.leftPx));
+      });
+  });
+
+  it('should update scroll bar position and size when changing zoom', () => {
+    let gstc, state, innerSize, handlePosPx;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        const horizontal = state.get('$data.scroll.horizontal') as DataScrollHorizontal;
+        innerSize = horizontal.innerHandleSize;
+        expect(innerSize).to.be.greaterThan(0);
+        gstc.api.scrollToTime(gstc.api.time.date('2020-02-20'), false);
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        handlePosPx = state.get('$data.scroll.horizontal.handlePosPx');
+        state.update('config.chart.time.zoom', 18);
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__scroll-bar-inner--horizontal')
+      .then(($scrollBarInner) => {
+        const horizontal = state.get('$data.scroll.horizontal') as DataScrollHorizontal;
+        const actualSize = horizontal.innerHandleSize;
+        expect(round(actualSize)).not.to.eq(round(innerSize));
+        expect(round(horizontal.handlePosPx)).not.to.eq(round(handlePosPx));
+        expect($scrollBarInner.get(0).offsetLeft).to.eq(Math.round(horizontal.handlePosPx));
+      });
+  });
+
+  it('should hide scroll bar when calculatedZooMode is enabled', () => {
+    let gstc, state;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        gstc = win.gstc;
+        // @ts-ignore
+        state = win.state;
+      })
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = true;
+          time.from = gstc.api.time.date('2020-01-01').valueOf();
+          time.to = gstc.api.time.date('2020-01-31').valueOf();
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__scroll-bar--horizontal')
+      .should('not.exist');
+  });
+
+  it('should hide scroll bar when calculatedZooMode is enabled and switching back and forth', () => {
+    let gstc, state;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        gstc = win.gstc;
+        // @ts-ignore
+        state = win.state;
+      })
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = true;
+          time.from = gstc.api.time.date('2020-01-01').valueOf();
+          time.to = gstc.api.time.date('2020-01-31').valueOf();
+          time.zoom = 20;
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__scroll-bar--horizontal')
+      .should('not.exist')
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = false;
+          time.from = gstc.api.time.date('2020-01-01').valueOf();
+          time.to = gstc.api.time.date('2020-01-31').valueOf();
+          time.zoom = 20;
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__scroll-bar--horizontal')
+      .should('exist')
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = false;
+          time.from = gstc.api.time.date('2020-01-01').valueOf();
+          time.to = gstc.api.time.date('2020-03-31').valueOf();
+          time.zoom = 20;
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__scroll-bar--horizontal')
+      .should('exist')
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.calculatedZoomMode = true;
+          time.from = gstc.api.time.date('2020-01-01').valueOf();
+          time.to = gstc.api.time.date('2020-01-31').valueOf();
+          time.zoom = 20;
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .get('.gstc__scroll-bar--horizontal')
+      .should('not.exist');
+  });
+
+  it('should update right global date when scroll to time centered happened', () => {
+    let gstc, state;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        gstc = win.gstc;
+        // @ts-ignore
+        state = win.state;
+        gstc.api.scrollToTime(gstc.api.time.date('2020-02-05').valueOf());
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const dataTime: DataChartTime = state.get('$data.chart.time');
+        expect(round(dataTime.rightPx)).to.eq(round(dataTime.width));
+      });
+  });
+
+  it('should scroll to center', () => {
+    let gstc, state;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        gstc = win.gstc;
+        // @ts-ignore
+        state = win.state;
+        gstc.api.scrollToTime(gstc.api.time.date('2020-02-18 12:00:00').valueOf());
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const dataTime: DataChartTime = state.get('$data.chart.time');
+        expect(dataTime.centerGlobalDate.format('YYYY-MM-DD')).to.eq('2020-02-18');
+      });
+  });
+});

package/cypress/e2e/time-bookmarks.test.ts

@@ -0,0 +1,92 @@
+import { Time } from '../../dist/api/time';
+import { DataChartTime } from '../../dist/gstc';
+import { round } from '../helpers';
+
+describe('Time bookmarks', () => {
+  it('should display the bookmarks at the right positions', () => {
+    let gstc, state;
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        gstc = win.gstc;
+        // @ts-ignore
+        state = win.state;
+      })
+      .then(() => {
+        const chartTime: DataChartTime = state.get('$data.chart.time');
+        const thirdDateLeft = round(chartTime.levels[1][2].currentView.leftPx);
+        let thirdDateFromAll;
+        for (const currentDate of chartTime.allDates[1]) {
+          if (currentDate.leftGlobalDate.format('YYYY-MM-DD') === '2020-01-03') {
+            thirdDateFromAll = currentDate;
+            continue;
+          }
+        }
+        const fromAllDates = round(thirdDateFromAll.currentView.leftPx);
+        cy.log('thirdDateFromAll', fromAllDates);
+        cy.log('thirdDateLeft width', thirdDateLeft);
+        expect(fromAllDates).to.eq(thirdDateLeft);
+      })
+      .get('.gstc__chart-time-bookmark-label-content--1-st')
+      .then(($el) => {
+        const left = round($el.parent().css('left'));
+        const time: Time = gstc.api.time;
+        const chartTime: DataChartTime = state.get('$data.chart.time');
+        const thirdDateLeft = round(chartTime.levels[1][2].currentView.leftPx);
+        const added2Days = chartTime.leftGlobalDate.startOf('day').add(2, 'day').startOf('day');
+        expect(added2Days.format('YYYY-MM-DD')).to.eq('2020-01-03');
+        const shouldLeft = round(time.getViewOffsetPxFromDates(added2Days, false, chartTime));
+        expect(added2Days.format('YYYY-MM-DD')).to.eq('2020-01-03');
+        expect(thirdDateLeft).to.eq(shouldLeft);
+        expect(chartTime.leftGlobalDate.format('YYYY-MM-DD')).to.eq('2020-01-01');
+        expect(left).to.eq(shouldLeft);
+        expect($el.text().trim()).to.eq('1-st');
+      })
+      .get('.gstc__chart-time-bookmark-label-content--bookmark-1')
+      .then(($el) => {
+        const left = round($el.parent().css('left'));
+        const time: Time = gstc.api.time;
+        const chartTime: DataChartTime = state.get('$data.chart.time');
+        const added4Days = chartTime.leftGlobalDate.startOf('day').add(4, 'day').startOf('day');
+        expect(added4Days.format('YYYY-MM-DD')).to.eq('2020-01-05');
+        const shouldLeft = round(time.getViewOffsetPxFromDates(added4Days, false, chartTime));
+        expect(added4Days.format('YYYY-MM-DD')).to.eq('2020-01-05');
+        expect(chartTime.leftGlobalDate.format('YYYY-MM-DD')).to.eq('2020-01-01');
+        expect(left).to.eq(shouldLeft);
+        expect($el.text().trim()).to.eq('Bookmark 2020-01-05');
+      })
+      .get('.gstc__chart-time-bookmark-label-content--bookmark-1')
+      .should('be.visible')
+      .get('.gstc__chart-time-bookmark-label')
+      .then(($labels) => {
+        expect($labels.length).to.eq(8);
+      })
+      .get('#btn-next-month')
+      .click()
+      .wait(300) // because on site there is setTimeout 250 to show the results
+      .get('.gstc__chart-time-bookmark-label')
+      .then(($labels) => {
+        expect($labels.length).to.eq(2);
+      })
+      .get('.gstc__chart-time-bookmark-label-content--bookmark-8')
+      .then(($el) => {
+        const left = round($el.parent().css('left'));
+        const time: Time = gstc.api.time;
+        const chartTime: DataChartTime = state.get('$data.chart.time');
+        const added1Day = chartTime.leftGlobalDate.startOf('day').add(1, 'day').startOf('day');
+        expect(added1Day.format('YYYY-MM-DD')).to.eq('2020-02-02');
+        const shouldLeft = round(time.getViewOffsetPxFromDates(added1Day, false, chartTime));
+        expect(added1Day.format('YYYY-MM-DD')).to.eq('2020-02-02');
+        expect(chartTime.leftGlobalDate.format('YYYY-MM-DD')).to.eq('2020-02-01');
+        expect(left).to.eq(shouldLeft);
+        expect($el.text().trim()).to.eq('Bookmark 2020-02-02');
+      })
+      .get('.gstc__chart-time-bookmark-line-content--bookmark-8')
+      .should('be.visible')
+      .get('.gstc__chart-time-bookmark-label-content--1-st')
+      .should('not.exist')
+      .get('.gstc__chart-time-bookmark-label-content--bookmark-1')
+      .should('not.exist');
+  });
+});

package/cypress/e2e/utc-mode.test.ts

@@ -0,0 +1,51 @@
+import { DataChartTime } from '../../dist/gstc';
+const date = '2020-01-01';
+describe('UTC mode', () => {
+  it('should display dates according to utc mode', () => {
+    let GSTC, state;
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        GSTC = win.GSTC;
+        // @ts-ignore
+        state = win.state;
+      })
+      .then(() => {
+        const chartTime: DataChartTime = state.get('$data.chart.time');
+        expect(chartTime.fromDate.format('YYYY-MM-DD')).to.eq(
+          chartTime.levels[1][0].leftGlobalDate.format('YYYY-MM-DD')
+        );
+        expect(GSTC.api.date(date, true).valueOf()).not.to.eq(GSTC.api.date(date).valueOf());
+      })
+      // Invalid time
+      .then(() => {
+        state.update('config.utcMode', true);
+        state.update('config.chart.time', (time) => {
+          time.from = GSTC.api.date(date).startOf('month').valueOf();
+          time.to = GSTC.api.date(date).endOf('month').valueOf();
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const chartTime: DataChartTime = state.get('$data.chart.time');
+        expect(chartTime.fromDate.format('YYYY-MM-DD')).not.to.eq(date);
+      })
+      // Valid time
+      .then(() => {
+        state.update('config.chart.time', (time) => {
+          time.from = GSTC.api.date(date, true).startOf('month').valueOf();
+          time.to = GSTC.api.date(date, true).endOf('month').valueOf();
+          return time;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const chartTime: DataChartTime = state.get('$data.chart.time');
+        expect(chartTime.fromDate.format('YYYY-MM-DD')).to.eq(
+          chartTime.levels[1][0].leftGlobalDate.format('YYYY-MM-DD')
+        );
+      });
+  });
+});

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/helpers.ts

@@ -0,0 +1,12 @@
+export function fixed(nr: string | number) {
+  return parseFloat(parseFloat(nr.toString()).toFixed(2));
+}
+export function round(nr: string | number) {
+  return Math.round(parseFloat(nr.toString()));
+}
+export const examples = [
+  '/examples/complex-1',
+  '/examples/item-types-plugin',
+  '/examples/add-rows-items',
+  '/examples/item-slot-html-content',
+];

package/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+export default (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};