Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat+doc: added GGanttChart/highlight-sundays #95

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat+doc: added GGanttChart/highlight-sundays #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e641de3
feat+doc: added GGanttChart/highlight-sundays
N0ah-S Feb 10, 2024
5583e2c
fix: removed unused css class
N0ah-S Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 18 additions & 17 deletions docs/GGanttChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
# API: GGanttChart
The main component of Vue Ganttastic. Represents an entire chart and is meant to have at least one `g-gantt-row` child component.
## Props
| Prop | Type | Default | Description |
|-------------|---------|---------|------------------------------|
| `chart-start` | string | | Start date-time of the chart.
| `chart-end` | string | | End date-time of the chart.
| `precision` | string? | `"hour"` | Display precision of the time-axis. Possible values: `hour`, `day` and `month`. |
| `bar-start` | string | | Name of the property in bar objects that represents the start date.
| `bar-end` | string | | Name of the property in bar objects that represents the end date .
| `date-format` | string \| false | `"YYYY-MM-DD HH:mm"` | Datetime string format of `chart-start`, `chart-end` and the values of the `bar-start`, `bar-end` properties in bar objects. See [Day.js format tokens](https://day.js.org/docs/en/parse/string-format). If the aforementioned properties are native JavaScript [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) objects in your use case, pass `false`.
| `width` | string? | `"100%"` | Width of the chart (e.g. `80%` or `800px`)
| `hide-timeaxis` | boolean? | `false` | Toggle visibility of the time axis.
| `color-scheme` | string \| ColorScheme | `"default"` | Color scheme (theme) of the chart. Either use the name of one of the predefined schemes or pass a color-scheme-object of your own. See [color schemes](#color-schemes).
| `grid` | string? | `false` | Toggle visibility of background grid.
| `push-on-overlap` | boolean? | `false` | Specifies whether bars "push one another" when dragging and overlaping.
| `no-overlap` | boolean? | `false` | If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position.
| `row-height` | number? | `40` |Height of each row in pixels.
| `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color.
| `font` | `string` | `"Helvetica"`| Font family of the chart.
| Prop | Type | Default | Description |
|---------------------|-----------------------|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `chart-start` | string | | Start date-time of the chart. |
| `chart-end` | string | | End date-time of the chart. |
| `precision` | string? | `"hour"` | Display precision of the time-axis. Possible values: `hour`, `day` and `month`. |
| `bar-start` | string | | Name of the property in bar objects that represents the start date. |
| `bar-end` | string | | Name of the property in bar objects that represents the end date . |
| `date-format` | string \| false | `"YYYY-MM-DD HH:mm"` | Datetime string format of `chart-start`, `chart-end` and the values of the `bar-start`, `bar-end` properties in bar objects. See [Day.js format tokens](https://day.js.org/docs/en/parse/string-format). If the aforementioned properties are native JavaScript [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) objects in your use case, pass `false`. |
| `width` | string? | `"100%"` | Width of the chart (e.g. `80%` or `800px`) |
| `hide-timeaxis` | boolean? | `false` | Toggle visibility of the time axis. |
| `color-scheme` | string \| ColorScheme | `"default"` | Color scheme (theme) of the chart. Either use the name of one of the predefined schemes or pass a color-scheme-object of your own. See [color schemes](#color-schemes). |
| `grid` | string? | `false` | Toggle visibility of background grid. |
| `push-on-overlap` | boolean? | `false` | Specifies whether bars "push one another" when dragging and overlaping. |
| `no-overlap` | boolean? | `false` | If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position. |
| `row-height` | number? | `40` | Height of each row in pixels. |
| `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color. |
| `highlight-sundays` | boolean? | `false` | Sundays will be visually highlighted in the chart with a mild opaque color and the dates text color will be changed to a dark red. |
| `font` | `string` | `"Helvetica"` | Font family of the chart. |

## Custom Events
| Event name | Event data |
Expand Down
2 changes: 2 additions & 0 deletions src/components/GGanttChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export interface GGanttChartProps {
noOverlap?: boolean
rowHeight?: number
highlightedUnits?: number[]
highlightSundays?: boolean
font?: string
}

Expand All @@ -89,6 +90,7 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
noOverlap: false,
rowHeight: 40,
highlightedUnits: () => [],
highlightSundays: false,
font: "inherit"
})

Expand Down
4 changes: 2 additions & 2 deletions src/components/GGanttGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div class="g-grid-container">
<div
v-for="{ label, value, width } in timeaxisUnits.lowerUnits"
v-for="{ label, value, highlight, width } in timeaxisUnits.lowerUnits"
:key="label"
class="g-grid-line"
:style="{
width,
background: highlightedUnits?.includes(Number(value)) ? colors.hoverHighlight : undefined
background: highlight || highlightedUnits?.includes(Number(value)) ? colors.hoverHighlight : undefined
}"
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/GGanttTimeaxis.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@

<div class="g-timeunits-container">
<div
v-for="({ label, value, date, width }, index) in timeaxisUnits.lowerUnits"
v-for="({ label, value, date, highlight, width }, index) in timeaxisUnits.lowerUnits"
:key="label"
class="g-timeunit"
:style="{
background: index % 2 === 0 ? colors.ternary : colors.quartenary,
color: colors.text,
color: highlight ? 'darkred' : colors.text,
flexDirection: precision === 'hour' ? 'column' : 'row',
alignItems: precision === 'hour' ? '' : 'center',
width
Expand Down
5 changes: 3 additions & 2 deletions src/composables/useTimeaxisUnits.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import useDayjsHelper from "./useDayjsHelper.js"
import provideConfig from "../provider/provideConfig.js"

export default function useTimeaxisUnits() {
const { precision } = provideConfig()
const { precision, highlightSundays } = provideConfig()
const { chartStartDayjs, chartEndDayjs } = useDayjsHelper()

const upperPrecision = computed(() => {
Expand Down Expand Up @@ -33,7 +33,7 @@ export default function useTimeaxisUnits() {

const timeaxisUnits = computed(() => {
const upperUnits: { label: string; value?: string; date: Date; width?: string }[] = []
const lowerUnits: { label: string; value?: string; date: Date; width?: string }[] = []
const lowerUnits: { label: string; value?: string; date: Date; width?: string, highlight?: boolean }[] = []
const upperUnit = upperPrecision.value === "day" ? "date" : upperPrecision.value
const lowerUnit = precision.value
let currentUnit = chartStartDayjs.value.startOf(lowerUnit)
Expand Down Expand Up @@ -95,6 +95,7 @@ export default function useTimeaxisUnits() {
label: currentUnit.format(displayFormats[lowerUnit]),
value: String(currentUnit[lowerUnit === "day" ? "date" : lowerUnit]()),
date: currentUnit.toDate(),
highlight: highlightSundays?.value && currentUnit.day() == 0,
width: String(width) + "%"
})
const prevUpperUnitUnit = currentUnit
Expand Down