Skip to content

Commit 5b6f6b6

Browse files
graphierosgraphieros
committed
VueUi3dBar added tube shape option
1 parent 25f8f8c commit 5b6f6b6

File tree

6 files changed

+54
-25
lines changed

6 files changed

+54
-25
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1515
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1616
![npm](https://img.shields.io/npm/dt/vue-data-ui)
17-
![Static Badge](https://img.shields.io/badge/components-32-green)
17+
![Static Badge](https://img.shields.io/badge/components-33-green)
1818

1919
[Interactive documentation](https://vue-data-ui.graphieros.com/)
2020

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

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

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
<script setup>
22
import { ref, computed, onMounted } from "vue";
3-
import { calcMarkerOffsetX, calcMarkerOffsetY, calcNutArrowPath, makeDonut, palette, convertColorToHex, opacity, makeXls, createUid } from '../lib';
3+
import { convertColorToHex, createUid } from '../lib';
44
import pdf from "../pdf";
55
import img from "../img";
66
import mainConfig from "../default_configs.json";
77
import Title from "../atoms/Title.vue";
88
import { useNestedProp } from "../useNestedProp";
99
import UserOptions from "../atoms/UserOptions.vue";
10-
import DataTable from "../atoms/DataTable.vue";
11-
import Tooltip from "../atoms/Tooltip.vue";
12-
import Legend from "../atoms/Legend.vue";
1310
1411
const props = defineProps({
1512
config: {
@@ -32,11 +29,7 @@ const defaultConfig = ref(mainConfig.vue_ui_3d_bar);
3229
3330
const isPrinting = ref(false);
3431
const isImaging = ref(false);
35-
const bar3dChart = ref(null);
3632
const details = ref(null);
37-
const isTooltip = ref(false);
38-
const tooltipContent = ref("");
39-
const selectedSerie = ref(null);
4033
4134
const barConfig = computed(() => {
4235
return useNestedProp({
@@ -62,7 +55,11 @@ const box = computed(() => {
6255
right: `M${svg.value.width / 2},${svg.value.top} ${svg.value.width - svg.value.right}, ${svg.value.top + svg.value.perspective} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - svg.value.perspective} ${svg.value.width / 2},${svg.value.height - svg.value.bottom}`,
6356
left: `M${svg.value.width / 2},${svg.value.top} ${svg.value.left},${svg.value.top + svg.value.perspective} ${svg.value.left},${svg.value.height - svg.value.bottom - svg.value.perspective} ${svg.value.width / 2},${svg.value.height - svg.value.bottom}`,
6457
side: `M${svg.value.width / 2},${svg.value.height - svg.value.bottom} ${svg.value.width / 2},${svg.value.top + (svg.value.perspective * 2)}`,
65-
topSides: `M${svg.value.left},${svg.value.top + svg.value.perspective} ${svg.value.width / 2},${svg.value.top + (svg.value.perspective * 2)} ${svg.value.width - svg.value.right},${svg.value.top + svg.value.perspective}`
58+
topSides: `M${svg.value.left},${svg.value.top + svg.value.perspective} ${svg.value.width / 2},${svg.value.top + (svg.value.perspective * 2)} ${svg.value.width - svg.value.right},${svg.value.top + svg.value.perspective}`,
59+
tubeTop: `M${svg.value.left},${svg.value.top + svg.value.perspective} C ${svg.value.left},${svg.value.top - (svg.value.perspective / 3)} ${svg.value.width - svg.value.right},${svg.value.top - (svg.value.perspective / 3)} ${svg.value.width - svg.value.right},${svg.value.top + svg.value.perspective} C ${svg.value.width - svg.value.right},${svg.value.top + (svg.value.perspective * 2.3)} ${svg.value.left},${svg.value.top + (svg.value.perspective * 2.3)} ${svg.value.left},${svg.value.top + svg.value.perspective}`,
60+
tubeLeft: `M${svg.value.left},${svg.value.top + svg.value.perspective} ${svg.value.left},${svg.value.height - svg.value.bottom - svg.value.perspective}`,
61+
tubeRight: `M${svg.value.width - svg.value.right},${svg.value.top + svg.value.perspective} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - svg.value.perspective}`,
62+
tubeBottom: `M${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - svg.value.perspective} C ${svg.value.width - svg.value.right},${svg.value.height} ${svg.value.left},${svg.value.height} ${svg.value.left},${svg.value.height - svg.value.bottom - svg.value.perspective}`
6663
}
6764
});
6865
@@ -94,7 +91,18 @@ const fill = computed(() => {
9491
return {
9592
right: `M${svg.value.width / 2},${svg.value.height - svg.value.bottom} ${svg.value.width / 2},${svg.value.height - svg.value.bottom - height * proportion} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - svg.value.perspective - height * proportion} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - svg.value.perspective}Z`,
9693
left: `M${svg.value.width / 2},${svg.value.height - svg.value.bottom} ${svg.value.width / 2},${svg.value.height - svg.value.bottom - height * proportion} ${svg.value.left}, ${svg.value.height - svg.value.bottom - svg.value.perspective - height * proportion} ${svg.value.left},${svg.value.height - svg.value.bottom - svg.value.perspective}Z`,
97-
top: `M${svg.value.width / 2},${svg.value.height - svg.value.bottom - height * proportion} ${svg.value.left},${svg.value.height - svg.value.bottom - svg.value.perspective - height * proportion} ${svg.value.width / 2},${svg.value.height - svg.value.bottom - (svg.value.perspective * 2) - (height * proportion)} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - svg.value.perspective - height * proportion} Z`
94+
top: `M${svg.value.width / 2},${svg.value.height - svg.value.bottom - height * proportion} ${svg.value.left},${svg.value.height - svg.value.bottom - svg.value.perspective - height * proportion} ${svg.value.width / 2},${svg.value.height - svg.value.bottom - (svg.value.perspective * 2) - (height * proportion)} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - svg.value.perspective - height * proportion} Z`,
95+
tubeTop: `M${svg.value.left},${svg.value.height - svg.value.bottom - height * proportion - svg.value.perspective} C ${svg.value.left},${svg.value.height - svg.value.bottom - height * proportion - (svg.value.perspective *2.5)} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - height * proportion - (svg.value.perspective * 2.5)} ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - height * proportion - svg.value.perspective} C ${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - height * proportion + svg.value.perspective /2} ${svg.value.left},${svg.value.height - svg.value.bottom - height * proportion + svg.value.perspective / 2} ${svg.value.left},${svg.value.height - svg.value.bottom - height * proportion - svg.value.perspective}`,
96+
tubeBody: `M
97+
${svg.value.left},${svg.value.height - svg.value.bottom - height * proportion - svg.value.perspective}
98+
C ${svg.value.left},${svg.value.height - svg.value.bottom - height * proportion + svg.value.perspective / 2}
99+
${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - height * proportion + svg.value.perspective /2}
100+
${svg.value.width - svg.value.right},${svg.value.height - svg.value.bottom - height * proportion - svg.value.perspective}
101+
L${svg.value.width - svg.value.right},${svg.value.height - svg.value.perspective * 1.5}
102+
C
103+
${svg.value.width - svg.value.right},${svg.value.height}
104+
${svg.value.left},${svg.value.height}
105+
${svg.value.left},${svg.value.height - svg.value.bottom - svg.value.perspective}Z`
98106
}
99107
})
100108
@@ -201,6 +209,11 @@ defineExpose({
201209
<stop offset="0%" :stop-color="`${convertColorToHex(barConfig.style.chart.backgroundColor)}00`" />
202210
<stop offset="100%" :stop-color="`${barConfig.style.chart.bar.color}33`" />
203211
</radialGradient>
212+
<linearGradient :id="`gradient_tube_body${uid}`" x1="0%" y1="0%" x2="100%" y2="0%">
213+
<stop offset="0%" :stop-color="`${barConfig.style.chart.bar.color}`"/>
214+
<stop offset="75%" :stop-color="`${convertColorToHex(barConfig.style.chart.backgroundColor)}00`"/>
215+
<stop offset="100%" :stop-color="`${barConfig.style.chart.bar.color}66`"/>
216+
</linearGradient>
204217
</defs>
205218

206219
<text
@@ -214,17 +227,31 @@ defineExpose({
214227
>
215228
{{Number((isNaN(activeValue) ? 0 : activeValue).toFixed(barConfig.style.chart.dataLabel.rounding)).toLocaleString() }} %
216229
</text>
217-
218-
<!-- BOX SKELETON -->
219-
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.right" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
220-
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.left" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
221-
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.side" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
222-
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.topSides" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
223-
224-
<!-- FILL BOX -->
225-
<path :d="fill.right" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_right${uid})`"/>
226-
<path :d="fill.left" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_left${uid})`"/>
227-
<path :d="fill.top" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_top${uid})`"/>
230+
231+
232+
<g v-if="!barConfig.style.shape || barConfig.style.shape === 'bar'">
233+
<!-- BOX SKELETON -->
234+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.right" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
235+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.left" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
236+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.side" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
237+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.topSides" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
238+
239+
<!-- FILL BOX -->
240+
<path :d="fill.right" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_right${uid})`"/>
241+
<path :d="fill.left" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_left${uid})`"/>
242+
<path :d="fill.top" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_top${uid})`"/>
243+
</g>
244+
245+
<g v-if="barConfig.style.shape === 'tube'">
246+
<!-- TUBE SKELETON -->
247+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.tubeTop" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
248+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.tubeLeft" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
249+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.tubeRight" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
250+
<path :stroke-dasharray="barConfig.style.chart.box.strokeDasharray" :d="box.tubeBottom" :stroke="barConfig.style.chart.box.stroke" :stroke-width="barConfig.style.chart.box.strokeWidth" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
251+
<!-- FILL TUBE -->
252+
<path :d="fill.tubeTop" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_top${uid})`"/>
253+
<path :d="fill.tubeBody" :stroke="barConfig.style.chart.bar.stroke" :stroke-width="barConfig.style.chart.bar.strokeWidth" stroke-linejoin="round" stroke-linecap="round" :fill="`url(#gradient_tube_body${uid})`"/>
254+
</g>
228255

229256
<slot name="svg" :svg="svg"/>
230257
</svg>

‎src/default_configs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2810,6 +2810,7 @@
28102810
"vue_ui_3d_bar": {
28112811
"style": {
28122812
"fontFamily":"inherit",
2813+
"shape": "bar",
28132814
"chart": {
28142815
"animation": {
28152816
"use": true,

‎types/vue-data-ui.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ declare module 'vue-data-ui' {
1212
export type VueUi3dBarConfig = {
1313
style?: {
1414
fontFamily?: string;
15+
shape?: "bar" | "tube";
1516
chart?: {
1617
animation?: {
1718
use?: boolean;

0 commit comments

Comments
 (0)