beyond-rails 0.0.240 → 0.0.242

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27fa06609359c2b1ee1113771ce48fa3c2693f925e1b3f909e85d18c08766f08
-  data.tar.gz: 9ac7de120419f1aa97f874876694fe9ace1ec2239657199afff0d32980c835d3
+  metadata.gz: 0b3bbdec941b619698d3d2056d2f14b9e5ac05a9ceca5da77cae6ed3b92880e4
+  data.tar.gz: da7470c133596ff14a1f6223b44877e62c60d0b8519a7cceb1a2c60384aaece5
 SHA512:
-  metadata.gz: 1a54840c057c320dce8f19ebefb6388877e20bcebdf728a50cc5b8193822cb2a948e55423ed3802d20f1fa6628486947c79c847ea63a5637462b04a1400633ef
-  data.tar.gz: 399fd279bfc53c652babd56f10e481ce33bc994df4391588f26729825b971923ce51186ffe64e48238b3135e834b58131e0fd742ab1bad49107a0397f470339a
+  metadata.gz: eb5ad03f6463c486d3d4fd258893a89e597f9fba5638eb4a1da711885e93a8e27905b0d247c320534b92a28c62129609fd43bf56d4de5cdcc8b665365a57ce31
+  data.tar.gz: d8a09786eea15028edc4d9b38d5531e02c6656707f7f5dcf976aa0e21d2473c7657cf27fb770687b126668033c5170083c7c89422938da4b113ddd4752d18b8d

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/PieChart.js

@@ -0,0 +1,241 @@
+import supportDom from '../decorators/supportDom'
+import chartCommon from '../decorators/chartCommon'
+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(index) {
+    this.drawSliceGlow(this.data[index])
+  }
+
+  handleLabelMouseLeave(index) {
+    this.clearSliceGlow()
+  }
+
+  setData(data) {
+    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', () => this.handleLabelMouseOver(i))
+          this.offLabels.push(off)
+        }
+        if (isFn(handleLabelMouseLeave)) {
+          const off = this.addEvent(div, 'mouseleave', () => this.handleLabelMouseLeave(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

@@ -17,6 +17,7 @@ import LineChart from './components/LineChart'
 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'
@@ -53,6 +54,7 @@ export {
   Menu,
   Modal,
   Navbar,
+  PieChart,
   Radio,
   SearchDropdown,
   Sidebar,

data/src/js/utils/isFn.js

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

data/src/sass/components/_chart.scss

@@ -12,3 +12,24 @@
   z-index: 1;
   border: 1px solid #e8e8e8;
 }
+
+.chart-box {
+  display: flex;
+  justify-content: center;
+  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;
+    }
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.240
+  version: 0.0.242
 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-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -140,6 +140,7 @@ files:
 - src/js/components/Menu.js
 - src/js/components/Modal.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 +195,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