折線圖 - Line Chart

1
<div id="line-chart" class="chart"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import range from 'lodash.range'
import sample from 'lodash.sample'
import throttle from 'lodash.throttle'
import toPixel from '@superlanding/topixel'
import Theme from '../../assets/js/models/Theme'

export default function bindLineCharts() {

  const { LineChart } = window.beyond
  const dom = document.getElementById('line-chart')

  if (! dom) {
    return () => {}
  }

  const padZero = v => v.toString().padStart(2, '0')
  const toXLabel = v => {
    const d = new Date(v)
    return padZero(d.getHours()) + ':' + padZero(d.getMinutes())
  }
  const toYLabel = v => {
    const numStr = (v / 10000).toFixed(1)
    const [firstNum, secondNum] = numStr.split('.')
    if ((firstNum === '0') && (secondNum === '0')) {
      return '0'
    }
    if (secondNum === '0') {
      return firstNum + '萬'
    }
    return numStr + '萬'
  }

  const fiveMins = 5 * 60 * 1000
  const chartMenu = document.getElementById('chart-menu')
  const theme = Theme.get()
  const c = new LineChart(dom, {
    theme,
    toXLabel,
    toYLabel,
    lineLabels: ['線段1', '線段2', '線段3'],
    yStep: 2 * 10000,
    onPointMouseOver(mousePos, res) {
      if (res) {
        const { point } = res
        chartMenu.innerHTML = `
          <div>時間: ${toXLabel(point.x)}</div>
          <div>金錢: ${point.y}</div>
        `
        chartMenu.style.left = toPixel(mousePos.x)
        chartMenu.style.top = toPixel(mousePos.y + 20)
        chartMenu.style.display = 'block'
      }
      else {
        chartMenu.style.display = 'none'
      }
    }
  })

  const now = +new Date()
  const getSampleValue = () => sample([1000, 2000, 3000, 4000, 500])
  const points1 = range(1, 20 + 1)
    .map(i => {
      return {
        x: now + (i * fiveMins),
        y: i * getSampleValue()
      }
    })

  const points2 = range(1, 20 + 1)
    .map(i => {
      return {
        x: now + (i * fiveMins),
        y: i * getSampleValue()
      }
    })

  const points3 = range(1, 20 + 1)
    .map(i => {
      return {
        x: now + (i * fiveMins),
        y: i * getSampleValue()
      }
    })

  c.setData([points1, points2, points3])

  let domWidth = dom.offsetWidth

  const handleResize = throttle(() => {
    if (dom.offsetWidth !== domWidth) {
      c.refresh()
    }
    domWidth = dom.offsetWidth
  }, 300)
  window.addEventListener('resize', handleResize)

  const handleThemeChange = () => {
    const theme = Theme.get()
    c.setTheme({ theme })
    c.refresh()
  }
  document.addEventListener('beyond-theme-change', handleThemeChange)

  return function unbindLineCharts() {
    window.removeEventListener('resize', handleResize)
    document.removeEventListener('beyond-theme-change', handleThemeChange)
    c.destroy()
  }
}