12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/examples/grab-scroll/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ... GENERATING DATA PLEASE WAIT ...
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
45 |
46 |
47 |
48 |
49 |
50 | ... GENERATING DATA PLEASE WAIT ...
... GENERATING DATA PLEASE WAIT ...
17 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/dist/plugins/progress-bar.esm.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Gantt-Schedule-Timeline-Calendar helpers
3 | *
4 | * @copyright NEURONET - Rafal Pospiech
5 | * @author Rafal Pospiech -
18 |
- Complex 1 19 |
- One month 20 |
- Item types plugin 21 |
- Big dataset 22 |
- Item slot html content 23 |
- Messing with templates 24 |
- Simple UMD 25 |
- Simple ESM 26 |
- One calendar row 27 |
- Add rows and items 28 |
- List columns toggle 29 |
- Grid cell content 30 |
- Hide weekends 31 |
- Rows content 32 |
- Items content 33 |
- Slots 34 |
- Tooltip 35 |
- Item image plugin 36 |
- Movement plugin 37 |
- Selection plugin 38 |
- GrabScroll plugin 39 |
- Item resizing plugin 40 |
- Working hours 41 |
- Custom calendar period and formats 42 |
- Custom calendar period and formats (advanced) 43 |
- Zoom up to minutes 44 |
- Zoom up to seconds 45 |
- Dependency lines 46 |
- Multiple components 47 |
30 |
34 |
`,d=t=>e`
38 |
`;return t=>e`
42 | ${t.label}
43 |
44 |
45 | ${c.filter(t=>t.visible).map(t=>m(t))}
46 |
47 | ${t}
48 |
49 | ${c.filter(t=>t.visible).map(t=>d(t))}
50 |
`}}function a(t={}){return function(e){const a=e.state.get(s);a&&(t=e.api.mergeDeep({},t,a));const l=new i(t,e);return e.api.pluginInitialized("TimeBookmarks"),l.destroy}}export{a as Plugin,s as pluginPath,e as slotPath};
--------------------------------------------------------------------------------
/examples/items-content/index.js:
--------------------------------------------------------------------------------
1 | import GSTC from '../../dist/gstc.wasm.esm.min.js';
2 |
3 | const rowsFromDB = [
4 | {
5 | id: '1',
6 | label: 'Row 1',
7 | },
8 | {
9 | id: '2',
10 | label: 'Row 2',
11 | },
12 | ];
13 |
14 | function onItemClick(item) {
15 | alert('Item ' + GSTC.api.sourceID(item.id) + ' clicked!');
16 | }
17 |
18 | function itemLabelContent({ item, vido }) {
19 | return vido.html`
20 | onItemClick(
21 | item
22 | )}>My HTML content here!
`;
23 | }
24 |
25 | const itemsFromDB = [
26 | {
27 | id: '1',
28 | label: itemLabelContent,
29 | rowId: '1',
30 | time: {
31 | start: GSTC.api.date('2020-01-01').startOf('day').valueOf(),
32 | end: GSTC.api.date('2020-01-06').endOf('day').valueOf(),
33 | },
34 | },
35 | {
36 | id: '2',
37 | label: 'Default simple text label here',
38 | rowId: '1',
39 | time: {
40 | start: GSTC.api.date('2020-02-01').startOf('day').valueOf(),
41 | end: GSTC.api.date('2020-02-15').endOf('day').valueOf(),
42 | },
43 | },
44 | {
45 | id: '3',
46 | label: itemLabelContent,
47 | rowId: '2',
48 | time: {
49 | start: GSTC.api.date('2020-01-15').startOf('day').valueOf(),
50 | end: GSTC.api.date('2020-01-20').endOf('day').valueOf(),
51 | },
52 | },
53 | ];
54 |
55 | const columnsFromDB = [
56 | {
57 | id: 'id',
58 | label: 'ID',
59 | data: ({ row }) => Number(GSTC.api.sourceID(row.id)), // show original id
60 | sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
61 | width: 80,
62 | header: {
63 | content: 'ID',
64 | },
65 | },
66 | {
67 | id: 'label',
68 | data: 'label',
69 | sortable: 'label',
70 | isHTML: false,
71 | width: 300,
72 | header: {
73 | content: 'Label',
74 | },
75 | },
76 | ];
77 |
78 | // Typescript usage:
79 | // import { Config } from 'gantt-schedule-timeline-calendar';
80 | // const config: Config = {...};
81 | /**
82 | * @type {import('../../dist/gstc').Config} // or {import('gantt-schedule-timeline-calendar').Config}
83 | */
84 | const config = {
85 | // for trial key for your domain please visit https://gstc.neuronet.io/free-key
86 | // if you need commercial license please visit https://gantt-schedule-timeline-calendar.neuronet.io/pricing
87 |
88 | licenseKey:
89 | '====BEGIN LICENSE KEY====\nXOfH/lnVASM6et4Co473t9jPIvhmQ/l0X3Ewog30VudX6GVkOB0n3oDx42NtADJ8HjYrhfXKSNu5EMRb5KzCLvMt/pu7xugjbvpyI1glE7Ha6E5VZwRpb4AC8T1KBF67FKAgaI7YFeOtPFROSCKrW5la38jbE5fo+q2N6wAfEti8la2ie6/7U2V+SdJPqkm/mLY/JBHdvDHoUduwe4zgqBUYLTNUgX6aKdlhpZPuHfj2SMeB/tcTJfH48rN1mgGkNkAT9ovROwI7ReLrdlHrHmJ1UwZZnAfxAC3ftIjgTEHsd/f+JrjW6t+kL6Ef1tT1eQ2DPFLJlhluTD91AsZMUg==||U2FsdGVkX1/SWWqU9YmxtM0T6Nm5mClKwqTaoF9wgZd9rNw2xs4hnY8Ilv8DZtFyNt92xym3eB6WA605N5llLm0D68EQtU9ci1rTEDopZ1ODzcqtTVSoFEloNPFSfW6LTIC9+2LSVBeeHXoLEQiLYHWihHu10Xll3KsH9iBObDACDm1PT7IV4uWvNpNeuKJc\npY3C5SG+3sHRX1aeMnHlKLhaIsOdw2IexjvMqocVpfRpX4wnsabNA0VJ3k95zUPS3vTtSegeDhwbl6j+/FZcGk9i+gAy6LuetlKuARjPYn2LH5Be3Ah+ggSBPlxf3JW9rtWNdUoFByHTcFlhzlU9HnpnBUrgcVMhCQ7SAjN9h2NMGmCr10Rn4OE0WtelNqYVig7KmENaPvFT+k2I0cYZ4KWwxxsQNKbjEAxJxrzK4HkaczCvyQbzj4Ppxx/0q+Cns44OeyWcwYD/vSaJm4Kptwpr+L4y5BoSO/WeqhSUQQ85nvOhtE0pSH/ZXYo3pqjPdQRfNm6NFeBl2lwTmZUEuw==\n====END LICENSE KEY====',
90 |
91 | list: {
92 | columns: {
93 | data: GSTC.api.fromArray(columnsFromDB),
94 | },
95 | rows: GSTC.api.fromArray(rowsFromDB),
96 | },
97 | chart: {
98 | items: GSTC.api.fromArray(itemsFromDB),
99 | },
100 | };
101 |
102 | // Generate GSTC state from configuration object
103 | const state = GSTC.api.stateFromConfig(config);
104 |
105 | // for testing
106 | globalThis.state = state;
107 |
108 | const element = document.getElementById('gstc');
109 | if (!element) throw new Error('Element not found');
110 |
111 | // Mount the component
112 | const app = GSTC({
113 | element,
114 | state,
115 | });
116 |
117 | //for testing
118 | globalThis.gstc = app;
119 |
--------------------------------------------------------------------------------
/examples/seconds-zoom/index.js:
--------------------------------------------------------------------------------
1 | import GSTC from '../../dist/gstc.wasm.esm.min.js';
2 |
3 | const rowsFromDB = [
4 | {
5 | id: '1',
6 | label: 'Row 1',
7 | },
8 | {
9 | id: '2',
10 | label: 'Row 2',
11 | },
12 | ];
13 |
14 | const itemsFromDB = [
15 | {
16 | id: '1',
17 | label: 'Item 1',
18 | rowId: '1',
19 | time: {
20 | start: GSTC.api.date('2020-01-01 00:00:00').valueOf(),
21 | end: GSTC.api.date('2020-01-01 00:00:05').endOf('second').valueOf(),
22 | },
23 | },
24 | {
25 | id: '2',
26 | label: 'Item 2',
27 | rowId: '2',
28 | time: {
29 | start: GSTC.api.date('2020-01-01 00:01:00').valueOf(),
30 | end: GSTC.api.date('2020-01-01 00:01:10').endOf('second').valueOf(),
31 | },
32 | },
33 | ];
34 |
35 | const columnsFromDB = [
36 | {
37 | id: 'id',
38 | label: 'ID',
39 | data: ({ row }) => Number(GSTC.api.sourceID(row.id)), // show original id
40 | sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
41 | width: 80,
42 | header: {
43 | content: 'ID',
44 | },
45 | },
46 | {
47 | id: 'label',
48 | data: 'label',
49 | sortable: 'label',
50 | isHTML: false,
51 | width: 300,
52 | header: {
53 | content: 'Label',
54 | },
55 | },
56 | ];
57 |
58 | /**
59 | * @type {import("../../dist/gstc").ChartCalendarLevel}
60 | */
61 | const seconds = [
62 | {
63 | zoomTo: 100, // we want to display this format for all zoom levels until 100
64 | period: 'second',
65 | periodIncrement: 1,
66 | main: true,
67 | format({ timeStart, vido }) {
68 | return vido.html`${timeStart.format('HH:mm:ss')}
`; // full list of formats: https://day.js.org/docs/en/display/format
69 | },
70 | },
71 | ];
72 |
73 | // Configuration object
74 |
75 | // Typescript usage:
76 | // import { Config } from 'gantt-schedule-timeline-calendar';
77 | // const config: Config = {...};
78 | /**
79 | * @type {import('../../dist/gstc').Config} // or {import('gantt-schedule-timeline-calendar').Config}
80 | */
81 | const config = {
82 | // for free key for your domain please visit https://gstc.neuronet.io/free-key
83 | // if you need commercial license please visit https://gantt-schedule-timeline-calendar.neuronet.io/pricing
84 |
85 | licenseKey:
86 | '====BEGIN LICENSE KEY====\nXOfH/lnVASM6et4Co473t9jPIvhmQ/l0X3Ewog30VudX6GVkOB0n3oDx42NtADJ8HjYrhfXKSNu5EMRb5KzCLvMt/pu7xugjbvpyI1glE7Ha6E5VZwRpb4AC8T1KBF67FKAgaI7YFeOtPFROSCKrW5la38jbE5fo+q2N6wAfEti8la2ie6/7U2V+SdJPqkm/mLY/JBHdvDHoUduwe4zgqBUYLTNUgX6aKdlhpZPuHfj2SMeB/tcTJfH48rN1mgGkNkAT9ovROwI7ReLrdlHrHmJ1UwZZnAfxAC3ftIjgTEHsd/f+JrjW6t+kL6Ef1tT1eQ2DPFLJlhluTD91AsZMUg==||U2FsdGVkX1/SWWqU9YmxtM0T6Nm5mClKwqTaoF9wgZd9rNw2xs4hnY8Ilv8DZtFyNt92xym3eB6WA605N5llLm0D68EQtU9ci1rTEDopZ1ODzcqtTVSoFEloNPFSfW6LTIC9+2LSVBeeHXoLEQiLYHWihHu10Xll3KsH9iBObDACDm1PT7IV4uWvNpNeuKJc\npY3C5SG+3sHRX1aeMnHlKLhaIsOdw2IexjvMqocVpfRpX4wnsabNA0VJ3k95zUPS3vTtSegeDhwbl6j+/FZcGk9i+gAy6LuetlKuARjPYn2LH5Be3Ah+ggSBPlxf3JW9rtWNdUoFByHTcFlhzlU9HnpnBUrgcVMhCQ7SAjN9h2NMGmCr10Rn4OE0WtelNqYVig7KmENaPvFT+k2I0cYZ4KWwxxsQNKbjEAxJxrzK4HkaczCvyQbzj4Ppxx/0q+Cns44OeyWcwYD/vSaJm4Kptwpr+L4y5BoSO/WeqhSUQQ85nvOhtE0pSH/ZXYo3pqjPdQRfNm6NFeBl2lwTmZUEuw==\n====END LICENSE KEY====',
87 |
88 | list: {
89 | columns: {
90 | data: GSTC.api.fromArray(columnsFromDB),
91 | },
92 | rows: GSTC.api.fromArray(rowsFromDB),
93 | },
94 | chart: {
95 | items: GSTC.api.fromArray(itemsFromDB),
96 | calendarLevels: [seconds],
97 | time: {
98 | zoom: 4,
99 | period: 'second',
100 | from: GSTC.api.date('2020-01-01T00:00:00').startOf('hour').valueOf(),
101 | to: GSTC.api.date('2020-01-01T00:00:0').endOf('hour').valueOf(),
102 | },
103 | },
104 | };
105 |
106 | // Generate GSTC state from configuration object
107 | const state = GSTC.api.stateFromConfig(config);
108 |
109 | // for testing
110 | globalThis.state = state;
111 |
112 | const element = document.getElementById('gstc');
113 | if (!element) throw new Error('Element not found');
114 |
115 | // Mount the component
116 | const app = GSTC({
117 | element,
118 | state,
119 | });
120 |
121 | //for testing
122 | globalThis.gstc = app;
123 |
--------------------------------------------------------------------------------
/dist/plugins/time-bookmarks.umd.min.js:
--------------------------------------------------------------------------------
1 | !function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports):"function"==typeof define&&define.amd?define(["exports"],s):s((t="undefined"!=typeof globalThis?globalThis:t||self).TimeBookmarks={})}(this,function(t){"use strict";
2 | /**
3 | * Gantt-Schedule-Timeline-Calendar helpers
4 | *
5 | * @copyright NEURONET - Rafal Pospiech
6 | * @author Rafal Pospiech
30 |
34 |
`,m=t=>s`
38 |
`;return t=>s`
42 | ${t.label}
43 |
44 |
45 | ${c.filter(t=>t.visible).map(t=>h(t))}
46 |
47 | ${t}
48 |
49 | ${c.filter(t=>t.visible).map(t=>m(t))}
50 |
`}}t.Plugin=function(t={}){return function(s){const i=s.state.get(e);i&&(t=s.api.mergeDeep({},t,i));const l=new a(t,s);return s.api.pluginInitialized("TimeBookmarks"),l.destroy}},t.pluginPath=e,t.slotPath=i,Object.defineProperty(t,"__esModule",{value:!0})});
--------------------------------------------------------------------------------
/examples/grid-content/index.js:
--------------------------------------------------------------------------------
1 | import GSTC from '../../dist/gstc.wasm.esm.min.js';
2 |
3 | const rowsFromDB = [
4 | {
5 | id: '1',
6 | label: 'Row 1',
7 | },
8 | {
9 | id: '2',
10 | label: 'Row 2',
11 | },
12 | ];
13 |
14 | const itemsFromDB = [
15 | {
16 | id: '1',
17 | label: 'Item 1',
18 | rowId: '1',
19 | time: {
20 | start: GSTC.api.date('2020-01-01').startOf('day').valueOf(),
21 | end: GSTC.api.date('2020-01-02').endOf('day').valueOf(),
22 | },
23 | },
24 | {
25 | id: '2',
26 | label: 'Item 2',
27 | rowId: '1',
28 | time: {
29 | start: GSTC.api.date('2020-02-01').startOf('day').valueOf(),
30 | end: GSTC.api.date('2020-02-02').endOf('day').valueOf(),
31 | },
32 | },
33 | {
34 | id: '3',
35 | label: 'Item 3',
36 | rowId: '2',
37 | time: {
38 | start: GSTC.api.date('2020-01-15').startOf('day').valueOf(),
39 | end: GSTC.api.date('2020-01-20').endOf('day').valueOf(),
40 | },
41 | },
42 | ];
43 |
44 | const columnsFromDB = [
45 | {
46 | id: 'id',
47 | label: 'ID',
48 | data: ({ row }) => GSTC.api.sourceID(row.id), // show original id (not internal GSTCID)
49 | sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
50 | width: 80,
51 | header: {
52 | content: 'ID',
53 | },
54 | },
55 | {
56 | id: 'label',
57 | data: 'label',
58 | sortable: 'label',
59 | isHTML: false,
60 | width: 230,
61 | header: {
62 | content: 'Label',
63 | },
64 | },
65 | ];
66 |
67 | function onCellClick(row, time) {
68 | alert('Cell for row ' + GSTC.api.sourceID(row.id) + ' ' + time.leftGlobalDate.format('YYYY-MM-DD') + ' clicked!');
69 | }
70 |
71 | function onCellCreate1({ time, row, vido }) {
72 | return vido.html`
73 | onCellClick(
74 | row,
75 | time
76 | )} style="background:red;color:white;border-radius:100%;cursor:pointer;width:20px;height:20px;">!
`;
77 | }
78 |
79 | function onCellCreate2({ content, vido }) {
80 | return vido.html`${content}
`;
81 | }
82 |
83 | // Configuration object
84 |
85 | // Typescript usage:
86 | // import { Config } from 'gantt-schedule-timeline-calendar';
87 | // const config: Config = {...};
88 | /**
89 | * @type {import('../../dist/gstc').Config} // or {import('gantt-schedule-timeline-calendar').Config}
90 | */
91 | const config = {
92 | // for trial key for your domain please visit https://gstc.neuronet.io/free-key
93 | // if you need commercial license please visit https://gantt-schedule-timeline-calendar.neuronet.io/pricing
94 |
95 | licenseKey:
96 | '====BEGIN LICENSE KEY====\nXOfH/lnVASM6et4Co473t9jPIvhmQ/l0X3Ewog30VudX6GVkOB0n3oDx42NtADJ8HjYrhfXKSNu5EMRb5KzCLvMt/pu7xugjbvpyI1glE7Ha6E5VZwRpb4AC8T1KBF67FKAgaI7YFeOtPFROSCKrW5la38jbE5fo+q2N6wAfEti8la2ie6/7U2V+SdJPqkm/mLY/JBHdvDHoUduwe4zgqBUYLTNUgX6aKdlhpZPuHfj2SMeB/tcTJfH48rN1mgGkNkAT9ovROwI7ReLrdlHrHmJ1UwZZnAfxAC3ftIjgTEHsd/f+JrjW6t+kL6Ef1tT1eQ2DPFLJlhluTD91AsZMUg==||U2FsdGVkX1/SWWqU9YmxtM0T6Nm5mClKwqTaoF9wgZd9rNw2xs4hnY8Ilv8DZtFyNt92xym3eB6WA605N5llLm0D68EQtU9ci1rTEDopZ1ODzcqtTVSoFEloNPFSfW6LTIC9+2LSVBeeHXoLEQiLYHWihHu10Xll3KsH9iBObDACDm1PT7IV4uWvNpNeuKJc\npY3C5SG+3sHRX1aeMnHlKLhaIsOdw2IexjvMqocVpfRpX4wnsabNA0VJ3k95zUPS3vTtSegeDhwbl6j+/FZcGk9i+gAy6LuetlKuARjPYn2LH5Be3Ah+ggSBPlxf3JW9rtWNdUoFByHTcFlhzlU9HnpnBUrgcVMhCQ7SAjN9h2NMGmCr10Rn4OE0WtelNqYVig7KmENaPvFT+k2I0cYZ4KWwxxsQNKbjEAxJxrzK4HkaczCvyQbzj4Ppxx/0q+Cns44OeyWcwYD/vSaJm4Kptwpr+L4y5BoSO/WeqhSUQQ85nvOhtE0pSH/ZXYo3pqjPdQRfNm6NFeBl2lwTmZUEuw==\n====END LICENSE KEY====',
97 |
98 | list: {
99 | columns: {
100 | data: GSTC.api.fromArray(columnsFromDB),
101 | },
102 | rows: GSTC.api.fromArray(rowsFromDB),
103 | },
104 | chart: {
105 | items: GSTC.api.fromArray(itemsFromDB),
106 | grid: {
107 | cell: {
108 | onCreate: [onCellCreate1, onCellCreate2],
109 | },
110 | },
111 | },
112 | };
113 |
114 | // Generate GSTC state from configuration object
115 | const state = GSTC.api.stateFromConfig(config);
116 |
117 | // for testing
118 | globalThis.state = state;
119 |
120 | const element = document.getElementById('gstc');
121 | if (!element) throw new Error('Element not found');
122 |
123 | // Mount the component
124 | const app = GSTC({
125 | element,
126 | state,
127 | });
128 |
129 | //for testing
130 | globalThis.gstc = app;
131 |
--------------------------------------------------------------------------------
/examples/rows-content/index.js:
--------------------------------------------------------------------------------
1 | import GSTC from '../../dist/gstc.wasm.esm.min.js';
2 |
3 | globalThis.row = '';
4 |
5 | function onRowClick(row) {
6 | //@ts-ignore
7 | globalThis.row = GSTC.api.sourceID(row.id);
8 | alert('Row ' + GSTC.api.sourceID(row.id) + ' clicked!');
9 | }
10 |
11 | const rowsFromDB = [
12 | {
13 | id: '1',
14 | label({ row, vido }) {
15 | return vido.html`
16 | onRowClick(
17 | row
18 | )} style="color:red;cursor:pointer;">ROW HTML HERE - CLICK ME
`;
19 | },
20 | },
21 | {
22 | id: '2',
23 | label: 'Row 2',
24 | },
25 | ];
26 |
27 | const itemsFromDB = [
28 | {
29 | id: '1',
30 | label: 'Item 1',
31 | rowId: '1',
32 | time: {
33 | start: GSTC.api.date('2020-01-01').startOf('day').valueOf(),
34 | end: GSTC.api.date('2020-01-02').endOf('day').valueOf(),
35 | },
36 | },
37 | {
38 | id: '2',
39 | label: 'Item 2',
40 | rowId: '1',
41 | time: {
42 | start: GSTC.api.date('2020-02-01').startOf('day').valueOf(),
43 | end: GSTC.api.date('2020-02-02').endOf('day').valueOf(),
44 | },
45 | },
46 | {
47 | id: '3',
48 | label: 'Item 3',
49 | rowId: '2',
50 | time: {
51 | start: GSTC.api.date('2020-01-15').startOf('day').valueOf(),
52 | end: GSTC.api.date('2020-01-20').endOf('day').valueOf(),
53 | },
54 | },
55 | ];
56 |
57 | const columnsFromDB = [
58 | {
59 | id: 'id',
60 | label: 'ID',
61 | data: ({ row, vido }) =>
62 | vido.html`
63 | onRowClick(row)}>${GSTC.api.sourceID(row.id)}
`, // show original id (not internal GSTCID)
64 | sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
65 | width: 80,
66 | header: {
67 | content: 'ID',
68 | },
69 | },
70 | {
71 | id: 'label',
72 | data: 'label',
73 | sortable: 'label',
74 | isHTML: false,
75 | width: 300,
76 | header: {
77 | content: 'Label',
78 | },
79 | },
80 | ];
81 |
82 | // Configuration object
83 |
84 | // Typescript usage:
85 | // import { Config } from 'gantt-schedule-timeline-calendar';
86 | // const config: Config = {...};
87 | /**
88 | * @type {import('../../dist/gstc').Config} // or {import('gantt-schedule-timeline-calendar').Config}
89 | */
90 | const config = {
91 | // for trial key for your domain please visit https://gstc.neuronet.io/free-key
92 | // if you need commercial license please visit https://gantt-schedule-timeline-calendar.neuronet.io/pricing
93 |
94 | licenseKey:
95 | '====BEGIN LICENSE KEY====\nXOfH/lnVASM6et4Co473t9jPIvhmQ/l0X3Ewog30VudX6GVkOB0n3oDx42NtADJ8HjYrhfXKSNu5EMRb5KzCLvMt/pu7xugjbvpyI1glE7Ha6E5VZwRpb4AC8T1KBF67FKAgaI7YFeOtPFROSCKrW5la38jbE5fo+q2N6wAfEti8la2ie6/7U2V+SdJPqkm/mLY/JBHdvDHoUduwe4zgqBUYLTNUgX6aKdlhpZPuHfj2SMeB/tcTJfH48rN1mgGkNkAT9ovROwI7ReLrdlHrHmJ1UwZZnAfxAC3ftIjgTEHsd/f+JrjW6t+kL6Ef1tT1eQ2DPFLJlhluTD91AsZMUg==||U2FsdGVkX1/SWWqU9YmxtM0T6Nm5mClKwqTaoF9wgZd9rNw2xs4hnY8Ilv8DZtFyNt92xym3eB6WA605N5llLm0D68EQtU9ci1rTEDopZ1ODzcqtTVSoFEloNPFSfW6LTIC9+2LSVBeeHXoLEQiLYHWihHu10Xll3KsH9iBObDACDm1PT7IV4uWvNpNeuKJc\npY3C5SG+3sHRX1aeMnHlKLhaIsOdw2IexjvMqocVpfRpX4wnsabNA0VJ3k95zUPS3vTtSegeDhwbl6j+/FZcGk9i+gAy6LuetlKuARjPYn2LH5Be3Ah+ggSBPlxf3JW9rtWNdUoFByHTcFlhzlU9HnpnBUrgcVMhCQ7SAjN9h2NMGmCr10Rn4OE0WtelNqYVig7KmENaPvFT+k2I0cYZ4KWwxxsQNKbjEAxJxrzK4HkaczCvyQbzj4Ppxx/0q+Cns44OeyWcwYD/vSaJm4Kptwpr+L4y5BoSO/WeqhSUQQ85nvOhtE0pSH/ZXYo3pqjPdQRfNm6NFeBl2lwTmZUEuw==\n====END LICENSE KEY====',
96 |
97 | list: {
98 | columns: {
99 | data: GSTC.api.fromArray(columnsFromDB),
100 | },
101 | rows: GSTC.api.fromArray(rowsFromDB),
102 | },
103 | chart: {
104 | items: GSTC.api.fromArray(itemsFromDB),
105 | },
106 | };
107 |
108 | // Generate GSTC state from configuration object
109 | const state = GSTC.api.stateFromConfig(config);
110 |
111 | // for testing
112 | globalThis.state = state;
113 |
114 | const element = document.getElementById('gstc');
115 | if (!element) throw new Error('Element not found');
116 |
117 | // Mount the component
118 | const app = GSTC({
119 | element,
120 | state,
121 | });
122 |
123 | //for testing
124 | globalThis.gstc = app;
125 |
--------------------------------------------------------------------------------
/examples/simple/index.js:
--------------------------------------------------------------------------------
1 | import GSTC from '../../dist/gstc.wasm.esm.min.js';
2 |
3 | const rowsFromDB = [
4 | {
5 | id: '1',
6 | label: 'Row 1',
7 | },
8 | {
9 | id: '2',
10 | label: 'Row 2',
11 | },
12 | {
13 | id: '3',
14 | label: 'Row 3',
15 | },
16 | {
17 | id: '4',
18 | label: 'Row 4',
19 | },
20 | {
21 | id: '5',
22 | label: 'Row 5',
23 | },
24 | {
25 | id: '6',
26 | label: 'Row 6',
27 | },
28 | {
29 | id: '7',
30 | label: 'Row 7',
31 | },
32 | {
33 | id: '8',
34 | label: 'Row 8',
35 | },
36 | {
37 | id: '9',
38 | label: 'Row 9',
39 | },
40 | {
41 | id: '10',
42 | label: 'Row 10',
43 | },
44 | {
45 | id: '11',
46 | label: 'Row 11',
47 | },
48 | {
49 | id: '12',
50 | label: 'Row 12',
51 | },
52 | ];
53 |
54 | const itemsFromDB = [
55 | {
56 | id: '1',
57 | label: 'Item 1',
58 | rowId: '1',
59 | time: {
60 | start: GSTC.api.date('2020-01-01').startOf('day').valueOf(),
61 | end: GSTC.api.date('2020-01-02').endOf('day').valueOf(),
62 | },
63 | },
64 | {
65 | id: '2',
66 | label: 'Item 2',
67 | rowId: '1',
68 | time: {
69 | start: GSTC.api.date('2020-02-01').startOf('day').valueOf(),
70 | end: GSTC.api.date('2020-02-02').endOf('day').valueOf(),
71 | },
72 | },
73 | {
74 | id: '3',
75 | label: 'Item 3',
76 | rowId: '2',
77 | time: {
78 | start: GSTC.api.date('2020-01-15').startOf('day').valueOf(),
79 | end: GSTC.api.date('2020-01-20').endOf('day').valueOf(),
80 | },
81 | },
82 | ];
83 |
84 | const columnsFromDB = [
85 | {
86 | id: 'id',
87 | label: 'ID',
88 | data: ({ row }) => GSTC.api.sourceID(row.id), // show original id (not internal GSTCID)
89 | sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
90 | width: 80,
91 | header: {
92 | content: 'ID',
93 | },
94 | },
95 | {
96 | id: 'label',
97 | data: 'label',
98 | sortable: 'label',
99 | isHTML: false,
100 | width: 230,
101 | header: {
102 | content: 'Label',
103 | },
104 | },
105 | ];
106 |
107 | // Configuration object
108 |
109 | // Typescript usage:
110 | // import { Config } from 'gantt-schedule-timeline-calendar';
111 | // const config: Config = {...};
112 | /**
113 | * @type {import('../../dist/gstc').Config} // or {import('gantt-schedule-timeline-calendar').Config}
114 | */
115 | const config = {
116 | // for free key for your domain please visit https://gstc.neuronet.io/free-key
117 | // if you need commercial license please visit https://gantt-schedule-timeline-calendar.neuronet.io/pricing
118 |
119 | licenseKey:
120 | '====BEGIN LICENSE KEY====\nXOfH/lnVASM6et4Co473t9jPIvhmQ/l0X3Ewog30VudX6GVkOB0n3oDx42NtADJ8HjYrhfXKSNu5EMRb5KzCLvMt/pu7xugjbvpyI1glE7Ha6E5VZwRpb4AC8T1KBF67FKAgaI7YFeOtPFROSCKrW5la38jbE5fo+q2N6wAfEti8la2ie6/7U2V+SdJPqkm/mLY/JBHdvDHoUduwe4zgqBUYLTNUgX6aKdlhpZPuHfj2SMeB/tcTJfH48rN1mgGkNkAT9ovROwI7ReLrdlHrHmJ1UwZZnAfxAC3ftIjgTEHsd/f+JrjW6t+kL6Ef1tT1eQ2DPFLJlhluTD91AsZMUg==||U2FsdGVkX1/SWWqU9YmxtM0T6Nm5mClKwqTaoF9wgZd9rNw2xs4hnY8Ilv8DZtFyNt92xym3eB6WA605N5llLm0D68EQtU9ci1rTEDopZ1ODzcqtTVSoFEloNPFSfW6LTIC9+2LSVBeeHXoLEQiLYHWihHu10Xll3KsH9iBObDACDm1PT7IV4uWvNpNeuKJc\npY3C5SG+3sHRX1aeMnHlKLhaIsOdw2IexjvMqocVpfRpX4wnsabNA0VJ3k95zUPS3vTtSegeDhwbl6j+/FZcGk9i+gAy6LuetlKuARjPYn2LH5Be3Ah+ggSBPlxf3JW9rtWNdUoFByHTcFlhzlU9HnpnBUrgcVMhCQ7SAjN9h2NMGmCr10Rn4OE0WtelNqYVig7KmENaPvFT+k2I0cYZ4KWwxxsQNKbjEAxJxrzK4HkaczCvyQbzj4Ppxx/0q+Cns44OeyWcwYD/vSaJm4Kptwpr+L4y5BoSO/WeqhSUQQ85nvOhtE0pSH/ZXYo3pqjPdQRfNm6NFeBl2lwTmZUEuw==\n====END LICENSE KEY====',
121 | list: {
122 | columns: {
123 | data: GSTC.api.fromArray(columnsFromDB),
124 | },
125 | rows: GSTC.api.fromArray(rowsFromDB),
126 | },
127 | chart: {
128 | items: GSTC.api.fromArray(itemsFromDB),
129 | },
130 | };
131 |
132 | // Generate GSTC state from configuration object
133 | const state = GSTC.api.stateFromConfig(config);
134 |
135 | // for testing
136 | globalThis.state = state;
137 |
138 | const element = document.getElementById('gstc');
139 | if (!element) throw new Error('Element not found');
140 |
141 | element.addEventListener('gstc-loaded', (ev) => {
142 | // @ts-ignore
143 | globalThis.dispatchEvent(new Event('gstc-loaded', ev.target));
144 | });
145 |
146 | // Mount the component
147 | const app = (globalThis.gstc = GSTC({
148 | element,
149 | state,
150 | }));
151 |
--------------------------------------------------------------------------------
/examples/hide-weekends/index.js:
--------------------------------------------------------------------------------
1 | import GSTC from '../../dist/gstc.wasm.esm.min.js';
2 | import { Plugin as TimelinePointer } from '../../dist/plugins/timeline-pointer.esm.min.js';
3 | import { Plugin as Selection } from '../../dist/plugins/selection.esm.min.js';
4 | import { Plugin as ItemMovement } from '../../dist/plugins/item-movement.esm.min.js';
5 | import { Plugin as ItemResizing } from '../../dist/plugins/item-resizing.esm.min.js';
6 |
7 | const rowsFromDB = [
8 | {
9 | id: '1',
10 | label: 'Row 1',
11 | },
12 | {
13 | id: '2',
14 | label: 'Row 2',
15 | },
16 | ];
17 |
18 | const itemsFromDB = [
19 | {
20 | id: '1',
21 | label: 'Item 1',
22 | rowId: '1',
23 | time: {
24 | start: GSTC.api.date('2021-01-01').startOf('day').valueOf(),
25 | end: GSTC.api.date('2021-01-04').endOf('day').valueOf(),
26 | },
27 | },
28 | {
29 | id: '2',
30 | label: 'Item 2',
31 | rowId: '1',
32 | time: {
33 | start: GSTC.api.date('2021-02-01').startOf('day').valueOf(),
34 | end: GSTC.api.date('2021-02-02').endOf('day').valueOf(),
35 | },
36 | },
37 | {
38 | id: '3',
39 | label: 'Item 3',
40 | rowId: '2',
41 | time: {
42 | start: GSTC.api.date('2021-01-15').startOf('day').valueOf(),
43 | end: GSTC.api.date('2021-01-20').endOf('day').valueOf(),
44 | },
45 | },
46 | ];
47 |
48 | const columnsFromDB = [
49 | {
50 | id: 'id',
51 | label: 'ID',
52 | data: ({ row }) => GSTC.api.sourceID(row.id), // show original id (not internal GSTCID)
53 | sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
54 | width: 80,
55 | header: {
56 | content: 'ID',
57 | },
58 | },
59 | {
60 | id: 'label',
61 | data: 'label',
62 | sortable: 'label',
63 | isHTML: false,
64 | width: 230,
65 | header: {
66 | content: 'Label',
67 | },
68 | },
69 | ];
70 |
71 | function onLevelDates({ dates, format }) {
72 | if (format.period !== 'day') return dates; // do nothing on months level
73 | return dates.filter((date) => date.leftGlobalDate.day() !== 0 && date.leftGlobalDate.day() !== 6);
74 | }
75 |
76 | // Configuration object
77 |
78 | // Typescript usage:
79 | // import { Config } from 'gantt-schedule-timeline-calendar';
80 | // const config: Config = {...};
81 | /**
82 | * @type {import('../../dist/gstc').Config} // or {import('gantt-schedule-timeline-calendar').Config}
83 | */
84 | const config = {
85 | // for trial key for your domain please visit https://gstc.neuronet.io/free-key
86 | // if you need commercial license please visit https://gantt-schedule-timeline-calendar.neuronet.io/pricing
87 |
88 | licenseKey:
89 | '====BEGIN LICENSE KEY====\nXOfH/lnVASM6et4Co473t9jPIvhmQ/l0X3Ewog30VudX6GVkOB0n3oDx42NtADJ8HjYrhfXKSNu5EMRb5KzCLvMt/pu7xugjbvpyI1glE7Ha6E5VZwRpb4AC8T1KBF67FKAgaI7YFeOtPFROSCKrW5la38jbE5fo+q2N6wAfEti8la2ie6/7U2V+SdJPqkm/mLY/JBHdvDHoUduwe4zgqBUYLTNUgX6aKdlhpZPuHfj2SMeB/tcTJfH48rN1mgGkNkAT9ovROwI7ReLrdlHrHmJ1UwZZnAfxAC3ftIjgTEHsd/f+JrjW6t+kL6Ef1tT1eQ2DPFLJlhluTD91AsZMUg==||U2FsdGVkX1/SWWqU9YmxtM0T6Nm5mClKwqTaoF9wgZd9rNw2xs4hnY8Ilv8DZtFyNt92xym3eB6WA605N5llLm0D68EQtU9ci1rTEDopZ1ODzcqtTVSoFEloNPFSfW6LTIC9+2LSVBeeHXoLEQiLYHWihHu10Xll3KsH9iBObDACDm1PT7IV4uWvNpNeuKJc\npY3C5SG+3sHRX1aeMnHlKLhaIsOdw2IexjvMqocVpfRpX4wnsabNA0VJ3k95zUPS3vTtSegeDhwbl6j+/FZcGk9i+gAy6LuetlKuARjPYn2LH5Be3Ah+ggSBPlxf3JW9rtWNdUoFByHTcFlhzlU9HnpnBUrgcVMhCQ7SAjN9h2NMGmCr10Rn4OE0WtelNqYVig7KmENaPvFT+k2I0cYZ4KWwxxsQNKbjEAxJxrzK4HkaczCvyQbzj4Ppxx/0q+Cns44OeyWcwYD/vSaJm4Kptwpr+L4y5BoSO/WeqhSUQQ85nvOhtE0pSH/ZXYo3pqjPdQRfNm6NFeBl2lwTmZUEuw==\n====END LICENSE KEY====',
90 |
91 | list: {
92 | columns: {
93 | data: GSTC.api.fromArray(columnsFromDB),
94 | },
95 | rows: GSTC.api.fromArray(rowsFromDB),
96 | },
97 | chart: {
98 | items: GSTC.api.fromArray(itemsFromDB),
99 | time: {
100 | onLevelDates: [onLevelDates],
101 | },
102 | },
103 | //plugins: [TimelinePointer(), Selection(), ItemResizing(), ItemMovement({ ignoreMissingDates: true })],
104 | };
105 |
106 | // Generate GSTC state from configuration object
107 | const state = GSTC.api.stateFromConfig(config);
108 |
109 | // for testing
110 | globalThis.state = state;
111 | const element = document.getElementById('gstc');
112 | if (!element) throw new Error('Element not found');
113 |
114 | // Mount the component
115 | const app = GSTC({
116 | element,
117 | state,
118 | });
119 |
120 | //for testing
121 | globalThis.gstc = app;
122 |
--------------------------------------------------------------------------------
/cypress/e2e/time-bookmarks.test.ts:
--------------------------------------------------------------------------------
1 | import { Time } from '../../dist/api/time';
2 | import { DataChartTime } from '../../dist/gstc';
3 | import { round } from '../helpers';
4 |
5 | describe('Time bookmarks', () => {
6 | it('should display the bookmarks at the right positions', () => {
7 | let gstc, state;
8 | cy.load('/examples/one-month')
9 | .window()
10 | .then((win) => {
11 | // @ts-ignore
12 | gstc = win.gstc;
13 | // @ts-ignore
14 | state = win.state;
15 | })
16 | .then(() => {
17 | const chartTime: DataChartTime = state.get('$data.chart.time');
18 | const thirdDateLeft = round(chartTime.levels[1][2].currentView.leftPx);
19 | let thirdDateFromAll;
20 | for (const currentDate of chartTime.allDates[1]) {
21 | if (currentDate.leftGlobalDate.format('YYYY-MM-DD') === '2020-01-03') {
22 | thirdDateFromAll = currentDate;
23 | continue;
24 | }
25 | }
26 | const fromAllDates = round(thirdDateFromAll.currentView.leftPx);
27 | cy.log('thirdDateFromAll', fromAllDates);
28 | cy.log('thirdDateLeft width', thirdDateLeft);
29 | expect(fromAllDates).to.eq(thirdDateLeft);
30 | })
31 | .get('.gstc__chart-time-bookmark-label-content--1-st')
32 | .then(($el) => {
33 | const left = round($el.parent().css('left'));
34 | const time: Time = gstc.api.time;
35 | const chartTime: DataChartTime = state.get('$data.chart.time');
36 | const thirdDateLeft = round(chartTime.levels[1][2].currentView.leftPx);
37 | const added2Days = chartTime.leftGlobalDate.startOf('day').add(2, 'day').startOf('day');
38 | expect(added2Days.format('YYYY-MM-DD')).to.eq('2020-01-03');
39 | const shouldLeft = round(time.getViewOffsetPxFromDates(added2Days, false, chartTime));
40 | expect(added2Days.format('YYYY-MM-DD')).to.eq('2020-01-03');
41 | expect(thirdDateLeft).to.eq(shouldLeft);
42 | expect(chartTime.leftGlobalDate.format('YYYY-MM-DD')).to.eq('2020-01-01');
43 | expect(left).to.eq(shouldLeft);
44 | expect($el.text().trim()).to.eq('1-st');
45 | })
46 | .get('.gstc__chart-time-bookmark-label-content--bookmark-1')
47 | .then(($el) => {
48 | const left = round($el.parent().css('left'));
49 | const time: Time = gstc.api.time;
50 | const chartTime: DataChartTime = state.get('$data.chart.time');
51 | const added4Days = chartTime.leftGlobalDate.startOf('day').add(4, 'day').startOf('day');
52 | expect(added4Days.format('YYYY-MM-DD')).to.eq('2020-01-05');
53 | const shouldLeft = round(time.getViewOffsetPxFromDates(added4Days, false, chartTime));
54 | expect(added4Days.format('YYYY-MM-DD')).to.eq('2020-01-05');
55 | expect(chartTime.leftGlobalDate.format('YYYY-MM-DD')).to.eq('2020-01-01');
56 | expect(left).to.eq(shouldLeft);
57 | expect($el.text().trim()).to.eq('Bookmark 2020-01-05');
58 | })
59 | .get('.gstc__chart-time-bookmark-label-content--bookmark-1')
60 | .should('be.visible')
61 | .get('.gstc__chart-time-bookmark-label')
62 | .then(($labels) => {
63 | expect($labels.length).to.eq(8);
64 | })
65 | .get('#btn-next-month')
66 | .click()
67 | .wait(300) // because on site there is setTimeout 250 to show the results
68 | .get('.gstc__chart-time-bookmark-label')
69 | .then(($labels) => {
70 | expect($labels.length).to.eq(2);
71 | })
72 | .get('.gstc__chart-time-bookmark-label-content--bookmark-8')
73 | .then(($el) => {
74 | const left = round($el.parent().css('left'));
75 | const time: Time = gstc.api.time;
76 | const chartTime: DataChartTime = state.get('$data.chart.time');
77 | const added1Day = chartTime.leftGlobalDate.startOf('day').add(1, 'day').startOf('day');
78 | expect(added1Day.format('YYYY-MM-DD')).to.eq('2020-02-02');
79 | const shouldLeft = round(time.getViewOffsetPxFromDates(added1Day, false, chartTime));
80 | expect(added1Day.format('YYYY-MM-DD')).to.eq('2020-02-02');
81 | expect(chartTime.leftGlobalDate.format('YYYY-MM-DD')).to.eq('2020-02-01');
82 | expect(left).to.eq(shouldLeft);
83 | expect($el.text().trim()).to.eq('Bookmark 2020-02-02');
84 | })
85 | .get('.gstc__chart-time-bookmark-line-content--bookmark-8')
86 | .should('be.visible')
87 | .get('.gstc__chart-time-bookmark-label-content--1-st')
88 | .should('not.exist')
89 | .get('.gstc__chart-time-bookmark-label-content--bookmark-1')
90 | .should('not.exist');
91 | });
92 | });
93 |
--------------------------------------------------------------------------------
/examples/minutes-zoom/index.js:
--------------------------------------------------------------------------------
1 | import GSTC from '../../dist/gstc.wasm.esm.min.js';
2 |
3 | // @ts-ignore
4 | GSTC.api.dayjs.extend(globalThis.dayjs_plugin_weekOfYear);
5 | //@ts-ignore
6 | GSTC.api.dayjs.extend(globalThis.dayjs_plugin_advancedFormat);
7 |
8 | const rowsFromDB = [
9 | {
10 | id: '1',
11 | label: 'Row 1',
12 | },
13 | {
14 | id: '2',
15 | label: 'Row 2',
16 | },
17 | ];
18 |
19 | const itemsFromDB = [
20 | {
21 | id: '1',
22 | label: 'Item 1',
23 | rowId: '1',
24 | time: {
25 | start: GSTC.api.date('2020-01-01 00:00:00').valueOf(),
26 | end: GSTC.api.date('2020-01-01 00:00:00').endOf('hour').valueOf(),
27 | },
28 | },
29 | {
30 | id: '2',
31 | label: 'Item 2',
32 | rowId: '1',
33 | time: {
34 | start: GSTC.api.date('2020-01-01 08:00:00').startOf('hour').valueOf(),
35 | end: GSTC.api.date('2020-01-01 10:00:00').endOf('hour').valueOf(),
36 | },
37 | },
38 | ];
39 |
40 | const columnsFromDB = [
41 | {
42 | id: 'id',
43 | label: 'ID',
44 | data: ({ row }) => Number(GSTC.api.sourceID(row.id)), // show original id
45 | sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
46 | width: 80,
47 | header: {
48 | content: 'ID',
49 | },
50 | },
51 | {
52 | id: 'label',
53 | data: 'label',
54 | sortable: 'label',
55 | isHTML: false,
56 | width: 300,
57 | header: {
58 | content: 'Label',
59 | },
60 | },
61 | ];
62 |
63 | /**
64 | * @type {import("../../dist/gstc").ChartCalendarLevel}
65 | */
66 | const hours = [
67 | {
68 | zoomTo: 100, // we want to display this format for all zoom levels until 100
69 | period: 'hour',
70 | periodIncrement: 1,
71 | format({ timeStart }) {
72 | return timeStart.format('HH:mm DD MMMM YYYY'); // full list of formats: https://day.js.org/docs/en/display/format
73 | },
74 | },
75 | ];
76 |
77 | /**
78 | * @type {import("../../dist/gstc").ChartCalendarLevel}
79 | */
80 | const minutes = [
81 | {
82 | zoomTo: 100, // we want to display this format for all zoom levels until 100
83 | period: 'minute',
84 | periodIncrement: 15,
85 | main: true,
86 | format({ timeStart, vido }) {
87 | return vido.html`${timeStart.format('HH:mm')}
`; // full list of formats: https://day.js.org/docs/en/display/format
88 | },
89 | },
90 | ];
91 |
92 | // Configuration object
93 |
94 | // Typescript usage:
95 | // import { Config } from 'gantt-schedule-timeline-calendar';
96 | // const config: Config = {...};
97 | /**
98 | * @type {import('../../dist/gstc').Config} // or {import('gantt-schedule-timeline-calendar').Config}
99 | */
100 | const config = {
101 | // for free key for your domain please visit https://gstc.neuronet.io/free-key
102 | // if you need commercial license please visit https://gantt-schedule-timeline-calendar.neuronet.io/pricing
103 |
104 | licenseKey:
105 | '====BEGIN LICENSE KEY====\nXOfH/lnVASM6et4Co473t9jPIvhmQ/l0X3Ewog30VudX6GVkOB0n3oDx42NtADJ8HjYrhfXKSNu5EMRb5KzCLvMt/pu7xugjbvpyI1glE7Ha6E5VZwRpb4AC8T1KBF67FKAgaI7YFeOtPFROSCKrW5la38jbE5fo+q2N6wAfEti8la2ie6/7U2V+SdJPqkm/mLY/JBHdvDHoUduwe4zgqBUYLTNUgX6aKdlhpZPuHfj2SMeB/tcTJfH48rN1mgGkNkAT9ovROwI7ReLrdlHrHmJ1UwZZnAfxAC3ftIjgTEHsd/f+JrjW6t+kL6Ef1tT1eQ2DPFLJlhluTD91AsZMUg==||U2FsdGVkX1/SWWqU9YmxtM0T6Nm5mClKwqTaoF9wgZd9rNw2xs4hnY8Ilv8DZtFyNt92xym3eB6WA605N5llLm0D68EQtU9ci1rTEDopZ1ODzcqtTVSoFEloNPFSfW6LTIC9+2LSVBeeHXoLEQiLYHWihHu10Xll3KsH9iBObDACDm1PT7IV4uWvNpNeuKJc\npY3C5SG+3sHRX1aeMnHlKLhaIsOdw2IexjvMqocVpfRpX4wnsabNA0VJ3k95zUPS3vTtSegeDhwbl6j+/FZcGk9i+gAy6LuetlKuARjPYn2LH5Be3Ah+ggSBPlxf3JW9rtWNdUoFByHTcFlhzlU9HnpnBUrgcVMhCQ7SAjN9h2NMGmCr10Rn4OE0WtelNqYVig7KmENaPvFT+k2I0cYZ4KWwxxsQNKbjEAxJxrzK4HkaczCvyQbzj4Ppxx/0q+Cns44OeyWcwYD/vSaJm4Kptwpr+L4y5BoSO/WeqhSUQQ85nvOhtE0pSH/ZXYo3pqjPdQRfNm6NFeBl2lwTmZUEuw==\n====END LICENSE KEY====',
106 |
107 | list: {
108 | columns: {
109 | data: GSTC.api.fromArray(columnsFromDB),
110 | },
111 | rows: GSTC.api.fromArray(rowsFromDB),
112 | },
113 | chart: {
114 | items: GSTC.api.fromArray(itemsFromDB),
115 | calendarLevels: [hours, minutes],
116 | time: {
117 | zoom: 13,
118 | from: GSTC.api.date('2020-01-01').startOf('month').valueOf(),
119 | to: GSTC.api.date('2020-01-01').endOf('month').valueOf(),
120 | },
121 | },
122 | };
123 |
124 | // Generate GSTC state from configuration object
125 | const state = GSTC.api.stateFromConfig(config);
126 |
127 | // for testing
128 | globalThis.state = state;
129 |
130 | const element = document.getElementById('gstc');
131 | if (!element) throw new Error('element not found');
132 |
133 | // Mount the component
134 | const app = GSTC({
135 | element,
136 | state,
137 | });
138 |
139 | //for testing
140 | globalThis.gstc = app;
141 |
--------------------------------------------------------------------------------
/examples/simple/simple.umd.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |