Skip to content

Commit cf2f8db

Browse files
graphierosgraphieros
committed
Optional css animation
1 parent dd79571 commit cf2f8db

13 files changed

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

‎src/App.vue‎

Lines changed: 106 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -654,6 +654,7 @@ const donutDataset = [
654654
];
655655
656656
const donutConfig = {
657+
useCssAnimation: false,
657658
style: {
658659
fontFamily: "inherit",
659660
chart: {
@@ -3378,10 +3379,109 @@ const showLocalTest = ref(false);
33783379
<button @click="printRelation">PRINT RELATION CIRCLE</button>
33793380
<button @click="printThermo">PRINT THERMO</button>
33803381

3382+
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3383+
<VueUiCandlestick
3384+
ref="candlestick"
3385+
v-if="!showLocalTest"
3386+
:config="{...candlestickConfig, useCssAnimation: false}"
3387+
:dataset="candlestickDataset"
3388+
/>
3389+
<CandlestickTest ref="candlestick" v-if="showLocalTest" :dataset="candlestickDataset" />
3390+
</div>
3391+
3392+
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3393+
<VueUiScatter
3394+
ref="scatter"
3395+
v-if="!showLocalTest"
3396+
:config="{...scatterConfig, useCssAnimation: false}"
3397+
:dataset="scatterDataset"
3398+
/>
3399+
<ScatterTest ref="scatter" v-if="showLocalTest" :dataset="scatterDataset" />
3400+
</div>
3401+
3402+
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3403+
<VueUiVerticalBar
3404+
ref="verticaltest"
3405+
v-if="!showLocalTest"
3406+
:config="{...verticalConfig, useCssAnimation: false}"
3407+
:dataset="verticalDataset"
3408+
@selectLegend="selectVerticalLegend"
3409+
/>
3410+
<VerticalTest ref="verticaltest" v-if="showLocalTest" :dataset="verticalDataset" />
3411+
</div>
3412+
3413+
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3414+
<VueUiOnion
3415+
ref="oniontest"
3416+
v-if="!showLocalTest"
3417+
:config="{ useCssAnimation: false }"
3418+
:dataset="onionDataset"
3419+
@selectLegend="selectOnionLegend"
3420+
/>
3421+
<OnionTest
3422+
ref="oniontest"
3423+
v-if="showLocalTest"
3424+
:dataset="onionDataset"
3425+
@selectLegend="selectOnionLegend"
3426+
/>
3427+
</div>
3428+
3429+
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3430+
<VueUiQuadrant
3431+
ref="quadranttest"
3432+
v-if="!showLocalTest"
3433+
:dataset="quadrantDataset"
3434+
:config="{...quadrantConfig, useCssAnimation: false}"
3435+
@selectPlot="selectPlot"
3436+
@selectSide="selectSide"
3437+
@selectLegend="selectQuadrantLegend"
3438+
/>
3439+
<QuadrantTest
3440+
ref="quadranttest"
3441+
v-if="showLocalTest"
3442+
:dataset="quadrantDataset"
3443+
@selectPlot="selectPlot"
3444+
@selectSide="selectSide"
3445+
@selectLegend="selectQuadrantLegend"
3446+
/>
3447+
</div>
3448+
3449+
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3450+
<VueUiRadar
3451+
ref="radartest"
3452+
v-if="!showLocalTest"
3453+
:dataset="radarDataset"
3454+
:config="{...radarConfig, useCssAnimation: false}"
3455+
@selectLegend="selectRadarLegend"
3456+
/>
3457+
<RadarTest
3458+
ref="radartest"
3459+
v-if="showLocalTest"
3460+
:dataset="radarDataset"
3461+
@selectLegend="selectRadarLegend"
3462+
/>
3463+
</div>
3464+
3465+
<div style="display: flex; flex-direction: row; gap: 12px; align-items: center">
3466+
<VueUiDonut
3467+
ref="donuttest"
3468+
v-if="!showLocalTest"
3469+
:dataset="donutDataset"
3470+
:config="donutConfig"
3471+
@selectLegend="selectLegendDonut"
3472+
/>
3473+
<DonutTest
3474+
ref="donuttest"
3475+
v-if="showLocalTest"
3476+
:dataset="donutDataset"
3477+
@selectLegend="selectLegendDonut"
3478+
/>
3479+
</div>
3480+
33813481
<div style="max-width: 1000px; margin: 0 auto">
33823482
<VueUiXy
33833483
ref="xytest"
3384-
:config="{ ...config, useCanvas: false }"
3484+
:config="{ ...config, useCanvas: false, useCssAnimation: false }"
33853485
:dataset="dataset2"
33863486
v-if="!showLocalTest"
33873487
@selectLegend="selectLegendXY"
@@ -3478,82 +3578,11 @@ const showLocalTest = ref(false);
34783578
/>
34793579
<PyramidTest ref="pyramid" v-if="showLocalTest" :dataset="pyramidDataset" />
34803580
</div>
3481-
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3482-
<VueUiCandlestick
3483-
ref="candlestick"
3484-
v-if="!showLocalTest"
3485-
:config="candlestickConfig"
3486-
:dataset="candlestickDataset"
3487-
/>
3488-
<CandlestickTest ref="candlestick" v-if="showLocalTest" :dataset="candlestickDataset" />
3489-
</div>
3490-
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3491-
<VueUiScatter
3492-
ref="scatter"
3493-
v-if="!showLocalTest"
3494-
:config="scatterConfig"
3495-
:dataset="scatterDataset"
3496-
/>
3497-
<ScatterTest ref="scatter" v-if="showLocalTest" :dataset="scatterDataset" />
3498-
</div>
3499-
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3500-
<VueUiVerticalBar
3501-
ref="verticaltest"
3502-
v-if="!showLocalTest"
3503-
:config="verticalConfig"
3504-
:dataset="verticalDataset"
3505-
@selectLegend="selectVerticalLegend"
3506-
/>
3507-
<VerticalTest ref="verticaltest" v-if="showLocalTest" :dataset="verticalDataset" />
3508-
</div>
3509-
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3510-
<VueUiQuadrant
3511-
ref="quadranttest"
3512-
v-if="!showLocalTest"
3513-
:dataset="quadrantDataset"
3514-
:config="quadrantConfig"
3515-
@selectPlot="selectPlot"
3516-
@selectSide="selectSide"
3517-
@selectLegend="selectQuadrantLegend"
3518-
/>
3519-
<QuadrantTest
3520-
ref="quadranttest"
3521-
v-if="showLocalTest"
3522-
:dataset="quadrantDataset"
3523-
@selectPlot="selectPlot"
3524-
@selectSide="selectSide"
3525-
@selectLegend="selectQuadrantLegend"
3526-
/>
3527-
</div>
3528-
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3529-
<VueUiRadar
3530-
ref="radartest"
3531-
v-if="!showLocalTest"
3532-
:dataset="radarDataset"
3533-
:config="radarConfig"
3534-
@selectLegend="selectRadarLegend"
3535-
/>
3536-
<RadarTest
3537-
ref="radartest"
3538-
v-if="showLocalTest"
3539-
:dataset="radarDataset"
3540-
@selectLegend="selectRadarLegend"
3541-
/>
3542-
</div>
3543-
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
3544-
<VueUiOnion
3545-
ref="oniontest"
3546-
v-if="!showLocalTest"
3547-
:dataset="onionDataset"
3548-
@selectLegend="selectOnionLegend"
3549-
/>
3550-
<OnionTest
3551-
ref="oniontest"
3552-
v-if="showLocalTest"
3553-
:dataset="onionDataset"
3554-
@selectLegend="selectOnionLegend"
3555-
/>
3556-
</div>
3581+
3582+
3583+
3584+
3585+
35573586
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
35583587
<VueUiWaffle
35593588
ref="waffletest"
@@ -3569,21 +3598,6 @@ const showLocalTest = ref(false);
35693598
@selectLegend="selectLegendWaffle"
35703599
/>
35713600
</div>
3572-
<div style="display: flex; flex-direction: row; gap: 12px; align-items: center">
3573-
<VueUiDonut
3574-
ref="donuttest"
3575-
v-if="!showLocalTest"
3576-
:dataset="donutDataset"
3577-
:config="donutConfig"
3578-
@selectLegend="selectLegendDonut"
3579-
/>
3580-
<DonutTest
3581-
ref="donuttest"
3582-
v-if="showLocalTest"
3583-
:dataset="donutDataset"
3584-
@selectLegend="selectLegendDonut"
3585-
/>
3586-
</div>
35873601
<AnnotatorTest
35883602
v-if="showLocalTest"
35893603
@saveAnnotations="saveAnnotations"

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ defineExpose({
283283
</script>
284284

285285
<template>
286-
<div ref="candlestickChart" class="vue-ui-candlestick" :style="`font-family:${candlestickConfig.style.fontFamily};width:100%; text-align:center;${candlestickConfig.userOptions.show ? 'padding-top:36px' : ''}`" :id="`vue-ui-candlestick_${uid}`">
286+
<div ref="candlestickChart" :class="`vue-ui-candlestick ${candlestickConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${candlestickConfig.style.fontFamily};width:100%; text-align:center;${candlestickConfig.userOptions.show ? 'padding-top:36px' : ''}`" :id="`vue-ui-candlestick_${uid}`">
287287

288288
<div v-if="(!mutableConfig.inside || isPrinting) && candlestickConfig.style.title.text" :style="`width:100%;background:${candlestickConfig.style.backgroundColor}`">
289289
<!-- TITLE AS DIV -->
@@ -841,4 +841,8 @@ input[type="range"]:active::-webkit-slider-thumb{
841841
background-color: #CCCCCC;
842842
border: 3px solid #858585;
843843
}
844+
845+
.vue-ui-dna * {
846+
animation: none !important;
847+
}
844848
</style>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ defineExpose({
241241
</script>
242242

243243
<template>
244-
<div :ref="`donutChart`" class="vue-ui-donut" :style="`font-family:${donutConfig.style.fontFamily};width:100%; text-align:center;${donutConfig.userOptions.show ? 'padding-top:36px' : ''}`" :id="`donut__${uid}`">
244+
<div :ref="`donutChart`" :class="`vue-ui-donut ${donutConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${donutConfig.style.fontFamily};width:100%; text-align:center;${donutConfig.userOptions.show ? 'padding-top:36px' : ''}`" :id="`donut__${uid}`">
245245
<div v-if="(!mutableConfig.inside || isPrinting) && donutConfig.style.chart.title.text" :style="`width:100%;background:${donutConfig.style.chart.backgroundColor}`">
246246

247247
<!-- TITLE AS DIV -->
@@ -654,4 +654,8 @@ path {
654654
font-weight: 400;
655655
user-select: none;
656656
}
657+
658+
.vue-ui-dna * {
659+
animation: none !important;
660+
}
657661
</style>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ defineExpose({
191191

192192
<template>
193193
<div
194-
class="vue-ui-onion"
194+
:class="`vue-ui-onion ${onionConfig.useCssAnimation ? '' : 'vue-ui-dna'}`"
195195
ref="onionChart"
196196
:id="`vue-ui-onion_${uid}`"
197197
:style="`font-family:${onionConfig.style.fontFamily};width:100%; text-align:center;${onionConfig.userOptions.show ? 'padding-top:36px' : ''}`"
@@ -539,4 +539,7 @@ circle {
539539
user-select: none;
540540
}
541541
542+
.vue-ui-dna * {
543+
animation: none !important;
544+
}
542545
</style>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ defineExpose({
442442
</script>
443443

444444
<template>
445-
<div class="vue-ui-quadrant" ref="quadrantChart" :id="`vue-ui-quadrant_${uid}`" :style="`font-family:${quadrantConfig.style.fontFamily};width:100%; text-align:center;${quadrantConfig.userOptions.show ? 'padding-top: 36px' : ''}`">
445+
<div :class="`vue-ui-quadrant ${quadrantConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="quadrantChart" :id="`vue-ui-quadrant_${uid}`" :style="`font-family:${quadrantConfig.style.fontFamily};width:100%; text-align:center;${quadrantConfig.userOptions.show ? 'padding-top: 36px' : ''}`">
446446

447447
<!-- TITLE AS DIV -->
448448
<div v-if="(!mutableConfig.inside || isPrinting) && quadrantConfig.style.chart.title.text" :style="`width:100%;background:${quadrantConfig.style.chart.backgroundColor};padding-bottom:12px`">
@@ -1038,4 +1038,8 @@ path, line, rect, circle, polygon {
10381038
font-weight: 400;
10391039
user-select: none;
10401040
}
1041+
1042+
.vue-ui-dna * {
1043+
animation: none !important;
1044+
}
10411045
</style>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ defineExpose({
284284

285285
<template>
286286
<div
287-
class="vue-ui-radar"
287+
:class="`vue-ui-radar ${radarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`"
288288
ref="radarChart"
289289
:id="`vue-ui-radar_${uid}`"
290290
:style="`font-family:${radarConfig.style.fontFamily};width:100%; text-align:center;${radarConfig.userOptions.show ? 'padding-top:36px' : ''}`"
@@ -646,4 +646,8 @@ path, line, rect, circle {
646646
font-weight: 400;
647647
user-select: none;
648648
}
649+
650+
.vue-ui-dna * {
651+
animation: none !important;
652+
}
649653
</style>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ defineExpose({
279279
</script>
280280

281281
<template>
282-
<div class="vue-ui-scatter" ref="scatterChart" :id="`vue-ui-scatter_${uid}`" :style="`font-family:${scatterConfig.style.fontFamily};width:100%; text-align:center;${scatterConfig.userOptions.show ? 'padding-top:36px' : ''}`">
282+
<div :class="`vue-ui-scatter ${scatterConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="scatterChart" :id="`vue-ui-scatter_${uid}`" :style="`font-family:${scatterConfig.style.fontFamily};width:100%; text-align:center;${scatterConfig.userOptions.show ? 'padding-top:36px' : ''}`">
283283

284284
<div v-if="(!mutableConfig.inside || isPrinting) && scatterConfig.style.title.text" :style="`width:100%;background:${scatterConfig.style.backgroundColor}`">
285285
<!-- TITLE AS DIV -->
@@ -709,4 +709,8 @@ path, line, circle {
709709
font-weight: 400;
710710
user-select: none;
711711
}
712+
713+
.vue-ui-dna * {
714+
animation: none !important;
715+
}
712716
</style>

‎src/components/vue-ui-vertical-bar.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ defineExpose({
355355
</script>
356356

357357
<template>
358-
<div class="vue-ui-vertical-bar" ref="verticalBarChart" :id="`vue-ui-vertical-bar_${uid}`" :style="`font-family:${verticalBarConfig.style.fontFamily};width:100%; text-align:center;${verticalBarConfig.userOptions.show ? 'padding-top:36px' : ''}`">
358+
<div :class="`vue-ui-vertical-bar ${verticalBarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="verticalBarChart" :id="`vue-ui-vertical-bar_${uid}`" :style="`font-family:${verticalBarConfig.style.fontFamily};width:100%; text-align:center;${verticalBarConfig.userOptions.show ? 'padding-top:36px' : ''}`">
359359

360360
<!-- TITLE AS DIV -->
361361
<div v-if="(!mutableConfig.inside || isPrinting) && verticalBarConfig.style.chart.title.text" :style="`width:100%;background:${verticalBarConfig.style.chart.backgroundColor};padding-bottom:12px`">
@@ -780,4 +780,8 @@ path, line, rect, circle, polygon {
780780
font-weight: 400;
781781
user-select: none;
782782
}
783+
784+
.vue-ui-dna * {
785+
animation: none !important;
786+
}
783787
</style>

0 commit comments

Comments
 (0)