Label rows in left, current time marker and week precision #102
Conversation
adding DyslexiaS's change from PR zunnzunn#20; adjusting week start of the year
adjusting tooltip text
Add week precision
adjusting the end of the lowe unit
adjusting configs
Add week precision
creating current time component; adjusting color schemes to receive new fields
adjusting version
refactoring the logic of units time
adjusting-upper-lower-unit-time
Add current time marker
…oas/vue-ganttastic into add-current-time-marker
Add current time marker
creating a column with labels on the left side of the gantt; leaving the feature dynamic and optional; adjusting the lint of existing code
src/components/GGanttCurrentTime.vue
Outdated
| border: `1px dashed ${colors.markerCurrentTime}` | ||
| }" | ||
| /> | ||
| <span class="g-grid-current-time-text" :style="{ color: colors.markerCurrentTime }">TODAY</span> |
There was a problem hiding this comment.
"TODAY" is not always a fitting label, e.g. in case the time range of the chart (chart-start - chart-end) is within a single day. It'd be good to omit the label or, even better, make it an optional prop.
There was a problem hiding this comment.
by default, i changed the span to NOW, but now it's possible to change the span and the div with a <slot> tag
Default behaviour:
Custom behaviour:
There was a problem hiding this comment.
This pull request is much appreciated! The features it brings have been highly anticipated. I have addressed some issues that ought to be resolved before we merge this.
PR #101 will be deleted as it is fully included in this PR.
src/components/GGanttColumn.vue
Outdated
| @@ -0,0 +1,70 @@ | |||
| <template> | |||
| <div class="g-gantt-column" :style="{ fontFamily: font, color: colors.text }"> | |||
| <span class="g-gantt-header" :style="{ background: colors.primary }">{{ columnTitle }}</span> | |||
There was a problem hiding this comment.
While we are at it, we could expose a <slot>for the label column title.
There was a problem hiding this comment.
by default, column title and label are the same behaviour before, but now it's possible to change them with a <slot> tag
Default behaviour:
Custom behaviour:
making the changes requested by zunnzunn
making the changes requested by zunnzunn
adjusting lint code
zunnzunn
changed the title
src/components/GGanttChart.vue
Outdated
| @@ -68,6 +92,9 @@ export interface GGanttChartProps { | |||
| rowHeight?: number | |||
| highlightedUnits?: number[] | |||
| font?: string | |||
| labels?: string[] | |||
There was a problem hiding this comment.
This prop seems to be superfluous. I assume it's a leftover from some other implementation you have tried? Anyways, it should be deleted.
src/components/GGanttChart.vue
Outdated
| @@ -153,6 +184,32 @@ const getChartRows = () => { | |||
| return allBars | |||
| } | |||
|
|
|||
| const labels = computed(() => { | |||
There was a problem hiding this comment.
This is basically a duplicate of getChartRows(). It'd be better to extend getChartRows() so that it collects the row labels alongside the bars.
|
@Pedrocanoas Since I haven't been working on this repo for a while, I got the urge to step in and address all the aforementioned issues together with you. A pleasant collaboration with you! 😄 |
|
The formatting of the tooltip text for |
|
Alright, we are done here! New release with these features coming next week! |
I am happy to collaborate with this project and for having accepted my features. I hope to continue contributing to the open source community |
Hey folks!
This PR brings the functionality of placing the row labels in a separate column to the left, instead of being next to the bars
#31 -> Placing line labels to the left
Some examples of how the functionality looked:
I apologize, but I just noticed that this PR has the same changes as before (#101) Anyone to help ?