Skip to content

Commit 355ef8e

Browse files
graphierosgraphieros
committed
Improvement - Add color alpha support
1 parent 89e7fee commit 355ef8e

31 files changed

+249
-236
lines changed

‎src/atoms/Tooltip.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { computed, ref } from "vue";
33
import { calcTooltipPosition } from "../calcTooltipPosition";
44
import { useMouse } from "../useMouse";
5-
import { opacity } from "../lib";
5+
import { opacity, setOpacity } from "../lib";
66
77
const props = defineProps({
88
backgroundColor: {
@@ -73,6 +73,10 @@ const position = computed(() => {
7373
});
7474
})
7575
76+
const convertedBackground = computed(() => {
77+
return setOpacity(props.backgroundColor, props.backgroundOpacity);
78+
})
79+
7680
</script>
7781

7882
<template>
@@ -81,7 +85,7 @@ const position = computed(() => {
8185
data-cy="tooltip"
8286
:class="{'vue-data-ui-custom-tooltip' : isCustom, 'vue-data-ui-tooltip': !isCustom}"
8387
v-if="show"
84-
:style="`pointer-events:none;top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${backgroundColor}${opacity[backgroundOpacity]};color:${color};max-width:${maxWidth};font-size:${fontSize}px`};border-radius:${borderRadius}px;border:${borderWidth}px solid ${borderColor};`"
88+
:style="`pointer-events:none;top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${convertedBackground};color:${color};max-width:${maxWidth};font-size:${fontSize}px`};border-radius:${borderRadius}px;border:${borderWidth}px solid ${borderColor};`"
8589
>
8690
<slot name="tooltip-before"/>
8791
<slot/>

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

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
makeDonut,
1919
objectIsEmpty,
2020
palette,
21+
setOpacity,
2122
themePalettes,
2223
XMLNS
2324
} from '../lib';
@@ -577,36 +578,36 @@ defineExpose({
577578
<!-- DEFS -->
578579
<defs>
579580
<radialGradient :id="`gradient_top${uid}`">
580-
<stop offset="0%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`" />
581-
<stop offset="100%" :stop-color="`${FINAL_CONFIG.style.chart.bar.color}`" />
581+
<stop offset="0%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)" />
582+
<stop offset="100%" :stop-color="FINAL_CONFIG.style.chart.bar.color" />
582583
</radialGradient>
583584
<radialGradient :id="`gradient_left${uid}`">
584-
<stop offset="0%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`" />
585-
<stop offset="100%" :stop-color="`${FINAL_CONFIG.style.chart.bar.color}33`" />
585+
<stop offset="0%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)" />
586+
<stop offset="100%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.bar.color, 20)" />
586587
</radialGradient>
587588
<radialGradient :id="`gradient_right${uid}`">
588-
<stop offset="0%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`" />
589-
<stop offset="100%" :stop-color="`${FINAL_CONFIG.style.chart.bar.color}33`" />
589+
<stop offset="0%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)" />
590+
<stop offset="100%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.bar.color, 20)" />
590591
</radialGradient>
591592
<linearGradient :id="`gradient_tube_body${uid}`" x1="0%" y1="0%" x2="100%" y2="0%">
592593
<stop offset="0%" :stop-color="`${FINAL_CONFIG.style.chart.bar.color}`"/>
593-
<stop offset="75%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`"/>
594-
<stop offset="100%" :stop-color="`${FINAL_CONFIG.style.chart.bar.color}66`"/>
594+
<stop offset="75%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)"/>
595+
<stop offset="100%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.bar.color, 40)"/>
595596
</linearGradient>
596597
</defs>
597598

598599
<defs v-if="hasStack">
599600
<radialGradient v-for="bar in stack" :id="`grad_top_${bar.id}`">
600-
<stop offset="0%" :stop-color="`${lightenHexColor(bar.color, 0.5)}DD`" />
601-
<stop offset="100%" :stop-color="`${bar.color}`" />
601+
<stop offset="0%" :stop-color="setOpacity(lightenHexColor(bar.color, 0.5), 80)" />
602+
<stop offset="100%" :stop-color="bar.color" />
602603
</radialGradient>
603604
<linearGradient v-for="bar in stack" :id="`grad_left_${bar.id}`">
604-
<stop offset="0%" :stop-color="`${bar.color}DD`" />
605-
<stop offset="100%" :stop-color="`${darkenHexColor(bar.color, 0.5)}FF`" />
605+
<stop offset="0%" :stop-color="setOpacity(bar.color, 80)" />
606+
<stop offset="100%" :stop-color="setOpacity(darkenHexColor(bar.color, 0.5), 100)" />
606607
</linearGradient>
607608
<linearGradient v-for="bar in stack" :id="`grad_right_${bar.id}`">
608-
<stop offset="2%" :stop-color="`${lightenHexColor(bar.color, 0.5)}FF`" />
609-
<stop offset="100%" :stop-color="`${bar.color}DD`" />
609+
<stop offset="2%" :stop-color="setOpacity(lightenHexColor(bar.color, 0.5), 100)" />
610+
<stop offset="100%" :stop-color="setOpacity(bar.color, 80)" />
610611
</linearGradient>
611612
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" :id="`vertical_line_${uid}`">
612613
<stop offset="0%" stop-color="#FFFFFF"/>
@@ -694,7 +695,7 @@ defineExpose({
694695
<g v-for="(arc, j) in bar.fill.donut">
695696
<path
696697
v-if="displayArcPercentage(arc, bar.fill.donut, true) > 6"
697-
:d="calcNutArrowPath(arc, {x: arc.cx, y: arc.cy}, 0, 8, false, true, 0.5)"
698+
:d="calcNutArrowPath(arc, {x: arc.cx, y: arc.cy}, 0, 8, false, true, 10)"
698699
:stroke="arc.color"
699700
class="vue-ui-donut-arc-path"
700701
stroke-width="0.5"
@@ -717,9 +718,9 @@ defineExpose({
717718
<!-- DONUT HOLLOW -->
718719
<defs>
719720
<radialGradient :id="`hollow_gradient_${uid}`">
720-
<stop offset="0%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`" />
721-
<stop offset="77%" :stop-color="'#FFFFFF' + '20'" />
722-
<stop offset="100%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`" />
721+
<stop offset="0%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)" />
722+
<stop offset="77%" stop-color="#FFFFFF20" />
723+
<stop offset="100%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)" />
723724
</radialGradient>
724725
</defs>
725726
<circle class="vue-ui-donut-arc-path" v-for="(arc, j) in bar.fill.donut" :cx="arc.cx" :cy="arc.cy" :r="28" :fill="`url(#hollow_gradient_${uid})`"/>
@@ -792,16 +793,16 @@ defineExpose({
792793
<g v-for="(bar, i) in stack" :style="`opacity:${selectedSerie ? selectedSerie === bar.id ? 1 : 0.3 : 1}`" class="vue-ui-3d-bar-stack" @click="emits('selectDatapoint', bar)">
793794
<defs>
794795
<radialGradient :id="`gradient_tube_top_${bar.id}`" fx="10%" cy="55%">
795-
<stop offset="0%" :stop-color="`${lightenHexColor(bar.color, 0.5)}DD`" />
796+
<stop offset="0%" :stop-color="setOpacity(lightenHexColor(bar.color, 0.5), 80)" />
796797

797-
<stop offset="100%" :stop-color="`${darkenHexColor(bar.color, 0.1)}DD`" />
798+
<stop offset="100%" :stop-color="setOpacity(darkenHexColor(bar.color, 0.1), 80)" />
798799
</radialGradient>
799800
<linearGradient :id="`gradient_tube_body_${bar.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
800801
<stop offset="0%" :stop-color="`${bar.color}`"/>
801-
<stop offset="10%" :stop-color="`${darkenHexColor(bar.color, 0.7)}FF`"/>
802-
<stop offset="25%" :stop-color="`${darkenHexColor(bar.color, 0.5)}FF`"/>
803-
<stop offset="75%" :stop-color="`${bar.color}DD`"/>
804-
<stop offset="100%" :stop-color="`${lightenHexColor(bar.color, 0.7)}FF`"/>
802+
<stop offset="10%" :stop-color="setOpacity(darkenHexColor(bar.color, 0.7), 100)"/>
803+
<stop offset="25%" :stop-color="setOpacity(darkenHexColor(bar.color, 0.5), 100)"/>
804+
<stop offset="75%" :stop-color="setOpacity(bar.color, 80)"/>
805+
<stop offset="100%" :stop-color="setOpacity(lightenHexColor(bar.color, 0.7), 100)"/>
805806
</linearGradient>
806807
</defs>
807808
<path @mouseenter="selectSerie(bar)" @click="selectSerie(bar, true)" @mouseout="unselectSerie" :d="bar.fill.tubeBody" stroke="#FFFFFF" :stroke-width="0.5" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_tube_body_${bar.id})`"/>
@@ -835,7 +836,7 @@ defineExpose({
835836
<g v-for="(arc, j) in bar.fill.donut">
836837
<path
837838
v-if="displayArcPercentage(arc, bar.fill.donut, true) > 6"
838-
:d="calcNutArrowPath(arc, {x: arc.cx, y: arc.cy}, 0, 8, false, true, 0.5)"
839+
:d="calcNutArrowPath(arc, {x: arc.cx, y: arc.cy}, 0, 8, false, true, 10)"
839840
:stroke="arc.color"
840841
class="vue-ui-donut-arc-path"
841842
stroke-width="0.5"
@@ -844,7 +845,7 @@ defineExpose({
844845
fill="none"
845846
/>
846847
</g>
847-
848+
848849
<path
849850
v-for="(arc, j) in bar.fill.donut"
850851
class="vue-ui-donut-arc-path"
@@ -858,9 +859,9 @@ defineExpose({
858859
<!-- DONUT HOLLOW -->
859860
<defs>
860861
<radialGradient :id="`hollow_gradient_${uid}`">
861-
<stop offset="0%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`" />
862-
<stop offset="77%" :stop-color="'#FFFFFF' + '20'" />
863-
<stop offset="100%" :stop-color="`${convertColorToHex(FINAL_CONFIG.style.chart.backgroundColor)}00`" />
862+
<stop offset="0%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)" />
863+
<stop offset="77%" stop-color="#FFFFFF20" />
864+
<stop offset="100%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, 0)"/>
864865
</radialGradient>
865866
</defs>
866867
<circle class="vue-ui-donut-arc-path" v-for="(arc, j) in bar.fill.donut" :cx="arc.cx" :cy="arc.cy" :r="28" :fill="`url(#hollow_gradient_${uid})`"/>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
functionReturnsString,
1212
isFunction,
1313
objectIsEmpty,
14-
opacity,
14+
setOpacity,
1515
shiftHue,
1616
XMLNS
1717
} from '../lib';
@@ -492,7 +492,7 @@ defineExpose({
492492
/>
493493
<stop
494494
offset="100%"
495-
:stop-color="`${shiftHue(FINAL_CONFIG.style.layout.bars.left.color, FINAL_CONFIG.style.layout.bars.gradient.shiftHue)}${opacity[100 - FINAL_CONFIG.style.layout.bars.gradient.intensity]}`"
495+
:stop-color="setOpacity(shiftHue(FINAL_CONFIG.style.layout.bars.left.color, FINAL_CONFIG.style.layout.bars.gradient.shiftHue), 100 - FINAL_CONFIG.style.layout.bars.gradient.intensity)"
496496
/>
497497
</linearGradient>
498498
<linearGradient
@@ -501,7 +501,7 @@ defineExpose({
501501
>
502502
<stop
503503
offset="0%"
504-
:stop-color="`${shiftHue(FINAL_CONFIG.style.layout.bars.right.color, FINAL_CONFIG.style.layout.bars.gradient.shiftHue)}${opacity[100 - FINAL_CONFIG.style.layout.bars.gradient.intensity]}`"
504+
:stop-color="setOpacity(shiftHue(FINAL_CONFIG.style.layout.bars.right.color, FINAL_CONFIG.style.layout.bars.gradient.shiftHue), 100 - FINAL_CONFIG.style.layout.bars.gradient.intensity)"
505505
/>
506506
<stop
507507
offset="100%"
@@ -688,7 +688,7 @@ defineExpose({
688688
:y="drawingArea.top + (drawingArea.height / len) * i - FINAL_CONFIG.style.layout.bars.gap / 2"
689689
:width="drawingArea.width <= 0 ? 0.0001 : drawingArea.width"
690690
:height="drawingArea.height / len <= 0 ? 0.0001 : drawingArea.height / len"
691-
:fill="selectedIndex !== null && selectedIndex === i ? `${FINAL_CONFIG.style.highlighter.color}${opacity[FINAL_CONFIG.style.highlighter.opacity]}` : 'transparent'"
691+
:fill="selectedIndex !== null && selectedIndex === i ? setOpacity(FINAL_CONFIG.style.highlighter.color, FINAL_CONFIG.style.highlighter.opacity) : 'transparent'"
692692
@mouseover="useTooltip(i, datapoint)"
693693
@mouseleave="selectedIndex = null; isTooltip = false"
694694
/>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3157,8 +3157,6 @@ export default {
31573157
31583158
.vue-ui-annotator .draw--free {
31593159
/* circle cursor for freehand draw mode */
3160-
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVh2YQcchQnSyIijhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB020wn4lIuvyqFXhGGiAhCiMnMMpKZxSx8x9c9Any9i/Es/3N/jgG1YDEgIBHPMcO0iTeIZzZtg/M+scjKskp8Tjxu0gWJH7muePzGueSywDNFM5ueJxaJpVIXK13MyqZGPE0cVTWd8oWcxyrnLc5atc7a9+QvDBf0lQzXaY4ggSUkkYIEBXVUUIWNGK06KRbStB/38Q+7/hS5FHJVwMixgBo0yK4f/A9+d2sVpya9pHAc6H1xnI9RILQLtBqO833sOK0TIPgMXOkdf60JzH6S3uho0SNgcBu4uO5oyh5wuQMMPRmyKbtSkKZQLALvZ/RNeSByC/Sveb2193H6AGSpq+Ub4OAQGCtR9rrPu/u6e/v3TLu/H5C7crM1WjgWAAAABmJLR0QAqwB5AHWF+8OUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwUExIUagzGcQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjTldAxDoNQDIPhL0+q1L33P1AvAhN7xfK6WAgoLfSfrNiykpQtE+7RLzx2vgF9D3o8lWDmn1QVVMP0LZQGmNtqp1/cmou0XHdG/+sYeGZwFBqPCub8rkcvvAGvsi1VYarR8wAAAABJRU5ErkJggg==)
3161-
5 5,
3162-
auto;
3160+
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVh2YQcchQnSyIijhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB020wn4lIuvyqFXhGGiAhCiMnMMpKZxSx8x9c9Any9i/Es/3N/jgG1YDEgIBHPMcO0iTeIZzZtg/M+scjKskp8Tjxu0gWJH7muePzGueSywDNFM5ueJxaJpVIXK13MyqZGPE0cVTWd8oWcxyrnLc5atc7a9+QvDBf0lQzXaY4ggSUkkYIEBXVUUIWNGK06KRbStB/38Q+7/hS5FHJVwMixgBo0yK4f/A9+d2sVpya9pHAc6H1xnI9RILQLtBqO833sOK0TIPgMXOkdf60JzH6S3uho0SNgcBu4uO5oyh5wuQMMPRmyKbtSkKZQLALvZ/RNeSByC/Sveb2193H6AGSpq+Ub4OAQGCtR9rrPu/u6e/v3TLu/H5C7crM1WjgWAAAABmJLR0QAqwB5AHWF+8OUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwUExIUagzGcQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjTldAxDoNQDIPhL0+q1L33P1AvAhN7xfK6WAgoLfSfrNiykpQtE+7RLzx2vgF9D3o8lWDmn1QVVMP0LZQGmNtqp1/cmou0XHdG/+sYeGZwFBqPCub8rkcvvAGvsi1VYarR8wAAAABJRU5ErkJggg==') 5 5, auto;
31633161
}
31643162
</style>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
functionReturnsString,
1212
isFunction,
1313
objectIsEmpty,
14-
opacity,
14+
setOpacity,
1515
shiftHue,
1616
translateSize,
1717
XMLNS
@@ -703,7 +703,7 @@ defineExpose({
703703
:y="drawingArea.top"
704704
:height="drawingArea.height <= 0 ? 0.0001 : drawingArea.height"
705705
:width="slot <= 0 ? 0.0001 : slot"
706-
:fill="hoveredIndex === i ? `${FINAL_CONFIG.style.layout.selector.color}${opacity[FINAL_CONFIG.style.layout.selector.opacity]}` : 'transparent'"
706+
:fill="hoveredIndex === i ? setOpacity(FINAL_CONFIG.style.layout.selector.color, FINAL_CONFIG.style.layout.selector.opacity) : 'transparent'"
707707
@mouseover="useTooltip(i,rect)"
708708
@mouseleave="hoveredIndex = undefined; isTooltip = false"
709709
/>

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount } from "vue";
33
import { useConfig } from "../useConfig";
44
import { useNestedProp } from "../useNestedProp";
5-
import { createCsvContent, createUid, downloadCsv, error, objectIsEmpty, opacity } from "../lib";
5+
import {
6+
createCsvContent,
7+
createUid,
8+
downloadCsv,
9+
error,
10+
objectIsEmpty,
11+
setOpacity
12+
} from "../lib";
613
import { usePrinter } from "../usePrinter";
714
import UserOptions from "../atoms/UserOptions.vue";
815
import Skeleton from "./vue-ui-skeleton.vue";
@@ -435,7 +442,7 @@ defineExpose({
435442
:style="{
436443
...FINAL_CONFIG.tbody.tr.td.style,
437444
border: `${FINAL_CONFIG.tbody.tr.td.border.size}px solid ${FINAL_CONFIG.tbody.tr.td.border.color}`,
438-
backgroundColor: FINAL_CONFIG.tbody.tr.td.style.backgroundColor + opacity[(i % 2 === 0 && FINAL_CONFIG.tbody.tr.td.alternateColor) ? FINAL_CONFIG.tbody.tr.td.alternateOpacity * 100 : 100],
445+
backgroundColor: setOpacity(FINAL_CONFIG.tbody.tr.td.style.backgroundColor, (i % 2 === 0 && FINAL_CONFIG.tbody.tr.td.alternateColor) ? FINAL_CONFIG.tbody.tr.td.alternateOpacity * 100 : 100),
439446
paddingTop: FINAL_CONFIG.tbody.tr.td.padding.top + 'px',
440447
paddingRight: FINAL_CONFIG.tbody.tr.td.padding.right + 'px',
441448
paddingBottom: FINAL_CONFIG.tbody.tr.td.padding.bottom + 'px',

0 commit comments

Comments
 (0)