VueUiGalaxy added #tooltip-before & #tooltip-after named slots

Author: graphieros

README.md

@@ -182,16 +182,16 @@ The svg slot also works when using the VueDataUi universal component, if the com
 
 All charts expose a #legend slot except for:
 
-- VueUiWheel
-- VueUiTiremarks
 - VueUiHeatmap
 - VueUiRelationCircle
-- VueUiThermometer
-- VueUiSparkline
-- VueUiSparkbar
+- VueUiSparkHistogram
 - VueUiSparkStackbar
+- VueUiSparkbar
 - VueUiSparkgauge
-- VueUiSparkHistogram
+- VueUiSparkline
+- VueUiThermometer
+- VueUiTiremarks
+- VueUiWheel
 
 The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
 It is recommended to set the show legend config attribute to false, to hide the default legend.
@@ -217,6 +217,7 @@ The following charts bear these slots:
 - VueUiAgePyramid
 - VueUiCandlestick
 - VueUiDonut
+- VueUiGalaxy
 - VueUiHeatmap
 - VueUiMolecule
 - VueUiNestedDonuts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.57",
+  "version": "2.0.58",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

src/App.vue

@@ -3074,7 +3074,14 @@ const kpiConfig = ref(
         <template #info>
         </template>
         <template #dev>
-          <GalaxyTest :dataset="galaxyDataset" :config="galaxyConfig" />
+          <GalaxyTest :dataset="galaxyDataset" :config="galaxyConfig">
+            <template #tooltip-before>
+              BEFORE
+            </template>
+            <template #tooltip-after>
+              AFTER
+            </template>
+          </GalaxyTest>
         </template>
         <template #prod>
           <VueDataUi component="VueUiGalaxy" :dataset="galaxyDataset" :config="galaxyConfig" />

src/components/vue-data-ui.vue

@@ -473,6 +473,12 @@ defineExpose({
         @selectDatapoint="({datapoint, index}) => emit('selectDatapoint', { datapoint, index })" 
         ref="vue_ui_galaxy" 
     >
+        <template #tooltip-before>
+            <slot name="tooltip-before"></slot>
+        </template>
+        <template #tooltip-after>
+            <slot name="tooltip-after"></slot>
+        </template>
         <template #svg="{ svg }">
             <slot name="svg" :svg="svg"></slot>
         </template>

src/components/vue-ui-galaxy.vue

@@ -494,7 +494,14 @@ defineExpose({
             :parent="galaxyChart"
             :content="tooltipContent"
             :isCustom="isFunction(galaxyConfig.style.chart.tooltip.customFormat)"
-        />
+        >
+            <template #tooltip-before>
+                <slot name="tooltip-before"></slot>
+            </template>
+            <template #tooltip-after>
+                <slot name="tooltip-after"></slot>
+            </template>
+        </Tooltip>
 
         <!-- DATA TABLE -->
         <DataTable