beyond-rails 0.0.220 → 0.0.225
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/src/js/components/LineChart.js +54 -7
- data/src/js/components/Modal.js +13 -3
- data/src/sass/_main.scss +10 -0
- data/src/sass/abstracts/_mixins.scss +9 -9
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5e4265a216a874f0d0601c2ffb2166a1fd7faa9cb5453aa9e23ca0f09a3a4f7f
|
4
|
+
data.tar.gz: 8cc3c1212f19a02734fca2dc4b542d67dab8514483952a0ea2725d124c8d5e3d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: dc7afcff18a3f923bb9eb0a30bf48df340add79ed3ac4a20d312061286fb6ba716cdc0a7e813c86143c1c7d0e00780a0589aafad58e6c8861c3f60f61cf77633
|
7
|
+
data.tar.gz: 84f4d67e13db8aa0e05662e4d70728126aac064be37f78536b21621de25a1625552942fc1b6ef4695dfc8b40b7b48c5d9ff6dbe0d9455879f05f8aca5d0dc735
|
@@ -83,6 +83,10 @@ export default class LineChart {
|
|
83
83
|
this.bindPointMouseOver()
|
84
84
|
}
|
85
85
|
|
86
|
+
get noData() {
|
87
|
+
return (this.xLabelRows.length === 0) && (this.yLabelRows.length === 0)
|
88
|
+
}
|
89
|
+
|
86
90
|
get contentWidth() {
|
87
91
|
return this.width - (this.xPadding * 2) - this.yLabelMargin -
|
88
92
|
this.yLabelWidth - (this.xLabelWidth / 2)
|
@@ -130,6 +134,10 @@ export default class LineChart {
|
|
130
134
|
return this.xAxisStart + this.contentWidth
|
131
135
|
}
|
132
136
|
|
137
|
+
get xAxisMiddle() {
|
138
|
+
return (this.xAxisEnd - this.xAxisStart) / 2
|
139
|
+
}
|
140
|
+
|
133
141
|
get xRatio() {
|
134
142
|
const lineWidth = this.xAxisEnd - this.xAxisStart
|
135
143
|
const xDelta = this.lastX - this.firstX
|
@@ -145,6 +153,10 @@ export default class LineChart {
|
|
145
153
|
return this.yAxisStart - this.contentHeight
|
146
154
|
}
|
147
155
|
|
156
|
+
get yAxisMiddle() {
|
157
|
+
return (this.yAxisStart - this.yAxisEnd) / 2
|
158
|
+
}
|
159
|
+
|
148
160
|
get yRatio() {
|
149
161
|
const lineHeight = this.yAxisStart - this.yAxisEnd
|
150
162
|
const yDelta = Math.abs(this.lastY - this.firstY)
|
@@ -200,8 +212,17 @@ export default class LineChart {
|
|
200
212
|
ctx.lineWidth = 2
|
201
213
|
|
202
214
|
this.pointsArr.forEach((points, i) => {
|
215
|
+
const style = lineStyles[i] ? lineStyles[i] : '#000'
|
216
|
+
|
217
|
+
// only one point in a line
|
218
|
+
if (points.length === 1) {
|
219
|
+
const pos = pointPosMap.get(points[0])
|
220
|
+
this.fillCircle(ctx, pos.x, pos.y, 2, style)
|
221
|
+
return
|
222
|
+
}
|
223
|
+
|
203
224
|
ctx.beginPath()
|
204
|
-
ctx.strokeStyle =
|
225
|
+
ctx.strokeStyle = style
|
205
226
|
points.forEach(p => {
|
206
227
|
const pos = pointPosMap.get(p)
|
207
228
|
ctx.lineTo(pos.x, pos.y)
|
@@ -271,10 +292,13 @@ export default class LineChart {
|
|
271
292
|
|
272
293
|
ctx.strokeStyle = '#3c4257'
|
273
294
|
|
274
|
-
|
295
|
+
let x = this.xAxisMiddle
|
275
296
|
|
276
|
-
|
297
|
+
xLabelRows.forEach((row, i) => {
|
277
298
|
|
299
|
+
if (xRatio !== 0) {
|
300
|
+
x = xAxisStart + ((row.value - firstX) / xRatio)
|
301
|
+
}
|
278
302
|
ctx.beginPath()
|
279
303
|
ctx.moveTo(x, scaleStart)
|
280
304
|
ctx.lineTo(x, scaleEnd)
|
@@ -293,8 +317,12 @@ export default class LineChart {
|
|
293
317
|
ctx.fillStyle = '#3c4257'
|
294
318
|
ctx.textAlign = 'right'
|
295
319
|
|
320
|
+
let y = this.yAxisMiddle
|
321
|
+
|
296
322
|
yLabelRows.forEach(row => {
|
297
|
-
|
323
|
+
if (yRatio !== 0) {
|
324
|
+
y = yAxisStart - ((row.value - firstY) / yRatio)
|
325
|
+
}
|
298
326
|
ctx.fillText(row.label, x, y - halfYLabelHeight)
|
299
327
|
})
|
300
328
|
}
|
@@ -445,8 +473,13 @@ export default class LineChart {
|
|
445
473
|
this.setLabelHeights()
|
446
474
|
this.setAxisData()
|
447
475
|
this.updateLabelSizeForAutoStep()
|
476
|
+
|
477
|
+
if (this.noData) {
|
478
|
+
return this.raf(() => this.clear())
|
479
|
+
}
|
480
|
+
|
448
481
|
this.setPointPos()
|
449
|
-
this.draw()
|
482
|
+
this.raf(() => this.draw())
|
450
483
|
})
|
451
484
|
}
|
452
485
|
|
@@ -498,6 +531,10 @@ export default class LineChart {
|
|
498
531
|
this.setLabelHeights()
|
499
532
|
this.setAxisData()
|
500
533
|
this.updateLabelSizeForAutoStep()
|
534
|
+
|
535
|
+
if (this.noData) {
|
536
|
+
return this.raf(() => this.clear())
|
537
|
+
}
|
501
538
|
this.setPointPos()
|
502
539
|
this.raf(() => this.draw())
|
503
540
|
}
|
@@ -505,10 +542,20 @@ export default class LineChart {
|
|
505
542
|
setPointPos() {
|
506
543
|
const { firstX, firstY, pointPosMap, xAxisStart, xRatio, yAxisStart, yRatio } = this
|
507
544
|
|
545
|
+
// edge case: only one point
|
546
|
+
let x = this.xAxisMiddle
|
547
|
+
let y = this.yAxisMiddle
|
548
|
+
|
508
549
|
this.pointsArr.forEach((points, i) => {
|
509
550
|
points.forEach(point => {
|
510
|
-
|
511
|
-
|
551
|
+
|
552
|
+
if (xRatio !== 0) {
|
553
|
+
x = xAxisStart + ((point.x - firstX) / xRatio)
|
554
|
+
}
|
555
|
+
if (yRatio !== 0) {
|
556
|
+
y = yAxisStart - ((point.y - firstY) / yRatio)
|
557
|
+
}
|
558
|
+
|
512
559
|
const pos = { x, y }
|
513
560
|
pointPosMap.set(point, pos)
|
514
561
|
})
|
data/src/js/components/Modal.js
CHANGED
@@ -49,7 +49,19 @@ export default class Modal {
|
|
49
49
|
this.modal = this.dom
|
50
50
|
}
|
51
51
|
|
52
|
+
triggerShowEventIfNeeded() {
|
53
|
+
if (typeof $ === 'function') {
|
54
|
+
$(this.dom).trigger('beyond.modal.show')
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
52
58
|
show(html) {
|
59
|
+
|
60
|
+
if (this.isVisible && html) {
|
61
|
+
this.replace(html)
|
62
|
+
return this.triggerShowEventIfNeeded()
|
63
|
+
}
|
64
|
+
|
53
65
|
if (html) {
|
54
66
|
this.replace(html)
|
55
67
|
}
|
@@ -57,9 +69,7 @@ export default class Modal {
|
|
57
69
|
this.modal.style.display = 'block'
|
58
70
|
setTimeout(() => {
|
59
71
|
this.modal.classList.add('js-active')
|
60
|
-
|
61
|
-
$(this.dom).trigger('beyond.modal.show')
|
62
|
-
}
|
72
|
+
this.triggerShowEventIfNeeded()
|
63
73
|
}, 50)
|
64
74
|
}
|
65
75
|
|
data/src/sass/_main.scss
CHANGED
@@ -131,6 +131,16 @@ $color-active: #5469d4;
|
|
131
131
|
text-align: center !important;
|
132
132
|
}
|
133
133
|
|
134
|
+
.float-left {
|
135
|
+
float: left !important;
|
136
|
+
}
|
137
|
+
.float-right {
|
138
|
+
float: right !important;
|
139
|
+
}
|
140
|
+
.float-none {
|
141
|
+
float: none !important;
|
142
|
+
}
|
143
|
+
|
134
144
|
.sr-only {
|
135
145
|
position: absolute;
|
136
146
|
width: 1px;
|
@@ -90,27 +90,27 @@
|
|
90
90
|
|
91
91
|
.#{$classname} {
|
92
92
|
@if $side == '' {
|
93
|
-
#{$prop}: $space;
|
93
|
+
#{$prop}: $space !important;
|
94
94
|
}
|
95
95
|
@else if $side == 't' {
|
96
|
-
#{$prop}-top: $space;
|
96
|
+
#{$prop}-top: $space !important;
|
97
97
|
}
|
98
98
|
@else if $side == 'b' {
|
99
|
-
#{$prop}-bottom: $space;
|
99
|
+
#{$prop}-bottom: $space !important;
|
100
100
|
}
|
101
101
|
@else if $side == 'l' {
|
102
|
-
#{$prop}-left: $space;
|
102
|
+
#{$prop}-left: $space !important;
|
103
103
|
}
|
104
104
|
@else if $side == 'r' {
|
105
|
-
#{$prop}-right: $space;
|
105
|
+
#{$prop}-right: $space !important;
|
106
106
|
}
|
107
107
|
@else if $side == 'x' {
|
108
|
-
#{$prop}-left: $space;
|
109
|
-
#{$prop}-right: $space;
|
108
|
+
#{$prop}-left: $space !important;
|
109
|
+
#{$prop}-right: $space !important;
|
110
110
|
}
|
111
111
|
@else if $side == 'y' {
|
112
|
-
#{$prop}-top: $space;
|
113
|
-
#{$prop}-bottom: $space;
|
112
|
+
#{$prop}-top: $space !important;
|
113
|
+
#{$prop}-bottom: $space !important;
|
114
114
|
}
|
115
115
|
@else {
|
116
116
|
@error "Unknown side #{$side}.";
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: beyond-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.225
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- kmsheng
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-
|
12
|
+
date: 2020-10-08 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sassc
|