mirror of
https://github.com/tenrok/vue-ganttastic.git
synced 2026-06-25 05:40:34 +03:00
feat: tooltip format
This commit is contained in:
@@ -124,33 +124,34 @@ 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 |
|
||||||
| ------------------------ | --------------- | ---------------- | ------------------------------------------------------------------- |
|
| ------------------------ | --------------- | ------------------------------------- | ------------------------------------------------------------------- |
|
||||||
| allow-add | `Boolean` | `true` | allow to add new bar on double click |
|
| allow-add | `Boolean` | `true` | allow to add new bar on double click |
|
||||||
| bar-config-key | `String` | `ganttBarConfig` | |
|
| bar-config-key | `String` | `ganttBarConfig` | |
|
||||||
| bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime |
|
| bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime |
|
||||||
| bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime |
|
| bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime |
|
||||||
| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
|
| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
|
||||||
| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
|
| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
|
||||||
| day-format | `String` | `ddd DD MMMM` | |
|
| day-format | `String` | `ddd DD MMMM` | |
|
||||||
| grid | `Boolean` | `false` | hide/show grid |
|
| grid | `Boolean` | `false` | hide/show grid |
|
||||||
| grid-size | `Number` | `30` | horizontal cell width in pixels |
|
| grid-size | `Number` | `30` | horizontal cell width in pixels |
|
||||||
| default-bar-length | `Number` | `1` | |
|
| default-bar-length | `Number` | `1` | |
|
||||||
| height | `String` | - | the total height of the entire Vue-Ganttastic component |
|
| height | `String` | - | the total height of the entire Vue-Ganttastic component |
|
||||||
| hide-timeaxis | `Boolean` | `false` | hide timeaxis |
|
| hide-timeaxis | `Boolean` | `false` | hide timeaxis |
|
||||||
| highlighted-days | `Array<String>` | `[]` | format of day `YYYY-MM-DD` |
|
| highlighted-days | `Array<String>` | `[]` | format of day `YYYY-MM-DD` |
|
||||||
| highlighted-hours | `Array<Number>` | `[]` | |
|
| highlighted-hours | `Array<Number>` | `[]` | |
|
||||||
| is-magnetic | `Boolean` | - | magnetic effect |
|
| is-magnetic | `Boolean` | - | magnetic effect |
|
||||||
| locale | `String` | `en` | localization |
|
| locale | `String` | `en` | localization |
|
||||||
| min-gap-between-bars | `Number` | `0` | |
|
| min-gap-between-bars | `Number` | `0` | |
|
||||||
| month-format | `String` | `MMMM YYYY` | |
|
| month-format | `String` | `MMMM YYYY` | |
|
||||||
| precision | `String` | `month` | day, month |
|
| precision | `String` | `month` | day, month |
|
||||||
| push-on-overlap | `Boolean` | - | |
|
| push-on-overlap | `Boolean` | - | |
|
||||||
| row-height | `Number` | `40` | |
|
| row-height | `Number` | `40` | |
|
||||||
| row-label-width | `Number` | `200` | label width in pixels |
|
| row-label-width | `Number` | `200` | label width in pixels |
|
||||||
| snap-back-on-overlap | `Boolean` | - | |
|
| snap-back-on-overlap | `Boolean` | - | |
|
||||||
| theme | `String` | `default` | |
|
| theme | `String` | `default` | |
|
||||||
| width | `String` | `100%` | the total width of the entire Vue-Ganttastic component |
|
| tooltip-format | `String` | `{start} - {end} duration {duration}` | |
|
||||||
|
| width | `String` | `100%` | the total width of the entire Vue-Ganttastic component |
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
>
|
>
|
||||||
<div class="g-gantt-bar__label">
|
<div class="g-gantt-bar__label">
|
||||||
<slot name="bar-label" :bar="localBar">
|
<slot name="bar-label" :bar="localBar">
|
||||||
{{ barConfig.label || '' }}
|
{{ barConfig.label }}
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="barConfig.handles">
|
<template v-if="barConfig.handles">
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<div>{{ localBar.tooltip }}</div>
|
<div>{{ localBar.tooltip }}</div>
|
||||||
<div>{{ barStartText }} - {{ barEndText }}</div>
|
<div>{{ tooltipContent }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
@@ -51,6 +51,27 @@
|
|||||||
<script>
|
<script>
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
|
||||||
|
String.prototype.formatUnicorn =
|
||||||
|
String.prototype.formatUnicorn ||
|
||||||
|
function () {
|
||||||
|
'use strict'
|
||||||
|
let str = this /*.toString()*/
|
||||||
|
if (arguments.length) {
|
||||||
|
const notSeenInNature = '#$%#$%' // or whatever
|
||||||
|
const t = typeof arguments[0]
|
||||||
|
let args =
|
||||||
|
'string' === t || 'number' === t
|
||||||
|
? Array.prototype.slice.call(arguments)
|
||||||
|
: arguments[0]
|
||||||
|
for (let key in args) {
|
||||||
|
let rv = String(args[key]).replace('{', notSeenInNature)
|
||||||
|
str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), rv)
|
||||||
|
}
|
||||||
|
str = str.replace(notSeenInNature, '{')
|
||||||
|
}
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GGanttBar',
|
name: 'GGanttBar',
|
||||||
|
|
||||||
@@ -162,6 +183,15 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
barDurationText() {
|
||||||
|
const duration = moment.duration(
|
||||||
|
this.barEndMoment.diff(this.barStartMoment)
|
||||||
|
)
|
||||||
|
return `${Math.floor(duration.as('d'))} ${moment
|
||||||
|
.utc(duration.as('ms'))
|
||||||
|
.format('HH:mm')}`
|
||||||
|
},
|
||||||
|
|
||||||
barConfig() {
|
barConfig() {
|
||||||
if (this.localBar[this.barConfigKey]) {
|
if (this.localBar[this.barConfigKey]) {
|
||||||
return {
|
return {
|
||||||
@@ -192,6 +222,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
tooltipContent() {
|
||||||
|
return this.chartProps.tooltipFormat.formatUnicorn({
|
||||||
|
start: this.barStartText,
|
||||||
|
end: this.barEndText,
|
||||||
|
duration: this.barDurationText
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
tooltipStyle() {
|
tooltipStyle() {
|
||||||
return {
|
return {
|
||||||
left: this.barStyle.left,
|
left: this.barStyle.left,
|
||||||
|
|||||||
@@ -80,7 +80,11 @@ export default {
|
|||||||
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
|
||||||
allowAdd: { type: Boolean, default: true },
|
allowAdd: { type: Boolean, default: true },
|
||||||
dayFormat: { type: String, default: 'ddd DD MMMM' },
|
dayFormat: { type: String, default: 'ddd DD MMMM' },
|
||||||
monthFormat: { type: String, default: 'MMMM YYYY' }
|
monthFormat: { type: String, default: 'MMMM YYYY' },
|
||||||
|
tooltipFormat: {
|
||||||
|
type: String,
|
||||||
|
default: '{start} - {end} duration: {duration}'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|||||||
Reference in New Issue
Block a user