Skip to content

Commit 9feab0b

Browse files
graphierosgraphieros
committed
New feature - VueUiBullet - Create component
1 parent 348f86f commit 9feab0b

File tree

13 files changed

+1029
-14
lines changed

13 files changed

+1029
-14
lines changed

‎TestingArena/ArenaVueUiBullet.vue‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<script setup>
2+
import { ref, computed, onMounted } from "vue";
3+
import LocalVueUiBullet from '../src/components/vue-ui-bullet.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
import { useArena } from "../src/useArena";
8+
9+
const { local, build, vduiLocal, vduiBuild } = useArena()
10+
11+
const dataset = ref({
12+
value: 85,
13+
target: 80,
14+
segments: [
15+
{
16+
name: 'Low',
17+
from: 0,
18+
to: 50,
19+
// color: '#4A4A4A'
20+
},
21+
{
22+
name: 'Medium',
23+
from: 50,
24+
to: 70,
25+
// color: '#6A6A6A'
26+
},
27+
{
28+
name: 'High',
29+
from: 70,
30+
to: 100,
31+
// color: '#8A8A8A'
32+
}
33+
]
34+
})
35+
36+
function randomizeData(){
37+
dataset.value.value = Math.random() * 100
38+
}
39+
40+
const model = ref([
41+
{ key: 'userOptions.show', def: true, type: 'checkbox' },
42+
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
43+
{ key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
44+
{ key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
45+
{ key: 'userOptions.buttonTitles.pdf', def: 'PDF', type: 'text'},
46+
{ key: 'userOptions.buttonTitles.img', def: 'IMG', type: 'text'},
47+
{ key: 'userOptions.buttonTitles.fullscreen', def: 'FSC', type: 'text'},
48+
49+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' },
50+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
51+
{ key: 'style.chart.height', def: 96, type: 'range', min: 64, max: 120 },
52+
{ key: 'style.chart.width', def: 600, type: 'range', min: 400, max: 1000 },
53+
54+
{ key: 'style.chart.padding.top', def: 24, type: 'number', min: 0, max: 64 },
55+
{ key: 'style.chart.padding.right', def: 24, type: 'number', min: 0, max: 64 },
56+
{ key: 'style.chart.padding.bottom', def: 24, type: 'number', min: 0, max: 64 },
57+
{ key: 'style.chart.padding.left', def: 12, type: 'number', min: 0, max: 64 },
58+
59+
{ key: 'style.chart.animation.show', def: true, type: 'checkbox' },
60+
{ key: 'style.chart.animation.animationFrames', def: 60, type:'range', min: 30, max: 255 },
61+
62+
{ key: 'style.chart.segments.baseColor', def: '#9A9A9A', type: 'color' },
63+
{ key: 'style.chart.segments.dataLabels.show', def: true, type: 'checkbox' },
64+
{ key: 'style.chart.segments.dataLabels.color', def: '#1A1A1A', type: 'color' },
65+
{ key: 'style.chart.segments.dataLabels.fontSize', def: 10, type: 'number', min: 8, max: 42 },
66+
{ key: 'style.chart.segments.dataLabels.bold', def: false, type: 'checkbox' },
67+
{ key: 'style.chart.segments.dataLabels.prefix', def: '', type: 'text'},
68+
{ key: 'style.chart.segments.dataLabels.suffix', def: '', type: 'text'},
69+
{ key: 'style.chart.segments.dataLabels.offsetY', def: 0, type: 'number', min: -50, max: 50},
70+
{ key: 'style.chart.segments.ticks.show', def: true, type: 'checkbox'},
71+
{ key: 'style.chart.segments.ticks.divisions', def: 10, type: 'number', min: 2, max: 20},
72+
{ key: 'style.chart.segments.ticks.stroke', def: '#8A8A8A', type: 'color'},
73+
74+
{ key: 'style.chart.target.onTop', def: true, type: 'checkbox' },
75+
{ key: 'style.chart.target.color', def: '#1A1A1A', type: 'color'},
76+
{ key: 'style.chart.target.rounded', def: true, type: 'checkbox'},
77+
{ key: 'style.chart.target.heightRatio', def: 0.8, type: 'range', min: 0.2, max: 1, step: 0.01},
78+
{ key: 'style.chart.target.stroke', def: '#FFFFFF', type: 'color'},
79+
{ key: 'style.chart.target.strokeWidth', def: 1, type: 'number', min: 0, max: 6},
80+
{ key: 'style.chart.target.width', def: 6, type: 'number', min: 1, max: 12},
81+
82+
{ key: 'style.chart.valueBar.color', def: '#3A3A3A', type: 'color' },
83+
{ key: 'style.chart.valueBar.heightRatio', def: 0.33, type: 'range', min: 0.2, max: 1, step: 0.01 },
84+
{ key: 'style.chart.valueBar.stroke', def: '#FFFFFF', type: 'color' },
85+
{ key: 'style.chart.valueBar.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
86+
{ key: 'style.chart.valueBar.label.show', def: true, type: 'checkbox'},
87+
{ key: 'style.chart.valueBar.label.color', def: '#1A1A1A', type: 'color'},
88+
{ key: 'style.chart.valueBar.label.fontSize', def: 14, type: 'number', min: 8, max: 42},
89+
{ key: 'style.chart.valueBar.label.bold', def: true, type: 'checkbox'},
90+
{ key: 'style.chart.valueBar.label.offsetY', def: 0, type: 'number', min: -50, max: 50},
91+
92+
{ key: 'style.chart.title.text', def: 'This is a title', type: 'text'},
93+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
94+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 42 },
95+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox' },
96+
{ key: 'style.chart.title.subtitle.text', def: 'This is a subtitle', type: 'text'},
97+
{ key: 'style.chart.title.subtitle.color', def: '#8A8A8A', type: 'color'},
98+
{ key: 'style.chart.title.subtitle.fontSize', def: 14, type: 'number', min: 8, max: 42 },
99+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox' },
100+
]);
101+
102+
const themeOptions = ref([
103+
"",
104+
"hack",
105+
"zen",
106+
"concrete",
107+
"default"
108+
])
109+
110+
const currentTheme = ref(themeOptions.value[4])
111+
112+
const config = computed(() => {
113+
const c = convertArrayToObject(model.value);
114+
return {
115+
...c,
116+
theme: currentTheme.value,
117+
}
118+
})
119+
120+
</script>
121+
122+
<template>
123+
<button @click="randomizeData">RANDOM DATA</button>
124+
<div style="margin: 12px 0; color: white">
125+
Theme:
126+
<select v-model="currentTheme">
127+
<option v-for="opt in themeOptions">{{ opt }}</option>
128+
</select>
129+
</div>
130+
<Box>
131+
<template #title>VueUiBullet</template>
132+
133+
<template #local>
134+
<LocalVueUiBullet :dataset="dataset" :config="config" ref="local"/>
135+
</template>
136+
137+
<template #VDUI-local>
138+
<LocalVueDataUi component="VueUiBullet" :dataset="dataset" :config="config" ref="localVdui"/>
139+
</template>
140+
141+
<template #build>
142+
<VueUiBullet :dataset="dataset" :config="config" ref="build"/>
143+
</template>
144+
145+
<template #VDUI-build>
146+
<VueDataUi component="VueUiBullet" :dataset="dataset" :config="config" ref="buildVdui"/>
147+
</template>
148+
149+
<template #knobs>
150+
<div
151+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
152+
<div v-for="knob in model">
153+
<label style="font-size: 10px">{{ knob.key }}</label>
154+
<div
155+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
156+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
157+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
158+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
159+
<option v-for="opt in knob.options">{{ opt }}</option>
160+
</select>
161+
</div>
162+
</div>
163+
</div>
164+
</template>
165+
166+
<template #config>
167+
{{ config }}
168+
</template>
169+
</Box>
170+
</template>

‎TestingArena/ArenaVueUiIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ref } from "vue";
33
import BaseIcon from "./../src/atoms/BaseIcon.vue";
44
55
const icons = ref([
6-
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "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", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar",
6+
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "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", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet"
77
])
88
99
</script>

‎src/App.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import ArenaVueUiKpi from "../TestingArena/ArenaVueUiKpi.vue";
4949
import ArenaVueUiStackbar from "../TestingArena/ArenaVueUiStackbar.vue";
5050
import ArenaVueUiRating from "../TestingArena/ArenaVueUiRating.vue";
5151
import ArenaVueUiSmiley from "../TestingArena/ArenaVueUiSmiley.vue";
52+
import ArenaVueUiBullet from "../TestingArena/ArenaVueUiBullet.vue";
5253
5354
const showOldArena = ref(false);
5455
@@ -101,13 +102,14 @@ const components = ref([
101102
/*______________*/"VueUiStackbar", // 45
102103
/*________________*/"VueUiRating", // 46
103104
/*________________*/"VueUiSmiley", // 47
105+
/*________________*/"VueUiBullet", // 48
104106
105107
// screenshot
106108
// dashboard
107109
// cursor
108110
]);
109111
110-
const selectedComponent = ref(components.value[47]);
112+
const selectedComponent = ref(components.value[48]);
111113
112114
</script>
113115

@@ -265,4 +267,7 @@ const selectedComponent = ref(components.value[47]);
265267

266268
<!-- 47 -->
267269
<ArenaVueUiSmiley v-if="selectedComponent === 'VueUiSmiley'" />
270+
271+
<!-- 48 -->
272+
<ArenaVueUiBullet v-if="selectedComponent === 'VueUiBullet'" />
268273
</template>

‎src/atoms/Legend.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ const props = defineProps({
1717
id: {
1818
type: String,
1919
default: ''
20+
},
21+
clickable: {
22+
type: Boolean,
23+
default: true
2024
}
2125
})
2226
@@ -36,7 +40,7 @@ function handleClick(legend, i) {
3640
:style="`background:${config.backgroundColor};font-size:${config.fontSize}px;color:${config.color};padding-bottom:${config.paddingBottom}px;padding-top:${config.paddingTop || 12}px;font-weight:${config.fontWeight}`"
3741
>
3842
<slot name="legendTitle" :titleSet="legendSet"></slot>
39-
<div v-for="(legend, i) in legendSet" class="vue-data-ui-legend-item">
43+
<div v-for="(legend, i) in legendSet" :class="{ 'vue-data-ui-legend-item': true, 'active': clickable }">
4044
<svg @click="handleClick(legend, i)" v-if="legend.shape" :height="config.fontSize" :width="config.fontSize" viewBox="0 0 20 20" :style="`overflow: visible;opacity:${legend.opacity}`">
4145
<Shape
4246
:shape="legend.shape"
@@ -68,8 +72,10 @@ function handleClick(legend, i) {
6872
display: flex;
6973
align-items:center;
7074
gap: 6px;
71-
cursor: pointer;
7275
height: fit-content;
7376
text-align: left;
7477
}
78+
.active {
79+
cursor: pointer;
80+
}
7581
</style>

‎src/atoms/Title.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ const props = defineProps({
77
default() {
88
return {}
99
}
10+
},
11+
lineHeight: {
12+
type: [String, Boolean],
13+
default: false
1014
}
1115
});
1216
@@ -42,7 +46,7 @@ const CONFIG = useNestedProp({
4246
CONFIG.title.color
4347
};font-size:${CONFIG.title.fontSize}px;font-weight:${
4448
CONFIG.title.bold ? 'bold' : ''
45-
};padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;`"
49+
};padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;${lineHeight ? `line-height:${lineHeight}`: ''}`"
4650
>
4751
{{ CONFIG.title.text }}
4852
</div>
@@ -53,7 +57,7 @@ const CONFIG = useNestedProp({
5357
CONFIG.subtitle.color
5458
};font-size:${CONFIG.subtitle.fontSize}px;font-weight:${
5559
CONFIG.subtitle.bold ? 'bold' : ''
56-
};padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;`"
60+
};padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;${lineHeight ? `line-height:${lineHeight}`: ''}`"
5761
>
5862
{{ CONFIG.subtitle.text }}
5963
</div>
@@ -64,7 +68,7 @@ const CONFIG = useNestedProp({
6468
CONFIG.subtitle.color
6569
};font-size:${CONFIG.subtitle.fontSize}px;font-weight:${
6670
CONFIG.subtitle.bold ? 'bold' : ''
67-
};padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;`"
71+
};padding-left:${CONFIG.title.paddingLeft}px;padding-right:${CONFIG.title.paddingRight}px;${lineHeight ? `line-height:${lineHeight}`: ''}`"
6872
>
6973
<slot/>
7074
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const components = {
6969
VueUiCarouselTable: defineAsyncComponent(() => import('./vue-ui-carousel-table.vue')),
7070
VueUiGizmo: defineAsyncComponent(() => import('./vue-ui-gizmo.vue')),
7171
VueUiStackbar: defineAsyncComponent(() => import('./vue-ui-stackbar.vue')),
72+
VueUiBullet: defineAsyncComponent(() => import('./vue-ui-bullet.vue'))
7273
};
7374
7475
const componentProps = {
@@ -127,7 +128,8 @@ const componentProps = {
127128
VueUiTimer: ['config'],
128129
VueUiCarouselTable: ['config', 'dataset'],
129130
VueUiGizmo: ['config', 'dataset'],
130-
VueUiStackbar: ['config', 'dataset']
131+
VueUiStackbar: ['config', 'dataset'],
132+
VueUiBullet: ['config', 'dataset'],
131133
};
132134
133135
const emit = defineEmits([

0 commit comments

Comments
 (0)