console.graph/graph.coffee at master · zackbloom/console.graph · GitHub

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
class Graph
  constructor: (@options={}) ->
    @options.height ?= 200
    @options.interval ?= 100
    @options.extraStyles ?= ''

    @points = []

  add: (vals...) ->
    @points.push.apply @points, vals

    @renderIfWatching()

  clear: ->
    @points = []

    @renderIfWatching()

  watch: (opts) ->
    @watching = true

  stop: ->
    @watching = false
    clearTimeout @timeout

  renderIfWatching: ->
    if @watching
      if not @lastRender?
        timeToNext = 0
      else
        timeSinceLast = +(new Date) - @lastRender
        timeToNext = @options.interval - timeSinceLast

      @timeout = setTimeout =>
        @render()
      , Math.max(timeToNext, 0)

  render: ->
    @lastRender = +(new Date)

class BarGraph extends Graph
  constructor: (@options={}) ->
    super

    @options.barWidth ?= 3

  _inspectorHeight: ->
    window.outerHeight - window.innerHeight - @options.height

  render: ->
    super

    inspectorHeight = @_inspectorHeight()
    inspectorWidth = window.innerWidth

    # Shift the graph down
    console.log "%c ", "font-size: #{ inspectorHeight }px"

    # Allocate enough space for the height
    console.log "%c ", "padding-bottom: #{ @options.height + @options.barWidth }px"

    steps = inspectorWidth / @options.barWidth

    xScaling = Math.min(steps / @points.length, 1)

    pointMax = Math.max @points...
    yScaling = pointMax / @options.height

    spaces = ""
    styles = []
    for i in [0..Math.min(steps, @points.length)]
      point = @points[Math.floor(i / xScaling)]

      spaces += "%c "

      # We need to shift the points down by the bar width, as we're setting the width with the font size, so the entire block will extend
      # barWidth over the bottom of the text line.  We can't hide the text line, so we'll use it to represent the max.
      height = (point / yScaling) + @options.barWidth

      styles.push "font-size: #{ @options.barWidth }px; background-color: #444; padding-bottom: #{ height }px; #{ @options.extraStyles }"

    @options.step?()

    console.log spaces, styles...


window.console.graph = (options) ->
  graph = new BarGraph options

  if options.points?
    graph.add options.points...

  graph.render()

  graph

console.graph.Graph = Graph
console.graph.BarGraph = BarGraph