beyond-rails 0.0.240 → 0.0.246

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27fa06609359c2b1ee1113771ce48fa3c2693f925e1b3f909e85d18c08766f08
-  data.tar.gz: 9ac7de120419f1aa97f874876694fe9ace1ec2239657199afff0d32980c835d3
+  metadata.gz: ebefc15d0cab8d8554a18f030ae3041af23f3aab56633bd12aa9e80f823454d9
+  data.tar.gz: a54e416999fce854ecdcc3194d3e7226475f56f8d3ae63d59d638a1651eb8751
 SHA512:
-  metadata.gz: 1a54840c057c320dce8f19ebefb6388877e20bcebdf728a50cc5b8193822cb2a948e55423ed3802d20f1fa6628486947c79c847ea63a5637462b04a1400633ef
-  data.tar.gz: 399fd279bfc53c652babd56f10e481ce33bc994df4391588f26729825b971923ce51186ffe64e48238b3135e834b58131e0fd742ab1bad49107a0397f470339a
+  metadata.gz: acb1c4dba756a4d2fa6a0ca378c02e52d2ffb7703bc5d13d1ff298e9604e76250c7124066918e7b45809355f358d100f2b8a293be81292ec00579d93a91433f9
+  data.tar.gz: 78dc63e30de5eb027bba31a7cbdefe1c9737774f3090dc69a3f2e243a3d2ffd9a2bb17a33248e6f1d5c5928b5558f50629d460fac15e5eef96d2a4bfb8b66604

data/src/js/components/BarChart.js

@@ -4,12 +4,7 @@ import isDef from '../utils/isDef'
 import isUndef from '../utils/isUndef'
 import isInt from '../utils/isInt'
 import { mem, range, sortBy, throttle, uniqBy } from '../utils'
-
-const defaultBarStyles = [
-  '#5469d4',
-  '#7c54d4',
-  '#a254d4'
-]
+import { DEFAULT_CHART_STYLES } from '../consts'
 
 @supportDom
 @chartCommon
@@ -35,8 +30,8 @@ export default class BarChart {
     this.yLabelMargin = isDef(options.yLanelMargin) ? options.yLabelMargin : 14
 
     this.fontSize = options.fontSize || 12
-    this.bgColor = options.bgColor || '#fff'
-    this.barStyles = options.barStyles || defaultBarStyles
+    this.bg = options.bg || '#fff'
+    this.barStyles = options.barStyles || DEFAULT_CHART_STYLES
 
     this.yLabelRows = []
     this.barPosMap = new Map()

data/src/js/components/LineChart.js

@@ -3,6 +3,7 @@ import chartCommon from '../decorators/chartCommon'
 import isDef from '../utils/isDef'
 import isUndef from '../utils/isUndef'
 import { mem, range, sortBy, throttle, uniqBy } from '../utils'
+import { DEFAULT_CHART_STYLES } from '../consts'
 
 /**
  * -------------------------------------------------------------------------------------------------
@@ -27,11 +28,6 @@ import { mem, range, sortBy, throttle, uniqBy } from '../utils'
  *                                            v                                                     |
  * --------------------------------------------------------------------------------------------------
  **/
-const defaultLineStyles = [
-  '#5469d4',
-  '#7c54d4',
-  '#a254d4'
-]
 
 @supportDom
 @chartCommon
@@ -56,16 +52,15 @@ export default class LineChart {
     this.xLabelMargin = isDef(options.xLabelMargin) ? options.xLabelMargin : 10
     this.yLabelMargin = isDef(options.yLanelMargin) ? options.yLabelMargin : 10
 
-    this.lineStyles = options.lineStyles || defaultLineStyles
+    this.lineStyles = options.lineStyles || DEFAULT_CHART_STYLES
 
-    this.bgColor = options.bgColor || '#fff'
+    this.bg = options.bg || '#fff'
     this.fontSize = options.fontSize || 12
 
     this.xStep = options.xStep
     this.yStep = options.yStep
 
     this.lineLabels = options.lineLabels || []
-    this.lineLabelMargin = isDef(options.lineLabelMargin) ? options.lineLabelMargin : 20
 
     this.pointPosMap = new Map()
     this.xLabelRows = []
@@ -78,6 +73,7 @@ export default class LineChart {
     this.setDpr()
     this.setDomSizeIfNeeded()
     this.setCanvas()
+    this.setLabelBox()
     this.clear()
     this.bindMedia()
     this.bindPointMouseOver()
@@ -93,8 +89,7 @@ export default class LineChart {
   }
 
   get contentHeight() {
-    return this.height - (this.yPadding * 2) - this.xLabelMargin -
-      this.xLabelHeight - this.lineLabelBoxHeight
+    return this.height - (this.yPadding * 2) - this.xLabelMargin - this.xLabelHeight
   }
 
   get firstX() {
@@ -115,17 +110,6 @@ export default class LineChart {
     return yLabelRows[yLabelRows.length - 1].value
   }
 
-  get lineLabelHeight() {
-    return this.fontSize
-  }
-
-  get lineLabelBoxHeight() {
-    if (this.lineLabels.length > 0) {
-      return this.lineLabelMargin + this.lineLabelHeight
-    }
-    return 0
-  }
-
   get xAxisStart() {
     return this.xPadding + (this.xLabelWidth / 2)
   }
@@ -145,7 +129,7 @@ export default class LineChart {
   }
 
   get yAxisStart() {
-    return this.height - this.yPadding - this.lineLabelBoxHeight -
+    return this.height - this.yPadding -
       this.xLabelHeight - this.xLabelMargin + (this.yLabelHeight / 2)
   }
 
@@ -185,7 +169,6 @@ export default class LineChart {
     this.drawYAxis()
     this.drawBgLines()
     this.drawLines()
-    this.drawLineLables()
   }
 
   drawBgLines() {
@@ -232,29 +215,6 @@ export default class LineChart {
     })
   }
 
-  drawLineLables() {
-    const { ctx, lineStyles, lineLabelHeight } = this
-    const rectSize = 7
-
-    const rectGutter = 7
-    const labelGutter = 14
-    const rectMargin = 1
-    const y = this.height - this.yPadding
-    let x = this.xPadding
-
-    this.lineLabels.forEach((name, i) => {
-      ctx.fillStyle = lineStyles[i] || '#000'
-      ctx.fillRect(x, y - lineLabelHeight + rectMargin, rectSize, rectSize)
-
-      x += (rectSize + rectGutter)
-      ctx.fillStyle = '#000'
-      ctx.textAlign = 'left'
-      ctx.textBaseline = 'top'
-      ctx.fillText(name, x, y - lineLabelHeight)
-      x += (ctx.measureText(name).width + labelGutter)
-    })
-  }
-
   clearVerticalLine() {
     const { ctx } = this.firstLayer
     ctx.clearRect(0, 0, this.width, this.height)
@@ -279,7 +239,7 @@ export default class LineChart {
   drawXAxis() {
     const { ctx, firstX, xLabelRows, xAxisStart, xRatio } = this
 
-    const y = this.height - this.yPadding - this.lineLabelBoxHeight
+    const y = this.height - this.yPadding
 
     const scaleMargin = 4
     const scaleSize = 4
@@ -538,7 +498,10 @@ export default class LineChart {
       return this.raf(() => this.clear())
     }
     this.setPointPos()
-    this.raf(() => this.draw())
+    this.raf(() => {
+      this.drawLabels(this.lineLabels, this.lineStyles)
+      this.draw()
+    })
   }
 
   setPointPos() {

data/src/js/components/MonthInput.js

@@ -0,0 +1,75 @@
+import { DEFAULT_TIMEZONE } from '../consts'
+import supportDom from '../decorators/supportDom'
+import isTouchDevice from '../utils/isTouchDevice'
+import { format } from '../utils'
+
+@supportDom
+export default class MonthInput {
+
+  constructor(dom, date, options = {}) {
+    this.active = false
+    this.danger = false
+    this.dom = dom
+    this.date = date
+    this.options = options
+    this.tz = options.tz || DEFAULT_TIMEZONE
+    this.datePattern = options.datePattern || 'yyyy/MM'
+    this.init()
+  }
+
+  focus() {
+    this.dom.focus()
+  }
+
+  init() {
+    this.initInput()
+    this.addEvents()
+  }
+
+  initInput() {
+    const { dom } = this
+    if (this.date) {
+      dom.value = this.format(this.date)
+    }
+    if (! dom.hasAttribute('placeholder')) {
+      dom.setAttribute('placeholder', this.datePattern.toUpperCase())
+    }
+    if (isTouchDevice()) {
+      dom.setAttribute('readonly', 'readonly')
+    }
+  }
+
+  format(date) {
+    return format(date, this.datePattern, { timezone: this.tz })
+  }
+
+  setDate(date) {
+    this.date = date
+    this.dom.value = date ? this.format(date) : ''
+  }
+
+  setActive(active) {
+    this.active = active
+    const func = active ? 'add' : 'remove'
+    this.dom.classList[func]('active')
+  }
+
+  setDanger(danger) {
+    this.danger = danger
+    const func = danger ? 'add' : 'remove'
+    this.dom.classList[func]('danger')
+  }
+
+  clearStatus() {
+    this.setActive(false)
+    this.setDanger(false)
+  }
+
+  addEvents() {
+    const { dom } = this
+    this.addEvent(dom, 'click', event => this.fire('click', event))
+    this.addEvent(dom, 'focus', event => this.fire('focus', event))
+    this.addEvent(dom, 'keyup', event => this.fire('keyup', event))
+    this.addEvent(dom, 'blur', event => this.fire('blur', event))
+  }
+}

data/src/js/components/MonthMenu.js

@@ -0,0 +1,262 @@
+import supportDom from '../decorators/supportDom'
+import getFloatedTargetPos from '../utils/getFloatedTargetPos'
+import isTouchDevice from '../utils/isTouchDevice'
+import { DEFAULT_TIMEZONE, DEFAULT_LOCALE } from '../consts'
+import {
+  chunk,
+  format,
+  range,
+  setYear,
+  setMonth,
+  getYear,
+  getMonth,
+  addYears,
+  toPixel,
+  subYears,
+  noop
+} from '../utils'
+
+@supportDom
+export default class MonthMenu {
+
+  constructor(options = {}) {
+    const { dom, date } = options
+    this.container = dom
+    this.date = date
+    this.menuDate = this.date || new Date()
+    this.options = options
+    this.tz = options.tz || DEFAULT_TIMEZONE
+    this.locale = options.locale || DEFAULT_LOCALE
+    this.change = options.change || noop
+    this.isVisible = false
+    this.loopIndex = 0
+    this.init()
+  }
+
+  init() {
+    this.addMenu()
+    this.addEvents()
+  }
+
+  renderTableContent() {
+    const { date, menuDate, locale } = this
+
+    const currentYear = date ? getYear(date) : null
+    const currentMonth = date ? getMonth(date) : null
+
+    return chunk(range(0, 12), 3)
+      .map(months => {
+        const tds = months.map(month => {
+          const d = setMonth(menuDate, month)
+          const text = format(d, 'MMM', { locale })
+
+          const isCurrentMonth = (currentYear === getYear(d)) && (currentMonth === getMonth(d))
+
+          const classname = isCurrentMonth ? 'cell selected-ex' : 'cell'
+          return `<td class="${classname}" data-month-td="${month}">${text}</td>`
+        }).join('')
+        return `<tr>${tds}</tr>`
+      })
+      .join('')
+  }
+
+  updateTableContent() {
+    this.table.innerHTML = this.renderTableContent()
+  }
+
+  addMenu() {
+    const { container } = this
+    const dom = document.createElement('div')
+    dom.classList.add('month-menu')
+
+    if (container) {
+      dom.classList.add('static')
+    }
+    const title = getYear(this.menuDate)
+    dom.innerHTML = `
+      <div class="month-menu-content">
+        <div class="month-menu-caption">
+          <button class="month-menu-caption-btn"
+                  type="button"
+                  data-prev-month-btn>
+            <i class="icon-chevron-left"></i>
+          </button>
+          <div data-month-menu-title>${title}</div>
+          <button class="month-menu-caption-btn"
+                  type="button"
+                  data-next-month-btn>
+            <i class="icon-chevron-right"></i>
+          </button>
+        </div>
+        <table class="month-menu-table"
+               data-month-table>
+          ${this.renderTableContent()}
+        </table>
+      </div>
+    `
+    if (container) {
+      container.appendChild(dom)
+    }
+    else {
+      document.body.appendChild(dom)
+    }
+    this.menuTitle = dom.querySelector('[data-month-menu-title]')
+    this.prevBtn = dom.querySelector('[data-prev-month-btn]')
+    this.nextBtn = dom.querySelector('[data-next-month-btn]')
+    this.table = dom.querySelector('[data-month-table]')
+    this.dom = dom
+  }
+
+  setTitle(date) {
+    this.menuTitle.textContent = getYear(date)
+  }
+
+  addYear(year = 1) {
+    this.menuDate = addYears(this.menuDate, year)
+    this.setTitle(this.menuDate)
+    this.updateTableContent()
+  }
+
+  addYearLoop() {
+    const duration = (this.loopIndex === 0) ? 500 : 100
+    this.addYearTimer = setTimeout(() => {
+      this.loopIndex += 1
+      const year = parseInt((this.loopIndex / 5) + 1, 10)
+      this.addYear(year)
+      this.addYearLoop()
+    }, duration)
+  }
+
+  clearAddYearLoop() {
+    clearTimeout(this.addYearTimer)
+    this.loopIndex = 0
+  }
+
+  subYear(year = 1) {
+    this.menuDate = subYears(this.menuDate, year)
+    this.setTitle(this.menuDate)
+    this.updateTableContent()
+  }
+
+  subYearLoop() {
+    const duration = (this.loopIndex === 0) ? 500 : 100
+    this.subYearTimer = setTimeout(() => {
+      this.loopIndex += 1
+      const year = parseInt((this.loopIndex / 5) + 1, 10)
+      const currentYear = getYear(this.menuDate)
+      if ((currentYear - year) > 0) {
+        this.subYear(year)
+        this.subYearLoop()
+      }
+    }, duration)
+  }
+
+  clearSubYearLoop() {
+    clearTimeout(this.subYearTimer)
+    this.loopIndex = 0
+  }
+
+  stop(event) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  addEvents() {
+    const isTouch = isTouchDevice()
+    const downEvent = isTouch ? 'touchstart' : 'mousedown'
+
+    this.addEvent(this.prevBtn, downEvent, event => {
+      this.stop(event)
+      const currentYear = getYear(this.menuDate)
+      if ((currentYear - 1) <= 0) {
+        return
+      }
+      this.subYear()
+      this.subYearLoop()
+    })
+
+    this.addEvent(this.nextBtn, 'click', event => event.stopPropagation())
+    this.addEvent(this.prevBtn, 'click', event => event.stopPropagation())
+
+    this.addEvent(this.nextBtn, downEvent, event => {
+      this.stop(event)
+      this.addYear()
+      this.addYearLoop()
+    })
+
+    const upEvent = isTouch ? 'touchend' : 'mouseup'
+    this.addEvent(this.prevBtn, upEvent, event => {
+      this.stop(event)
+      this.clearSubYearLoop()
+    })
+    this.addEvent(this.nextBtn, upEvent, event => {
+      this.stop(event)
+      this.clearAddYearLoop()
+    })
+
+    this.addEvent(this.table, 'click', event => {
+      this.stop(event)
+      const { target } = event
+      if ('monthTd' in target.dataset) {
+        const year = getYear(this.menuDate)
+        const month = parseInt(target.dataset.monthTd, 10)
+
+        if (! this.date) {
+          this.date = new Date(this.menuDate.getTime())
+        }
+
+        this.date = setYear(this.date, year)
+        this.date = setMonth(this.date, month)
+        this.updateTableContent()
+        this.emitChange()
+      }
+    })
+  }
+
+  setDate(date) {
+    this.date = date
+    this.menuDate = date
+    this.setTitle(date)
+    this.updateTableContent()
+  }
+
+  emitChange() {
+    this.change(this.date)
+  }
+
+  pos(src) {
+    const { dom } = this
+    const { pos } = getFloatedTargetPos({
+      src,
+      target: dom,
+      place: 'bottom',
+      align: 'left',
+      offset: 4
+    })
+    dom.style.left = toPixel(pos.left)
+    dom.style.top = toPixel(pos.top)
+  }
+
+  show(src) {
+    const { dom } = this
+    dom.style.display = 'block'
+    if (src) {
+      this.pos(src)
+    }
+    dom.style.opacity = 1
+    this.isVisible = true
+  }
+
+  hide() {
+    this.dom.style.display = 'none'
+    this.isVisible = false
+  }
+
+  destroy() {
+    this.menuTitle = null
+    this.prevBtn = null
+    this.nextBtn = null
+    this.table = null
+    this.dom.remove()
+  }
+}

data/src/js/components/Monthpicker.js

@@ -0,0 +1,90 @@
+import MonthInput from './MonthInput'
+import MonthMenu from './MonthMenu'
+import supportDom from '../decorators/supportDom'
+import { DEFAULT_TIMEZONE } from '../consts'
+import { noop, parse } from '../utils'
+
+@supportDom
+export default class Monthpicker {
+
+  constructor(dom, options = {}) {
+    this.dom = dom
+    this.tz = options.tz || DEFAULT_TIMEZONE
+    this.date = options.date
+    this.menuDate = this.date
+
+    this.options = options
+    this.backdropMode = options.backdropMode || 'auto'
+    this.change = options.change || noop
+    this.init()
+  }
+
+  init() {
+    const { dom } = this
+    this.monthInput = new MonthInput(
+      dom.querySelector('[data-month]'),
+      this.date,
+      this.options
+    )
+    this.monthMenu = new MonthMenu({
+      date: this.menuDate,
+      change: date => {
+        this.monthInput.setDate(date)
+        this.monthInput.clearStatus()
+        this.monthMenu.hide()
+      }
+    })
+    this.addEvents()
+  }
+
+  handleMonthInputFocus() {
+    const { monthInput } = this
+    monthInput.clearStatus()
+    monthInput.setActive(true)
+    this.monthMenu.show(this.dom)
+  }
+
+  handleMonthInputKeyUp(event) {
+    const { monthInput } = this
+    const { value } = event.target
+    const res = parse(value, monthInput.datePattern, this.date)
+
+    if (res.toString() === 'Invalid Date') {
+      monthInput.setDanger(true)
+      this.nextDate = null
+    }
+    else {
+      monthInput.setDanger(false)
+      this.nextDate = res
+    }
+  }
+
+  handleMonthInputBlur() {
+    if (this.nextDate) {
+      this.date = this.nextDate
+      this.menuDate = this.date
+      this.monthMenu.setDate(this.menuDate)
+      this.nextDate = null
+    }
+  }
+
+  addEvents() {
+    const { monthInput } = this
+    monthInput.on('focus', () => this.handleMonthInputFocus())
+    monthInput.on('click', event => event.stopPropagation())
+    monthInput.on('keyup', event => this.handleMonthInputKeyUp(event))
+    monthInput.on('blur', () => this.handleMonthInputBlur())
+
+    if (this.backdropMode === 'auto') {
+      this.addEvent(document, 'click', () => {
+        this.monthMenu.hide()
+        this.monthInput.clearStatus()
+      })
+    }
+  }
+
+  destroy() {
+    this.monthInput.destroy()
+    this.monthMenu.destroy()
+  }
+}

data/src/js/components/PieChart.js

@@ -0,0 +1,256 @@
+import supportDom from '../decorators/supportDom'
+import chartCommon from '../decorators/chartCommon'
+import isFn from '../utils/isFn'
+import isDef from '../utils/isDef'
+import isUndef from '../utils/isUndef'
+import { throttle } from '../utils'
+import { DEFAULT_CHART_STYLES } from '../consts'
+
+@supportDom
+@chartCommon
+export default class PieChart {
+
+  constructor(dom, options = {}) {
+    this.dom = dom
+    this.data = []
+    this.total = 0
+
+    this.options = options
+    this.height = options.height
+    this.width = options.width
+    this.padding = isDef(options.padding) ? options.padding : 30
+    this.styles = options.styles || DEFAULT_CHART_STYLES
+    this.bg = options.bg || '#fff'
+
+    this.init()
+  }
+
+  init() {
+    this.setDpr()
+    this.setDomSizeIfNeeded()
+    this.setCanvas()
+    this.setLabelBox()
+    this.clear()
+    this.bindMedia()
+    this.bindPointMouseOver()
+  }
+
+  get x() {
+    return this.width / 2
+  }
+
+  get y() {
+    return this.height / 2
+  }
+
+  get radius() {
+    return this.contentWidth / 2
+  }
+
+  get pieWidth() {
+    return this.radius * .3
+  }
+
+  get centerCircleRadius() {
+    return this.radius - this.pieWidth
+  }
+
+  get contentWidth() {
+    return this.width - (this.padding * 2)
+  }
+
+  get contentHeight() {
+    return this.height - (this.padding * 2)
+  }
+
+  bindPointMouseOver() {
+    if (isUndef(this.options.onPieMouseOver)) {
+      return
+    }
+    if (! ('onmousemove' in this.canvas)) {
+      return
+    }
+    this.addLayer()
+    const canvas = this.getHighestCanvas()
+    this.addEvent(canvas, 'mousemove', throttle(this.handleMouseMove.bind(this), 30))
+  }
+
+  draw() {
+    this.clear()
+    this.drawPie()
+  }
+
+  drawPie() {
+    const { x, y, radius, centerCircleRadius, ctx, total } = this
+
+    let distance = 0
+
+    this.data.forEach((row, i) => {
+
+      const ratio = (row.value / total)
+      const startAngle = Math.PI * (-.5 + 2 * distance)
+      const endAngle = Math.PI * (-.5 + 2 * (distance + ratio))
+
+      const options = {
+        style: this.styles[i]
+      }
+      this.fillArc(ctx, x, y, radius, startAngle, endAngle, options)
+      distance += ratio
+    })
+
+    this.fillCircle(ctx, x, y, centerCircleRadius, '#fff')
+  }
+
+  handleDprChange() {
+    this.setDpr()
+    this.refresh()
+  }
+
+  getPosAngle(x1, y1, x2, y2) {
+
+    let x = x2
+    let y = y2
+
+    if (x1 >= 0) {
+      x -= x1
+    }
+    if (y1 >= 0) {
+      y -= y1
+    }
+    if (x1 < 0) {
+      x += x1
+    }
+    if (y2 < 0) {
+      y += y2
+    }
+
+    let angle = Math.atan2(y, x) * 180 / Math.PI
+    if (angle < 0) {
+      angle = 180 + (180 + angle)
+    }
+    return (angle + 90) % 360
+  }
+
+  handleMouseMove(event) {
+
+    const { x, y } = this
+    const canvasMousePos = this.getMousePosInCanvas(event)
+    const mousePos = this.getMousePos(canvasMousePos)
+    const mouseX = canvasMousePos.x
+    const mouseY = canvasMousePos.y
+
+    const distanceToCenterPoint = Math.sqrt(Math.pow(mouseX - x, 2) +
+      Math.pow(mouseY - y, 2))
+
+    const inCenterCircle = distanceToCenterPoint <= this.centerCircleRadius
+
+    this.clearSliceGlow()
+
+    if (inCenterCircle) {
+      return this.options.onPieMouseOver(mousePos, null)
+    }
+
+    const inPieCircle = distanceToCenterPoint <= this.radius
+    if (! inPieCircle) {
+      return this.options.onPieMouseOver(mousePos, null)
+    }
+    const angle = this.getPosAngle(x, y, mouseX, mouseY)
+    const matchedRow = this.data.find(row => {
+      return (row.startAngle <= angle) && (angle <= row.endAngle)
+    })
+    if (matchedRow) {
+      this.drawSliceGlow(matchedRow)
+      this.options.onPieMouseOver(mousePos, matchedRow)
+    }
+  }
+
+  drawSliceGlow(row) {
+    const index = this.data.findIndex(r => r === row)
+    this.clearSliceGlow()
+    const { x, y, radius, centerCircleRadius } = this
+    const ctx = this.firstLayer.canvas.getContext('2d')
+
+    const delta = 90 * Math.PI / 180
+    const startAngle = (row.startAngle * Math.PI / 180) - delta
+    const endAngle = (row.endAngle * Math.PI / 180) - delta
+
+    const options = {
+      style: this.styles[index],
+      alpha: .3
+    }
+    const radiusDelta = (radius - centerCircleRadius) * .3
+    this.fillArc(ctx, x, y, radius + radiusDelta, startAngle, endAngle, options)
+    this.fillCircle(this.firstLayer.ctx, x, y, centerCircleRadius, '#fff')
+  }
+
+  clearSliceGlow() {
+    const ctx = this.firstLayer.canvas.getContext('2d')
+    ctx.clearRect(0, 0, this.width, this.height)
+  }
+
+  refresh() {
+    this.raf(() => {
+      this.clearCanvasSize(this.canvas)
+      this.layers.forEach(layer => this.clearCanvasSize(layer.canvas))
+      this.setDomSizeIfNeeded()
+      this.setCanvasSize(this.canvas)
+      this.layers.forEach(layer => this.setCanvasSize(layer.canvas))
+      this.draw()
+    })
+  }
+
+  setAngles(data) {
+    const { total } = this
+    let startAngle = 0
+    return data.map(row => {
+      const endAngle = startAngle + ((row.value / total) * 360)
+      const nextRow = Object.assign({}, row, { startAngle, endAngle })
+      startAngle = endAngle
+      return nextRow
+    })
+  }
+
+  handleLabelMouseOver(event, index) {
+    const row = this.data[index]
+    this.drawSliceGlow(row)
+
+    if (isFn(this.options.onLabelMouseOver)) {
+      const canvasMousePos = this.getMousePosInCanvas(event)
+      const mousePos = this.getMousePos(canvasMousePos)
+      this.options.onLabelMouseOver(mousePos, row)
+    }
+  }
+
+  handleLabelMouseLeave(event, index) {
+    this.clearSliceGlow()
+
+    if (isFn(this.options.onLabelMouseOver)) {
+      const canvasMousePos = this.getMousePosInCanvas(event)
+      const mousePos = this.getMousePos(canvasMousePos)
+      this.options.onLabelMouseOver(mousePos)
+    }
+  }
+
+  setData(arr) {
+    const data = arr || []
+    this.total = data.reduce((t, row) => t + row.value, 0)
+    this.data = this.setAngles(data)
+    this.raf(() => {
+      const labels = this.data.map(row => row.label)
+      this.drawLabels(labels, this.styles)
+      this.draw()
+    })
+  }
+
+  destroy() {
+    const { dom, canvas } = this
+
+    this.unbindMedia()
+    this.removeAllLayers()
+
+    if (dom.contains(canvas)) {
+      dom.removeChild(canvas)
+      dom.style.removeProperty('position')
+    }
+  }
+}

data/src/js/consts/index.js

@@ -3,3 +3,13 @@ import locale from 'date-fns/locale/zh-TW'
 export const DEFAULT_TIMEZONE = 'Asia/Taipei'
 
 export const DEFAULT_LOCALE = locale
+
+export const DEFAULT_CHART_STYLES = [
+  '#5469d4',
+  '#7c54d4',
+  '#a254d4',
+  '#c040a2',
+  '#ff5604',
+  '#0be4e3',
+  '#00d924'
+]

data/src/js/decorators/chartCommon.js

@@ -1,6 +1,8 @@
 import raf from '../utils/raf'
 import isUndef from '../utils/isUndef'
+import isFn from '../utils/isFn'
 import { getDomPos, range, toPixel, isFunction } from '../utils'
+import { DEFAULT_CHART_STYLES } from '../consts'
 
 export default function chartCommon(target) {
 
@@ -12,6 +14,7 @@ export default function chartCommon(target) {
     }
 
     init() {
+      this.offLabels = []
       this.layers = []
       if (isFunction(super.init)) {
         super.init()
@@ -50,10 +53,15 @@ export default function chartCommon(target) {
 
     clear() {
       const { ctx } = this
-      ctx.fillStyle = this.bgColor
+      ctx.fillStyle = this.bg
       ctx.fillRect(0, 0, this.width, this.height)
     }
 
+    getHypotenuse(x1, y1, x2, y2) {
+      return Math.sqrt(Math.pow(x2 - x1, 2) +
+        Math.pow(y2 - y1, 2))
+    }
+
     fillCircle(ctx, x, y, radius, style, alpha) {
       ctx.save()
       ctx.beginPath()
@@ -65,6 +73,18 @@ export default function chartCommon(target) {
       ctx.restore()
     }
 
+    fillArc(ctx, x, y, radius, startAngle = 0, endAngle = 2 * Math.PI, options = {}) {
+      ctx.save()
+      ctx.beginPath()
+      ctx.arc(x, y, radius, startAngle, endAngle)
+      ctx.fillStyle = options.style || '#555'
+      ctx.globalAlpha = options.alpha || 1
+      ctx.lineTo(x, y)
+      ctx.fill()
+      ctx.closePath()
+      ctx.restore()
+    }
+
     getAutoStep(firstValue, lastValue, pointsLength) {
       return (lastValue - firstValue) / (pointsLength - 1)
     }
@@ -186,6 +206,52 @@ export default function chartCommon(target) {
       this.dom.appendChild(canvas)
     }
 
+    setLabelBox() {
+      const box = document.createElement('div')
+      box.className = 'chart-box'
+      this.labelBox = box
+      this.dom.appendChild(box)
+    }
+
+    drawLabels(labels, styles = DEFAULT_CHART_STYLES) {
+      if (labels.length <= 0) {
+        return
+      }
+      const { labelBox, handleLabelMouseOver, handleLabelMouseLeave } = this
+      this.dom.style.backgroundColor = this.bg
+
+      this.offLabels.forEach(off => off())
+      labelBox.innerHTML = ''
+
+      this.offLabels.length = 0
+
+      labels.forEach((label, i) => {
+
+        const div = document.createElement('div')
+        div.className = 'chart-box-item'
+
+        const square = document.createElement('div')
+        square.className = 'chart-box-square'
+        square.style.backgroundColor = styles[i]
+        div.appendChild(square)
+
+        const span = document.createElement('span')
+        span.textContent = label
+        div.appendChild(span)
+
+        labelBox.appendChild(div)
+
+        if (isFn(handleLabelMouseOver)) {
+          const off = this.addEvent(div, 'mouseover', event => this.handleLabelMouseOver(event, i))
+          this.offLabels.push(off)
+        }
+        if (isFn(handleLabelMouseLeave)) {
+          const off = this.addEvent(div, 'mouseleave', event => this.handleLabelMouseLeave(event, i))
+          this.offLabels.push(off)
+        }
+      })
+    }
+
     setCanvasFontSize(canvas, fontSize) {
       const ctx = canvas.getContext('2d')
       const args = ctx.font.split(' ')

data/src/js/decorators/supportDom.js

@@ -25,7 +25,12 @@ export default function supportDom(target) {
 
     addEvent(dom, name, func) {
       dom.addEventListener(name, func)
-      this._listeners.push({ dom, name, func })
+      const listener = { dom, name, func }
+      this._listeners.push(listener)
+
+      return () => {
+        this._listeners = this._listeners.filter(l => l !== listener)
+      }
     }
 
     removeEvents() {

data/src/js/index.js

@@ -14,9 +14,12 @@ import DateTimeRanger from './components/DateTimeRanger'
 import Datepicker from './components/Datepicker'
 import Dropdown from './components/Dropdown'
 import LineChart from './components/LineChart'
+import Monthpicker from './components/Monthpicker'
+import MonthMenu from './components/MonthMenu'
 import Menu from './components/Menu'
 import Modal from './components/Modal'
 import Navbar from './components/Navbar'
+import PieChart from './components/PieChart'
 import Radio from './components/Radio'
 import SearchDropdown from './components/SearchDropdown'
 import Sidebar from './components/Sidebar'
@@ -50,9 +53,12 @@ export {
   Datepicker,
   Dropdown,
   LineChart,
+  Monthpicker,
+  MonthMenu,
   Menu,
   Modal,
   Navbar,
+  PieChart,
   Radio,
   SearchDropdown,
   Sidebar,

data/src/js/utils/index.js

@@ -9,6 +9,8 @@ import toPixel from '@superlanding/topixel'
 // date-fns
 import addDays from 'date-fns/addDays'
 import addMonths from 'date-fns/addMonths'
+import subYears from 'date-fns/subYears'
+import addYears from 'date-fns/addYears'
 import compareAsc from 'date-fns/compareAsc'
 import endOfDay from 'date-fns/endOfDay'
 import endOfMonth from 'date-fns/endOfMonth'
@@ -18,9 +20,11 @@ import getHours from 'date-fns/getHours'
 import getMinutes from 'date-fns/getMinutes'
 import getMonth from 'date-fns/getMonth'
 import getSeconds from 'date-fns/getSeconds'
+import setYear from 'date-fns/setYear'
 import getYear from 'date-fns/getYear'
 import parse from 'date-fns/parse'
 import set from 'date-fns/set'
+import setMonth from 'date-fns/setMonth'
 import startOfDay from 'date-fns/startOfDay'
 import startOfMonth from 'date-fns/startOfMonth'
 import subMonths from 'date-fns/subMonths'
@@ -28,6 +32,7 @@ import toDate from 'date-fns/toDate'
 import { format } from 'date-fns-tz'
 
 // lodash
+import chunk from 'lodash.chunk'
 import debounce from 'lodash.debounce'
 import isFunction from 'lodash.isfunction'
 import noop from 'lodash.noop'
@@ -50,6 +55,8 @@ export {
   // date-fns
   addDays,
   addMonths,
+  addYears,
+  subYears,
   compareAsc,
   endOfDay,
   endOfMonth,
@@ -59,9 +66,11 @@ export {
   getMinutes,
   getMonth,
   getSeconds,
+  setYear,
   getYear,
   parse,
   set,
+  setMonth,
   startOfDay,
   startOfMonth,
   subMonths,
@@ -69,6 +78,7 @@ export {
   format,
 
   // lodash
+  chunk,
   debounce,
   isFunction,
   noop,

data/src/js/utils/isFn.js

@@ -0,0 +1,3 @@
+export default function isFn(fn) {
+  return (typeof fn === 'function')
+}

data/src/sass/_beyond.scss

@@ -26,6 +26,7 @@
 @import './components/_checkbox';
 @import './components/_date-input';
 @import './components/_date-menu';
+@import './components/_month-menu';
 @import './components/_date-time-ranger';
 @import './components/_datepicker';
 @import './components/_dropdown';

data/src/sass/components/_chart.scss

@@ -12,3 +12,23 @@
   z-index: 1;
   border: 1px solid #e8e8e8;
 }
+
+.chart-box {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 14px;
+  padding-right: 14px;
+  padding-bottom: 10px;
+  .chart-box-item {
+    cursor: default;
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    margin-right: 1.4em;
+    .chart-box-square {
+      transform: translateY(1px);
+      @include size(10px);
+      margin-right: .5em;
+    }
+  }
+}

data/src/sass/components/_month-menu.scss

@@ -0,0 +1,70 @@
+.month-menu {
+  display: none;
+  position: absolute;
+  box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
+    0 15px 35px 0 rgba(49, 49, 93, .1),
+    0 5px 15px 0 rgba(0, 0, 0, .08);
+  background-color: #fff;
+  white-space: nowrap;
+  &.static {
+    display: inline-block;
+    position: static;
+  }
+  .month-menu-content {
+    display: inline-block;
+    position: relative;
+    padding: 0 14px 14px 14px;
+    width: 252px;
+  }
+  .month-menu-caption {
+    display: flex;
+    justify-content: space-between;
+    font-size: 15px;
+    color: #3c4257;
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+  .month-menu-caption-btn {
+    border: 0;
+    background-color: transparent;
+    display: block;
+    @include size(50px);
+
+    .icon-chevron-left,
+    .icon-chevron-right {
+      font-size: 12px;
+    }
+  }
+  .month-menu-table {
+    font-size: 14px;
+    width: 100%;
+    margin-top: 2px;
+    th, td {
+      padding: 3px;
+    }
+    td {
+      text-align: center;
+      &.cell {
+        background-color: #f7fafc;
+        cursor: pointer;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #e3e8ee;
+      }
+      &.cell.today {
+        background-color: #fffef4;
+      }
+      &.cell.selected {
+        background-color: #6c8eef;
+        color: #fff;
+        border-color: #6c8eef;
+      }
+      &.cell.selected-ex {
+        background-color: #5469d4;
+        color: #fff;
+        border-color: #5469d4;
+      }
+    }
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.240
+  version: 0.0.246
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-11-06 00:00:00.000000000 Z
+date: 2020-11-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -139,7 +139,11 @@ files:
 - src/js/components/LineChart.js
 - src/js/components/Menu.js
 - src/js/components/Modal.js
+- src/js/components/MonthInput.js
+- src/js/components/MonthMenu.js
+- src/js/components/Monthpicker.js
 - src/js/components/Navbar.js
+- src/js/components/PieChart.js
 - src/js/components/Radio.js
 - src/js/components/SearchDropdown.js
 - src/js/components/Sidebar.js
@@ -194,6 +198,7 @@ files:
 - src/js/utils/getKey.js
 - src/js/utils/index.js
 - src/js/utils/isDef.js
+- src/js/utils/isFn.js
 - src/js/utils/isInt.js
 - src/js/utils/isStr.js
 - src/js/utils/isTouchDevice.js
@@ -233,6 +238,7 @@ files:
 - src/sass/components/_list.scss
 - src/sass/components/_mega-menu.scss
 - src/sass/components/_modal.scss
+- src/sass/components/_month-menu.scss
 - src/sass/components/_nav.scss
 - src/sass/components/_navbar.scss
 - src/sass/components/_pagination.scss