2
0
mirror of https://github.com/tenrok/vue-ganttastic.git synced 2026-06-25 11:50:32 +03:00

fix: holes in timeaxis

This commit is contained in:
2021-10-27 11:17:03 +03:00
parent 6907d7c6d0
commit 013eeeee3c
3 changed files with 10 additions and 12 deletions
+7 -9
View File
@@ -74,7 +74,6 @@ export default {
data() { data() {
return { return {
axisPoints: [], axisPoints: [],
childPointCount: null,
timemarker: null, timemarker: null,
hourFontSize: '11px', hourFontSize: '11px',
dayFormat: 'ddd DD MMMM', dayFormat: 'ddd DD MMMM',
@@ -124,15 +123,15 @@ export default {
initAxisMonthsAndDays() { initAxisMonthsAndDays() {
let start = moment(this.chartStart) let start = moment(this.chartStart)
let end = moment(this.chartEnd) let end = moment(this.chartEnd)
this.childPointCount = Math.floor(end.diff(start, 'days', true))
this.axisPoints = [] this.axisPoints = []
while (start.isBefore(end)) { while (start.isBefore(end)) {
let dayCountOfMonth = start.isSame(end, 'month') let dayCountOfMonth = start.isSame(end, 'month')
? end.date() - 1 ? end.date() - 1
: start.daysInMonth() - start.date() + 1 : start.daysInMonth() - start.date() + 1
let widthPercentage = (dayCountOfMonth / this.childPointCount) * 100 let widthPercentage = (dayCountOfMonth / this.timeCount) * 100
let endDay = let endDay = start.isSame(end, 'month')
start.month() === end.month() ? end.date() - 1 : start.daysInMonth() ? end.date() - 1
: start.daysInMonth()
this.axisPoints.push( this.axisPoints.push(
this.getAxisMonthObject(start, widthPercentage, endDay) this.getAxisMonthObject(start, widthPercentage, endDay)
) )
@@ -143,14 +142,13 @@ export default {
initAxisDaysAndHours() { initAxisDaysAndHours() {
let start = moment(this.chartStart) let start = moment(this.chartStart)
let end = moment(this.chartEnd) let end = moment(this.chartEnd)
this.childPointCount = Math.floor(end.diff(start, 'hours', true))
this.axisPoints = [] this.axisPoints = []
while (start.isBefore(end)) { while (start.isBefore(end)) {
let hourCountOfDay = start.isSame(end, 'day') let hourCountOfDay = start.isSame(end, 'day')
? end.hour() ? end.hour()
: 24 - start.hour() : 24 - start.hour()
let widthPercentage = (hourCountOfDay / this.childPointCount) * 100 let widthPercentage = (hourCountOfDay / this.timeCount) * 100
let endHour = start.date() === end.date() ? end.hour() - 1 : 23 // -1 because the last hour is not included e.g if chartEnd=04:00 the last interval we display is between 03 and 04 let endHour = start.isSame(end, 'day') ? end.hour() - 1 : 23 // -1 because the last hour is not included e.g if chartEnd=04:00 the last interval we display is between 03 and 04
this.axisPoints.push( this.axisPoints.push(
this.getAxisDayObject(start, widthPercentage, endHour) this.getAxisDayObject(start, widthPercentage, endHour)
) )
@@ -216,7 +214,7 @@ export default {
this.hourFontSize = this.hourFontSize =
Math.min( Math.min(
9.5, 9.5,
0.75 * (this.horizontalAxisContainer.width / this.childPointCount) 0.75 * (this.horizontalAxisContainer.width / this.timeCount)
) + 'px' ) + 'px'
}, },
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.15", "version": "0.10.16",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.15", "version": "0.10.16",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue": "^2.6.12" "vue": "^2.6.12"
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.15", "version": "0.10.16",
"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",