@operato/gantt 2.0.0-beta.15 → 2.0.0-beta.18

package/stories/ox-gantt.stories.ts

@@ -4,17 +4,18 @@ import '../src/ox-gantt.js'
 import { html, TemplateResult } from 'lit'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
-import { Task, Section } from '../src/types.js'
+import { Task, Section, TimeScale } from '../src/types.js'
 
 export default {
   title: 'ox-gantt',
   component: 'ox-gantt',
   argTypes: {
-    tasks: { control: 'object' },
     fromDate: { control: 'date' },
     toDate: { control: 'date' },
+    timeScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },
     extendGridLines: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    theme: { control: 'select', options: ['light', 'dark'] },
+    tasks: { control: 'object' }
   }
 }
 
@@ -29,10 +30,18 @@ interface ArgTypes {
   fromDate: number | string
   toDate: number | string
   extendGridLines: boolean
+  timeScale: TimeScale
   theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ theme = 'light', tasks, fromDate, toDate, extendGridLines }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  theme = 'light',
+  tasks,
+  fromDate,
+  toDate,
+  extendGridLines,
+  timeScale = 'week-day'
+}: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -88,6 +97,7 @@ const Template: Story<ArgTypes> = ({ theme = 'light', tasks, fromDate, toDate, e
   <ox-gantt
     from-date=${new Date(fromDate).toISOString().split('T')[0]}
     to-date=${new Date(toDate).toISOString().split('T')[0]}
+    .timeScale=${timeScale}
     .tasks=${tasks}
     @date-range-selected=${(e: CustomEvent) => {
       console.log('date-range-selected', e.detail)
@@ -121,9 +131,9 @@ Regular.args = {
       id: '1',
       title: 'Design',
       type: 'task',
-      section: developmentSection,
-      startDate: new Date('2023-01-01'),
-      endDate: new Date('2023-01-05'),
+      // section: developmentSection,
+      startDate: '2023-01-01',
+      endDate: '2023-01-05',
       progress: 60,
       dependsOn: '',
       length: '5d',
@@ -134,9 +144,9 @@ Regular.args = {
       id: '2',
       title: 'Development',
       type: 'milestone',
-      section: developmentSection,
-      startDate: new Date('2023-01-06'),
-      endDate: new Date('2023-01-06'),
+      // section: developmentSection,
+      startDate: '2023-01-06',
+      endDate: '2023-01-06',
       progress: 30,
       dependsOn: '1',
       length: '1d',
@@ -147,9 +157,9 @@ Regular.args = {
       id: '3',
       title: 'Coding',
       type: 'phase',
-      section: developmentSection,
-      startDate: new Date('2023-01-07'),
-      endDate: new Date('2023-01-15'),
+      // section: developmentSection,
+      startDate: '2023-01-07',
+      endDate: '2023-01-15',
       progress: 10,
       dependsOn: '2',
       length: '9d',
@@ -159,9 +169,9 @@ Regular.args = {
           id: '3-1',
           title: 'Coding-A',
           type: 'task',
-          section: developmentSection,
-          startDate: new Date('2023-01-07'),
-          endDate: new Date('2023-01-10'),
+          // section: developmentSection,
+          startDate: '2023-01-07',
+          endDate: '2023-01-10',
           progress: 60,
           dependsOn: '',
           length: '4d',
@@ -172,9 +182,9 @@ Regular.args = {
           id: '3-2',
           title: 'Coding-B',
           type: 'task',
-          section: developmentSection,
-          startDate: new Date('2023-01-11'),
-          endDate: new Date('2023-01-15'),
+          // section: developmentSection,
+          startDate: '2023-01-11',
+          endDate: '2023-01-15',
           dependsOn: '3-1',
           length: '5d',
           tags: ['active'],
@@ -186,9 +196,9 @@ Regular.args = {
       id: '4',
       title: 'Test',
       type: 'milestone',
-      section: developmentSection,
-      startDate: new Date('2023-01-07'),
-      endDate: new Date('2023-01-10'),
+      // section: developmentSection,
+      startDate: '2023-01-07',
+      endDate: '2023-01-10',
       progress: 100,
       dependsOn: '1',
       length: '1d',
@@ -199,9 +209,9 @@ Regular.args = {
       id: '5',
       title: 'Deploy',
       type: 'milestone',
-      section: developmentSection,
-      startDate: new Date('2023-01-15'),
-      endDate: new Date('2023-01-21'),
+      // section: developmentSection,
+      startDate: '2023-01-15',
+      endDate: '2023-01-21',
       dependsOn: '4',
       length: '1d',
       tags: ['milestone'],
@@ -211,9 +221,9 @@ Regular.args = {
       id: '6',
       title: 'Publishing',
       type: 'milestone',
-      section: developmentSection,
-      startDate: new Date('2023-01-11'),
-      endDate: new Date('2023-01-15'),
+      // section: developmentSection,
+      startDate: '2023-01-11',
+      endDate: '2023-01-15',
       dependsOn: '5',
       length: '1d',
       tags: ['milestone'],
@@ -223,9 +233,9 @@ Regular.args = {
       id: '7',
       title: 'Provisioning',
       type: 'milestone',
-      section: developmentSection,
-      startDate: new Date('2023-01-12'),
-      endDate: new Date('2023-01-15'),
+      // section: developmentSection,
+      startDate: '2023-01-12',
+      endDate: '2023-01-15',
       dependsOn: '6',
       length: '1d',
       tags: ['milestone'],
@@ -235,9 +245,9 @@ Regular.args = {
       id: '8',
       title: 'Alpha Test',
       type: 'milestone',
-      section: testSection,
-      startDate: new Date('2023-01-15'),
-      endDate: new Date('2023-01-17'),
+      // section: testSection,
+      startDate: '2023-01-15',
+      endDate: '2023-01-17',
       dependsOn: '7',
       length: '1d',
       tags: ['critical'],
@@ -247,9 +257,9 @@ Regular.args = {
       id: '9',
       title: 'Beta Task',
       type: 'milestone',
-      section: testSection,
-      startDate: new Date('2023-01-15'),
-      endDate: new Date('2023-01-18'),
+      // section: testSection,
+      startDate: '2023-01-15',
+      endDate: '2023-01-18',
       dependsOn: '8',
       length: '1d',
       tags: ['active'],
@@ -259,9 +269,9 @@ Regular.args = {
       id: '10',
       title: 'Gamma Test',
       type: 'milestone',
-      section: testSection,
-      startDate: new Date('2023-01-18'),
-      endDate: new Date('2023-01-19'),
+      // section: testSection,
+      startDate: '2023-01-18',
+      endDate: '2023-01-19',
       dependsOn: '9',
       length: '1d',
       tags: ['critical'],
@@ -271,9 +281,9 @@ Regular.args = {
       id: '11',
       title: 'Zeta Test',
       type: 'milestone',
-      section: testSection,
-      startDate: new Date('2023-01-18'),
-      endDate: new Date('2023-01-22'),
+      // section: testSection,
+      startDate: '2023-01-18',
+      endDate: '2023-01-22',
       dependsOn: '9',
       length: '1d',
       tags: ['milestone'],
@@ -283,9 +293,9 @@ Regular.args = {
       id: '12',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-01-18'),
-      endDate: new Date('2023-01-23'),
+      // section: releaseSection,
+      startDate: '2023-01-18',
+      endDate: '2023-01-23',
       dependsOn: '9',
       length: '1d',
       tags: ['milestone'],
@@ -295,9 +305,9 @@ Regular.args = {
       id: '13',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-01-22'),
-      endDate: new Date('2023-01-27'),
+      // section: releaseSection,
+      startDate: '2023-01-22',
+      endDate: '2023-01-27',
       dependsOn: '12',
       length: '1d',
       tags: ['done'],
@@ -307,9 +317,9 @@ Regular.args = {
       id: '14',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-01-27'),
-      endDate: new Date('2023-01-30'),
+      // section: releaseSection,
+      startDate: '2023-01-27',
+      endDate: '2023-01-30',
       dependsOn: '13',
       length: '1d',
       tags: ['milestone'],
@@ -319,9 +329,9 @@ Regular.args = {
       id: '15',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-01-30'),
-      endDate: new Date('2023-01-31'),
+      // section: releaseSection,
+      startDate: '2023-01-30',
+      endDate: '2023-01-31',
       dependsOn: '14',
       length: '1d',
       tags: ['milestone'],
@@ -331,9 +341,9 @@ Regular.args = {
       id: '16',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-01-31'),
-      endDate: new Date('2023-02-05'),
+      // section: releaseSection,
+      startDate: '2023-01-31',
+      endDate: '2023-02-05',
       dependsOn: '15',
       length: '1d',
       tags: ['active'],
@@ -343,9 +353,9 @@ Regular.args = {
       id: '17',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-02-06'),
-      endDate: new Date('2023-02-07'),
+      // section: releaseSection,
+      startDate: '2023-02-06',
+      endDate: '2023-02-07',
       dependsOn: '16',
       length: '1d',
       tags: ['milestone'],
@@ -355,9 +365,9 @@ Regular.args = {
       id: '18',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-02-08'),
-      endDate: new Date('2023-02-09'),
+      // section: releaseSection,
+      startDate: '2023-02-08',
+      endDate: '2023-02-09',
       dependsOn: '17',
       length: '1d',
       tags: ['critical'],
@@ -367,9 +377,9 @@ Regular.args = {
       id: '19',
       title: 'Release',
       type: 'milestone',
-      section: releaseSection,
-      startDate: new Date('2023-02-10'),
-      endDate: new Date('2023-02-25'),
+      // section: releaseSection,
+      startDate: '2023-02-10',
+      endDate: '2023-02-25',
       dependsOn: '18',
       length: '1d',
       tags: ['milestone'],