basic function of benchmark, information updates only after test ends

431a4780 · Ovilia · 1c68d6e9 · 431a4780 · 431a4780 · 431a4780
6 changed file
--- a/benchmark/index.html
+++ b/benchmark/index.html
@@ -14,35 +14,50 @@
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
+    <style type="text/css">
+        .btn {
+            margin: 10px 10px 10px 0;
+        }
+        #report {
+            width: 100%;
+            height: 400px;
+        }
+    </style>
 </head>
 <body>
-    <div class="container">
+    <div class="container" id="app">
        <h1>ECharts Stress Test</h1>
-        <table class="table">
+        <div>
+            <button class="btn btn-primary" v-on:click="run">
+                Start
+            </button>
+            <span v-if="isRunning || hasRun">Elapsed time: {{ elapsedTime }}</span>
+        </div>
+        <div id="report" v-if="hasRun"></div>
+        <table id="test-table" class="table table-striped">
            <tr>
                <th>Data Amount</th>
-                <th>Bar</th>
+                <th v-for="name in caseNames">{{ name }}</th>
-                <th>Line</th>
-                <th>Pie</th>
            </tr>
-            <tr>
+            <tr v-for="(aid, amount) in amounts">
-                <td>100</td>
+                <td>{{ aid, amount }}</td>
-            </tr>
+                <th v-for="(cid, name) in caseNames">{{ times[aid][cid] }}</th>
-            <tr>
-                <td>1000</td>
-            </tr>
-            <tr>
-                <td>10000</td>
-            </tr>
-            <tr>
-                <td>100000</td>
            </tr>
        </table>
    </div>
-    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
+    <!-- <script type="text/javascript" src="dep/jquery.js"></script> -->
+    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
+    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
+    <script type="text/javascript" src="../dist/echarts.js"></script>
    <script src="../test/esl.js"></script>
    <script>
    require.config({

--- a/benchmark/src/app.js
+++ b/benchmark/src/app.js
+/**
+ * @file benchmark application instance
+ * @author Wenli Zhang
+ */
+define(function (require) {
+    var TestManager = require('./testManager');
+    var vm = new Vue({
+        el: '#app',
+        data: {
+            caseNames: ['line', 'pie', 'scatter', 'bar'],
+            amounts: (function() {
+                var arr = [];
+                for (var i = 200; i < 1000; i += 200) {
+                    arr.push(i);
+                }
+                // for (i = 1000; i <= 10000; i += 2000) {
+                //     arr.push(i);
+                // }
+                // for (i = 10000; i <= 100000; i += 20000) {
+                //     arr.push(i);
+                // }
+                // arr.push(100000);
+                return arr;
+            })(),
+            times: {},
+            hasRun: false,
+            isRunning: false,
+            elapsedTime: 0
+        },
+        methods: {
+            run: run
+        }
+    });
+    var manager = new TestManager(vm.amounts, vm.caseNames);
+    function run() {
+        vm.$set('hasRun', false);
+        vm.$set('isRunning', true);
+        // var timerHandler = setInterval(function() {
+        //     if (vm.isRunning) {
+        //         vm.$set('elapsedTime', vm.elapsedTime + 1);
+        //     } else {
+        //         clearInterval(timerHandler);
+        //     }
+        // }, 1000);
+        manager.init();
+        var start = new Date();
+        while (manager.hasNext) {
+            var test = manager.next(); // ECharts test case
+            Vue.nextTick(function () {
+                if (!vm.times[test.amountId]) {
+                    vm.$set('times[' + test.amountId + ']', []);
+                }
+                vm.$set('times[' + test.amountId + '][' + test.caseId + ']', test.time);
+            });
+        }
+        var end = new Date();
+        vm.$set('elapsedTime', end - start);
+        // console.log(end - start);
+        vm.$set('isRunning', false);
+        vm.$set('hasRun', true);
+        // Use setTimeout to make sure it is called after report element is
+        // rendered by Vue.
+        setTimeout(function () {
+            manager.drawReport(document.getElementById('report'));
+        }, 0);
+    }
+});
--- a/benchmark/src/testCase.js
+++ b/benchmark/src/testCase.js
+/**
+ * @file TestCase is the class for each test case of EChart
+ * @author Wenli Zhang
+ */
+define(function (require) {
+    /**
+     * set up test case
+     *
+     * @param {string} name   name of test case
+     * @param {Object} option ECharts option
+     */
+    function TestCase(name, option) {
+        this.name = name;
+        this.option = option;
+    }
+    /**
+     * run test case and return elapsed time
+     *
+     * @return {number} elapsed time
+     */
+    TestCase.prototype.runtime = function () {
+        var container = document.createElement('div');
+        container.style.width = '800px';
+        container.style.height = '600px';
+        var start = new Date();
+        var chart = echarts.init(container);
+        chart.setOption(this.option);
+        var end = new Date();
+        return end - start;
+    };
+    return TestCase;
+});
--- a/benchmark/src/testFactory.js
+++ b/benchmark/src/testFactory.js
+/**
+ * @file TestFactory creates test cases based on names and options
+ * @author Wenli Zhang
+ */
+define(function (require) {
+    var TestCase = require('./testCase');
+    var TestFactory = {};
+    /**
+     * create test case, return instance of TestCase
+     *
+     * @param  {string}   name   name of test case
+     * @param  {number}   amount data amount
+     * @return {TestCase}        test case instance
+     */
+    TestFactory.create = function (name, amount) {
+        var option = null;
+        switch (name) {
+            case 'line':
+            case 'bar':
+            case 'scatter':
+                option = {
+                    series: {
+                        data: data2D(amount),
+                        type: name
+                    },
+                    xAxis: {
+                        type: 'value'
+                    },
+                    yAxis: {
+                        type: 'value'
+                    }
+                };
+                break;
+            case 'pie':
+                option = {
+                    series: {
+                        data: data1D(amount),
+                        type: 'pie'
+                    }
+                };
+                break;
+            default:
+                console.error('Test name ' + name + ' not found!');
+                return null;
+        }
+        option.animation = false;
+        return new TestCase(name, option);
+    };
+    /**
+     * generate random 1d data
+     *
+     * @param  {number}   amount data amount
+     * @return {number[]}        generated random data
+     */
+    function data1D(amount) {
+        var result = [];
+        for (var i = 0; i < amount; ++i) {
+            result.push(Math.random());
+        }
+        return result;
+    }
+    /**
+     * generate random 2d data
+     *
+     * @param  {number}   amount data amount
+     * @return {number[]}        generated random data
+     */
+    function data2D(amount) {
+        var result = [];
+        for (var i = 0; i < amount; ++i) {
+            result.push([Math.random(), Math.random()]);
+        }
+        return result;
+    }
+    return TestFactory;
+});
--- a/benchmark/src/testManager.js
+++ b/benchmark/src/testManager.js
+/**
+ * @file TestManager loads and runs test cases
+ * @author Wenli Zhang
+ */
+define(function (require) {
+    var factory = require('./testFactory');
+    /**
+     * test manager
+     *
+     * @param {number[]} amounts    test case amount array
+     * @param {string[]} caseNames test case name array
+     */
+    function TestManager(amounts, caseNames) {
+        this.caseNames = caseNames;
+        this.amounts = amounts;
+        this.init();
+    }
+    /**
+     * init before running a test
+     */
+    TestManager.prototype.init = function () {
+        this.times = [];
+        this.caseId = 0;
+        this.amountId = 0;
+        this.hasNext = true;
+    };
+    /**
+     * run next test case
+     *
+     * @return {Object} case name, case id, amount id, and run time
+     */
+    TestManager.prototype.next = function () {
+        var lastAmountId = this.amountId;
+        var lastCaseId = this.caseId;
+        var test = factory.create(this.caseNames[this.caseId],
+            this.amounts[this.amountId]);
+        ++this.caseId;
+        if (this.caseId >= this.caseNames.length) {
+            // last case for certain amount
+            ++this.amountId;
+            this.caseId = 0;
+            if (this.amountId >= this.amounts.length) {
+                // last case for all
+                this.hasNext = false;
+            }
+        }
+        var time = test.runtime();
+        if (!this.times[lastAmountId]) {
+            this.times[lastAmountId] = [];
+        }
+        this.times[lastAmountId][lastCaseId] = time;
+        return {
+            caseName: this.caseNames[lastCaseId],
+            caseId: lastCaseId,
+            amountId: lastAmountId,
+            time: time
+        };
+    };
+    /**
+     * draw report with ECharts chart
+     *
+     * @param  {Object} container DOM element to draw on
+     */
+    TestManager.prototype.drawReport = function (container) {
+        var chart = echarts.init(container);
+        var that = this;
+        chart.setOption({
+            series: (function () {
+                var series = [];
+                for (var cid = 0; cid < that.caseNames.length; ++cid) {
+                    var data = [];
+                    for (var aid = 0; aid < that.amounts.length; ++aid) {
+                        data.push([that.amounts[aid], that.times[aid][cid]]);
+                    }
+                    series.push({
+                        type: 'line',
+                        data: data,
+                        name: that.caseNames[cid]
+                    });
+                }
+                return series;
+            })(),
+            xAxis: {
+                name: 'Data Amount',
+                type: 'value'
+            },
+            yAxis: {
+                name: 'Run Time (milliseconds)',
+                type: 'value'
+            },
+            legend: {
+                show: true,
+                data: this.caseNames
+            },
+            tooltip: {
+                show: true,
+                trigger: 'axis'
+            }
+        });
+    };
+    return TestManager;
+});
--- a/package.json
+++ b/package.json
@@ -38,12 +38,16 @@
    "zrender": "^3.1.2"
  },
  "devDependencies": {
+    "browser-sync": "^2.13.0",
    "coordtransform": "^2.0.2",
    "escodegen": "^1.8.0",
    "esprima": "^2.7.2",
    "estraverse": "^4.1.1",
    "fs-extra": "^0.26.5",
    "glob": "^7.0.0",
+    "gulp": "^3.9.1",
+    "gulp-typescript": "^2.13.6",
+    "gulp-watch": "^4.3.8",
    "webpack": "^1.12.13",
    "zrender": "^3.1.2"
  }