Add initial support for charts

index.html

@@ -9,6 +9,7 @@
     <script src="js/three.js"></script>
 	<script src="js/TrackballControls.js"></script>
 	<script defer src="js/fontawesome.js"></script>
+    <script src="js/frappe-charts.js"></script>
     <script src="whispervis.js"></script>
 </body>
 

stats_page.go

@@ -3,8 +3,11 @@ package main
 import (
 	"fmt"
 
+	charts "github.com/cnguy/gopherjs-frappe-charts"
+	chartsUtils "github.com/cnguy/gopherjs-frappe-charts/utils"
 	"github.com/gopherjs/vecty"
 	"github.com/gopherjs/vecty/elem"
+	"github.com/status-im/whispervis/widgets"
 )
 
 // StatsPage is stats view component.
@@ -12,14 +15,17 @@ type StatsPage struct {
 	vecty.Core
 
 	width, height string
+	chart         *widgets.Chart
 }
 
 // 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),
 	}
 }
 
@@ -39,22 +45,32 @@ func (s *StatsPage) Render() vecty.ComponentOrHTML {
 		// consult this tile madness here https://bulma.io/documentation/layout/tiles/
 		elem.Div(vecty.Markup(vecty.Class("tile", "is-anscestor")),
 			elem.Div(vecty.Markup(vecty.Class("tile", "is-parent", "is-4", "is-vertical")),
-				elem.Div(vecty.Markup(vecty.Class("tile")),
+				Tile(vecty.Text("Part left")),
-					elem.Div(vecty.Markup(vecty.Class("tile", "is-child", "box")),
+				Tile(vecty.Text("Part left 2")),
-						vecty.Text("Part left"),
-					),
-				),
-				elem.Div(vecty.Markup(vecty.Class("tile")),
-					elem.Div(vecty.Markup(vecty.Class("tile", "is-child", "box")),
-						vecty.Text("Part left 2"),
-					),
-				),
-			),
-			elem.Div(vecty.Markup(vecty.Class("tile", "is-parent")),
-				elem.Div(vecty.Markup(vecty.Class("tile", "is-child", "box")),
-					vecty.Text("Part right"),
-				),
 			),
+
+			TileParent(s.chart),
 		),
 	)
 }
+
+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,
+	}
+	dataset := charts.NewDataset("", values)
+	chartData.Datasets = []*charts.Dataset{dataset}
+	return chartData
+}

tile.go

@@ -0,0 +1,34 @@
+package main
+
+import (
+	"github.com/gopherjs/vecty"
+	"github.com/gopherjs/vecty/elem"
+)
+
+func Tile(content vecty.MarkupOrChild) *vecty.HTML {
+	return elem.Div(
+		vecty.Markup(
+			vecty.Class("tile"),
+		),
+		elem.Div(
+			vecty.Markup(
+				vecty.Class("tile", "is-child", "box"),
+			),
+			content,
+		),
+	)
+}
+
+func TileParent(content vecty.MarkupOrChild) *vecty.HTML {
+	return elem.Div(
+		vecty.Markup(
+			vecty.Class("tile", "is-parent"),
+		),
+		elem.Div(
+			vecty.Markup(
+				vecty.Class("tile", "is-child", "box"),
+			),
+			content,
+		),
+	)
+}

widgets/chart.go

@@ -0,0 +1,47 @@
+package widgets
+
+import (
+	"fmt"
+
+	charts "github.com/cnguy/gopherjs-frappe-charts"
+	"github.com/gopherjs/vecty"
+	"github.com/gopherjs/vecty/elem"
+	"github.com/gopherjs/vecty/prop"
+)
+
+// Chart represents a wrapper for Frapper Charts library.
+type Chart struct {
+	vecty.Core
+
+	data *charts.ChartData
+}
+
+func NewChart(data *charts.ChartData) *Chart {
+	return &Chart{
+		data: data,
+	}
+}
+
+// Render implements the vecty.Component interface for Chart.
+func (c *Chart) Render() vecty.ComponentOrHTML {
+	return elem.Div(
+		vecty.Markup(
+			prop.ID("chart"),
+		),
+	)
+}
+
+// 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").
+		WithColors([]string{"blue"}).
+		SetShowDots(false).
+		SetHeatline(true).
+		SetRegionFill(true).
+		SetXAxisMode("tick").
+		SetYAxisMode("span").
+		SetIsSeries(true).
+		Render()
+}