Skip to content

Commit 6618c43

Browse files
graphierosgraphieros
committed
VueUiXy layout improvements for bar types only edge cases
1 parent 8684ebc commit 6618c43

File tree

8 files changed

+168
-40
lines changed

8 files changed

+168
-40
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": "2.0.11",
4+
"version": "2.0.12",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 62 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,34 @@ import { getVueDataUiConfig } from "vue-data-ui";
5353
5454
const dataset = ref([
5555
{
56-
name: "Series 1",
57-
series: [200, 100, 125, 230, 120, 100, 90, 50, 12, 25, 100, 154, 155],
58-
type: "line",
56+
name: "Serie 1",
57+
series: [200],
58+
type: "bar",
59+
dataLabels: true
60+
},
61+
{
62+
name: "Some long name",
63+
series: [100],
64+
type: "bar",
65+
dataLabels: true
66+
},
67+
{
68+
name: "Some even longer name",
69+
series: [150],
70+
type: "bar",
71+
},
72+
{
73+
name: "Weird serie name",
74+
series: [90],
75+
type: "bar",
76+
},
77+
{
78+
name: "Another weird long name",
79+
series: [120],
80+
type: "bar",
5981
},
6082
]);
83+
6184
const dataset2 = ref([
6285
{
6386
name: "Series 1",
@@ -2342,13 +2365,30 @@ const donutConfig = ref({
23422365
23432366
const xyConfig = ref({
23442367
chart: {
2345-
tooltip: {
2346-
customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => {
2347-
console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
2348-
return 'TEST'
2349-
}
2350-
}
2351-
}
2368+
labels: {
2369+
fontSize: 30
2370+
},
2371+
// tooltip: {
2372+
// customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => {
2373+
// console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
2374+
// return 'TEST'
2375+
// }
2376+
// }
2377+
},
2378+
bar: {
2379+
labels: {
2380+
show: false,
2381+
},
2382+
serieName: {
2383+
show: true,
2384+
offsetY: -6,
2385+
useAbbreviation: true,
2386+
abbreviationSize: 4,
2387+
useSerieColor: true,
2388+
color: "#FF0000",
2389+
bold: true
2390+
}
2391+
},
23522392
})
23532393
23542394
const waffleConfig = ref({
@@ -2747,7 +2787,7 @@ function selectHistoDatapoint({ datapoint, index }) {
27472787
</template>
27482788
</Box>
27492789

2750-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
2790+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
27512791
<template #title>
27522792
<BaseIcon name="chartDonutEvolution"/>
27532793
VueUiDonutEvolution
@@ -3006,7 +3046,7 @@ function selectHistoDatapoint({ datapoint, index }) {
30063046
</template>
30073047
</Box>
30083048

3009-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
3049+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
30103050
<template #title>
30113051
<BaseIcon name="chartLine" />
30123052
VueUiXy
@@ -3027,9 +3067,11 @@ function selectHistoDatapoint({ datapoint, index }) {
30273067
@selectLegend="selectLegendXY"
30283068
@selectX="selectX"
30293069
>
3030-
<template #svg="{ svg }">
3031-
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
3032-
</template>
3070+
</XyTest>
3071+
<XyTest
3072+
:config="xyConfig"
3073+
:dataset="dataset"
3074+
>
30333075
</XyTest>
30343076
</template>
30353077
<template #prod>
@@ -3044,6 +3086,10 @@ function selectHistoDatapoint({ datapoint, index }) {
30443086
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
30453087
</template>
30463088
</VueUiXy>
3089+
<VueUiXy
3090+
:config="xyConfig"
3091+
:dataset="dataset"
3092+
/>
30473093
</template>
30483094
<template #config>
30493095
{{ PROD_CONFIG.vue_ui_xy }}
@@ -3193,7 +3239,7 @@ function selectHistoDatapoint({ datapoint, index }) {
31933239
</template>
31943240
</Box>
31953241

3196-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
3242+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
31973243
<template #title>
31983244
<BaseIcon name="chartOnion" />
31993245
VueUiOnion

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

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -300,12 +300,12 @@
300300
</g>
301301

302302
<!-- X LABELS BAR -->
303-
<g v-if="chartConfig.bar.labels.show && mutableConfig.dataLabels.show">
303+
<g v-if="(chartConfig.bar.labels.show || chartConfig.bar.serieName.show) && mutableConfig.dataLabels.show">
304304
<g v-for="(serie, i) in barSet" :key="`xLabel_bar_${i}`" :class="`xLabel_bar_${i}`">
305305
<g v-for="(plot, j) in serie.plots" :key="`xLabel_bar_${i}_${j}`">
306306
<text
307307
:data-cy="`xy-bar-label-x-${i}-${j}`"
308-
v-if="!Object.hasOwn(serie, 'dataLabels') || serie.dataLabels === true"
308+
v-if="(!Object.hasOwn(serie, 'dataLabels') || serie.dataLabels === true) && chartConfig.bar.labels.show"
309309
:x="plot.x + calcRectWidth() * 1.1"
310310
:y="plot.y + (plot.value > 0 ? chartConfig.bar.labels.offsetY : - chartConfig.bar.labels.offsetY * 3)"
311311
text-anchor="middle"
@@ -314,6 +314,17 @@
314314
>
315315
{{ canShowValue(plot.value) ? dataLabel({p:chartConfig.chart.labels.prefix, v: plot.value, s: chartConfig.chart.labels.suffix, r: chartConfig.bar.labels.rounding}) : '' }}
316316
</text>
317+
<text
318+
v-if="chartConfig.bar.serieName.show"
319+
:x="plot.x + calcRectWidth() * 1.1"
320+
:y="plot.y + (plot.value > 0 ? chartConfig.bar.serieName.offsetY : - chartConfig.bar.serieName.offsetY * 3)"
321+
text-anchor="middle"
322+
:font-size="chartConfig.chart.labels.fontSize"
323+
:fill="chartConfig.bar.serieName.useSerieColor ? serie.color : chartConfig.bar.serieName.color"
324+
:font-weight="chartConfig.bar.serieName.bold ? 'bold' : 'normal'"
325+
>
326+
{{ chartConfig.bar.serieName.useAbbreviation ? abbreviate({ source: serie.name, length: chartConfig.bar.serieName.abbreviationSize}) : serie.name }}
327+
</text>
317328
</g>
318329
</g>
319330
</g>
@@ -593,14 +604,14 @@
593604
</svg>
594605

595606
<!-- SLICER -->
596-
<div v-if="chartConfig.chart.zoom.show" class="vue-ui-xy-range-slider-wrapper" data-html2canvas-ignore style="position:relative">
607+
<div v-if="chartConfig.chart.zoom.show && maxX > 6" class="vue-ui-xy-range-slider-wrapper" data-html2canvas-ignore style="position:relative">
597608
<div class="vue-ui-xy-range-slider-label-left" data-cy-zoom-legend>
598609
{{ chartConfig.chart.grid.labels.xAxisLabels.values[slicer.start] }}
599610
</div>
600611
<div class="vue-ui-xy-range-slider">
601-
<div class="vue-ui-xy-slider-track" :id="`vue-ui-slider-track_${uniqueId}`"></div>
602-
<input data-cy="xy-range-start" :id="`start_${uniqueId}`" type="range" :style="`border:none !important;accent-color:${chartConfig.chart.zoom.color}`" :min="0" :max="maxX" v-model="slicer.start">
603-
<input :id="`end_${uniqueId}`" type="range" :style="`border:none !important;accent-color:${chartConfig.chart.zoom.color}`" :min="0" :max="maxX" v-model="slicer.end">
612+
<div class="vue-ui-xy-slider-track" :id="`vue-ui-slider-track_${sliderId}`"></div>
613+
<input data-cy="xy-range-start" :id="`start_${sliderId}`" type="range" :style="`border:none !important;accent-color:${chartConfig.chart.zoom.color}`" :min="0" :max="maxX" v-model="slicer.start">
614+
<input :id="`end_${sliderId}`" type="range" :style="`border:none !important;accent-color:${chartConfig.chart.zoom.color}`" :min="0" :max="maxX" v-model="slicer.end">
604615

605616
</div>
606617
<div class="vue-ui-xy-range-slider-label-right" data-cy-zoom-legend>
@@ -683,6 +694,7 @@ import pdf from '../pdf';
683694
import img from "../img";
684695
import { useMouse } from '../useMouse';
685696
import {
697+
abbreviate,
686698
adaptColorToBackground,
687699
calcLinearProgression,
688700
calculateNiceScale,
@@ -712,7 +724,7 @@ import Shape from "../atoms/Shape.vue";
712724
import BaseIcon from '../atoms/BaseIcon.vue';
713725
import TableSparkline from "./vue-ui-table-sparkline.vue";
714726
715-
const uid = createUid();
727+
const sliderId = createUid();
716728
717729
export default {
718730
name: "vue-ui-xy",
@@ -740,7 +752,6 @@ export default {
740752
TableSparkline
741753
},
742754
data(){
743-
const uniqueId = uid;
744755
const maxX = Math.max(...this.dataset.map(datapoint => datapoint.series.length));
745756
const slicer = {
746757
start: 0,
@@ -783,13 +794,14 @@ export default {
783794
selectedSerieIndex: null,
784795
selectedRowIndex: null,
785796
segregatedSeries: [],
786-
uniqueId,
797+
uniqueId: createUid(),
787798
step: 0,
788799
slicer,
789800
__to__: null,
790801
maxX,
791802
showSparklineTable: true,
792-
segregateStep: 0
803+
segregateStep: 0,
804+
sliderId
793805
}
794806
},
795807
computed: {
@@ -837,6 +849,7 @@ export default {
837849
series: datapoint.series.map(d => {
838850
return this.isSafeValue(d) ? d : null
839851
}).slice(this.slicer.start, this.slicer.end),
852+
color: this.convertColorToHex(datapoint.color ? datapoint.color : this.palette[i]),
840853
id: `uniqueId_${i}`
841854
}
842855
});
@@ -847,7 +860,6 @@ export default {
847860
...datapoint,
848861
series: datapoint.series.map(plot => plot + this.relativeZero),
849862
absoluteValues: datapoint.series,
850-
color: this.convertColorToHex(datapoint.color ? datapoint.color : this.palette[i]),
851863
}
852864
}).filter(s => !this.segregatedSeries.includes(s.id));
853865
},
@@ -893,7 +905,6 @@ export default {
893905
...datapoint,
894906
series: datapoint.series.map(plot => plot + this.relativeZero),
895907
absoluteValues: datapoint.series,
896-
color: this.convertColorToHex(datapoint.color ? datapoint.color : this.palette[i]),
897908
}
898909
})
899910
},
@@ -907,7 +918,7 @@ export default {
907918
y: this.drawingArea.bottom - (this.drawingArea.height * this.ratioToMax(plot)),
908919
value: datapoint.absoluteValues[j],
909920
}
910-
})
921+
}),
911922
}
912923
})
913924
},
@@ -1225,11 +1236,11 @@ export default {
12251236
12261237
if (this.chartConfig.chart.zoom.show) {
12271238
const vm = this;
1228-
const sliderOne = document.getElementById(`start_${this.uniqueId}`);
1229-
const sliderTwo = document.getElementById(`end_${this.uniqueId}`);
1239+
const sliderOne = document.getElementById(`start_${this.sliderId}`);
1240+
const sliderTwo = document.getElementById(`end_${this.sliderId}`);
12301241
12311242
let minGap = 0;
1232-
const sliderTrack = document.getElementById(`vue-ui-slider-track_${this.uniqueId}`);
1243+
const sliderTrack = document.getElementById(`vue-ui-slider-track_${this.sliderId}`);
12331244
12341245
sliderOne.addEventListener("input", slideOne);
12351246
sliderTwo.addEventListener("input", slideTwo);
@@ -1287,6 +1298,7 @@ export default {
12871298
}
12881299
},
12891300
methods: {
1301+
abbreviate,
12901302
calculateNiceScale,
12911303
checkNaN,
12921304
createSmoothPath,
@@ -1328,7 +1340,7 @@ export default {
13281340
start: 0,
13291341
end: Math.max(...this.dataset.map(datapoint => datapoint.series.length))
13301342
}
1331-
const sliderTrack = document.getElementById(`vue-ui-slider-track_${this.uniqueId}`);
1343+
const sliderTrack = document.getElementById(`vue-ui-slider-track_${this.sliderId}`);
13321344
sliderTrack.style.background = `linear-gradient(to right, #dadae5 0% , #858585 100% , #858585 0%, #dadae5 100%)`;
13331345
},
13341346
createCanvasArea(plots) {

‎src/default_configs.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,15 @@
280280
"offsetY": -6,
281281
"rounding": 0,
282282
"color": "#2D353C"
283+
},
284+
"serieName": {
285+
"show": false,
286+
"offsetY": -6,
287+
"useAbbreviation": true,
288+
"abbreviationSize": 3,
289+
"useSerieColor": true,
290+
"color": "#2D353C",
291+
"bold": false
283292
}
284293
},
285294
"line": {

‎src/lib.js‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -690,7 +690,7 @@ export function findArcMidpoint(pathElement) {
690690
export function calcNutArrowPath(arc, center = false, yOffsetTop = 16, yOffsetBottom = 16, toCenter = false, hideStart = false, arcSize = 0) {
691691
const { x, y } = findArcMidpoint(arc.path)
692692

693-
const { x:endX, y:endY } = offsetFromCenterPoint({
693+
const { x: endX, y: endY } = offsetFromCenterPoint({
694694
initX: x,
695695
initY: y,
696696
offset: arcSize,
@@ -735,7 +735,7 @@ export function sumByAttribute(arr, attr) {
735735
export function makePath(plots, closed = true) {
736736
let path = "";
737737
plots.forEach(plot => {
738-
path += `${plot.x},${plot.y } `
738+
path += `${plot.x},${plot.y} `
739739
})
740740
return `M${path}${closed ? 'Z' : ''}`;
741741
}
@@ -925,11 +925,34 @@ export function interpolateColorHex(minColor, maxColor, minValue, maxValue, valu
925925
* @property {boolean=} space - space between elements
926926
* @type {DataLabel}
927927
*/
928-
export function dataLabel({p = '', v, s = '', r = 0, space = false}) {
929-
return `${p ?? ''}${space ? ' ': ''}${[undefined, null].includes(v) ? '-' : Number(Number(v).toFixed(r).toLocaleString())}${space ? ' ' : ''}${s ?? ''}`
928+
export function dataLabel({ p = '', v, s = '', r = 0, space = false }) {
929+
return `${p ?? ''}${space ? ' ' : ''}${[undefined, null].includes(v) ? '-' : Number(Number(v).toFixed(r).toLocaleString())}${space ? ' ' : ''}${s ?? ''}`
930+
}
931+
932+
export function abbreviate({ source, length = 3 }) {
933+
if (!source && source !== 0) {
934+
return ''
935+
}
936+
source = String(source);
937+
const sourceSplit = source.length > 1 ? source.split(' ') : [source];
938+
if(sourceSplit.length === 1 && sourceSplit[0].length === 1) {
939+
return String(source).toUpperCase()
940+
}
941+
if (sourceSplit.length === 1) {
942+
return source.slice(0, length).toUpperCase()
943+
} else {
944+
const result = [];
945+
sourceSplit.forEach((chunk, i) => {
946+
if (i < length) {
947+
result.push(chunk.slice(0, 1))
948+
}
949+
})
950+
return result.join().replaceAll(',', '').toUpperCase();
951+
}
930952
}
931953

932954
const lib = {
955+
abbreviate,
933956
adaptColorToBackground,
934957
addVector,
935958
calcLinearProgression,

0 commit comments

Comments
 (0)