mirrors/vue-ganttastic
2
0
Fork 0
mirror of https://github.com/tenrok/vue-ganttastic.git synced 2026-06-25 03:20:32 +03:00
Code Activity

feat: added property "bar-config-key"

Browse Source
This commit is contained in:
Сергей Солодягин
2021-10-27 14:48:18 +03:00
parent 013eeeee3c
commit e1d411e7cd
5 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+23 -22
View File
@@ -117,28 +117,29 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
## Props ## Props
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ------------------------ | --------------- | --------- | ------------------------------------------------------------------- | | ------------------------ | --------------- | ---------------- | ------------------------------------------------------------------- |
| bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime | | bar-config-key | `String` | `ganttBarConfig` | |
| bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime | | bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime |
| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | | bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime |
| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | | chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| grid | `Boolean` | `false` | hide/show grid | | chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| grid-size | `Number` | `30` | horizontal cell width in pixels | | grid | `Boolean` | `false` | hide/show grid |
| height | `String` | - | the total height of the entire ganttastic component | | grid-size | `Number` | `30` | horizontal cell width in pixels |
| hide-timeaxis | `Boolean` | `false` | hide timeaxis | | height | `String` | - | the total height of the entire Vue-Ganttastic component |
| highlighted-days | `Array<String>` | `[]` | format of day `YYYY-MM-DD` | | hide-timeaxis | `Boolean` | `false` | hide timeaxis |
| highlighted-hours | `Array<Number>` | `[]` | | | highlighted-days | `Array<String>` | `[]` | format of day `YYYY-MM-DD` |
| is-magnetic | `Boolean` | - | magnetic effect | | highlighted-hours | `Array<Number>` | `[]` | |
| locale | `String` | `en` | localization | | is-magnetic | `Boolean` | - | magnetic effect |
| may-add | `Boolean` | `true` | add new bar on double click | | locale | `String` | `en` | localization |
| precision | `String` | `month` | day, month | | may-add | `Boolean` | `true` | add new bar on double click |
| push-on-overlap | `Boolean` | - | | | precision | `String` | `month` | day, month |
| row-height | `Number` | `40` | | | push-on-overlap | `Boolean` | - | |
| row-label-width | `Number` | `200` | label width in pixels | | row-height | `Number` | `40` | |
| snap-back-on-overlap | `Boolean` | - | | | row-label-width | `Number` | `200` | label width in pixels |
| theme | `String` | `default` | | | snap-back-on-overlap | `Boolean` | - | |
| width | `String` | `100%` | the total width of the entire ganttastic component | | theme | `String` | `default` | |
| width | `String` | `100%` | the total width of the entire Vue-Ganttastic component |
## Contributing ## Contributing
lib/components/GGanttBar.vue
+13 -8
View File
@@ -102,6 +102,10 @@ export default {
: 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY HH:mm'
}, },
barConfigKey() {
return this.chartProps.barConfigKey
},
barStartKey() { barStartKey() {
return this.chartProps.barStartKey return this.chartProps.barStartKey
}, },
@@ -154,16 +158,16 @@ export default {
}, },
barConfig() { barConfig() {
if (this.bar.ganttBarConfig) { if (this.bar[this.barConfigKey]) {
return { return {
...this.bar.ganttBarConfig, ...this.bar[this.barConfigKey],
background: this.bar.ganttBarConfig.isShadow background: this.bar[this.barConfigKey].isShadow
? 'grey' ? 'grey'
: this.bar.ganttBarConfig.background || : this.bar[this.barConfigKey].background ||
this.bar.ganttBarConfig.backgroundColor, this.bar[this.barConfigKey].backgroundColor,
opacity: this.bar.ganttBarConfig.isShadow opacity: this.bar[this.barConfigKey].isShadow
? '0.3' ? '0.3'
: this.bar.ganttBarConfig.opacity : this.bar[this.barConfigKey].opacity
} }
} }
return {} return {}
@@ -513,7 +517,8 @@ export default {
let overlapBar = this.allBarsInRow.find(otherBar => { let overlapBar = this.allBarsInRow.find(otherBar => {
if ( if (
otherBar === bar || otherBar === bar ||
otherBar.ganttBarConfig.pushOnOverlap === false (otherBar[this.barConfigKey] &&
otherBar[this.barConfigKey].pushOnOverlap === false)
) { ) {
return false return false
} }
lib/components/GGanttChart.vue
+4 -1
View File
@@ -73,6 +73,7 @@ export default {
minGapBetweenBars: { type: Number, default: 0 }, minGapBetweenBars: { type: Number, default: 0 },
defaultBarLength: { type: Number, default: 1 }, defaultBarLength: { type: Number, default: 1 },
precision: { type: String, default: 'month' }, // 'month', 'day' precision: { type: String, default: 'month' }, // 'month', 'day'
barConfigKey: { type: String, default: 'ganttBarConfig' },
barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime
barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime
mayAdd: { type: Boolean, default: true } mayAdd: { type: Boolean, default: true }
@@ -152,7 +153,9 @@ export default {
moveBarsFromBundleOfPushedBar(pushedBar, minuteDiff, overlapType) { moveBarsFromBundleOfPushedBar(pushedBar, minuteDiff, overlapType) {
this.movedBarsInDrag.add(pushedBar) this.movedBarsInDrag.add(pushedBar)
let bundleId = pushedBar.ganttBarConfig.bundle let bundleId = pushedBar[this.barConfigKey]
? pushedBar[this.barConfigKey].bundle
: null
if (bundleId === undefined || bundleId === null) { if (bundleId === undefined || bundleId === null) {
return return
} }
lib/components/GGanttRow.vue
+9 -5
View File
@@ -80,6 +80,14 @@ export default {
return this.getChartProps() return this.getChartProps()
}, },
chartStart() {
return this.chartProps.chartStart
},
barConfigKey() {
return this.chartProps.barConfigKey
},
timeUnit() { timeUnit() {
return this.getTimeUnit() return this.getTimeUnit()
}, },
@@ -92,10 +100,6 @@ export default {
return this.getTimeCount() return this.getTimeCount()
}, },
chartStart() {
return this.chartProps.chartStart
},
rowLabelStyle() { rowLabelStyle() {
return { return {
width: `${this.chartProps.rowLabelWidth}px`, width: `${this.chartProps.rowLabelWidth}px`,
@@ -175,7 +179,7 @@ export default {
.add(this.defaultBarLength, this.timeUnit) .add(this.defaultBarLength, this.timeUnit)
.format() .format()
bar.ganttBarConfig = { handles: true } bar[this.barConfigKey] = { handles: true }
this.bars.push(bar) this.bars.push(bar)
this.bars.sort((first, second) => this.bars.sort((first, second) =>
moment(first[this.chartProps.barStartKey]).diff( moment(first[this.chartProps.barStartKey]).diff(
src/App.vue
+17 -16
View File
@@ -15,7 +15,8 @@
:highlighted-hours="chart1.highlightedHours" :highlighted-hours="chart1.highlightedHours"
:row-label-width="chart1.rowLabelWidth" :row-label-width="chart1.rowLabelWidth"
:row-height="chart1.rowHeight" :row-height="chart1.rowHeight"
:theme="chart1.selectedTheme" :theme="chart1.theme"
bar-config-key="config"
bar-start-key="myStart" bar-start-key="myStart"
bar-end-key="myEnd" bar-end-key="myEnd"
@dragend-bar="onDragend($event)" @dragend-bar="onDragend($event)"
@@ -48,7 +49,7 @@
:highlighted-days="chart2.highlightedDays" :highlighted-days="chart2.highlightedDays"
:row-label-width="chart2.rowLabelWidth" :row-label-width="chart2.rowLabelWidth"
:row-height="chart2.rowHeight" :row-height="chart2.rowHeight"
:theme="chart2.selectedTheme" :theme="chart2.theme"
:width="chart2.width" :width="chart2.width"
:height="chart2.height" :height="chart2.height"
:may-add="chart2.mayAdd" :may-add="chart2.mayAdd"
@@ -84,7 +85,7 @@ export default {
hideTimeaxis: false, hideTimeaxis: false,
highlightOnHover: true, highlightOnHover: true,
highlightedHours: [10, 12], highlightedHours: [10, 12],
selectedTheme: 'default', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare' theme: 'default', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare'
rows: [ rows: [
{ {
label: 'Row #1', label: 'Row #1',
@@ -94,7 +95,7 @@ export default {
myEnd: '2020-03-03 23:00', myEnd: '2020-03-03 23:00',
label: 'Immobile', label: 'Immobile',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#404040', backgroundColor: '#404040',
opacity: 0.5, opacity: 0.5,
@@ -106,7 +107,7 @@ export default {
myEnd: '2020-03-03 15:00', myEnd: '2020-03-03 15:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
bundle: 'blueBundle' bundle: 'blueBundle'
@@ -122,7 +123,7 @@ export default {
myEnd: '2020-03-02 18:00', myEnd: '2020-03-02 18:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#de3b26', backgroundColor: '#de3b26',
bundle: 'redBundle' bundle: 'redBundle'
@@ -133,7 +134,7 @@ export default {
myEnd: '2020-03-03 15:00', myEnd: '2020-03-03 15:00',
label: 'We belong together ^', label: 'We belong together ^',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
bundle: 'blueBundle' bundle: 'blueBundle'
@@ -144,7 +145,7 @@ export default {
myEnd: '2020-03-03 22:00', myEnd: '2020-03-03 22:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' } config: { color: 'white', backgroundColor: '#aa34a3' }
} }
] ]
}, },
@@ -156,7 +157,7 @@ export default {
myEnd: '2020-03-02 18:00', myEnd: '2020-03-02 18:00',
label: 'We belong together ^', label: 'We belong together ^',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#de3b26', backgroundColor: '#de3b26',
bundle: 'redBundle' bundle: 'redBundle'
@@ -167,7 +168,7 @@ export default {
myEnd: '2020-03-03 05:00', myEnd: '2020-03-03 05:00',
label: 'With handles!', label: 'With handles!',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#a23def', backgroundColor: '#a23def',
handles: true handles: true
@@ -178,7 +179,7 @@ export default {
myEnd: '2020-03-02 07:00', myEnd: '2020-03-02 07:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#5effad', backgroundColor: '#5effad',
pushOnOverlap: false, pushOnOverlap: false,
@@ -190,7 +191,7 @@ export default {
myEnd: '2020-03-03 20:00', myEnd: '2020-03-03 20:00',
label: 'Woooow!', label: 'Woooow!',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
background: background:
'repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)' 'repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)'
@@ -206,7 +207,7 @@ export default {
myEnd: '2020-03-03 20:00', myEnd: '2020-03-03 20:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#d18aaf', backgroundColor: '#d18aaf',
handles: true handles: true
@@ -217,7 +218,7 @@ export default {
myEnd: '2020-03-03 01:00', myEnd: '2020-03-03 01:00',
label: 'Rectangular', label: 'Rectangular',
tooltip: 'Bar tooltip', tooltip: 'Bar tooltip',
ganttBarConfig: { config: {
color: 'white', color: 'white',
backgroundColor: '#f2840f', backgroundColor: '#f2840f',
borderRadius: 0 borderRadius: 0
@@ -231,7 +232,7 @@ export default {
chartStart: '2020-03-01 00:00', chartStart: '2020-03-01 00:00',
chartEnd: '2020-04-01 00:00', chartEnd: '2020-04-01 00:00',
precision: 'month', precision: 'month',
pushOnOverlap: true, pushOnOverlap: false,
isMagnetic: true, isMagnetic: true,
grid: true, grid: true,
gridSize: 50, gridSize: 50,
@@ -246,7 +247,7 @@ export default {
'2020-03-22', '2020-03-22',
'2020-03-29' '2020-03-29'
], ],
selectedTheme: 'vue', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare' theme: 'vue', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare'
width: '1100px', width: '1100px',
height: '250px', height: '250px',
mayAdd: false, mayAdd: false,