Skip to content

Commit e700bb1

Browse files
graphierosgraphieros
committed
Improvement - VueUiStackbar - Add config options to hide dataLabels under given value or %; add options to style grid lines
1 parent cd6b9dc commit e700bb1

File tree

4 files changed

+78
-20
lines changed

4 files changed

+78
-20
lines changed

‎TestingArena/ArenaVueUiStackbar.vue‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ const dataset = computed(() => {
2121
return [
2222
{
2323
name: "Series 1",
24-
series: [1, 2, 1, 3, 1, 5],
24+
series: [1, 2, 1, 3, 1, 5, 0.1],
2525
},
2626
{
2727
name: "Series 2",
28-
series: [0, 2, 3, 2, 1, 2],
28+
series: [0, 2, 3, 2, 1, 2, 0.1],
2929
},
3030
{
3131
name: "Series 3",
32-
series: [1, 2, 4, 3, 2, 1],
32+
series: [1, 2, 4, 3, 2, 1, 0.1],
3333
},
3434
];
3535
});
@@ -82,7 +82,7 @@ const monthValues = computed(() => {
8282
const model = ref([
8383
{ key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
8484
85-
{ key: 'orientation', def: 'horizontal', type:'select', options: ['vertical', 'horizontal']},
85+
{ key: 'orientation', def: 'vertical', type:'select', options: ['vertical', 'horizontal']},
8686
{ key: 'responsive', def: false, type: 'checkbox'},
8787
{ key: 'theme', def: '', type: 'select', options: ['', 'zen', 'hack', 'concrete']},
8888
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
@@ -115,8 +115,8 @@ const model = ref([
115115
{ key: 'style.chart.zoom.color', def: '#CCCCCC', type: 'color'},
116116
{ key: 'style.chart.zoom.highlightColor', def: '#5A5A5A', type: 'color'},
117117
{ key: 'style.chart.zoom.fontSize', def: 14, type: 'number', min: 8, max: 42},
118-
{ key: 'style.chart.zoom.startIndex', def:1, type: 'number', min: 0, max: 100},
119-
{ key: 'style.chart.zoom.endIndex', def: 2, type: 'number', min: 0, max: 100},
118+
{ key: 'style.chart.zoom.startIndex', def:null, type: 'number', min: 0, max: 100},
119+
{ key: 'style.chart.zoom.endIndex', def: null, type: 'number', min: 0, max: 100},
120120
{ key: 'style.chart.zoom.enableRangeHandles', def: true, type: 'chexkbox'},
121121
{ key: 'style.chart.zoom.enableSelectionDrag', def: true, type: 'chexkbox'},
122122
@@ -141,7 +141,7 @@ const model = ref([
141141
142142
{ key: 'style.chart.bars.gapRatio', def: 0.5, type: 'range', min: 0, max: 1, step: 0.01 },
143143
{ key: 'style.chart.bars.distributed', def: false, type: 'checkbox'},
144-
{ key: 'style.chart.bars.showDistributedPercentage', def: true, type: 'checkbox'},
144+
{ key: 'style.chart.bars.showDistributedPercentage', def: false, type: 'checkbox'},
145145
{ key: 'style.chart.bars.borderRadius', def: 6, type: 'number', min: 0, max: 12},
146146
{ key: 'style.chart.bars.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
147147
@@ -166,12 +166,19 @@ const model = ref([
166166
{ key: 'style.chart.bars.dataLabels.prefix', def: 'P', type: 'text'},
167167
{ key: 'style.chart.bars.dataLabels.suffix', def: 'S', type: 'text'},
168168
169+
{ key: 'style.chart.bars.dataLabels.hideUnderValue', def: 1, type: 'number', min: 0, max: 100},
170+
{ key: 'style.chart.bars.dataLabels.hideUnderPercentage', def: 50, type: 'number', min: 0, max: 100},
171+
169172
{ key: 'style.chart.grid.scale.ticks', def: 10, type: 'select', options: [2, 5, 10, 20]},
170173
{ key: 'style.chart.grid.scale.scaleMin', def: null, type: 'number', min: -1000, max: 1000},
171174
{ key: 'style.chart.grid.scale.scaleMax', def: null, type: 'number', min: -1000, max: 1000},
172175
173176
{ key: 'style.chart.grid.x.showAxis', def: true, type: 'checkbox'},
174177
{ key: 'style.chart.grid.x.showHorizontalLines', def: true, type: 'checkbox'},
178+
{ key: 'style.chart.grid.x.linesColor', def: 'red', type: 'color' },
179+
{ key: 'style.chart.grid.x.linesThickness', def: 0.5, type: 'number', min: 0, max: 12},
180+
{ key: 'style.chart.grid.x.linesStrokeDasharray', def: 2, type: 'number', min: 0, max: 12},
181+
175182
{ key: 'style.chart.grid.x.axisColor', def: '#E1E5E8', type: 'color'},
176183
{ key: 'style.chart.grid.x.axisThickness', def: 2, type: 'number', min: 0, max: 12},
177184
{ key: 'style.chart.grid.x.axisName.show', def: true, type: 'checkbox'},
@@ -189,7 +196,11 @@ const model = ref([
189196
{ key: 'style.chart.grid.x.timeLabels.bold', def: false, type: 'checkbox'},
190197
191198
{ key: 'style.chart.grid.y.showAxis', def: true, type: 'checkbox'},
192-
{ key: 'style.chart.grid.y.showVerticalLines', def: false, type: 'checkbox'},
199+
{ key: 'style.chart.grid.y.showVerticalLines', def: true, type: 'checkbox'},
200+
{ key: 'style.chart.grid.y.linesColor', def: '#FF00FF', type: 'color' },
201+
{ key: 'style.chart.grid.y.linesThickness', def: 0.5, type: 'number', min: 0, max: 12},
202+
{ key: 'style.chart.grid.y.linesStrokeDasharray', def: 2, type: 'number', min: 0, max: 12},
203+
193204
{ key: 'style.chart.grid.y.axisColor', def: '#E1E5E8', type: 'color'},
194205
{ key: 'style.chart.grid.y.axisThickness', def: 2, type: 'number', min: 0, max: 12},
195206
{ key: 'style.chart.grid.y.axisName.show', def: true, type: 'checkbox'},
@@ -227,7 +238,7 @@ const themeOptions = ref([
227238
"celebrationNight"
228239
])
229240
230-
const currentTheme = ref(themeOptions.value[6])
241+
const currentTheme = ref(themeOptions.value[0])
231242
232243
const config = computed(() => {
233244
const c = convertArrayToObject(model.value);
@@ -264,6 +275,7 @@ const config = computed(() => {
264275
}
265276
},
266277
y: {
278+
...c.style.chart.grid.y,
267279
axisLabels: {
268280
formatter: ({ value }) => {
269281
return 'BOO' + value

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

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -157,11 +157,31 @@ function prepareConfig() {
157157
finalConfig.style.chart.zoom.endIndex = null;
158158
}
159159
160+
if (props.config && hasDeepProperty(props.config, 'style.chart.bars.dataLabels.hideUnderValue')) {
161+
finalConfig.style.chart.bars.dataLabels.hideUnderValue = props.config.style.chart.bars.dataLabels.hideUnderValue;
162+
} else {
163+
finalConfig.style.chart.bars.dataLabels.hideUnderValue = null;
164+
}
165+
166+
if (props.config && hasDeepProperty(props.config, 'style.chart.bars.dataLabels.hideUnderPercentage')) {
167+
finalConfig.style.chart.bars.dataLabels.hideUnderPercentage = props.config.style.chart.bars.dataLabels.hideUnderPercentage;
168+
} else {
169+
finalConfig.style.chart.bars.dataLabels.hideUnderPercentage = null;
170+
}
171+
160172
// ----------------------------------------------------------------------------
161173
162174
return finalConfig;
163175
}
164176
177+
const canHideSmallValues = computed(() => {
178+
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideUnderValue !== null
179+
});
180+
181+
const canHideSmallPercentages = computed(() => {
182+
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideUnderPercentage !== null
183+
})
184+
165185
watch(() => props.config, (_newCfg) => {
166186
FINAL_CONFIG.value = prepareConfig();
167187
userOptionsVisible.value = !FINAL_CONFIG.value.userOptions.showOnChartHover;
@@ -852,9 +872,15 @@ function selectTimeLabel(label, relativeIndex) {
852872
853873
function isLabelDisplayed(value, proportion) {
854874
if (FINAL_CONFIG.value.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.value.style.chart.bars.distributed) {
855-
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideEmptyPercentages ? proportion > 0 : true
875+
if (!canHideSmallPercentages.value) {
876+
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideEmptyPercentages ? proportion > 0 : true;
877+
}
878+
return proportion * 100 >= FINAL_CONFIG.value.style.chart.bars.dataLabels.hideUnderPercentage;
856879
} else {
857-
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideEmptyValues ? value !== 0 : true
880+
if (!canHideSmallValues.value) {
881+
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideEmptyValues ? value !== 0 : true
882+
}
883+
return Math.abs(value) >= FINAL_CONFIG.value.style.chart.bars.dataLabels.hideUnderValue
858884
}
859885
}
860886
@@ -1010,8 +1036,9 @@ defineExpose({
10101036
:x2="drawingArea.right"
10111037
:y1="yLabel.y"
10121038
:y2="yLabel.y"
1013-
:stroke="FINAL_CONFIG.style.chart.grid.x.axisColor"
1014-
:stroke-width="1"
1039+
:stroke="FINAL_CONFIG.style.chart.grid.x.linesColor"
1040+
:stroke-width="FINAL_CONFIG.style.chart.grid.x.linesThickness"
1041+
:stroke-dasharray="FINAL_CONFIG.style.chart.grid.x.linesStrokeDasharray"
10151042
stroke-linecap="round"
10161043
/>
10171044
</template>
@@ -1024,8 +1051,9 @@ defineExpose({
10241051
:x2="drawingArea.right"
10251052
:y1="drawingArea.top + (barSlot * i)"
10261053
:y2="drawingArea.top + (barSlot * i)"
1027-
:stroke="FINAL_CONFIG.style.chart.grid.y.axisColor"
1028-
:stroke-width="1"
1054+
:stroke="FINAL_CONFIG.style.chart.grid.x.linesColor"
1055+
:stroke-width="FINAL_CONFIG.style.chart.grid.x.linesThickness"
1056+
:stroke-dasharray="FINAL_CONFIG.style.chart.grid.x.linesStrokeDasharray"
10291057
stroke-linecap="round"
10301058
/>
10311059
</template>
@@ -1038,22 +1066,24 @@ defineExpose({
10381066
:x2="drawingArea.left + (barSlot * i)"
10391067
:y1="drawingArea.top"
10401068
:y2="drawingArea.bottom"
1041-
:stroke="FINAL_CONFIG.style.chart.grid.y.axisColor"
1042-
:stroke-width="1"
1069+
:stroke="FINAL_CONFIG.style.chart.grid.y.linesColor"
1070+
:stroke-width="FINAL_CONFIG.style.chart.grid.y.linesThickness"
1071+
:stroke-dasharray="FINAL_CONFIG.style.chart.grid.y.linesStrokeDasharray"
10431072
stroke-linecap="round"
10441073
/>
10451074
</template>
10461075
10471076
<!-- VERTICAL LINES (horizontal mode) -->
1048-
<template v-if="FINAL_CONFIG.style.chart.grid.x.showHorizontalLines && FINAL_CONFIG.orientation === 'horizontal'">
1077+
<template v-if="FINAL_CONFIG.style.chart.grid.y.showVerticalLines && FINAL_CONFIG.orientation === 'horizontal'">
10491078
<line
10501079
v-for="(yLabel, i) in yLabels"
10511080
:x1="yLabel.horizontal_x"
10521081
:x2="yLabel.horizontal_x"
10531082
:y1="drawingArea.top"
10541083
:y2="drawingArea.bottom"
1055-
:stroke="FINAL_CONFIG.style.chart.grid.x.axisColor"
1056-
:stroke-width="1"
1084+
:stroke="FINAL_CONFIG.style.chart.grid.y.linesColor"
1085+
:stroke-width="FINAL_CONFIG.style.chart.grid.y.linesThickness"
1086+
:stroke-dasharray="FINAL_CONFIG.style.chart.grid.y.linesStrokeDasharray"
10571087
stroke-linecap="round"
10581088
/>
10591089
</template>

‎src/useConfig.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,9 @@ export function useConfig() {
334334
dataLabels: {
335335
show: true,
336336
hideEmptyValues: false,
337+
hideUnderValue: null,
337338
hideEmptyPercentages: false,
339+
hideUnderPercentage: null,
338340
adaptColorToBackground: true,
339341
color: COLOR_BLACK,
340342
fontSize: FONT._14,
@@ -355,6 +357,9 @@ export function useConfig() {
355357
showAxis: true,
356358
showHorizontalLines: false,
357359
axisColor: COLOR_GREY_LIGHT,
360+
linesColor: COLOR_GREY_LIGHT,
361+
liensThickness: 1,
362+
linesStrokeDasharray: 0,
358363
axisThickness: 2,
359364
axisName: {
360365
show: true,
@@ -378,6 +383,9 @@ export function useConfig() {
378383
y: {
379384
showAxis: true,
380385
showVerticalLines: false,
386+
linesColor: COLOR_GREY_LIGHT,
387+
linesThickness: 1,
388+
linesStrokeDasharray: 0,
381389
axisColor: COLOR_GREY_LIGHT,
382390
axisThickness: 2,
383391
axisName: {

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6387,7 +6387,9 @@ declare module "vue-data-ui" {
63876387
dataLabels?: {
63886388
show?: boolean;
63896389
hideEmptyValues?: boolean;
6390+
hideUnderValue?: number | null;
63906391
hideEmptyPercentages?: boolean;
6392+
hideUnderPercentage?: number | null;
63916393
adaptColorToBackground?: boolean;
63926394
color?: string;
63936395
fontSize?: number;
@@ -6407,6 +6409,9 @@ declare module "vue-data-ui" {
64076409
x?: {
64086410
showAxis?: boolean;
64096411
showHorizontalLines?: boolean;
6412+
linesColor?: string;
6413+
linesThickness?: number;
6414+
linesStrokeDasharray?: number;
64106415
axisColor?: string;
64116416
axisThickness?: number;
64126417
axisName?: {
@@ -6431,6 +6436,9 @@ declare module "vue-data-ui" {
64316436
y?: {
64326437
showAxis?: boolean;
64336438
showVerticalLines?: boolean;
6439+
linesColor?: string;
6440+
linesThickness?: number;
6441+
linesStrokeDasharray?: number;
64346442
axisColor?: string;
64356443
axisThickness?: number;
64366444
axisName?: {

0 commit comments

Comments
 (0)