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

chore: now "rowLabelWidth" is number

Browse Source 
feat: added prop "gridSize"
This commit is contained in:
Сергей Солодягин
2021-10-13 21:51:08 +03:00
parent feccc27a5d
commit 0e97eee15f
11 changed files with 222 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc
-19
View File
@@ -1,19 +0,0 @@
{
// "arrowParens": "always",
"bracketSpacing": true,
// "embeddedLanguageFormatting": "auto",
// "htmlWhitespaceSensitivity": "css",
// "insertPragma": false,
// "jsxBracketSameLine": false,
// "jsxSingleQuote": false,
// "printWidth": 80,
// "proseWrap": "preserve",
// "quoteProps": "as-needed",
// "requirePragma": false,
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": true
}
.prettierrc.js
+19
View File
@@ -0,0 +1,19 @@
module.exports = {
arrowParens: 'always',
bracketSpacing: true,
// "embeddedLanguageFormatting": "auto",
// "htmlWhitespaceSensitivity": "css",
// "insertPragma": false,
// "jsxBracketSameLine": false,
// "jsxSingleQuote": false,
// "printWidth": 80,
// "proseWrap": "preserve",
// "quoteProps": "as-needed",
// "requirePragma": false,
semi: false,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
useTabs: false,
vueIndentScriptAndStyle: true,
}
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.2", "version": "0.10.6",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.2", "version": "0.10.6",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue": "^2.6.14" "vue": "^2.6.14"
package.json
+29 -28
View File
@@ -1,17 +1,26 @@
{ {
"name": "@tenrok/vue-ganttastic", "name": "@tenrok/vue-ganttastic",
"version": "0.10.2", "version": "0.10.6",
"description": "A simple and customizable Gantt chart component for Vue.js", "description": "A simple and customizable Gantt chart component for Vue.js",
"keywords": [
"gantt",
"chart",
"bar",
"diagram",
"vue",
"vuejs",
"ganttastic"
],
"homepage": "https://github.com/tenrok/vue-ganttastic#readme",
"bugs": {
"url": "https://github.com/tenrok/vue-ganttastic/issues"
},
"license": "MIT",
"author": { "author": {
"name": "Marko Zunic", "name": "Marko Zunic",
"email": "marko.zunic06@gmail.com", "email": "marko.zunic06@gmail.com",
"url": "https://github.com/InfectoOne/vue-ganttastic" "url": "https://github.com/InfectoOne/vue-ganttastic"
}, },
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/tenrok/vue-ganttastic.git"
},
"contributors": [ "contributors": [
{ {
"name": "Yicone Wong", "name": "Yicone Wong",
@@ -22,23 +31,22 @@
"url": "https://github.com/solodyagin" "url": "https://github.com/solodyagin"
} }
], ],
"main": "./dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "bili"
},
"files": [ "files": [
"dist/*" "dist/*"
], ],
"keywords": [ "main": "./dist/index.js",
"gantt", "repository": {
"chart", "type": "git",
"bar", "url": "git+https://github.com/tenrok/vue-ganttastic.git"
"diagram", },
"vue", "scripts": {
"vuejs", "test": "echo \"Error: no test specified\" && exit 1",
"ganttastic" "build": "bili --plugin.vue",
], "serve": "vue serve ./src/Playground.vue"
},
"dependencies": {
"vue": "^2.6.14"
},
"devDependencies": { "devDependencies": {
"bili": "^4.10.0", "bili": "^4.10.0",
"rollup-plugin-vue": "^5.1.9", "rollup-plugin-vue": "^5.1.9",
@@ -46,12 +54,5 @@
}, },
"peerDependencies": { "peerDependencies": {
"moment": "^2.26.0" "moment": "^2.26.0"
}, }
"dependencies": {
"vue": "^2.6.14"
},
"bugs": {
"url": "https://github.com/tenrok/vue-ganttastic/issues"
},
"homepage": "https://github.com/tenrok/vue-ganttastic#readme"
} }
src/GGanttBar.vue
+7 -8
View File
@@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div <div
:class="['g-gantt-bar', { 'g-gantt-bar-immobile': barConfig.immobile }]"
ref="g-gantt-bar" ref="g-gantt-bar"
:class="['g-gantt-bar', { 'g-gantt-bar-immobile': barConfig.immobile }]"
:style="barStyle" :style="barStyle"
@mouseenter.stop="onMouseenter($event)" @mouseenter.stop="onMouseenter($event)"
@mouseleave.stop="onMouseleave($event)" @mouseleave.stop="onMouseleave($event)"
@@ -35,9 +35,7 @@
this.barStyle.background || this.barStyle.backgroundColor, this.barStyle.background || this.barStyle.backgroundColor,
}" }"
/> />
{{ barStartText }} {{ barStartText }} - {{ barEndText }}
-
{{ barEndText }}
</div> </div>
</transition> </transition>
</div> </div>
@@ -75,11 +73,9 @@ export default {
dragLimitLeft: null, dragLimitLeft: null,
dragLimitRight: null, dragLimitRight: null,
isDragging: false, isDragging: false,
isMainBarOfDrag: false, // is this the bar that was clicked on when starting to drag isMainBarOfDrag: false, // is this the bar that was clicked on when starting to drag or is it dragged along some other bar from the same bundle
// or is it dragged along some other bar from the same bundle
cursorOffsetX: 0, cursorOffsetX: 0,
mousemoveCallback: null, // gets initialized when starting to drag mousemoveCallback: null, // gets initialized when starting to drag, possible values: drag, dragByHandleLeft, dragByHandleRight,
// possible values: drag, dragByHandleLeft, dragByHandleRight,
barStartBeforeDrag: null, barStartBeforeDrag: null,
barEndBeforeDrag: null, barEndBeforeDrag: null,
timeUnit: this.getTimeUnit(), timeUnit: this.getTimeUnit(),
@@ -102,6 +98,7 @@ export default {
this.bar[this.barStartKey] = value.format(this.timeFormat) this.bar[this.barStartKey] = value.format(this.timeFormat)
}, },
}, },
barEndMoment: { barEndMoment: {
get() { get() {
return moment(this.bar[this.barEndKey]) return moment(this.bar[this.barEndKey])
@@ -110,6 +107,7 @@ export default {
this.bar[this.barEndKey] = value.format(this.timeFormat) this.bar[this.barEndKey] = value.format(this.timeFormat)
}, },
}, },
barStartText: { barStartText: {
get() { get() {
return moment(this.barStartMoment).format(this.timeChildFormat) return moment(this.barStartMoment).format(this.timeChildFormat)
@@ -210,6 +208,7 @@ export default {
if (e.button === 2) { if (e.button === 2) {
return return
} }
if (!this.barConfig.immobile && !this.barConfig.isShadow) { if (!this.barConfig.immobile && !this.barConfig.isShadow) {
this.setDragLimitsOfGanttBar(this) this.setDragLimitsOfGanttBar(this)
// initialize the dragging on next mousemove event: // initialize the dragging on next mousemove event:
src/GGanttChart.vue
+5 -6
View File
@@ -14,6 +14,7 @@
:precision="precision" :precision="precision"
:time-format="timeFormat" :time-format="timeFormat"
:time-count="timeCount" :time-count="timeCount"
:grid-size="gridSize"
/> />
<g-gantt-grid <g-gantt-grid
@@ -24,15 +25,12 @@
:highlighted-hours="highlightedHours" :highlighted-hours="highlightedHours"
:precision="precision" :precision="precision"
:time-count="timeCount" :time-count="timeCount"
:grid-size="gridSize"
/> />
<div <div
class="g-gantt-rows-container" class="g-gantt-rows-container"
:style="{ :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
width: `${
timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))
}px`,
}"
> >
<slot /> <slot />
<!-- the g-gantt-row components go here --> <!-- the g-gantt-row components go here -->
@@ -60,11 +58,12 @@ export default {
chartStart: { type: String }, chartStart: { type: String },
chartEnd: { type: String }, chartEnd: { type: String },
hideTimeaxis: { type: Boolean }, hideTimeaxis: { type: Boolean },
rowLabelWidth: { type: String, default: '200px' }, 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 }, grid: { type: Boolean },
gridSize: { type: Number, default: 30 },
highlightedHours: { type: Array, default: () => [] }, highlightedHours: { type: Array, default: () => [] },
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 %
pushOnOverlap: { type: Boolean }, pushOnOverlap: { type: Boolean },
src/GGanttGrid.vue
+22 -20
View File
@@ -1,21 +1,20 @@
<template> <template>
<div <div
class="g-grid-container" class="g-grid-container"
:style="{ :style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }"
left: rowLabelWidth,
width: `${timeCount * 30}px`,
}"
> >
<div <div
v-for="(childPoint, index) in allChildPoints" v-for="(childPoint, index) in allChildPoints"
:key="index" :key="index"
:class="[ :class="[
'g-grid-line', 'g-grid-line',
{ 'g-grid-line-last': index === allChildPoints.length - 1 },
{ {
'g-grid-line-highlighted': 'g-grid-line-highlighted':
precision === 'day' && highlightedHours.includes(childPoint), precision === 'day' && highlightedHours.includes(childPoint),
}, },
]" ]"
:style="{ width: `${gridSize}px` }"
/> />
</div> </div>
</template> </template>
@@ -29,26 +28,27 @@ export default {
props: { props: {
chartStart: { type: String }, chartStart: { type: String },
chartEnd: { type: String }, chartEnd: { type: String },
rowLabelWidth: { type: String }, rowLabelWidth: { type: Number },
highlightedHours: { type: Array, default: () => [] }, highlightedHours: { type: Array, default: () => [] },
precision: { type: String }, precision: { type: String },
timeCount: { type: Number }, timeCount: { type: Number },
gridSize: { type: Number },
}, },
computed: { computed: {
allChildPoints() { allChildPoints() {
let momentChartStart = moment(this.chartStart) let start = moment(this.chartStart)
let momentChartEnd = moment(this.chartEnd) let end = moment(this.chartEnd)
let res = [] let res = []
while (momentChartStart.isSameOrBefore(momentChartEnd)) { while (start.isBefore(end)) {
switch (this.precision) { switch (this.precision) {
case 'day': case 'day':
res.push(momentChartStart.date()) res.push(start.hour())
momentChartStart.add(1, 'hour') start.add(1, 'hour')
break break
case 'month': case 'month':
res.push(momentChartStart.date()) res.push(start.date())
momentChartStart.add(1, 'day') start.add(1, 'day').hour(23)
break break
} }
} }
@@ -62,21 +62,23 @@ export default {
.g-grid-container { .g-grid-container {
position: absolute; position: absolute;
top: 0; top: 0;
/* left: 30%; must correspond to width of row title */
/* width: 70%; */
height: calc(100% - 23px); height: calc(100% - 23px);
display: flex; overflow: hidden;
justify-content: space-between;
} }
.g-grid-line { .g-grid-line {
width: 1px;
height: 100%; height: 100%;
background: #eaeaea; border: 1px solid transparent;
border-left: 1px solid #eaeaea;
box-sizing: border-box;
display: inline-block;
}
.g-grid-line-last {
border-right: 1px solid #eaeaea;
} }
.g-grid-line-highlighted { .g-grid-line-highlighted {
background: #90caf9; background: #dcefff;
box-shadow: 0px 0px 0px 1px #90caf9;
} }
</style> </style>
src/GGanttRow.vue
+23 -28
View File
@@ -6,14 +6,13 @@
v-on="$listeners" v-on="$listeners"
> >
<div class="g-gantt-row-label" :style="rowLabelStyle"> <div class="g-gantt-row-label" :style="rowLabelStyle">
<slot name="label"> <span :title="label">
{{ label }} <slot name="label">{{ label }}</slot>
</slot> </span>
</div> </div>
<div <div
class="g-gantt-row-bars-container" class="g-gantt-row-bars-container"
ref="barContainer" ref="barContainer"
:style="barsContainerStyle"
@dragover="onDragover($event)" @dragover="onDragover($event)"
@dragleave="onDragleave($event)" @dragleave="onDragleave($event)"
@drop="onDrop($event)" @drop="onDrop($event)"
@@ -51,11 +50,10 @@ export default {
props: { props: {
label: { type: String, default: 'Row' }, label: { type: String, default: 'Row' },
bars: { type: Array, default: () => [] }, bars: { type: Array, default: () => [] },
highlightOnHover: Boolean, highlightOnHover: { type: Boolean },
}, },
inject: [ inject: [
'ganttChartProps',
'getThemeColors', 'getThemeColors',
'getTimeCount', 'getTimeCount',
'getChartStart', 'getChartStart',
@@ -76,20 +74,12 @@ export default {
computed: { computed: {
rowLabelStyle() { rowLabelStyle() {
return { return {
width: this.ganttChartProps.rowLabelWidth, width: `${this.$parent.rowLabelWidth}px`,
height: this.ganttChartProps.rowHeight, // height: `${this.$parent.rowHeight}px`,
background: this.$parent.themeColors.ternary, background: this.$parent.themeColors.ternary,
color: this.$parent.themeColors.text, color: this.$parent.themeColors.text,
} }
}, },
barsContainerStyle() {
return {
width: `${
100 /*- this.ganttChartProps.rowLabelWidth.replace('%', '')*/
}%`,
}
},
}, },
mounted() { mounted() {
@@ -124,8 +114,8 @@ export default {
) )
let bar = this.bars.find((bar) => let bar = this.bars.find((bar) =>
time.isBetween( time.isBetween(
bar[this.ganttChartProps.barStartKey], bar[this.$parent.barStartKey],
bar[this.ganttChartProps.barEndKey] bar[this.$parent.barEndKey]
) )
) )
this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) }) this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) })
@@ -142,16 +132,16 @@ export default {
this.timeUnit this.timeUnit
) )
let bar = {} let bar = {}
bar[this.ganttChartProps.barStartKey] = time.format() bar[this.$parent.barStartKey] = time.format()
bar[this.ganttChartProps.barEndKey] = time bar[this.$parent.barEndKey] = time
.add(this.getDefaultBarLength(), this.timeUnit) .add(this.getDefaultBarLength(), this.timeUnit)
.format() .format()
bar.ganttBarConfig = { handles: true } bar.ganttBarConfig = { handles: true }
this.bars.push(bar) this.bars.push(bar)
this.bars.sort((first, second) => this.bars.sort((first, second) =>
moment(first[this.ganttChartProps.barStartKey]).diff( moment(first[this.$parent.barStartKey]).diff(
second[this.ganttChartProps.barStartKey] second[this.$parent.barStartKey]
) )
) )
}, },
@@ -176,7 +166,7 @@ export default {
}, },
watch: { watch: {
'ganttChartProps.rowLabelWidth': function () { '$parent.rowLabelWidth': function () {
this.barContainer = this.$refs.barContainer.getBoundingClientRect() this.barContainer = this.$refs.barContainer.getBoundingClientRect()
}, },
}, },
@@ -193,23 +183,28 @@ export default {
.g-gantt-row > .g-gantt-row-label { .g-gantt-row > .g-gantt-row-label {
display: flex; display: flex;
justify-content: center; /* justify-content: center; */
align-items: center; align-items: center;
/* width: 20%; */
background: #e8e8e8; background: #e8e8e8;
color: #424242; color: #424242;
font-size: 0.9em; font-size: 0.9em;
z-index: 3; z-index: 3;
overflow: hidden;
font-weight: bold; font-weight: bold;
left: 0; left: 0;
position: sticky; position: sticky;
padding: 0 10px;
box-sizing: border-box;
}
.g-gantt-row > .g-gantt-row-label > * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.g-gantt-row > .g-gantt-row-bars-container { .g-gantt-row > .g-gantt-row-bars-container {
position: relative; position: relative;
border-top: 1px solid #eaeaea; /* border-top: 1px solid #eaeaea; */
/* width: 70%; */
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;
flex: 1; flex: 1;
} }
src/GGanttTimeaxis.vue
+16 -17
View File
@@ -2,13 +2,14 @@
<div <div
ref="g-timeaxis" ref="g-timeaxis"
class="g-timeaxis" class="g-timeaxis"
:style="{ :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
width: `${timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))}px`,
}"
> >
<div <div
class="g-timeaxis-empty-space" class="g-timeaxis-empty-space"
:style="{ minWidth: rowLabelWidth, background: themeColors.secondary }" :style="{
minWidth: `${rowLabelWidth}px`,
background: themeColors.secondary,
}"
/> />
<div class="g-timeaxis-days"> <div class="g-timeaxis-days">
<div <div
@@ -30,7 +31,7 @@
:key="childPoint.fullDatetime" :key="childPoint.fullDatetime"
class="g-timeaxis-hour" class="g-timeaxis-hour"
:style="{ :style="{
width: '30px', width: `${gridSize}px`,
background: background:
index % 2 === 0 ? themeColors.primary : themeColors.secondary, index % 2 === 0 ? themeColors.primary : themeColors.secondary,
color: themeColors.text, color: themeColors.text,
@@ -60,13 +61,14 @@ export default {
props: { props: {
chartStart: { type: String }, chartStart: { type: String },
chartEnd: { type: String }, chartEnd: { type: String },
rowLabelWidth: { type: String }, rowLabelWidth: { type: Number },
timemarkerOffset: { type: Number, default: 0 }, timemarkerOffset: { type: Number, default: 0 },
locale: { type: String }, locale: { type: String },
themeColors: { type: Object }, themeColors: { type: Object },
precision: { type: String }, precision: { type: String },
timeFormat: { type: String }, timeFormat: { type: String },
timeCount: { type: Number }, timeCount: { type: Number },
gridSize: { type: Number },
}, },
data() { data() {
@@ -192,12 +194,14 @@ export default {
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
this.timemarker.style.left = let pos =
chart.scrollLeft + chart.scrollLeft +
event.clientX - event.clientX -
this.timemarkerOffset - this.timemarkerOffset -
this.horizontalAxisContainer.left + this.horizontalAxisContainer.left
'px' if (pos > this.horizontalAxisContainer.width)
pos = this.horizontalAxisContainer.width
this.timemarker.style.left = `${pos}px`
}, },
onWindowResize() { onWindowResize() {
@@ -222,10 +226,9 @@ export default {
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 >= (1 / 32) * 100 return point.widthPercentage >= (3 / 32) * 100
// ? moment().locale(this.locale).localeData().months(point.value) ? moment(point.value).locale(this.locale).format(this.monthFormat)
// : '' : ''
return moment(point.value).locale(this.locale).format(this.monthFormat)
}, },
dayFormatted(point) { dayFormatted(point) {
@@ -260,7 +263,6 @@ export default {
} }
.g-timeaxis > .g-timeaxis-empty-space { .g-timeaxis > .g-timeaxis-empty-space {
/* width: 20%; this has to be as wide as .ganttRowTitle in VGanttastic.css */
min-height: 100%; min-height: 100%;
background: #f5f5f5; background: #f5f5f5;
z-index: 5; z-index: 5;
@@ -270,7 +272,6 @@ export default {
.g-timeaxis > .g-timeaxis-days { .g-timeaxis > .g-timeaxis-days {
position: relative; position: relative;
/* width: 80%; */
height: 100%; height: 100%;
} }
@@ -308,7 +309,6 @@ export default {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
opacity: 0.5; opacity: 0.5;
/* width: 100%; */
} }
.g-timeaxis-hour-pin { .g-timeaxis-hour-pin {
@@ -325,4 +325,3 @@ export default {
background: black; background: black;
} }
</style> </style>
src/GanttasticThemeColors.js
+79 -80
View File
@@ -1,103 +1,102 @@
export default { export default {
default: {
"default": { primary: '#eeeeee',
primary: "#eeeeee", secondary: '#E0E0E0',
secondary: "#E0E0E0", ternary: '#F5F5F5',
ternary: "#F5F5F5", hoverHighlight: 'rgba(204, 216, 219, 0.5)',
hoverHighlight: "rgba(204, 216, 219, 0.5)", text: '#404040',
text: "#404040", background: 'white'
background: "white"
}, },
"creamy": { creamy: {
primary:"#ffe8d9", primary: '#ffe8d9',
secondary: "#fcdcc5", secondary: '#fcdcc5',
ternary:"#fff6f0", ternary: '#fff6f0',
hoverHighlight: "rgba(230, 221, 202, 0.5)", hoverHighlight: 'rgba(230, 221, 202, 0.5)',
text: "#542d05", text: '#542d05',
background: "white" background: 'white'
}, },
"crimson":{ crimson: {
primary:"#a82039", primary: '#a82039',
secondary: "#c41238", secondary: '#c41238',
ternary:"#db4f56", ternary: '#db4f56',
hoverHighlight: "rgba(196, 141, 141, 0.5)", hoverHighlight: 'rgba(196, 141, 141, 0.5)',
text: "white", text: 'white',
background: "white" background: 'white'
}, },
"dark": { dark: {
primary:"#404040", primary: '#404040',
secondary: "#303030", secondary: '#303030',
ternary:"#353535", ternary: '#353535',
hoverHighlight: "rgba(159, 160, 161, 0.5)", hoverHighlight: 'rgba(159, 160, 161, 0.5)',
text: "white", text: 'white',
background: "#525252", background: '#525252',
toast: "#1f1f1f" toast: '#1f1f1f'
}, },
"flare": { flare: {
primary:"#e08a38", primary: '#e08a38',
secondary: "#e67912", secondary: '#e67912',
ternary:"#5e5145", ternary: '#5e5145',
hoverHighlight: "rgba(196, 141, 141, 0.5)", hoverHighlight: 'rgba(196, 141, 141, 0.5)',
text: "white", text: 'white',
background: "white" background: 'white'
}, },
"fuchsia": { fuchsia: {
primary:"#de1d5a", primary: '#de1d5a',
secondary: "#b50b41", secondary: '#b50b41',
ternary:"#ff7da6", ternary: '#ff7da6',
hoverHighlight: "rgba(196, 141, 141, 0.5)", hoverHighlight: 'rgba(196, 141, 141, 0.5)',
text: "white", text: 'white',
background: "white" background: 'white'
}, },
"grove": { grove: {
primary:"#3d9960", primary: '#3d9960',
secondary: "#288542", secondary: '#288542',
ternary:"#72b585", ternary: '#72b585',
hoverHighlight: "rgba(160, 219, 171, 0.5)", hoverHighlight: 'rgba(160, 219, 171, 0.5)',
text: "white", text: 'white',
background: "white" background: 'white'
}, },
"material-blue": { 'material-blue': {
primary:"#0D47A1", primary: '#0D47A1',
secondary: "#1565C0", secondary: '#1565C0',
ternary:"#42a5f5", ternary: '#42a5f5',
hoverHighlight: "rgba(110, 165, 196, 0.5)", hoverHighlight: 'rgba(110, 165, 196, 0.5)',
text: "white", text: 'white',
background: "white" background: 'white'
}, },
"sky": { sky: {
primary:"#b5e3ff", primary: '#b5e3ff',
secondary: "#a1d6f7", secondary: '#a1d6f7',
ternary:"#d6f7ff", ternary: '#d6f7ff',
hoverHighlight: "rgba(193, 202, 214, 0.5)", hoverHighlight: 'rgba(193, 202, 214, 0.5)',
text: "#022c47", text: '#022c47',
background: "white" background: 'white'
}, },
"slumber":{ slumber: {
primary:"#2c2e36", primary: '#2c2e36',
secondary: "#2f3447", secondary: '#2f3447',
ternary:"#35394d", ternary: '#35394d',
hoverHighlight: "rgba(179, 162, 127, 0.5)", hoverHighlight: 'rgba(179, 162, 127, 0.5)',
text: "#ffe0b3", text: '#ffe0b3',
background: "#38383b", background: '#38383b',
toast:"#1f1f1f" toast: '#1f1f1f'
}, },
"vue": { vue: {
primary:"#258a5d", primary: '#258a5d',
secondary: "#41B883", secondary: '#41B883',
ternary:"#35495E", ternary: '#35495E',
hoverHighlight: "rgba(160, 219, 171, 0.5)", hoverHighlight: 'rgba(160, 219, 171, 0.5)',
text: "white", text: 'white',
background: "white" background: 'white'
} }
} }
src/Playground.vue
+16 -18
View File
@@ -5,6 +5,7 @@
:chart-start="chartStart" :chart-start="chartStart"
:chart-end="chartEnd" :chart-end="chartEnd"
:grid="grid" :grid="grid"
:grid-size="gridSize"
:hide-timeaxis="hideTimeaxis" :hide-timeaxis="hideTimeaxis"
:push-on-overlap="pushOnOverlap" :push-on-overlap="pushOnOverlap"
snap-back-on-overlap snap-back-on-overlap
@@ -18,18 +19,17 @@
barEndKey="myEnd" barEndKey="myEnd"
@dragend-bar="onDragend($event)" @dragend-bar="onDragend($event)"
> >
<template v-for="row in rowList"> <g-gantt-row
<g-gantt-row v-for="row in rowList"
:key="row.label" :key="row.label"
:label="row.label" :label="row.label"
:bars="row.barList" :bars="row.barList"
:highlight-on-hover="highlightOnHover" :highlight-on-hover="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>
</template>
</g-gantt-chart> </g-gantt-chart>
</div> </div>
</template> </template>
@@ -46,15 +46,16 @@ export default {
data() { data() {
return { return {
chartStart: '2020-03-02 00:00', chartStart: '2020-03-02 00:00',
chartEnd: '2020-03-31 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: 50,
rowHeight: 40, rowHeight: 40,
rowLabelWidth: '200px', rowLabelWidth: 200,
hideTimeaxis: false, hideTimeaxis: false,
highlightOnHover: false, highlightOnHover: true,
hours: [...Array(24).keys()], hours: [...Array(24).keys()],
highlightedHours: [10, 12], highlightedHours: [10, 12],
showContextmenu: false, showContextmenu: false,
@@ -220,6 +221,3 @@ export default {
}, },
} }
</script> </script>
<style>
</style>