beyond-rails 0.0.189 → 0.0.194

data/src/js/components/Menu.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Menu {

data/src/js/components/Modal.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import { noop } from '../utils'
 
 let globalModalId = 0

data/src/js/components/Navbar.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Navbar {

data/src/js/components/Radio.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Radio {

data/src/js/components/SearchDropdown.js

@@ -1,5 +1,5 @@
 import getFloatedTargetPos from '../utils/getFloatedTargetPos'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import getKey from '../utils/getKey'
 import { debounce, noop, toPixel, throttle } from '../utils'
 

data/src/js/components/Sidebar.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class Sidebar {

data/src/js/components/Tabbox.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import Dropdown from './Dropdown'
 import { noop } from '../utils'
 

data/src/js/components/TimeInput.js

@@ -1,5 +1,5 @@
 import { DEFAULT_TIMEZONE } from '../consts'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import isTouchDevice from '../utils/isTouchDevice'
 import { format } from '../utils'
 

data/src/js/components/TimeMenu.js

@@ -1,5 +1,5 @@
 import getFloatedTargetPos from '../utils/getFloatedTargetPos'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import { getHours, getMinutes, range, toPixel } from '../utils'
 
 @supportDom

data/src/js/components/Timepicker.js

@@ -1,7 +1,7 @@
 import TimeInput from './TimeInput'
 import TimeMenu from './TimeMenu'
 import { DEFAULT_TIMEZONE } from '../consts'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import {
   dateToTimestamp,
   noop,

data/src/js/components/Toast.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import ToastItem from './ToastItem'
 
 @supportDom

data/src/js/components/ToastItem.js

@@ -1,4 +1,4 @@
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 
 @supportDom
 export default class ToastItem {

data/src/js/components/Tooltip.js

@@ -1,5 +1,5 @@
 import getFloatedTargetPos from '../utils/getFloatedTargetPos'
-import supportDom from '../utils/supportDom'
+import supportDom from '../decorators/supportDom'
 import { toPixel } from '../utils'
 
 const TOOLTIP_PLACEMENTS = ['top', 'bottom', 'left', 'right']

data/src/js/decorators/chartCommon.js

@@ -0,0 +1,222 @@
+import isDef from '../utils/isDef'
+import isUndef from '../utils/isUndef'
+import { getDomPos, range, toPixel, isFunction } from '../utils'
+
+export default function chartCommon(target) {
+
+  return class extends target {
+
+    init() {
+      this.layers = []
+      if (isFunction(super.init)) {
+        super.init()
+      }
+    }
+
+    get firstLayer() {
+      return this.layers[0]
+    }
+
+    addLayer() {
+      const { dom } = this
+      const canvas = document.createElement('canvas')
+      canvas.style.position = 'absolute'
+      canvas.style.top = 0
+      canvas.style.left = 0
+      canvas.style.right = 0
+      canvas.style.bottom = 0
+      const ctx = canvas.getContext('2d')
+
+      this.setCanvasSize(canvas)
+      this.layers.push({ canvas, ctx })
+
+      dom.style.position = 'relative'
+      dom.appendChild(canvas)
+    }
+
+    bindMedia() {
+      if (this.media) {
+        return
+      }
+      this.media = window.matchMedia(`(resolution: ${this.dpr}dppx)`)
+      this._handleDprChange = this.handleDprChange.bind(this)
+      this.media.addListener(this._handleDprChange)
+    }
+
+    clear() {
+      const { ctx } = this
+      ctx.fillStyle = this.bgColor
+      ctx.fillRect(0, 0, this.width, this.height)
+    }
+
+    fillCircle(ctx, x, y, radius, style, alpha) {
+      ctx.save()
+      ctx.beginPath()
+      ctx.arc(x, y, radius, 0, 2 * Math.PI)
+      ctx.fillStyle = style
+      ctx.globalAlpha = alpha || 1
+      ctx.fill()
+      ctx.closePath()
+      ctx.restore()
+    }
+
+    getAutoStep(firstValue, lastValue, pointsLength) {
+      return (lastValue - firstValue) / (pointsLength - 1)
+    }
+
+    getHighestCanvas() {
+      const { layers, canvas } = this
+      if (layers.length === 0) {
+        return canvas
+      }
+      return layers[layers.length - 1].canvas
+    }
+
+    // real position in window including scrolling distance
+    getMousePos(canvasMousePos) {
+      const domPos = getDomPos(this.dom)
+      return {
+        x: domPos.x + canvasMousePos.x,
+        y: domPos.y + canvasMousePos.y
+      }
+    }
+
+    getMousePosInCanvas(event) {
+      const rect = this.canvas.getBoundingClientRect()
+      return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      }
+    }
+
+    getLengthTotalData(gap, gutter, values, measureLength, toLabel) {
+
+      const valueCount = values.length
+      const marked = {}
+
+      // mark the first and last
+      marked[0] = true
+      marked[valueCount - 1] = true
+
+      // Check whether a value can be marked next
+      // For example, gap is 2
+      //
+      // values: 1 2 3 4 5 6 7
+      // marked: v           v
+      //
+      // 4 will only be marked because it has enough gap on left and right side.
+      const hasGap = index => {
+        return range(index - gap, index).every(i => isUndef(marked[i])) &&
+          range(index + 1, index + gap + 1).every(i => isUndef(marked[i]))
+      }
+
+      return values.reduce((res, value, i) => {
+
+        if (i === 0) {
+          const label = toLabel(value)
+          const length = measureLength(label)
+          const lengthTotal = res.lengthTotal + length + gutter
+          const rows = res.rows.slice()
+          rows.push({ label, length, value })
+          return { lengthTotal, rows }
+        }
+        if (i === (valueCount - 1)) {
+          const label = toLabel(value)
+          const length = measureLength(label)
+          const lengthTotal = res.lengthTotal + length
+          const rows = res.rows.slice()
+          rows.push({ label, length, value })
+          return { lengthTotal, rows }
+        }
+        if (hasGap(i)) {
+          const label = toLabel(value)
+          marked[i] = true
+          const length = measureLength(label)
+          const lengthTotal = res.lengthTotal + length + gutter
+          const rows = res.rows.slice()
+          rows.push({ label, length, value })
+          return { lengthTotal, rows }
+        }
+        return res
+      }, {
+        lengthTotal: 0,
+        rows: []
+      })
+    }
+
+    getStepStartEnd(step, firstValue, lastValue) {
+
+      const stepStart = parseInt(firstValue / step, 10) * step
+      let stepEnd = parseInt(lastValue / step, 10) * step
+
+      if (stepEnd < lastValue) {
+        stepEnd += step
+      }
+      return [stepStart, stepEnd]
+    }
+
+    measureWidth(value) {
+      return this.ctx.measureText(value).width
+    }
+
+    raf(fn) {
+      if (isDef(window.requestAnimationFrame)) {
+        return window.requestAnimationFrame(fn)
+      }
+      return fn()
+    }
+
+    removeAllLayers() {
+      const { dom } = this
+      this.layers.forEach(layer => {
+        const { canvas } = layer
+        if (dom.contains(canvas)) {
+          dom.removeChild(canvas)
+        }
+      })
+    }
+
+    setCanvas() {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+
+      this.canvas = canvas
+      this.ctx = ctx
+      this.setCanvasFontSize(this.canvas, this.fontSize)
+      this.setCanvasSize(canvas)
+
+      this.dom.appendChild(canvas)
+    }
+
+    setCanvasFontSize(canvas, fontSize) {
+      const ctx = canvas.getContext('2d')
+      const args = ctx.font.split(' ')
+      ctx.font = fontSize + 'px ' + args[args.length - 1]
+    }
+
+    setCanvasSize(canvas) {
+      const { dpr, width, height } = this
+
+      // https://coderwall.com/p/vmkk6a/how-to-make-the-canvas-not-look-like-crap-on-retina
+      canvas.width = width * dpr
+      canvas.height = height * dpr
+      canvas.style.width = toPixel(width)
+      canvas.style.height = toPixel(height)
+      canvas.getContext('2d').scale(dpr, dpr)
+    }
+
+    setDomWidthIfNeeded() {
+      if (isUndef(this.options.width)) {
+        this.width = this.dom.offsetWidth
+      }
+    }
+
+    setDpr() {
+      this.dpr = window.devicePixelRatio || 1
+    }
+
+    unbindMedia() {
+      this.media.removeListener(this._handleDprChange)
+    }
+  }
+}

data/src/js/{utils → decorators}/supportDom.js

@@ -1,4 +1,4 @@
-import { isFunction } from './index'
+import { isFunction } from '../utils'
 import createdComponents from '../consts/createdComponents'
 
 export default function supportDom(target) {

data/src/js/index.js

@@ -6,19 +6,21 @@ import './polyfills/nodeRemove'
 import './polyfills/elementDataset'
 import Alert from './components/Alert'
 import Autocomplete from './components/Autocomplete'
+import BarChart from './components/BarChart'
 import Btn from './components/Btn'
 import Checkbox from './components/Checkbox'
 import DateTimeRanger from './components/DateTimeRanger'
 import Datepicker from './components/Datepicker'
 import Dropdown from './components/Dropdown'
+import LineChart from './components/LineChart'
 import Menu from './components/Menu'
 import Modal from './components/Modal'
 import Navbar from './components/Navbar'
 import Radio from './components/Radio'
 import SearchDropdown from './components/SearchDropdown'
 import Sidebar from './components/Sidebar'
-import Timepicker from './components/Timepicker'
 import Tabbox from './components/Tabbox'
+import Timepicker from './components/Timepicker'
 import Toast from './components/Toast'
 import Tooltip from './components/Tooltip'
 import bind from './utils/bind'
@@ -28,19 +30,21 @@ import unbindAll from './utils/unbindAll'
 export {
   Alert,
   Autocomplete,
+  BarChart,
   Btn,
   Checkbox,
   DateTimeRanger,
   Datepicker,
   Dropdown,
+  LineChart,
   Menu,
   Modal,
   Navbar,
   Radio,
   SearchDropdown,
   Sidebar,
-  Timepicker,
   Tabbox,
+  Timepicker,
   Toast,
   Tooltip,
   bind,

data/src/js/utils/index.js

@@ -33,6 +33,10 @@ import isFunction from 'lodash.isfunction'
 import noop from 'lodash.noop'
 import range from 'lodash.range'
 import throttle from 'lodash.throttle'
+import uniqBy from 'lodash.uniqby'
+import sortBy from 'lodash.sortby'
+
+import mem from 'mem'
 
 export {
   // @superlanding
@@ -69,5 +73,10 @@ export {
   isFunction,
   noop,
   range,
-  throttle
+  throttle,
+  uniqBy,
+  sortBy,
+
+  // others
+  mem
 }

data/src/js/utils/isDef.js

@@ -0,0 +1,3 @@
+export default function isDef(value) {
+  return (typeof value !== 'undefined')
+}

data/src/js/utils/isInt.js

@@ -0,0 +1,3 @@
+export default function isInt(value) {
+  return (value % 1) === 0
+}

data/src/js/utils/isUndef.js

@@ -0,0 +1,3 @@
+export default function isUndef(value) {
+  return (typeof value === 'undefined')
+}

data/src/sass/_beyond.scss

@@ -50,3 +50,4 @@
 @import './components/_tooltip';
 @import './components/_switch';
 @import './components/_mega-menu';
+@import './components/_chart';

data/src/sass/components/_breadcrumb.scss

@@ -4,17 +4,14 @@
   padding: .75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
-  .breadcrumb-item + .breadcrumb-item::before {
+  li + li::before {
     display: inline-block;
     padding-right: .7rem;
     padding-left: .7rem;
-    color: #6c757d;
+    color: $text-color-strong;
     content: '/';
   }
-  .breadcrumb-item.active {
-    color: #6c757d;
-  }
-  .breadcrumb-item a {
-    color: #000;
+  li:last-child {
+    color: $text-color-strong;
   }
 }

data/src/sass/components/_chart.scss

@@ -0,0 +1,14 @@
+.chart {
+  font-family: Roboto;
+}
+
+.chart-menu {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  padding: 10px 13px;
+  box-shadow: 4px 4px 15px 1px rgba(68,  68, 72, .12);
+  color: #3c4257;
+  z-index: 1;
+  border: 1px solid #e8e8e8;
+}