Dev environment - Update VueUiCirclePack testing arena

Author: graphieros

TestingArena/ArenaVueUiCirclePack.vue

@@ -14,7 +14,7 @@ function makeDs({ name, qty, maxVal }) {
   for (let i = 0; i < qty; i += 1) {
     datapoints.push({
       name: `Datapoint ${i}`,
-      value: i === 0 ? null : Math.random() * maxVal,
+      value: Math.random() * maxVal,
       // color: '#FFFFFF',
       // breakdown: [
       //     { name: 'br 1', value: Math.random() * 10 },
@@ -26,19 +26,24 @@ function makeDs({ name, qty, maxVal }) {
   return datapoints;
 }
 
-const dataset = ref(makeDs({ name: "Pack 1", qty: 24, maxVal: 120000 }));
+const dataset = ref(makeDs({ name: "Pack 1", qty: 34, maxVal: 12000 }));
 
 // 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 },
+//   { name: 'D 1', value: 5 },
+//   { name: 'D 1', value: 5 },
+//   { name: 'D 1', value: 3 },
+//   { name: 'D 1', value: 3 },
+//   { name: 'D 1', value: 1 },
+//   { name: 'D 1', value: 1 },
+//   { name: 'D 1', value: 1 },
+//   { name: 'D 1', value: 1 },
+//   { name: 'D 1', value: 1 },
+//   { name: 'D 1', value: 1 },
+//   { name: 'D 1', value: 0.9 },
+//   { name: 'D 1', value: 2 },
+//   { name: 'D 1', value: 1 },
+//   { name: 'D 1', value: 2 },
 // ])
 
 // 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}])
@@ -220,7 +225,7 @@ const themeOptions = ref([
     "celebrationNight"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[6])
 
 const config = computed(() => {
   const c = convertArrayToObject(model.value);
@@ -232,6 +237,10 @@ const config = computed(() => {
 
 const step = ref(0);
 
+function selectDatapoint(dp) {
+  console.log(dp)
+}
+
 </script>
 
 <template>
@@ -245,7 +254,7 @@ const step = ref(0);
     <template #title>VueUiCirclePack</template>
 
     <template #local>
-      <LocalVueUiCirclePack :dataset="dataset" :config="config" ref="local" :key="`local_${step}`">
+      <LocalVueUiCirclePack :dataset="dataset" :config="config" ref="local" :key="`local_${step}`" @selectDatapoint="selectDatapoint">
         <!-- <template #zoom-label="{ x, y, name, value, color, zoomOpacity, currentRadius, fontSize }">
                 <foreignObject
                     :x="x - currentRadius / 2"
@@ -262,6 +271,23 @@ const step = ref(0);
         <!-- <template #pattern="{ seriesIndex, patternId }">
                 <VueUiPattern name="squares" :id="patternId" :scale="0.4"/>
             </template> -->
+
+        <!-- <template #data-label="{ x, y, name, value, color, createTSpans, fontSize, radius }">
+          <text
+            :x="x"
+            :y="y"
+            :font-size="fontSize.name"
+            :fill="color"
+            text-anchor="middle" 
+            v-html="createTSpans({
+            content: `${name}: ${value.toFixed(0)}`,
+            fontSize: fontSize.name,
+            fill: color,
+            x,
+            y: y - fontSize.name / 3,
+            maxWords: 2
+          })"/>
+        </template> -->
       </LocalVueUiCirclePack>
     </template>