Added legend scoped slot to all eligible components

graphieros · Mar 26, 2024 · c57567e · c57567e
1 parent 26dfa52
commit c57567e
Show file tree

Hide file tree

Showing 22 changed files with 201 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -157,8 +157,53 @@ customFormat: ({ seriesIndex, datapoint, series, config }) => {
 
 # Slots
 
+## #svg slot
+
 Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
 
+```
+<VueUiXy :dataset="dataset" :config="config">
+  <template #svg="{ svg }">
+    <foreignObject x="100" y="0" height="100" width="150">
+      <div>
+        This is a custom caption
+      </div>
+    </foreignObject>
+  </template>
+</VueUiXy>
+
+```
+
+The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
+
+## #legend slot (since v.2.0.41)
+
+All charts expose a #legend slot except for:
+
+- VueUiWheel
+- VueUiTiremarks
+- VueUiHeatmap
+- VueUiRelationCircle
+- VueUiThermometer
+- VueUiSparkline
+- VueUiSparkbar
+- VueUiSparkStackbar
+- VueUiSparkgauge
+- VueUiSparkHistogram
+
+The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
+It is recommended to set the show legend config attribute to false, to hide the default legend.
+
+```
+<VueUiDonut :config="config" :dataset="dataset">
+  <template #legend="{ legend }">
+    <div v-for="item in legend">
+      {{ legend.name }}
+    </div>
+  </template>
+</VueUiDonut>
+```
+
 # Config
 
 If for some reason you can't access the documentation website and need to get the default config object for a component:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.40",
+  "version": "2.0.41",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -2899,7 +2899,11 @@ function testEmit2(data) {
         <template #info>
         </template>
         <template #dev>
-          <VueDataUiTest component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig" />
+          <VueDataUiTest component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig">
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
+          </VueDataUiTest>
         </template>
         <template #prod>
           <VueDataUi component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig"/>
@@ -2986,6 +2990,9 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3082,9 +3089,12 @@ function testEmit2(data) {
             :dataset="donutEvolutionDataset"
             :config="donutEvolutionConfig"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.absoluteWidth / 2" :cy="svg.absoluteHeight / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3222,9 +3232,12 @@ function testEmit2(data) {
             :dataset="ringsDataset"
             :config="ringsConfig"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3361,6 +3374,11 @@ function testEmit2(data) {
             @selectLegend="selectLegendXY"
             @selectX="selectX"
           >
+          <template #legend="{ legend }">
+            <div v-for="item in legend">
+              {{ item.name }} {{ item.color }}
+            </div>
+          </template>
           </VueDataUiTest>
           <VueDataUiTest
             component="VueUiXy"
@@ -3381,6 +3399,9 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUi>
           <VueDataUi
             component="VueUiXy"
@@ -3438,9 +3459,12 @@ function testEmit2(data) {
             :dataset="candlestickDataset" 
             :config="candlestickConfig"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3479,9 +3503,12 @@ function testEmit2(data) {
             :dataset="scatterDataset" 
             :config="scatterConfig"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3521,9 +3548,12 @@ function testEmit2(data) {
             :dataset="verticalDataset"
             :config="verticalBarConfig"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3563,9 +3593,12 @@ function testEmit2(data) {
             :dataset="onionDataset"
             @selectLegend="selectOnionLegend"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3609,9 +3642,12 @@ function testEmit2(data) {
             @selectSide="selectSide"
             @selectLegend="selectQuadrantLegend"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3654,9 +3690,12 @@ function testEmit2(data) {
             :config="radarConfig"
             @selectLegend="selectRadarLegend"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3709,6 +3748,11 @@ function testEmit2(data) {
                 :strokeWidth="2"
               />
             </template>
+            <template #legend="{legend}">
+              <div v-for="item in legend">
+                {{ item.name }} {{ item.color }} {{ item.value }} {{  item.proportion }}
+              </div>
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3868,9 +3912,12 @@ function testEmit2(data) {
             @selectBranch="selectBranch"
             @selectNut="selectNut"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3911,9 +3958,12 @@ function testEmit2(data) {
             :dataset="pyramidDataset"
             :config="pyramidConfig"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3953,9 +4003,14 @@ function testEmit2(data) {
             :config="waffleConfig"
             @selectLegend="selectLegendWaffle"
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              <div v-for="item in legend">
+                {{ legend }}
+              </div>
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -4153,9 +4208,12 @@ function testEmit2(data) {
             ref="gaugetest" 
             :dataset="gaugeDataset" 
           >
-          <template #svg="{ svg }">
+            <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
+            <template #legend="{ legend }">
+              {{ legend }}
+            </template>
           </VueDataUiTest>
         </template>
         <template #prod>