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

feat: additional bar tooltip

Browse Source
This commit is contained in:
Сергей Солодягин
2021-10-26 16:37:52 +03:00
parent 3e2ef83a34
commit 09347ce317
10 changed files with 177 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -3
View File
@@ -151,13 +151,12 @@ Pull requests are warmly welcomed, while every major change or proposal ought to
1. Clone the project 1. Clone the project
2. Install the Vue CLI service, if you don't already have it installed: 2. Install the Vue CLI service, if you don't already have it installed:
``` ```
npm install -g @vue/cli npm install -g @vue/cli
npm install -g @vue/cli-service-global
``` ```
3. `App.vue` is a dedicated Vue SFC where all Vue-Ganttastic features can be 3. `App.vue` is a dedicated Vue SFC where all Vue-Ganttastic features can be
played around with and tested out. Get it running using: played around with and tested out. Get it running using:
``` ```
npm run serve npm run serve
``` ```
## Dependencies ## Dependencies
lib/components/GGanttBar.vue
+65 -35
View File
@@ -35,7 +35,10 @@
this.barStyle.background || this.barStyle.backgroundColor this.barStyle.background || this.barStyle.backgroundColor
}" }"
/> />
{{ barStartText }} - {{ barEndText }} <div>
<div>{{ bar.tooltip }}</div>
<div>{{ barStartText }} - {{ barEndText }}</div>
</div>
</div> </div>
</transition> </transition>
</div> </div>
@@ -55,13 +58,12 @@ export default {
inject: [ inject: [
'getTimeCount', 'getTimeCount',
'ganttChartProps', 'getChartProps',
'initDragOfBarsFromBundle', 'initDragOfBarsFromBundle',
'moveBarsFromBundleOfPushedBar', 'moveBarsFromBundleOfPushedBar',
'setDragLimitsOfGanttBar', 'setDragLimitsOfGanttBar',
'onBarEvent', 'onBarEvent',
'onDragendBar', 'onDragendBar',
'getMinGapBetweenBars',
'getTimeUnit', 'getTimeUnit',
'getTimeFormat' 'getTimeFormat'
], ],
@@ -77,19 +79,49 @@ export default {
cursorOffsetX: 0, cursorOffsetX: 0,
mousemoveCallback: null, // gets initialized when starting to drag, possible values: drag, dragByHandleLeft, dragByHandleRight, mousemoveCallback: null, // gets initialized when starting to drag, possible values: drag, dragByHandleLeft, dragByHandleRight,
barStartBeforeDrag: null, barStartBeforeDrag: null,
barEndBeforeDrag: null, barEndBeforeDrag: null
timeUnit: this.getTimeUnit(),
timeChildKey:
this.ganttChartProps.precision === 'month' ? 'hours' : 'minutes',
timeChildFormat:
this.ganttChartProps.precision === 'month' ? 'MM-DD' : 'HH:mm',
timeFormat: this.getTimeFormat(),
barStartKey: this.ganttChartProps.barStartKey,
barEndKey: this.ganttChartProps.barEndKey
} }
}, },
computed: { computed: {
chartProps() {
return this.getChartProps()
},
minGapBetweenBars() {
return this.chartProps.minGapBetweenBars
},
timeChildKey() {
return this.chartProps.precision === 'month' ? 'hours' : 'minutes'
},
timeChildFormat() {
return this.chartProps.precision === 'month'
? 'DD.MM.YYYY'
: 'DD.MM.YYYY HH:mm'
},
barStartKey() {
return this.chartProps.barStartKey
},
barEndKey() {
return this.chartProps.barEndKey
},
timeCount() {
return this.getTimeCount()
},
timeUnit() {
return this.getTimeUnit()
},
timeFormat() {
return this.getTimeFormat()
},
barStartMoment: { barStartMoment: {
get() { get() {
return moment(this.bar[this.barStartKey], this.timeFormat) return moment(this.bar[this.barStartKey], this.timeFormat)
@@ -146,7 +178,7 @@ export default {
...(this.barConfig || {}), ...(this.barConfig || {}),
left: `${xStart}px`, left: `${xStart}px`,
width: `${xEnd - xStart}px`, width: `${xEnd - xStart}px`,
height: `${this.ganttChartProps.rowHeight - 6}px`, height: `${this.chartProps.rowHeight - 6}px`,
zIndex: this.barConfig.zIndex || (this.isDragging ? 2 : 1) zIndex: this.barConfig.zIndex || (this.isDragging ? 2 : 1)
} }
}, },
@@ -154,16 +186,16 @@ export default {
tooltipStyle() { tooltipStyle() {
return { return {
left: this.barStyle.left, left: this.barStyle.left,
top: `${this.ganttChartProps.rowHeight}px` top: `${this.chartProps.rowHeight}px`
} }
}, },
chartStartMoment() { chartStartMoment() {
return moment(this.ganttChartProps.chartStart) return moment(this.chartProps.chartStart)
}, },
chartEndMoment() { chartEndMoment() {
return moment(this.ganttChartProps.chartEnd) return moment(this.chartProps.chartEnd)
} }
}, },
@@ -328,26 +360,26 @@ export default {
if ( if (
newXStart && newXStart &&
this.dragLimitLeft !== null && this.dragLimitLeft !== null &&
newXStart < this.dragLimitLeft + this.getMinGapBetweenBars() newXStart < this.dragLimitLeft + this.minGapBetweenBars
) { ) {
return true return true
} }
if ( if (
newXEnd && newXEnd &&
this.dragLimitRight !== null && this.dragLimitRight !== null &&
newXEnd > this.dragLimitRight - this.getMinGapBetweenBars() newXEnd > this.dragLimitRight - this.minGapBetweenBars
) { ) {
return true return true
} }
if ( // if (
moment(this.bar[this.barStartKey]).isAfter(this.barStartBeforeDrag) && // moment(this.bar[this.barStartKey]).isAfter(this.barStartBeforeDrag) &&
moment(this.bar[this.barStartKey]) // moment(this.bar[this.barStartKey])
.add(1, this.timeUnit) // .add(1, this.timeUnit)
.isAfter(this.bar[this.barEndBeforeDrag]) // .isAfter(this.bar[this.barEndBeforeDrag])
) { // ) {
return true // return true
} // }
const isSqueezeToLeft = const isSqueezeToLeft =
newXStart && newXStart &&
@@ -419,7 +451,7 @@ export default {
manageOverlapping() { manageOverlapping() {
if ( if (
!this.ganttChartProps.pushOnOverlap || !this.chartProps.pushOnOverlap ||
this.barConfig.pushOnOverlap === false this.barConfig.pushOnOverlap === false
) { ) {
return return
@@ -439,9 +471,9 @@ export default {
currentStartMoment, currentStartMoment,
this.timeChildKey, this.timeChildKey,
true true
) + this.getMinGapBetweenBars() ) + this.minGapBetweenBars
overlapBar[this.barEndKey] = currentStartMoment overlapBar[this.barEndKey] = currentStartMoment
.subtract(this.getMinGapBetweenBars(), this.timeChildKey, true) .subtract(this.minGapBetweenBars, this.timeChildKey, true)
.format(this.timeFormat) .format(this.timeFormat)
overlapBar[this.barStartKey] = overlapStartMoment overlapBar[this.barStartKey] = overlapStartMoment
.subtract(minuteDiff, this.timeChildKey, true) .subtract(minuteDiff, this.timeChildKey, true)
@@ -453,9 +485,9 @@ export default {
overlapStartMoment, overlapStartMoment,
this.timeChildKey, this.timeChildKey,
true true
) + this.getMinGapBetweenBars() ) + this.minGapBetweenBars
overlapBar[this.barStartKey] = currentEndMoment overlapBar[this.barStartKey] = currentEndMoment
.add(this.getMinGapBetweenBars(), this.timeChildKey, true) .add(this.minGapBetweenBars, this.timeChildKey, true)
.format(this.timeFormat) .format(this.timeFormat)
overlapBar[this.barEndKey] = overlapEndMoment overlapBar[this.barEndKey] = overlapEndMoment
.add(minuteDiff, this.timeChildKey, true) .add(minuteDiff, this.timeChildKey, true)
@@ -556,14 +588,12 @@ export default {
this.timeUnit, this.timeUnit,
true true
) )
let pos = let pos = (timeDiffFromStart / this.timeCount) * this.barContainer.width
(timeDiffFromStart / this.getTimeCount()) * this.barContainer.width
return pos return pos
}, },
mapPositionToTime(xPos) { mapPositionToTime(xPos) {
let timeDiffFromStart = let timeDiffFromStart = (xPos / this.barContainer.width) * this.timeCount
(xPos / this.barContainer.width) * this.getTimeCount()
if (this.timeUnit === 'days') { if (this.timeUnit === 'days') {
let duration = moment.duration(timeDiffFromStart, 'days') let duration = moment.duration(timeDiffFromStart, 'days')
timeDiffFromStart = duration.asHours() timeDiffFromStart = duration.asHours()
lib/components/GGanttChart.vue
+1 -7
View File
@@ -459,10 +459,8 @@ export default {
// the following values by using Vue's "inject" option: // the following values by using Vue's "inject" option:
provide() { provide() {
return { return {
getChartStart: () => this.chartStart,
getChartEnd: () => this.chartEnd,
getTimeCount: () => this.timeCount, getTimeCount: () => this.timeCount,
ganttChartProps: this.$props, getChartProps: () => this.$props,
getThemeColors: () => this.themeColors, getThemeColors: () => this.themeColors,
initDragOfBarsFromBundle: (bundleId, e) => initDragOfBarsFromBundle: (bundleId, e) =>
this.initDragOfBarsFromBundle(bundleId, e), this.initDragOfBarsFromBundle(bundleId, e),
@@ -473,10 +471,6 @@ export default {
onBarEvent: (e, ganttBar) => this.onBarEvent(e, ganttBar), onBarEvent: (e, ganttBar) => this.onBarEvent(e, ganttBar),
onDragendBar: (e, ganttBar, action) => onDragendBar: (e, ganttBar, action) =>
this.onDragendBar(e, ganttBar, action), this.onDragendBar(e, ganttBar, action),
shouldSnapBackOnOverlap: () => this.snapBackOnOverlap,
snapBackBundle: ganttBar => this.snapBackBundle(ganttBar),
getMinGapBetweenBars: () => this.minGapBetweenBars,
getDefaultBarLength: () => this.defaultBarLength,
getTimeUnit: () => this.timeUnit, getTimeUnit: () => this.timeUnit,
getTimeFormat: () => this.timeFormat getTimeFormat: () => this.timeFormat
} }
lib/components/GGanttRow.vue
+56 -33
View File
@@ -2,7 +2,7 @@
<div <div
class="g-gantt-row" class="g-gantt-row"
ref="g-gantt-row" ref="g-gantt-row"
:style="{ height: `${$parent.rowHeight}px` }" :style="{ height: `${chartProps.rowHeight}px` }"
v-on="$listeners" v-on="$listeners"
> >
<div class="g-gantt-row-label" :style="rowLabelStyle"> <div class="g-gantt-row-label" :style="rowLabelStyle">
@@ -23,8 +23,8 @@
<g-gantt-bar <g-gantt-bar
v-for="(bar, index) in bars" v-for="(bar, index) in bars"
:key="`ganttastic_bar_${index}`" :key="`ganttastic_bar_${index}`"
:bar="bar"
ref="ganttBar" ref="ganttBar"
:bar="bar"
:bar-container="barContainer" :bar-container="barContainer"
:all-bars-in-row="bars" :all-bars-in-row="bars"
> >
@@ -54,30 +54,55 @@ export default {
}, },
inject: [ inject: [
'getChartProps',
'getThemeColors', 'getThemeColors',
'getTimeCount', 'getTimeCount',
'getChartStart',
'getChartEnd',
'getDefaultBarLength',
'getTimeUnit', 'getTimeUnit',
'getTimeFormat' 'getTimeFormat'
], ],
data() { data() {
return { return {
barContainer: {}, barContainer: {}
timeUnit: this.getTimeUnit(),
timeFormat: this.getTimeFormat()
} }
}, },
computed: { computed: {
themeColors() {
return this.getThemeColors()
},
defaultBarLength() {
return this.chartProps.defaultBarLength
},
chartProps() {
return this.getChartProps()
},
timeUnit() {
return this.getTimeUnit()
},
timeFormat() {
return this.getTimeFormat()
},
timeCount() {
return this.getTimeCount()
},
chartStart() {
return this.chartProps.chartStart
},
rowLabelStyle() { rowLabelStyle() {
return { return {
width: `${this.$parent.rowLabelWidth}px`, width: `${this.chartProps.rowLabelWidth}px`,
// height: `${this.$parent.rowHeight}px`, background: this.themeColors.ternary,
background: this.$parent.themeColors.ternary, color: this.themeColors.text,
color: this.$parent.themeColors.text borderTop: `1px solid ${this.themeColors.rowLabelBorder}`,
borderBottom: `1px solid ${this.themeColors.rowLabelBorder}`
} }
} }
}, },
@@ -96,7 +121,7 @@ export default {
e.preventDefault() // enables dropping content on row e.preventDefault() // enables dropping content on row
if (this.highlightOnHover) { if (this.highlightOnHover) {
this.$refs['g-gantt-row'].style.backgroundColor = this.$refs['g-gantt-row'].style.backgroundColor =
this.getThemeColors().hoverHighlight this.themeColors.hoverHighlight
} }
}, },
@@ -107,42 +132,36 @@ export default {
onDrop(e) { onDrop(e) {
let barContainer = this.$refs.barContainer.getBoundingClientRect() let barContainer = this.$refs.barContainer.getBoundingClientRect()
let xPos = e.clientX - barContainer.left let xPos = e.clientX - barContainer.left
let timeDiffFromStart = (xPos / barContainer.width) * this.getTimeCount() let timeDiffFromStart = (xPos / barContainer.width) * this.timeCount
let time = moment(this.getChartStart()).add( let time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
timeDiffFromStart,
this.timeUnit
)
let bar = this.bars.find(bar => let bar = this.bars.find(bar =>
time.isBetween( time.isBetween(
bar[this.$parent.barStartKey], bar[this.chartProps.barStartKey],
bar[this.$parent.barEndKey] bar[this.chartProps.barEndKey]
) )
) )
this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) }) this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) })
}, },
onDoubleClick(e) { onDoubleClick(e) {
if (!this.$parent.mayAdd) return if (!this.chartProps.mayAdd) return
let barContainer = this.$refs.barContainer.getBoundingClientRect() let barContainer = this.$refs.barContainer.getBoundingClientRect()
let xPos = e.clientX - barContainer.left let xPos = e.clientX - barContainer.left
let timeDiffFromStart = Math.floor( let timeDiffFromStart = Math.floor(
(xPos / barContainer.width) * this.getTimeCount() (xPos / barContainer.width) * this.timeCount
)
let time = moment(this.getChartStart()).add(
timeDiffFromStart,
this.timeUnit
) )
let time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
let bar = {} let bar = {}
bar[this.$parent.barStartKey] = time.format() bar[this.chartProps.barStartKey] = time.format()
bar[this.$parent.barEndKey] = time bar[this.chartProps.barEndKey] = time
.add(this.getDefaultBarLength(), this.timeUnit) .add(this.defaultBarLength, this.timeUnit)
.format() .format()
bar.ganttBarConfig = { handles: true } bar.ganttBarConfig = { handles: true }
this.bars.push(bar) this.bars.push(bar)
this.bars.sort((first, second) => this.bars.sort((first, second) =>
moment(first[this.$parent.barStartKey]).diff( moment(first[this.chartProps.barStartKey]).diff(
second[this.$parent.barStartKey] second[this.chartProps.barStartKey]
) )
) )
}, },
@@ -150,7 +169,7 @@ export default {
onMouseover() { onMouseover() {
if (this.highlightOnHover) { if (this.highlightOnHover) {
this.$refs['g-gantt-row'].style.backgroundColor = this.$refs['g-gantt-row'].style.backgroundColor =
this.getThemeColors().hoverHighlight this.themeColors.hoverHighlight
} }
}, },
@@ -167,7 +186,11 @@ export default {
}, },
watch: { watch: {
'$parent.rowLabelWidth': function () { 'chartProps.rowLabelWidth': function () {
this.barContainer = this.$refs.barContainer.getBoundingClientRect()
},
'chartProps.gridSize': function () {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
} }
} }
lib/components/GGanttTimeaxis.vue
+3
View File
@@ -88,6 +88,9 @@ export default {
}, },
chartEnd() { chartEnd() {
this.initAxis() this.initAxis()
},
gridSize() {
this.onWindowResize()
} }
}, },
lib/components/GanttasticThemeColors.js
+28 -17
View File
@@ -1,11 +1,12 @@
export default { export default {
default: { default: {
primary: '#eeeeee', primary: '#eeeeee',
secondary: '#E0E0E0', secondary: '#e0e0e0',
ternary: '#F5F5F5', ternary: '#f5f5f5',
hoverHighlight: 'rgba(204, 216, 219, 0.5)', hoverHighlight: 'rgba(204, 216, 219, 0.5)',
text: '#404040', text: '#404040',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
creamy: { creamy: {
@@ -14,7 +15,8 @@ export default {
ternary: '#fff6f0', ternary: '#fff6f0',
hoverHighlight: 'rgba(230, 221, 202, 0.5)', hoverHighlight: 'rgba(230, 221, 202, 0.5)',
text: '#542d05', text: '#542d05',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
crimson: { crimson: {
@@ -23,7 +25,8 @@ export default {
ternary: '#db4f56', ternary: '#db4f56',
hoverHighlight: 'rgba(196, 141, 141, 0.5)', hoverHighlight: 'rgba(196, 141, 141, 0.5)',
text: 'white', text: 'white',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
dark: { dark: {
@@ -33,7 +36,8 @@ export default {
hoverHighlight: 'rgba(159, 160, 161, 0.5)', hoverHighlight: 'rgba(159, 160, 161, 0.5)',
text: 'white', text: 'white',
background: '#525252', background: '#525252',
toast: '#1f1f1f' toast: '#1f1f1f',
rowLabelBorder: '#eaeaea'
}, },
flare: { flare: {
@@ -42,7 +46,8 @@ export default {
ternary: '#5e5145', ternary: '#5e5145',
hoverHighlight: 'rgba(196, 141, 141, 0.5)', hoverHighlight: 'rgba(196, 141, 141, 0.5)',
text: 'white', text: 'white',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
fuchsia: { fuchsia: {
@@ -51,7 +56,8 @@ export default {
ternary: '#ff7da6', ternary: '#ff7da6',
hoverHighlight: 'rgba(196, 141, 141, 0.5)', hoverHighlight: 'rgba(196, 141, 141, 0.5)',
text: 'white', text: 'white',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
grove: { grove: {
@@ -60,16 +66,18 @@ export default {
ternary: '#72b585', ternary: '#72b585',
hoverHighlight: 'rgba(160, 219, 171, 0.5)', hoverHighlight: 'rgba(160, 219, 171, 0.5)',
text: 'white', text: 'white',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
'material-blue': { 'material-blue': {
primary: '#0D47A1', primary: '#0d47a1',
secondary: '#1565C0', secondary: '#1565c0',
ternary: '#42a5f5', ternary: '#42a5f5',
hoverHighlight: 'rgba(110, 165, 196, 0.5)', hoverHighlight: 'rgba(110, 165, 196, 0.5)',
text: 'white', text: 'white',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
sky: { sky: {
@@ -78,7 +86,8 @@ export default {
ternary: '#d6f7ff', ternary: '#d6f7ff',
hoverHighlight: 'rgba(193, 202, 214, 0.5)', hoverHighlight: 'rgba(193, 202, 214, 0.5)',
text: '#022c47', text: '#022c47',
background: 'white' background: 'white',
rowLabelBorder: '#eaeaea'
}, },
slumber: { slumber: {
@@ -88,15 +97,17 @@ export default {
hoverHighlight: 'rgba(179, 162, 127, 0.5)', hoverHighlight: 'rgba(179, 162, 127, 0.5)',
text: '#ffe0b3', text: '#ffe0b3',
background: '#38383b', background: '#38383b',
toast: '#1f1f1f' toast: '#1f1f1f',
rowLabelBorder: '#eaeaea'
}, },
vue: { vue: {
primary: '#258a5d', primary: '#258a5d',
secondary: '#41B883', secondary: '#41b883',
ternary: '#35495E', ternary: '#35495e',
hoverHighlight: 'rgba(160, 219, 171, 0.5)', hoverHighlight: 'rgba(160, 219, 171, 0.5)',
text: 'white', text: 'white',
background: 'white' background: 'white',
rowLabelBorder: '#384d63'
} }
} }
lib/scss/vue-ganttastic.scss
+4 -2
View File
@@ -9,7 +9,7 @@
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
padding-bottom: 23px; padding-bottom: 34px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -147,6 +147,8 @@
position: sticky; position: sticky;
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
} }
.g-gantt-row > .g-gantt-row-label > * { .g-gantt-row > .g-gantt-row-label > * {
@@ -157,7 +159,7 @@
.g-gantt-row > .g-gantt-row-bars-container { .g-gantt-row > .g-gantt-row-bars-container {
position: relative; position: relative;
/* border-top: 1px solid #eaeaea; */ border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;
flex: 1; flex: 1;
} }
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.13", "version": "0.10.14",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.13", "version": "0.10.14",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue": "^2.6.12" "vue": "^2.6.12"
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.13", "version": "0.10.14",
"description": "A simple and customizable Gantt chart component for Vue.js", "description": "A simple and customizable Gantt chart component for Vue.js",
"keywords": [ "keywords": [
"gantt", "gantt",
src/App.vue
+15
View File
@@ -93,6 +93,7 @@ export default {
myStart: '2020-03-03 18:00', myStart: '2020-03-03 18:00',
myEnd: '2020-03-03 23:00', myEnd: '2020-03-03 23:00',
label: 'Immobile', label: 'Immobile',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#404040', backgroundColor: '#404040',
@@ -104,6 +105,7 @@ export default {
myStart: '2020-03-03 04:00', myStart: '2020-03-03 04:00',
myEnd: '2020-03-03 15:00', myEnd: '2020-03-03 15:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
@@ -119,6 +121,7 @@ export default {
myStart: '2020-03-02 09:00', myStart: '2020-03-02 09:00',
myEnd: '2020-03-02 18:00', myEnd: '2020-03-02 18:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#de3b26', backgroundColor: '#de3b26',
@@ -129,6 +132,7 @@ export default {
myStart: '2020-03-03 04:00', myStart: '2020-03-03 04:00',
myEnd: '2020-03-03 15:00', myEnd: '2020-03-03 15:00',
label: 'We belong together ^', label: 'We belong together ^',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
@@ -139,6 +143,7 @@ export default {
myStart: '2020-03-03 18:00', myStart: '2020-03-03 18:00',
myEnd: '2020-03-03 22:00', myEnd: '2020-03-03 22:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' } ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' }
} }
] ]
@@ -150,6 +155,7 @@ export default {
myStart: '2020-03-02 09:00', myStart: '2020-03-02 09:00',
myEnd: '2020-03-02 18:00', myEnd: '2020-03-02 18:00',
label: 'We belong together ^', label: 'We belong together ^',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#de3b26', backgroundColor: '#de3b26',
@@ -160,6 +166,7 @@ export default {
myStart: '2020-03-02 22:30', myStart: '2020-03-02 22:30',
myEnd: '2020-03-03 05:00', myEnd: '2020-03-03 05:00',
label: 'With handles!', label: 'With handles!',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#a23def', backgroundColor: '#a23def',
@@ -170,6 +177,7 @@ export default {
myStart: '2020-03-02 01:00', myStart: '2020-03-02 01:00',
myEnd: '2020-03-02 07:00', myEnd: '2020-03-02 07:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#5effad', backgroundColor: '#5effad',
@@ -181,6 +189,7 @@ export default {
myStart: '2020-03-03 14:00', myStart: '2020-03-03 14:00',
myEnd: '2020-03-03 20:00', myEnd: '2020-03-03 20:00',
label: 'Woooow!', label: 'Woooow!',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
background: background:
@@ -196,6 +205,7 @@ export default {
myStart: '2020-03-03 06:30', myStart: '2020-03-03 06:30',
myEnd: '2020-03-03 20:00', myEnd: '2020-03-03 20:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#d18aaf', backgroundColor: '#d18aaf',
@@ -206,6 +216,7 @@ export default {
myStart: '2020-03-02 00:30', myStart: '2020-03-02 00:30',
myEnd: '2020-03-03 01:00', myEnd: '2020-03-03 01:00',
label: 'Rectangular', label: 'Rectangular',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#f2840f', backgroundColor: '#f2840f',
@@ -247,6 +258,7 @@ export default {
start: '2020-03-05 00:00', start: '2020-03-05 00:00',
end: '2020-03-10 23:59', end: '2020-03-10 23:59',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
@@ -262,6 +274,7 @@ export default {
start: '2020-03-02 00:00', start: '2020-03-02 00:00',
end: '2020-03-09 23:59', end: '2020-03-09 23:59',
label: 'We belong together ^', label: 'We belong together ^',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
@@ -272,6 +285,7 @@ export default {
start: '2020-03-24 00:00', start: '2020-03-24 00:00',
end: '2020-03-26 23:00', end: '2020-03-26 23:00',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#de3b26' backgroundColor: '#de3b26'
@@ -286,6 +300,7 @@ export default {
start: '2020-03-15 00:00', start: '2020-03-15 00:00',
end: '2020-03-18 23:59', end: '2020-03-18 23:59',
label: 'Bar', label: 'Bar',
tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#408e2f' backgroundColor: '#408e2f'