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

chore(deps-dev): bump sass from 1.51.0 to 1.52.1

Browse Source
This commit is contained in:
Сергей Солодягин
2022-05-24 09:13:18 +03:00
parent c22d31e8df
commit 429a40e65c
43 changed files with 2630 additions and 2630 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.browserslistrc
+3 -3
View File
@@ -1,3 +1,3 @@
> 1% > 1%
last 2 versions last 2 versions
not dead not dead
.editorconfig
+9 -9
View File
@@ -1,9 +1,9 @@
root = true root = true
[*] [*]
charset = utf-8 charset = utf-8
indent_style = space indent_style = space
indent_size = 2 indent_size = 2
end_of_line = lf end_of_line = lf
insert_final_newline = true insert_final_newline = true
trim_trailing_whitespace = true trim_trailing_whitespace = true
.eslintignore
+2 -2
View File
@@ -1,2 +1,2 @@
demo demo
dist dist
.eslintrc.js
+17 -17
View File
@@ -1,17 +1,17 @@
module.exports = { module.exports = {
root: true, root: true,
env: { env: {
node: true node: true
}, },
'extends': [ 'extends': [
'plugin:vue/essential', 'plugin:vue/essential',
'eslint:recommended' 'eslint:recommended'
], ],
parserOptions: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint'
}, },
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
} }
} }
.gitignore
+27 -27
View File
@@ -1,27 +1,27 @@
.DS_Store .DS_Store
# local env files # local env files
.env.local .env.local
.env.*.local .env.*.local
# Log files # Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
# Editor directories and files # Editor directories and files
.idea .idea
.vscode .vscode
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
# npm # npm
node_modules node_modules
# output directories # output directories
/demo /demo
/dist /dist
.prettierrc.js
+11 -11
View File
@@ -1,11 +1,11 @@
module.exports = { module.exports = {
arrowParens: 'avoid', arrowParens: 'avoid',
bracketSpacing: true, bracketSpacing: true,
printWidth: 80, printWidth: 80,
semi: false, semi: false,
singleQuote: true, singleQuote: true,
tabWidth: 2, tabWidth: 2,
trailingComma: 'none', trailingComma: 'none',
useTabs: false, useTabs: false,
vueIndentScriptAndStyle: true vueIndentScriptAndStyle: true
} }
babel.config.js
+5 -5
View File
@@ -1,5 +1,5 @@
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset'
] ]
} }
lib/components/GGanttBar.vue
+670 -670
View File
File diff suppressed because it is too large Load Diff
lib/components/GGanttChart.vue
+481 -481
View File
@@ -1,481 +1,481 @@
<template> <template>
<div <div
class="g-gantt-chart-container" class="g-gantt-chart-container"
:data-theme="theme" :data-theme="theme"
:style="{ width, height }" :style="{ width, height }"
> >
<div class="g-gantt-chart"> <div class="g-gantt-chart">
<g-gantt-timeaxis <g-gantt-timeaxis
v-if="!hideTimeaxis" v-if="!hideTimeaxis"
:chart-start="chartStart" :chart-start="chartStart"
:chart-end="chartEnd" :chart-end="chartEnd"
:row-label-width="rowLabelWidth" :row-label-width="rowLabelWidth"
:timemarker-offset="timemarkerOffset" :timemarker-offset="timemarkerOffset"
:locale="locale" :locale="locale"
:precision="precision" :precision="precision"
:time-format="timeFormat" :time-format="timeFormat"
:time-count="timeCount" :time-count="timeCount"
:grid-size="gridSize" :grid-size="gridSize"
:day-format="dayFormat" :day-format="dayFormat"
:month-format="monthFormat" :month-format="monthFormat"
/> />
<div <div
class="g-gantt-rows-container" class="g-gantt-rows-container"
:style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }" :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
> >
<g-gantt-grid <g-gantt-grid
v-if="grid" v-if="grid"
:chart-start="chartStart" :chart-start="chartStart"
:chart-end="chartEnd" :chart-end="chartEnd"
:row-label-width="rowLabelWidth" :row-label-width="rowLabelWidth"
:highlighted-hours="highlightedHours" :highlighted-hours="highlightedHours"
:highlighted-days="highlightedDays" :highlighted-days="highlightedDays"
:precision="precision" :precision="precision"
:time-count="timeCount" :time-count="timeCount"
:grid-size="gridSize" :grid-size="gridSize"
/> />
<slot /> <slot />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
import GGanttTimeaxis from './GGanttTimeaxis.vue' import GGanttTimeaxis from './GGanttTimeaxis.vue'
import GGanttGrid from './GGanttGrid.vue' import GGanttGrid from './GGanttGrid.vue'
import GGanttRow from './GGanttRow.vue' import GGanttRow from './GGanttRow.vue'
import GGanttBar from './GGanttBar.vue' import GGanttBar from './GGanttBar.vue'
export default { export default {
name: 'GGanttChart', name: 'GGanttChart',
components: { components: {
GGanttTimeaxis, GGanttTimeaxis,
GGanttGrid GGanttGrid
}, },
props: { props: {
chartStart: { type: String, required: true }, chartStart: { type: String, required: true },
chartEnd: { type: String, required: true }, chartEnd: { type: String, required: true },
hideTimeaxis: { type: Boolean, default: false }, hideTimeaxis: { type: Boolean, default: false },
rowLabelWidth: { type: Number, default: 200 }, rowLabelWidth: { type: Number, default: 200 },
rowHeight: { type: Number, default: 40 }, rowHeight: { type: Number, default: 40 },
locale: { type: String, default: 'en' }, locale: { type: String, default: 'en' },
theme: { type: String }, theme: { type: String },
grid: { type: Boolean, default: false }, grid: { type: Boolean, default: false },
gridSize: { type: Number, default: 30 }, gridSize: { type: Number, default: 30 },
highlightedHours: { type: Array, default: () => [] }, highlightedHours: { type: Array, default: () => [] },
highlightedDays: { type: Array, default: () => [] }, // format YYYY-MM-DD highlightedDays: { type: Array, default: () => [] }, // format YYYY-MM-DD
width: { type: String, default: '100%' }, // the total width of the entire ganttastic component in % width: { type: String, default: '100%' }, // the total width of the entire ganttastic component in %
height: { type: String, default: '100%' }, height: { type: String, default: '100%' },
pushOnOverlap: { type: Boolean }, pushOnOverlap: { type: Boolean },
isMagnetic: { type: Boolean }, isMagnetic: { type: Boolean },
snapBackOnOverlap: { type: Boolean }, snapBackOnOverlap: { type: Boolean },
minGapBetweenBars: { type: Number, default: 0 }, minGapBetweenBars: { type: Number, default: 0 },
defaultBarLength: { type: Number, default: 1 }, defaultBarLength: { type: Number, default: 1 },
precision: { type: String, default: 'month' }, // 'month', 'day' precision: { type: String, default: 'month' }, // 'month', 'day'
barConfigKey: { type: String, default: 'ganttBarConfig' }, barConfigKey: { type: String, default: 'ganttBarConfig' },
barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime
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: { tooltipFormat: {
type: String, type: String,
default: '{start} - {end} duration: {duration}' default: '{start} - {end} duration: {duration}'
} }
}, },
data() { data() {
return { return {
timemarkerOffset: 0, timemarkerOffset: 0,
movedBarsInDrag: new Set() movedBarsInDrag: new Set()
} }
}, },
computed: { computed: {
timeUnit() { timeUnit() {
return this.precision === 'month' ? 'days' : 'hours' return this.precision === 'month' ? 'days' : 'hours'
}, },
timeFormat() { timeFormat() {
return this.precision === 'month' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm' return this.precision === 'month' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm'
}, },
timeCount() { timeCount() {
let momentChartStart = moment(this.chartStart) let momentChartStart = moment(this.chartStart)
let momentChartEnd = moment(this.chartEnd) let momentChartEnd = moment(this.chartEnd)
return Math.floor( return Math.floor(
momentChartEnd.diff(momentChartStart, this.timeUnit, true) momentChartEnd.diff(momentChartStart, this.timeUnit, true)
) )
} }
}, },
methods: { methods: {
getGanttBarChildrenList() { getGanttBarChildrenList() {
let ganttBarChildren = [] let ganttBarChildren = []
let ganttRowChildrenList = this.$children.filter( let ganttRowChildrenList = this.$children.filter(
childComp => childComp.$options.name === GGanttRow.name childComp => childComp.$options.name === GGanttRow.name
) )
ganttRowChildrenList.forEach(row => { ganttRowChildrenList.forEach(row => {
let ganttBarChildrenOfRow = row.$children.filter( let ganttBarChildrenOfRow = row.$children.filter(
childComp => childComp.$options.name === GGanttBar.name childComp => childComp.$options.name === GGanttBar.name
) )
ganttBarChildren.push(...ganttBarChildrenOfRow) ganttBarChildren.push(...ganttBarChildrenOfRow)
}) })
return ganttBarChildren return ganttBarChildren
}, },
getBarsFromBundle(bundleId) { getBarsFromBundle(bundleId) {
if (bundleId === undefined || bundleId === null) { if (bundleId === undefined || bundleId === null) {
return [] return []
} }
return this.getGanttBarChildrenList().filter( return this.getGanttBarChildrenList().filter(
ganttBarChild => ganttBarChild.barConfig.bundle === bundleId ganttBarChild => ganttBarChild.barConfig.bundle === bundleId
) )
}, },
initDragOfBarsFromBundle(gGanttBar, e) { initDragOfBarsFromBundle(gGanttBar, e) {
gGanttBar.initDrag(e) gGanttBar.initDrag(e)
this.movedBarsInDrag.add(gGanttBar.bar) this.movedBarsInDrag.add(gGanttBar.bar)
if ( if (
gGanttBar.barConfig.bundle !== null && gGanttBar.barConfig.bundle !== null &&
gGanttBar.barConfig.bundle !== undefined gGanttBar.barConfig.bundle !== undefined
) { ) {
this.getGanttBarChildrenList().forEach(ganttBarChild => { this.getGanttBarChildrenList().forEach(ganttBarChild => {
if ( if (
ganttBarChild.barConfig.bundle === gGanttBar.barConfig.bundle && ganttBarChild.barConfig.bundle === gGanttBar.barConfig.bundle &&
ganttBarChild !== gGanttBar ganttBarChild !== gGanttBar
) { ) {
ganttBarChild.initDrag(e) ganttBarChild.initDrag(e)
this.movedBarsInDrag.add(ganttBarChild.bar) this.movedBarsInDrag.add(ganttBarChild.bar)
} }
}) })
} }
}, },
moveBarsFromBundleOfPushedBar(pushedBar, minuteDiff, overlapType) { moveBarsFromBundleOfPushedBar(pushedBar, minuteDiff, overlapType) {
this.movedBarsInDrag.add(pushedBar) this.movedBarsInDrag.add(pushedBar)
let bundleId = pushedBar[this.barConfigKey] let bundleId = pushedBar[this.barConfigKey]
? pushedBar[this.barConfigKey].bundle ? pushedBar[this.barConfigKey].bundle
: null : null
if (bundleId === undefined || bundleId === null) { if (bundleId === undefined || bundleId === null) {
return return
} }
this.getGanttBarChildrenList().forEach(ganttBarChild => { this.getGanttBarChildrenList().forEach(ganttBarChild => {
if ( if (
ganttBarChild.barConfig.bundle === bundleId && ganttBarChild.barConfig.bundle === bundleId &&
ganttBarChild.bar !== pushedBar ganttBarChild.bar !== pushedBar
) { ) {
ganttBarChild.moveBarByChildPointsAndPush(minuteDiff, overlapType) ganttBarChild.moveBarByChildPointsAndPush(minuteDiff, overlapType)
this.movedBarsInDrag.add(ganttBarChild.bar) this.movedBarsInDrag.add(ganttBarChild.bar)
} }
}) })
}, },
shouldSnapBackBar(ganttBar) { shouldSnapBackBar(ganttBar) {
if ( if (
this.snapBackOnOverlap && this.snapBackOnOverlap &&
ganttBar.barConfig.pushOnOverlap !== false ganttBar.barConfig.pushOnOverlap !== false
) { ) {
let { overlapBar } = ganttBar.getOverlapBarAndType(ganttBar.bar) let { overlapBar } = ganttBar.getOverlapBarAndType(ganttBar.bar)
return !!overlapBar return !!overlapBar
} }
return false return false
}, },
snapBackBundleIfNeeded(ganttBar) { snapBackBundleIfNeeded(ganttBar) {
let barsFromBundle = this.getBarsFromBundle(ganttBar.barConfig.bundle) let barsFromBundle = this.getBarsFromBundle(ganttBar.barConfig.bundle)
if ( if (
this.shouldSnapBackBar(ganttBar) || this.shouldSnapBackBar(ganttBar) ||
barsFromBundle.some(gBar => this.shouldSnapBackBar(gBar)) barsFromBundle.some(gBar => this.shouldSnapBackBar(gBar))
) { ) {
ganttBar.snapBack() ganttBar.snapBack()
barsFromBundle.forEach(gBar => gBar.snapBack()) barsFromBundle.forEach(gBar => gBar.snapBack())
return true return true
} }
return false return false
}, },
onBarEvent({ event, type, time }, ganttBar) { onBarEvent({ event, type, time }, ganttBar) {
this.$emit(`${type}-bar`, { event, bar: ganttBar.bar, time }) this.$emit(`${type}-bar`, { event, bar: ganttBar.bar, time })
}, },
onDragendBar(e, ganttBar, action) { onDragendBar(e, ganttBar, action) {
let didSnapBack = this.snapBackBundleIfNeeded(ganttBar) let didSnapBack = this.snapBackBundleIfNeeded(ganttBar)
let movedBars = didSnapBack ? new Set() : this.movedBarsInDrag let movedBars = didSnapBack ? new Set() : this.movedBarsInDrag
// Magnetic suction // Magnetic suction
if (movedBars.size && this.isMagnetic) { if (movedBars.size && this.isMagnetic) {
let { left, right /*, move*/ } = action let { left, right /*, move*/ } = action
movedBars.forEach(bar => { movedBars.forEach(bar => {
if (this.precision === 'month') { if (this.precision === 'month') {
if (left && bar == ganttBar.bar) { if (left && bar == ganttBar.bar) {
if (moment(bar[this.barStartKey]).hours() < 12) { if (moment(bar[this.barStartKey]).hours() < 12) {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.hours(0) .hours(0)
.format() .format()
} else { } else {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.hours(24) .hours(24)
.format() .format()
} }
} else if (right && bar == ganttBar.bar) { } else if (right && bar == ganttBar.bar) {
if (moment(bar[this.barEndKey]).hours() < 12) { if (moment(bar[this.barEndKey]).hours() < 12) {
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.hours(0) .hours(0)
.format() .format()
} else { } else {
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.hours(24) .hours(24)
.format() .format()
} }
} else { } else {
if (moment(bar[this.barStartKey]).hours() < 12) { if (moment(bar[this.barStartKey]).hours() < 12) {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.hours(0) .hours(0)
.format() .format()
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.hours(0) .hours(0)
.format() .format()
} else { } else {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.hours(24) .hours(24)
.format() .format()
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.hours(24) .hours(24)
.format() .format()
} }
} }
} else { } else {
if (left && bar == ganttBar.bar) { if (left && bar == ganttBar.bar) {
if (moment(bar[this.barStartKey]).minutes() < 30) { if (moment(bar[this.barStartKey]).minutes() < 30) {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.minutes(0) .minutes(0)
.format() .format()
} else { } else {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.minutes(60) .minutes(60)
.format() .format()
} }
} else if (right && bar == ganttBar.bar) { } else if (right && bar == ganttBar.bar) {
if (moment(bar[this.barEndKey]).minutes() < 30) { if (moment(bar[this.barEndKey]).minutes() < 30) {
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.minutes(0) .minutes(0)
.format() .format()
} else { } else {
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.minutes(60) .minutes(60)
.format() .format()
} }
} else { } else {
if (moment(bar[this.barStartKey]).minutes() < 30) { if (moment(bar[this.barStartKey]).minutes() < 30) {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.minutes(0) .minutes(0)
.format() .format()
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.minutes(0) .minutes(0)
.format() .format()
} else { } else {
bar[this.barStartKey] = moment(bar[this.barStartKey]) bar[this.barStartKey] = moment(bar[this.barStartKey])
.minutes(60) .minutes(60)
.format() .format()
bar[this.barEndKey] = moment(bar[this.barEndKey]) bar[this.barEndKey] = moment(bar[this.barEndKey])
.minutes(60) .minutes(60)
.format() .format()
} }
} }
} }
}) })
} }
this.movedBarsInDrag = new Set() this.movedBarsInDrag = new Set()
this.$emit('dragend-bar', { event: e, bar: ganttBar.bar, movedBars }) this.$emit('dragend-bar', { event: e, bar: ganttBar.bar, movedBars })
}, },
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// -------- METHODS FOR SETTING THE DRAG LIMIT OF A BAR ---------------- // -------- METHODS FOR SETTING THE DRAG LIMIT OF A BAR ----------------
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// how far you can drag a bar depends on the position of the closest immobile bar // how far you can drag a bar depends on the position of the closest immobile bar
// note that if a bar from the same row belongs to a bundle // note that if a bar from the same row belongs to a bundle
// other rows might need to be taken into consideration, too // other rows might need to be taken into consideration, too
setDragLimitsOfGanttBar(bar) { setDragLimitsOfGanttBar(bar) {
if (!this.pushOnOverlap || bar.barConfig.pushOnOverlap === false) { if (!this.pushOnOverlap || bar.barConfig.pushOnOverlap === false) {
return return
} }
for (let side of ['left', 'right']) { for (let side of ['left', 'right']) {
let [totalGapDistance, bundleBarsOnPath] = let [totalGapDistance, bundleBarsOnPath] =
this.countGapDistanceToNextImmobileBar(bar, null, side, false) this.countGapDistanceToNextImmobileBar(bar, null, side, false)
for (let i = 0; i < bundleBarsOnPath.length; i++) { for (let i = 0; i < bundleBarsOnPath.length; i++) {
let barFromBundle = bundleBarsOnPath[i].bar let barFromBundle = bundleBarsOnPath[i].bar
let gapDist = bundleBarsOnPath[i].gapDistance let gapDist = bundleBarsOnPath[i].gapDistance
let otherBarsFromBundle = this.getBarsFromBundle( let otherBarsFromBundle = this.getBarsFromBundle(
barFromBundle.barConfig.bundle barFromBundle.barConfig.bundle
).filter(otherBar => otherBar !== barFromBundle) ).filter(otherBar => otherBar !== barFromBundle)
otherBarsFromBundle.forEach(otherBar => { otherBarsFromBundle.forEach(otherBar => {
let [newGapDistance, newBundleBars] = let [newGapDistance, newBundleBars] =
this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side) this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side)
if ( if (
newGapDistance !== null && newGapDistance !== null &&
(newGapDistance < totalGapDistance || !totalGapDistance) (newGapDistance < totalGapDistance || !totalGapDistance)
) { ) {
totalGapDistance = newGapDistance totalGapDistance = newGapDistance
} }
newBundleBars.forEach(newBundleBar => { newBundleBars.forEach(newBundleBar => {
if ( if (
!bundleBarsOnPath.find( !bundleBarsOnPath.find(
barAndGap => barAndGap.bar === newBundleBar.bar barAndGap => barAndGap.bar === newBundleBar.bar
) )
) { ) {
bundleBarsOnPath.push(newBundleBar) bundleBarsOnPath.push(newBundleBar)
} }
}) })
}) })
} }
if (totalGapDistance != null && side === 'left') { if (totalGapDistance != null && side === 'left') {
bar.dragLimitLeft = bar.$refs['g-bar'].offsetLeft - totalGapDistance bar.dragLimitLeft = bar.$refs['g-bar'].offsetLeft - totalGapDistance
} else if (totalGapDistance != null && side === 'right') { } else if (totalGapDistance != null && side === 'right') {
bar.dragLimitRight = bar.dragLimitRight =
bar.$refs['g-bar'].offsetLeft + bar.$refs['g-bar'].offsetLeft +
bar.$refs['g-bar'].offsetWidth + bar.$refs['g-bar'].offsetWidth +
totalGapDistance totalGapDistance
} }
} }
// all bars from the bundle of the clicked bar need to have the same drag limit: // all bars from the bundle of the clicked bar need to have the same drag limit:
let barsFromBundleOfClickedBar = this.getBarsFromBundle( let barsFromBundleOfClickedBar = this.getBarsFromBundle(
bar.barConfig.bundle bar.barConfig.bundle
) )
barsFromBundleOfClickedBar.forEach(barFromBundle => { barsFromBundleOfClickedBar.forEach(barFromBundle => {
barFromBundle.dragLimitLeft = bar.dragLimitLeft barFromBundle.dragLimitLeft = bar.dragLimitLeft
barFromBundle.dragLimitRight = bar.dragLimitRight barFromBundle.dragLimitRight = bar.dragLimitRight
}) })
}, },
// returns the gap distance to the next immobile bar // returns the gap distance to the next immobile bar
// in the row where the given bar (parameter) is (added to gapDistanceSoFar) // in the row where the given bar (parameter) is (added to gapDistanceSoFar)
// and a list of all bars on that path that belong to a bundle // and a list of all bars on that path that belong to a bundle
countGapDistanceToNextImmobileBar( countGapDistanceToNextImmobileBar(
bar, bar,
gapDistanceSoFar, gapDistanceSoFar,
side = 'left', side = 'left',
ignoreShadows = true ignoreShadows = true
) { ) {
let bundleBarsAndGapDist = bar.barConfig.bundle let bundleBarsAndGapDist = bar.barConfig.bundle
? [{ bar, gapDistance: gapDistanceSoFar }] ? [{ bar, gapDistance: gapDistanceSoFar }]
: [] : []
let currentBar = bar let currentBar = bar
let nextBar = this.getNextGanttBar(currentBar, side) let nextBar = this.getNextGanttBar(currentBar, side)
// left side: // left side:
if (side === 'left') { if (side === 'left') {
while (nextBar) { while (nextBar) {
let nextBarOffsetRight = let nextBarOffsetRight =
nextBar.$refs['g-bar'].offsetLeft + nextBar.$refs['g-bar'].offsetLeft +
nextBar.$refs['g-bar'].offsetWidth nextBar.$refs['g-bar'].offsetWidth
gapDistanceSoFar += gapDistanceSoFar +=
currentBar.$refs['g-bar'].offsetLeft - nextBarOffsetRight currentBar.$refs['g-bar'].offsetLeft - nextBarOffsetRight
if ( if (
nextBar.barConfig.immobile || nextBar.barConfig.immobile ||
(nextBar.barConfig.isShadow && !ignoreShadows) (nextBar.barConfig.isShadow && !ignoreShadows)
) { ) {
return [gapDistanceSoFar, bundleBarsAndGapDist] return [gapDistanceSoFar, bundleBarsAndGapDist]
} else if (nextBar.barConfig.bundle) { } else if (nextBar.barConfig.bundle) {
bundleBarsAndGapDist.push({ bundleBarsAndGapDist.push({
bar: nextBar, bar: nextBar,
gapDistance: gapDistanceSoFar gapDistance: gapDistanceSoFar
}) })
} }
currentBar = nextBar currentBar = nextBar
nextBar = this.getNextGanttBar(nextBar, 'left') nextBar = this.getNextGanttBar(nextBar, 'left')
} }
} }
if (side === 'right') { if (side === 'right') {
while (nextBar) { while (nextBar) {
let currentBarOffsetRight = let currentBarOffsetRight =
currentBar.$refs['g-bar'].offsetLeft + currentBar.$refs['g-bar'].offsetLeft +
currentBar.$refs['g-bar'].offsetWidth currentBar.$refs['g-bar'].offsetWidth
gapDistanceSoFar += gapDistanceSoFar +=
nextBar.$refs['g-bar'].offsetLeft - currentBarOffsetRight nextBar.$refs['g-bar'].offsetLeft - currentBarOffsetRight
if ( if (
nextBar.barConfig.immobile || nextBar.barConfig.immobile ||
(nextBar.barConfig.isShadow && !ignoreShadows) (nextBar.barConfig.isShadow && !ignoreShadows)
) { ) {
return [gapDistanceSoFar, bundleBarsAndGapDist] return [gapDistanceSoFar, bundleBarsAndGapDist]
} else if (nextBar.barConfig.bundle) { } else if (nextBar.barConfig.bundle) {
bundleBarsAndGapDist.push({ bundleBarsAndGapDist.push({
bar: nextBar, bar: nextBar,
gapDistance: gapDistanceSoFar gapDistance: gapDistanceSoFar
}) })
} }
currentBar = nextBar currentBar = nextBar
nextBar = this.getNextGanttBar(nextBar, 'right') nextBar = this.getNextGanttBar(nextBar, 'right')
} }
} }
return [null, bundleBarsAndGapDist] return [null, bundleBarsAndGapDist]
}, },
getNextGanttBar(bar, side = 'left') { getNextGanttBar(bar, side = 'left') {
let allBarsLeftOrRight = [] let allBarsLeftOrRight = []
if (side === 'left') { if (side === 'left') {
allBarsLeftOrRight = bar.$parent.$children.filter(gBar => { allBarsLeftOrRight = bar.$parent.$children.filter(gBar => {
return ( return (
gBar.$options.name === GGanttBar.name && gBar.$options.name === GGanttBar.name &&
gBar.$parent === bar.$parent && gBar.$parent === bar.$parent &&
gBar.$refs['g-bar'] && gBar.$refs['g-bar'] &&
gBar.$refs['g-bar'].offsetLeft < bar.$refs['g-bar'].offsetLeft && gBar.$refs['g-bar'].offsetLeft < bar.$refs['g-bar'].offsetLeft &&
gBar.barConfig.pushOnOverlap !== false gBar.barConfig.pushOnOverlap !== false
) )
}) })
} else { } else {
allBarsLeftOrRight = bar.$parent.$children.filter(gBar => { allBarsLeftOrRight = bar.$parent.$children.filter(gBar => {
return ( return (
gBar.$options.name === GGanttBar.name && gBar.$options.name === GGanttBar.name &&
gBar.$parent === bar.$parent && gBar.$parent === bar.$parent &&
gBar.$refs['g-bar'] && gBar.$refs['g-bar'] &&
gBar.$refs['g-bar'].offsetLeft > bar.$refs['g-bar'].offsetLeft && gBar.$refs['g-bar'].offsetLeft > bar.$refs['g-bar'].offsetLeft &&
gBar.barConfig.pushOnOverlap !== false gBar.barConfig.pushOnOverlap !== false
) )
}) })
} }
if (allBarsLeftOrRight.length > 0) { if (allBarsLeftOrRight.length > 0) {
return allBarsLeftOrRight.reduce((bar1, bar2) => { return allBarsLeftOrRight.reduce((bar1, bar2) => {
let bar1Dist = Math.abs( let bar1Dist = Math.abs(
bar1.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft bar1.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft
) )
let bar2Dist = Math.abs( let bar2Dist = Math.abs(
bar2.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft bar2.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft
) )
return bar1Dist < bar2Dist ? bar1 : bar2 return bar1Dist < bar2Dist ? bar1 : bar2
}, allBarsLeftOrRight[0]) }, allBarsLeftOrRight[0])
} else { } else {
return null return null
} }
} }
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
}, },
// all child components of GGanttChart may have access to // all child components of GGanttChart may have access to
// the following values by using Vue's "inject" option: // the following values by using Vue's "inject" option:
provide() { provide() {
return { return {
getTimeCount: () => this.timeCount, getTimeCount: () => this.timeCount,
getChartProps: () => this.$props, getChartProps: () => this.$props,
initDragOfBarsFromBundle: (bundleId, e) => initDragOfBarsFromBundle: (bundleId, e) =>
this.initDragOfBarsFromBundle(bundleId, e), this.initDragOfBarsFromBundle(bundleId, e),
moveBarsFromBundleOfPushedBar: (bar, minuteDiff, overlapType) => moveBarsFromBundleOfPushedBar: (bar, minuteDiff, overlapType) =>
this.moveBarsFromBundleOfPushedBar(bar, minuteDiff, overlapType), this.moveBarsFromBundleOfPushedBar(bar, minuteDiff, overlapType),
setDragLimitsOfGanttBar: ganttBar => setDragLimitsOfGanttBar: ganttBar =>
this.setDragLimitsOfGanttBar(ganttBar), this.setDragLimitsOfGanttBar(ganttBar),
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),
getTimeUnit: () => this.timeUnit, getTimeUnit: () => this.timeUnit,
getTimeFormat: () => this.timeFormat getTimeFormat: () => this.timeFormat
} }
} }
} }
</script> </script>
lib/components/GGanttGrid.vue
+78 -78
View File
@@ -1,78 +1,78 @@
<template> <template>
<div <div
class="g-gantt-grid" class="g-gantt-grid"
:style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }" :style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }"
> >
<div <div
v-for="(childPoint, index) in allChildPoints" v-for="(childPoint, index) in allChildPoints"
:key="index" :key="index"
:class="[ :class="[
'g-gantt-grid__line', 'g-gantt-grid__line',
{ 'g-gantt-grid-line-last': index === allChildPoints.length - 1 }, { 'g-gantt-grid-line-last': index === allChildPoints.length - 1 },
{ 'g-gantt-line-highlighted': isHighlighted(childPoint) } { 'g-gantt-line-highlighted': isHighlighted(childPoint) }
]" ]"
:style="{ width: `${gridSize}px` }" :style="{ width: `${gridSize}px` }"
/> />
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
export default { export default {
name: 'GGanttGrid', name: 'GGanttGrid',
props: { props: {
chartStart: { type: String }, chartStart: { type: String },
chartEnd: { type: String }, chartEnd: { type: String },
rowLabelWidth: { type: Number }, rowLabelWidth: { type: Number },
highlightedHours: { type: Array, default: () => [] }, highlightedHours: { type: Array, default: () => [] },
highlightedDays: { type: Array, default: () => [] }, highlightedDays: { type: Array, default: () => [] },
precision: { type: String }, precision: { type: String },
timeCount: { type: Number }, timeCount: { type: Number },
gridSize: { type: Number } gridSize: { type: Number }
}, },
computed: { computed: {
allChildPoints() { allChildPoints() {
const start = moment(this.chartStart) const start = moment(this.chartStart)
const end = moment(this.chartEnd) const end = moment(this.chartEnd)
const res = [] const res = []
while (start.isBefore(end)) { while (start.isBefore(end)) {
switch (this.precision) { switch (this.precision) {
case 'day': case 'day':
res.push(start.format('YYYY-MM-DD H')) res.push(start.format('YYYY-MM-DD H'))
start.add(1, 'hour') start.add(1, 'hour')
break break
case 'month': case 'month':
res.push(start.format('YYYY-MM-DD')) res.push(start.format('YYYY-MM-DD'))
start.add(1, 'day').hour(23) start.add(1, 'day').hour(23)
break break
} }
} }
return res return res
} }
}, },
methods: { methods: {
isHighlighted(point) { isHighlighted(point) {
switch (this.precision) { switch (this.precision) {
case 'day': case 'day':
if ( if (
this.highlightedDays.includes( this.highlightedDays.includes(
moment(point, 'YYYY-MM-DD').format('YYYY-MM-DD') moment(point, 'YYYY-MM-DD').format('YYYY-MM-DD')
) )
) { ) {
return true return true
} else { } else {
return this.highlightedHours.includes( return this.highlightedHours.includes(
moment(point, 'YYYY-MM-DD H').get('hour') moment(point, 'YYYY-MM-DD H').get('hour')
) )
} }
case 'month': case 'month':
return this.highlightedDays.includes(point) return this.highlightedDays.includes(point)
} }
} }
} }
} }
</script> </script>
lib/components/GGanttRow.vue
+203 -203
View File
@@ -1,203 +1,203 @@
<template> <template>
<div <div
ref="g-row" ref="g-row"
class="g-gantt-row" class="g-gantt-row"
:style="{ height: `${chartProps.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">
<span :title="label"> <span :title="label">
<slot name="label">{{ label }}</slot> <slot name="label">{{ label }}</slot>
</span> </span>
</div> </div>
<div <div
class="g-gantt-row__bars-container" class="g-gantt-row__bars-container"
ref="barContainer" ref="barContainer"
:style="rowStyle" :style="rowStyle"
@dragover="onDragover($event)" @dragover="onDragover($event)"
@dragleave="onDragleave($event)" @dragleave="onDragleave($event)"
@drop="onDrop($event)" @drop="onDrop($event)"
@dblclick.self="onDoubleClick($event)" @dblclick.self="onDoubleClick($event)"
@mouseover="onMouseover()" @mouseover="onMouseover()"
@mouseleave="onMouseleave()" @mouseleave="onMouseleave()"
> >
<g-gantt-bar <g-gantt-bar
v-for="(bar, index) in localBars" v-for="(bar, index) in localBars"
:key="`ganttastic_bar_${index}`" :key="`ganttastic_bar_${index}`"
ref="ganttBar" ref="ganttBar"
:bar="bar" :bar="bar"
:bar-container="barContainer" :bar-container="barContainer"
:all-bars-in-row="localBars" :all-bars-in-row="localBars"
> >
<template #bar-label="{ bar }"> <template #bar-label="{ bar }">
<slot name="bar-label" :bar="bar" /> <slot name="bar-label" :bar="bar" />
</template> </template>
</g-gantt-bar> </g-gantt-bar>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import GGanttBar from './GGanttBar.vue' import GGanttBar from './GGanttBar.vue'
import moment from 'moment' import moment from 'moment'
export default { export default {
name: 'GGanttRow', name: 'GGanttRow',
components: { components: {
GGanttBar GGanttBar
}, },
props: { props: {
label: { type: String, default: 'Row' }, label: { type: String, default: 'Row' },
labelStyle: { type: Object }, labelStyle: { type: Object },
rowStyle: { type: Object }, rowStyle: { type: Object },
bars: { type: Array, default: () => [] }, bars: { type: Array, default: () => [] },
highlightOnHover: { type: Boolean } highlightOnHover: { type: Boolean }
}, },
inject: ['getChartProps', 'getTimeCount', 'getTimeUnit', 'getTimeFormat'], inject: ['getChartProps', 'getTimeCount', 'getTimeUnit', 'getTimeFormat'],
data() { data() {
return { return {
barContainer: {}, barContainer: {},
localBars: this.bars localBars: this.bars
} }
}, },
computed: { computed: {
defaultBarLength() { defaultBarLength() {
return this.chartProps.defaultBarLength return this.chartProps.defaultBarLength
}, },
chartProps() { chartProps() {
return this.getChartProps() return this.getChartProps()
}, },
chartStart() { chartStart() {
return this.chartProps.chartStart return this.chartProps.chartStart
}, },
barConfigKey() { barConfigKey() {
return this.chartProps.barConfigKey return this.chartProps.barConfigKey
}, },
timeUnit() { timeUnit() {
return this.getTimeUnit() return this.getTimeUnit()
}, },
timeFormat() { timeFormat() {
return this.getTimeFormat() return this.getTimeFormat()
}, },
timeCount() { timeCount() {
return this.getTimeCount() return this.getTimeCount()
}, },
rowLabelStyle() { rowLabelStyle() {
return { return {
width: `${this.chartProps.rowLabelWidth}px`, width: `${this.chartProps.rowLabelWidth}px`,
...this.labelStyle ...this.labelStyle
} }
} }
}, },
watch: { watch: {
'chartProps.chartStart'() { 'chartProps.chartStart'() {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
}, },
'chartProps.chartEnd'() { 'chartProps.chartEnd'() {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
}, },
'chartProps.rowLabelWidth'() { 'chartProps.rowLabelWidth'() {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
}, },
'chartProps.gridSize'() { 'chartProps.gridSize'() {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
}, },
bars(value) { bars(value) {
this.localBars = value this.localBars = value
} }
}, },
mounted() { mounted() {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
window.addEventListener('resize', this.onWindowResize) window.addEventListener('resize', this.onWindowResize)
}, },
destroyed() { destroyed() {
window.removeEventListener('resize', this.onWindowResize) window.removeEventListener('resize', this.onWindowResize)
}, },
methods: { methods: {
onDragover(e) { onDragover(e) {
e.preventDefault() // enables dropping content on row e.preventDefault() // enables dropping content on row
if (this.highlightOnHover) { if (this.highlightOnHover) {
this.$refs['g-row'].classList.add('g-gantt-row-highlighted') this.$refs['g-row'].classList.add('g-gantt-row-highlighted')
} }
}, },
onDragleave() { onDragleave() {
this.$refs['g-row'].classList.remove('g-gantt-row-highlighted') this.$refs['g-row'].classList.remove('g-gantt-row-highlighted')
}, },
onDrop(e) { onDrop(e) {
const barContainer = this.$refs.barContainer.getBoundingClientRect() const barContainer = this.$refs.barContainer.getBoundingClientRect()
const xPos = e.clientX - barContainer.left const xPos = e.clientX - barContainer.left
const timeDiffFromStart = (xPos / barContainer.width) * this.timeCount const timeDiffFromStart = (xPos / barContainer.width) * this.timeCount
const time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit) const time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
const bar = this.localBars.find(bar => const bar = this.localBars.find(bar =>
time.isBetween( time.isBetween(
bar[this.chartProps.barStartKey], bar[this.chartProps.barStartKey],
bar[this.chartProps.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.chartProps.allowAdd) return if (!this.chartProps.allowAdd) 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.timeCount (xPos / barContainer.width) * this.timeCount
) )
let time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit) let time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
let bar = {} let bar = {}
bar[this.chartProps.barStartKey] = time.format() bar[this.chartProps.barStartKey] = time.format()
bar[this.chartProps.barEndKey] = time bar[this.chartProps.barEndKey] = time
.add(this.defaultBarLength, this.timeUnit) .add(this.defaultBarLength, this.timeUnit)
.format() .format()
bar[this.barConfigKey] = { handles: true } bar[this.barConfigKey] = { handles: true }
this.localBars.push(bar) this.localBars.push(bar)
this.localBars.sort((first, second) => this.localBars.sort((first, second) =>
moment(first[this.chartProps.barStartKey]).diff( moment(first[this.chartProps.barStartKey]).diff(
second[this.chartProps.barStartKey] second[this.chartProps.barStartKey]
) )
) )
}, },
onMouseover() { onMouseover() {
if (this.highlightOnHover) { if (this.highlightOnHover) {
this.$refs['g-row'].classList.add('g-gantt-row-highlighted') this.$refs['g-row'].classList.add('g-gantt-row-highlighted')
} }
}, },
onMouseleave() { onMouseleave() {
this.$refs['g-row'].classList.remove('g-gantt-row-highlighted') this.$refs['g-row'].classList.remove('g-gantt-row-highlighted')
}, },
onWindowResize() { onWindowResize() {
// re-initialize the barContainer DOMRect variable, which will trigger re-rendering in the gantt bars // re-initialize the barContainer DOMRect variable, which will trigger re-rendering in the gantt bars
if (this.$refs.barContainer) { if (this.$refs.barContainer) {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
} }
} }
} }
} }
</script> </script>
lib/components/GGanttTimeaxis.vue
+224 -224
View File
@@ -1,224 +1,224 @@
<template> <template>
<div <div
ref="g-timeaxis" ref="g-timeaxis"
class="g-gantt-timeaxis" class="g-gantt-timeaxis"
:style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }" :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
> >
<div <div
class="g-gantt-timeaxis__empty-space" class="g-gantt-timeaxis__empty-space"
:style="{ :style="{
minWidth: `${rowLabelWidth}px` minWidth: `${rowLabelWidth}px`
}" }"
/> />
<div class="g-gantt-timeaxis__days"> <div class="g-gantt-timeaxis__days">
<div <div
v-for="point in axisPoints" v-for="point in axisPoints"
:key="point.text" :key="point.text"
class="g-gantt-timeaxis__day" class="g-gantt-timeaxis__day"
> >
<div v-html="pointFormatted(point) || '&nbsp;'"></div> <div v-html="pointFormatted(point) || '&nbsp;'"></div>
<div class="g-gantt-timeaxis__hours"> <div class="g-gantt-timeaxis__hours">
<div <div
v-for="childPoint in point.childPoints" v-for="childPoint in point.childPoints"
:key="childPoint.fullDatetime" :key="childPoint.fullDatetime"
class="g-gantt-timeaxis__hour" class="g-gantt-timeaxis__hour"
:style="{ width: `${gridSize}px` }" :style="{ width: `${gridSize}px` }"
> >
<span :style="{ fontSize: hourFontSize }">{{ <span :style="{ fontSize: hourFontSize }">{{
childPoint.text childPoint.text
}}</span> }}</span>
<div class="g-gantt-timeaxis__hour-pin" /> <div class="g-gantt-timeaxis__hour-pin" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div ref="g-timeaxis-marker" class="g-gantt-timeaxis__marker" /> <div ref="g-timeaxis-marker" class="g-gantt-timeaxis__marker" />
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
export default { export default {
name: 'GGanttTimeaxis', name: 'GGanttTimeaxis',
props: { props: {
chartStart: { type: String }, chartStart: { type: String },
chartEnd: { type: String }, chartEnd: { type: String },
rowLabelWidth: { type: Number }, rowLabelWidth: { type: Number },
timemarkerOffset: { type: Number, default: 0 }, timemarkerOffset: { type: Number, default: 0 },
locale: { type: String }, locale: { type: String },
precision: { type: String }, precision: { type: String },
timeFormat: { type: String }, timeFormat: { type: String },
timeCount: { type: Number }, timeCount: { type: Number },
gridSize: { type: Number }, gridSize: { type: Number },
dayFormat: { type: String }, dayFormat: { type: String },
monthFormat: { type: String } monthFormat: { type: String }
}, },
data() { data() {
return { return {
axisPoints: [], axisPoints: [],
timemarker: null, timemarker: null,
hourFontSize: '11px' hourFontSize: '11px'
} }
}, },
watch: { watch: {
chartStart() { chartStart() {
this.initAxis() this.initAxis()
}, },
chartEnd() { chartEnd() {
this.initAxis() this.initAxis()
}, },
gridSize() { gridSize() {
this.onWindowResize() this.onWindowResize()
} }
}, },
mounted() { mounted() {
this.timemarker = this.$refs['g-timeaxis-marker'] this.timemarker = this.$refs['g-timeaxis-marker']
this.initAxis() this.initAxis()
this.onWindowResize() this.onWindowResize()
window.addEventListener('resize', this.onWindowResize) window.addEventListener('resize', this.onWindowResize)
window.addEventListener('mousemove', this.moveTimemarker) window.addEventListener('mousemove', this.moveTimemarker)
window.addEventListener('dragover', this.moveTimemarker) window.addEventListener('dragover', this.moveTimemarker)
}, },
destroyed() { destroyed() {
window.removeEventListener('resize', this.onWindowResize) window.removeEventListener('resize', this.onWindowResize)
window.removeEventListener('mousemove', this.moveTimemarker) window.removeEventListener('mousemove', this.moveTimemarker)
window.removeEventListener('dragover', this.moveTimemarker) window.removeEventListener('dragover', this.moveTimemarker)
}, },
methods: { methods: {
initAxis() { initAxis() {
this.precision === 'day' this.precision === 'day'
? this.initAxisDaysAndHours() ? this.initAxisDaysAndHours()
: this.initAxisMonthsAndDays() : this.initAxisMonthsAndDays()
}, },
initAxisMonthsAndDays() { initAxisMonthsAndDays() {
let start = moment(this.chartStart) let start = moment(this.chartStart)
let end = moment(this.chartEnd) let end = moment(this.chartEnd)
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.timeCount) * 100 let widthPercentage = (dayCountOfMonth / this.timeCount) * 100
let endDay = start.isSame(end, 'month') let endDay = start.isSame(end, 'month')
? end.date() - 1 ? end.date() - 1
: start.daysInMonth() : start.daysInMonth()
this.axisPoints.push( this.axisPoints.push(
this.getAxisMonthObject(start, widthPercentage, endDay) this.getAxisMonthObject(start, widthPercentage, endDay)
) )
start.add(1, 'month').date(1).hour(0) start.add(1, 'month').date(1).hour(0)
} }
}, },
initAxisDaysAndHours() { initAxisDaysAndHours() {
let start = moment(this.chartStart) let start = moment(this.chartStart)
let end = moment(this.chartEnd) let end = moment(this.chartEnd)
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.timeCount) * 100 let widthPercentage = (hourCountOfDay / this.timeCount) * 100
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 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)
) )
start.add(1, 'day').hour(0) start.add(1, 'day').hour(0)
} }
}, },
getAxisMonthObject(datetime, widthPercentage, endDay) { getAxisMonthObject(datetime, widthPercentage, endDay) {
let datetimeMoment = moment(datetime) let datetimeMoment = moment(datetime)
let axisMonthObject = { let axisMonthObject = {
widthPercentage: widthPercentage, widthPercentage: widthPercentage,
value: moment(datetime, 'YYYY-MM'), value: moment(datetime, 'YYYY-MM'),
childPoints: [] childPoints: []
} }
let startDay = datetimeMoment.date() let startDay = datetimeMoment.date()
for (let i = 0; i <= endDay - startDay; i++) { for (let i = 0; i <= endDay - startDay; i++) {
let day = { let day = {
text: datetimeMoment.format('D'), text: datetimeMoment.format('D'),
fullDatetime: datetimeMoment.format(this.timeFormat) fullDatetime: datetimeMoment.format(this.timeFormat)
} }
axisMonthObject.childPoints.push(day) axisMonthObject.childPoints.push(day)
datetimeMoment.add(1, 'day') datetimeMoment.add(1, 'day')
} }
return axisMonthObject return axisMonthObject
}, },
getAxisDayObject(datetime, widthPercentage, endHour) { getAxisDayObject(datetime, widthPercentage, endHour) {
let datetimeMoment = moment(datetime) let datetimeMoment = moment(datetime)
let axisDayObject = { let axisDayObject = {
widthPercentage: widthPercentage, widthPercentage: widthPercentage,
value: moment(datetime, 'YYYY-MM-DD'), // ISO 8601 value: moment(datetime, 'YYYY-MM-DD'), // ISO 8601
childPoints: [] childPoints: []
} }
let startHour = datetimeMoment.hour() let startHour = datetimeMoment.hour()
for (let i = 0; i <= endHour - startHour; i++) { for (let i = 0; i <= endHour - startHour; i++) {
let hour = { let hour = {
text: datetimeMoment.format('HH'), text: datetimeMoment.format('HH'),
fullDatetime: datetimeMoment.format(this.timeFormat) fullDatetime: datetimeMoment.format(this.timeFormat)
} }
axisDayObject.childPoints.push(hour) axisDayObject.childPoints.push(hour)
datetimeMoment.add(1, 'hour') datetimeMoment.add(1, 'hour')
} }
return axisDayObject return axisDayObject
}, },
moveTimemarker(event) { moveTimemarker(event) {
const chart = this.timemarker.closest('.g-gantt-chart') const chart = this.timemarker.closest('.g-gantt-chart')
if (!chart) return if (!chart) return
let pos = let pos =
chart.scrollLeft + chart.scrollLeft +
event.clientX - event.clientX -
this.timemarkerOffset - this.timemarkerOffset -
this.horizontalAxisContainer.left this.horizontalAxisContainer.left
if (pos > this.horizontalAxisContainer.width) if (pos > this.horizontalAxisContainer.width)
pos = this.horizontalAxisContainer.width pos = this.horizontalAxisContainer.width
this.timemarker.style.left = `${pos}px` this.timemarker.style.left = `${pos}px`
}, },
onWindowResize() { onWindowResize() {
if (!this.$refs['g-timeaxis']) return if (!this.$refs['g-timeaxis']) return
this.horizontalAxisContainer = this.horizontalAxisContainer =
this.$refs['g-timeaxis'].getBoundingClientRect() this.$refs['g-timeaxis'].getBoundingClientRect()
this.hourFontSize = this.hourFontSize =
Math.min( Math.min(
9.5, 9.5,
0.75 * (this.horizontalAxisContainer.width / this.timeCount) 0.75 * (this.horizontalAxisContainer.width / this.timeCount)
) + 'px' ) + 'px'
}, },
pointFormatted(point) { pointFormatted(point) {
switch (this.precision) { switch (this.precision) {
case 'day': case 'day':
return this.dayFormatted(point) return this.dayFormatted(point)
case 'month': case 'month':
return this.monthFormatted(point) return this.monthFormatted(point)
} }
}, },
monthFormatted(point) { monthFormatted(point) {
// do not display month text if the month is smaller than x% // do not display month text if the month is smaller than x%
return point.widthPercentage >= (3 / 32) * 100 return point.widthPercentage >= (3 / 32) * 100
? moment(point.value).locale(this.locale).format(this.monthFormat) ? moment(point.value).locale(this.locale).format(this.monthFormat)
: '' : ''
}, },
dayFormatted(point) { dayFormatted(point) {
// do not display day text if the day is smaller than 12% // do not display day text if the day is smaller than 12%
// return point.widthPercentage >= 12 // return point.widthPercentage >= 12
// ? moment(point.value).locale(this.locale).format(this.dayFormat) // ? moment(point.value).locale(this.locale).format(this.dayFormat)
// : '' // : ''
return moment(point.value).locale(this.locale).format(this.dayFormat) return moment(point.value).locale(this.locale).format(this.dayFormat)
} }
} }
} }
</script> </script>
lib/index.js
+19 -19
View File
@@ -1,19 +1,19 @@
import GGanttChart from './components/GGanttChart.vue' import GGanttChart from './components/GGanttChart.vue'
import GGanttRow from './components/GGanttRow.vue' import GGanttRow from './components/GGanttRow.vue'
import './scss/index.scss' import './scss/index.scss'
const VueGanttastic = { GGanttChart, GGanttRow } const VueGanttastic = { GGanttChart, GGanttRow }
const install = Vue => { const install = Vue => {
Object.keys(VueGanttastic).forEach(name => { Object.keys(VueGanttastic).forEach(name => {
Vue.component(name, VueGanttastic[name]) Vue.component(name, VueGanttastic[name])
}) })
} }
if (typeof window !== 'undefined' && window.Vue) { if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue) install(window.Vue)
} }
export default VueGanttastic export default VueGanttastic
export { GGanttChart, GGanttRow } export { GGanttChart, GGanttRow }
lib/scss/_ganttastic.scss
+273 -273
View File
@@ -1,273 +1,273 @@
.g-gantt-chart { .g-gantt-chart {
position: relative; position: relative;
overflow: auto; overflow: auto;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
padding-bottom: 34px; padding-bottom: 34px;
border: 1px solid $border-color; border: 1px solid $border-color;
box-sizing: border-box; box-sizing: border-box;
background: $background; background: $background;
flex: 1; flex: 1;
& >>> * { & >>> * {
font-family: Roboto, Verdana; font-family: Roboto, Verdana;
} }
} }
.g-gantt-timeaxis, .g-gantt-timeaxis,
.g-gantt-timeaxis__days, .g-gantt-timeaxis__days,
.g-gantt-timeaxis__day, .g-gantt-timeaxis__day,
.g-gantt-timeaxis__day > div { .g-gantt-timeaxis__day > div {
display: flex; display: flex;
} }
.g-gantt-timeaxis { .g-gantt-timeaxis {
position: sticky; position: sticky;
top: 0; top: 0;
background: $timeaxis-background; background: $timeaxis-background;
z-index: 4; z-index: 4;
box-shadow: 0px 1px 3px 2px rgba(50, 50, 50, 0.5); box-shadow: 0px 1px 3px 2px rgba(50, 50, 50, 0.5);
} }
.g-gantt-timeaxis__empty-space { .g-gantt-timeaxis__empty-space {
min-height: 100%; min-height: 100%;
background: $secondary; background: $secondary;
z-index: 5; z-index: 5;
left: 0; left: 0;
position: sticky; position: sticky;
} }
.g-gantt-timeaxis__days { .g-gantt-timeaxis__days {
position: relative; position: relative;
height: 100%; height: 100%;
} }
.g-gantt-timeaxis__day { .g-gantt-timeaxis__day {
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
color: $text; color: $text;
&:nth-child(even) { &:nth-child(even) {
background: $secondary; background: $secondary;
} }
&:nth-child(odd) { &:nth-child(odd) {
background: $primary; background: $primary;
} }
& > div:nth-child(1) { & > div:nth-child(1) {
/* day text */ /* day text */
justify-content: space-around; justify-content: space-around;
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
} }
} }
.g-gantt-timeaxis__days { .g-gantt-timeaxis__days {
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
background: $ternary; background: $ternary;
color: $text; color: $text;
} }
.g-gantt-timeaxis__hour { .g-gantt-timeaxis__hour {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
opacity: 0.5; opacity: 0.5;
color: $text; color: $text;
&:nth-child(even) { &:nth-child(even) {
background: $secondary; background: $secondary;
} }
&:nth-child(odd) { &:nth-child(odd) {
background: $primary; background: $primary;
} }
} }
.g-gantt-timeaxis__hour-pin { .g-gantt-timeaxis__hour-pin {
width: 1px; width: 1px;
height: 5px; height: 5px;
background: $text; background: $text;
} }
.g-gantt-timeaxis__marker { .g-gantt-timeaxis__marker {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 5px; height: 5px;
width: 3px; width: 3px;
background: $marker-background; background: $marker-background;
} }
.g-gantt-rows-container { .g-gantt-rows-container {
position: relative; position: relative;
} }
.g-gantt-grid { .g-gantt-grid {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
} }
.g-gantt-grid__line { .g-gantt-grid__line {
height: 100%; height: 100%;
border: 1px solid transparent; border: 1px solid transparent;
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
} }
.g-gantt-grid-line-last { .g-gantt-grid-line-last {
border-right: 1px solid $border-color; border-right: 1px solid $border-color;
} }
.g-gantt-grid-line-highlighted { .g-gantt-grid-line-highlighted {
background: $highlighted; background: $highlighted;
} }
.g-gantt-row { .g-gantt-row {
display: flex; display: flex;
width: 100%; width: 100%;
height: 40px; height: 40px;
transition: background-color 0.2s; transition: background-color 0.2s;
position: relative; position: relative;
} }
.g-gantt-row-highlighted { .g-gantt-row-highlighted {
background-color: $hover-highlight; background-color: $hover-highlight;
} }
.g-gantt-row__label { .g-gantt-row__label {
display: flex; display: flex;
align-items: center; align-items: center;
background: $ternary; background: $ternary;
color: $text; color: $text;
font-size: 0.9em; font-size: 0.9em;
z-index: 3; z-index: 3;
font-weight: bold; font-weight: bold;
left: 0; left: 0;
position: sticky; position: sticky;
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid $row-label-border-color; border-top: 1px solid $row-label-border-color;
border-bottom: 1px solid $row-label-border-color; border-bottom: 1px solid $row-label-border-color;
& > * { & > * {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.g-gantt-row__bars-container { .g-gantt-row__bars-container {
position: relative; position: relative;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
flex: 1; flex: 1;
} }
.g-gantt-bar { .g-gantt-bar {
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 30px; left: 30px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: white; color: white;
width: 300px; width: 300px;
height: 34px; height: 34px;
border-radius: 15px; border-radius: 15px;
background: #79869c; background: #79869c;
overflow: hidden; overflow: hidden;
cursor: move; cursor: move;
} }
.g-gantt-bar-immobile { .g-gantt-bar-immobile {
cursor: unset; cursor: unset;
} }
.g-gantt-bar__label { .g-gantt-bar__label {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 4px 0 4px; padding: 0 4px 0 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
pointer-events: none; pointer-events: none;
} }
& > * { & > * {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.g-gantt-bar-resizable .g-gantt-bar__label { .g-gantt-bar-resizable .g-gantt-bar__label {
padding: 0 14px 0 14px; /* 14px is the width of the handle */ padding: 0 14px 0 14px; /* 14px is the width of the handle */
} }
.g-gantt-bar__handle-left, .g-gantt-bar__handle-left,
.g-gantt-bar__handle-right { .g-gantt-bar__handle-right {
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 100%; height: 100%;
background: white; background: white;
opacity: 0.7; opacity: 0.7;
border-radius: 40px; border-radius: 40px;
} }
.g-gantt-bar__handle-left { .g-gantt-bar__handle-left {
left: 0; left: 0;
cursor: w-resize; cursor: w-resize;
} }
.g-gantt-bar__handle-right { .g-gantt-bar__handle-right {
right: 0; right: 0;
cursor: e-resize; cursor: e-resize;
} }
.g-gantt-bar__tooltip { .g-gantt-bar__tooltip {
position: absolute; position: absolute;
background: $tooltip-background; background: $tooltip-background;
color: $tooltip-color; color: $tooltip-color;
z-index: 3; z-index: 3;
font-size: 0.7em; font-size: 0.7em;
padding: 3px; padding: 3px;
border-radius: 3px; border-radius: 3px;
transition: opacity 0.2s; transition: opacity 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 10%; left: 10%;
width: 0; width: 0;
height: 0; height: 0;
border: 10px solid transparent; border: 10px solid transparent;
border-bottom-color: $tooltip-background; border-bottom-color: $tooltip-background;
border-top: 0; border-top: 0;
margin-left: -5px; margin-left: -5px;
margin-top: -5px; margin-top: -5px;
} }
& > .color-indicator { & > .color-indicator {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 100%; border-radius: 100%;
margin-right: 4px; margin-right: 4px;
} }
} }
lib/scss/_variables.scss
+13 -13
View File
@@ -1,13 +1,13 @@
$primary: #eee !default; $primary: #eee !default;
$secondary: #e0e0e0 !default; $secondary: #e0e0e0 !default;
$ternary: #f5f5f5 !default; $ternary: #f5f5f5 !default;
$hover-highlight: rgba(204, 216, 219, 0.5) !default; $hover-highlight: rgba(204, 216, 219, 0.5) !default;
$text: #404040 !default; $text: #404040 !default;
$background: #fff !default; $background: #fff !default;
$highlighted: #dcefff !default; $highlighted: #dcefff !default;
$border-color: #eaeaea !default; $border-color: #eaeaea !default;
$timeaxis-background: #fff !default; $timeaxis-background: #fff !default;
$marker-background: #000 !default; $marker-background: #000 !default;
$row-label-border-color: $border-color !default; $row-label-border-color: $border-color !default;
$tooltip-background: #000; $tooltip-background: #000;
$tooltip-color: #fff; $tooltip-color: #fff;
lib/scss/index.scss
+36 -36
View File
@@ -1,36 +1,36 @@
@use "sass:meta"; @use "sass:meta";
// default // default
@import './variables'; @import './variables';
@import './ganttastic'; @import './ganttastic';
[data-theme] { [data-theme] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
$themes: 'creamy', 'crimson', 'dark', 'flare', 'fuchsia', 'grove', $themes: 'creamy', 'crimson', 'dark', 'flare', 'fuchsia', 'grove',
'material-blue', 'sky', 'slumber', 'vue'; 'material-blue', 'sky', 'slumber', 'vue';
@each $theme in $themes { @each $theme in $themes {
[data-theme='#{$theme}'] { [data-theme='#{$theme}'] {
@include meta.load-css('./themes/#{$theme}'); @include meta.load-css('./themes/#{$theme}');
} }
} }
.fade-enter-active { .fade-enter-active {
animation: fade-in 0.3s; animation: fade-in 0.3s;
} }
.fade-leave-active { .fade-leave-active {
animation: fade-in 0.3s reverse; animation: fade-in 0.3s reverse;
} }
@keyframes fade-in { @keyframes fade-in {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
lib/scss/themes/creamy/_variables.scss
+7 -7
View File
@@ -1,7 +1,7 @@
$primary: #ffe8d9; $primary: #ffe8d9;
$secondary: #fcdcc5; $secondary: #fcdcc5;
$ternary: #fff6f0; $ternary: #fff6f0;
$hover-highlight: rgba(230, 221, 202, 0.5); $hover-highlight: rgba(230, 221, 202, 0.5);
$text: #542d05; $text: #542d05;
$background: #fff; $background: #fff;
$row-label-border-color: #f7efe9; $row-label-border-color: #f7efe9;
lib/scss/themes/creamy/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/crimson/_variables.scss
+7 -7
View File
@@ -1,7 +1,7 @@
$primary: #a82039; $primary: #a82039;
$secondary: #c41238; $secondary: #c41238;
$ternary: #db4f56; $ternary: #db4f56;
$hover-highlight: rgba(196, 141, 141, 0.5); $hover-highlight: rgba(196, 141, 141, 0.5);
$text: white; $text: white;
$background: white; $background: white;
$row-label-border-color: #e6535a; $row-label-border-color: #e6535a;
lib/scss/themes/crimson/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/dark/_variables.scss
+10 -10
View File
@@ -1,10 +1,10 @@
$primary: #404040; $primary: #404040;
$secondary: #303030; $secondary: #303030;
$ternary: #353535; $ternary: #353535;
$hover-highlight: rgba(159, 160, 161, 0.5); $hover-highlight: rgba(159, 160, 161, 0.5);
$text: #adb5bd; $text: #adb5bd;
$background: #525252; $background: #525252;
$highlighted: #7e7e7e; $highlighted: #7e7e7e;
$border-color: #444444; $border-color: #444444;
$marker-background: #666666; $marker-background: #666666;
$row-label-border-color: $border-color; $row-label-border-color: $border-color;
lib/scss/themes/dark/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/flare/_variables.scss
+7 -7
View File
@@ -1,7 +1,7 @@
$primary: #e08a38; $primary: #e08a38;
$secondary: #e67912; $secondary: #e67912;
$ternary: #5e5145; $ternary: #5e5145;
$hover-highlight: rgba(196, 141, 141, 0.5); $hover-highlight: rgba(196, 141, 141, 0.5);
$text: #fff; $text: #fff;
$background: #fff; $background: #fff;
$row-label-border-color: #6b5c4e; $row-label-border-color: #6b5c4e;
lib/scss/themes/flare/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/fuchsia/_variables.scss
+9 -9
View File
@@ -1,9 +1,9 @@
$primary: #de1d5a; $primary: #de1d5a;
$secondary: #b50b41; $secondary: #b50b41;
$ternary: #ff7da6; $ternary: #ff7da6;
$hover-highlight: rgba(196, 141, 141, 0.5); $hover-highlight: rgba(196, 141, 141, 0.5);
$text: #fff; $text: #fff;
$background: #fff; $background: #fff;
$row-label-border-color: #f2779e; $row-label-border-color: #f2779e;
$tooltip-background: $primary; $tooltip-background: $primary;
$tooltip-color: #fff; $tooltip-color: #fff;
lib/scss/themes/fuchsia/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/grove/_variables.scss
+7 -7
View File
@@ -1,7 +1,7 @@
$primary: #3d9960; $primary: #3d9960;
$secondary: #288542; $secondary: #288542;
$ternary: #72b585; $ternary: #72b585;
$hover-highlight: rgba(160, 219, 171, 0.5); $hover-highlight: rgba(160, 219, 171, 0.5);
$text: white; $text: white;
$background: white; $background: white;
$row-label-border-color: #73bd88; $row-label-border-color: #73bd88;
lib/scss/themes/grove/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/material-blue/_variables.scss
+7 -7
View File
@@ -1,7 +1,7 @@
$primary: #0d47a1; $primary: #0d47a1;
$secondary: #1565c0; $secondary: #1565c0;
$ternary: #42a5f5; $ternary: #42a5f5;
$hover-highlight: rgba(110, 165, 196, 0.5); $hover-highlight: rgba(110, 165, 196, 0.5);
$text: white; $text: white;
$background: white; $background: white;
$row-label-border-color: #45abff; $row-label-border-color: #45abff;
lib/scss/themes/material-blue/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/sky/_variables.scss
+7 -7
View File
@@ -1,7 +1,7 @@
$primary: #b5e3ff; $primary: #b5e3ff;
$secondary: #a1d6f7; $secondary: #a1d6f7;
$ternary: #d6f7ff; $ternary: #d6f7ff;
$hover-highlight: rgba(193, 202, 214, 0.5); $hover-highlight: rgba(193, 202, 214, 0.5);
$text: #022c47; $text: #022c47;
$background: white; $background: white;
$row-label-border-color: #cbf4fe; $row-label-border-color: #cbf4fe;
lib/scss/themes/sky/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/slumber/_variables.scss
+10 -10
View File
@@ -1,10 +1,10 @@
$primary: #2c2e36; $primary: #2c2e36;
$secondary: #2f3447; $secondary: #2f3447;
$ternary: #35394d; $ternary: #35394d;
$hover-highlight: rgba(179, 162, 127, 0.5); $hover-highlight: rgba(179, 162, 127, 0.5);
$text: #ffe0b3; $text: #ffe0b3;
$background: #38383b; $background: #38383b;
$highlighted: #7e7e7e; $highlighted: #7e7e7e;
$border-color: #444; $border-color: #444;
$marker-background: #666; $marker-background: #666;
$row-label-border-color: $border-color; $row-label-border-color: $border-color;
lib/scss/themes/slumber/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
lib/scss/themes/vue/_variables.scss
+7 -7
View File
@@ -1,7 +1,7 @@
$primary: #258a5d; $primary: #258a5d;
$secondary: #41b883; $secondary: #41b883;
$ternary: #35495e; $ternary: #35495e;
$hover-highlight: rgba(160, 219, 171, 0.5); $hover-highlight: rgba(160, 219, 171, 0.5);
$text: #fff; $text: #fff;
$background: #fff; $background: #fff;
$row-label-border-color: #384d63; $row-label-border-color: #384d63;
lib/scss/themes/vue/index.scss
+3 -3
View File
@@ -1,3 +1,3 @@
@import '../../variables'; @import '../../variables';
@import './variables'; @import './variables';
@import '../../ganttastic'; @import '../../ganttastic';
package-lock.json
Generated
+7 -7
View File
@@ -18,7 +18,7 @@
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^8.7.1", "eslint-plugin-vue": "^8.7.1",
"sass": "^1.51.0", "sass": "^1.52.1",
"sass-loader": "^10.2.1", "sass-loader": "^10.2.1",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
}, },
@@ -12809,9 +12809,9 @@
"dev": true "dev": true
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.51.0", "version": "1.52.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.1.tgz",
"integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==", "integrity": "sha512-fSzYTbr7z8oQnVJ3Acp9hV80dM1fkMN7mSD/25mpcct9F7FPBMOI8krEYALgU1aZoqGhQNhTPsuSmxjnIvAm4Q==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@@ -26849,9 +26849,9 @@
"dev": true "dev": true
}, },
"sass": { "sass": {
"version": "1.51.0", "version": "1.52.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.1.tgz",
"integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==", "integrity": "sha512-fSzYTbr7z8oQnVJ3Acp9hV80dM1fkMN7mSD/25mpcct9F7FPBMOI8krEYALgU1aZoqGhQNhTPsuSmxjnIvAm4Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
package.json
+1 -1
View File
@@ -55,7 +55,7 @@
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^8.7.1", "eslint-plugin-vue": "^8.7.1",
"sass": "^1.51.0", "sass": "^1.52.1",
"sass-loader": "^10.2.1", "sass-loader": "^10.2.1",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
}, },
public/index.html
+17 -17
View File
@@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
src/App.vue
+382 -382
View File
@@ -1,382 +1,382 @@
<template> <template>
<div> <div>
<select v-model="theme"> <select v-model="theme">
<option v-for="option in themes" :key="option" :value="option"> <option v-for="option in themes" :key="option" :value="option">
{{ option }} {{ option }}
</option> </option>
</select> </select>
<h2>Chart #1</h2> <h2>Chart #1</h2>
<g-gantt-chart <g-gantt-chart
:chart-start="chart1.chartStart" :chart-start="chart1.chartStart"
:chart-end="chart1.chartEnd" :chart-end="chart1.chartEnd"
:grid="chart1.grid" :grid="chart1.grid"
:grid-size="chart1.gridSize" :grid-size="chart1.gridSize"
day-format="dddd, DD. MMMM" day-format="dddd, DD. MMMM"
:hide-timeaxis="chart1.hideTimeaxis" :hide-timeaxis="chart1.hideTimeaxis"
:push-on-overlap="chart1.pushOnOverlap" :push-on-overlap="chart1.pushOnOverlap"
snap-back-on-overlap snap-back-on-overlap
:precision="chart1.precision" :precision="chart1.precision"
:is-magnetic="chart1.isMagnetic" :is-magnetic="chart1.isMagnetic"
:highlighted-hours="chart1.highlightedHours" :highlighted-hours="chart1.highlightedHours"
:highlighted-days="chart1.highlightedDays" :highlighted-days="chart1.highlightedDays"
:row-label-width="chart1.rowLabelWidth" :row-label-width="chart1.rowLabelWidth"
:row-height="chart1.rowHeight" :row-height="chart1.rowHeight"
:theme="theme" :theme="theme"
bar-config-key="config" bar-config-key="config"
bar-start-key="myStart" bar-start-key="myStart"
bar-end-key="myEnd" bar-end-key="myEnd"
@dragend-bar="onDragend($event)" @dragend-bar="onDragend($event)"
> >
<g-gantt-row <g-gantt-row
v-for="row in chart1.rows" v-for="row in chart1.rows"
:key="row.label" :key="row.label"
:label="row.label" :label="row.label"
:label-style="row.labelStyle" :label-style="row.labelStyle"
:row-style="row.style" :row-style="row.style"
:bars="row.bars" :bars="row.bars"
:highlight-on-hover="chart1.highlightOnHover" :highlight-on-hover="chart1.highlightOnHover"
> >
<template #bar-label="{ bar }"> <template #bar-label="{ bar }">
<span>{{ bar.label }}</span> <span>{{ bar.label }}</span>
</template> </template>
</g-gantt-row> </g-gantt-row>
</g-gantt-chart> </g-gantt-chart>
<h2>Chart #2</h2> <h2>Chart #2</h2>
<g-gantt-chart <g-gantt-chart
:chart-start="chart2.chartStart" :chart-start="chart2.chartStart"
:chart-end="chart2.chartEnd" :chart-end="chart2.chartEnd"
:grid="chart2.grid" :grid="chart2.grid"
:grid-size="chart2.gridSize" :grid-size="chart2.gridSize"
:hide-timeaxis="chart2.hideTimeaxis" :hide-timeaxis="chart2.hideTimeaxis"
:push-on-overlap="chart2.pushOnOverlap" :push-on-overlap="chart2.pushOnOverlap"
snap-back-on-overlap snap-back-on-overlap
:precision="chart2.precision" :precision="chart2.precision"
:is-magnetic="chart2.isMagnetic" :is-magnetic="chart2.isMagnetic"
:highlighted-days="chart2.highlightedDays" :highlighted-days="chart2.highlightedDays"
:row-label-width="chart2.rowLabelWidth" :row-label-width="chart2.rowLabelWidth"
:row-height="chart2.rowHeight" :row-height="chart2.rowHeight"
:theme="theme" :theme="theme"
:width="chart2.width" :width="chart2.width"
:height="chart2.height" :height="chart2.height"
:allow-add="chart2.allowAdd" :allow-add="chart2.allowAdd"
> >
<g-gantt-row <g-gantt-row
v-for="row in chart2.rows" v-for="row in chart2.rows"
:key="row.label" :key="row.label"
:label="row.label" :label="row.label"
:row-style="row.style" :row-style="row.style"
:bars="row.bars" :bars="row.bars"
:highlight-on-hover="chart2.highlightOnHover" :highlight-on-hover="chart2.highlightOnHover"
> >
<template #bar-label="{ bar }"> <template #bar-label="{ bar }">
<span>{{ bar.label }}</span> <span>{{ bar.label }}</span>
</template> </template>
</g-gantt-row> </g-gantt-row>
</g-gantt-chart> </g-gantt-chart>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data: () => ({ data: () => ({
theme: 'default', theme: 'default',
themes: [ themes: [
'creamy', 'creamy',
'crimson', 'crimson',
'dark', 'dark',
'default', 'default',
'flare', 'flare',
'fuchsia', 'fuchsia',
'grove', 'grove',
'material-blue', 'material-blue',
'sky', 'sky',
'slumber', 'slumber',
'vue' 'vue'
], ],
chart1: { chart1: {
chartStart: '2020-03-02 00:00', chartStart: '2020-03-02 00:00',
chartEnd: '2020-03-10 10:00', chartEnd: '2020-03-10 10:00',
precision: 'day', precision: 'day',
pushOnOverlap: true, pushOnOverlap: true,
isMagnetic: true, isMagnetic: true,
grid: true, grid: true,
gridSize: 30, gridSize: 30,
rowHeight: 40, rowHeight: 40,
rowLabelWidth: 200, rowLabelWidth: 200,
hideTimeaxis: false, hideTimeaxis: false,
highlightOnHover: true, highlightOnHover: true,
highlightedDays: ['2020-03-08'], highlightedDays: ['2020-03-08'],
highlightedHours: [10, 12], highlightedHours: [10, 12],
rows: [ rows: [
{ {
label: 'Row #1', label: 'Row #1',
bars: [ bars: [
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#404040', backgroundColor: '#404040',
opacity: 0.5, opacity: 0.5,
immobile: true immobile: true
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
bundle: 'blueBundle' bundle: 'blueBundle'
} }
} }
] ]
}, },
{ {
label: 'Row #2', label: 'Row #2',
labelStyle: { labelStyle: {
justifyContent: 'end' justifyContent: 'end'
}, },
style: { style: {
background: '#ffb0b07f' background: '#ffb0b07f'
}, },
bars: [ bars: [
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#de3b26', backgroundColor: '#de3b26',
bundle: 'redBundle' bundle: 'redBundle'
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
bundle: 'blueBundle' bundle: 'blueBundle'
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
config: { color: 'white', backgroundColor: '#aa34a3' } config: { color: 'white', backgroundColor: '#aa34a3' }
} }
] ]
}, },
{ {
label: 'Row #3', label: 'Row #3',
bars: [ bars: [
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#de3b26', backgroundColor: '#de3b26',
bundle: 'redBundle' bundle: 'redBundle'
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#a23def', backgroundColor: '#a23def',
handles: true handles: true
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#5effad', backgroundColor: '#5effad',
pushOnOverlap: false, pushOnOverlap: false,
zIndex: 2 zIndex: 2
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
background: background:
'repeating-linear-gradient(45deg, #de7359, #de7359 10px, #ffc803 10px, #ffc803 20px)' 'repeating-linear-gradient(45deg, #de7359, #de7359 10px, #ffc803 10px, #ffc803 20px)'
} }
} }
] ]
}, },
{ {
label: 'Row #4', label: 'Row #4',
bars: [ bars: [
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#d18aaf', backgroundColor: '#d18aaf',
handles: true handles: true
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
config: { config: {
color: 'white', color: 'white',
backgroundColor: '#f2840f', backgroundColor: '#f2840f',
borderRadius: 0 borderRadius: 0
} }
} }
] ]
} }
] ]
}, },
chart2: { chart2: {
chartStart: '2020-03-01 00:00', chartStart: '2020-03-01 00:00',
chartEnd: '2020-04-01 00:00', chartEnd: '2020-04-01 00:00',
precision: 'month', precision: 'month',
pushOnOverlap: false, pushOnOverlap: false,
isMagnetic: true, isMagnetic: true,
grid: true, grid: true,
gridSize: 50, gridSize: 50,
rowHeight: 40, rowHeight: 40,
rowLabelWidth: 300, rowLabelWidth: 300,
hideTimeaxis: false, hideTimeaxis: false,
highlightOnHover: true, highlightOnHover: true,
highlightedDays: [ highlightedDays: [
'2020-03-01', '2020-03-01',
'2020-03-08', '2020-03-08',
'2020-03-15', '2020-03-15',
'2020-03-22', '2020-03-22',
'2020-03-29' '2020-03-29'
], ],
width: '90vw', width: '90vw',
height: '250px', height: '250px',
allowAdd: false, allowAdd: false,
rows: [ rows: [
{ {
label: 'Row #1', label: 'Row #1',
bars: [ bars: [
{ {
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', tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
bundle: 'blueBundle' bundle: 'blueBundle'
} }
} }
] ]
}, },
{ {
label: 'Row #2', label: 'Row #2',
bars: [ bars: [
{ {
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', tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#2e74a3', backgroundColor: '#2e74a3',
bundle: 'blueBundle' bundle: 'blueBundle'
} }
}, },
{ {
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', tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#de3b26' backgroundColor: '#de3b26'
} }
} }
] ]
}, },
{ {
label: 'Row #3', label: 'Row #3',
bars: [ bars: [
{ {
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', tooltip: 'Bar tooltip',
ganttBarConfig: { ganttBarConfig: {
color: 'white', color: 'white',
backgroundColor: '#408e2f' backgroundColor: '#408e2f'
} }
} }
], ],
style: { style: {
background: background:
'linear-gradient(-45deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 52%)', 'linear-gradient(-45deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 52%)',
backgroundSize: '1em 1em' backgroundSize: '1em 1em'
} }
}, },
{ {
label: label:
'Lorem ipsum dolor sit amet. Vel odit debitis qui aliquam sequi et reprehenderit Quis. Et ipsam enim aut culpa quia sed maiores veniam in consequuntur accusantium.', 'Lorem ipsum dolor sit amet. Vel odit debitis qui aliquam sequi et reprehenderit Quis. Et ipsam enim aut culpa quia sed maiores veniam in consequuntur accusantium.',
bars: [] bars: []
}, },
{ {
label: 'Row #5', label: 'Row #5',
bars: [] bars: []
}, },
{ {
label: 'Row #6', label: 'Row #6',
bars: [] bars: []
}, },
{ {
label: 'Row #7', label: 'Row #7',
bars: [] bars: []
}, },
{ {
label: 'Row #8', label: 'Row #8',
bars: [] bars: []
} }
] ]
} }
}), }),
methods: { methods: {
onDragend(e) { onDragend(e) {
const { event, bar, movedBars } = e const { event, bar, movedBars } = e
// eslint-disable-next-line // eslint-disable-next-line
console.log('onDragend', { event: event.type, bar, movedBars }) console.log('onDragend', { event: event.type, bar, movedBars })
} }
} }
} }
</script> </script>
<style lang="scss" src="../lib/scss/index.scss"></style> <style lang="scss" src="../lib/scss/index.scss"></style>
src/main.js
+12 -12
View File
@@ -1,12 +1,12 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import { GGanttChart, GGanttRow } from '../lib' import { GGanttChart, GGanttRow } from '../lib'
Vue.component('GGanttChart', GGanttChart) Vue.component('GGanttChart', GGanttChart)
Vue.component('GGanttRow', GGanttRow) Vue.component('GGanttRow', GGanttRow)
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')
vetur.config.js
+8 -8
View File
@@ -1,8 +1,8 @@
// vetur.config.js // vetur.config.js
/** @type {import('vls').VeturConfig} */ /** @type {import('vls').VeturConfig} */
module.exports = { module.exports = {
settings: { settings: {
'vetur.ignoreProjectWarning': true, 'vetur.ignoreProjectWarning': true,
}, },
projects: ['./'], projects: ['./'],
} }
vue.config.js
+24 -24
View File
@@ -1,24 +1,24 @@
const isBuildLib = const isBuildLib =
(process.env.npm_lifecycle_script || '').indexOf('--target lib') > 0 (process.env.npm_lifecycle_script || '').indexOf('--target lib') > 0
module.exports = { module.exports = {
publicPath: '', publicPath: '',
outputDir: isBuildLib ? 'dist' : 'demo', outputDir: isBuildLib ? 'dist' : 'demo',
css: { css: {
loaderOptions: { loaderOptions: {
sass: { sass: {
implementation: require('sass') implementation: require('sass')
} }
}, },
extract: true extract: true
}, },
productionSourceMap: false, productionSourceMap: false,
chainWebpack: config => { chainWebpack: config => {
if (process.env.VUE_CLI_BUILD_TARGET === 'lib') { if (process.env.VUE_CLI_BUILD_TARGET === 'lib') {
config.externals({ config.externals({
...config.get('externals'), ...config.get('externals'),
moment: 'moment' moment: 'moment'
}) })
} }
} }
} }