Skip to content

Commit bb2bc4b

Browse files
graphierosgraphieros
committed
Improvement - VueUiTableSparkline - Display buttons for each sorting order
1 parent 597c1b1 commit bb2bc4b

File tree

1 file changed

+100
-33
lines changed

1 file changed

+100
-33
lines changed

‎src/components/vue-ui-table-sparkline.vue‎

Lines changed: 100 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ function prepareConfig() {
7878
7979
watch(() => props.config, (_newCfg) => {
8080
FINAL_CONFIG.value = prepareConfig();
81+
userOptionsVisible.value = !FINAL_CONFIG.value.showOnChartHover;
8182
prepareChart();
8283
sparkStep.value += 1;
8384
}, { deep: true });
@@ -219,10 +220,10 @@ function restoreOrder() {
219220
mutableDataset.value = datasetWithOrders.value;
220221
}
221222
222-
function orderDatasetByIndex(th, index) {
223+
function orderDatasetByIndex(th, index, order) {
223224
224225
if ((['name', 'sum', 'average', 'median'].includes(th.type))) {
225-
orderDatasetByAttribute(th.type, index);
226+
orderDatasetByAttribute(th.type, index, order);
226227
return;
227228
}
228229
@@ -236,7 +237,7 @@ function orderDatasetByIndex(th, index) {
236237
restoreOrder();
237238
}
238239
239-
if (sortStates.value[index].state === 1 && currentSortingIndex.value === index) {
240+
if (sortStates.value[index].state === order && currentSortingIndex.value === index) {
240241
currentSortingIndex.value = undefined;
241242
restoreOrder();
242243
return;
@@ -247,7 +248,7 @@ function orderDatasetByIndex(th, index) {
247248
248249
const combinedValues = datasetWithOrders.value.map(series => (series.values[index] || []));
249250
250-
const sortOrder = sortIndex.value === index ? 1 : -1;
251+
const sortOrder = order;
251252
sortStates.value[index].state = sortOrder;
252253
253254
currentSortOrder.value = sortOrder;
@@ -320,7 +321,7 @@ const sortOrders = ref({
320321
321322
const currentAdditionalSort = ref(undefined);
322323
323-
function orderDatasetByAttribute(attribute, index) {
324+
function orderDatasetByAttribute(attribute, index, order) {
324325
if (!mutableDataset.value || mutableDataset.value.length === 0) return;
325326
if (!hasAdditionalSorting(attribute)) return;
326327
@@ -335,7 +336,7 @@ function orderDatasetByAttribute(attribute, index) {
335336
currentSortingIndex.value = undefined;
336337
337338
338-
if (sortOrders.value[attribute] === 1 && currentAdditionalSort.value) {
339+
if (sortOrders.value[attribute] === order && currentAdditionalSort.value) {
339340
currentAdditionalSort.value = undefined;
340341
restoreOrder();
341342
return;
@@ -344,7 +345,7 @@ function orderDatasetByAttribute(attribute, index) {
344345
currentAdditionalSort.value = attribute;
345346
isSorting.value = true;
346347
347-
sortOrders.value[attribute] = sortOrders.value[attribute] === -1 ? 1 : -1;
348+
sortOrders.value[attribute] = order;
348349
349350
if (![null, undefined].includes(index)) {
350351
sortStates.value[index].state = sortOrders.value[attribute];
@@ -424,11 +425,11 @@ function hasAdditionalSorting(th) {
424425
return false;
425426
}
426427
427-
function getArrowOpacity(index, th) {
428+
function getArrowOpacity(index, th, order) {
428429
if (['sum', 'average', 'median'].includes(th.type)) {
429-
return currentAdditionalSort.value === th.type ? 1 : 0.3;
430+
return currentAdditionalSort.value === th.type ? sortOrders.value[th.type] === order ? 1 : 0.3 : 0.3;
430431
} else {
431-
return index === currentSortingIndex.value ? 1 : 0.3;
432+
return index === currentSortingIndex.value ? sortStates.value[index].state === order ? 1 : 0.3 : 0.3;
432433
}
433434
}
434435
@@ -495,27 +496,52 @@ defineExpose({
495496
border: FINAL_CONFIG.thead.outline,
496497
textAlign: FINAL_CONFIG.thead.textAlign,
497498
fontWeight: FINAL_CONFIG.thead.bold ? 'bold' : 'normal',
498-
cursor: FINAL_CONFIG.sortedSeriesName ? 'pointer' : 'default'
499-
}" class="sticky-col-first" @click="orderDatasetByIndex({type: 'name'}, null)">
499+
}" class="sticky-col-first">
500500
<div
501501
:style="{
502502
display: 'flex',
503503
flexDirection: 'row',
504504
alignItems: 'center',
505-
gap: '6px',
505+
gap: '3px',
506506
justifyContent: FINAL_CONFIG.thead.textAlign,
507-
pointerEvents: 'none'
508507
}">
509508
<span>{{ FINAL_CONFIG.translations.serie }}</span>
510-
<BaseIcon
511-
:size="12"
512-
v-if="FINAL_CONFIG.sortedSeriesName"
513-
:name="sortOrders.name === 1 ? 'arrowBottom' : 'arrowTop'"
514-
:stroke="FINAL_CONFIG.thead.color"
509+
510+
<div
511+
v-if="mutableDataset.length > 1 && FINAL_CONFIG.sortedSeriesName"
515512
:style="{
516-
opacity: currentAdditionalSort === 'name' ? 1 : 0.3
513+
display: 'flex',
514+
flexDirection: 'row',
515+
alignItems: 'center'
517516
}"
518-
/>
517+
>
518+
<button
519+
class="vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-down"
520+
@click="orderDatasetByIndex({type: 'name'}, null, -1)"
521+
>
522+
<BaseIcon
523+
:size="12"
524+
name="arrowBottom"
525+
:stroke="FINAL_CONFIG.thead.color"
526+
:style="{
527+
opacity: currentAdditionalSort === 'name' ? sortOrders.name === -1 ? 1 : 0.3 : 0.3
528+
}"
529+
/>
530+
</button>
531+
<button
532+
class="vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-up"
533+
@click="orderDatasetByIndex({type: 'name'}, null, 1)"
534+
>
535+
<BaseIcon
536+
:size="12"
537+
name="arrowTop"
538+
:stroke="FINAL_CONFIG.thead.color"
539+
:style="{
540+
opacity: currentAdditionalSort === 'name' ? sortOrders.name === 1 ? 1 : 0.3 : 0.3
541+
}"
542+
/>
543+
</button>
544+
</div>
519545
</div>
520546
</th>
521547
<th role="cell" v-for="(th, i) in colNames" :style="{
@@ -524,30 +550,55 @@ defineExpose({
524550
textAlign: FINAL_CONFIG.thead.textAlign,
525551
fontWeight: FINAL_CONFIG.thead.bold ? 'bold' : 'normal',
526552
minWidth: i === colNames.length - 1 ? `${FINAL_CONFIG.sparkline.dimensions.width}px` : '48px',
527-
cursor: hasSorting(i) || hasAdditionalSorting(th) ? 'pointer' : 'default',
528553
paddingRight: i === colNames.length - 1 && FINAL_CONFIG.userOptions.show ? '36px' : '',
529-
}" @click="() => orderDatasetByIndex(th, i)" :class="{'sticky-col': i === colNames.length - 1 && FINAL_CONFIG.showSparklines}"
554+
}" :class="{'sticky-col': i === colNames.length - 1 && FINAL_CONFIG.showSparklines}"
530555
>
531556
<div
532557
:style="{
533558
display: 'flex',
534559
flexDirection: 'row',
535560
alignItems: 'center',
536-
gap: '6px',
561+
gap: '3px',
537562
justifyContent: FINAL_CONFIG.thead.textAlign,
538-
pointerEvents: 'none'
539563
}">
540564
<span>{{ th.value }}</span>
541-
542-
<BaseIcon
543-
:size="12"
544-
v-if="hasSorting(i) || hasAdditionalSorting(th)"
545-
:name="sortStates[i].state === 1 ? 'arrowBottom' : 'arrowTop'"
546-
:stroke="FINAL_CONFIG.thead.color"
565+
566+
<div
567+
v-if="mutableDataset.length > 1 && (hasSorting(i) || hasAdditionalSorting(th))"
547568
:style="{
548-
opacity: getArrowOpacity(i, th)
569+
display: 'flex',
570+
flexDirection: 'row',
571+
alignItems: 'center'
549572
}"
550-
/>
573+
>
574+
<button
575+
class="vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-down"
576+
@click="() => orderDatasetByIndex(th, i, -1)"
577+
>
578+
<BaseIcon
579+
:size="12"
580+
581+
name="arrowBottom"
582+
:stroke="FINAL_CONFIG.thead.color"
583+
:style="{
584+
opacity: getArrowOpacity(i, th, -1)
585+
}"
586+
/>
587+
</button>
588+
<button
589+
class="vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-up"
590+
@click="() => orderDatasetByIndex(th, i, 1)"
591+
>
592+
<BaseIcon
593+
:size="12"
594+
name="arrowTop"
595+
:stroke="FINAL_CONFIG.thead.color"
596+
:style="{
597+
opacity: getArrowOpacity(i, th, 1)
598+
}"
599+
/>
600+
</button>
601+
</div>
551602
</div>
552603
<UserOptions
553604
ref="details"
@@ -831,4 +882,20 @@ td {
831882
text-transform: capitalize;
832883
}
833884
}
885+
886+
.vue-ui-table-sparkline-sorting-button {
887+
cursor: pointer;
888+
border: none;
889+
background: transparent;
890+
display: flex;
891+
align-items:center;
892+
justify-content:center;
893+
height: 16px;
894+
width: 16px;
895+
padding: 0;
896+
}
897+
898+
.vue-ui-table-sparkline-sorting-button-down {
899+
margin-left: 3px;
900+
}
834901
</style>

0 commit comments

Comments
 (0)