VueUiQuadrant improve tooltip, fix legend print css issues

Author: graphieros

package-lock.json

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

package.json

@@ -3629,7 +3629,7 @@ function copyConfig(c) {
           <QuadrantTest
             ref="quadranttest"
             :dataset="quadrantDataset"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
+            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}},layout:{grid:{xAxis:{name:'xAxis'},yAxis:{name:'yAxis'}}}}}"
             @selectPlot="selectPlot"
             @selectSide="selectSide"
             @selectLegend="selectQuadrantLegend"
@@ -3639,7 +3639,7 @@ function copyConfig(c) {
           <VueUiQuadrant
             ref="quadranttest"
             :dataset="quadrantDataset"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
+            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}},layout:{grid:{xAxis:{name:'xAxis'},yAxis:{name:'yAxis'}}}}}"
             @selectPlot="selectPlot"
             @selectSide="selectSide"
             @selectLegend="selectQuadrantLegend"

src/App.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { computed } from "vue";
+import { createPolygonPath, createStar } from "../lib";
+
+const props = defineProps({
+    color: String,
+    isSelected: {
+        type: Boolean,
+        default: false,
+    },
+    limit: {
+        type: Number,
+        default: 3
+    },
+    plot: Object,
+    radius: Number,
+    shape: String,
+    stroke: String,
+    strokeWidth: Number,
+    zoom: {
+        type: Number,
+        default: 1.3
+    }
+});
+
+const emit = defineEmits(['mouseover', 'mouseout', 'click']);
+
+function getPolygonConfigFromName(name){
+    return {
+        circle: {
+            points: 1,
+            rotation: 0
+        },
+        line: {
+            points: 2,
+            rotation: 0
+        },
+        triangle: {
+            points: 3,
+            rotation: 0.52
+        },
+        square: {
+            points: 4,
+            rotation: 0.8
+        },
+        diamond: {
+            points: 4,
+            rotation: 0
+        },
+        pentagon: {
+            points: 5,
+            rotation: 0.95
+        },
+        hexagon: {
+            points: 6,
+            rotation: 0
+        }
+    }[name]
+}
+
+const config = computed(() => {
+    return getPolygonConfigFromName(props.shape)
+});
+
+const starPoints = computed(() => {
+    if (props.shape !== 'star') return null;
+    return createStar({
+        plot: { x: props.plot.x, y: props.plot.y },
+        radius: props.radius * (props.isSelected ? props.zoom : 1)
+    })
+})
+
+const d = computed(() => {
+    return createPolygonPath({
+        plot: { x: props.plot.x, y: props.plot.y },
+        radius: props.radius * (props.isSelected ? props.zoom : 1),
+        sides: config.value.points,
+        rotation: config.value.rotation
+    }).path;
+});
+
+</script>
+
+<template>
+    <g> 
+        <circle
+            v-if="config && config.points === 1"
+            :cx="plot.x"
+            :cy="plot.y"
+            :r="props.radius * (props.isSelected ? props.zoom : 1)"
+            :fill="color"
+            :stroke="stroke"
+            :stroke-width="strokeWidth"
+            @mouseover="emit('mouseover')"
+            @mouseout="emit('mouseout')"
+            @click="emit('click')"
+        />
+        <path
+            v-if="config && config.points >= limit"
+            :d="d"
+            :fill="color"
+            :stroke="stroke"
+            :stroke-width="strokeWidth"
+            @mouseover="emit('mouseover')"
+            @mouseout="emit('mouseout')"
+            @click="emit('click')"
+        />
+        <polygon 
+            v-if="starPoints"
+            :points="starPoints"
+            :fill="color"
+            :stroke="stroke"
+            :stroke-width="strokeWidth"
+            @mouseover="emit('mouseover')"
+            @mouseout="emit('mouseout')"
+            @click="emit('click')"
+        />
+    </g>
+</template>

src/atoms/Shape.vue

@@ -47,8 +47,10 @@ const position = computed(() => {
         class="vue-data-ui-tooltip"
         v-if="show"
         :style="`top:${position.top}px;left:${position.left}px;background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`"
-        v-html="content"
-    />
+    >
+        <slot/>
+        <div v-html="content"/>
+    </div>
 </template>
 
 <style scoped>