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.
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
 
3
3
  @supportDom
4
4
  export default class Menu {
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
  import { noop } from '../utils'
3
3
 
4
4
  let globalModalId = 0
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
 
3
3
  @supportDom
4
4
  export default class Navbar {
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
 
3
3
  @supportDom
4
4
  export default class Radio {
@@ -1,5 +1,5 @@
1
1
  import getFloatedTargetPos from '../utils/getFloatedTargetPos'
2
- import supportDom from '../utils/supportDom'
2
+ import supportDom from '../decorators/supportDom'
3
3
  import getKey from '../utils/getKey'
4
4
  import { debounce, noop, toPixel, throttle } from '../utils'
5
5
 
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
 
3
3
  @supportDom
4
4
  export default class Sidebar {
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
  import Dropdown from './Dropdown'
3
3
  import { noop } from '../utils'
4
4
 
@@ -1,5 +1,5 @@
1
1
  import { DEFAULT_TIMEZONE } from '../consts'
2
- import supportDom from '../utils/supportDom'
2
+ import supportDom from '../decorators/supportDom'
3
3
  import isTouchDevice from '../utils/isTouchDevice'
4
4
  import { format } from '../utils'
5
5
 
@@ -1,5 +1,5 @@
1
1
  import getFloatedTargetPos from '../utils/getFloatedTargetPos'
2
- import supportDom from '../utils/supportDom'
2
+ import supportDom from '../decorators/supportDom'
3
3
  import { getHours, getMinutes, range, toPixel } from '../utils'
4
4
 
5
5
  @supportDom
@@ -1,7 +1,7 @@
1
1
  import TimeInput from './TimeInput'
2
2
  import TimeMenu from './TimeMenu'
3
3
  import { DEFAULT_TIMEZONE } from '../consts'
4
- import supportDom from '../utils/supportDom'
4
+ import supportDom from '../decorators/supportDom'
5
5
  import {
6
6
  dateToTimestamp,
7
7
  noop,
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
  import ToastItem from './ToastItem'
3
3
 
4
4
  @supportDom
@@ -1,4 +1,4 @@
1
- import supportDom from '../utils/supportDom'
1
+ import supportDom from '../decorators/supportDom'
2
2
 
3
3
  @supportDom
4
4
  export default class ToastItem {
@@ -1,5 +1,5 @@
1
1
  import getFloatedTargetPos from '../utils/getFloatedTargetPos'
2
- import supportDom from '../utils/supportDom'
2
+ import supportDom from '../decorators/supportDom'
3
3
  import { toPixel } from '../utils'
4
4
 
5
5
  const TOOLTIP_PLACEMENTS = ['top', 'bottom', 'left', 'right']
@@ -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
+ }
@@ -1,4 +1,4 @@
1
- import { isFunction } from './index'
1
+ import { isFunction } from '../utils'
2
2
  import createdComponents from '../consts/createdComponents'
3
3
 
4
4
  export default function supportDom(target) {
@@ -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,
@@ -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
  }
@@ -0,0 +1,3 @@
1
+ export default function isDef(value) {
2
+ return (typeof value !== 'undefined')
3
+ }
@@ -0,0 +1,3 @@
1
+ export default function isInt(value) {
2
+ return (value % 1) === 0
3
+ }
@@ -0,0 +1,3 @@
1
+ export default function isUndef(value) {
2
+ return (typeof value === 'undefined')
3
+ }
@@ -50,3 +50,4 @@
50
50
  @import './components/_tooltip';
51
51
  @import './components/_switch';
52
52
  @import './components/_mega-menu';
53
+ @import './components/_chart';
@@ -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.189
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-01 00:00:00.000000000 Z
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