[fix][feat] Highlighted dates/hours

Fix zunnzunn#125
[feat] re-working of zunnzunn#95

Adds new props to handle different methods of highlighting dates and hours.

- `highlighted-days-of-week` to handle highlighting the same day or days every week without having to calculate their dates. Useful for highlighting weekends. Set to [0, 6].
- `highlighted-dates` for when you want to highlight specific dates.
- `highlighted-hours` for when you are using hour precision.

`highlighted-units` probably depreciated now.

Author: albadedan

docs/GGanttChart.md

@@ -19,6 +19,9 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `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.
+| `highlighted-days-of-week` | number[]? | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`
+| `highlighted-dates` | number[]? | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`.
+| `highlighted-hours` | number[]? | When using `precision = hour` set this array to the hours that should be highlighted.  
 | `font` | string | `"Helvetica"`| Font family of the chart.
 | `label-column-title` | string? | `''` | If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header.
 | `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified)

src/GanttPlayground.vue

@@ -2,8 +2,11 @@
   <g-gantt-chart
     :chart-start="chartStart"
     :chart-end="chartEnd"
-    precision="week"
+    precision="day"
     :row-height="40"
+    :highlighted-hours="[0, 1, 8, 22, 23]"
+    :highlighted-days-of-week="[0, 6]"
+    :highlighted-dates="[4, 6]"
     grid
     current-time
     width="100%"

src/components/GGanttChart.vue

@@ -97,6 +97,9 @@ export interface GGanttChartProps {
   noOverlap?: boolean
   rowHeight?: number
   highlightedUnits?: number[]
+  highlightedDates?: number[]
+  highlightedDaysOfWeek?: number[]
+  highlightedHours?: number[]
   font?: string
   labelColumnTitle?: string
   labelColumnWidth?: string
@@ -126,6 +129,9 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   noOverlap: false,
   rowHeight: 40,
   highlightedUnits: () => [],
+  highlightedDates: () => [],
+  highlightedDaysOfWeek: () => [],
+  highlightedHours: () => [],
   font: "inherit",
   labelColumnTitle: "",
   labelColumnWidth: "150px",

src/components/GGanttGrid.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="g-grid-container">
     <div
-      v-for="({ label, value, width }, index) in timeaxisUnits.lowerUnits"
+      v-for="({ label, date, width }, index) in timeaxisUnits.lowerUnits"
       :key="`${label}_${index}`"
       class="g-grid-line"
       :style="{
         width,
-        background: highlightedUnits?.includes(Number(value)) ? colors.hoverHighlight : undefined
+        background: shouldHighlight(date) ? colors.hoverHighlight : undefined
       }"
     />
   </div>
@@ -16,12 +16,30 @@
 import provideConfig from "../provider/provideConfig.js"
 import useTimeaxisUnits from "../composables/useTimeaxisUnits.js"
 
-defineProps<{
+const props = defineProps<{
   highlightedUnits?: number[]
 }>()
 
-const { colors } = provideConfig()
+const { colors, precision, highlightedDaysOfWeek, highlightedDates, highlightedHours } = provideConfig()
 const { timeaxisUnits } = useTimeaxisUnits()
+
+function shouldHighlight(date: Date): boolean {
+  if (precision.value === "hour") {
+    return highlightedHours?.value.includes(date.getHours())
+  } else if (precision.value !== "week" && precision.value !== "month") {
+    if (highlightedDaysOfWeek?.value.includes(date.getDay())) {
+      return true
+    }
+    if (highlightedDates?.value.includes(date.getDate())) {
+      return true
+    }
+    if (props.highlightedUnits?.includes(date.getHours())) {
+      return true
+    }
+  }
+
+  return false
+}
 </script>
 
 <style>