Fix - Tooltip font size config option not applied

graphieros · graphieros · commit 20dc9625d9dd · 2024-05-18T10:40:12.000+02:00
diff --git a/src/App.vue b/src/App.vue
@@ -4,16 +4,18 @@ import TestingArena from "./TestingArena.vue";
 import ArenaVueUiXy from "../TestingArena/ArenaVueUiXy.vue";
 import ArenaVueUiDonut from "../TestingArena/ArenaVueUiDonut.vue";
 import ArenaVueUiTreemap from "../TestingArena/ArenaVueUiTreemap.vue";
+import ArenaVueUiWaffle from "../TestingArena/ArenaVueUiWaffle.vue";
 
 const showOldArena = ref(false);
 
 const components = ref([
   "VueUiXy",
   "VueUiDonut",
-  "VueUiTreemap"
+  "VueUiTreemap",
+  "VueUiWaffle"
 ]);
 
-const selectedComponent = ref(components.value[2]);
+const selectedComponent = ref(components.value[3]);
 
 </script>
 
@@ -29,4 +31,5 @@ const selectedComponent = ref(components.value[2]);
   <ArenaVueUiXy v-if="selectedComponent === 'VueUiXy'"/>
   <ArenaVueUiDonut v-if="selectedComponent === 'VueUiDonut'"/>
   <ArenaVueUiTreemap v-if="selectedComponent === 'VueUiTreemap'" />
+  <ArenaVueUiWaffle v-if="selectedComponent === 'VueUiWaffle'" />
 </template>
diff --git a/src/atoms/Tooltip.vue b/src/atoms/Tooltip.vue
@@ -27,6 +27,10 @@ const props = defineProps({
     isCustom: {
         type: Boolean,
         default: false,
+    },
+    fontSize: {
+        type: [Number, String],
+        default: 14
     }
 });
 
@@ -50,7 +54,7 @@ const position = computed(() => {
         data-cy="tooltip"
         :class="{'vue-data-ui-custom-tooltip' : isCustom, 'vue-data-ui-tooltip': !isCustom}"
         v-if="show"
-        :style="`top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${backgroundColor};color:${color};max-width:${maxWidth}`}`"
+        :style="`top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${backgroundColor};color:${color};max-width:${maxWidth};font-size:${props.fontSize}px`}`"
     >
         <slot name="tooltip-before"/>
         <slot/>
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -655,6 +655,7 @@ defineExpose({
             :show="agePyramidConfig.style.tooltip.show && isTooltip"
             :backgroundColor="agePyramidConfig.style.tooltip.backgroundColor"
             :color="agePyramidConfig.style.tooltip.color"
+            :fontSize="agePyramidConfig.style.tooltip.fontSize"
             :parent="agePyramid"
             :content="tooltipContent"
             :isCustom="agePyramidConfig.style.tooltip.customFormat && typeof agePyramidConfig.style.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
@@ -719,6 +719,7 @@ defineExpose({
             :show="candlestickConfig.style.tooltip.show && isTooltip"
             :backgroundColor="candlestickConfig.style.tooltip.backgroundColor"
             :color="candlestickConfig.style.tooltip.color"
+            :fontSize="candlestickConfig.style.tooltip.fontSize"
             :parent="candlestickChart"
             :content="tooltipContent"
             :isCustom="candlestickConfig.style.tooltip.customFormat && typeof candlestickConfig.style.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
@@ -852,6 +852,7 @@ defineExpose({
             :show="donutConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="donutConfig.style.chart.tooltip.backgroundColor"
             :color="donutConfig.style.chart.tooltip.color"
+            :fontSize="donutConfig.style.chart.tooltip.fontSize"
             :parent="donutChart"
             :content="tooltipContent"
             :isCustom="isFunction(donutConfig.style.chart.tooltip.customFormat)"
diff --git a/src/components/vue-ui-galaxy.vue b/src/components/vue-ui-galaxy.vue
@@ -527,6 +527,7 @@ defineExpose({
             :show="galaxyConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="galaxyConfig.style.chart.tooltip.backgroundColor"
             :color="galaxyConfig.style.chart.tooltip.color"
+            :fontSize="galaxyConfig.style.chart.tooltip.fontSize"
             :parent="galaxyChart"
             :content="tooltipContent"
             :isCustom="isFunction(galaxyConfig.style.chart.tooltip.customFormat)"
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
@@ -580,6 +580,7 @@ defineExpose({
             :show="heatmapConfig.style.tooltip.show && isTooltip"
             :backgroundColor="heatmapConfig.style.tooltip.backgroundColor"
             :color="heatmapConfig.style.tooltip.color"
+            :fontSize="heatmapConfig.style.tooltip.fontSize"
             :parent="heatmapChart"
             :content="tooltipContent"
             :isCustom="heatmapConfig.style.tooltip.customFormat && typeof heatmapConfig.style.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
@@ -605,6 +605,7 @@ defineExpose({
             :show="moleculeConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="moleculeConfig.style.chart.tooltip.backgroundColor"
             :color="moleculeConfig.style.chart.tooltip.color"
+            :fontSize="moleculeConfig.style.chart.tooltip.fontSize"
             :parent="moleculeChart"
             :content="tooltipContent"
             :isCustom="moleculeConfig.style.chart.tooltip.customFormat && typeof moleculeConfig.style.chart.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-nested-donuts.vue b/src/components/vue-ui-nested-donuts.vue
@@ -806,6 +806,7 @@ defineExpose({
             :show="donutConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="donutConfig.style.chart.tooltip.backgroundColor"
             :color="donutConfig.style.chart.tooltip.color"
+            :fontSize="donutConfig.style.chart.tooltip.fontSize"
             :parent="nestedDonutsChart"
             :content="tooltipContent"
             :isCustom="isFunction(donutConfig.style.chart.tooltip.customFormat)"
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
@@ -595,6 +595,7 @@ defineExpose({
             :show="onionConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="onionConfig.style.chart.tooltip.backgroundColor"
             :color="onionConfig.style.chart.tooltip.color"
+            :fontSize="onionConfig.style.chart.tooltip.fontSize"
             :parent="onionChart"
             :content="tooltipContent"
             :isCustom="isFunction(onionConfig.style.chart.tooltip.customFormat)"
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
@@ -1427,6 +1427,7 @@ defineExpose({
             :show="quadrantConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="quadrantConfig.style.chart.tooltip.backgroundColor"
             :color="quadrantConfig.style.chart.tooltip.color"
+            :fontSize="quadrantConfig.style.chart.tooltip.fontSize"
             :parent="quadrantChart"
             :content="tooltipContent"
             :isCustom="quadrantConfig.style.chart.tooltip.customFormat && typeof quadrantConfig.style.chart.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
@@ -733,6 +733,7 @@ defineExpose({
             :show="radarConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="radarConfig.style.chart.tooltip.backgroundColor"
             :color="radarConfig.style.chart.tooltip.color"
+            :fontSize="radarConfig.style.chart.tooltip.fontSize"
             :parent="radarChart"
             :content="tooltipContent"
             :isCustom="radarConfig.style.chart.tooltip.customFormat && typeof radarConfig.style.chart.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
@@ -596,6 +596,7 @@ defineExpose({
       "
       :backgroundColor="ringsConfig.style.chart.tooltip.backgroundColor"
       :color="ringsConfig.style.chart.tooltip.color"
+      :fontSize="ringsConfig.style.chart.tooltip.fontSize"
       :parent="ringsChart"
       :content="tooltipContent"
       :isCustom="ringsConfig.style.chart.tooltip.customFormat && typeof ringsConfig.style.chart.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
@@ -937,6 +937,7 @@ defineExpose({
             :show="scatterConfig.style.tooltip.show && isTooltip"
             :backgroundColor="scatterConfig.style.tooltip.backgroundColor"
             :color="scatterConfig.style.tooltip.color"
+            :fontSize="scatterConfig.style.tooltip.fontSize"
             :parent="scatterChart"
             :content="tooltipContent"
             :isCustom="scatterConfig.style.tooltip.customFormat && typeof scatterConfig.style.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-strip-plot.vue b/src/components/vue-ui-strip-plot.vue
@@ -628,6 +628,7 @@ defineExpose({
             :show="stripConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="stripConfig.style.chart.tooltip.backgroundColor"
             :color="stripConfig.style.chart.tooltip.color"
+            :fontSize="stripConfig.style.chart.tooltip.fontSize"
             :parent="stripPlotChart"
             :content="tooltipContent"
             :isCustom="isFunction(stripConfig.style.chart.tooltip.customFormat)"
diff --git a/src/components/vue-ui-treemap.vue b/src/components/vue-ui-treemap.vue
@@ -606,6 +606,7 @@ defineExpose({
             :show="treemapConfig.style.chart.tooltip.show && isTooltip"
             :backgroundColor="treemapConfig.style.chart.tooltip.backgroundColor"
             :color="treemapConfig.style.chart.tooltip.color"
+            :fontSize="treemapConfig.style.chart.tooltip.fontSize"
             :parent="treemapChart"
             :content="tooltipContent"
             :isCustom="isFunction(treemapConfig.style.chart.tooltip.customFormat)"
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
@@ -762,6 +762,7 @@ defineExpose({
             :show="verticalBarConfig.style.chart.tooltip.show && isTooltip && segregated.length < props.dataset.length"
             :backgroundColor="verticalBarConfig.style.chart.tooltip.backgroundColor"
             :color="verticalBarConfig.style.chart.tooltip.color"
+            :fontSize="verticalBarConfig.style.chart.tooltip.fontSize"
             :parent="verticalBarChart"
             :content="tooltipContent"
             :isCustom="verticalBarConfig.style.chart.tooltip.customFormat && typeof verticalBarConfig.style.chart.tooltip.customFormat === 'function'"
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
@@ -758,6 +758,7 @@ defineExpose({
             :parent="waffleChart"
             :content="tooltipContent"
             :isCustom="waffleConfig.style.chart.tooltip.customFormat && typeof waffleConfig.style.chart.tooltip.customFormat === 'function'"
+            :fontSize="waffleConfig.style.chart.tooltip.fontSize"
         >
             <template #tooltip-before>
                 <slot name="tooltip-before" v-bind="{...dataTooltipSlot}"></slot>
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
@@ -871,6 +871,7 @@
             :show="chartConfig.chart.tooltip.show && isTooltip"
             :backgroundColor="chartConfig.chart.tooltip.backgroundColor"
             :color="chartConfig.chart.tooltip.color"
+            :fontSize="chartConfig.chart.tooltip.fontSize"
             :parent="$refs.chart"
             :content="tooltipContent"
             :isCustom="chartConfig.chart.tooltip.customFormat && typeof chartConfig.chart.tooltip.customFormat === 'function'"
diff --git a/src/default_configs.json b/src/default_configs.json
@@ -286,7 +286,8 @@
                 "showPercentage": false,
                 "roundingValue": 0,
                 "roundingPercentage": 0,
-                "customFormat": null
+                "customFormat": null,
+                "fontSize": 14
             },
             "userOptions": {
                 "show": true,
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
@@ -2412,6 +2412,7 @@ declare module 'vue-data-ui' {
                 showPercentage?: boolean;
                 roundingValue?: number;
                 roundingPercentage?: number;
+                fontSize?: number;
                 customFormat?: (params: VueUiTooltipParams<VueUiXyDatapointItem[], VueUiXySeries, VueUiXyConfig, VueUiXyDatasetBarItem[], VueUiXyDatasetLineItem[], VueUiXyDatasetPlotItem[]>) => string;
             };
             userOptions?: {
