Add more stats

page.go

@@ -198,6 +198,7 @@ func (p *Page) replaySimulation() {
 		return
 	}
 	p.webgl.AnimatePropagation(p.simulation.plog)
+	p.statsPage.UpdateStats(p.network.Current().Data, p.simulation.plog)
 }
 
 func (p *Page) header() *vecty.HTML {

stats_page.go

@@ -2,11 +2,13 @@ package main
 
 import (
 	"fmt"
+	"sort"
 
 	charts "github.com/cnguy/gopherjs-frappe-charts"
-	chartsUtils "github.com/cnguy/gopherjs-frappe-charts/utils"
+	"github.com/divan/graphx/graph"
 	"github.com/gopherjs/vecty"
 	"github.com/gopherjs/vecty/elem"
+	"github.com/status-im/simulation/propagation"
 	"github.com/status-im/whispervis/widgets"
 )
 
@@ -15,17 +17,17 @@ type StatsPage struct {
 	vecty.Core
 
 	width, height string
-	chart         *widgets.Chart
+
+	chart1Data *charts.ChartData
+	chart2Data *charts.ChartData
 }
 
 // NewStatsPage creates and inits new stats page.
 func NewStatsPage() *StatsPage {
 	width, height := PageViewSize()
-	data := chartData()
 	return &StatsPage{
 		width:  fmt.Sprintf("%dpx", width),
 		height: fmt.Sprintf("%dpx", height),
-		chart:  widgets.NewChart(data),
 	}
 }
 
@@ -49,28 +51,54 @@ func (s *StatsPage) Render() vecty.ComponentOrHTML {
 				Tile(vecty.Text("Part left 2")),
 			),
 
-			TileParent(s.chart),
+			elem.Div(vecty.Markup(vecty.Class("tile", "is-parent", "is-vertical")),
+				vecty.If(s.chart1Data != nil, Tile(widgets.NewChart("nodes", s.chart1Data))),
+				vecty.If(s.chart2Data != nil, Tile(widgets.NewChart("cumulative", s.chart2Data))),
+			),
 		),
 	)
 }
 
-func chartData() *charts.ChartData {
-	chartData := charts.NewChartData()
-	chartData.Labels = chartsUtils.NumberLabelsToStr([]int{
-		1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
-		1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
-		1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996,
-		1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
-		2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016,
-	})
-	values := []float64{
-		132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
-		39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8,
-		33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6,
-		28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7,
-		12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8,
+// UpdateStats updates stats page with a new data.
+func (s *StatsPage) UpdateStats(g *graph.Graph, plog *propagation.Log) {
+	sort.Sort(plog)
+
+	labels := make([]string, len(plog.Timestamps))
+
+	nodeCounts := make([]float64, len(plog.Timestamps))
+	linkCounts := make([]float64, len(plog.Timestamps))
+	nodeCum := make([]float64, len(plog.Timestamps))
+	linkCum := make([]float64, len(plog.Timestamps))
+	var totalNode, totalLink int64
+	for i, ts := range plog.Timestamps {
+		labels[i] = fmt.Sprintf("%d", ts)
+		nodes := len(plog.Nodes[i])
+		links := len(plog.Indices[i])
+		totalNode += int64(nodes)
+		totalLink += int64(links)
+		nodeCounts[i] = float64(nodes)
+		linkCounts[i] = float64(links)
+		nodeCum[i] = float64(totalNode)
+		linkCum[i] = float64(totalLink)
 	}
-	dataset := charts.NewDataset("", values)
-	chartData.Datasets = []*charts.Dataset{dataset}
-	return chartData
+
+	data := charts.NewChartData()
+	data.Labels = labels
+	dataset1 := charts.NewDataset("Nodes", nodeCounts)
+	dataset2 := charts.NewDataset("Links", linkCounts)
+	data.Datasets = []*charts.Dataset{
+		dataset1,
+		dataset2,
+	}
+	s.chart1Data = data
+
+	data2 := charts.NewChartData()
+	data2.Labels = labels
+	dataset3 := charts.NewDataset("Nodes", nodeCum)
+	dataset4 := charts.NewDataset("Links", linkCum)
+	data2.Datasets = []*charts.Dataset{
+		dataset3,
+		dataset4,
+	}
+	s.chart2Data = data2
 }

widgets/chart.go

@@ -1,7 +1,7 @@
 package widgets
 
 import (
-	"fmt"
+	"strings"
 
 	charts "github.com/cnguy/gopherjs-frappe-charts"
 	"github.com/gopherjs/vecty"
@@ -13,11 +13,16 @@ import (
 type Chart struct {
 	vecty.Core
 
+	id   string
+	name string
 	data *charts.ChartData
 }
 
-func NewChart(data *charts.ChartData) *Chart {
+func NewChart(name string, data *charts.ChartData) *Chart {
+	id := strings.ToLower(name) // TODO(divan): make it unique
 	return &Chart{
+		id:   id,
+		name: name,
 		data: data,
 	}
 }
@@ -26,16 +31,15 @@ func NewChart(data *charts.ChartData) *Chart {
 func (c *Chart) Render() vecty.ComponentOrHTML {
 	return elem.Div(
 		vecty.Markup(
-			prop.ID("chart"),
+			prop.ID(c.id),
 		),
 	)
 }
 
 // Mount implements the vecty.Mounter interface for Chart. Triggers when DOM has been created for the component.
 func (c *Chart) Mount() {
-	fmt.Println("Attaching chart...")
-	charts.NewLineChart("#chart", c.data).
-		WithTitle("Test chart").
+	charts.NewLineChart("#"+c.id, c.data).
+		WithTitle(c.name).
 		WithColors([]string{"blue"}).
 		SetShowDots(false).
 		SetHeatline(true).