Skip to content

Commit d05d380

Browse files
graphierosgraphieros
committed
Dev environment - Update VueUiXy testing arena
1 parent 4c5ffed commit d05d380

File tree

1 file changed

+77
-24
lines changed

1 file changed

+77
-24
lines changed

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 77 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,42 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleLabels, toggleSta
1111
const dataset = ref([
1212
{
1313
name: "Long name serie",
14-
series: [10, 20, 12, 13, 10, -20, 30, 20, 12, 16, 32, 64, 12],
14+
series: [-90, -80, -60, -30, 0, 30, 60, 80, 90, 80, 60, 30, 0, -30, -60, -80, -90],
1515
comments: ["", "", "", "", "This is a comment that can be long, or that can be short but it depends."],
1616
type: "line",
17-
smooth: false,
17+
smooth: true,
1818
useArea: true,
1919
dataLabels: true,
2020
scaleSteps: 2,
2121
},
22-
{
23-
name: "S1",
24-
series: [-20, 20, 8, 16, 12, 13, -16, 55, 12, 3, 7, 12, 6],
25-
comments: ["Some sort of negative comment", "Some sort of positive comment", "", "","", "", "", "Some sort of positive comment", "", ""],
26-
type: "bar",
27-
smooth: false,
28-
useArea: true,
29-
scaleSteps: 2,
30-
},
31-
{
32-
name: "S2",
33-
series: [10,12,10,12, 25, 12, 4, 4, 3, 7, 8, 9, 12],
34-
comments: ["", "", "", "","", "", "", "", "", "This is another comment"],
35-
type: "plot",
36-
smooth: false,
37-
useArea: true,
38-
scaleSteps: 2
39-
},
22+
// {
23+
// name: "Long name serie",
24+
// series: [10, 20, 12, 13, 10, -20, 30, 20, 12, 16, 32, 64, 12],
25+
// comments: ["", "", "", "", "This is a comment that can be long, or that can be short but it depends."],
26+
// type: "line",
27+
// smooth: false,
28+
// useArea: true,
29+
// dataLabels: true,
30+
// scaleSteps: 2,
31+
// },
32+
// {
33+
// name: "S1",
34+
// series: [-20, 20, 8, 16, 12, 13, -16, 55, 12, 3, 7, 12, 6],
35+
// comments: ["Some sort of negative comment", "Some sort of positive comment", "", "","", "", "", "Some sort of positive comment", "", ""],
36+
// type: "bar",
37+
// smooth: false,
38+
// useArea: true,
39+
// scaleSteps: 2,
40+
// },
41+
// {
42+
// name: "S2",
43+
// series: [10,12,10,12, 25, 12, 4, 4, 3, 7, 8, 9, 12],
44+
// comments: ["", "", "", "","", "", "", "", "", "This is another comment"],
45+
// type: "plot",
46+
// smooth: false,
47+
// useArea: true,
48+
// scaleSteps: 2
49+
// },
4050
// {
4151
// name: "S3",
4252
// series: [23.12, 23.12, 23.05, 23.07, null, 23.69, 23.72, 23.25, 23.36, 23.41, 23.65],
@@ -76,7 +86,7 @@ const model = ref([
7686
7787
{ key: 'chart.padding.top', def: 36, type: 'number', min: 0, max: 100, label: "top", category: 'padding' },
7888
{ key: 'chart.padding.right', def: 24, type: 'number', min: 0, max: 100, label: 'right', category: 'padding' },
79-
{ key: 'chart.padding.bottom', def: 48, type: 'number', min: 0, max: 100, label: 'bottom', category: 'padding' },
89+
{ key: 'chart.padding.bottom', def: 64, type: 'number', min: 0, max: 100, label: 'bottom', category: 'padding' },
8090
{ key: 'chart.padding.left', def: 48, type: 'number', min: 0, max: 100, label: 'left', category: 'padding' },
8191
8292
{ key: 'chart.highlighter.color', def: '#1A1A1A', type: 'color', label: 'highlighterColor', category: 'general' },
@@ -101,6 +111,14 @@ const model = ref([
101111
102112
{ key: 'chart.grid.stroke', def: '#FF0000', type: 'color', label: 'lineColor', category: 'grid' },
103113
{ key: 'chart.grid.showVerticalLines', def: true, type: 'checkbox', label: 'verticalLines', category: 'grid' },
114+
115+
{ key: 'chart.grid.frame.show', def: true, type: 'checkbox'},
116+
{ key: 'chart.grid.frame.stroke', def: '#1A1A1A', type: 'color'},
117+
{ key: 'chart.grid.frame.strokeWidth', def: 4, type: 'number', min: 0, max: 12},
118+
{ key: 'chart.grid.frame.strokeLinecap', def: 'round', type: 'select', options: ['round', 'square', 'butt']},
119+
{ key: 'chart.grid.frame.strokeLinejoin', def: 'round', type: 'select', options: ['round', 'miter']},
120+
{ key: 'chart.grid.frame.strokeDashoffset', def: 0, type: 'range', min: 0, max: 100},
121+
104122
{ key: 'chart.grid.labels.show', def: true, type: 'checkbox', label: 'showLabels', category: 'grid' },
105123
{ key: 'chart.grid.labels.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'grid' },
106124
{ key: 'chart.grid.labels.fontSize', def: 16, type: 'number', min: 4, max: 30, label: 'fontSize', category: 'grid' },
@@ -112,14 +130,14 @@ const model = ref([
112130
{ key: 'chart.grid.labels.xAxisLabels.values', def: [], type: 'none', label: 'fontSize' },
113131
{ key: 'chart.grid.labels.xAxisLabels.fontSize', def: 14, type: 'number', min: 6, max: 30, label: 'fontSizePeriodLabels', category: 'grid' },
114132
{ key: 'chart.grid.labels.xAxisLabels.showOnlyFirstAndLast', def: false, type: 'checkbox', label: 'showOnlyFirstAndLast', category: 'grid' },
115-
{ key: 'chart.grid.labels.xAxisLabels.yOffset', def: 8, type: 'number', min: -100, max: 100, label: 'offsetYPeriodLabels', category: 'grid' },
133+
{ key: 'chart.grid.labels.xAxisLabels.yOffset', def: 24, type: 'number', min: -100, max: 100, label: 'offsetYPeriodLabels', category: 'grid' },
116134
{ key: 'chart.grid.labels.xAxisLabels.rotation', def: 0, type: 'range', min: -360, max: 360, label: 'rotation', category: 'grid' },
117-
{ key: 'chart.grid.labels.axis.xLabelOffsetY', def: 14, type: 'number', min: -100, max: 100 },
135+
{ key: 'chart.grid.labels.axis.xLabelOffsetY', def: 24, type: 'number', min: -100, max: 100 },
118136
119137
{ key: 'chart.grid.labels.xAxisLabels.showOnlyAtModulo', def: true, type: 'checkbox'},
120138
{ key: 'chart.grid.labels.xAxisLabels.modulo', def: 6, type: 'number'},
121139
122-
{ key: 'chart.grid.labels.yAxis.commonScaleSteps', def: 20, min: 0, max: 100, type: 'number' },
140+
{ key: 'chart.grid.labels.yAxis.commonScaleSteps', def: 5, min: 0, max: 100, type: 'number' },
123141
{ key: 'chart.grid.labels.yAxis.useIndividualScale', def: false, type: "checkbox" },
124142
{ key: 'chart.grid.labels.yAxis.stacked', def: false, type: 'checkbox' },
125143
{ key: 'chart.grid.labels.yAxis.gap', def: 12, min: 0, max: 200, type: 'number' },
@@ -289,8 +307,43 @@ const config = computed(() => {
289307
},
290308
chart: {
291309
...c.chart,
310+
highlightArea: [{
311+
show: true,
312+
from: 2,
313+
to: 2,
314+
color: '#00FF00',
315+
opacity: 20,
316+
caption: {
317+
text: 'AREA 1',
318+
fontSize: 12,
319+
color: '#1A1A1A',
320+
bold: false,
321+
offsetY: 0,
322+
width: 'auto',
323+
padding: 3,
324+
textAlign: 'center'
325+
}
326+
},
327+
{
328+
show: true,
329+
from: 4,
330+
to: 6,
331+
color: '#FF0000',
332+
opacity: 20,
333+
caption: {
334+
text: 'AREA 2',
335+
fontSize: 12,
336+
color: '#1A1A1A',
337+
bold: false,
338+
offsetY: 0,
339+
width: 'auto',
340+
padding: 3,
341+
textAlign: 'center'
342+
}
343+
}],
292344
grid: {
293345
...c.chart.grid,
346+
position: 'start',
294347
labels: {
295348
...c.chart.grid.labels,
296349
yAxis: {

0 commit comments

Comments
 (0)