beyond-rails 0.0.192 → 0.0.197

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6454b3f8506a63482385f68ac87aad1024ff1527e0b66c43faed75dcef83c7c
-  data.tar.gz: 967ce7aa6a0fcbe69cbf4393c52a906afe9d38a7b9bd4105b22fe433de2f6032
+  metadata.gz: 9032014c8dc22090470a9bf2ee4c3b6f861b530f6b20538896f266f3d8ca67bc
+  data.tar.gz: 6dc03f407892516d8be8bbdb31c43489f925525bac7ac44c890f5b2fec2f3f69
 SHA512:
-  metadata.gz: 38d44f307931f8155b9f9660bc22eae0f87d1ca74273cb80366fceb44d25ece3ad9aef1ff60ec54feb3e0aa584dbbba386fa26ee84dcb096d6298b9789053b88
-  data.tar.gz: c2dd56c84389d4c4ffffd0c2bbcb0aac5b4544eaa2ca5efc6f8e167dbb697fc9315b1c3ba870cfedb8096b59da08d736ccf53f5a89f4bce17914b2cc8b1d67d3
+  metadata.gz: 86f51a12a50544e2d4b6a078b4bd54298f0da1072bad2bba792a77e44222c358dbe76716a56242b34eaa350df6cd138ada2c3455a67e6e848f3be27fe7e4f96d
+  data.tar.gz: 3199bbbdd249ae0589a52dcfbf11eeaf186b25cf56fb5e42f1f55719a28cdbfccc05edc4dadb606a88cb7ac515e3a06035b107f6b66b28893f6c35f823d1afeb

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/_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/_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.192
+  version: 0.0.197
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-08 00:00:00.000000000 Z
+date: 2020-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc