Skip to content

Commit db47e79

Browse files
graphierosgraphieros
committed
New feature - Add annotator user option
1 parent ec908ef commit db47e79

35 files changed

+777
-49
lines changed

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,8 @@ const emit = defineEmits([
154154
'pause',
155155
'reset',
156156
'restart',
157-
'lap'
157+
'lap',
158+
'toggleAnnotator'
158159
]);
159160
160161
const isError = computed(() => !components[props.component]);
@@ -193,6 +194,7 @@ const lap = ref(() => null);
193194
const toggleAnimation = ref(() => null);
194195
const pauseAnimation = ref(() => null);
195196
const resumeAnimation = ref(() => null);
197+
const toggleAnnotator = ref(() => null);
196198
197199
onMounted(() => {
198200
if (isError.value) {
@@ -272,6 +274,9 @@ watch(currentComponentRef, async (newRef) => {
272274
if (newRef.resumeAnimation) {
273275
resumeAnimation.value = newRef.resumeAnimation;
274276
}
277+
if (newRef.toggleAnnotator) {
278+
toggleAnnotator.value = newRef.toggleAnnotator;
279+
}
275280
}
276281
})
277282
@@ -300,7 +305,8 @@ const getEventHandlers = () => {
300305
'lap',
301306
'toggleAnimation',
302307
'pauseAnimation',
303-
'resumeAnimation'
308+
'resumeAnimation',
309+
'toggleAnnotator'
304310
];
305311
const handlers = {};
306312
eventNames.forEach(event => {
@@ -345,7 +351,8 @@ defineExpose({
345351
lap,
346352
pauseAnimation,
347353
resumeAnimation,
348-
toggleAnimation
354+
toggleAnimation,
355+
toggleAnnotator
349356
});
350357
</script>
351358

‎src/components/vue-ui-3d-bar.vue‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { useNestedProp } from "../useNestedProp";
3232
import { usePrinter } from "../usePrinter";
3333
import { useConfig } from "../useConfig";
3434
import PackageVersion from "../atoms/PackageVersion.vue";
35+
import PenAndPaper from "../atoms/PenAndPaper.vue";
3536
3637
const { vue_ui_3d_bar: DEFAULT_CONFIG } = useConfig();
3738
@@ -504,19 +505,31 @@ function toggleTable() {
504505
mutableConfig.value.showTable = !mutableConfig.value.showTable;
505506
}
506507
508+
const isAnnotator = ref(false);
509+
function toggleAnnotator() {
510+
isAnnotator.value = !isAnnotator.value;
511+
}
512+
507513
defineExpose({
508514
generateCsv,
509515
generatePdf,
510516
generateImage,
511517
getData,
512-
toggleTable
518+
toggleTable,
519+
toggleAnnotator
513520
});
514-
515-
516521
</script>
517522

518523
<template>
519524
<div ref="bar3dChart" :class="`vue-ui-3d-bar`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="`3d_bar_${uid}`">
525+
<PenAndPaper
526+
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
527+
:parent="bar3dChart"
528+
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
529+
:color="FINAL_CONFIG.style.chart.color"
530+
:active="isAnnotator"
531+
@close="toggleAnnotator"
532+
/>
520533

521534
<div v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent`">
522535
<!-- TITLE AS DIV -->
@@ -552,11 +565,14 @@ defineExpose({
552565
:titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
553566
:chartElement="bar3dChart"
554567
:position="FINAL_CONFIG.userOptions.position"
568+
:hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator"
569+
:isAnnotation="isAnnotator"
555570
@toggleFullscreen="toggleFullscreen"
556571
@generatePdf="generatePdf"
557572
@generateCsv="generateCsv"
558573
@generateImage="generateImage"
559574
@toggleTable="toggleTable"
575+
@toggleAnnotator="toggleAnnotator"
560576
>
561577
<template #optionPdf v-if="$slots.optionPdf">
562578
<slot name="optionPdf" />
@@ -573,6 +589,9 @@ defineExpose({
573589
<template v-if="$slots.optionFullscreen" template #optionFullscreen="{ toggleFullscreen, isFullscreen }">
574590
<slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
575591
</template>
592+
<template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
593+
<slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
594+
</template>
576595
</UserOptions>
577596

578597
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="3d-bar-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">

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

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { usePrinter } from "../usePrinter";
2828
import { useResponsive } from "../useResponsive";
2929
import { useConfig } from "../useConfig";
3030
import PackageVersion from "../atoms/PackageVersion.vue";
31+
import PenAndPaper from "../atoms/PenAndPaper.vue";
3132
3233
const { vue_ui_age_pyramid: DEFAULT_CONFIG } = useConfig();
3334
@@ -404,19 +405,33 @@ function toggleTooltip() {
404405
mutableConfig.value.showTooltip = !mutableConfig.value.showTooltip;
405406
}
406407
408+
const isAnnotator = ref(false);
409+
function toggleAnnotator() {
410+
isAnnotator.value = !isAnnotator.value;
411+
}
412+
407413
defineExpose({
408414
generatePdf,
409415
generateCsv,
410416
generateImage,
411417
toggleTable,
412-
toggleTooltip
418+
toggleTooltip,
419+
toggleAnnotator
413420
});
414421
415422
</script>
416423

417424
<template>
418425
<div :class="`vue-ui-age-pyramid ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;${!FINAL_CONFIG.style.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%' : ''}`">
419-
426+
<PenAndPaper
427+
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
428+
:parent="agePyramid"
429+
:backgroundColor="FINAL_CONFIG.style.backgroundColor"
430+
:color="FINAL_CONFIG.style.color"
431+
:active="isAnnotator"
432+
@close="toggleAnnotator"
433+
/>
434+
420435
<div ref="chartTitle" v-if="FINAL_CONFIG.style.title.text" :style="`width:100%;background:transparent`">
421436
<Title
422437
:key="`title_${titleStep}`"
@@ -454,12 +469,15 @@ defineExpose({
454469
:titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
455470
:chartElement="agePyramid"
456471
:position="FINAL_CONFIG.userOptions.position"
472+
:hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator"
473+
:isAnnotation="isAnnotator"
457474
@toggleFullscreen="toggleFullscreen"
458475
@generatePdf="generatePdf"
459476
@generateCsv="generateCsv"
460477
@generateImage="generateImage"
461478
@toggleTable="toggleTable"
462479
@toggleTooltip="toggleTooltip"
480+
@toggleAnnotator="toggleAnnotator"
463481
>
464482
<template #optionTooltip v-if="$slots.optionTooltip">
465483
<slot name="optionTooltip"/>
@@ -479,6 +497,9 @@ defineExpose({
479497
<template v-if="$slots.optionFullscreen" template #optionFullscreen="{ toggleFullscreen, isFullscreen }">
480498
<slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
481499
</template>
500+
<template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
501+
<slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
502+
</template>
482503
</UserOptions>
483504

484505
<!-- CHART -->

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Legend from "../atoms/Legend.vue";
1414
import UserOptions from "../atoms/UserOptions.vue";
1515
import { usePrinter } from "../usePrinter";
1616
import PackageVersion from "../atoms/PackageVersion.vue";
17+
import PenAndPaper from "../atoms/PenAndPaper.vue";
1718
1819
const { vue_ui_bullet: DEFAULT_CONFIG } = useConfig();
1920
@@ -316,10 +317,16 @@ function getData() {
316317
return segments.value;
317318
}
318319
320+
const isAnnotator = ref(false);
321+
function toggleAnnotator() {
322+
isAnnotator.value = !isAnnotator.value;
323+
}
324+
319325
defineExpose({
326+
getData,
320327
generatePdf,
321328
generateImage,
322-
getData
329+
toggleAnnotator
323330
})
324331
325332
</script>
@@ -331,6 +338,14 @@ defineExpose({
331338
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%;background:${FINAL_CONFIG.style.chart.backgroundColor}`"
332339
:id="`bullet_${uid}`"
333340
>
341+
<PenAndPaper
342+
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
343+
:parent="bulletChart"
344+
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
345+
:color="FINAL_CONFIG.style.chart.color"
346+
:active="isAnnotator"
347+
@close="toggleAnnotator"
348+
/>
334349
<div ref="chartTitle" v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;`">
335350
<Title
336351
lineHeight="1.3rem"
@@ -367,9 +382,12 @@ defineExpose({
367382
:chartElement="bulletChart"
368383
:position="FINAL_CONFIG.userOptions.position"
369384
:titles="{...FINAL_CONFIG.userOptions.buttonTitles }"
385+
:hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator"
386+
:isAnnotation="isAnnotator"
370387
@toggleFullscreen="toggleFullscreen"
371388
@generatePdf="generatePdf"
372389
@generateImage="generateImage"
390+
@toggleAnnotator="toggleAnnotator"
373391
>
374392
<template #optionPdf v-if="$slots.optionPdf">
375393
<slot name="optionPdf" />
@@ -380,6 +398,9 @@ defineExpose({
380398
<template v-if="$slots.optionFullscreen" template #optionFullscreen="{ toggleFullscreen, isFullscreen }">
381399
<slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
382400
</template>
401+
<template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
402+
<slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
403+
</template>
383404
</UserOptions>
384405

385406
<svg

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { usePrinter } from "../usePrinter";
3030
import { useResponsive } from "../useResponsive";
3131
import { useConfig } from "../useConfig";
3232
import PackageVersion from "../atoms/PackageVersion.vue";
33+
import PenAndPaper from "../atoms/PenAndPaper.vue";
3334
3435
const { vue_ui_candlestick: DEFAULT_CONFIG } = useConfig()
3536
@@ -453,18 +454,33 @@ function toggleTooltip() {
453454
mutableConfig.value.showTooltip = !mutableConfig.value.showTooltip;
454455
}
455456
457+
const isAnnotator = ref(false);
458+
function toggleAnnotator() {
459+
isAnnotator.value = !isAnnotator.value;
460+
}
461+
456462
defineExpose({
457463
generatePdf,
458464
generateCsv,
459465
generateImage,
460466
toggleTable,
461-
toggleTooltip
467+
toggleTooltip,
468+
toggleAnnotator
462469
});
463470
464471
</script>
465472

466473
<template>
467474
<div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`position:relative;font-family:${FINAL_CONFIG.style.fontFamily}; text-align:center;${!FINAL_CONFIG.style.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.backgroundColor}; ${FINAL_CONFIG.responsive ? 'height: 100%' : ''}`" :id="`vue-ui-candlestick_${uid}`">
475+
<PenAndPaper
476+
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
477+
:parent="candlestickChart"
478+
:backgroundColor="FINAL_CONFIG.style.backgroundColor"
479+
:color="FINAL_CONFIG.style.color"
480+
:active="isAnnotator"
481+
@close="toggleAnnotator"
482+
/>
483+
468484
<div ref="chartTitle" v-if="FINAL_CONFIG.style.title.text" :style="`width:100%;background:transparent`">
469485
<!-- TITLE AS DIV -->
470486
<Title
@@ -503,12 +519,15 @@ defineExpose({
503519
:titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
504520
:chartElement="candlestickChart"
505521
:position="FINAL_CONFIG.userOptions.position"
522+
:hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator"
523+
:isAnnotation="isAnnotator"
506524
@toggleFullscreen="toggleFullscreen"
507525
@generatePdf="generatePdf"
508526
@generateCsv="generateCsv"
509527
@generateImage="generateImage"
510528
@toggleTable="toggleTable"
511529
@toggleTooltip="toggleTooltip"
530+
@toggleAnnotator="toggleAnnotator"
512531
>
513532
<template #optionTooltip v-if="$slots.optionTooltip">
514533
<slot name="optionTooltip"/>
@@ -528,6 +547,9 @@ defineExpose({
528547
<template v-if="$slots.optionFullscreen" template #optionFullscreen="{ toggleFullscreen, isFullscreen }">
529548
<slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
530549
</template>
550+
<template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
551+
<slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
552+
</template>
531553
</UserOptions>
532554

533555
<!-- CHART -->

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { useNestedProp } from "../useNestedProp";
3131
import { usePrinter } from "../usePrinter";
3232
import { useConfig } from "../useConfig";
3333
import PackageVersion from "../atoms/PackageVersion.vue";
34+
import PenAndPaper from "../atoms/PenAndPaper.vue";
3435
3536
const { vue_ui_chestnut: DEFAULT_CONFIG } = useConfig()
3637
@@ -494,12 +495,18 @@ function toggleTable() {
494495
mutableConfig.value.showTable = !mutableConfig.value.showTable;
495496
}
496497
498+
const isAnnotator = ref(false);
499+
function toggleAnnotator() {
500+
isAnnotator.value = !isAnnotator.value;
501+
}
502+
497503
defineExpose({
498504
getData,
499505
generatePdf,
500506
generateCsv,
501507
generateImage,
502-
toggleTable
508+
toggleTable,
509+
toggleAnnotator,
503510
});
504511
505512
</script>
@@ -511,6 +518,15 @@ defineExpose({
511518
:id="`vue-ui-chestnut_${uid}`"
512519
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;padding-top:36px;background:${FINAL_CONFIG.style.chart.backgroundColor}`"
513520
>
521+
<PenAndPaper
522+
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
523+
:parent="chestnutChart"
524+
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
525+
:color="FINAL_CONFIG.style.chart.color"
526+
:active="isAnnotator"
527+
@close="toggleAnnotator"
528+
/>
529+
514530
<!-- OPTIONS -->
515531
<UserOptions
516532
ref="details"
@@ -530,11 +546,14 @@ defineExpose({
530546
:titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
531547
:chartElement="chestnutChart"
532548
:position="FINAL_CONFIG.userOptions.position"
549+
:hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator"
550+
:isAnnotation="isAnnotator"
533551
@toggleFullscreen="toggleFullscreen"
534552
@generatePdf="generatePdf"
535553
@generateCsv="generateCsv"
536554
@generateImage="generateImage"
537555
@toggleTable="toggleTable"
556+
@toggleAnnotator="toggleAnnotator"
538557
>
539558
<template #optionPdf v-if="$slots.optionPdf">
540559
<slot name="optionPdf" />
@@ -551,9 +570,12 @@ defineExpose({
551570
<template v-if="$slots.optionFullscreen" template #optionFullscreen="{ toggleFullscreen, isFullscreen }">
552571
<slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
553572
</template>
573+
<template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
574+
<slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
575+
</template>
554576
</UserOptions>
555577

556-
<svg :xmlns="XMLNS" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color}`" >
578+
<svg :xmlns="XMLNS" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color}`" >
557579
<PackageVersion />
558580

559581
<!-- TITLE AS G -->

0 commit comments

Comments
 (0)