From f37391d088644cd2883dbbaa8ec5e5727ffd2fc2 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Mon, 4 Mar 2024 08:18:22 +0100
Subject: [PATCH] VueUiQuadrant add plotLabels showAsTag option

---
 package-lock.json                  |  4 +-
 package.json                       |  2 +-
 src/components/vue-ui-quadrant.vue | 74 ++++++++++++++++++------------
 src/default_configs.json           |  1 +
 types/vue-data-ui.d.ts             |  1 +
 5 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 494f9bf7..e891a5f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.0.2",
+      "version": "2.0.3",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 8e097597..f11089bc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.3",
+  "version": "2.0.4",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index fbf2d89b..b5959b23 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, nextTick, watch } from "vue";
-import { palette, createUid, giftWrap, shiftHue, opacity, convertColorToHex, createCsvContent, downloadCsv } from "../lib";
+import { palette, createUid, giftWrap, shiftHue, opacity, convertColorToHex, createCsvContent, downloadCsv, adaptColorToBackground } from "../lib";
 import pdf from "../pdf.js";
 import img from "../img.js";
 import mainConfig from "../default_configs.json";
@@ -818,36 +818,52 @@ defineExpose({
             </g>
 
             <!-- PLOTS -->
-            <g v-for="category in drawableDataset">
-                <Shape
-                    v-for="plot in category.series"
-                    :color="category.color"
-                    :isSelected="hoveredPlotId && plot.uid === hoveredPlotId"
-                    :plot="plot"
-                    :radius="quadrantConfig.style.chart.layout.plots.radius"
-                    :shape="category.shape"
-                    :stroke="quadrantConfig.style.chart.layout.plots.outline ? quadrantConfig.style.chart.layout.plots.outlineColor : 'none'"
-                    :strokeWidth="quadrantConfig.style.chart.layout.plots.outlineWidth"
-                    @mouseover="hoverPlot(category, plot)"
-                    @mouseleave="isTooltip = false; hoveredPlotId = null; hoveredPlot = null"
-                    @click="selectPlot(category, plot)"
-                />
-            </g>
-
-            <g v-if="mutableConfig.plotLabels.show">
+            <template v-if="!quadrantConfig.style.chart.layout.labels.plotLabels.showAsTag">
                 <g v-for="category in drawableDataset">
-                    <text 
-                        v-for="plot in category.series" 
-                        :x="plot.x" 
-                        :y="plot.y + quadrantConfig.style.chart.layout.labels.plotLabels.offsetY + quadrantConfig.style.chart.layout.plots.radius" 
-                        text-anchor="middle" 
-                        :font-size="quadrantConfig.style.chart.layout.labels.plotLabels.fontSize"
-                        :fill="quadrantConfig.style.chart.layout.labels.plotLabels.color"
-                    >
-                        {{ plot.name }}
-                    </text>
+                    <Shape
+                        v-for="plot in category.series"
+                        :color="category.color"
+                        :isSelected="hoveredPlotId && plot.uid === hoveredPlotId"
+                        :plot="plot"
+                        :radius="quadrantConfig.style.chart.layout.plots.radius"
+                        :shape="category.shape"
+                        :stroke="quadrantConfig.style.chart.layout.plots.outline ? quadrantConfig.style.chart.layout.plots.outlineColor : 'none'"
+                        :strokeWidth="quadrantConfig.style.chart.layout.plots.outlineWidth"
+                        @mouseover="hoverPlot(category, plot)"
+                        @mouseleave="isTooltip = false; hoveredPlotId = null; hoveredPlot = null"
+                        @click="selectPlot(category, plot)"
+                    />
                 </g>
-            </g>
+
+                <g v-if="mutableConfig.plotLabels.show">
+                    <g v-for="category in drawableDataset">
+                        <text 
+                            v-for="plot in category.series" 
+                            :x="plot.x" 
+                            :y="plot.y + quadrantConfig.style.chart.layout.labels.plotLabels.offsetY + quadrantConfig.style.chart.layout.plots.radius" 
+                            text-anchor="middle" 
+                            :font-size="quadrantConfig.style.chart.layout.labels.plotLabels.fontSize"
+                            :fill="quadrantConfig.style.chart.layout.labels.plotLabels.color"
+                        >
+                            {{ plot.name }}
+                        </text>
+                    </g>
+                </g>
+            </template>
+
+            <template v-else>
+                <g v-if="mutableConfig.plotLabels.show">
+                    <template v-for="category in drawableDataset">
+                        <foreignObject v-for="plot in category.series" style="overflow: visible;" height="10" width="100" :x="plot.x - 50" :y="plot.y - (quadrantConfig.style.chart.layout.labels.plotLabels.fontSize)" @mouseover="hoverPlot(category, plot)"
+                            @mouseleave="isTooltip = false; hoveredPlotId = null; hoveredPlot = null"
+                            @click="selectPlot(category, plot)">
+                            <div :style="`color:${adaptColorToBackground(category.color)};margin: 0 auto; font-size:${quadrantConfig.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${category.color}; padding: 2px 4px; border-radius: 12px; height: ${quadrantConfig.style.chart.layout.labels.plotLabels.fontSize*1.5}px`">
+                                {{  plot.name }}
+                            </div>
+                        </foreignObject>
+                    </template>
+                </g>
+            </template>
 
             <!-- LEGEND AS G -->
             <foreignObject
diff --git a/src/default_configs.json b/src/default_configs.json
index f6fed9c0..d0d3de79 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -700,6 +700,7 @@
                             }
                         },
                         "plotLabels": {
+                            "showAsTag": false,
                             "show": true,
                             "fontSize": 10,
                             "color": "#2D353C",
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index fc703fdf..b1afa340 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -2351,6 +2351,7 @@ declare module 'vue-data-ui' {
                             };
                         };
                         plotLabels?: {
+                            showAsTag?: boolean;
                             show?: boolean;
                             fontSize?: number;
                             color?: string;