Skip to content

Commit fdf3470

Browse files
RonnyWinklerRonnyWinkler
committed
chart layout
Improved chart layout
1 parent dc116d3 commit fdf3470

File tree

6 files changed

+131
-43
lines changed

6 files changed

+131
-43
lines changed

‎app.json‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1747,28 +1747,34 @@
17471747
{
17481748
"id": "chart_color_style",
17491749
"type": "dropdown",
1750-
"value": "colored_line_range",
1750+
"value": "colored_line_level",
17511751
"title": {
17521752
"en": "Color style"
17531753
},
17541754
"values": [
17551755
{
1756-
"id": "colored_line_range",
1756+
"id": "colored_line_level",
17571757
"title": {
1758-
"en": "Colored line based on range"
1758+
"en": "Colored line based on price level"
17591759
}
17601760
},
17611761
{
1762-
"id": "colored_line_level",
1762+
"id": "colored_line_range",
17631763
"title": {
1764-
"en": "Colored line based on price level"
1764+
"en": "Colored line based on range"
17651765
}
17661766
},
17671767
{
17681768
"id": "vertical_segments",
17691769
"title": {
17701770
"en": "Vertical segments based on price level"
17711771
}
1772+
},
1773+
{
1774+
"id": "horizontal_segments",
1775+
"title": {
1776+
"en": "Horizontal segments based on range"
1777+
}
17721778
}
17731779
]
17741780
}

‎widgets/price/public/echarts.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎widgets/price/public/echarts.min3.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎widgets/price/public/index.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@
55
--color_rgb_cheap: 154, 205, 50;
66
--color_rgb_very_cheap: 50, 205, 50;
77

8+
--color_rgb_gradient: 239, 235, 220;
9+
810
--color_very_expensive: rgb(var(--color_rgb_very_expensive));
911
--color_expensive: rgb(var(--color_rgb_expensive));
1012
--color_normal: rgb(var(--color_rgb_normal));
1113
--color_cheap: rgb(var(--color_rgb_cheap));
1214
--color_very_cheap: rgb(var(--color_rgb_very_cheap));
1315

14-
--chart_opacity: 0.5;
16+
--chart_opacity: 0.8;
17+
--gradient_opacity: 0.5;
1518
--chart_default_line_color: rgb(100, 149, 237);
1619
}
1720

‎widgets/price/public/index.html‎

Lines changed: 103 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -376,63 +376,114 @@
376376
}
377377
visualMapPieces.push( piece );
378378
}
379-
console.log('VisualMap pieces: ',visualMapPieces);
380-
381-
visualMap = {
379+
// console.log('VisualMap pieces: ',visualMapPieces);
380+
visualMapX = {
382381
show: false,
383382
type: 'piecewise',
384383
dimension: 0,
385384
seriesIndex: 0,
386385
pieces: visualMapPieces
387386
};
388387

389-
if (settings.chart_color_style == 'vertical_segments'){
390-
// activate chart area
391-
areaStyle = {};
392-
}
393-
else if (settings.chart_color_style == 'colored_line_level'){
394-
// clear fix line color
395-
seriesLineColor = null;
396-
}
397-
else if (settings.chart_color_style == 'colored_line_range'){
398-
399-
visualMap =
400-
{
401-
show: false,
402-
type: 'piecewise',
403-
dimension: 1,
404-
pieces: [
388+
visualMapY =
389+
{
390+
show: false,
391+
type: 'piecewise',
392+
dimension: 1,
393+
pieces: [
405394
{
406-
gte: priceSegments.VERY_CHEAP.min-1,
395+
gte: markYAxisMin, //priceSegments.VERY_CHEAP.min,
407396
lte: priceSegments.VERY_CHEAP.max,
408-
color: 'var(--color_very_cheap)'
397+
color: 'rgba(var(--color_rgb_very_cheap), var(--chart_opacity))'
409398
},
410399
{
411400
gt: priceSegments.CHEAP.min,
412401
lte: priceSegments.CHEAP.max,
413-
color: 'var(--color_cheap)'
402+
color: 'rgba(var(--color_rgb_cheap), var(--chart_opacity))'
414403
},
415404
{
416405
gt: priceSegments.NORMAL.min,
417406
lte: priceSegments.NORMAL.max,
418-
color: 'var(--color_normal)'
407+
color: 'rgba(var(--color_rgb_normal), var(--chart_opacity))'
419408
},
420409
{
421410
gt: priceSegments.EXPENSIVE.min,
422411
lte: priceSegments.EXPENSIVE.max,
423-
color: 'var(--color_expensive)'
412+
color: 'rgba(var(--color_rgb_expensive), var(--chart_opacity))'
424413
},
425414
{
426415
gt: priceSegments.VERY_EXPENSIVE.min,
427416
lte: priceSegments.VERY_EXPENSIVE.max+1,
428-
color: 'var(--color_very_expensive)'
429-
}
430-
],
431-
outOfRange: {
432-
color: '#555555'
417+
color: 'rgba(var(--color_rgb_very_expensive), var(--chart_opacity))'
433418
}
419+
],
420+
outOfRange: {
421+
color: 'rgba(var(--color_rgb_very_cheap), var(--chart_opacity))'
434422
}
423+
};
424+
425+
if (settings.chart_color_style == 'vertical_segments'){
426+
// activate chart area
427+
areaStyle = {};
428+
// Use visual map based on time and prive level (xAxis)
429+
visualMap = visualMapX;
430+
seriesLineColor = null;
431+
}
432+
if (settings.chart_color_style == 'horizontal_segments'){
433+
// activate chart area
434+
areaStyle = {};
435+
// Use visual map based on price (yAxis)
436+
visualMap = visualMapY;
437+
seriesLineColor = null;
438+
areaStyle = {};
439+
}
440+
else if (settings.chart_color_style == 'colored_line_level'){
441+
// Use visual map based on time and prive level (xAxis)
442+
visualMap = visualMapX;
443+
// clear fix line color
444+
seriesLineColor = null;
445+
areaStyle = {
446+
color: {
447+
type: 'linear',
448+
x: 0,
449+
y: 0,
450+
x2: 0,
451+
y2: 1,
452+
colorStops: [
453+
{
454+
offset: 0, color: 'rgba(var(--color_rgb_gradient), var(--gradient_opacity))'
455+
},
456+
{
457+
offset: 1, color: '#00000000'
458+
}
459+
],
460+
global: false // default is false
461+
}
462+
};
463+
}
464+
else if (settings.chart_color_style == 'colored_line_range'){
465+
466+
// Use visual map based on price (yAxis)
467+
visualMap = visualMapY;
435468
// areaStyle = {};
469+
areaStyle = {
470+
color: {
471+
type: 'linear',
472+
x: 0,
473+
y: 0,
474+
x2: 0,
475+
y2: 1,
476+
colorStops: [
477+
{
478+
offset: 0, color: 'rgba(var(--color_rgb_gradient), var(--gradient_opacity))'
479+
},
480+
{
481+
offset: 1, color: '#00000000'
482+
}
483+
],
484+
global: false // default is false
485+
}
486+
};
436487
seriesLineColor = null;
437488

438489
}
@@ -441,6 +492,27 @@
441492
// areaStyle = null;
442493
}
443494
}
495+
else{
496+
areaStyle = {
497+
color: {
498+
type: 'linear',
499+
x: 0,
500+
y: 0,
501+
x2: 0,
502+
y2: 1,
503+
colorStops: [
504+
{
505+
offset: 0, color: 'rgba(var(--color_rgb_gradient), var(--gradient_opacity))'
506+
},
507+
{
508+
offset: 1, color: '#00000000'
509+
}
510+
],
511+
global: false // default is false
512+
}
513+
};
514+
515+
}
444516

445517
if (settings.chart_display){
446518
document.getElementById('price_chart').style.display = "flex";
@@ -525,14 +597,14 @@
525597
{
526598
name: 'price',
527599
type: 'line',
600+
step: 'end',
528601
lineStyle:{
529602
color: seriesLineColor,
530-
width: 1
603+
width: 1.5
531604
},
532605
silent: true,
533606
areaStyle: areaStyle,
534607
animation: false,
535-
step: 'end',
536608
showSymbol: false,
537609
data: echarts_data,
538610
markLine: {

‎widgets/price/widget.compose.json‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,28 +45,34 @@
4545
{
4646
"id": "chart_color_style",
4747
"type": "dropdown",
48-
"value": "colored_line_range",
48+
"value": "colored_line_level",
4949
"title": {
5050
"en": "Color style"
5151
},
5252
"values":[
5353
{
54-
"id": "colored_line_range",
54+
"id": "colored_line_level",
5555
"title": {
56-
"en": "Colored line based on range"
56+
"en": "Colored line based on price level"
5757
}
5858
},
5959
{
60-
"id": "colored_line_level",
60+
"id": "colored_line_range",
6161
"title": {
62-
"en": "Colored line based on price level"
62+
"en": "Colored line based on range"
6363
}
6464
},
6565
{
6666
"id": "vertical_segments",
6767
"title": {
6868
"en": "Vertical segments based on price level"
6969
}
70+
},
71+
{
72+
"id": "horizontal_segments",
73+
"title": {
74+
"en": "Horizontal segments based on range"
75+
}
7076
}
7177
]
7278
}

0 commit comments

Comments
 (0)