[feat] Optionally add title and subtitle to bar tooltip

Adds props:
- showTitleInTooltip, boolean?, false
- tooltipSubtitle, string?, ""

Dee updated docs.

Author: albadedan

docs/GGanttChart.md

@@ -19,9 +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. Make sure to also use the `grid` prop on the chart.
-| `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`. Make sure to also use the `grid` prop on the chart.
-| `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`. Make sure to also use the `grid` prop on the chart.
-| `highlighted-hours` | number[]? | When using `precision = hour` set this array to the hours that should be highlighted. Make sure to also use the `grid` prop on the chart.
+| `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`. Make sure to also use the `grid` prop on the chart.
+| `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`. Make sure to also use the `grid` prop on the chart.
+| `highlighted-hours` | number[]? | `[]` | When using `precision = hour` set this array to the hours that should be highlighted. Make sure to also use the `grid` prop on the chart.
 | `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)
@@ -30,6 +30,8 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `locale` | string? | `en-GB` | Used when getting the day name only.
 | `allowRightClickDragging` | boolean? | `false` | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements.
 | `disableDragging` | boolean? | `false` | Disable dragging for all bars in the chart.
+| `showTitleInTooltip` | boolean? | `true` | When true, adds the title followed by a line break at the start of the tooltip. Make sure to sanitize the value.
+| `tooltipSubtitle` | string? | `''` | If provided, adds a line break and the content to the end of the tooltip. Make sure to sanitize the value. 
 
 
 ## Custom Events

src/components/GGanttBarTooltip.vue

@@ -12,7 +12,7 @@
       >
         <div class="g-gantt-tooltip-color-dot" :style="{ background: dotColor }" />
         <slot :bar="bar" :bar-start="barStartRaw" :bar-end="barEndRaw">
-          {{ tooltipContent }}
+          <span v-html="tooltipContent"> </span>
         </slot>
       </div>
     </transition>
@@ -43,7 +43,8 @@ const props = defineProps<{
 }>()
 
 const { bar } = toRefs(props)
-const { precision, font, barStart, barEnd, rowHeight } = provideConfig()
+const { precision, font, barStart, barEnd, rowHeight, showLabelInBarTooltip, tooltipSubtitle } =
+  provideConfig()
 
 const barContainerEl = inject(CHART_CONTAINER_KEY)
 
@@ -85,7 +86,9 @@ const tooltipContent = computed(() => {
   const format = TOOLTIP_FORMATS[precision.value]
   const barStartFormatted = toDayjs(barStartRaw.value).format(format)
   const barEndFormatted = toDayjs(barEndRaw.value).format(format)
-  return `${barStartFormatted} \u2013 ${barEndFormatted}`
+  const title = showLabelInBarTooltip ? `${bar.value.ganttBarConfig.label} <br /> ` : ""
+  const subtitle = tooltipSubtitle ? `<br />${tooltipSubtitle.value}` : ""
+  return `${title}${barStartFormatted} \u2013 ${barEndFormatted}${subtitle}`
 })
 </script>
 

src/components/GGanttChart.vue

@@ -109,6 +109,8 @@ export interface GGanttChartProps {
   locale?: string
   allowRightClickDragging?: boolean
   disableDragging?: boolean
+  showLabelInBarTooltip?: boolean
+  tooltipSubtitle?: string
 }
 
 export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {
@@ -141,7 +143,9 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   dayNameLength: "short",
   locale: "en-GB",
   allowRightClickDragging: false,
-  disableDragging: false
+  disableDragging: false,
+  showLabelInBarTooltip: true,
+  tooltipSubtitle: ""
 })
 
 const emit = defineEmits<{