| <!DOCTYPE html> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| |
| <html> |
| <head> |
| <title>ECharts Stress Test</title> |
| |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| |
| <link rel="stylesheet" href="./dep/bootstrap/bootstrap.min.css"> |
| <!-- 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.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; |
| } |
| |
| textarea { |
| height: 150px; |
| } |
| |
| .progress-bar { |
| transition-duration: 0s; |
| } |
| </style> |
| </head> |
| <body id="app"> |
| <div class="container"> |
| <h1>ECharts Stress Test</h1> |
| |
| <div> |
| <button class="btn" v-bind:class="{'btn-primary': !hasRun, 'btn-default': hasRun}" v-on:click="run"> |
| Start |
| </button> |
| <button class="btn btn-primary" data-target="#export-modal" data-toggle="modal" v-if="hasRun"> |
| Export |
| </button> |
| <span v-if="hasRun || isRunning">Elapsed time: {{ elapsedTime / 1000 }} seconds</span> |
| </div> |
| |
| <div class="progress" v-if="isRunning"> |
| <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ progress }}%;">{{ progress }}%</div> |
| </div> |
| |
| <div id="report" v-if="hasRun"></div> |
| |
| <table id="test-table" class="table table-striped" v-if="hasRun"> |
| <tr> |
| <th>Data Amount</th> |
| <th v-for="name in caseNames">{{ name }}</th> |
| </tr> |
| <tr v-for="(aid, amount) in amounts"> |
| <td>{{ amount }}</td> |
| <th v-for="(cid, name) in caseNames">{{ times[aid][cid] }}</th> |
| </tr> |
| </table> |
| </div> |
| |
| <div class="modal fade" id="export-modal" tabindex="-1" role="dialog"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <h4 class="modal-title">Test Result</h4> |
| </div> |
| <div class="modal-body"> |
| <div> |
| <button class="btn btn-primary" v-on:click="download">Download</button> |
| </div> |
| <textarea v-if="hasRun" class="form-control">{{ result }}</textarea> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of modal --> |
| |
| <script src="./dep/jquery/jquery-2.2.4.js"></script> |
| <script src="./dep/bootstrap/bootstrap.min.js"></script> |
| <script src="./dep/vue/vue.min.js"></script> |
| <script src="./dep/lodash/lodash.js"></script> |
| <script src="./dep/filesaver/FileSaver.min.js"></script> |
| |
| <script type="text/javascript" src="../dist/echarts.js"></script> |
| |
| <script src="../test/esl.js"></script> |
| <script> |
| require.config({ |
| baseUrl: './src' |
| }); |
| require(['app']); |
| </script> |
| </body> |
| </html> |