Skip to content

Commit 6ac926d

Browse files
graphierosgraphieros
committed
Reduce bundle size
1 parent 2f5bc77 commit 6ac926d

38 files changed

+589
-1314
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,4 +92,4 @@ Or you can import just what you need in your files:
9292
Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
9393

9494
## Nuxt
95-
[Check this repo for a boilerplate implementation in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
95+
[This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
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.11",
4+
"version": "1.9.12",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue

+12-9
Original file line numberDiff line numberDiff line change
@@ -2909,6 +2909,9 @@ const smileyConfig = ref({
29092909
});
29102910
29112911
const relationConfig = ref({
2912+
userOptions: {
2913+
show: true
2914+
},
29122915
style: {
29132916
backgroundColor: "#FFFFFF",
29142917
fontFamily: "inherit",
@@ -3469,19 +3472,19 @@ const showLocalTest = ref(false);
34693472
<Box>
34703473
<template #title>VueUiRelationCircle</template>
34713474
<template #dev>
3472-
<VueUiRelationCircle
3473-
ref="relation"
3474-
:dataset="relationDataset"
3475-
:config="relationConfig"
3476-
/>
3477-
</template>
3478-
<template #prod>
34793475
<RelationTest
34803476
ref="relation"
34813477
:dataset="relationDataset"
34823478
:config="relationConfig"
34833479
/>
34843480
</template>
3481+
<template #prod>
3482+
<VueUiRelationCircle
3483+
ref="relation"
3484+
:dataset="relationDataset"
3485+
:config="relationConfig"
3486+
/>
3487+
</template>
34853488
</Box>
34863489

34873490
<Box>
@@ -3505,7 +3508,7 @@ const showLocalTest = ref(false);
35053508
<template #dev>
35063509
<XyTest
35073510
ref="xytest"
3508-
:config="{ ...config, useCanvas: true }"
3511+
:config="{ ...config, useCanvas: false }"
35093512
:dataset="dataset2"
35103513
@selectLegend="selectLegendXY"
35113514
@selectX="selectX"
@@ -3514,7 +3517,7 @@ const showLocalTest = ref(false);
35143517
<template #prod>
35153518
<VueUiXy
35163519
ref="xytest"
3517-
:config="{ ...config, useCanvas: true, useCssAnimation: false }"
3520+
:config="{ ...config, useCanvas: false, useCssAnimation: false }"
35183521
:dataset="dataset2"
35193522
@selectLegend="selectLegendXY"
35203523
@selectX="selectX"

‎src/Box.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div style="width: 100%;margin-top:12px;">
33
<details>
4-
<summary style="user-select:none;cursor:pointer;height:30px;background:#e1e5e8;line-height:24px;font-size:24px;padding:12px;">
4+
<summary style="user-select:none;cursor:pointer;height:30px;background:linear-gradient(to right, #e1e5e8, white);line-height:24px;font-size:24px;padding:12px;">
55
<slot name="title"></slot>
66
</summary>
77
<div style="display: flex;flex-direction:row; gap:12px; align-items:center;justify-content:center;background:#e1e5e8;padding:12px">

‎src/atoms/UserOptions.vue

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<script setup>
2+
import { ref } from "vue";
3+
import vClickOutside from '../directives/vClickOutside';
4+
5+
const props = defineProps({
6+
hasPdf: {
7+
type: Boolean,
8+
default: true
9+
},
10+
hasXls: {
11+
type: Boolean,
12+
default: true,
13+
},
14+
color: {
15+
type: String,
16+
},
17+
backgroundColor: {
18+
type: String,
19+
},
20+
isPrinting: {
21+
type: Boolean,
22+
default: false,
23+
},
24+
title: {
25+
type: String,
26+
},
27+
uid: {
28+
type: String,
29+
}
30+
});
31+
32+
const emit = defineEmits(['generatePdf', 'generateXls']);
33+
34+
function generatePdf() {
35+
emit('generatePdf');
36+
}
37+
38+
function generateXls() {
39+
emit('generateXls');
40+
}
41+
42+
const details = ref(null);
43+
44+
function close() {
45+
if(details.value) {
46+
details.value.removeAttribute('open')
47+
}
48+
}
49+
50+
</script>
51+
52+
<template>
53+
<details ref="details" v-click-outside="close" :id="`details_${uid}`" class="vue-ui-user-options" :style="`background:${backgroundColor};color:${color}`" data-html2canvas-ignore>
54+
<summary class="vue-ui-user-options-summary" data-cy="user-options-summary" :style="`background:${backgroundColor};color:${color}`">
55+
{{ title }}
56+
</summary>
57+
<slot name="checkboxes"></slot>
58+
59+
<button v-if="hasPdf" data-cy="user-options-pdf" class="vue-data-ui-button" @click="generatePdf" :disabled="isPrinting" :style="`margin-top: 12px; background:${backgroundColor};color:${color}`">
60+
<svg class="vue-data-ui-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isPrinting" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="color" fill="none" stroke-linecap="round" stroke-linejoin="round">
61+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
62+
<path d="M18 16v.01" />
63+
<path d="M6 16v.01" />
64+
<path d="M12 5v.01" />
65+
<path d="M12 12v.01" />
66+
<path d="M12 1a4 4 0 0 1 2.001 7.464l.001 .072a3.998 3.998 0 0 1 1.987 3.758l.22 .128a3.978 3.978 0 0 1 1.591 -.417l.2 -.005a4 4 0 1 1 -3.994 3.77l-.28 -.16c-.522 .25 -1.108 .39 -1.726 .39c-.619 0 -1.205 -.14 -1.728 -.391l-.279 .16l.007 .231a4 4 0 1 1 -2.212 -3.579l.222 -.129a3.998 3.998 0 0 1 1.988 -3.756l.002 -.071a4 4 0 0 1 -1.995 -3.265l-.005 -.2a4 4 0 0 1 4 -4z" />
67+
</svg>
68+
<span v-else>PDF</span>
69+
</button>
70+
<button v-if="hasXls" data-cy="user-options-xls" class="vue-data-ui-button" @click="generateXls" :style="`background:${backgroundColor};color:${color}`">
71+
XLSX
72+
</button>
73+
</details>
74+
</template>
75+
76+
<style scoped>
77+
.vue-ui-user-options {
78+
border-radius: 4px;
79+
padding: 6px 12px;
80+
position: absolute;
81+
right:0;
82+
top:0;
83+
user-select:none;
84+
max-width: 300px;
85+
display: flex;
86+
flex-direction: column;
87+
justify-content: flex-start;
88+
}
89+
.vue-ui-user-options[open] {
90+
border: 1px solid #e1e5e8;
91+
box-shadow: 0 6px 12px -6px rgba(0,0,0,0.2);
92+
}
93+
.vue-ui-user-options summary {
94+
text-align: right;
95+
direction: rtl;
96+
}
97+
.vue-data-ui-button {
98+
margin: 6px 0;
99+
border-radius: 3px;
100+
height: 30px;
101+
border: 1px solid #b9bfc4;
102+
background: inherit;
103+
display: flex;
104+
align-items:center;
105+
justify-content: center;
106+
width: 100%;
107+
cursor: pointer;
108+
}
109+
.vue-data-ui-button:hover {
110+
background: rgba(0,0,0,0.05) !important;
111+
}
112+
.vue-data-ui-print-icon {
113+
animation: smartspin 0.5s infinite linear;
114+
}
115+
@keyframes smartspin {
116+
from {
117+
transform: rotate(0deg);
118+
}
119+
to {
120+
transform: rotate(360deg);
121+
}
122+
}
123+
</style>
124+
125+
<style>
126+
.vue-ui-options-item {
127+
width: 100%;
128+
display: flex;
129+
flex-direction: row;
130+
gap: 5px;
131+
align-items:center;
132+
justify-content:flex-start;
133+
}
134+
</style>

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

+21-87
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<script setup>
2-
import { ref, computed, nextTick, onMounted } from "vue";
3-
import { treeShake, palette, opacity, convertConfigColors, makeXls, shiftHue } from '../lib';
2+
import { ref, computed, nextTick } from "vue";
3+
import { opacity, makeXls, shiftHue } from '../lib';
44
import pdf from "../pdf";
55
import mainConfig from "../default_configs.json";
66
import { useMouse } from "../useMouse";
77
import { calcTooltipPosition } from "../calcTooltipPosition";
88
import { useNestedProp } from "../useNestedProp";
99
import Title from "../atoms/Title.vue";
10+
import UserOptions from "../atoms/UserOptions.vue";
1011
1112
const props = defineProps({
1213
config: {
@@ -237,12 +238,6 @@ function generateXls() {
237238
});
238239
}
239240
240-
function closeDetails(){
241-
if(details.value) {
242-
details.value.removeAttribute("open")
243-
}
244-
}
245-
246241
defineExpose({
247242
generatePdf,
248243
generateXls
@@ -275,39 +270,33 @@ defineExpose({
275270
</div>
276271

277272
<!-- OPTIONS -->
278-
<details class="vue-ui-age-pyramid-user-options" :style="`background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" data-html2canvas-ignore v-if="agePyramidConfig.userOptions.show" ref="details">
279-
<summary :style="`background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`">{{ agePyramidConfig.userOptions.title }}</summary>
280-
281-
<div class="vue-ui-age-pyramid-user-options-items" :style="`background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`">
282-
<div class="vue-ui-age-pyramid-user-option-item">
273+
<UserOptions
274+
ref="details"
275+
v-if="agePyramidConfig.userOptions.show"
276+
:backgroundColor="agePyramidConfig.style.backgroundColor"
277+
:color="agePyramidConfig.style.color"
278+
:isPrinting="isPrinting"
279+
:title="agePyramidConfig.userOptions.title"
280+
:uid="uid"
281+
@generatePdf="generatePdf"
282+
@generateXls="generateXls"
283+
>
284+
<template #checkboxes>
285+
<div class="vue-ui-options-item">
283286
<input type="checkbox" :id="`vue-ui-age-pyramid-option-title_${uid}`" :name="`vue-ui-age-pyramid-option-title_${uid}`"
284287
v-model="mutableConfig.inside">
285288
<label :for="`vue-ui-age-pyramid-option-title_${uid}`">{{ agePyramidConfig.userOptions.labels.useDiv }}</label>
286289
</div>
287-
<div class="vue-ui-age-pyramid-user-option-item">
290+
<div class="vue-ui-options-item">
288291
<input type="checkbox" :id="`vue-ui-age-pyramid-option-table_${uid}`" :name="`vue-ui-age-pyramid-option-table_${uid}`"
289292
v-model="mutableConfig.showTable">
290293
<label :for="`vue-ui-age-pyramid-option-table_${uid}`">{{ agePyramidConfig.userOptions.labels.showTable }}</label>
291294
</div>
292-
<button class="vue-ui-age-pyramid-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`">
293-
<svg class="vue-ui-age-pyramid-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isPrinting" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="agePyramidConfig.style.color" fill="none" stroke-linecap="round" stroke-linejoin="round">
294-
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
295-
<path d="M18 16v.01" />
296-
<path d="M6 16v.01" />
297-
<path d="M12 5v.01" />
298-
<path d="M12 12v.01" />
299-
<path d="M12 1a4 4 0 0 1 2.001 7.464l.001 .072a3.998 3.998 0 0 1 1.987 3.758l.22 .128a3.978 3.978 0 0 1 1.591 -.417l.2 -.005a4 4 0 1 1 -3.994 3.77l-.28 -.16c-.522 .25 -1.108 .39 -1.726 .39c-.619 0 -1.205 -.14 -1.728 -.391l-.279 .16l.007 .231a4 4 0 1 1 -2.212 -3.579l.222 -.129a3.998 3.998 0 0 1 1.988 -3.756l.002 -.071a4 4 0 0 1 -1.995 -3.265l-.005 -.2a4 4 0 0 1 4 -4z" />
300-
</svg>
301-
<span v-else>PDF</span>
302-
</button>
303-
<button class="vue-ui-age-pyramid-button" @click="generateXls" :style="`background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`">
304-
XLSX
305-
</button>
306-
</div>
307-
</details>
295+
</template>
296+
</UserOptions>
308297

309298
<!-- CHART -->
310-
<svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" @click="closeDetails">
299+
<svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" >
311300

312301
<defs>
313302
<linearGradient
@@ -539,7 +528,7 @@ defineExpose({
539528
/>
540529

541530
<!-- DATA TABLE -->
542-
<div @click="closeDetails" :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
531+
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
543532
<table>
544533
<thead>
545534
<tr v-if="agePyramidConfig.style.title.text">
@@ -628,61 +617,6 @@ defineExpose({
628617
z-index:1;
629618
font-variant-numeric: tabular-nums;
630619
}
631-
.vue-ui-age-pyramid-user-options {
632-
border-radius: 4px;
633-
padding: 6px 12px;
634-
position: absolute;
635-
right:0;
636-
top:0px;
637-
max-width: 300px;
638-
text-align:left;
639-
}
640-
.vue-ui-age-pyramid-user-options[open] {
641-
border: 1px solid #e1e5e8;
642-
box-shadow: 0 6px 12px -6px rgba(0,0,0,0.2);
643-
}
644-
.vue-ui-age-pyramid summary {
645-
text-align: right;
646-
direction: rtl;
647-
}
648-
.vue-ui-age-pyramid-user-options-items {
649-
width: 100%;
650-
display: flex;
651-
flex-direction: column;
652-
margin-top: 6px;
653-
}
654-
.vue-ui-age-pyramid-user-options-item {
655-
width: 100%;
656-
display: flex;
657-
flex-direction: row;
658-
gap: 5px;
659-
align-items:center;
660-
}
661-
662-
.vue-ui-age-pyramid-button {
663-
margin: 6px 0;
664-
border-radius: 3px;
665-
height: 30px;
666-
border: 1px solid #b9bfc4;
667-
background: inherit;
668-
display: flex;
669-
align-items:center;
670-
justify-content: center;
671-
}
672-
.vue-ui-age-pyramid-button:hover {
673-
background: rgba(0,0,0,0.05);
674-
}
675-
.vue-ui-age-pyramid-print-icon {
676-
animation: smartspin 0.5s infinite linear;
677-
}
678-
@keyframes smartspin {
679-
from {
680-
transform: rotate(0deg);
681-
}
682-
to {
683-
transform: rotate(360deg);
684-
}
685-
}
686620
687621
.vue-ui-age-pyramid table {
688622
width: 100%;

0 commit comments

Comments
 (0)