fix: emit selectLegend when using legend toggle checkbox · graphieros.npmx.social/vue-data-ui@6f3f31b

+1

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

··· 1023 1023 segregated.value.push(l.uid); 1024 1024 }); 1025 1025 } 1026 + emit('selectLegend', mutableDataset.value); 1026 1027 } 1027 1028 1028 1029 function segregate(id) {

+14 -9

src/components/vue-ui-donut.vue

··· 693 693 const isAnimating = ref(false); 694 694 const animatingIndex = ref(null); 695 695 696 + function emitSelectLegend() { 697 + emit( 698 + 'selectLegend', 699 + donutSet.value.map((ds) => ({ 700 + name: ds.name, 701 + color: ds.color, 702 + value: ds.value, 703 + })), 704 + ); 705 + } 706 + 696 707 function animateValue({ 697 708 from, 698 709 to, ··· 725 736 segregated.value.push(i); 726 737 }); 727 738 } 739 + emitSelectLegend(); 728 740 } 729 741 730 742 function segregate(index) { ··· 741 753 mutableSet.value = mutableSet.value.map((ds, i) => 742 754 index === i ? { ...ds, value: targetVal } : ds, 743 755 ); 756 + emitSelectLegend(); 744 757 } 745 758 746 759 function doAnimUp() { ··· 781 794 mutableSet.value = mutableSet.value.map((ds, i) => 782 795 index === i ? { ...ds, value: 0 } : ds, 783 796 ); 797 + emitSelectLegend(); 784 798 } 785 799 786 800 function doAnimDown() { ··· 815 829 setFinalDownState(); 816 830 } 817 831 } 818 - 819 - emit( 820 - 'selectLegend', 821 - donutSet.value.map((ds) => ({ 822 - name: ds.name, 823 - color: ds.color, 824 - value: ds.value, 825 - })), 826 - ); 827 832 } 828 833 829 834 function validSeriesToToggle(name) {

+15 -10

src/components/vue-ui-galaxy.vue

··· 322 322 323 323 const segregated = ref([]); 324 324 325 + function emitSelectLegend() { 326 + emit( 327 + 'selectLegend', 328 + galaxySet.value.map((ds) => { 329 + return { 330 + name: ds.name, 331 + color: ds.color, 332 + value: ds.value, 333 + }; 334 + }), 335 + ); 336 + } 337 + 325 338 function toggleLegend() { 326 339 if (segregated.value.length) { 327 340 segregated.value = []; ··· 330 343 segregated.value.push(l.id); 331 344 }); 332 345 } 346 + emitSelectLegend(); 333 347 } 334 348 335 349 function segregate(datapoint) { ··· 338 352 } else { 339 353 segregated.value.push(datapoint.id); 340 354 } 341 - emit( 342 - 'selectLegend', 343 - galaxySet.value.map((ds) => { 344 - return { 345 - name: ds.name, 346 - color: ds.color, 347 - value: ds.value, 348 - }; 349 - }), 350 - ); 355 + emitSelectLegend(); 351 356 } 352 357 353 358 function validSeriesToToggle(name) {

+3 -6

src/components/vue-ui-history-plot.vue

··· 749 749 segregated.value.push(l.seriesIndex); 750 750 }); 751 751 } 752 + emit('selectLegend', drawableDataset.value); 752 753 } 753 754 754 755 function segregate(index) { ··· 825 826 emit('selectDatapoint', datapoint); 826 827 } 827 828 828 - function selectLegend(legend) { 829 - emit('selectLegend', { 830 - ...legend, 831 - isSegregated: !legend.isSegregated, 832 - opacity: legend.isSegregated ? 1 : 0.5, 833 - }); 829 + function selectLegend(_legend) { 830 + emit('selectLegend', drawableDataset.value); 834 831 } 835 832 836 833 function toggleFullscreen(state) {

+1

src/components/vue-ui-horizontal-bar.vue

··· 748 748 }); 749 749 } 750 750 updateDataLabelOverflow(); 751 + emit('selectLegend', mutableDataset.value); 751 752 } 752 753 753 754 async function segregate(id) {

+7 -1

src/components/vue-ui-nested-donuts.vue

··· 721 721 } else { 722 722 segregated.value.push(...ids); 723 723 } 724 + emit('selectLegend', md.value); 724 725 } 725 726 726 727 function segregateDonut(item) { 727 - emit('selectLegend', item); 728 728 const target = props.dataset 729 729 .flatMap((d, i) => 730 730 d.series.map((s, j) => ({ ··· 778 778 ), 779 779 })); 780 780 }, 781 + onDone: () => { 782 + emit('selectLegend', md.value); 783 + }, 781 784 }); 782 785 } else { 783 786 mutableDataset.value = mutableDataset.value.map((ds) => ({ ··· 786 789 s.id === item.id ? { ...s, value: targetValue } : s, 787 790 ), 788 791 })); 792 + emit('selectLegend', md.value); 789 793 } 790 794 } else if (canSegregate) { 791 795 if (FINAL_CONFIG.value.serieToggleAnimation.show) { ··· 803 807 }, 804 808 onDone: () => { 805 809 segregated.value.push(item.id); 810 + emit('selectLegend', md.value); 806 811 }, 807 812 }); 808 813 } else { ··· 813 818 ), 814 819 })); 815 820 segregated.value.push(item.id); 821 + emit('selectLegend', md.value); 816 822 } 817 823 } 818 824 }

+1

src/components/vue-ui-onion.vue

··· 611 611 segregated.value.push(l.id); 612 612 }); 613 613 } 614 + emit('selectLegend', mutableDataset.value); 614 615 } 615 616 616 617 function segregate(id) {

+3 -6

src/components/vue-ui-parallel-coordinate-plot.vue

··· 529 529 segregated.value.push(l.id); 530 530 }); 531 531 } 532 + emit('selectLegend', filteredDs.value); 532 533 } 533 534 534 535 function segregate(id) { ··· 1017 1018 emit('selectDatapoint', serie); 1018 1019 } 1019 1020 1020 - function selectLegend(legend) { 1021 - emit('selectLegend', { 1022 - ...legend, 1023 - isSegregated: !legend.isSegregated, 1024 - opacity: legend.isSegregated ? 1 : 0.5, 1025 - }); 1021 + function selectLegend(_legend) { 1022 + emit('selectLegend', filteredDs.value); 1026 1023 } 1027 1024 1028 1025 function toggleTable() {

+2 -2

src/components/vue-ui-quadrant.vue

··· 908 908 segregated.value.push(l.id); 909 909 }); 910 910 } 911 + emit('selectLegend', getData()); 911 912 } 912 913 913 914 function segregate(id) { ··· 916 917 } else { 917 918 segregated.value.push(id); 918 919 } 919 - const currentData = getData(); 920 - emit('selectLegend', currentData); 920 + emit('selectLegend', getData()); 921 921 } 922 922 923 923 const legendSet = computed(() => {

+19 -12

src/components/vue-ui-quick-chart.vue

··· 459 459 }); 460 460 } 461 461 } 462 + 463 + if (chartType.value === detector.chartType.DONUT) { 464 + emit('selectLegend', donut.value.dataset); 465 + } else if (chartType.value === detector.chartType.LINE) { 466 + emit('selectLegend', line.value.dataset); 467 + } else if (chartType.value === detector.chartType.BAR) { 468 + emit('selectLegend', bar.value.dataset); 469 + } 462 470 } 463 471 464 472 function segregate(id, len) { ··· 501 509 } 502 510 }), 503 511 }; 512 + emit('selectLegend', donut.value.dataset); 504 513 } else { 505 514 initVal += targetVal * 0.025; 506 515 formattedDataset.value = { ··· 541 550 } 542 551 }), 543 552 }; 553 + emit('selectLegend', donut.value.dataset); 544 554 } else { 545 555 initVal /= 1.1; 546 556 formattedDataset.value = { ··· 561 571 } 562 572 } 563 573 anim(); 574 + } else { 575 + emit('selectLegend', donut.value.dataset); 564 576 } 565 577 } 566 578 ··· 3662 3674 <div 3663 3675 class="vue-ui-quick-chart-legend-item" 3664 3676 v-for="(legendItem, i) in donut.legend" 3665 - @click=" 3666 - segregateDonut(legendItem, donut.dataset); 3667 - emit('selectLegend', legendItem); 3668 - " 3677 + @click="segregateDonut(legendItem, donut.dataset)" 3669 3678 :style="`cursor: ${donut.legend.length > 1 && isCursorPointer ? 'pointer' : 'default'}; opacity:${segregated.includes(legendItem.id) ? '0.5' : '1'}`" 3670 3679 role="button" 3671 3680 tabindex="0" 3672 3681 @keydown=" 3673 3682 handleLegendKeydown($event, () => { 3674 3683 segregateDonut(legendItem, donut.dataset); 3675 - emit('selectLegend', legendItem); 3676 3684 }) 3677 3685 " 3678 3686 > ··· 3690 3698 legendItem, 3691 3699 donut.dataset, 3692 3700 ); 3693 - emit('selectLegend', legendItem); 3694 3701 }, 3695 3702 }, 3696 3703 }" ··· 3766 3773 v-for="(legendItem, i) in line.legend" 3767 3774 @click=" 3768 3775 segregate(legendItem.id, line.legend.length - 1); 3769 - emit('selectLegend', legendItem); 3776 + emit('selectLegend', line.dataset); 3770 3777 " 3771 3778 :style="`cursor: ${line.legend.length > 1 && isCursorPointer ? 'pointer' : 'default'}; opacity:${segregated.includes(legendItem.id) ? '0.5' : '1'}`" 3772 3779 role="button" ··· 3777 3784 legendItem.id, 3778 3785 line.legend.length - 1, 3779 3786 ); 3780 - emit('selectLegend', legendItem); 3787 + emit('selectLegend', line.dataset); 3781 3788 }) 3782 3789 " 3783 3790 > ··· 3795 3802 legendItem.id, 3796 3803 line.legend.length - 1, 3797 3804 ); 3798 - emit('selectLegend', legendItem); 3805 + emit('selectLegend', line.dataset); 3799 3806 }, 3800 3807 }, 3801 3808 }" ··· 3822 3829 v-for="(legendItem, i) in bar.legend" 3823 3830 @click=" 3824 3831 segregate(legendItem.id, bar.legend.length - 1); 3825 - emit('selectLegend', legendItem); 3832 + emit('selectLegend', bar.dataset); 3826 3833 " 3827 3834 :style="`cursor: ${bar.legend.length > 1 && isCursorPointer ? 'pointer' : 'default'}; opacity:${segregated.includes(legendItem.id) ? '0.5' : '1'}`" 3828 3835 role="button" ··· 3830 3837 @keydown=" 3831 3838 handleLegendKeydown($event, () => { 3832 3839 segregate(legendItem.id, bar.legend.length - 1); 3833 - emit('selectLegend', legendItem); 3840 + emit('selectLegend', bar.dataset); 3834 3841 }) 3835 3842 " 3836 3843 > ··· 3848 3855 legendItem.id, 3849 3856 bar.legend.length - 1, 3850 3857 ); 3851 - emit('selectLegend', legendItem); 3858 + emit('selectLegend', bar.dataset); 3852 3859 }, 3853 3860 }, 3854 3861 }"

+17 -12

src/components/vue-ui-radar.vue

··· 369 369 segregated.value.push(i); 370 370 }); 371 371 } 372 + emitSelectLegend(); 373 + } 374 + 375 + function emitSelectLegend() { 376 + emit( 377 + 'selectLegend', 378 + legendSet.value 379 + .filter((_, i) => !segregated.value.includes(i)) 380 + .map((l) => { 381 + return { 382 + name: l.name, 383 + color: l.color, 384 + proportion: l.totalProportion, 385 + }; 386 + }), 387 + ); 372 388 } 373 389 374 390 function segregate(index) { ··· 386 402 isAnimating.value = false; 387 403 }, 500); 388 404 } 389 - emit( 390 - 'selectLegend', 391 - legendSet.value 392 - .filter((_, i) => !segregated.value.includes(i)) 393 - .map((l) => { 394 - return { 395 - name: l.name, 396 - color: l.color, 397 - proportion: l.totalProportion, 398 - }; 399 - }), 400 - ); 405 + emitSelectLegend(); 401 406 } 402 407 403 408 function getData() {

+1 -1

src/components/vue-ui-ridgeline.vue

··· 561 561 segregated.value.push(l.id); 562 562 }); 563 563 } 564 + emit('selectLegend', drawableDataset.value); 564 565 } 565 566 566 567 function segregate(slug) { ··· 569 570 } else { 570 571 segregated.value.push(slug); 571 572 } 572 - 573 573 emit('selectLegend', drawableDataset.value); 574 574 } 575 575

+12 -7

src/components/vue-ui-rings.vue

··· 433 433 segregated.value.push(l.uid); 434 434 }); 435 435 } 436 + emitSelectLegend(); 436 437 } 437 438 438 - function segregate(uid) { 439 - if (segregated.value.includes(uid)) { 440 - segregated.value = segregated.value.filter((s) => s !== uid); 441 - } else { 442 - if (segregated.value.length === datasetCopy.value.length - 1) return; 443 - segregated.value.push(uid); 444 - } 439 + function emitSelectLegend() { 445 440 emit( 446 441 'selectLegend', 447 442 convertedDataset.value.map((ds) => { ··· 452 447 }; 453 448 }), 454 449 ); 450 + } 451 + 452 + function segregate(uid) { 453 + if (segregated.value.includes(uid)) { 454 + segregated.value = segregated.value.filter((s) => s !== uid); 455 + } else { 456 + if (segregated.value.length === datasetCopy.value.length - 1) return; 457 + segregated.value.push(uid); 458 + } 459 + emitSelectLegend(); 455 460 } 456 461 457 462 function validSeriesToToggle(name) {

+3 -1

src/components/vue-ui-scatter.vue

··· 91 91 }, 92 92 }); 93 93 94 - const emit = defineEmits(['copyAlt']); 94 + const emit = defineEmits(['copyAlt', 'selectLegend']); 95 95 96 96 const isDataset = computed(() => { 97 97 return !!props.dataset && props.dataset.length; ··· 1440 1440 segregated.value.push(l.id); 1441 1441 }); 1442 1442 } 1443 + emit('selectLegend', mutableDataset.value); 1443 1444 } 1444 1445 1445 1446 function segregate(id) { ··· 1450 1451 segregated.value.push(id); 1451 1452 } 1452 1453 } 1454 + emit('selectLegend', mutableDataset.value); 1453 1455 } 1454 1456 1455 1457 function validSeriesToToggle(name) {

+3 -1

src/components/vue-ui-sparkstackbar.vue

··· 346 346 segregated.value.push(i); 347 347 }); 348 348 } 349 + emits('selectLegend', mutableDataset.value); 349 350 } 350 351 351 352 function segregate(index) { ··· 356 357 segregated.value.push(index); 357 358 } 358 359 } 360 + emits('selectLegend', mutableDataset.value); 359 361 } 360 362 361 363 function validSeriesToToggle(name) { ··· 406 408 return datapoints; 407 409 }); 408 410 409 - const emits = defineEmits(['selectDatapoint']); 411 + const emits = defineEmits(['selectDatapoint', 'selectLegend']); 410 412 411 413 function selectDatapoint(datapoint, index, fromLegend = false) { 412 414 emits('selectDatapoint', { datapoint, index });

+1

src/components/vue-ui-stackbar.vue

··· 2085 2085 segregated.value.push(l.id); 2086 2086 }); 2087 2087 } 2088 + emit('selectLegend', formattedDataset.value); 2088 2089 } 2089 2090 2090 2091 function segregate(item) {

+1

src/components/vue-ui-stackline.vue

··· 2330 2330 segregated.value.push(l.id); 2331 2331 }); 2332 2332 } 2333 + emit('selectLegend', formattedDataset.value); 2333 2334 } 2334 2335 2335 2336 function segregate(item) {

+12 -1

src/components/vue-ui-treemap.vue

··· 1152 1152 segregated.value.push(l.id); 1153 1153 }); 1154 1154 } 1155 + emit( 1156 + 'selectLegend', 1157 + immutableDataset.value.filter( 1158 + (ds) => !segregated.value.includes(ds.id), 1159 + ), 1160 + ); 1155 1161 } 1156 1162 1157 1163 function segregate(rect) { ··· 1163 1169 segregated.value.push(rect.id); 1164 1170 } 1165 1171 } 1166 - emit('selectLegend', orderedDataset.value); 1172 + emit( 1173 + 'selectLegend', 1174 + immutableDataset.value.filter( 1175 + (ds) => !segregated.value.includes(ds.id), 1176 + ), 1177 + ); 1167 1178 } 1168 1179 1169 1180 function validSeriesToToggle(name) {

+2 -4

src/components/vue-ui-xy-canvas.vue

··· 2876 2876 } 2877 2877 datasetHasChanged.value = true; 2878 2878 debounceCanvasResize(); 2879 + emit('selectLegend', formattedDataset.value); 2879 2880 } 2880 2881 2881 2882 function segregate(index) { 2882 - emit( 2883 - 'selectLegend', 2884 - formattedDataset.value.find((el) => el.absoluteIndex === index), 2885 - ); 2886 2883 if (segregated.value.includes(index)) { 2887 2884 segregated.value = segregated.value.filter((i) => i !== index); 2888 2885 } else { ··· 2890 2887 } 2891 2888 datasetHasChanged.value = true; 2892 2889 debounceCanvasResize(); 2890 + emit('selectLegend', formattedDataset.value); 2893 2891 } 2894 2892 2895 2893 function validSeriesToToggle(name) {

+15 -10

src/components/vue-ui-xy.vue

··· 1857 1857 segregatedSeries.value.push(s.id); 1858 1858 }); 1859 1859 } 1860 + emitSelectLegend(); 1860 1861 } 1861 1862 1862 1863 function handleLegendKeydown(event, legendItem) { ··· 1866 1867 } 1867 1868 } 1868 1869 1869 - function segregate(legendItem) { 1870 - if (segregatedSeries.value.includes(legendItem.id)) { 1871 - segregatedSeries.value = segregatedSeries.value.filter( 1872 - (id) => id !== legendItem.id, 1873 - ); 1874 - } else { 1875 - if (segregatedSeries.value.length + 1 === safeDataset.value.length) 1876 - return; 1877 - segregatedSeries.value.push(legendItem.id); 1878 - } 1870 + function emitSelectLegend() { 1879 1871 emit( 1880 1872 'selectLegend', 1881 1873 relativeDataset.value.map((s) => { ··· 1887 1879 }; 1888 1880 }), 1889 1881 ); 1882 + } 1883 + 1884 + function segregate(legendItem) { 1885 + if (segregatedSeries.value.includes(legendItem.id)) { 1886 + segregatedSeries.value = segregatedSeries.value.filter( 1887 + (id) => id !== legendItem.id, 1888 + ); 1889 + } else { 1890 + if (segregatedSeries.value.length + 1 === safeDataset.value.length) 1891 + return; 1892 + segregatedSeries.value.push(legendItem.id); 1893 + } 1894 + emitSelectLegend(); 1890 1895 segregateStep.value += 1; 1891 1896 } 1892 1897

Configure Feed

Configure Feed