From 8f05a50295bb63c64a079c8ea707bb573cdd3b60 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Thu, 7 Dec 2023 06:50:24 +0100
Subject: [PATCH] VueUi -Quadrant -Onion -Waffle -Xy -Radar improvements

---
 package-lock.json                  |   4 +-
 package.json                       |   2 +-
 src/App.vue                        |  13 +--
 src/atoms/Tooltip.vue              |   1 +
 src/components/vue-ui-onion.vue    |   4 +-
 src/components/vue-ui-quadrant.vue |  38 ++++++---
 src/components/vue-ui-radar.vue    |  38 ++++++++-
 src/components/vue-ui-sparkbar.vue |   4 +-
 src/components/vue-ui-waffle.vue   |  25 +++++-
 src/components/vue-ui-xy.vue       | 129 +++++++++++++++++++++++------
 src/default_configs.json           |   4 +-
 types/vue-data-ui.d.ts             |   2 +
 12 files changed, 212 insertions(+), 52 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9708b252..4b13cd8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.15",
+  "version": "1.9.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.15",
+      "version": "1.9.16",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 42cc0bb0..fa79a5b8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.16",
+  "version": "1.9.17",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index 6d85ec67..5b68199c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,12 +61,14 @@ const dataset2 = ref([
         useArea: true,
         useProgression: true,
         dataLabels: false,
+        shape: "hexagon"
     },
     {
         name: "Series 3",
         series: [ 64, 60, 52, 42, 30, 16, 0, -18, -38, -46, -50, -46, -38, -18, 0, 16, 30, 42, 52, 60, 64],
         type: "plot",
-        color: "rgb(255,100,0)"
+        color: "rgb(255,100,0)",
+        shape: "star"
     },
     {
         name: "Series 4",
@@ -75,7 +77,8 @@ const dataset2 = ref([
         smooth: true,
         useArea: false,
         dataLabels: false,
-        color: "rgb(200,200,50)"
+        color: "rgb(200,200,50)",
+        shape: "pentagon"
     },
     {
         name: "Target",
@@ -3656,7 +3659,7 @@ function copyConfig(c) {
           <RadarTest
             ref="radartest"
             :dataset="radarDataset"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
+            :config="{...radarConfig, useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
             @selectLegend="selectRadarLegend"
           />
         </template>
@@ -3865,7 +3868,7 @@ function copyConfig(c) {
           <WaffleTest
             ref="waffletest"
             :dataset="donutDataset"
-            :config="{style:{chart:{title:{text:'Title',subtitle:{text:'Subtitle'}}}}}"
+            :config="{useBlurOnHover: true, style:{chart:{title:{text:'Title',subtitle:{text:'Subtitle'}}}}}"
             @selectLegend="selectLegendWaffle"
           />
         </template>
@@ -3873,7 +3876,7 @@ function copyConfig(c) {
           <VueUiWaffle
             ref="waffletest"
             :dataset="donutDataset"
-             :config="{style:{chart:{title:{text:'Title',subtitle:{text:'Subtitle'}}}}}"
+             :config="{useBlurOnHover: true, style:{chart:{title:{text:'Title',subtitle:{text:'Subtitle'}}}}}"
             @selectLegend="selectLegendWaffle"
           />
         </template>
diff --git a/src/atoms/Tooltip.vue b/src/atoms/Tooltip.vue
index 1be0a8c2..b0bcda6b 100644
--- a/src/atoms/Tooltip.vue
+++ b/src/atoms/Tooltip.vue
@@ -50,6 +50,7 @@ const position = computed(() => {
     >
         <slot/>
         <div v-html="content"/>
+        <slot name="content-after"/>
     </div>
 </template>
 
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
index 1af828fa..f3ecd3f7 100644
--- a/src/components/vue-ui-onion.vue
+++ b/src/components/vue-ui-onion.vue
@@ -376,14 +376,14 @@ defineExpose({
 
             <!-- LABELS -->
             <g v-if="onionConfig.style.chart.layout.labels.show">
-                <g v-for="onion in mutableDataset">                
+                <g v-for="(onion, i) in mutableDataset">                
                     <text
                         v-if="!segregated.includes(onion.id)"
                         :x="svg.width / 2 - onionSkin.gutter * 0.8 + onionConfig.style.chart.layout.labels.offsetX"
                         :y="onion.labelY"
                         text-anchor="end"
                         :font-size="onionConfig.style.chart.layout.labels.fontSize"
-                        :fill="onionConfig.style.chart.layout.labels.color"
+                        :fill="onionConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && selectedSerie === i ? onion.color:  onionConfig.style.chart.layout.labels.color"
                         :font-weight="onionConfig.style.chart.layout.labels.bold ? 'bold' : 'normal'"
                     >
                         {{ onion.name }} {{ onionConfig.style.chart.layout.labels.percentage.show ? ` : ${onion.percentage.toFixed(onionConfig.style.chart.layout.labels.roundingPercentage)}%` : '' }} {{ !onionConfig.style.chart.layout.labels.percentage.show && onionConfig.style.chart.layout.labels.value.show ? ` : ${onion.value ? `${onion.prefix || ""}${onion.value.toFixed(onionConfig.style.chart.layout.labels.roundingValue)}${onion.suffix || ""}` : '' }` : `${onionConfig.style.chart.layout.labels.value.show ? onion.value ? `(${onion.prefix || ""}${onion.value.toFixed(onionConfig.style.chart.layout.labels.roundingValue)}${onion.suffix || ""})` : '' : ''}` }}
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index 636683bc..54f8d1d1 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -305,9 +305,17 @@ const table = computed(() => {
 
     const body = tableData.map(td => {
         return [td.category, td.name, td.x, td.y, td.sideName || td.quadrantSide]
-    });
+    }); 
 
-    return { head, body };
+    const itsShapes = tableData.map(td => {
+        return {
+            shape: td.shape,
+            color: td.color
+        }
+    });
+    console.log({itsShapes});
+;
+    return { head, body, itsShapes };
 });
 
 const legend = computed(() => {
@@ -797,12 +805,12 @@ defineExpose({
             >
                 <div class="vue-ui-quadrant-legend" :style="`font-weight:${quadrantConfig.style.chart.legend.bold ? 'bold' : ''};color:${quadrantConfig.style.chart.legend.color};font-size:${quadrantConfig.style.chart.legend.fontSize}px;padding-bottom:12px;font-weight:${quadrantConfig.style.chart.legend.bold ? 'bold' : ''};height: 100%;width:100%;display: flex;align-items:center;flex-wrap: wrap;justify-content:center;column-gap: 18px;`" >
                     <div v-for="(legendItem, i) in legend" :data-cy="`quadrant-foreignObject-legend-item-${i}`" class="vue-ui-quadrant-legend-item" @click="segregate(legendItem.id)" :style="`opacity:${segregated.includes(legendItem.id) ? 0.5 : 1};display: flex;align-items:center;justify-content: center;gap: 6px;cursor: pointer;height: 24px;`">
-                        <svg height="12" width="12" viewBox="0 0 20 20">
+                        <svg height="14" width="14" viewBox="0 0 20 20">
                             <Shape
                                 :plot="{ x: 10, y: 10}"
                                 :shape="legendItem.shape"
                                 :color="legendItem.color"
-                                :radius="9"
+                                :radius="8"
                                 :stroke="quadrantConfig.style.chart.layout.plots.outline ? quadrantConfig.style.chart.layout.plots.outlineColor : 'none'"
                                 :strokeWidth="quadrantConfig.style.chart.layout.plots.outlineWidth"
                             />
@@ -817,12 +825,12 @@ defineExpose({
         <!-- LEGEND AS DIV -->
         <div v-if="quadrantConfig.style.chart.legend.show && (!mutableConfig.inside || isPrinting)" class="vue-ui-quadrant-legend" :style="`font-weight:${quadrantConfig.style.chart.legend.bold ? 'bold' : ''};background:${quadrantConfig.style.chart.legend.backgroundColor};color:${quadrantConfig.style.chart.legend.color};font-size:${quadrantConfig.style.chart.legend.fontSize}px;padding-bottom:12px;font-weight:${quadrantConfig.style.chart.legend.bold ? 'bold' : ''}`" >
             <div v-for="(legendItem, i) in legend" :data-cy="`quadrant-div-legend-item-${i}`" class="vue-ui-quadrant-legend-item" @click="segregate(legendItem.id)" :style="`opacity:${segregated.includes(legendItem.id) ? 0.5 : 1}`">
-                <svg height="12" width="12" viewBox="0 0 20 20">
+                <svg height="14" width="14" viewBox="0 0 20 20">
                     <Shape
                         :plot="{ x: 10, y: 10}"
                         :shape="legendItem.shape"
                         :color="legendItem.color"
-                        :radius="9"
+                        :radius="8"
                         :stroke="quadrantConfig.style.chart.layout.plots.outline ? quadrantConfig.style.chart.layout.plots.outlineColor : 'none'"
                         :strokeWidth="quadrantConfig.style.chart.layout.plots.outlineWidth"
                     />
@@ -839,12 +847,12 @@ defineExpose({
             :parent="quadrantChart"
             :content="tooltipContent"
         >
-            <svg height="12" width="12" viewBox="0 0 20 20">
+            <svg height="14" width="14" viewBox="0 0 20 20">
                 <Shape
                     :plot="{ x: 10, y: 10 }"
                     :shape="hoveredPlot.shape"
                     :color="hoveredPlot.color"
-                    :radius="9"
+                    :radius="8"
                     :stroke="quadrantConfig.style.chart.layout.plots.outline ? quadrantConfig.style.chart.layout.plots.outlineColor : 'none'"
                     :stroke-width="quadrantConfig.style.chart.layout.plots.outlineWidth"
                 />
@@ -872,8 +880,18 @@ defineExpose({
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="tr in table.body">
-                        <td v-for="td in tr" :style="`background:${quadrantConfig.table.td.backgroundColor};color:${quadrantConfig.table.td.color};outline:${quadrantConfig.table.td.outline}`">
+                    <tr v-for="(tr, i) in table.body">
+                        <td v-for="(td, j) in tr" :style="`background:${quadrantConfig.table.td.backgroundColor};color:${quadrantConfig.table.td.color};outline:${quadrantConfig.table.td.outline}`">
+                            <svg v-if="j === 0" height="14" width="14" viewBox="0 0 20 20">
+                                <Shape
+                                    :plot="{ x: 10, y: 10 }"
+                                    :color="table.itsShapes[i].color"
+                                    :shape="table.itsShapes[i].shape"
+                                    :radius="8"
+                                    :stroke="quadrantConfig.style.chart.layout.plots.outline ? quadrantConfig.style.chart.layout.plots.outlineColor : 'none'"
+                                    :strokeWidth="quadrantConfig.style.chart.layout.plots.outlineWidth"
+                                />
+                            </svg>
                             {{ isNaN(td) ? td : td.toFixed(quadrantConfig.table.td.roundingValue) }}
                         </td>
                     </tr>
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
index f1bb19c6..c6689f38 100644
--- a/src/components/vue-ui-radar.vue
+++ b/src/components/vue-ui-radar.vue
@@ -8,6 +8,7 @@ import { useNestedProp } from "../useNestedProp";
 import Title from "../atoms/Title.vue";
 import UserOptions from "../atoms/UserOptions.vue";
 import Tooltip from "../atoms/Tooltip.vue";
+import SparkBar from "./vue-ui-sparkbar.vue";
 
 const props = defineProps({
     config: {
@@ -50,6 +51,24 @@ const mutableConfig = ref({
     showTable: radarConfig.value.table.show
 });
 
+const sparkBarConfig = computed(() => {
+    return {
+        style: {
+            backgroundColor: radarConfig.value.style.chart.tooltip.backgroundColor,
+            labels: {
+                fontSize: radarConfig.value.style.chart.tooltip.fontSize,
+                name: {
+                    color: radarConfig.value.style.chart.tooltip.color
+                },
+            },
+            gutter: {
+                backgroundColor: '#CCCCCC',
+                opacity: 30
+            }
+        }
+    }
+})
+
 const svg = computed(() => {
     const height = mutableConfig.value.inside ? 412 : 312;
     return {
@@ -216,15 +235,24 @@ const table = computed(() => {
 });
 
 const selectedIndex = ref(null);
+const sparkBarData = ref([]);
 
 function useTooltip(apex, i) {
+    sparkBarData.value = [];
     selectedIndex.value = i;
     isTooltip.value = true;
     let html = "";
     html += `<div style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${apex.name}</div>`;
     for(let k = 0; k < apex.values.length; k += 1) {
         if(!segregated.value.includes(k)) {
-            html += `<div style="display:flex;flex-wrap:wrap;align-items:center;gap:6px"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${datasetCopy.value[k].color}" /></svg><span>${datasetCopy.value[k].name}</span> : ${radarConfig.value.style.chart.tooltip.showValue ? `<span>${apex.values[k].toFixed(radarConfig.value.style.chart.tooltip.roundingValue)}</span>` : ''} ${!radarConfig.value.style.chart.tooltip.showValue && radarConfig.value.style.chart.tooltip.showPercentage ? `<span>${(apex.values[k] / apex.target * 100).toFixed(radarConfig.value.style.chart.tooltip.roundingPercentage)}%</span>` : radarConfig.value.style.chart.tooltip.showPercentage ? `<span>(${(apex.values[k] / apex.target * 100).toFixed(radarConfig.value.style.chart.tooltip.roundingPercentage)}%)</span>` : ''}</div>`
+            sparkBarData.value.push({
+                name: datasetCopy.value[k].name,
+                value: apex.values[k] / apex.target * 100,
+                color: datasetCopy.value[k].color,
+                suffix: '%)',
+                prefix: `${apex.values[k].toFixed(radarConfig.value.style.chart.tooltip.roundingValue)} (`,
+                rounding: radarConfig.value.style.chart.tooltip.roundingPercentage
+            })
         }
     }
     tooltipContent.value = html;
@@ -501,7 +529,13 @@ defineExpose({
             :color="radarConfig.style.chart.tooltip.color"
             :parent="radarChart"
             :content="tooltipContent"
-        />
+        >
+            <template #content-after>
+                <div style="max-width: 200px;margin:0 auto">
+                    <SparkBar :dataset="sparkBarData" :config="sparkBarConfig"/>
+                </div>
+            </template>
+        </Tooltip>
 
         <!-- DATA TABLE -->
         <div  class="vue-ui-radar-table" :style="`width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
diff --git a/src/components/vue-ui-sparkbar.vue b/src/components/vue-ui-sparkbar.vue
index 0bf1b58a..b4c858b6 100644
--- a/src/components/vue-ui-sparkbar.vue
+++ b/src/components/vue-ui-sparkbar.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from "vue";
-import { treeShake, shiftHue, opacity, convertConfigColors, palette, convertColorToHex } from "../lib";
+import { shiftHue, opacity, palette, convertColorToHex } from "../lib";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 
@@ -90,7 +90,7 @@ function ratioTo(val) {
                             <stop offset="100%" :stop-color="bar.color"/>
                         </linearGradient>
                     </defs>
-                    <rect :height="svg.height" :width="svg.width" :x="0" :y="0" :fill="sparkbarConfig.style.gutter.backgroundColor" :rx="svg.height / 2" />
+                    <rect :height="svg.height" :width="svg.width" :x="0" :y="0" :fill="`${sparkbarConfig.style.gutter.backgroundColor}${opacity[sparkbarConfig.style.gutter.opacity]}`" :rx="svg.height / 2" />
                     <rect :height="svg.height" :width="svg.width * ratioTo(bar.value)" :x="0" :y="0" :fill="sparkbarConfig.style.bar.gradient.underlayerColor" :rx="svg.height / 2" />
                     <rect :height="svg.height" :width="svg.width * ratioTo(bar.value)" :x="0" :y="0" :fill="sparkbarConfig.style.bar.gradient.show ? `url(#sparkbar_gradient_${i}_${uid})` : bar.color" :rx="svg.height / 2" />
                 </svg>
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 2c7563e2..364f5664 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -68,6 +68,10 @@ const rectDimension = computed(() => {
     return ((drawingArea.value.width - (waffleConfig.value.style.chart.layout.grid.size * waffleConfig.value.style.chart.layout.grid.spaceBetween )) / waffleConfig.value.style.chart.layout.grid.size);
 });
 
+const absoluteRectDimension = computed(() => {
+    return ((drawingArea.value.width ) / waffleConfig.value.style.chart.layout.grid.size);
+})
+
 function calculateProportions(numbers) {
   const totalSum = numbers.reduce((a, b) => a + b, 0);
   const proportions = numbers.map(num => Math.round((num / totalSum) * 100) / 100);
@@ -430,9 +434,7 @@ defineExpose({
             />
             <rect
                 v-for="(position, i) in positions"
-                :data-cy="`waffle-rect-${i}`"
-                @mouseover="useTooltip(i)"
-                @mouseleave="isTooltip = false; selectedSerie = null"
+                :class="{'vue-ui-waffle-blur': waffleConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && rects[i].serieIndex !== selectedSerie}"
                 :rx="waffleConfig.style.chart.layout.rect.rounded ? waffleConfig.style.chart.layout.rect.rounding : 0"
                 :x="position.x"
                 :y="position.y"
@@ -442,6 +444,18 @@ defineExpose({
                 :stroke="waffleConfig.style.chart.layout.rect.stroke"
                 :stroke-width="waffleConfig.style.chart.layout.rect.strokeWidth"
             />
+            <rect
+                v-for="(position, i) in positions"
+                :data-cy="`waffle-rect-${i}`"
+                @mouseover="useTooltip(i)"
+                @mouseleave="isTooltip = false; selectedSerie = null"
+                :x="position.x"
+                :y="position.y"
+                :height="absoluteRectDimension"
+                :width="absoluteRectDimension"
+                fill="transparent"
+                stroke="none"
+            />
 
             <!-- LEGEND AS G -->
             <foreignObject
@@ -588,4 +602,9 @@ defineExpose({
     font-weight: 400;
     user-select: none;
 }
+
+.vue-ui-waffle-blur {
+    filter: blur(3px) opacity(50%) grayscale(100%);
+    transition: all 0.15s ease-in-out;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index 3f836144..911de61c 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -198,15 +198,15 @@
                         v-for="(plot, j) in serie.plots" 
                         :key="`circle_plot_${i}_${j}`"
                     >
-                        <circle
+                        <Shape
                             :data-cy="`xy-plot-${i}-${j}`"
                             v-if="canShowValue(plot.value)"
-                            :cx="plot.x"
-                            :cy="plot.y"
-                            :r="chartConfig.plot.radius"
-                            :fill="chartConfig.plot.useGradient ? `url(#plotGradient_${i}_${uniqueId})` : serie.color"
+                            :shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(serie.shape) ? serie.shape : 'circle'"
+                            :color="chartConfig.plot.useGradient ? `url(#plotGradient_${i}_${uniqueId})` : serie.color"
+                            :plot="{ x: plot.x, y: plot.y }"
+                            :radius="chartConfig.plot.radius"
                             :stroke="chartConfig.chart.backgroundColor"
-                            stroke-width="0.5"
+                            :strokeWidth="0.5"
                         />
                     </g>
                     <g :data-cy="`xy-plot-progression-${i}`" v-if="Object.hasOwn(serie, 'useProgression') && serie.useProgression === true && !isNaN(calcLinearProgression(serie.plots).trend)">
@@ -268,15 +268,16 @@
                     </g>
                     <g v-for="(plot, j) in serie.plots" 
                         :key="`circle_line_${i}_${j}`">
-                        <circle 
-                            :data-cy="`xy-line-plot-${i}-${j}`"
+
+                        <Shape
+                            :data-cy="`xy-plot-${i}-${j}`"
                             v-if="canShowValue(plot.value)"
-                            :cx="plot.x"
-                            :cy="plot.y"
-                            :r="chartConfig.line.radius"
-                            :fill="chartConfig.line.useGradient ? `url(#lineGradient_${i}_${uniqueId})` : serie.color"
+                            :shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(serie.shape) ? serie.shape : 'circle'"
+                            :color="chartConfig.line.useGradient ? `url(#lineGradient_${i}_${uniqueId})` : serie.color"
+                            :plot="{ x: plot.x, y: plot.y }"
+                            :radius="chartConfig.plot.radius"
                             :stroke="chartConfig.chart.backgroundColor"
-                            stroke-width="0.5"
+                            :strokeWidth="0.5"
                         />
                     </g > 
                     <g :data-cy="`xy-line-progression-${i}`" v-if="Object.hasOwn(serie, 'useProgression') && serie.useProgression === true && !isNaN(calcLinearProgression(serie.plots).trend)">
@@ -539,10 +540,25 @@
                     >
                         <div class="vue-ui-xy-legend">
                             <div v-for="(legendItem, i) in absoluteDataset" :data-cy="`xy-foreignObject-legend-item-${i}`" :key="`div_legend_item_${i}`" @click="segregate(legendItem)" :class="{'vue-ui-xy-legend-item': true, 'vue-ui-xy-legend-item-segregated' : segregatedSeries.includes(legendItem.id)}">
-                                <svg viewBox="0 0 12 12" height="14" width="14">
-                                    <rect v-if="icons[legendItem.type] === 'line'" x="0" y="6" stroke="none" height="4" width="12" :fill="legendItem.color" />
-                                    <rect v-else-if="icons[legendItem.type] === 'bar'" x="0" y="0" height="12" width="12" stroke="none" :fill="legendItem.color" />
-                                    <circle v-else cx="6" cy="6" r="6" stroke="none" :fill="legendItem.color" />
+                                <svg v-if="icons[legendItem.type] === 'line'" viewBox="0 0 20 12" height="14" width="20">
+                                        <rect x="0" y="7" rx="3" stroke="none" height="4" width="20" :fill="legendItem.color" />
+                                        <Shape
+                                            :plot="{x: 10, y:9}"
+                                            :radius="4"
+                                            :color="legendItem.color"
+                                            :shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(legendItem.shape) ? legendItem.shape : 'circle'"
+                                            :stroke="chartConfig.chart.backgroundColor"
+                                            :strokeWidth="1"
+                                        />
+                                </svg>
+                                <svg v-else viewBox="0 0 12 12" height="14" width="14">
+                                    <rect v-if="icons[legendItem.type] === 'bar'" x="0" y="0" rx="1" height="12" width="12" stroke="none" :fill="legendItem.color" />
+                                    <Shape v-else
+                                        :plot="{x: 6, y:6}"
+                                        :radius="5"
+                                        :color="legendItem.color"
+                                        :shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(legendItem.shape) ? legendItem.shape : 'circle'"
+                                    />
                                 </svg>
                                 <span :style="`color:${chartConfig.chart.legend.color}`">{{legendItem.name}}</span>
                             </div>
@@ -606,10 +622,25 @@
         <!-- LEGEND AS OUTSIDE DIV -->
         <div data-cy="xy-div-legend" v-if="chartConfig.chart.legend.show && (!mutableConfig.legendInside || isPrinting)" class="vue-ui-xy-legend" :style="`font-size:${chartConfig.chart.legend.fontSize}px`">
             <div v-for="(legendItem, i) in absoluteDataset" :data-cy="`xy-div-legend-item-${i}`" :key="`div_legend_item_${i}`" @click="segregate(legendItem)" :class="{'vue-ui-xy-legend-item': true, 'vue-ui-xy-legend-item-segregated' : segregatedSeries.includes(legendItem.id)}">
-                <svg viewBox="0 0 12 12" height="14" width="14">
-                    <rect v-if="icons[legendItem.type] === 'line'" x="0" y="6" stroke="none" height="4" width="12" :fill="legendItem.color" />
-                    <rect v-else-if="icons[legendItem.type] === 'bar'" x="0" y="0" height="12" width="12" stroke="none" :fill="legendItem.color" />
-                    <circle v-else cx="6" cy="6" r="6" stroke="none" :fill="legendItem.color" />
+                <svg v-if="icons[legendItem.type] === 'line'" viewBox="0 0 20 12" height="14" width="20">
+                        <rect x="0" y="7" rx="3" stroke="none" height="4" width="20" :fill="legendItem.color" />
+                        <Shape
+                            :plot="{x: 10, y:9}"
+                            :radius="4"
+                            :color="legendItem.color"
+                            :shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(legendItem.shape) ? legendItem.shape : 'circle'"
+                            :stroke="chartConfig.chart.backgroundColor"
+                            :strokeWidth="1"
+                        />
+                </svg>
+                <svg v-else viewBox="0 0 12 12" height="14" width="14">
+                    <rect v-if="icons[legendItem.type] === 'bar'" x="0" y="0" rx="1" height="12" width="12" stroke="none" :fill="legendItem.color" />
+                    <Shape v-else
+                        :plot="{x: 6, y:6}"
+                        :radius="5"
+                        :color="legendItem.color"
+                        :shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(legendItem.shape) ? legendItem.shape : 'circle'"
+                    />
                 </svg>
                 <span :style="`color:${chartConfig.chart.legend.color}`">{{legendItem.name}}</span>
             </div>
@@ -674,12 +705,15 @@ import {
     adaptColorToBackground,
     calcLinearProgression,
     createSmoothPath,
+    createStar,
+    createPolygonPath
 } from '../lib';
 import mainConfig from "../default_configs.json";
 import DataTable from "../atoms/DataTable.vue";
 import Title from '../atoms/Title.vue';
 import Tooltip from "../atoms/Tooltip.vue";
 import UserOptions from "../atoms/UserOptions.vue";
+import Shape from "../atoms/Shape.vue";
 
 export default {
     name: "vue-ui-xy",
@@ -699,6 +733,7 @@ export default {
     },
     components: {
         DataTable,
+        Shape,
         Title,
         Tooltip,
         UserOptions,
@@ -926,6 +961,7 @@ export default {
         tooltipContent() {
             const selectedSeries = this.relativeDataset.map(datapoint => {
                 return {
+                    shape: datapoint.shape || null,
                     name: datapoint.name,
                     color: datapoint.color,
                     type: datapoint.type,
@@ -944,17 +980,60 @@ export default {
             selectedSeries.forEach(s => {
                 if(this.isSafeValue(s.value) && s.value !== null) {
                     let shape = '';
+                    let insideShape = '';
                     switch (this.icons[s.type]) {
                         case 'bar':
-                            shape = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" stroke="none" height="12" width="12" fill="${s.color}" /></svg>`;
+                            shape = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" rx="1" stroke="none" height="12" width="12" fill="${s.color}" /></svg>`;
                             break;
                         
                         case 'line':
-                            shape = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="6" stroke="none" height="4" width="12" fill="${s.color}" /></svg>`;
+                            if(!s.shape || !['star', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon'].includes(s.shape)) {
+                                insideShape = `<circle cx="10" cy="8" r="4" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" />`
+                            } else if(s.shape === 'triangle') {
+                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 3, rotation: 0.52}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                            } else if(s.shape === 'square') {
+                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 4, rotation: 0.8}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                            } else if(s.shape === 'diamond') {
+                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 4, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                            } else if(s.shape === 'pentagon') {
+                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 5, rotation: 0.95}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                            } else if(s.shape === 'hexagon') {
+                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 6, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                            } else if(s.shape === 'star') {
+                                insideShape = `<polygon stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" points="${createStar({ plot: { x: 10, y: 8 }, radius: 4})}" />`
+                            }
+                            shape = `<svg viewBox="0 0 20 12" height="14" width="20"><rect rx="3" x="0" y="6" stroke="none" height="4" width="20" fill="${s.color}" />${insideShape}</svg>`;
                             break;
 
                         case 'plot':
-                            shape = `<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${s.color}" /></svg>`;
+                            if (!s.shape || !['star', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon'].includes(s.shape)) {
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" /></svg>`;
+                                break;
+                            }
+                            if(s.shape === 'star') {
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><polygon stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" points="${createStar({ plot: { x: 6, y: 6 }, radius: 5})}" /></svg>`;
+                                break;
+                            }
+                            if(s.shape === 'triangle') {
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 6, sides: 3, rotation: 0.52}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                break;
+                            }
+                            if(s.shape === 'square') {
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 6, sides: 4, rotation: 0.8}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                break;
+                            }
+                            if(s.shape === 'diamond') {
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 4, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                break;
+                            }
+                            if(s.shape === 'pentagon') {
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 5, rotation: 0.95}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                break;
+                            }
+                            if(s.shape === 'hexagon') {
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 6, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                break;
+                            }
                         default:
                             break;
                     }
@@ -1140,6 +1219,8 @@ export default {
             });
             return [ start.x, start.y, ...path, end.x, end.y].toString();
         },
+        createStar,
+        createPolygonPath,
         /////////////////////////////// CANVAS /////////////////////////////////
         createCanvasArea(plots) {
             const start = { x: plots[0].x, y: this.zero };
diff --git a/src/default_configs.json b/src/default_configs.json
index 85db7d0f..b6ed23c0 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -449,6 +449,7 @@
         }
     },
     "vue_ui_waffle": {
+        "useBlurOnHover": true,
         "style": {
             "fontFamily": "inherit",
             "chart": {
@@ -2027,7 +2028,8 @@
                 "target": 0
             },
             "gutter": {
-                "backgroundColor": "#e1e5e8"
+                "backgroundColor": "#e1e5e8",
+                "opacity": 100
             },
             "bar": {
                 "gradient": {
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 2b5c87b2..c27339bf 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -421,6 +421,7 @@ declare module 'vue-data-ui' {
             };
             gutter?: {
                 backgroundColor?: string;
+                opacity?: number;
             };
             bar?: {
                 gradient?: {
@@ -1295,6 +1296,7 @@ declare module 'vue-data-ui' {
     }>;
 
     export type VueUiWaffleConfig = {
+        useBlurOnHover?: boolean;
         style?: {
             fontFamily?: string;
             chart?: {