Merge pull request #219 from graphieros/trunk

Trunk

Author: graphieros

README.md

@@ -1059,6 +1059,23 @@ const merged = mergeConfigs({
 });
 ```
 
+## Multiline data labels
+
+Some components will display labels on mutliple lines when the provided text contains a line break. (example: "I contain\na line break").
+Below is a table of the places where such line breaks can be used:
+
+| Component                   | Label displayed      | Where to use line breaks                               |
+| --------------------------- | -------------------- | ------------------------------------------------------ |
+| VueUiXy                     | Time labels (x axis) | config.chart.grid.labels.xAxisLabels.values            |
+| VueUiDonutEvolution         | Time labels (x axis) | config.style.chart.layout.grid.xAxis.dataLabels.values |
+| VueUiHistoryPlot            | Plot labels          | dataset names                                          |
+| VueUiParallelCoordinatePlot | Axis labels          | config.style.chart.yAxis.labels.axisNames              |
+| VueUiQuadrant               | Plot labels          | dataset names                                          |
+| VueUiQuickChart             | Time labels (x axis) | config.xyPeriods                                       |
+| VueUiRidgeline              | Time labels (x axis) | config.style.chart.xAxis.labels.values                 |
+| VueUiStackbar               | Time labels (x axis) | config.style.chart.grid.x.timeLabels.values            |
+| VueUiStripPlot              | x axis labels        | dataset names                                          |
+
 ## PDF generation
 
 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

@@ -12,7 +12,7 @@ const dataset = ref([
     {
         name: 'Series 1',
         values: [
-            { x: 2, y: 0, label: 'T1'},
+            { x: 2, y: 0, label: 'T1 with some sort\nof long name'},
             { x: 18, y: 0.2, label: 'T2'},
             { x: 21, y: 0.8, label: 'T3'},
             { x: 19, y: 1.2, label: 'T4'},

TestingArena/ArenaVueUiParallelCoordinatePlot.vue

@@ -166,7 +166,7 @@ const config = computed(() => {
                         ...c.style.chart.yAxis.labels,
                         roundings: [0, 0, 0, 1],
                         suffixes: ['$', '€', '£', '%'],
-                        axisNames: ['Axis 1', 'Axis 2', 'Axis 3', ''],
+                        axisNames: ['Axis 1 with some\nsort of long name', 'Axis 2', 'Axis 3', ''],
                         formatters: [
                             ({value, config}) => {
                                 return `f0 | ${value}`

TestingArena/ArenaVueUiQuadrant.vue

@@ -12,7 +12,7 @@ function makeDs(n,m) {
     const arr = [];
     for(let i = 0; i < n; i += 1) {
         arr.push({
-            name: 'Serie',
+            name: 'Serie with a name\n that is way too long',
             x: Math.random() > 0.5 ? Math.random()*m : -Math.random()*m,
             y: Math.random() > 0.5 ? Math.random()*m : -Math.random()*m,
         })

TestingArena/ArenaVueUiQuickChart.vue

@@ -262,9 +262,12 @@ const config = computed(() => {
         },
         theme: currentTheme.value,
         customPalette: ['#6376DD', "#DD3322", "#66DDAA"],
-        xyPeriods: monthValues.value,
+        // xyPeriods: monthValues.value,
+        xyPeriods: new Array(100).fill(0).map((el,i) => {
+            return `Some long label\nfor index ${i}`
+        }),
         datetimeFormatter: {
-            enable: true
+            enable: false
         }
     }
 })

TestingArena/ArenaVueUiRidgeline.vue

@@ -169,9 +169,12 @@ const config = computed(() => {
                     ...c.style.chart.xAxis,
                     labels: {
                         ...c.style.chart.xAxis.labels,
-                        values: monthValues.value,
+                        // values: monthValues.value,
+                        values: new Array(12).fill(0).map((el,i) => {
+                            return `Some long label\n with index ${i}`
+                        }),
                         datetimeFormatter: {
-                            enable: true,
+                            enable: false,
                         }
                     }
                 }

TestingArena/ArenaVueUiStackbar.vue

@@ -253,9 +253,12 @@ const config = computed(() => {
                         ...c.style.chart.grid.x,
                         timeLabels: {
                             ...c.style.chart.grid.x.timeLabels,
-                            values: monthValues.value,
+                            // values: monthValues.value,
+                            values: new Array(6).fill(0).map((d, i) => {
+                                return `Some long name\nfor dataset of index ${i}` 
+                            }),
                             datetimeFormatter: {
-                                enable: true
+                                enable: false
                             }
                             // values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
                         }
@@ -337,7 +340,7 @@ function selectTimeLabel(data) {
 
     <template #local>
         <LocalVueUiStackbar :dataset="dataset" :config="config" :key="`local_${step}`">
-            <template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
+            <!-- <template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
                 <g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">                
                     <text
                         :x="x"
@@ -358,7 +361,7 @@ function selectTimeLabel(data) {
                         {{ content }}
                     </text>
                 </g>
-            </template>
+            </template> -->
         </LocalVueUiStackbar>
     </template>
 

TestingArena/ArenaVueUiStripPlot.vue

@@ -10,9 +10,9 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleLabels } = useAre
 
 const dataset = ref([
     {
-        name: "Asia",
+        name: "Some continent\nwith a long name",
         plots: [
-            { name: "Shanghai", value: 24.9 },
+            { name: "Some Country with\na long name", value: 24.9 },
             { name: "Beijing", value: 21.9 },
             { name: "Delhi", value: 16.8 },
             { name: "Guangzhou", value: 16.1 },

TestingArena/ArenaVueUiTreemap.vue

@@ -14,7 +14,7 @@ const dataset = ref([
         value: 100,
         children: [
             {
-                name: 'Some kind of child',
+                name: 'Some kind of child with a very long name that is way too long',
                 value: 50
             },
             {

TestingArena/ArenaVueUiVerticalBar.vue

@@ -10,7 +10,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleSort } = useArena
 
 const dataset = ref([
     {
-        name: "Serie 1",
+        name: "Serie 1 with",
         value: 100.987987,
         children: [
             {