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

feat: tooltip format

Browse Source
This commit is contained in:
Сергей Солодягин
2021-12-14 16:45:36 +03:00
parent 723d346605
commit f319aa7a5f
3 changed files with 73 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+28 -27
View File
@@ -124,33 +124,34 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
## Props
| Prop | Type | Default | Description |
| ------------------------ | --------------- | ---------------- | ------------------------------------------------------------------- |
| allow-add | `Boolean` | `true` | allow to add new bar on double click |
| bar-config-key | `String` | `ganttBarConfig` | |
| 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 |
| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| day-format | `String` | `ddd DD MMMM` | |
| grid | `Boolean` | `false` | hide/show grid |
| grid-size | `Number` | `30` | horizontal cell width in pixels |
| default-bar-length | `Number` | `1` | |
| height | `String` | - | the total height of the entire Vue-Ganttastic component |
| hide-timeaxis | `Boolean` | `false` | hide timeaxis |
| highlighted-days | `Array<String>` | `[]` | format of day `YYYY-MM-DD` |
| highlighted-hours | `Array<Number>` | `[]` | |
| is-magnetic | `Boolean` | - | magnetic effect |
| locale | `String` | `en` | localization |
| min-gap-between-bars | `Number` | `0` | |
| month-format | `String` | `MMMM YYYY` | |
| precision | `String` | `month` | day, month |
| push-on-overlap | `Boolean` | - | |
| row-height | `Number` | `40` | |
| row-label-width | `Number` | `200` | label width in pixels |
| snap-back-on-overlap | `Boolean` | - | |
| theme | `String` | `default` | |
| width | `String` | `100%` | the total width of the entire Vue-Ganttastic component |
| Prop | Type | Default | Description |
| ------------------------ | --------------- | ------------------------------------- | ------------------------------------------------------------------- |
| allow-add | `Boolean` | `true` | allow to add new bar on double click |
| bar-config-key | `String` | `ganttBarConfig` | |
| 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 |
| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| day-format | `String` | `ddd DD MMMM` | |
| grid | `Boolean` | `false` | hide/show grid |
| grid-size | `Number` | `30` | horizontal cell width in pixels |
| default-bar-length | `Number` | `1` | |
| height | `String` | - | the total height of the entire Vue-Ganttastic component |
| hide-timeaxis | `Boolean` | `false` | hide timeaxis |
| highlighted-days | `Array<String>` | `[]` | format of day `YYYY-MM-DD` |
| highlighted-hours | `Array<Number>` | `[]` | |
| is-magnetic | `Boolean` | - | magnetic effect |
| locale | `String` | `en` | localization |
| min-gap-between-bars | `Number` | `0` | |
| month-format | `String` | `MMMM YYYY` | |
| precision | `String` | `month` | day, month |
| push-on-overlap | `Boolean` | - | |
| row-height | `Number` | `40` | |
| row-label-width | `Number` | `200` | label width in pixels |
| snap-back-on-overlap | `Boolean` | - | |
| theme | `String` | `default` | |
| tooltip-format | `String` | `{start} - {end} duration {duration}` | |
| width | `String` | `100%` | the total width of the entire Vue-Ganttastic component |
## Contributing
lib/components/GGanttBar.vue
+40 -2
View File
@@ -17,7 +17,7 @@
>
<div class="g-gantt-bar__label">
<slot name="bar-label" :bar="localBar">
{{ barConfig.label || '' }}
{{ barConfig.label }}
</slot>
</div>
<template v-if="barConfig.handles">
@@ -41,7 +41,7 @@
/>
<div>
<div>{{ localBar.tooltip }}</div>
<div>{{ barStartText }} - {{ barEndText }}</div>
<div>{{ tooltipContent }}</div>
</div>
</div>
</transition>
@@ -51,6 +51,27 @@
<script>
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 {
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() {
if (this.localBar[this.barConfigKey]) {
return {
@@ -192,6 +222,14 @@ export default {
}
},
tooltipContent() {
return this.chartProps.tooltipFormat.formatUnicorn({
start: this.barStartText,
end: this.barEndText,
duration: this.barDurationText
})
},
tooltipStyle() {
return {
left: this.barStyle.left,
lib/components/GGanttChart.vue
+5 -1
View File
@@ -80,7 +80,11 @@ export default {
barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime
allowAdd: { type: Boolean, default: true },
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() {