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) { @@ -3865,7 +3868,7 @@ function copyConfig(c) { @@ -3873,7 +3876,7 @@ function copyConfig(c) { 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(() => { >
+
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({ - + {{ 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({ >
- + @@ -817,12 +825,12 @@ defineExpose({
- + @@ -839,12 +847,12 @@ defineExpose({ :parent="quadrantChart" :content="tooltipContent" > - + @@ -872,8 +880,18 @@ defineExpose({ -
- +
+ + + + {{ isNaN(td) ? td : td.toFixed(quadrantConfig.table.td.roundingValue) }}
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 += `
${apex.name}
`; for(let k = 0; k < apex.values.length; k += 1) { if(!segregated.value.includes(k)) { - html += `
${datasetCopy.value[k].name} : ${radarConfig.value.style.chart.tooltip.showValue ? `${apex.values[k].toFixed(radarConfig.value.style.chart.tooltip.roundingValue)}` : ''} ${!radarConfig.value.style.chart.tooltip.showValue && radarConfig.value.style.chart.tooltip.showPercentage ? `${(apex.values[k] / apex.target * 100).toFixed(radarConfig.value.style.chart.tooltip.roundingPercentage)}%` : radarConfig.value.style.chart.tooltip.showPercentage ? `(${(apex.values[k] / apex.target * 100).toFixed(radarConfig.value.style.chart.tooltip.roundingPercentage)}%)` : ''}
` + 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" - /> + > + +
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 @@