Skip to content

Commit a4d6f32

Browse files
graphierosgraphieros
committed
Reduce bundle size
1 parent c9678c0 commit a4d6f32

22 files changed

+181
-247
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": "1.9.14",
4+
"version": "1.9.15",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/atoms/Tooltip.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script setup>
2+
import { computed, ref } from "vue";
3+
import { calcTooltipPosition } from "../calcTooltipPosition";
4+
import { useMouse } from "../useMouse";
5+
6+
const props = defineProps({
7+
backgroundColor: {
8+
type: String,
9+
default: "#FFFFFF"
10+
},
11+
color: {
12+
type: String,
13+
default: "#000000"
14+
},
15+
content: String,
16+
maxWidth: {
17+
type: String,
18+
default: '300px'
19+
},
20+
parent: {
21+
type: Object
22+
},
23+
show: {
24+
type: Boolean,
25+
default: false,
26+
},
27+
});
28+
29+
const tooltip = ref(null)
30+
31+
const clientPosition = ref(useMouse());
32+
33+
const position = computed(() => {
34+
return calcTooltipPosition({
35+
tooltip: tooltip.value,
36+
chart: props.parent,
37+
clientPosition: clientPosition.value
38+
});
39+
})
40+
41+
</script>
42+
43+
<template>
44+
<div
45+
ref="tooltip"
46+
data-cy="tooltip"
47+
class="vue-data-ui-tooltip"
48+
v-if="show"
49+
:style="`top:${position.top}px;left:${position.left}px;background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`"
50+
v-html="content"
51+
/>
52+
</template>
53+
54+
<style scoped>
55+
.vue-data-ui-tooltip {
56+
border: 1px solid #e1e5e8;
57+
border-radius: 4px;
58+
box-shadow: 0 6px 12px -6px rgba(0,0,0,0.2);
59+
position: fixed;
60+
padding:12px;
61+
z-index:1;
62+
}
63+
</style>

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

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ import { opacity, makeXls, shiftHue } from '../lib';
44
import pdf from "../pdf";
55
import img from "../img";
66
import mainConfig from "../default_configs.json";
7-
import { useMouse } from "../useMouse";
8-
import { calcTooltipPosition } from "../calcTooltipPosition";
97
import { useNestedProp } from "../useNestedProp";
108
import Title from "../atoms/Title.vue";
119
import UserOptions from "../atoms/UserOptions.vue";
10+
import Tooltip from "../atoms/Tooltip.vue";
1211
1312
const props = defineProps({
1413
config: {
@@ -32,21 +31,11 @@ const defaultConfig = ref(mainConfig.vue_ui_age_pyramid);
3231
const isImaging = ref(false);
3332
const isPrinting = ref(false);
3433
const agePyramid = ref(null);
35-
const tooltip = ref(null);
3634
const details = ref(null);
37-
const clientPosition = ref(useMouse());
3835
const isTooltip = ref(false);
3936
const tooltipContent = ref("");
4037
const selectedIndex = ref(null);
4138
42-
const tooltipPosition = computed(() => {
43-
return calcTooltipPosition({
44-
tooltip: tooltip.value,
45-
chart: agePyramid.value,
46-
clientPosition: clientPosition.value
47-
});
48-
})
49-
5039
const agePyramidConfig = computed(() => {
5140
return useNestedProp({
5241
userConfig: props.config,
@@ -550,12 +539,12 @@ defineExpose({
550539
</svg>
551540

552541
<!-- TOOLTIP -->
553-
<div
554-
class="vue-ui-age-pyramid-tooltip"
555-
ref="tooltip"
556-
v-if="agePyramidConfig.style.tooltip.show && isTooltip"
557-
:style="`top:${tooltipPosition.top}px;left:${tooltipPosition.left}px;background:${agePyramidConfig.style.tooltip.backgroundColor};color:${agePyramidConfig.style.tooltip.color}`"
558-
v-html="tooltipContent"
542+
<Tooltip
543+
:show="agePyramidConfig.style.tooltip.show && isTooltip"
544+
:backgroundColor="agePyramidConfig.style.tooltip.backgroundColor"
545+
:color="agePyramidConfig.style.tooltip.color"
546+
:parent="agePyramid"
547+
:content="tooltipContent"
559548
/>
560549

561550
<!-- DATA TABLE -->

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ describe('<VueUiCandlestick />', () => {
134134
cy.get(`[data-cy="candlestick-trap-0"]`)
135135
.trigger('mouseover');
136136

137-
cy.get(`[data-cy="candlestick-tooltip"]`).then(($tooltip) => {
137+
cy.get(`[data-cy="tooltip"]`).then(($tooltip) => {
138138
[
139139
fixture.config.translations.volume,
140140
fixture.config.translations.open,

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

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ import { shiftHue, opacity, makeXls } from "../lib";
44
import mainConfig from "../default_configs.json";
55
import pdf from "../pdf";
66
import img from "../img";
7-
import { useMouse } from "../useMouse";
8-
import { calcTooltipPosition } from "../calcTooltipPosition";
97
import { useNestedProp } from "../useNestedProp";
108
import Title from "../atoms/Title.vue";
119
import UserOptions from "../atoms/UserOptions.vue";
10+
import Tooltip from "../atoms/Tooltip.vue";
1211
1312
const props = defineProps({
1413
config: {
@@ -30,9 +29,7 @@ const defaultConfig = ref(mainConfig.vue_ui_candlestick);
3029
3130
const isImaging = ref(false);
3231
const isPrinting = ref(false);
33-
const tooltip = ref(null);
3432
const details = ref(null);
35-
const clientPosition = ref(useMouse());
3633
const isTooltip = ref(false);
3734
const tooltipContent = ref("");
3835
const candlestickChart = ref(null);
@@ -69,14 +66,6 @@ onMounted(() => {
6966
}
7067
});
7168
72-
const tooltipPosition = computed(() => {
73-
return calcTooltipPosition({
74-
tooltip: tooltip.value,
75-
chart: candlestickChart.value,
76-
clientPosition: clientPosition.value
77-
});
78-
});
79-
8069
const candlestickConfig = computed(() => {
8170
return useNestedProp({
8271
userConfig: props.config,
@@ -581,13 +570,12 @@ defineExpose({
581570
</div>
582571

583572
<!-- TOOLTIP -->
584-
<div
585-
data-cy="candlestick-tooltip"
586-
class="vue-ui-candlestick-tooltip"
587-
ref="tooltip"
588-
v-if="candlestickConfig.style.tooltip.show && isTooltip"
589-
:style="`top:${tooltipPosition.top}px;left:${tooltipPosition.left}px;background:${candlestickConfig.style.tooltip.backgroundColor};color:${candlestickConfig.style.tooltip.color}`"
590-
v-html="tooltipContent"
573+
<Tooltip
574+
:show="candlestickConfig.style.tooltip.show && isTooltip"
575+
:backgroundColor="candlestickConfig.style.tooltip.backgroundColor"
576+
:color="candlestickConfig.style.tooltip.color"
577+
:parent="candlestickChart"
578+
:content="tooltipContent"
591579
/>
592580

593581
<!-- DATA TABLE -->

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ describe('<VueUiDonut />', () => {
159159
cy.wrap($element)
160160
.trigger('mouseenter', { force: true })
161161

162-
cy.get(`[data-cy="donut-tooltip"]`).should('exist');
162+
cy.get(`[data-cy="tooltip"]`).should('exist');
163163
cy.get(`[data-cy="donut-tooltip-name"]`)
164164
.should('exist')
165165
.contains(sortedDataset[0].name);

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

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<script setup>
22
import { ref, computed, nextTick } from "vue";
3-
import { makeDonut, palette, convertColorToHex, opacity, makeXls } from '../lib';
3+
import { makeDonut, palette, convertColorToHex, createUid, opacity, makeXls } from '../lib';
44
import pdf from "../pdf";
55
import img from "../img";
66
import mainConfig from "../default_configs.json";
7-
import { useMouse } from "../useMouse";
8-
import { calcTooltipPosition } from "../calcTooltipPosition";
97
import Title from "../atoms/Title.vue";
108
import { useNestedProp } from "../useNestedProp";
119
import UserOptions from "../atoms/UserOptions.vue";
1210
import DataTable from "../atoms/DataTable.vue";
11+
import Tooltip from "../atoms/Tooltip.vue";
1312
1413
const props = defineProps({
1514
config: {
@@ -33,21 +32,11 @@ const defaultConfig = ref(mainConfig.vue_ui_donut);
3332
const isPrinting = ref(false);
3433
const isImaging = ref(false);
3534
const donutChart = ref(null);
36-
const tooltip = ref(null);
3735
const details = ref(null);
38-
const clientPosition = ref(useMouse());
3936
const isTooltip = ref(false);
4037
const tooltipContent = ref("");
4138
const selectedSerie = ref(null);
4239
43-
const tooltipPosition = computed(() => {
44-
return calcTooltipPosition({
45-
tooltip: tooltip.value,
46-
chart: donutChart.value,
47-
clientPosition: clientPosition.value
48-
});
49-
})
50-
5140
const donutConfig = computed(() => {
5241
return useNestedProp({
5342
userConfig: props.config,
@@ -547,13 +536,12 @@ defineExpose({
547536
</div>
548537

549538
<!-- TOOLTIP -->
550-
<div
551-
data-cy="donut-tooltip"
552-
class="vue-ui-donut-tooltip"
553-
ref="tooltip"
554-
v-if="donutConfig.style.chart.tooltip.show && isTooltip"
555-
:style="`top:${tooltipPosition.top}px;left:${tooltipPosition.left}px;background:${donutConfig.style.chart.tooltip.backgroundColor};color:${donutConfig.style.chart.tooltip.color}`"
556-
v-html="tooltipContent"
539+
<Tooltip
540+
:show="donutConfig.style.chart.tooltip.show && isTooltip"
541+
:backgroundColor="donutConfig.style.chart.tooltip.backgroundColor"
542+
:color="donutConfig.style.chart.tooltip.color"
543+
:parent="donutChart"
544+
:content="tooltipContent"
557545
/>
558546

559547
<!-- DATA TABLE -->
@@ -627,17 +615,6 @@ path {
627615
height: 24px;
628616
}
629617
630-
/** */
631-
.vue-ui-donut-tooltip {
632-
border: 1px solid #e1e5e8;
633-
border-radius: 4px;
634-
box-shadow: 0 6px 12px -6px rgba(0,0,0,0.2);
635-
max-width: 300px;
636-
position: fixed;
637-
padding:12px;
638-
z-index:1;
639-
}
640-
641618
.vue-ui-dna * {
642619
animation: none !important;
643620
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ describe('<VueUiHeatmap />', () => {
7575
cy.wrap($trap)
7676
.trigger('mouseover');
7777

78-
cy.get(`[data-cy="heatmap-tooltip"]`)
78+
cy.get(`[data-cy="tooltip"]`)
7979
.should('exist');
8080

8181
cy.get(`[data-cy="heatmap-tootlip-name"]`)

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

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ import { opacity, makeXls } from "../lib";
44
import mainConfig from "../default_configs.json";
55
import pdf from "../pdf";
66
import img from "../img";
7-
import { useMouse } from "../useMouse";
8-
import { calcTooltipPosition } from "../calcTooltipPosition";
97
import { useNestedProp } from "../useNestedProp";
108
import Title from "../atoms/Title.vue";
119
import UserOptions from "../atoms/UserOptions.vue";
10+
import Tooltip from "../atoms/Tooltip.vue";
1211
1312
const props = defineProps({
1413
config: {
@@ -32,20 +31,10 @@ const defaultConfig = ref(mainConfig.vue_ui_heatmap);
3231
const isImaging = ref(false);
3332
const isPrinting = ref(false);
3433
const heatmapChart = ref(null);
35-
const tooltip = ref(null);
3634
const details = ref(null);
37-
const clientPosition = ref(useMouse());
3835
const isTooltip = ref(false);
3936
const tooltipContent = ref("");
4037
const hoveredCell = ref(undefined);
41-
42-
const tooltipPosition = computed(() => {
43-
return calcTooltipPosition({
44-
tooltip: tooltip.value,
45-
chart: heatmapChart.value,
46-
clientPosition: clientPosition.value
47-
});
48-
});
4938
5039
const heatmapConfig = computed(() => {
5140
return useNestedProp({
@@ -444,14 +433,14 @@ defineExpose({
444433
</div>
445434

446435
<!-- TOOLTIP -->
447-
<div
448-
data-cy="heatmap-tooltip"
449-
class="vue-ui-heatmap-tooltip"
450-
ref="tooltip"
451-
v-if="heatmapConfig.style.tooltip.show && isTooltip"
452-
:style="`top:${tooltipPosition.top}px;left:${tooltipPosition.left}px;background:${heatmapConfig.style.tooltip.backgroundColor};color:${heatmapConfig.style.tooltip.color}`"
453-
v-html="tooltipContent"
436+
<Tooltip
437+
:show="heatmapConfig.style.tooltip.show && isTooltip"
438+
:backgroundColor="heatmapConfig.style.tooltip.backgroundColor"
439+
:color="heatmapConfig.style.tooltip.color"
440+
:parent="heatmapChart"
441+
:content="tooltipContent"
454442
/>
443+
455444
<!-- DATA TABLE -->
456445
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
457446
<table>

0 commit comments

Comments
 (0)