Fix - VueUiCirclePack - Improve circle label positioning and sizing

graphieros · graphieros · commit b75b4bf5f76a · 2025-02-02T20:30:24.000+01:00
diff --git a/TestingArena/ArenaVueUiCirclePack.vue b/TestingArena/ArenaVueUiCirclePack.vue
@@ -26,9 +26,22 @@ function makeDs({ name, qty, maxVal }) {
   return datapoints;
 }
 
-// const dataset = ref(makeDs({ name: "Pack 1", qty: 24, maxVal: 120 }));
+const dataset = ref(makeDs({ name: "Pack 1", qty: 24, maxVal: 120000 }));
 
-const dataset = ref([{"name":"Add","value":477},{"name":"options","value":152},{"name":"config","value":139},{"name":"tooltip","value":128},{"name":"Fix","value":124},{"name":"option","value":114},{"name":"user","value":94},{"name":"button","value":88},{"name":"slot","value":79},{"name":"component","value":75},{"name":"table","value":61},{"name":"Implemented","value":55},{"name":"data","value":54},{"name":"Improved","value":53},{"name":"legend","value":50},{"name":"slots","value":50},{"name":"method","value":39},{"name":"animation","value":35},{"name":"titles","value":35},{"name":"contents","value":34},{"name":"optional","value":33},{"name":"configurable","value":33},{"name":"accessibility","value":33},{"name":"zoom","value":32},{"name":"watermark","value":31},{"name":"labels","value":30},{"name":"chart","value":30},{"name":"new","value":29},{"name":"responsive","value":28},{"name":"label","value":27},{"name":"dataset","value":27},{"name":"segregation","value":26},{"name":"Create","value":26},{"name":"mode","value":25},{"name":"feature","value":25},{"name":"toggleTable","value":25},{"name":"display","value":24},{"name":"Improve","value":24},{"name":"reactivity","value":24},{"name":"positioning","value":23},{"name":"border","value":23},{"name":"Exposed","value":23},{"name":"exposed","value":23},{"name":"inside","value":22},{"name":"smoother","value":22},{"name":"transition","value":22},{"name":"toggle","value":21},{"name":"accordion","value":21},{"name":"open","value":21},{"name":"close","value":21},{"name":"layout","value":20},{"name":"color","value":20},{"name":"series","value":19},{"name":"backgroundOpacity","value":19},{"name":"before","value":19},{"name":"attributes","value":18},{"name":"serie","value":18},{"name":"size","value":18},{"name":"methods","value":18},{"name":"type","value":17},{"name":"after","value":17},{"name":"bar","value":16},{"name":"Expose","value":16},{"name":"types","value":15},{"name":"time","value":15},{"name":"named","value":15},{"name":"png","value":15},{"name":"image","value":15},{"name":"download","value":15},{"name":"generateImage","value":15},{"name":"generatePdf","value":15},{"name":"values","value":14},{"name":"error","value":14},{"name":"value","value":14},{"name":"smooth","value":14},{"name":"line","value":14},{"name":"minimap","value":13},{"name":"datasets","value":13},{"name":"applied","value":13},{"name":"with","value":12},{"name":"responsiveness","value":12},{"name":"scale","value":11},{"name":"show","value":11},{"name":"scoped","value":11},{"name":"issue","value":11},{"name":"css","value":11},{"name":"Use","value":11},{"name":"datapoint","value":11},{"name":"hover","value":11},{"name":"attribute","value":11},{"name":"generateCsv","value":11},{"name":"axis","value":10},{"name":"selection","value":10},{"name":"area","value":10},{"name":"prefix","value":10},{"name":"suffix","value":10},{"name":"negative","value":10},{"name":"Minor","value":10},{"name":"all","value":9},{"name":"svg","value":9},{"name":"icon","value":9},{"name":"added","value":9},{"name":"position","value":9},{"name":"showing","value":9},{"name":"Removed","value":9},{"name":"console","value":8},{"name":"individual","value":8},{"name":"used","value":8},{"name":"pattern","value":8},{"name":"background","value":8},{"name":"add","value":8},{"name":"empty","value":8},{"name":"issues","value":8},{"name":"charts","value":8},{"name":"icons","value":8},{"name":"plot","value":8},{"name":"donut","value":8},{"name":"cell","value":8},{"name":"bundle","value":8},{"name":"harmless","value":7},{"name":"range","value":7},{"name":"offset","value":7},{"name":"bug","value":7},{"name":"components","value":7},{"name":"fix","value":7},{"name":"algorithm","value":7},{"name":"shape","value":7},{"name":"gradient","value":7},{"name":"support","value":7},{"name":"TS","value":6},{"name":"wrong","value":6},{"name":"y","value":6},{"name":"some","value":6},{"name":"vertical","value":6},{"name":"provided","value":6},{"name":"customize","value":6},{"name":"control","value":6},{"name":"segregating","value":6},{"name":"lines","value":6},{"name":"LTTB","value":6},{"name":"downsample","value":6},{"name":"big","value":6},{"name":"colors","value":6},{"name":"ts","value":6},{"name":"xAxis","value":6},{"name":"errors","value":6},{"name":"release","value":6},{"name":"name","value":6},{"name":"selectDatapoint","value":6},{"name":"datapoints","value":6},{"name":"Safari","value":6}])
+// const dataset = ref([
+//   { name: 'D', value: 10 },
+//   { name: 'D 1', value: 9 },
+//   { name: 'Da 1', value: 8 },
+//   { name: 'Dat 1', value: 7 },
+//   { name: 'Data 1', value: 6 },
+//   { name: 'Datap 1', value: 5 },
+//   { name: 'Datapo 1', value: 4 },
+//   { name: 'Datapoi 1', value: 3 },
+//   { name: 'Datapoin 1', value: 2 },
+//   { name: 'Datapoint 1', value: 1 },
+// ])
+
+// const dataset = ref([{"name":"Add","value":477},{"name":"options","value":152},{"name":"config","value":139},{"name":"tooltip","value":128},{"name":"Fix","value":124},{"name":"option","value":114},{"name":"user","value":94},{"name":"button","value":88},{"name":"slot","value":79},{"name":"component","value":75},{"name":"table","value":61},{"name":"Implemented","value":55},{"name":"data","value":54},{"name":"Improved","value":53},{"name":"legend","value":50},{"name":"slots","value":50},{"name":"method","value":39},{"name":"animation","value":35},{"name":"titles","value":35},{"name":"contents","value":34},{"name":"optional","value":33},{"name":"configurable","value":33},{"name":"accessibility","value":33},{"name":"zoom","value":32},{"name":"watermark","value":31},{"name":"labels","value":30},{"name":"chart","value":30},{"name":"new","value":29},{"name":"responsive","value":28},{"name":"label","value":27},{"name":"dataset","value":27},{"name":"segregation","value":26},{"name":"Create","value":26},{"name":"mode","value":25},{"name":"feature","value":25},{"name":"toggleTable","value":25},{"name":"display","value":24},{"name":"Improve","value":24},{"name":"reactivity","value":24},{"name":"positioning","value":23},{"name":"border","value":23},{"name":"Exposed","value":23},{"name":"exposed","value":23},{"name":"inside","value":22},{"name":"smoother","value":22},{"name":"transition","value":22},{"name":"toggle","value":21},{"name":"accordion","value":21},{"name":"open","value":21},{"name":"close","value":21},{"name":"layout","value":20},{"name":"color","value":20},{"name":"series","value":19},{"name":"backgroundOpacity","value":19},{"name":"before","value":19},{"name":"attributes","value":18},{"name":"serie","value":18},{"name":"size","value":18},{"name":"methods","value":18},{"name":"type","value":17},{"name":"after","value":17},{"name":"bar","value":16},{"name":"Expose","value":16},{"name":"types","value":15},{"name":"time","value":15},{"name":"named","value":15},{"name":"png","value":15},{"name":"image","value":15},{"name":"download","value":15},{"name":"generateImage","value":15},{"name":"generatePdf","value":15},{"name":"values","value":14},{"name":"error","value":14},{"name":"value","value":14},{"name":"smooth","value":14},{"name":"line","value":14},{"name":"minimap","value":13},{"name":"datasets","value":13},{"name":"applied","value":13},{"name":"with","value":12},{"name":"responsiveness","value":12},{"name":"scale","value":11},{"name":"show","value":11},{"name":"scoped","value":11},{"name":"issue","value":11},{"name":"css","value":11},{"name":"Use","value":11},{"name":"datapoint","value":11},{"name":"hover","value":11},{"name":"attribute","value":11},{"name":"generateCsv","value":11},{"name":"axis","value":10},{"name":"selection","value":10},{"name":"area","value":10},{"name":"prefix","value":10},{"name":"suffix","value":10},{"name":"negative","value":10},{"name":"Minor","value":10},{"name":"all","value":9},{"name":"svg","value":9},{"name":"icon","value":9},{"name":"added","value":9},{"name":"position","value":9},{"name":"showing","value":9},{"name":"Removed","value":9},{"name":"console","value":8},{"name":"individual","value":8},{"name":"used","value":8},{"name":"pattern","value":8},{"name":"background","value":8},{"name":"add","value":8},{"name":"empty","value":8},{"name":"issues","value":8},{"name":"charts","value":8},{"name":"icons","value":8},{"name":"plot","value":8},{"name":"donut","value":8},{"name":"cell","value":8},{"name":"bundle","value":8},{"name":"harmless","value":7},{"name":"range","value":7},{"name":"offset","value":7},{"name":"bug","value":7},{"name":"components","value":7},{"name":"fix","value":7},{"name":"algorithm","value":7},{"name":"shape","value":7},{"name":"gradient","value":7},{"name":"support","value":7},{"name":"TS","value":6},{"name":"wrong","value":6},{"name":"y","value":6},{"name":"some","value":6},{"name":"vertical","value":6},{"name":"provided","value":6},{"name":"customize","value":6},{"name":"control","value":6},{"name":"segregating","value":6},{"name":"lines","value":6},{"name":"LTTB","value":6},{"name":"downsample","value":6},{"name":"big","value":6},{"name":"colors","value":6},{"name":"ts","value":6},{"name":"xAxis","value":6},{"name":"errors","value":6},{"name":"release","value":6},{"name":"name","value":6},{"name":"selectDatapoint","value":6},{"name":"datapoints","value":6},{"name":"Safari","value":6}])
 
 // onMounted(() => {
 //   setTimeout(() => {
@@ -82,8 +95,8 @@ const model = ref([
     min: 0,
     max: 6,
   },
-  { key: "style.chart.circles.labels.value.prefix", def: "P", type: "text" },
-  { key: "style.chart.circles.labels.value.suffix", def: "S", type: "text" },
+  { key: "style.chart.circles.labels.value.prefix", def: "", type: "text" },
+  { key: "style.chart.circles.labels.value.suffix", def: "", type: "text" },
   {
     key: "style.chart.circles.labels.value.bold",
     def: false,
diff --git a/src/components/vue-ui-circle-pack.vue b/src/components/vue-ui-circle-pack.vue
@@ -404,6 +404,15 @@ function getZoomLabel() {
     )
 }
 
+function getValueFontSize(circle) {
+    if (!circle) {
+        return 0
+    }
+
+    const max = circle.radius / (getCircleLabel(circle).length) * (getCircleLabel(circle).length === 1 ? 1 : 2);
+    return Math.min(circle.radius / 2.5, max);
+}
+
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
@@ -682,7 +691,7 @@ defineExpose({
                     :opacity="zoom ? 0.2 : 1"
                     :x="circle.x"
                     :y="circle.y + calcOffsetY(circle.radius, FINAL_CONFIG.style.chart.circles.labels.name.offsetY) - circle.radius / 6"
-                    :font-size="circle.radius / circle.name.length * 2"
+                    :font-size="(circle.radius / 3) * FINAL_CONFIG.style.chart.circles.labels.name.fontSizeRatio"
                     :fill="!FINAL_CONFIG.style.chart.circles.labels.name.color ? adaptColorToBackground(circle.color) : FINAL_CONFIG.style.chart.circles.labels.name.color"
                     :font-weight="FINAL_CONFIG.style.chart.circles.labels.name.bold ? 'bold' : 'normal'"
                     text-anchor="middle"
@@ -700,7 +709,7 @@ defineExpose({
                     :opacity="zoom ? 0.2 : 1"
                     :x="circle.x"
                     :y="circle.y + calcOffsetY(circle.radius, FINAL_CONFIG.style.chart.circles.labels.value.offsetY) + circle.radius / 3"
-                    :font-size="circle.radius / (getCircleLabel(circle).length) * (getCircleLabel(circle).length === 1 ? 1 : 2)"
+                    :font-size="getValueFontSize(circle) * FINAL_CONFIG.style.chart.circles.labels.value.fontSizeRatio"
                     :fill="!FINAL_CONFIG.style.chart.circles.labels.value.color ? adaptColorToBackground(circle.color) : FINAL_CONFIG.style.chart.circles.labels.value.color"
                     :font-weight="FINAL_CONFIG.style.chart.circles.labels.value.bold ? 'bold' : 'normal'"
                     text-anchor="middle"
diff --git a/src/useConfig.js b/src/useConfig.js
@@ -5184,12 +5184,14 @@ export function useConfig() {
                     },
                     labels: {
                         name: {
+                            fontSizeRatio: 1,
                             show: true,
                             bold: false,
                             offsetY: 0,
                             color: 'auto'
                         },
                         value: {
+                            fontSizeRatio: 1,
                             show: true,
                             color: 'auto',
                             rounding: 0,
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
@@ -6585,6 +6585,7 @@ declare module "vue-data-ui" {
                             bold?: boolean;
                             offsetY?: number;
                             color?: string;
+                            fontSizeRatio?: number;
                         };
                         value?: {
                             show?: boolean;
@@ -6595,6 +6596,7 @@ declare module "vue-data-ui" {
                             formatter?: Formatter;
                             bold?: boolean;
                             offsetY?: number;
+                            fontSizeRatio?: number;
                         };
                     };
                     zoom?: {
