Skip to content

Commit 8948fdf

Browse files
authored
Merge pull request #219 from graphieros/trunk
Trunk
2 parents b5595db + c9f8264 commit 8948fdf

27 files changed

+595
-137
lines changed

README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1059,6 +1059,23 @@ const merged = mergeConfigs({
10591059
});
10601060
```
10611061

1062+
## Multiline data labels
1063+
1064+
Some components will display labels on mutliple lines when the provided text contains a line break. (example: "I contain\na line break").
1065+
Below is a table of the places where such line breaks can be used:
1066+
1067+
| Component | Label displayed | Where to use line breaks |
1068+
| --------------------------- | -------------------- | ------------------------------------------------------ |
1069+
| VueUiXy | Time labels (x axis) | config.chart.grid.labels.xAxisLabels.values |
1070+
| VueUiDonutEvolution | Time labels (x axis) | config.style.chart.layout.grid.xAxis.dataLabels.values |
1071+
| VueUiHistoryPlot | Plot labels | dataset names |
1072+
| VueUiParallelCoordinatePlot | Axis labels | config.style.chart.yAxis.labels.axisNames |
1073+
| VueUiQuadrant | Plot labels | dataset names |
1074+
| VueUiQuickChart | Time labels (x axis) | config.xyPeriods |
1075+
| VueUiRidgeline | Time labels (x axis) | config.style.chart.xAxis.labels.values |
1076+
| VueUiStackbar | Time labels (x axis) | config.style.chart.grid.x.timeLabels.values |
1077+
| VueUiStripPlot | x axis labels | dataset names |
1078+
10621079
## PDF generation
10631080

10641081
This package requires jspdf as a peer dependency. Please install it in your project if you intend on using the PDF printing feature.

TestingArena/ArenaVueUiHistoryPlot.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const dataset = ref([
1212
{
1313
name: 'Series 1',
1414
values: [
15-
{ x: 2, y: 0, label: 'T1'},
15+
{ x: 2, y: 0, label: 'T1 with some sort\nof long name'},
1616
{ x: 18, y: 0.2, label: 'T2'},
1717
{ x: 21, y: 0.8, label: 'T3'},
1818
{ x: 19, y: 1.2, label: 'T4'},

TestingArena/ArenaVueUiParallelCoordinatePlot.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ const config = computed(() => {
166166
...c.style.chart.yAxis.labels,
167167
roundings: [0, 0, 0, 1],
168168
suffixes: ['$', '', '£', '%'],
169-
axisNames: ['Axis 1', 'Axis 2', 'Axis 3', ''],
169+
axisNames: ['Axis 1 with some\nsort of long name', 'Axis 2', 'Axis 3', ''],
170170
formatters: [
171171
({value, config}) => {
172172
return `f0 | ${value}`

TestingArena/ArenaVueUiQuadrant.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function makeDs(n,m) {
1212
const arr = [];
1313
for(let i = 0; i < n; i += 1) {
1414
arr.push({
15-
name: 'Serie',
15+
name: 'Serie with a name\n that is way too long',
1616
x: Math.random() > 0.5 ? Math.random()*m : -Math.random()*m,
1717
y: Math.random() > 0.5 ? Math.random()*m : -Math.random()*m,
1818
})

TestingArena/ArenaVueUiQuickChart.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,9 +262,12 @@ const config = computed(() => {
262262
},
263263
theme: currentTheme.value,
264264
customPalette: ['#6376DD', "#DD3322", "#66DDAA"],
265-
xyPeriods: monthValues.value,
265+
// xyPeriods: monthValues.value,
266+
xyPeriods: new Array(100).fill(0).map((el,i) => {
267+
return `Some long label\nfor index ${i}`
268+
}),
266269
datetimeFormatter: {
267-
enable: true
270+
enable: false
268271
}
269272
}
270273
})

TestingArena/ArenaVueUiRidgeline.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,12 @@ const config = computed(() => {
169169
...c.style.chart.xAxis,
170170
labels: {
171171
...c.style.chart.xAxis.labels,
172-
values: monthValues.value,
172+
// values: monthValues.value,
173+
values: new Array(12).fill(0).map((el,i) => {
174+
return `Some long label\n with index ${i}`
175+
}),
173176
datetimeFormatter: {
174-
enable: true,
177+
enable: false,
175178
}
176179
}
177180
}

TestingArena/ArenaVueUiStackbar.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -253,9 +253,12 @@ const config = computed(() => {
253253
...c.style.chart.grid.x,
254254
timeLabels: {
255255
...c.style.chart.grid.x.timeLabels,
256-
values: monthValues.value,
256+
// values: monthValues.value,
257+
values: new Array(6).fill(0).map((d, i) => {
258+
return `Some long name\nfor dataset of index ${i}`
259+
}),
257260
datetimeFormatter: {
258-
enable: true
261+
enable: false
259262
}
260263
// values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
261264
}
@@ -337,7 +340,7 @@ function selectTimeLabel(data) {
337340

338341
<template #local>
339342
<LocalVueUiStackbar :dataset="dataset" :config="config" :key="`local_${step}`">
340-
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
343+
<!-- <template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
341344
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
342345
<text
343346
:x="x"
@@ -358,7 +361,7 @@ function selectTimeLabel(data) {
358361
{{ content }}
359362
</text>
360363
</g>
361-
</template>
364+
</template> -->
362365
</LocalVueUiStackbar>
363366
</template>
364367

TestingArena/ArenaVueUiStripPlot.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleLabels } = useAre
1010
1111
const dataset = ref([
1212
{
13-
name: "Asia",
13+
name: "Some continent\nwith a long name",
1414
plots: [
15-
{ name: "Shanghai", value: 24.9 },
15+
{ name: "Some Country with\na long name", value: 24.9 },
1616
{ name: "Beijing", value: 21.9 },
1717
{ name: "Delhi", value: 16.8 },
1818
{ name: "Guangzhou", value: 16.1 },

TestingArena/ArenaVueUiTreemap.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const dataset = ref([
1414
value: 100,
1515
children: [
1616
{
17-
name: 'Some kind of child',
17+
name: 'Some kind of child with a very long name that is way too long',
1818
value: 50
1919
},
2020
{

TestingArena/ArenaVueUiVerticalBar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleSort } = useArena
1010
1111
const dataset = ref([
1212
{
13-
name: "Serie 1",
13+
name: "Serie 1 with",
1414
value: 100.987987,
1515
children: [
1616
{

0 commit comments

Comments
 (0)