sparkline sample: rate visualization

.gitignore

@@ -26,3 +26,6 @@ _testmain.go
 
 .vscode/
 *.log
+
+cmd/sparkline/node_modules/
+cmd/sparkline/assets/

README.md

@@ -66,6 +66,20 @@ Documentation
 - [Wiki](https://github.com/abo/rerate/wiki)
 
 
+Sample - Sparkline
+------------------
+
+![](https://github.com/abo/rerate/raw/master/cmd/sparkline/sparkline.png)
+
+```
+    cd cmd/sparkline
+    npm install webpack -g
+    npm install
+    webpack && go run main.go
+```
+Open `http://localhost:8080` in Browser, And then move mouse.
+
+
 Contributing
 ------------
 WELCOME

cmd/sparkline/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets":[
+        "es2015", "react"
+    ]
+}

cmd/sparkline/main.go

@@ -0,0 +1,57 @@
+package main
+
+import (
+	"encoding/json"
+	"net/http"
+	"time"
+
+	redis "gopkg.in/redis.v5"
+
+	"github.com/abo/rerate"
+	"github.com/gorilla/mux"
+)
+
+var counter *rerate.Counter
+
+func init() {
+	buckets := rerate.NewRedisV5Buckets(redis.NewClient(&redis.Options{
+		Addr:     "localhost:6379",
+		Password: "",
+		DB:       0,
+	}))
+	counter = rerate.NewCounter(buckets, "rerate:sparkline", 20*time.Second, 500*time.Millisecond)
+}
+
+func main() {
+	r := mux.NewRouter()
+	r.PathPrefix("/assets/").Handler(http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))
+	r.HandleFunc("/histogram/{key}", histogram)
+	r.HandleFunc("/inc/{key}", inc)
+	r.PathPrefix("/").Handler(http.FileServer(http.Dir("tpl")))
+
+	srv := &http.Server{
+		Handler:      r,
+		Addr:         ":8080",
+		WriteTimeout: 15 * time.Second,
+		ReadTimeout:  15 * time.Second,
+	}
+
+	srv.ListenAndServe()
+}
+
+func inc(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	counter.Inc(vars["key"])
+}
+
+func histogram(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	if hist, err := counter.Histogram(vars["key"]); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	} else if resp, err := json.Marshal(hist); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	} else {
+		w.Header().Set("Content-Type", "application/json")
+		w.Write(resp)
+	}
+}

cmd/sparkline/main.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Sparklines, SparklinesLine, SparklinesBars } from 'react-sparklines';
+
+class Rerate extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { histogram:[] };
+    }
+
+    componentDidMount() {
+        this.intervalId = setInterval( () => {
+            fetch("/histogram/"+this.props.counterId)
+            .then(response => response.json())
+            .then(json => this.setState({histogram:json}));
+        },this.props.interval);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.intervalId);
+    }
+
+    render() {
+        const data = this.state.histogram.reverse();
+        return (<div>{React.Children.map(this.props.children, function(child) {
+                    return React.cloneElement(child, { data });
+                })}</div>);
+    }
+}
+
+
+ReactDOM.render(
+    <Rerate counterId="0" interval="500"><Sparklines>
+        <SparklinesLine />
+    </Sparklines></Rerate>, document.getElementById("sparkline-0")
+);
+ReactDOM.render(
+    <Rerate counterId="1" interval="500"><Sparklines>
+        <SparklinesBars />
+    </Sparklines></Rerate>, document.getElementById("sparkline-1")
+);
+/*ReactDOM.render(
+    <Rerate counterId="2" interval="1000"><Sparklines>
+        <SparklinesLine />
+    </Sparklines></Rerate>, document.getElementById("sparkline-2")
+);
+ReactDOM.render(
+    <Rerate counterId="3" interval="500"><Sparklines>
+        <SparklinesLine />
+    </Sparklines></Rerate>, document.getElementById("sparkline-3")
+);
+ReactDOM.render(
+    <Rerate counterId="4" interval="1000"><Sparklines>
+        <SparklinesLine />
+    </Sparklines></Rerate>, document.getElementById("sparkline-4")
+);
+ReactDOM.render(
+    <Rerate counterId="5" interval="1000"><Sparklines>
+        <SparklinesLine />
+    </Sparklines></Rerate>, document.getElementById("sparkline-5")
+ );*/

cmd/sparkline/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "rerate-sparkline",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-sparklines": "^1.6.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
+    "webpack": "^2.3.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "abo",
+  "license": "ISC"
+}

cmd/sparkline/tpl/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>rerate's sparkline</title>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    <!--<script src="https://unpkg.com/react@15/dist/react.min.js"></script>-->
+    <!--<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>-->
+    <!--<script src="https://unpkg.com/react-sparklines@1.6.0/src/Sparklines.js"></script>-->
+    <!--<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>-->
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="container">
+      <h1>Sparkline for rerate</h1>
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>rerate:sparkline:0</th>
+            <th>rerate:sparkline:1</th>
+            <th>rerate:sparkline:a</th>
+            <th>rerate:sparkline:b</th>
+            <th>rerate:sparkline:c</th>
+            <th>rerate:sparkline:d</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td id="sparkline-0"></td>
+            <td id="sparkline-1"></td>
+            <td id="sparkline-a"></td>
+            <td id="sparkline-b"></td>
+            <td id="sparkline-c"></td>
+            <td id="sparkline-d"></td>
+          </tr>                 
+        </tbody>
+      </table>
+    </div>
+    <script type="text/javascript" src="/assets/sparkline.js"></script>
+    <script type="text/javascript">
+      document.body.onmousemove = function(e){
+        if (e.clientX > (window.screen.width / 2)) {
+          fetch('/inc/0');
+        }else {
+          fetch('/inc/1');
+        }
+      };
+    </script>
+  </body>
+</html>

cmd/sparkline/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+module.exports = {
+    entry: './main.jsx',
+    output: {
+        path: path.resolve('assets'),
+        filename: 'sparkline.js'
+    },
+    module: {
+        loaders: [
+            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/}
+        ]
+    }
+}