Skip to content

Commit 680f07b

Browse files
graphierosgraphieros
committed
VueUiDigits create component
1 parent 92f7e1b commit 680f07b

File tree

10 files changed

+271
-42
lines changed

10 files changed

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

‎src/App.vue‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import WheelTest from "./components/vue-ui-wheel.vue";
4444
import TireTest from "./components/vue-ui-tiremarks.vue";
4545
import MoodRadarTest from "./components/vue-ui-mood-radar.vue";
4646
import Bar3dTest from "./components/vue-ui-3d-bar.vue";
47+
import DigitsTest from "./components/vue-ui-digits.vue";
4748
import DonutEvolutionTest from "./components/vue-ui-donut-evolution.vue";
4849
4950
const dataset = ref([
@@ -3732,6 +3733,16 @@ const moodRadarConfig = ref({
37323733
<BaseIcon name="chartTable" stroke="#42d392" />
37333734
<BaseIcon name="chartMoodRadar" stroke="#42d392" />
37343735
<BaseIcon name="chart3dBar" stroke="#42d392" />
3736+
<BaseIcon name="digit0" stroke="#42d392" />
3737+
<BaseIcon name="digit1" stroke="#42d392" />
3738+
<BaseIcon name="digit2" stroke="#42d392" />
3739+
<BaseIcon name="digit3" stroke="#42d392" />
3740+
<BaseIcon name="digit4" stroke="#42d392" />
3741+
<BaseIcon name="digit5" stroke="#42d392" />
3742+
<BaseIcon name="digit6" stroke="#42d392" />
3743+
<BaseIcon name="digit7" stroke="#42d392" />
3744+
<BaseIcon name="digit8" stroke="#42d392" />
3745+
<BaseIcon name="digit9" stroke="#42d392" />
37353746
</div>
37363747
</template>
37373748
</Box>
@@ -3758,7 +3769,23 @@ const moodRadarConfig = ref({
37583769

37593770
</Box>
37603771

3761-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_3d_bar)">
3772+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_digits)">
3773+
<template #title>
3774+
<BaseIcon name="digit8"/>
3775+
VueUiDigits
3776+
</template>
3777+
<template #dev>
3778+
<DigitsTest :dataset="299792458" :config="{ backgroundColor: '#1A1A1A', digits: { color: '#42d392', skeletonColor: '#2A2A2A'}}"/>
3779+
</template>
3780+
<template #prod>
3781+
<VueUiDigits :dataset="299792458" :config="{ backgroundColor: '#1A1A1A', digits: { color: '#42d392', skeletonColor: '#2A2A2A'}}"/>
3782+
</template>
3783+
<template #config>
3784+
{{ PROD_CONFIG.vue_ui_digits }}
3785+
</template>
3786+
</Box>
3787+
3788+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_3d_bar)">
37623789
<template #title>
37633790
<BaseIcon name="chart3dBar"/>
37643791
VueUi3dBar
@@ -3777,6 +3804,9 @@ const moodRadarConfig = ref({
37773804
</template>
37783805
</VueUi3dBar>
37793806
</template>
3807+
<template #config>
3808+
{{ PROD_CONFIG.vue_ui_3d_bar }}
3809+
</template>
37803810
</Box>
37813811

37823812
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_screenshot)">

‎src/atoms/BaseIcon.vue‎

Lines changed: 49 additions & 35 deletions
Large diffs are not rendered by default.

‎src/atoms/Digit.vue‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
4+
const props = defineProps({
5+
quanta: {
6+
type: String,
7+
default: null
8+
},
9+
backgroundColor: {
10+
type: String,
11+
default: "#e1e5e8"
12+
},
13+
color: {
14+
type: String,
15+
default: "#000000"
16+
},
17+
// coordinates from top left of a
18+
x: {
19+
type: Number,
20+
default: 0
21+
},
22+
y: {
23+
type: Number,
24+
default: 0
25+
}
26+
})
27+
28+
const segments = ref({
29+
/**
30+
* clockwise from top (last: g)
31+
* a
32+
* ----
33+
* f | | b
34+
* ----
35+
* e | g | c
36+
* ----
37+
* d
38+
*/
39+
0: '1111110',
40+
1: '0110000',
41+
2: '1101101',
42+
3: '1111001',
43+
4: '0110011',
44+
5: '1011011',
45+
6: '1011111',
46+
7: '1110000',
47+
8: '1111111',
48+
9: '1111011',
49+
'-': '0000001',
50+
X: '0000000'
51+
})
52+
53+
const digit = computed(() => {
54+
if([undefined, null].includes(props.quanta)) {
55+
return segments.value.X;
56+
} else {
57+
return segments.value[props.quanta]
58+
}
59+
})
60+
</script>
61+
62+
<template>
63+
<g v-if="![undefined, null, '.'].includes(quanta)">
64+
<!-- BACKGROUND -->
65+
66+
<!-- a -->
67+
<path :d="`M ${x} ${y} L ${x+2} ${y-2} L ${x+24} ${y-2} L ${x+26} ${y} L ${x+24} ${y+2} L ${x+2} ${y+2}Z`" :fill="digit[0] == 1 ? color : backgroundColor" stroke="none"/>
68+
<!-- b -->
69+
<path :d="`M ${x+26} ${y+26} L ${x+26} ${y+4} L ${x+28} ${y+2} L ${x+30} ${y+4} L ${x+30} ${y+26} L ${x+28} ${y+28} L ${x+26} ${y+26}`" :fill="digit[1] == 1 ? color: backgroundColor" stroke="none"/>
70+
<!-- c -->
71+
<path :d="`M ${x+26} ${y+56} L ${x+26} ${y+34} L ${x+28} ${y+32} L ${x+30} ${y+34} L ${x+30} ${y+56} L ${x+28} ${y+58} L ${x+26} ${y+56}`" :fill="digit[2] == 1 ? color : backgroundColor" stroke="none"/>
72+
<!-- d -->
73+
<path :d="`M ${x+2} ${y+58} L ${x} ${y+60} L ${x+2} ${y+62} L ${x+24} ${y+62} L ${x+26} ${y+60} L ${x+24} ${y+58} L ${x+2} ${y+58}`" :fill="digit[3] == 1 ? color : backgroundColor" stroke="none"/>
74+
<!-- e -->
75+
<path :d="`M ${x} ${y+34} L ${x-2} ${y+32} L ${x-4} ${y+34} L ${x-4} ${y+56} L ${x-2} ${y+58} L ${x} ${y+56} L ${x} ${y+34}`" :fill="digit[4] == 1 ? color : backgroundColor" stroke="none"/>
76+
<!-- f -->
77+
<path :d="`M ${x-2} ${y+2} L ${x} ${y+4} L ${x} ${y+26} L ${x-2} ${y+28} L ${x-4} ${y+26} L ${x-4} ${y+4} L ${x-2} ${y+2}`" :fill="digit[5] == 1 ? color : backgroundColor" stroke="none"/>
78+
<!-- g -->
79+
<path :d="`M ${x+2} ${y+28} L ${x} ${y+30} L ${x+2} ${y+32} L ${x+24} ${y+32} L ${x+26} ${y+30} L ${x+24} ${y+28} L ${x+2} ${y+28}`" :fill="digit[6] == 1 ? color : backgroundColor" stroke="none"/>
80+
</g>
81+
<g v-if="quanta == '.'">
82+
<circle :cx="x - 8" :cy="y + 60" :r="3" :fill="color"/>
83+
</g>
84+
</template>

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup>
2+
import { computed, ref } from "vue";
3+
import Digit from '../atoms/Digit.vue';
4+
import mainConfig from "../default_configs.json"
5+
import { useNestedProp } from "../useNestedProp";
6+
7+
const props = defineProps({
8+
dataset: {
9+
type: Number,
10+
default: 0
11+
},
12+
config: {
13+
type: Object,
14+
default() {
15+
return {}
16+
}
17+
}
18+
});
19+
20+
const defaultConfig = ref(mainConfig.vue_ui_digits);
21+
22+
23+
const digitConfig = computed(() => {
24+
return useNestedProp({
25+
userConfig: props.config,
26+
defaultConfig: defaultConfig.value
27+
});
28+
});
29+
30+
const digits = computed(() => {
31+
const d = (props.dataset || 0).toString().split('');
32+
const digits = [];
33+
const init = {
34+
x: 10,
35+
y: 10
36+
}
37+
let digitWidth = 0;
38+
for(let i = 0; i < d.length; i += 1) {
39+
const digit = d[i];
40+
digits.push({
41+
x: init.x + digitWidth,
42+
y: init.y,
43+
quanta: digit
44+
})
45+
if(digit == '.') {
46+
digitWidth += 2;
47+
} else {
48+
digitWidth += 44;
49+
}
50+
}
51+
return digits;
52+
})
53+
54+
const maxY = computed(() => {
55+
return Math.max(...digits.value.map(d => d.x)) + 36
56+
})
57+
58+
</script>
59+
60+
<template>
61+
<svg :viewBox="`0 0 ${maxY} 80`" :style="`background:${digitConfig.backgroundColor};${digitConfig.height ? `height:${digitConfig.height};` : ''}${digitConfig.width ? `width:${digitConfig.width}` : ''}`">
62+
<Digit
63+
v-for="digit in digits"
64+
:x="digit.x"
65+
:y="digit.y"
66+
:quanta="digit.quanta"
67+
:color="digitConfig.digits.color"
68+
:backgroundColor="digitConfig.digits.skeletonColor"
69+
/>
70+
</svg>
71+
</template>

‎src/default_configs.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2862,5 +2862,14 @@
28622862
"userOptions": {
28632863
"show": true
28642864
}
2865+
},
2866+
"vue_ui_digits": {
2867+
"height": "100%",
2868+
"width": null,
2869+
"backgroundColor":"#FFFFFF",
2870+
"digits": {
2871+
"color": "#2D353C",
2872+
"skeletonColor": "#e1e5e8"
2873+
}
28652874
}
28662875
}

‎src/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import VueUiDonutEvolution from "./components/vue-ui-donut-evolution.vue";
3131
import VueUiIcon from "./atoms/BaseIcon.vue";
3232
import VueUiMoodRadar from "./components/vue-ui-mood-radar.vue";
3333
import VueUi3dBar from "./components/vue-ui-3d-bar.vue";
34+
import VueUiDigits from "./components/vue-ui-digits.vue";
3435

3536
export {
3637
VueUiXy,
@@ -65,5 +66,6 @@ export {
6566
VueUiDonutEvolution,
6667
VueUiIcon,
6768
VueUiMoodRadar,
68-
VueUi3dBar
69+
VueUi3dBar,
70+
VueUiDigits
6971
};

‎src/main.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ import {
3434
VueUiDonutEvolution,
3535
VueUiIcon,
3636
VueUiMoodRadar,
37-
VueUi3dBar
37+
VueUi3dBar,
38+
VueUiDigits
3839
} from 'vue-data-ui';
3940
import 'vue-data-ui/style.css';
4041

@@ -72,4 +73,5 @@ app.component("VueUiDonutEvolution", VueUiDonutEvolution);
7273
app.component("VueUiIcon", VueUiIcon);
7374
app.component("VueUiMoodRadar", VueUiMoodRadar);
7475
app.component("VueUi3dBar", VueUi3dBar);
76+
app.component("VueUiDigits", VueUiDigits);
7577
app.mount('#app');

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@ declare module 'vue-data-ui' {
55
[key: string]: unknown;
66
}
77

8+
export type VueUiDigitsConfig = {
9+
backgroundColor?: string;
10+
height?: string;
11+
width?: string;
12+
digits?: {
13+
color?: string;
14+
skeletonColor?: string;
15+
}
16+
}
17+
18+
export const VueUiDigits: DefineComponent<{
19+
dataset: number,
20+
config?: VueUiDigitsConfig
21+
}>;
22+
823
export type VueUi3dBarDataset = {
924
percentage: number;
1025
};
@@ -170,8 +185,10 @@ declare module 'vue-data-ui' {
170185
config?: VueUiMoodRadarConfig
171186
}>;
172187

188+
export type VueUiIconName = "annotator" | "chart3bar" | "chartAgePyramid" | "chartBar" | "chartCandlestick" | "chartChestnut" | "chartDonut" | "chartDonutEvolution" | "chartGauge" | "chartHeatmap" | "chartLine" | "chartMoodbar" | "chartOnion" | "chartQuadrant" | "chartRadar" | "chartRelationCircle" | "chartRings" | "chartScatter" | "chartSparkHistogram" | "chartSparkStackbar" | "chartTable" | "chartThermometer" | "chartTiremarks" | "chartVerticalBar" | "chartWaffle" | "chartWheel" | "close" | "dashboard" | "digit0" | "digit1" | "digit2" | "digit3" | "digit4" | "digit5" | "digit6" | "digit7" | "digit8" | "digit9" | "excel" | "image" | "labelClose" | "labelOpen" | "menu" | "moodFlat" | "moodHappy" | "moodNeutral" | "moodSad" | "pdf" | "screenshot" | "skeleton" | "smiley" | "sort" | "spin" | "star" | "tableClose" | "tableOpen";
189+
173190
export const VueUiIcon: DefineComponent<{
174-
name: string;
191+
name: VueUiIconName;
175192
stroke?: string;
176193
strokeWidth?: number;
177194
size?: number;

0 commit comments

Comments
 (0)