beyond-rails 0.0.189 → 0.0.190
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/src/js/components/Alert.js +1 -1
- data/src/js/components/Autocomplete.js +1 -1
- data/src/js/components/AutocompleteMenu.js +1 -1
- data/src/js/components/BarChart.js +452 -0
- data/src/js/components/Btn.js +1 -1
- data/src/js/components/Checkbox.js +1 -1
- data/src/js/components/DateInput.js +1 -1
- data/src/js/components/DateMenu.js +1 -1
- data/src/js/components/DateTimeRanger.js +1 -1
- data/src/js/components/Datepicker.js +1 -1
- data/src/js/components/DatepickerBtnArrow.js +1 -1
- data/src/js/components/Dropdown.js +1 -1
- data/src/js/components/LineChart.js +535 -0
- data/src/js/components/Menu.js +1 -1
- data/src/js/components/Modal.js +1 -1
- data/src/js/components/Navbar.js +1 -1
- data/src/js/components/Radio.js +1 -1
- data/src/js/components/SearchDropdown.js +1 -1
- data/src/js/components/Sidebar.js +1 -1
- data/src/js/components/Tabbox.js +1 -1
- data/src/js/components/TimeInput.js +1 -1
- data/src/js/components/TimeMenu.js +1 -1
- data/src/js/components/Timepicker.js +1 -1
- data/src/js/components/Toast.js +1 -1
- data/src/js/components/ToastItem.js +1 -1
- data/src/js/components/Tooltip.js +1 -1
- data/src/js/decorators/chartCommon.js +218 -0
- data/src/js/{utils → decorators}/supportDom.js +1 -1
- data/src/js/index.js +6 -2
- data/src/js/utils/index.js +10 -1
- data/src/js/utils/isDef.js +3 -0
- data/src/js/utils/isInt.js +3 -0
- data/src/js/utils/isUndef.js +3 -0
- data/src/sass/_beyond.scss +1 -0
- data/src/sass/components/_chart.scss +14 -0
- metadata +10 -3
data/src/js/components/Menu.js
CHANGED
data/src/js/components/Modal.js
CHANGED
data/src/js/components/Navbar.js
CHANGED
data/src/js/components/Radio.js
CHANGED
data/src/js/components/Tabbox.js
CHANGED
data/src/js/components/Toast.js
CHANGED
@@ -0,0 +1,218 @@
|
|
1
|
+
import isDef from '../utils/isDef'
|
2
|
+
import isUndef from '../utils/isUndef'
|
3
|
+
import { getDomPos, range, toPixel, isFunction } from '../utils'
|
4
|
+
|
5
|
+
export default function chartCommon(target) {
|
6
|
+
|
7
|
+
return class extends target {
|
8
|
+
|
9
|
+
init() {
|
10
|
+
this.layers = []
|
11
|
+
if (isFunction(super.init)) {
|
12
|
+
super.init()
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
get firstLayer() {
|
17
|
+
return this.layers[0]
|
18
|
+
}
|
19
|
+
|
20
|
+
addLayer() {
|
21
|
+
const { dom } = this
|
22
|
+
const canvas = document.createElement('canvas')
|
23
|
+
canvas.style.position = 'absolute'
|
24
|
+
canvas.style.top = 0
|
25
|
+
canvas.style.left = 0
|
26
|
+
canvas.style.right = 0
|
27
|
+
canvas.style.bottom = 0
|
28
|
+
const ctx = canvas.getContext('2d')
|
29
|
+
|
30
|
+
this.setCanvasSize(canvas)
|
31
|
+
this.layers.push({ canvas, ctx })
|
32
|
+
|
33
|
+
dom.style.position = 'relative'
|
34
|
+
dom.appendChild(canvas)
|
35
|
+
}
|
36
|
+
|
37
|
+
bindMedia() {
|
38
|
+
if (this.media) {
|
39
|
+
return
|
40
|
+
}
|
41
|
+
this.media = window.matchMedia(`(resolution: ${this.dpr}dppx)`)
|
42
|
+
this._handleDprChange = this.handleDprChange.bind(this)
|
43
|
+
this.media.addListener(this._handleDprChange)
|
44
|
+
}
|
45
|
+
|
46
|
+
clear() {
|
47
|
+
const { ctx } = this
|
48
|
+
ctx.fillStyle = this.bgColor
|
49
|
+
ctx.fillRect(0, 0, this.width, this.height)
|
50
|
+
}
|
51
|
+
|
52
|
+
fillCircle(ctx, x, y, radius, style, alpha) {
|
53
|
+
ctx.save()
|
54
|
+
ctx.beginPath()
|
55
|
+
ctx.arc(x, y, radius, 0, 2 * Math.PI)
|
56
|
+
ctx.fillStyle = style
|
57
|
+
ctx.globalAlpha = alpha || 1
|
58
|
+
ctx.fill()
|
59
|
+
ctx.closePath()
|
60
|
+
ctx.restore()
|
61
|
+
}
|
62
|
+
|
63
|
+
getAutoStep(firstValue, lastValue, pointsLength) {
|
64
|
+
return (lastValue - firstValue) / (pointsLength - 1)
|
65
|
+
}
|
66
|
+
|
67
|
+
getHighestCanvas() {
|
68
|
+
const { layers, canvas } = this
|
69
|
+
if (layers.length === 0) {
|
70
|
+
return canvas
|
71
|
+
}
|
72
|
+
return layers[layers.length - 1].canvas
|
73
|
+
}
|
74
|
+
|
75
|
+
// real position in window including scrolling distance
|
76
|
+
getMousePos(canvasMousePos) {
|
77
|
+
const domPos = getDomPos(this.dom)
|
78
|
+
return {
|
79
|
+
x: domPos.x + canvasMousePos.x,
|
80
|
+
y: domPos.y + canvasMousePos.y
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
getMousePosInCanvas(event) {
|
85
|
+
const rect = this.canvas.getBoundingClientRect()
|
86
|
+
return {
|
87
|
+
x: event.clientX - rect.left,
|
88
|
+
y: event.clientY - rect.top
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
getLengthTotalData(gap, gutter, values, measureLength, toLabel) {
|
93
|
+
|
94
|
+
const valueCount = values.length
|
95
|
+
const marked = {}
|
96
|
+
|
97
|
+
// mark the first and last
|
98
|
+
marked[0] = true
|
99
|
+
marked[valueCount - 1] = true
|
100
|
+
|
101
|
+
// Check whether a value can be marked next
|
102
|
+
// For example, gap is 2
|
103
|
+
//
|
104
|
+
// values: 1 2 3 4 5 6 7
|
105
|
+
// marked: v v
|
106
|
+
//
|
107
|
+
// 4 will only be marked because it has enough gap on left and right side.
|
108
|
+
const hasGap = index => {
|
109
|
+
return range(index - gap, index).every(i => isUndef(marked[i])) &&
|
110
|
+
range(index + 1, index + gap + 1).every(i => isUndef(marked[i]))
|
111
|
+
}
|
112
|
+
|
113
|
+
return values.reduce((res, value, i) => {
|
114
|
+
|
115
|
+
if (i === 0) {
|
116
|
+
const label = toLabel(value)
|
117
|
+
const length = measureLength(label)
|
118
|
+
const lengthTotal = res.lengthTotal + length + gutter
|
119
|
+
const rows = res.rows.slice()
|
120
|
+
rows.push({ label, length, value })
|
121
|
+
return { lengthTotal, rows }
|
122
|
+
}
|
123
|
+
if (i === (valueCount - 1)) {
|
124
|
+
const label = toLabel(value)
|
125
|
+
const length = measureLength(label)
|
126
|
+
const lengthTotal = res.lengthTotal + length
|
127
|
+
const rows = res.rows.slice()
|
128
|
+
rows.push({ label, length, value })
|
129
|
+
return { lengthTotal, rows }
|
130
|
+
}
|
131
|
+
if (hasGap(i)) {
|
132
|
+
const label = toLabel(value)
|
133
|
+
marked[i] = true
|
134
|
+
const length = measureLength(label)
|
135
|
+
const lengthTotal = res.lengthTotal + length + gutter
|
136
|
+
const rows = res.rows.slice()
|
137
|
+
rows.push({ label, length, value })
|
138
|
+
return { lengthTotal, rows }
|
139
|
+
}
|
140
|
+
return res
|
141
|
+
}, {
|
142
|
+
lengthTotal: 0,
|
143
|
+
rows: []
|
144
|
+
})
|
145
|
+
}
|
146
|
+
|
147
|
+
getStepStartEnd(step, firstValue, lastValue) {
|
148
|
+
|
149
|
+
const stepStart = parseInt(firstValue / step, 10) * step
|
150
|
+
let stepEnd = parseInt(lastValue / step, 10) * step
|
151
|
+
|
152
|
+
if (stepEnd < lastValue) {
|
153
|
+
stepEnd += step
|
154
|
+
}
|
155
|
+
return [stepStart, stepEnd]
|
156
|
+
}
|
157
|
+
|
158
|
+
raf(fn) {
|
159
|
+
if (isDef(window.requestAnimationFrame)) {
|
160
|
+
return window.requestAnimationFrame(fn)
|
161
|
+
}
|
162
|
+
return fn()
|
163
|
+
}
|
164
|
+
|
165
|
+
removeAllLayers() {
|
166
|
+
const { dom } = this
|
167
|
+
this.layers.forEach(layer => {
|
168
|
+
const { canvas } = layer
|
169
|
+
if (dom.contains(canvas)) {
|
170
|
+
dom.removeChild(canvas)
|
171
|
+
}
|
172
|
+
})
|
173
|
+
}
|
174
|
+
|
175
|
+
setCanvas() {
|
176
|
+
const canvas = document.createElement('canvas')
|
177
|
+
const ctx = canvas.getContext('2d')
|
178
|
+
|
179
|
+
this.canvas = canvas
|
180
|
+
this.ctx = ctx
|
181
|
+
this.setCanvasFontSize(this.canvas, this.fontSize)
|
182
|
+
this.setCanvasSize(canvas)
|
183
|
+
|
184
|
+
this.dom.appendChild(canvas)
|
185
|
+
}
|
186
|
+
|
187
|
+
setCanvasFontSize(canvas, fontSize) {
|
188
|
+
const ctx = canvas.getContext('2d')
|
189
|
+
const args = ctx.font.split(' ')
|
190
|
+
ctx.font = fontSize + 'px ' + args[args.length - 1]
|
191
|
+
}
|
192
|
+
|
193
|
+
setCanvasSize(canvas) {
|
194
|
+
const { dpr, width, height } = this
|
195
|
+
|
196
|
+
// https://coderwall.com/p/vmkk6a/how-to-make-the-canvas-not-look-like-crap-on-retina
|
197
|
+
canvas.width = width * dpr
|
198
|
+
canvas.height = height * dpr
|
199
|
+
canvas.style.width = toPixel(width)
|
200
|
+
canvas.style.height = toPixel(height)
|
201
|
+
canvas.getContext('2d').scale(dpr, dpr)
|
202
|
+
}
|
203
|
+
|
204
|
+
setDomWidthIfNeeded() {
|
205
|
+
if (isUndef(this.options.width)) {
|
206
|
+
this.width = this.dom.offsetWidth
|
207
|
+
}
|
208
|
+
}
|
209
|
+
|
210
|
+
setDpr() {
|
211
|
+
this.dpr = window.devicePixelRatio || 1
|
212
|
+
}
|
213
|
+
|
214
|
+
unbindMedia() {
|
215
|
+
this.media.removeListener(this._handleDprChange)
|
216
|
+
}
|
217
|
+
}
|
218
|
+
}
|
data/src/js/index.js
CHANGED
@@ -6,19 +6,21 @@ import './polyfills/nodeRemove'
|
|
6
6
|
import './polyfills/elementDataset'
|
7
7
|
import Alert from './components/Alert'
|
8
8
|
import Autocomplete from './components/Autocomplete'
|
9
|
+
import BarChart from './components/BarChart'
|
9
10
|
import Btn from './components/Btn'
|
10
11
|
import Checkbox from './components/Checkbox'
|
11
12
|
import DateTimeRanger from './components/DateTimeRanger'
|
12
13
|
import Datepicker from './components/Datepicker'
|
13
14
|
import Dropdown from './components/Dropdown'
|
15
|
+
import LineChart from './components/LineChart'
|
14
16
|
import Menu from './components/Menu'
|
15
17
|
import Modal from './components/Modal'
|
16
18
|
import Navbar from './components/Navbar'
|
17
19
|
import Radio from './components/Radio'
|
18
20
|
import SearchDropdown from './components/SearchDropdown'
|
19
21
|
import Sidebar from './components/Sidebar'
|
20
|
-
import Timepicker from './components/Timepicker'
|
21
22
|
import Tabbox from './components/Tabbox'
|
23
|
+
import Timepicker from './components/Timepicker'
|
22
24
|
import Toast from './components/Toast'
|
23
25
|
import Tooltip from './components/Tooltip'
|
24
26
|
import bind from './utils/bind'
|
@@ -28,19 +30,21 @@ import unbindAll from './utils/unbindAll'
|
|
28
30
|
export {
|
29
31
|
Alert,
|
30
32
|
Autocomplete,
|
33
|
+
BarChart,
|
31
34
|
Btn,
|
32
35
|
Checkbox,
|
33
36
|
DateTimeRanger,
|
34
37
|
Datepicker,
|
35
38
|
Dropdown,
|
39
|
+
LineChart,
|
36
40
|
Menu,
|
37
41
|
Modal,
|
38
42
|
Navbar,
|
39
43
|
Radio,
|
40
44
|
SearchDropdown,
|
41
45
|
Sidebar,
|
42
|
-
Timepicker,
|
43
46
|
Tabbox,
|
47
|
+
Timepicker,
|
44
48
|
Toast,
|
45
49
|
Tooltip,
|
46
50
|
bind,
|
data/src/js/utils/index.js
CHANGED
@@ -33,6 +33,10 @@ import isFunction from 'lodash.isfunction'
|
|
33
33
|
import noop from 'lodash.noop'
|
34
34
|
import range from 'lodash.range'
|
35
35
|
import throttle from 'lodash.throttle'
|
36
|
+
import uniqBy from 'lodash.uniqby'
|
37
|
+
import sortBy from 'lodash.sortby'
|
38
|
+
|
39
|
+
import mem from 'mem'
|
36
40
|
|
37
41
|
export {
|
38
42
|
// @superlanding
|
@@ -69,5 +73,10 @@ export {
|
|
69
73
|
isFunction,
|
70
74
|
noop,
|
71
75
|
range,
|
72
|
-
throttle
|
76
|
+
throttle,
|
77
|
+
uniqBy,
|
78
|
+
sortBy,
|
79
|
+
|
80
|
+
// others
|
81
|
+
mem
|
73
82
|
}
|
data/src/sass/_beyond.scss
CHANGED
@@ -0,0 +1,14 @@
|
|
1
|
+
.chart {
|
2
|
+
font-family: Roboto;
|
3
|
+
}
|
4
|
+
|
5
|
+
.chart-menu {
|
6
|
+
display: none;
|
7
|
+
position: absolute;
|
8
|
+
background-color: #fff;
|
9
|
+
padding: 10px 13px;
|
10
|
+
box-shadow: 4px 4px 15px 1px rgba(68, 68, 72, .12);
|
11
|
+
color: #3c4257;
|
12
|
+
z-index: 1;
|
13
|
+
border: 1px solid #e8e8e8;
|
14
|
+
}
|
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.190
|
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-09-
|
12
|
+
date: 2020-09-08 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sassc
|
@@ -113,6 +113,7 @@ files:
|
|
113
113
|
- src/js/components/Alert.js
|
114
114
|
- src/js/components/Autocomplete.js
|
115
115
|
- src/js/components/AutocompleteMenu.js
|
116
|
+
- src/js/components/BarChart.js
|
116
117
|
- src/js/components/Btn.js
|
117
118
|
- src/js/components/Checkbox.js
|
118
119
|
- src/js/components/DateInput.js
|
@@ -121,6 +122,7 @@ files:
|
|
121
122
|
- src/js/components/Datepicker.js
|
122
123
|
- src/js/components/DatepickerBtnArrow.js
|
123
124
|
- src/js/components/Dropdown.js
|
125
|
+
- src/js/components/LineChart.js
|
124
126
|
- src/js/components/Menu.js
|
125
127
|
- src/js/components/Modal.js
|
126
128
|
- src/js/components/Navbar.js
|
@@ -136,6 +138,8 @@ files:
|
|
136
138
|
- src/js/components/Tooltip.js
|
137
139
|
- src/js/consts/createdComponents.js
|
138
140
|
- src/js/consts/index.js
|
141
|
+
- src/js/decorators/chartCommon.js
|
142
|
+
- src/js/decorators/supportDom.js
|
139
143
|
- src/js/index.js
|
140
144
|
- src/js/jquery/bindAlertFn.js
|
141
145
|
- src/js/jquery/bindAutocompleteFn.js
|
@@ -172,10 +176,12 @@ files:
|
|
172
176
|
- src/js/utils/getFloatedTargetPos.js
|
173
177
|
- src/js/utils/getKey.js
|
174
178
|
- src/js/utils/index.js
|
179
|
+
- src/js/utils/isDef.js
|
180
|
+
- src/js/utils/isInt.js
|
175
181
|
- src/js/utils/isTouchDevice.js
|
182
|
+
- src/js/utils/isUndef.js
|
176
183
|
- src/js/utils/msToS.js
|
177
184
|
- src/js/utils/promisify.js
|
178
|
-
- src/js/utils/supportDom.js
|
179
185
|
- src/js/utils/unbindAll.js
|
180
186
|
- src/sass/_beyond-sprockets.scss
|
181
187
|
- src/sass/_beyond.scss
|
@@ -193,6 +199,7 @@ files:
|
|
193
199
|
- src/sass/components/_btn-group.scss
|
194
200
|
- src/sass/components/_btn.scss
|
195
201
|
- src/sass/components/_card.scss
|
202
|
+
- src/sass/components/_chart.scss
|
196
203
|
- src/sass/components/_checkbox.scss
|
197
204
|
- src/sass/components/_date-input.scss
|
198
205
|
- src/sass/components/_date-menu.scss
|