beyond-rails 0.0.193 → 0.0.198

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d61bb2b7f5dafc4fab6358ca8c032488a4875977edfab11d8b7f3ffe0ac0cf39
-  data.tar.gz: 9c139ae7a4e414096c3a9549aecddb07fe662b021032b97bb6c1667ba48cd94d
+  metadata.gz: d81d5fde8a2f2cc5d3f71a0421fe362d0b1e1b637487fad895d8dd7eaae101ef
+  data.tar.gz: 33db70f6b7e9f6bcc4ef755a55dc4c2bd18d1bd2fe8ced3575ffdf0cd63cca1b
 SHA512:
-  metadata.gz: 240333d51da01189d62bdcb0e46ee6e23dfb9293afb633eda0e981cf8e6dfb6246a6b5daff0f024586c005ae740bf7c77b14524aedcd0a728e570da654f6bab8
-  data.tar.gz: 275a9b0ad65ff19125d3c9420101e7cd0a29467a404cbe171c3d189aab11f9d4daf2a1801a0d231127ce805a036e542ed7cb877b0ba2e6e8430ac3558db2f6c9
+  metadata.gz: fc37bcf05ef5472fb2fdaf49fd098d8dcfb101d310abe16f891252457325ade7eb1a86b467d2a627068742a918296bdd0dd784be21c8d99fe07ab5e223ffe530
+  data.tar.gz: 0beca937c9dff930a4da40be3ef91c298f15152a94ca0fa52a195d66c5f2c100c6f56a33987d1d4b6311abfecfdf6ded1e44bbb07b14677870009870ce889fe4

data/src/js/components/BarChart.js

@@ -20,7 +20,7 @@ export default class BarChart {
     this.options = options
     this.bars = []
 
-    this.height = options.height || 186
+    this.height = options.height
     this.width = options.width
 
     this.toYLabel = isDef(options.toYLabel) ? mem(options.toYLabel) : (v => v)
@@ -46,7 +46,7 @@ export default class BarChart {
 
   init() {
     this.setDpr()
-    this.setDomWidthIfNeeded()
+    this.setDomSizeIfNeeded()
     this.setCanvas()
     this.clear()
     this.bindMedia()
@@ -342,7 +342,7 @@ export default class BarChart {
   refresh() {
     this.raf(() => {
       this.clearBarPos()
-      this.setDomWidthIfNeeded()
+      this.setDomSizeIfNeeded()
       this.setCanvasSize(this.canvas)
       this.setLabelWidths()
       this.setLabelHeights()

data/src/js/components/DateMenu.js

@@ -60,7 +60,8 @@ export default class DateMenu {
   }
 
   useSingleMenu() {
-    return isTouchDevice() || this.options.useSingleMenu
+    const { useSingleMenu, isStatic } = this.options
+    return isTouchDevice() || isStatic || useSingleMenu
   }
 
   setHoveredCell(data) {
@@ -204,7 +205,8 @@ export default class DateMenu {
 
   addMenu() {
     const dom = document.createElement('div')
-    dom.className = 'date-menu'
+    const className = this.options.isStatic ? 'date-menu static' : 'date-menu'
+    dom.className = className
 
     if (this.useSingleMenu()) {
       dom.innerHTML = `
@@ -257,7 +259,15 @@ export default class DateMenu {
       this.btnPrev = dom.querySelector('[data-btn-prev]')
       this.btnNext = dom.querySelector('[data-btn-next]')
     }
-    document.body.appendChild(dom)
+
+    const container = this.options.dom
+
+    if (container) {
+      container.appendChild(dom)
+    }
+    else {
+      document.body.appendChild(dom)
+    }
     this.dom = dom
   }
 
@@ -350,8 +360,17 @@ export default class DateMenu {
   show(src) {
     const { dom } = this
     dom.style.opacity = 0
-    dom.style.display = 'block'
-    this.pos(src)
+
+    if (this.options.isStatic) {
+      dom.style.display = 'inline-block'
+    }
+    else {
+      dom.style.display = 'block'
+    }
+
+    if (src) {
+      this.pos(src)
+    }
     dom.style.opacity = 1
     this.isVisible = true
   }

data/src/js/components/LineChart.js

@@ -41,7 +41,7 @@ export default class LineChart {
     this.dom = dom
     this.options = options
     this.pointsArr = []
-    this.height = options.height || 150
+    this.height = options.height
     this.width = options.width
 
     this.toXLabel = isDef(options.toXLabel) ? mem(options.toXLabel) : (v => v)
@@ -76,7 +76,7 @@ export default class LineChart {
 
   init() {
     this.setDpr()
-    this.setDomWidthIfNeeded()
+    this.setDomSizeIfNeeded()
     this.setCanvas()
     this.clear()
     this.bindMedia()
@@ -438,12 +438,13 @@ export default class LineChart {
   refresh() {
     this.raf(() => {
       this.clearPointPos()
-      this.setDomWidthIfNeeded()
+      this.setDomSizeIfNeeded()
       this.setCanvasSize(this.canvas)
       this.layers.forEach(layer => this.setCanvasSize(layer.canvas))
       this.setLabelWidths()
       this.setLabelHeights()
       this.setAxisData()
+      this.updateLabelSizeForAutoStep()
       this.setPointPos()
       this.draw()
     })
@@ -496,6 +497,7 @@ export default class LineChart {
     this.setLabelWidths()
     this.setLabelHeights()
     this.setAxisData()
+    this.updateLabelSizeForAutoStep()
     this.setPointPos()
     this.raf(() => this.draw())
   }
@@ -513,6 +515,22 @@ export default class LineChart {
     })
   }
 
+  updateLabelSizeForAutoStep() {
+    const { measureWidth } = this
+    if (isUndef(this.xStep)) {
+      this.xLabelWidth = this.xLabelRows.reduce((width, row) => {
+        const measuredWidth = row.length
+        return (measuredWidth > width) ? measuredWidth : width
+      }, 0)
+    }
+    if (isUndef(this.yStep)) {
+      this.yLabelWidth = this.yLabelRows.reduce((width, row) => {
+        const measuredWidth = measureWidth.call(this, row.label)
+        return (measuredWidth > width) ? measuredWidth : width
+      }, 0)
+    }
+  }
+
   destroy() {
     const { dom, canvas } = this
     const { toXLabel, toYLabel } = this.options

data/src/js/decorators/chartCommon.js

@@ -155,6 +155,10 @@ export default function chartCommon(target) {
       return [stepStart, stepEnd]
     }
 
+    measureWidth(value) {
+      return this.ctx.measureText(value).width
+    }
+
     raf(fn) {
       if (isDef(window.requestAnimationFrame)) {
         return window.requestAnimationFrame(fn)
@@ -201,10 +205,13 @@ export default function chartCommon(target) {
       canvas.getContext('2d').scale(dpr, dpr)
     }
 
-    setDomWidthIfNeeded() {
+    setDomSizeIfNeeded() {
       if (isUndef(this.options.width)) {
         this.width = this.dom.offsetWidth
       }
+      if (isUndef(this.options.height)) {
+        this.height = this.dom.offsetHeight
+      }
     }
 
     setDpr() {

data/src/js/index.js

@@ -9,6 +9,7 @@ import Autocomplete from './components/Autocomplete'
 import BarChart from './components/BarChart'
 import Btn from './components/Btn'
 import Checkbox from './components/Checkbox'
+import DateMenu from './components/DateMenu'
 import DateTimeRanger from './components/DateTimeRanger'
 import Datepicker from './components/Datepicker'
 import Dropdown from './components/Dropdown'
@@ -33,6 +34,7 @@ export {
   BarChart,
   Btn,
   Checkbox,
+  DateMenu,
   DateTimeRanger,
   Datepicker,
   Dropdown,

data/src/sass/components/_btn.scss

@@ -2,6 +2,7 @@
   outline: 0;
   background-color: #fff;
   display: inline-flex;
+  justify-content: center;
   align-items: center;
   border: 0;
   padding: 6px 12px 7px;

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

@@ -6,6 +6,9 @@
     0 5px 15px 0 rgba(0, 0, 0, .08);
   background-color: #fff;
   white-space: nowrap;
+  &.static {
+    position: static;
+  }
   .date-menu-content {
     display: inline-block;
     position: relative;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.193
+  version: 0.0.198
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-10 00:00:00.000000000 Z
+date: 2020-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc