mirrors/vue-ganttastic
2
0
Fork 0
mirror of https://github.com/tenrok/vue-ganttastic.git synced 2026-06-25 12:10:33 +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
-1
View File
@@ -152,7 +152,6 @@ Pull requests are warmly welcomed, while every major change or proposal ought to
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:
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'