Skip to content

Commit 41e2a57

Browse files
graphierosgraphieros
committed
VueUiAgePyramid added OffsetY to serie titles; refactored tooltip customFormat handling
1 parent f7c8dff commit 41e2a57

18 files changed

+201
-58
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.0.17",
4+
"version": "2.0.18",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2410,8 +2410,8 @@ const donutConfig = ref({
24102410
tooltip: {
24112411
customFormat: ({ datapoint, seriesIndex, series , config}) => {
24122412
console.log({datapoint, seriesIndex, series, config});
2413-
return `<div style="color:${datapoint.color}">
2414-
${datapoint.name}
2413+
return `<div style="background:${datapoint.color}33;color:${datapoint.color};padding:12px">
2414+
${datapoint.name} : ${datapoint.value}
24152415
</div>`
24162416
}
24172417
}
@@ -2424,12 +2424,12 @@ const xyConfig = ref({
24242424
labels: {
24252425
fontSize: 30
24262426
},
2427-
// tooltip: {
2428-
// customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => {
2429-
// console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
2430-
// return 'TEST'
2431-
// }
2432-
// }
2427+
tooltip: {
2428+
customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => {
2429+
console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
2430+
return 'TEST'
2431+
}
2432+
}
24332433
},
24342434
bar: {
24352435
labels: {
@@ -2545,6 +2545,13 @@ const pyramidConfig = ref({
25452545
console.log({ seriesIndex, datapoint, series, config });
25462546
return "TEST"
25472547
}
2548+
},
2549+
layout: {
2550+
dataLabels: {
2551+
sideTitles: {
2552+
offsetY: -20
2553+
}
2554+
}
25482555
}
25492556
}
25502557
})
@@ -3948,8 +3955,5 @@ function selectHistoDatapoint({ datapoint, index }) {
39483955
</style>
39493956

39503957
<style>
3951-
.vue-data-ui-custom-tooltip {
3952-
background: red;
3953-
}
39543958
39553959
</style>

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
<script setup>
22
import { ref, computed, nextTick } from "vue";
3-
import { opacity, shiftHue, createUid, createCsvContent, downloadCsv } from '../lib';
3+
import {
4+
createCsvContent,
5+
createUid,
6+
downloadCsv,
7+
functionReturnsString,
8+
isFunction,
9+
opacity,
10+
shiftHue,
11+
} from '../lib';
412
import pdf from "../pdf";
513
import img from "../img";
614
import mainConfig from "../default_configs.json";
@@ -184,7 +192,7 @@ function useTooltip(index, datapoint) {
184192
185193
const customFormat = agePyramidConfig.value.style.tooltip.customFormat;
186194
187-
if (customFormat && typeof customFormat === 'function' && typeof customFormat({
195+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
188196
seriesIndex: index,
189197
datapoint: {
190198
segment: datapoint[0],
@@ -194,7 +202,7 @@ function useTooltip(index, datapoint) {
194202
},
195203
series: drawableDataset.value,
196204
config: agePyramidConfig.value
197-
}) === 'string') {
205+
}))) {
198206
tooltipContent.value = customFormat({
199207
seriesIndex: index,
200208
datapoint: {
@@ -475,7 +483,7 @@ defineExpose({
475483
<g v-if="agePyramidConfig.style.layout.dataLabels.sideTitles.show">
476484
<text
477485
:x="drawingArea.left"
478-
:y="drawingArea.top"
486+
:y="drawingArea.top + agePyramidConfig.style.layout.dataLabels.sideTitles.offsetY"
479487
:fill="agePyramidConfig.style.layout.dataLabels.sideTitles.useSideColor ? agePyramidConfig.style.layout.bars.left.color : agePyramidConfig.style.layout.dataLabels.sideTitles.color"
480488
:font-size="agePyramidConfig.style.layout.dataLabels.sideTitles.fontSize"
481489
text-anchor="start"
@@ -485,7 +493,7 @@ defineExpose({
485493
</text>
486494
<text
487495
:x="drawingArea.right"
488-
:y="drawingArea.top"
496+
:y="drawingArea.top + agePyramidConfig.style.layout.dataLabels.sideTitles.offsetY"
489497
:fill="agePyramidConfig.style.layout.dataLabels.sideTitles.useSideColor ? agePyramidConfig.style.layout.bars.right.color : agePyramidConfig.style.layout.dataLabels.sideTitles.color"
490498
:font-size="agePyramidConfig.style.layout.dataLabels.sideTitles.fontSize"
491499
text-anchor="end"

‎src/components/vue-ui-candlestick.vue‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
<script setup>
22
import { ref, computed, onMounted, nextTick } from "vue";
3-
import { canShowValue, closestDecimal, shiftHue, opacity, createUid, createCsvContent, downloadCsv, calculateNiceScale } from "../lib";
3+
import {
4+
calculateNiceScale,
5+
canShowValue,
6+
closestDecimal,
7+
createCsvContent,
8+
createUid,
9+
downloadCsv,
10+
functionReturnsString,
11+
isFunction,
12+
opacity,
13+
shiftHue,
14+
} from "../lib";
415
import mainConfig from "../default_configs.json";
516
import pdf from "../pdf";
617
import img from "../img";
@@ -188,12 +199,12 @@ function useTooltip(index, datapoint) {
188199
189200
const customFormat = candlestickConfig.value.style.tooltip.customFormat;
190201
191-
if (customFormat && typeof customFormat === 'function' && typeof customFormat({
202+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
192203
seriesIndex: index,
193204
datapoint,
194205
series: drawableDataset.value,
195206
config: candlestickConfig.value
196-
}) === 'string') {
207+
}))) {
197208
tooltipContent.value = customFormat({
198209
seriesIndex: index,
199210
datapoint,

‎src/components/vue-ui-donut.vue‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import {
88
createCsvContent,
99
createUid,
1010
dataLabel,
11-
downloadCsv,
11+
downloadCsv,
12+
functionReturnsString,
13+
isFunction,
1214
makeDonut,
1315
opacity,
1416
palette,
@@ -192,8 +194,18 @@ function useTooltip({datapoint, relativeIndex, seriesIndex, show = false}) {
192194
193195
const customFormat = donutConfig.value.style.chart.tooltip.customFormat;
194196
195-
if (customFormat && typeof customFormat === 'function' && typeof customFormat({ seriesIndex, datapoint, series: immutableSet.value, config: donutConfig.value }) === 'string') {
196-
tooltipContent.value = customFormat({ seriesIndex, datapoint, series: immutableSet.value, config: donutConfig.value })
197+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
198+
seriesIndex,
199+
datapoint,
200+
series: immutableSet.value,
201+
config: donutConfig.value
202+
}, () => tooltipContent))) {
203+
tooltipContent.value = customFormat({
204+
seriesIndex,
205+
datapoint,
206+
series: immutableSet.value,
207+
config: donutConfig.value
208+
})
197209
} else {
198210
html += `<div data-cy="donut-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${datapoint.name}</div>`;
199211
html += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle data-cy="donut-tooltip-marker" cx="6" cy="6" r="6" stroke="none" fill="${datapoint.color}"/></svg>`;

‎src/components/vue-ui-heatmap.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import {
55
createCsvContent,
66
createUid,
77
dataLabel,
8-
downloadCsv,
8+
downloadCsv,
9+
functionReturnsString,
10+
isFunction,
911
interpolateColorHex,
1012
opacity,
1113
} from "../lib";
@@ -183,12 +185,12 @@ function useTooltip(datapoint, seriesIndex) {
183185
184186
const customFormat = heatmapConfig.value.style.tooltip.customFormat;
185187
186-
if (customFormat && typeof customFormat === 'function' && typeof customFormat({
188+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
187189
datapoint,
188190
seriesIndex,
189191
series: mutableDataset.value,
190192
config: heatmapConfig.value
191-
}) === 'string') {
193+
}))) {
192194
tooltipContent.value = customFormat({
193195
datapoint,
194196
seriesIndex,
@@ -200,7 +202,6 @@ function useTooltip(datapoint, seriesIndex) {
200202
html += `<div data-cy="heatmap-tooltip-value" style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8;font-weight:bold;display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center"><span style="color:${interpolateColorHex(heatmapConfig.value.style.layout.cells.colors.cold, heatmapConfig.value.style.layout.cells.colors.hot, minValue.value, maxValue.value, value)}">⬤</span><span>${isNaN(value) ? "-" : dataLabel({p:heatmapConfig.value.style.layout.dataLabels.prefix, v: value, s: heatmapConfig.value.style.layout.dataLabels.suffix, r:heatmapConfig.value.style.tooltip.roundingValue })}</span></div>`
201203
tooltipContent.value = `<div style="font-size:${heatmapConfig.value.style.tooltip.fontSize}px">${html}</div>`;
202204
}
203-
204205
}
205206
206207
const sideLegendIndicatorY = computed(() => {

‎src/components/vue-ui-molecule.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
<script setup>
22
import { ref, computed, nextTick } from "vue";
3-
import { lightenHexColor, palette, createUid, createCsvContent, downloadCsv, createPolygonPath } from '../lib';
3+
import {
4+
createCsvContent,
5+
createPolygonPath,
6+
createUid,
7+
downloadCsv,
8+
functionReturnsString,
9+
isFunction,
10+
lightenHexColor,
11+
palette,
12+
} from '../lib';
413
import pdf from "../pdf";
514
import img from "../img";
615
import mainConfig from "../default_configs.json";
@@ -250,12 +259,12 @@ function createTooltipContent(node) {
250259
251260
const customFormat = moleculeConfig.value.style.chart.tooltip.customFormat;
252261
253-
if (customFormat && typeof customFormat === 'function' && typeof customFormat({
262+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
254263
seriesIndex: -1,
255264
datapoint: node,
256265
series: convertedDataset.value,
257266
config: moleculeConfig.value
258-
}) === 'string') {
267+
}))) {
259268
tooltipContent.value = customFormat({
260269
seriesIndex: -1, // well, ok
261270
datapoint: node,

‎src/components/vue-ui-quadrant.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
<script setup>
22
import { ref, computed, onMounted, nextTick, watch } from "vue";
3-
import { palette, createUid, giftWrap, shiftHue, opacity, convertColorToHex, createCsvContent, downloadCsv, adaptColorToBackground } from "../lib";
3+
import {
4+
adaptColorToBackground,
5+
convertColorToHex,
6+
createCsvContent,
7+
createUid,
8+
downloadCsv,
9+
functionReturnsString,
10+
isFunction,
11+
giftWrap,
12+
opacity,
13+
palette,
14+
shiftHue,
15+
} from "../lib";
416
import pdf from "../pdf.js";
517
import img from "../img.js";
618
import mainConfig from "../default_configs.json";
@@ -426,20 +438,18 @@ function useTooltip(category, plot, categoryIndex) {
426438
427439
const customFormat = quadrantConfig.value.style.chart.tooltip.customFormat;
428440
429-
if (customFormat && typeof customFormat === 'function' && typeof customFormat({
441+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
430442
seriesIndex: categoryIndex,
431443
datapoint: plot,
432444
series: drawableDataset.value,
433445
config: quadrantConfig.value
434-
}) === 'string') {
435-
446+
}))) {
436447
tooltipContent.value = customFormat({
437448
seriesIndex: categoryIndex,
438449
datapoint: plot,
439450
series: drawableDataset.value,
440451
config: quadrantConfig.value
441452
})
442-
443453
} else {
444454
let html = "";
445455

‎src/components/vue-ui-radar.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
createUid,
88
dataLabel,
99
downloadCsv,
10+
functionReturnsString,
11+
isFunction,
1012
makePath,
1113
opacity,
1214
palette,
@@ -298,12 +300,12 @@ function useTooltip(apex, i) {
298300
299301
const customFormat = radarConfig.value.style.chart.tooltip.customFormat;
300302
301-
if (customFormat && typeof customFormat === 'function' && typeof customFormat({
303+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
302304
seriesIndex: i,
303305
datapoint: apex,
304306
series: { categories: datasetCopy.value, datapoints: seriesCopy.value, radar: radar.value },
305307
config: radarConfig.value
306-
}) === 'string') {
308+
}))) {
307309
tooltipContent.value = customFormat({
308310
seriesIndex: i,
309311
datapoint: apex,

0 commit comments

Comments
 (0)