@operato/gantt 8.0.0 → 9.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.md +167 -9
  2. package/dist/src/draw-time-scale-header.d.ts +1 -1
  3. package/dist/src/draw-time-scale-header.js.map +1 -1
  4. package/dist/src/gantt-chart-controller.d.ts +7 -8
  5. package/dist/src/gantt-chart-controller.js +96 -33
  6. package/dist/src/gantt-chart-controller.js.map +1 -1
  7. package/dist/src/ox-gantt-chart.d.ts +378 -3
  8. package/dist/src/ox-gantt-chart.js +97 -186
  9. package/dist/src/ox-gantt-chart.js.map +1 -1
  10. package/dist/src/ox-gantt-resize-splitter.d.ts +6 -2
  11. package/dist/src/ox-gantt-resize-splitter.js +73 -44
  12. package/dist/src/ox-gantt-resize-splitter.js.map +1 -1
  13. package/dist/src/ox-gantt.js +84 -79
  14. package/dist/src/ox-gantt.js.map +1 -1
  15. package/dist/src/ox-resource-chart.d.ts +1 -1
  16. package/dist/src/ox-resource-chart.js +15 -9
  17. package/dist/src/ox-resource-chart.js.map +1 -1
  18. package/dist/src/ox-task-tooltip.d.ts +3 -1
  19. package/dist/src/ox-task-tooltip.js +43 -20
  20. package/dist/src/ox-task-tooltip.js.map +1 -1
  21. package/dist/src/resource-chart-controller.d.ts +1 -1
  22. package/dist/src/resource-chart-controller.js +14 -4
  23. package/dist/src/resource-chart-controller.js.map +1 -1
  24. package/dist/src/types.d.ts +1 -0
  25. package/dist/src/types.js.map +1 -1
  26. package/dist/src/utils.d.ts +1 -1
  27. package/dist/src/utils.js.map +1 -1
  28. package/dist/stories/ox-gantt-chart.stories.js +1 -1
  29. package/dist/stories/ox-gantt-chart.stories.js.map +1 -1
  30. package/dist/stories/ox-gantt.stories.js +38 -2
  31. package/dist/stories/ox-gantt.stories.js.map +1 -1
  32. package/dist/tsconfig.tsbuildinfo +1 -1
  33. package/package.json +15 -14
  34. package/assets/images/icon-editor-gradient-direction.png +0 -0
  35. package/assets/images/icon-properties-label.png +0 -0
  36. package/assets/images/icon-properties-line-type.png +0 -0
  37. package/assets/images/icon-properties-table.png +0 -0
package/dist/src/ox-resource-chart.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { LitElement, html, css } from 'lit';
3
3
  import { customElement, property, query } from 'lit/decorators.js';
4
- import { ResourceChartController } from './resource-chart-controller';
5
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
4
+ import { ResourceChartController } from './resource-chart-controller.js';
5
+ import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
6
6
  import { ScrollbarStyles } from '@operato/styles';
7
7
  let OxResourceChart = class OxResourceChart extends LitElement {
8
- static { this.styles = [
8
+ static styles = [
9
9
  MDTypeScaleStyles,
10
10
  ScrollbarStyles,
11
11
  css `
@@ -13,12 +13,14 @@ let OxResourceChart = class OxResourceChart extends LitElement {
13
13
  display: flex;
14
14
  overflow: hidden;
15
15
  position: relative;
16
+ user-select: none;
16
17
  }
17
18
 
18
19
  div[chart-container] {
19
20
  flex-direction: column;
20
21
  overflow-x: auto;
21
22
  overflow-y: hidden;
23
+ overscroll-behavior: none;
22
24
  }
23
25
 
24
26
  svg[header] {
@@ -47,14 +49,18 @@ let OxResourceChart = class OxResourceChart extends LitElement {
47
49
  stroke-width: 0;
48
50
  }
49
51
  `
50
- ]; }
52
+ ];
53
+ fromDate = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0];
54
+ toDate = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0];
55
+ axisScale = 'week-day';
56
+ resources = [];
57
+ tasks = [];
58
+ container;
59
+ svgHeader;
60
+ svgBody;
61
+ resourceChartController;
51
62
  constructor() {
52
63
  super();
53
- this.fromDate = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0];
54
- this.toDate = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0];
55
- this.axisScale = 'week-day';
56
- this.resources = [];
57
- this.tasks = [];
58
64
  this.resourceChartController = new ResourceChartController(this, this.fromDate, this.toDate, this.axisScale);
59
65
  }
60
66
  updated(changedProperties) {
package/dist/src/ox-resource-chart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-resource-chart.js","sourceRoot":"","sources":["../../src/ox-resource-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ResourceChartController } from './resource-chart-controller'\nimport { Task, Resource, TimeScale } from './types'\n\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-resource-chart')\nexport class OxResourceChart extends LitElement {\n static styles = [\n MDTypeScaleStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow: hidden;\n position: relative;\n }\n\n div[chart-container] {\n flex-direction: column;\n overflow-x: auto;\n overflow-y: hidden;\n }\n\n svg[header] {\n display: block;\n min-width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-outline));\n height: 30px;\n background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n position: sticky;\n top: 0;\n z-index: 1;\n }\n\n svg[body] {\n display: block;\n min-width: 100%;\n }\n\n .grid line {\n stroke: #e0e0e0;\n }\n\n .grid path {\n stroke-width: 0;\n }\n `\n ]\n\n @property({ type: String }) fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]\n @property({ type: String }) toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]\n @property({ type: String }) axisScale: TimeScale = 'week-day'\n @property({ type: Array }) resources: Resource[] = []\n @property({ type: Array }) tasks: Task[] = []\n\n @query('[chart-container]') container!: HTMLDivElement\n @query('svg[header]') svgHeader!: SVGSVGElement\n @query('svg[body]') svgBody!: SVGSVGElement\n\n private resourceChartController: ResourceChartController\n\n constructor() {\n super()\n this.resourceChartController = new ResourceChartController(this, this.fromDate, this.toDate, this.axisScale)\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {\n this.resourceChartController.updateRange(this.fromDate, this.toDate)\n }\n\n if (changedProperties.has('resources')) {\n this.resourceChartController.setResources(this.resources)\n this.updateChartHeight()\n }\n\n if (changedProperties.has('tasks')) {\n this.resourceChartController.setTasks(this.flattenTasks(this.tasks))\n this.updateChartHeight()\n }\n\n if (changedProperties.has('axisScale')) {\n this.resourceChartController.level = this.axisScale\n this.resourceChartController.updateTimeScale()\n }\n\n this.resourceChartController.drawAxes(this.svgHeader)\n this.resourceChartController.drawBody(this.svgBody)\n }\n\n updateChartHeight() {\n const resourceCount = this.resources.length\n const rowHeight = 30 // 리소스 하나당 할당된 높이 (픽셀)\n const minHeight = 200 // 최소 높이\n const chartHeight = Math.max(resourceCount * rowHeight, minHeight)\n\n this.svgBody.style.height = `${chartHeight}px`\n }\n\n render() {\n return html`\n <div\n chart-container\n @wheel=${(e: WheelEvent) => this.resourceChartController.handleWheelForBody(e, this.container)}\n @touchstart=${(e: TouchEvent) => this.resourceChartController.handleTouchStartForBody(e, this.container)}\n @touchmove=${(e: TouchEvent) => this.resourceChartController.handleTouchMoveForBody(e, this.container)}\n >\n <svg header></svg>\n <svg body></svg>\n </div>\n `\n }\n\n syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {\n this.resourceChartController.syncTimeScale(detail)\n this.requestUpdate()\n }\n\n getHorizontalOffset(): number {\n return this.container.scrollLeft\n }\n\n setHorizontalOffset(offset: number) {\n this.container.scrollLeft = offset\n }\n\n getVerticalOffset(): number {\n return this.container.scrollTop\n }\n\n setVerticalOffset(offset: number) {\n this.container.scrollTop = offset\n }\n\n flattenTasks(tasks: Task[], level: number = 0): Task[] {\n return tasks.flatMap(task =>\n task.collapsed ? [{ ...task, level }] : [{ ...task, level }, ...this.flattenTasks(task.children || [], level + 1)]\n )\n }\n}\n"]}
1
+ {"version":3,"file":"ox-resource-chart.js","sourceRoot":"","sources":["../../src/ox-resource-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ResourceChartController } from './resource-chart-controller.js'\nimport { Task, Resource, TimeScale } from './types.js'\n\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-resource-chart')\nexport class OxResourceChart extends LitElement {\n static styles = [\n MDTypeScaleStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow: hidden;\n position: relative;\n user-select: none;\n }\n\n div[chart-container] {\n flex-direction: column;\n overflow-x: auto;\n overflow-y: hidden;\n overscroll-behavior: none;\n }\n\n svg[header] {\n display: block;\n min-width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-outline));\n height: 30px;\n background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n position: sticky;\n top: 0;\n z-index: 1;\n }\n\n svg[body] {\n display: block;\n min-width: 100%;\n }\n\n .grid line {\n stroke: #e0e0e0;\n }\n\n .grid path {\n stroke-width: 0;\n }\n `\n ]\n\n @property({ type: String }) fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]\n @property({ type: String }) toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]\n @property({ type: String }) axisScale: TimeScale = 'week-day'\n @property({ type: Array }) resources: Resource[] = []\n @property({ type: Array }) tasks: Task[] = []\n\n @query('[chart-container]') container!: HTMLDivElement\n @query('svg[header]') svgHeader!: SVGSVGElement\n @query('svg[body]') svgBody!: SVGSVGElement\n\n private resourceChartController: ResourceChartController\n\n constructor() {\n super()\n this.resourceChartController = new ResourceChartController(this, this.fromDate, this.toDate, this.axisScale)\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {\n this.resourceChartController.updateRange(this.fromDate, this.toDate)\n }\n\n if (changedProperties.has('resources')) {\n this.resourceChartController.setResources(this.resources)\n this.updateChartHeight()\n }\n\n if (changedProperties.has('tasks')) {\n this.resourceChartController.setTasks(this.flattenTasks(this.tasks))\n this.updateChartHeight()\n }\n\n if (changedProperties.has('axisScale')) {\n this.resourceChartController.level = this.axisScale\n this.resourceChartController.updateTimeScale()\n }\n\n this.resourceChartController.drawAxes(this.svgHeader)\n this.resourceChartController.drawBody(this.svgBody)\n }\n\n updateChartHeight() {\n const resourceCount = this.resources.length\n const rowHeight = 30 // 리소스 하나당 할당된 높이 (픽셀)\n const minHeight = 200 // 최소 높이\n const chartHeight = Math.max(resourceCount * rowHeight, minHeight)\n\n this.svgBody.style.height = `${chartHeight}px`\n }\n\n render() {\n return html`\n <div\n chart-container\n @wheel=${(e: WheelEvent) => this.resourceChartController.handleWheelForBody(e, this.container)}\n @touchstart=${(e: TouchEvent) => this.resourceChartController.handleTouchStartForBody(e, this.container)}\n @touchmove=${(e: TouchEvent) => this.resourceChartController.handleTouchMoveForBody(e, this.container)}\n >\n <svg header></svg>\n <svg body></svg>\n </div>\n `\n }\n\n syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {\n this.resourceChartController.syncTimeScale(detail)\n this.requestUpdate()\n }\n\n getHorizontalOffset(): number {\n return this.container.scrollLeft\n }\n\n setHorizontalOffset(offset: number) {\n this.container.scrollLeft = offset\n }\n\n getVerticalOffset(): number {\n return this.container.scrollTop\n }\n\n setVerticalOffset(offset: number) {\n this.container.scrollTop = offset\n }\n\n flattenTasks(tasks: Task[], level: number = 0): Task[] {\n return tasks.flatMap(task =>\n task.collapsed ? [{ ...task, level }] : [{ ...task, level }, ...this.flattenTasks(task.children || [], level + 1)]\n )\n }\n}\n"]}
package/dist/src/ox-task-tooltip.d.ts CHANGED
@@ -6,7 +6,9 @@ export declare class OxTaskTooltip extends LitElement {
6
6
  endDate: string;
7
7
  progress: number;
8
8
  type: string;
9
+ visible: boolean;
10
+ titleElement: HTMLDivElement;
9
11
  show(x: number, y: number): void;
10
- hide(): void;
12
+ hide: () => void;
11
13
  render(): import("lit-html").TemplateResult<1>;
12
14
  }
package/dist/src/ox-task-tooltip.js CHANGED
@@ -1,18 +1,10 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { LitElement, html, css } from 'lit';
3
- import { customElement, property } from 'lit/decorators.js';
3
+ import { customElement, property, query } from 'lit/decorators.js';
4
4
  let OxTaskTooltip = class OxTaskTooltip extends LitElement {
5
- constructor() {
6
- super(...arguments);
7
- this.title = '';
8
- this.startDate = '';
9
- this.endDate = '';
10
- this.progress = 0;
11
- this.type = '';
12
- }
13
- static { this.styles = css `
5
+ static styles = css `
14
6
  :host {
15
- position: fixed; /* position: absolute로 변경 */
7
+ position: fixed;
16
8
  background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface-variant, #f9f9f9));
17
9
  border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));
18
10
  padding: var(--spacing-medium, 10px);
@@ -28,17 +20,18 @@ let OxTaskTooltip = class OxTaskTooltip extends LitElement {
28
20
  transition:
29
21
  visibility 0.1s,
30
22
  opacity 0.1s;
31
- opacity: 0; /* 초기에는 보이지 않음 */
23
+ opacity: 0;
32
24
  }
33
25
  :host([visible]) {
34
26
  visibility: visible;
35
- opacity: 1; /* 보일 때는 불투명 */
27
+ opacity: 1;
36
28
  }
37
29
  .title {
38
30
  font-weight: bold;
39
31
  font-size: 16px;
40
32
  margin-bottom: 8px;
41
- color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4)); /* 파란색 텍스트 */
33
+ color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4));
34
+ outline: none;
42
35
  }
43
36
  .detail {
44
37
  display: grid;
@@ -49,17 +42,34 @@ let OxTaskTooltip = class OxTaskTooltip extends LitElement {
49
42
  .label {
50
43
  font-weight: bold;
51
44
  color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
52
- text-align: right; /* 라벨을 우측 정렬 */
45
+ text-align: right;
53
46
  }
54
47
  .colon {
55
48
  text-align: center;
56
49
  color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
57
50
  }
58
51
  .value {
59
- text-align: left; /* 값을 좌측 정렬 */
52
+ text-align: left;
53
+ color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
54
+ }
55
+ .close-button {
56
+ position: absolute;
57
+ top: 4px;
58
+ right: 8px;
59
+ background: none;
60
+ border: none;
61
+ font-size: 16px;
62
+ cursor: pointer;
60
63
  color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
61
64
  }
62
- `; }
65
+ `;
66
+ title = '';
67
+ startDate = '';
68
+ endDate = '';
69
+ progress = 0;
70
+ type = '';
71
+ visible = false;
72
+ titleElement;
63
73
  show(x, y) {
64
74
  const tooltipWidth = this.offsetWidth;
65
75
  const tooltipHeight = this.offsetHeight;
@@ -94,13 +104,20 @@ let OxTaskTooltip = class OxTaskTooltip extends LitElement {
94
104
  }
95
105
  }
96
106
  this.setAttribute('visible', '');
107
+ setTimeout(() => {
108
+ this.titleElement.addEventListener('blur', this.hide);
109
+ this.titleElement.focus({ preventScroll: true });
110
+ }, 500);
97
111
  }
98
- hide() {
112
+ hide = () => {
113
+ this.titleElement.removeEventListener('blur', this.hide);
99
114
  this.removeAttribute('visible');
100
- }
115
+ };
101
116
  render() {
102
117
  return html `
103
- <div class="title">${this.title}</div>
118
+ <div class="close-button" @click=${this.hide} @touchstart=${this.hide}>✕</div>
119
+ <div class="title" tabindex="0">${this.title}</div>
120
+
104
121
  <div class="detail">
105
122
  <span class="label">Type</span><span class="colon">:</span><span class="value">${this.type}</span>
106
123
  <span class="label">Start Date</span><span class="colon">:</span><span class="value">${this.startDate}</span>
@@ -125,6 +142,12 @@ __decorate([
125
142
  __decorate([
126
143
  property({ type: String })
127
144
  ], OxTaskTooltip.prototype, "type", void 0);
145
+ __decorate([
146
+ property({ type: Boolean, attribute: true })
147
+ ], OxTaskTooltip.prototype, "visible", void 0);
148
+ __decorate([
149
+ query('.title')
150
+ ], OxTaskTooltip.prototype, "titleElement", void 0);
128
151
  OxTaskTooltip = __decorate([
129
152
  customElement('ox-task-tooltip')
130
153
  ], OxTaskTooltip);
package/dist/src/ox-task-tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-task-tooltip.js","sourceRoot":"","sources":["../../src/ox-task-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-task-tooltip')\nexport class OxTaskTooltip extends LitElement {\n static styles = css`\n :host {\n position: fixed; /* position: absolute로 변경 */\n background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface-variant, #f9f9f9));\n border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));\n padding: var(--spacing-medium, 10px);\n border-radius: var(--spacing-medium, 8px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n visibility: hidden;\n z-index: 10;\n max-width: 300px;\n font-family: Roboto;\n font-size: 14px;\n line-height: 1.6;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));\n transition:\n visibility 0.1s,\n opacity 0.1s;\n opacity: 0; /* 초기에는 보이지 않음 */\n }\n :host([visible]) {\n visibility: visible;\n opacity: 1; /* 보일 때는 불투명 */\n }\n .title {\n font-weight: bold;\n font-size: 16px;\n margin-bottom: 8px;\n color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4)); /* 파란색 텍스트 */\n }\n .detail {\n display: grid;\n grid-template-columns: auto auto 1fr;\n gap: 4px;\n align-items: center;\n }\n .label {\n font-weight: bold;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));\n text-align: right; /* 라벨을 우측 정렬 */\n }\n .colon {\n text-align: center;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));\n }\n .value {\n text-align: left; /* 값을 좌측 정렬 */\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));\n }\n `\n\n @property({ type: String }) title = ''\n @property({ type: String }) startDate = ''\n @property({ type: String }) endDate = ''\n @property({ type: Number }) progress = 0\n @property({ type: String }) type = ''\n\n show(x: number, y: number) {\n const tooltipWidth = this.offsetWidth\n const tooltipHeight = this.offsetHeight\n const offsetX = 10\n const offsetY = 10\n\n // 기본 위치 계산\n let left = x + offsetX\n let top = y + offsetY\n\n // 화면 경계 확인 및 조정\n const screenWidth = window.innerWidth\n const screenHeight = window.innerHeight\n\n if (left + tooltipWidth > screenWidth) {\n left = x - tooltipWidth - offsetX\n }\n if (top + tooltipHeight > screenHeight) {\n top = y - tooltipHeight - offsetY\n }\n\n // offsetParent 요소를 기준으로 위치 설정\n if (this.offsetParent) {\n const parentRect = this.offsetParent!.getBoundingClientRect()\n this.style.left = `${left - parentRect.left}px`\n this.style.top = `${top - parentRect.top}px`\n } else {\n this.style.left = `${left}px`\n this.style.top = `${top}px`\n\n const myRect = this.getBoundingClientRect()\n\n /* 실제 바운드와 설정한 left/top 이 일치하지 않는다면, 부모 어딘가에서 transform 되었다고 판단하고, 보정해줌 */\n if (myRect.left !== left || myRect.top !== top) {\n this.style.left = `${left + (left - myRect.left)}px`\n this.style.top = `${top + (top - myRect.top)}px`\n }\n }\n\n this.setAttribute('visible', '')\n }\n\n hide() {\n this.removeAttribute('visible')\n }\n\n render() {\n return html`\n <div class=\"title\">${this.title}</div>\n <div class=\"detail\">\n <span class=\"label\">Type</span><span class=\"colon\">:</span><span class=\"value\">${this.type}</span>\n <span class=\"label\">Start Date</span><span class=\"colon\">:</span><span class=\"value\">${this.startDate}</span>\n <span class=\"label\">End Date</span><span class=\"colon\">:</span><span class=\"value\">${this.endDate}</span>\n <span class=\"label\">Progress</span><span class=\"colon\">:</span><span class=\"value\">${this.progress}%</span>\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"ox-task-tooltip.js","sourceRoot":"","sources":["../../src/ox-task-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-task-tooltip')\nexport class OxTaskTooltip extends LitElement {\n static styles = css`\n :host {\n position: fixed;\n background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface-variant, #f9f9f9));\n border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));\n padding: var(--spacing-medium, 10px);\n border-radius: var(--spacing-medium, 8px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n visibility: hidden;\n z-index: 10;\n max-width: 300px;\n font-family: Roboto;\n font-size: 14px;\n line-height: 1.6;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));\n transition:\n visibility 0.1s,\n opacity 0.1s;\n opacity: 0;\n }\n :host([visible]) {\n visibility: visible;\n opacity: 1;\n }\n .title {\n font-weight: bold;\n font-size: 16px;\n margin-bottom: 8px;\n color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4));\n outline: none;\n }\n .detail {\n display: grid;\n grid-template-columns: auto auto 1fr;\n gap: 4px;\n align-items: center;\n }\n .label {\n font-weight: bold;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));\n text-align: right;\n }\n .colon {\n text-align: center;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));\n }\n .value {\n text-align: left;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));\n }\n .close-button {\n position: absolute;\n top: 4px;\n right: 8px;\n background: none;\n border: none;\n font-size: 16px;\n cursor: pointer;\n color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));\n }\n `\n\n @property({ type: String }) title = ''\n @property({ type: String }) startDate = ''\n @property({ type: String }) endDate = ''\n @property({ type: Number }) progress = 0\n @property({ type: String }) type = ''\n @property({ type: Boolean, attribute: true }) visible: boolean = false\n\n @query('.title') titleElement!: HTMLDivElement\n\n show(x: number, y: number) {\n const tooltipWidth = this.offsetWidth\n const tooltipHeight = this.offsetHeight\n const offsetX = 10\n const offsetY = 10\n\n // 기본 위치 계산\n let left = x + offsetX\n let top = y + offsetY\n\n // 화면 경계 확인 및 조정\n const screenWidth = window.innerWidth\n const screenHeight = window.innerHeight\n\n if (left + tooltipWidth > screenWidth) {\n left = x - tooltipWidth - offsetX\n }\n if (top + tooltipHeight > screenHeight) {\n top = y - tooltipHeight - offsetY\n }\n\n // offsetParent 요소를 기준으로 위치 설정\n if (this.offsetParent) {\n const parentRect = this.offsetParent!.getBoundingClientRect()\n this.style.left = `${left - parentRect.left}px`\n this.style.top = `${top - parentRect.top}px`\n } else {\n this.style.left = `${left}px`\n this.style.top = `${top}px`\n\n const myRect = this.getBoundingClientRect()\n\n /* 실제 바운드와 설정한 left/top 이 일치하지 않는다면, 부모 어딘가에서 transform 되었다고 판단하고, 보정해줌 */\n if (myRect.left !== left || myRect.top !== top) {\n this.style.left = `${left + (left - myRect.left)}px`\n this.style.top = `${top + (top - myRect.top)}px`\n }\n }\n\n this.setAttribute('visible', '')\n\n setTimeout(() => {\n this.titleElement.addEventListener('blur', this.hide)\n this.titleElement.focus({ preventScroll: true })\n }, 500)\n }\n\n hide = () => {\n this.titleElement.removeEventListener('blur', this.hide)\n this.removeAttribute('visible')\n }\n\n render() {\n return html`\n <div class=\"close-button\" @click=${this.hide} @touchstart=${this.hide}>✕</div>\n <div class=\"title\" tabindex=\"0\">${this.title}</div>\n\n <div class=\"detail\">\n <span class=\"label\">Type</span><span class=\"colon\">:</span><span class=\"value\">${this.type}</span>\n <span class=\"label\">Start Date</span><span class=\"colon\">:</span><span class=\"value\">${this.startDate}</span>\n <span class=\"label\">End Date</span><span class=\"colon\">:</span><span class=\"value\">${this.endDate}</span>\n <span class=\"label\">Progress</span><span class=\"colon\">:</span><span class=\"value\">${this.progress}%</span>\n </div>\n `\n }\n}\n"]}
package/dist/src/resource-chart-controller.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
2
2
  import * as d3 from 'd3';
3
- import { TimeScale, Task, Resource } from './types';
3
+ import { TimeScale, Task, Resource } from './types.js';
4
4
  export declare class ResourceChartController implements ReactiveController {
5
5
  private host;
6
6
  private fromTime;
package/dist/src/resource-chart-controller.js CHANGED
@@ -1,10 +1,20 @@
1
1
  import * as d3 from 'd3';
2
- import { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header';
2
+ import { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header.js';
3
3
  export class ResourceChartController {
4
+ host;
5
+ fromTime;
6
+ toTime;
7
+ totalDays;
8
+ _timeScale;
9
+ touchStartY;
10
+ touchStartX;
11
+ scrollStartX;
12
+ scrollStartY;
13
+ baseWidth = 30;
14
+ level;
15
+ resources = [];
16
+ tasks = [];
4
17
  constructor(host, fromDate, toDate, axisScale) {
5
- this.baseWidth = 30;
6
- this.resources = [];
7
- this.tasks = [];
8
18
  this.host = host;
9
19
  this.fromTime = new Date(fromDate);
10
20
  this.toTime = new Date(toDate);
package/dist/src/resource-chart-controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"resource-chart-controller.js","sourceRoot":"","sources":["../../src/resource-chart-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'\nimport * as d3 from 'd3'\nimport { TimeScale, Task, Resource } from './types'\nimport { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header'\n\nexport class ResourceChartController implements ReactiveController {\n private host: ReactiveControllerHost & LitElement\n private fromTime: Date\n private toTime: Date\n private totalDays: number\n private _timeScale?: d3.ScaleTime<number, number, never>\n\n private touchStartY?: number\n private touchStartX?: number\n private scrollStartX?: number\n private scrollStartY?: number\n\n public baseWidth: number = 30\n public level: TimeScale\n public resources: Resource[] = []\n public tasks: Task[] = []\n\n constructor(host: ReactiveControllerHost & LitElement, fromDate: string, toDate: string, axisScale: TimeScale) {\n this.host = host\n this.fromTime = new Date(fromDate)\n this.toTime = new Date(toDate)\n this.level = axisScale\n this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))\n this.host.addController(this)\n }\n\n hostConnected() {\n this.updateTimeScale()\n }\n\n get timeScale() {\n if (!this._timeScale) {\n this._timeScale = d3\n .scaleTime()\n .domain([d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1)])\n .range([0, this.getChartWidth()])\n }\n return this._timeScale\n }\n\n public syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {\n this.baseWidth = detail.baseWidth\n this.level = detail.level\n\n this.updateTimeScale()\n }\n\n updateRange(fromDate: string, toDate: string) {\n this.fromTime = new Date(fromDate)\n this.toTime = new Date(toDate)\n this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))\n this._timeScale = undefined\n this.host.requestUpdate()\n }\n\n setResources(resources: Resource[]) {\n this.resources = resources\n this.host.requestUpdate()\n }\n\n setTasks(tasks: Task[]) {\n this.tasks = tasks\n this.host.requestUpdate()\n }\n\n updateTimeScale() {\n this.timeScale.range([0, this.getChartWidth()])\n }\n\n getScale() {\n return getScale(this.level)\n }\n\n getChartWidth() {\n return getChartWidth(this.fromTime, this.toTime, this.baseWidth, this.level)\n }\n\n drawAxes(svgHeader: SVGElement) {\n drawTimeScaleHeader(svgHeader, this.timeScale, this.fromTime, this.toTime, this.baseWidth, this.level, false)\n }\n\n drawBody(svgBody: SVGElement) {\n const body = d3.select(svgBody)\n\n body.selectAll('*').remove()\n body.attr('width', this.getChartWidth())\n\n if (this.resources.length > 0) {\n const chartHeight = this.resources.length * 30\n\n const addGridLines = (ticks: Date[]) => {\n ticks.forEach(tick => {\n const startX = this.timeScale(tick)\n body\n .append('line')\n .attr('x1', startX)\n .attr('x2', startX)\n .attr('y1', 0)\n .attr('y2', chartHeight) // Ensure vertical lines extend to the bottom\n .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')\n .attr('stroke-width', 1)\n })\n }\n\n let ticks\n if (this.level === 'week-day') {\n ticks = d3.timeDay.every(1)!.range(d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1))\n } else if (this.level === 'quarter-week') {\n ticks = d3.timeWeek.every(1)!.range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))\n } else if (this.level === 'year-month') {\n ticks = d3.timeMonth.every(1)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))\n } else if (this.level === 'year-quarter') {\n ticks = d3.timeMonth.every(3)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))\n }\n\n addGridLines(ticks!)\n\n this.renderResourceAllocations(body, ticks!, chartHeight)\n }\n }\n\n renderResourceAllocations(\n body: d3.Selection<SVGElement, unknown, null, undefined>,\n ticks: Date[],\n chartHeight: number\n ) {\n const resourceAllocations = this.calculateResourceAllocations(ticks)\n\n this.resources.forEach((resource, index) => {\n const y = index * 30 + 15 // Center the text vertically in the row\n ticks.forEach(tick => {\n const tickEnd = this.getTickEnd(tick)\n const dateKey = this.formatDateKey(tick, tickEnd)\n const allocation = resourceAllocations[resource.type][dateKey]\n if (allocation > 0) {\n const startX = this.timeScale(tick)\n const tickInterval = this.timeScale(tickEnd) - startX\n\n body\n .append('text')\n .attr('x', startX + tickInterval / 2)\n .attr('y', y)\n .attr('text-anchor', 'middle')\n .attr('alignment-baseline', 'middle')\n .attr('dominant-baseline', 'middle')\n .attr('stroke', 'var(--ox-gantt-color-text, var(--md-sys-color-on-primary-container))')\n .text(allocation)\n .style('font-size', '12px')\n }\n })\n })\n\n // Draw horizontal grid lines for each resource row\n for (let i = 0; i <= this.resources.length; i++) {\n body\n .append('line')\n .attr('x1', 0)\n .attr('x2', this.getChartWidth())\n .attr('y1', i * 30)\n .attr('y2', i * 30)\n .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')\n .attr('stroke-width', 1)\n }\n }\n\n calculateResourceAllocations(ticks: Date[]): { [key: string]: { [key: string]: number } } {\n const resourceAllocations: { [key: string]: { [key: string]: number } } = {}\n\n this.resources.forEach(resource => {\n resourceAllocations[resource.type] = {}\n ticks.forEach(tick => {\n const tickEnd = this.getTickEnd(tick)\n const dateKey = this.formatDateKey(tick, tickEnd)\n resourceAllocations[resource.type][dateKey] = 0\n })\n })\n\n this.tasks.forEach(task => {\n const startDate = new Date(task.startDate)\n const endDate = new Date(task.endDate)\n let currentDate = startDate\n\n while (currentDate <= endDate) {\n const tick = ticks.find(t => currentDate >= t && currentDate < this.getTickEnd(t))\n if (tick) {\n const tickEnd = this.getTickEnd(tick)\n const dateKey = this.formatDateKey(tick, tickEnd)\n\n ;(task.resources || []).forEach(resource => {\n if (resourceAllocations[resource.type][dateKey] !== undefined) {\n resourceAllocations[resource.type][dateKey] += resource.allocated\n }\n })\n }\n\n currentDate.setDate(currentDate.getDate() + 1)\n }\n })\n\n return resourceAllocations\n }\n\n getTickEnd(tick: Date): Date {\n if (this.level === 'week-day') {\n return d3.timeDay.offset(tick, 1)\n } else if (this.level === 'quarter-week') {\n return d3.timeWeek.offset(tick, 1)\n } else if (this.level === 'year-month') {\n return d3.timeMonth.offset(tick, 1)\n } else if (this.level === 'year-quarter') {\n return d3.timeMonth.offset(tick, 3)\n }\n return d3.timeDay.offset(tick, 1)\n }\n\n formatDateKey(start: Date, end: Date): string {\n return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`\n }\n\n handleWheelForBody(event: WheelEvent, container: HTMLDivElement) {\n event.preventDefault()\n event.stopPropagation()\n\n const deltaModeFactor =\n event.deltaMode === WheelEvent.DOM_DELTA_LINE\n ? 16\n : event.deltaMode === WheelEvent.DOM_DELTA_PAGE\n ? container.clientHeight\n : 1\n const deltaX = event.deltaX * deltaModeFactor\n const deltaY = event.deltaY * deltaModeFactor\n\n container.scrollLeft += deltaX\n container.scrollTop += deltaY\n\n const customEvent = new CustomEvent('scroll', {\n detail: {\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop\n },\n bubbles: true,\n composed: true\n })\n\n this.host.dispatchEvent(customEvent)\n }\n\n handleTouchStartForBody(event: TouchEvent, container: HTMLDivElement) {\n event.stopPropagation()\n\n this.touchStartX = event.touches[0].clientX\n this.touchStartY = event.touches[0].clientY\n\n this.scrollStartX = container.scrollLeft\n this.scrollStartY = container.scrollTop\n }\n\n handleTouchMoveForBody(event: TouchEvent, container: HTMLDivElement) {\n const touchCurrentX = event.touches[0].clientX\n const touchCurrentY = event.touches[0].clientY\n\n const deltaX = this.touchStartX! - touchCurrentX\n const deltaY = this.touchStartY! - touchCurrentY\n\n container.scrollLeft = this.scrollStartX! + deltaX\n container.scrollTop = this.scrollStartY! + deltaY\n\n const customEvent = new CustomEvent('scroll', {\n detail: {\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop\n },\n bubbles: true,\n composed: true\n })\n\n this.host.dispatchEvent(customEvent)\n }\n}\n"]}
1
+ {"version":3,"file":"resource-chart-controller.js","sourceRoot":"","sources":["../../src/resource-chart-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'\nimport * as d3 from 'd3'\nimport { TimeScale, Task, Resource } from './types.js'\nimport { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header.js'\n\nexport class ResourceChartController implements ReactiveController {\n private host: ReactiveControllerHost & LitElement\n private fromTime: Date\n private toTime: Date\n private totalDays: number\n private _timeScale?: d3.ScaleTime<number, number, never>\n\n private touchStartY?: number\n private touchStartX?: number\n private scrollStartX?: number\n private scrollStartY?: number\n\n public baseWidth: number = 30\n public level: TimeScale\n public resources: Resource[] = []\n public tasks: Task[] = []\n\n constructor(host: ReactiveControllerHost & LitElement, fromDate: string, toDate: string, axisScale: TimeScale) {\n this.host = host\n this.fromTime = new Date(fromDate)\n this.toTime = new Date(toDate)\n this.level = axisScale\n this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))\n this.host.addController(this)\n }\n\n hostConnected() {\n this.updateTimeScale()\n }\n\n get timeScale() {\n if (!this._timeScale) {\n this._timeScale = d3\n .scaleTime()\n .domain([d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1)])\n .range([0, this.getChartWidth()])\n }\n return this._timeScale\n }\n\n public syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {\n this.baseWidth = detail.baseWidth\n this.level = detail.level\n\n this.updateTimeScale()\n }\n\n updateRange(fromDate: string, toDate: string) {\n this.fromTime = new Date(fromDate)\n this.toTime = new Date(toDate)\n this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))\n this._timeScale = undefined\n this.host.requestUpdate()\n }\n\n setResources(resources: Resource[]) {\n this.resources = resources\n this.host.requestUpdate()\n }\n\n setTasks(tasks: Task[]) {\n this.tasks = tasks\n this.host.requestUpdate()\n }\n\n updateTimeScale() {\n this.timeScale.range([0, this.getChartWidth()])\n }\n\n getScale() {\n return getScale(this.level)\n }\n\n getChartWidth() {\n return getChartWidth(this.fromTime, this.toTime, this.baseWidth, this.level)\n }\n\n drawAxes(svgHeader: SVGElement) {\n drawTimeScaleHeader(svgHeader, this.timeScale, this.fromTime, this.toTime, this.baseWidth, this.level, false)\n }\n\n drawBody(svgBody: SVGElement) {\n const body = d3.select(svgBody)\n\n body.selectAll('*').remove()\n body.attr('width', this.getChartWidth())\n\n if (this.resources.length > 0) {\n const chartHeight = this.resources.length * 30\n\n const addGridLines = (ticks: Date[]) => {\n ticks.forEach(tick => {\n const startX = this.timeScale(tick)\n body\n .append('line')\n .attr('x1', startX)\n .attr('x2', startX)\n .attr('y1', 0)\n .attr('y2', chartHeight) // Ensure vertical lines extend to the bottom\n .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')\n .attr('stroke-width', 1)\n })\n }\n\n let ticks\n if (this.level === 'week-day') {\n ticks = d3.timeDay.every(1)!.range(d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1))\n } else if (this.level === 'quarter-week') {\n ticks = d3.timeWeek.every(1)!.range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))\n } else if (this.level === 'year-month') {\n ticks = d3.timeMonth.every(1)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))\n } else if (this.level === 'year-quarter') {\n ticks = d3.timeMonth.every(3)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))\n }\n\n addGridLines(ticks!)\n\n this.renderResourceAllocations(body, ticks!, chartHeight)\n }\n }\n\n renderResourceAllocations(\n body: d3.Selection<SVGElement, unknown, null, undefined>,\n ticks: Date[],\n chartHeight: number\n ) {\n const resourceAllocations = this.calculateResourceAllocations(ticks)\n\n this.resources.forEach((resource, index) => {\n const y = index * 30 + 15 // Center the text vertically in the row\n ticks.forEach(tick => {\n const tickEnd = this.getTickEnd(tick)\n const dateKey = this.formatDateKey(tick, tickEnd)\n const allocation = resourceAllocations[resource.type][dateKey]\n if (allocation > 0) {\n const startX = this.timeScale(tick)\n const tickInterval = this.timeScale(tickEnd) - startX\n\n body\n .append('text')\n .attr('x', startX + tickInterval / 2)\n .attr('y', y)\n .attr('text-anchor', 'middle')\n .attr('alignment-baseline', 'middle')\n .attr('dominant-baseline', 'middle')\n .attr('stroke', 'var(--ox-gantt-color-text, var(--md-sys-color-on-primary-container))')\n .text(allocation)\n .style('font-size', '12px')\n }\n })\n })\n\n // Draw horizontal grid lines for each resource row\n for (let i = 0; i <= this.resources.length; i++) {\n body\n .append('line')\n .attr('x1', 0)\n .attr('x2', this.getChartWidth())\n .attr('y1', i * 30)\n .attr('y2', i * 30)\n .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')\n .attr('stroke-width', 1)\n }\n }\n\n calculateResourceAllocations(ticks: Date[]): { [key: string]: { [key: string]: number } } {\n const resourceAllocations: { [key: string]: { [key: string]: number } } = {}\n\n this.resources.forEach(resource => {\n resourceAllocations[resource.type] = {}\n ticks.forEach(tick => {\n const tickEnd = this.getTickEnd(tick)\n const dateKey = this.formatDateKey(tick, tickEnd)\n resourceAllocations[resource.type][dateKey] = 0\n })\n })\n\n this.tasks.forEach(task => {\n const startDate = new Date(task.startDate)\n const endDate = new Date(task.endDate)\n let currentDate = startDate\n\n while (currentDate <= endDate) {\n const tick = ticks.find(t => currentDate >= t && currentDate < this.getTickEnd(t))\n if (tick) {\n const tickEnd = this.getTickEnd(tick)\n const dateKey = this.formatDateKey(tick, tickEnd)\n\n ;(task.resources || []).forEach(resource => {\n if (resourceAllocations[resource.type][dateKey] !== undefined) {\n resourceAllocations[resource.type][dateKey] += resource.allocated\n }\n })\n }\n\n currentDate.setDate(currentDate.getDate() + 1)\n }\n })\n\n return resourceAllocations\n }\n\n getTickEnd(tick: Date): Date {\n if (this.level === 'week-day') {\n return d3.timeDay.offset(tick, 1)\n } else if (this.level === 'quarter-week') {\n return d3.timeWeek.offset(tick, 1)\n } else if (this.level === 'year-month') {\n return d3.timeMonth.offset(tick, 1)\n } else if (this.level === 'year-quarter') {\n return d3.timeMonth.offset(tick, 3)\n }\n return d3.timeDay.offset(tick, 1)\n }\n\n formatDateKey(start: Date, end: Date): string {\n return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`\n }\n\n handleWheelForBody(event: WheelEvent, container: HTMLDivElement) {\n event.preventDefault()\n event.stopPropagation()\n\n const deltaModeFactor =\n event.deltaMode === WheelEvent.DOM_DELTA_LINE\n ? 16\n : event.deltaMode === WheelEvent.DOM_DELTA_PAGE\n ? container.clientHeight\n : 1\n const deltaX = event.deltaX * deltaModeFactor\n const deltaY = event.deltaY * deltaModeFactor\n\n container.scrollLeft += deltaX\n container.scrollTop += deltaY\n\n const customEvent = new CustomEvent('scroll', {\n detail: {\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop\n },\n bubbles: true,\n composed: true\n })\n\n this.host.dispatchEvent(customEvent)\n }\n\n handleTouchStartForBody(event: TouchEvent, container: HTMLDivElement) {\n event.stopPropagation()\n\n this.touchStartX = event.touches[0].clientX\n this.touchStartY = event.touches[0].clientY\n\n this.scrollStartX = container.scrollLeft\n this.scrollStartY = container.scrollTop\n }\n\n handleTouchMoveForBody(event: TouchEvent, container: HTMLDivElement) {\n const touchCurrentX = event.touches[0].clientX\n const touchCurrentY = event.touches[0].clientY\n\n const deltaX = this.touchStartX! - touchCurrentX\n const deltaY = this.touchStartY! - touchCurrentY\n\n container.scrollLeft = this.scrollStartX! + deltaX\n container.scrollTop = this.scrollStartY! + deltaY\n\n const customEvent = new CustomEvent('scroll', {\n detail: {\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop\n },\n bubbles: true,\n composed: true\n })\n\n this.host.dispatchEvent(customEvent)\n }\n}\n"]}
package/dist/src/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface Task {
10
10
  dependsOn?: string;
11
11
  duration: number;
12
12
  tags?: TaskTag[];
13
+ style?: string;
13
14
  children?: Task[];
14
15
  resources?: Resource[];
15
16
  collapsed?: boolean;
package/dist/src/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TaskTag = 'done' | 'active' | 'critical' | 'milestone'\nexport type TaskType = 'group' | 'task' | 'milestone' | 'phase'\n\nexport interface Task {\n id: string\n title: string\n type: TaskType\n startDate: Date | string\n endDate: Date | string\n progress?: number\n dependsOn?: string\n duration: number\n tags?: TaskTag[]\n children?: Task[]\n resources?: Resource[]\n collapsed?: boolean\n}\n\nexport interface ColumnConfig {\n name: string\n label: string\n visible: boolean\n width: number\n order: number\n}\n\nexport type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'\n\nexport interface Resource {\n type: string\n allocated: number\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TaskTag = 'done' | 'active' | 'critical' | 'milestone'\nexport type TaskType = 'group' | 'task' | 'milestone' | 'phase'\n\nexport interface Task {\n id: string\n title: string\n type: TaskType\n startDate: Date | string\n endDate: Date | string\n progress?: number\n dependsOn?: string\n duration: number\n tags?: TaskTag[]\n style?: string\n children?: Task[]\n resources?: Resource[]\n collapsed?: boolean\n}\n\nexport interface ColumnConfig {\n name: string\n label: string\n visible: boolean\n width: number\n order: number\n}\n\nexport type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'\n\nexport interface Resource {\n type: string\n allocated: number\n}\n"]}
package/dist/src/utils.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { TimeScale } from './types';
1
+ import { TimeScale } from './types.js';
2
2
  export declare function levelUp(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale;
3
3
  export declare function levelDown(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale;
package/dist/src/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAgB,CAAC,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,CAAC,CAAA;AAEtF,MAAM,UAAU,OAAO,CAAC,KAAkE;IACxF,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IAClE,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAAkE;IAC1F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IACtD,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;AACxB,CAAC","sourcesContent":["import { TimeScale } from './types'\n\nconst levels: TimeScale[] = ['week-day', 'quarter-week', 'year-month', 'year-quarter']\n\nexport function levelUp(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale {\n const current = Math.min(levels.length, levels.indexOf(level) + 1)\n return levels[current]\n}\n\nexport function levelDown(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale {\n const current = Math.max(0, levels.indexOf(level) - 1)\n return levels[current]\n}\n"]}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAgB,CAAC,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,CAAC,CAAA;AAEtF,MAAM,UAAU,OAAO,CAAC,KAAkE;IACxF,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IAClE,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAAkE;IAC1F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IACtD,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;AACxB,CAAC","sourcesContent":["import { TimeScale } from './types.js'\n\nconst levels: TimeScale[] = ['week-day', 'quarter-week', 'year-month', 'year-quarter']\n\nexport function levelUp(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale {\n const current = Math.min(levels.length, levels.indexOf(level) + 1)\n return levels[current]\n}\n\nexport function levelDown(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale {\n const current = Math.max(0, levels.indexOf(level) - 1)\n return levels[current]\n}\n"]}
package/dist/stories/ox-gantt-chart.stories.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { html } from 'lit';
2
2
  import { CommonHeaderStyles } from '@operato/styles';
3
3
  import '../src/ox-gantt-chart.js';
4
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
4
+ import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
5
5
  export default {
6
6
  title: 'ox-gantt-chart',
7
7
  component: 'ox-gantt-chart',
package/dist/stories/ox-gantt-chart.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-gantt-chart.stories.js","sourceRoot":"","sources":["../../stories/ox-gantt-chart.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,CAAC,EAAE;QACrG,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC/B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACxC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EACjC,SAAS,GAAG,UAAU,EACtB,QAAQ,GAAG,EAAE,EACb,MAAM,GAAG,EAAE,EACX,eAAe,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBd,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+Bf,SAAS;gBACV,QAAQ;cACV,MAAM;yBACK,eAAe;;CAEvC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport '../src/ox-gantt-chart.js'\n\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-gantt-chart',\n component: 'ox-gantt-chart',\n argTypes: {\n axisScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },\n fromDate: { control: 'string' },\n toDate: { control: 'string' },\n extendGridLines: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n axisScale: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'\n fromDate: string\n toDate: string\n extendGridLines: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n axisScale = 'week-day',\n fromDate = '',\n toDate = '',\n extendGridLines\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n body {\n width: 100%;\n height: 800px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n ox-gantt {\n width: 90%;\n height: 500px;\n box-sizing: border-box;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <style>\n ox-gantt-chart {\n height: 500px;\n border: 1px solid black;\n }\n </style>\n\n <ox-gantt-chart\n .axisScale=${axisScale}\n .fromDate=${fromDate}\n .toDate=${toDate}\n ?extend-grid-lines=${extendGridLines}\n ></ox-gantt-chart>\n`\n\nexport const YearMonth = Template.bind({})\nYearMonth.args = {\n axisScale: 'year-quarter',\n fromDate: '2020-01-01',\n toDate: '2025-12-31'\n}\n\nYearMonth.args = {\n axisScale: 'year-month',\n fromDate: '2022-01-01',\n toDate: '2024-12-31'\n}\n\nexport const MonthWeek = Template.bind({})\nMonthWeek.args = {\n axisScale: 'quarter-week',\n fromDate: '2022-01-01',\n toDate: '2023-03-31'\n}\n\nexport const WeekDay = Template.bind({})\nWeekDay.args = {\n axisScale: 'week-day',\n fromDate: '2022-01-01',\n toDate: '2022-11-15'\n}\n"]}
1
+ {"version":3,"file":"ox-gantt-chart.stories.js","sourceRoot":"","sources":["../../stories/ox-gantt-chart.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,CAAC,EAAE;QACrG,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC/B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACxC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EACjC,SAAS,GAAG,UAAU,EACtB,QAAQ,GAAG,EAAE,EACb,MAAM,GAAG,EAAE,EACX,eAAe,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBd,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+Bf,SAAS;gBACV,QAAQ;cACV,MAAM;yBACK,eAAe;;CAEvC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,YAAY;CACrB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport '../src/ox-gantt-chart.js'\n\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-gantt-chart',\n component: 'ox-gantt-chart',\n argTypes: {\n axisScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },\n fromDate: { control: 'string' },\n toDate: { control: 'string' },\n extendGridLines: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n axisScale: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'\n fromDate: string\n toDate: string\n extendGridLines: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n axisScale = 'week-day',\n fromDate = '',\n toDate = '',\n extendGridLines\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n body {\n width: 100%;\n height: 800px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n ox-gantt {\n width: 90%;\n height: 500px;\n box-sizing: border-box;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <style>\n ox-gantt-chart {\n height: 500px;\n border: 1px solid black;\n }\n </style>\n\n <ox-gantt-chart\n .axisScale=${axisScale}\n .fromDate=${fromDate}\n .toDate=${toDate}\n ?extend-grid-lines=${extendGridLines}\n ></ox-gantt-chart>\n`\n\nexport const YearMonth = Template.bind({})\nYearMonth.args = {\n axisScale: 'year-quarter',\n fromDate: '2020-01-01',\n toDate: '2025-12-31'\n}\n\nYearMonth.args = {\n axisScale: 'year-month',\n fromDate: '2022-01-01',\n toDate: '2024-12-31'\n}\n\nexport const MonthWeek = Template.bind({})\nMonthWeek.args = {\n axisScale: 'quarter-week',\n fromDate: '2022-01-01',\n toDate: '2023-03-31'\n}\n\nexport const WeekDay = Template.bind({})\nWeekDay.args = {\n axisScale: 'week-day',\n fromDate: '2022-01-01',\n toDate: '2022-11-15'\n}\n"]}