scalars frontend basically done

frontend/mock/API.md

+# API
+
+## runs
+current runs
+
+url: /data/runs
+
+response:
+```
+["train", "test"]
+
+```
+
+## logdir
+
+url: /data/logdir
+
+response:
+```
+{
+    "logdir": "./tmp/tensorflow/mnist/logs/mnist_with_summaries/"
+}
+```
+
+## data/plugins_listing
+
+url: data/plugins_listing
\ No newline at end of file

frontend/mock/data/plugin/scalars/scalars.js

+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+    if (queryParam.run === 'train') {
+        return {
+            // moock delay
+            _timeout: 0,
+            // mock http status
+            _status: 200,
+            // mock response data
+            _data: {
+                status: 0,
+                msg: 'SUCCESS',
+                data: [[1511842145.705075, 1, 0.05000000074505806], [1511842145.7388, 2, 0.12999999523162842], [1511842145.774563, 3, 0.27000001072883606], [1511842145.806828, 4, 0.4399999976158142], [1511842145.838082, 5, 0.47999998927116394], [1511842145.868955, 6, 0.5899999737739563], [1511842145.899323, 7, 0.6100000143051147], [1511842145.930518, 8, 0.699999988079071], [1511842145.96089, 9, 0.6700000166893005], [1511842146.460557, 11, 0.6499999761581421], [1511842146.4952, 12, 0.7300000190734863], [1511842146.525936, 13, 0.6899999976158142], [1511842146.556059, 14, 0.75], [1511842146.648703, 15, 0.7099999785423279], [1511842146.683295, 16, 0.7900000214576721], [1511842146.719782, 17, 0.8299999833106995], [1511842146.752392, 18, 0.7900000214576721], [1511842146.786562, 19, 0.8299999833106995], [1511842147.296362, 21, 0.8199999928474426], [1511842147.329616, 22, 0.75], [1511842147.36413, 23, 0.800000011920929], [1511842147.394166, 24, 0.8700000047683716], [1511842147.426248, 25, 0.8500000238418579], [1511842147.455792, 26, 0.8799999952316284], [1511842147.486918, 27, 0.8600000143051147], [1511842147.516537, 28, 0.8399999737739563], [1511842147.545978, 29, 0.8999999761581421], [1511842148.059008, 31, 0.8299999833106995], [1511842148.093655, 32, 0.8500000238418579], [1511842148.126041, 33, 0.8799999952316284], [1511842148.156253, 34, 0.9100000262260437], [1511842148.189653, 35, 0.8700000047683716], [1511842148.221602, 36, 0.800000011920929], [1511842148.251149, 37, 0.7900000214576721], [1511842148.281332, 38, 0.8700000047683716], [1511842148.312354, 39, 0.8500000238418579], [1511842148.828949, 41, 0.8700000047683716], [1511842148.865255, 42, 0.8600000143051147], [1511842148.898558, 43, 0.8999999761581421], [1511842148.93859, 44, 0.8799999952316284], [1511842148.97468, 45, 0.8799999952316284], [1511842149.013585, 46, 0.8299999833106995], [1511842149.044709, 47, 0.8500000238418579], [1511842149.077821, 48, 0.8700000047683716], [1511842149.107665, 49, 0.8899999856948853], [1511842149.647978, 51, 0.8600000143051147], [1511842149.686268, 52, 0.8999999761581421], [1511842149.722652, 53, 0.8700000047683716], [1511842149.758858, 54, 0.8700000047683716], [1511842149.795508, 55, 0.8999999761581421], [1511842149.830682, 56, 0.8700000047683716], [1511842149.874498, 57, 0.8600000143051147], [1511842149.916357, 58, 0.8399999737739563], [1511842149.951223, 59, 0.8600000143051147], [1511842150.470112, 61, 0.8500000238418579], [1511842150.505811, 62, 0.9399999976158142], [1511842150.542528, 63, 0.8399999737739563], [1511842150.579082, 64, 0.8999999761581421], [1511842150.611267, 65, 0.8799999952316284], [1511842150.642279, 66, 0.8500000238418579], [1511842150.679586, 67, 0.9399999976158142], [1511842150.709423, 68, 0.8999999761581421], [1511842150.742542, 69, 0.9200000166893005], [1511842151.287115, 71, 0.8700000047683716], [1511842151.320888, 72, 0.9200000166893005], [1511842151.352388, 73, 0.8600000143051147], [1511842151.385154, 74, 0.8600000143051147], [1511842151.421342, 75, 0.8399999737739563], [1511842151.458697, 76, 0.8999999761581421], [1511842151.492929, 77, 0.8399999737739563], [1511842151.524682, 78, 0.9200000166893005], [1511842151.55707, 79, 0.8799999952316284], [1511842152.071344, 81, 0.8500000238418579], [1511842152.101479, 82, 0.949999988079071], [1511842152.132134, 83, 0.8999999761581421], [1511842152.165848, 84, 0.8799999952316284], [1511842152.195162, 85, 0.8899999856948853], [1511842152.224646, 86, 0.9399999976158142], [1511842152.255385, 87, 0.9300000071525574], [1511842152.28573, 88, 0.9100000262260437], [1511842152.315899, 89, 0.8999999761581421], [1511842152.834572, 91, 0.8899999856948853], [1511842152.872045, 92, 0.949999988079071], [1511842152.904879, 93, 0.9800000190734863], [1511842152.940016, 94, 0.8700000047683716], [1511842152.976859, 95, 0.8500000238418579], [1511842153.012571, 96, 0.8999999761581421], [1511842153.043776, 97, 0.8199999928474426], [1511842153.081662, 98, 0.8799999952316284], [1511842153.190446, 99, 0.8700000047683716], [1511842153.698591, 101, 0.9200000166893005], [1511842153.732005, 102, 0.9300000071525574], [1511842153.765796, 103, 0.8500000238418579], [1511842153.797352, 104, 0.9700000286102295], [1511842153.831314, 105, 0.9599999785423279], [1511842153.866427, 106, 0.9300000071525574], [1511842153.896475, 107, 0.8999999761581421], [1511842153.929657, 108, 0.9200000166893005], [1511842153.965421, 109, 0.949999988079071], [1511842154.485552, 111, 0.949999988079071], [1511842154.516489, 112, 0.9100000262260437], [1511842154.548223, 113, 0.8799999952316284], [1511842154.580801, 114, 0.9200000166893005], [1511842154.611307, 115, 0.9200000166893005], [1511842154.642873, 116, 0.9200000166893005], [1511842154.6751, 117, 0.9300000071525574], [1511842154.707684, 118, 0.8999999761581421], [1511842154.744283, 119, 0.9300000071525574], [1511842155.255668, 121, 0.9200000166893005], [1511842155.288454, 122, 0.8899999856948853], [1511842155.320779, 123, 0.9599999785423279], [1511842155.353925, 124, 0.9200000166893005], [1511842155.389438, 125, 0.8899999856948853], [1511842155.424823, 126, 0.9399999976158142], [1511842155.454526, 127, 0.9300000071525574], [1511842155.489204, 128, 0.9399999976158142], [1511842155.521019, 129, 0.9399999976158142], [1511842156.033606, 131, 0.8999999761581421], [1511842156.071066, 132, 0.9100000262260437], [1511842156.100447, 133, 0.8899999856948853], [1511842156.132395, 134, 0.9200000166893005], [1511842156.165163, 135, 0.8700000047683716], [1511842156.203128, 136, 0.8999999761581421], [1511842156.239275, 137, 0.8399999737739563], [1511842156.270908, 138, 0.9200000166893005], [1511842156.303224, 139, 0.9200000166893005], [1511842156.823475, 141, 0.9300000071525574], [1511842156.860178, 142, 0.8999999761581421], [1511842156.89245, 143, 0.8500000238418579], [1511842156.932155, 144, 0.9300000071525574], [1511842156.966936, 145, 0.8999999761581421], [1511842157.002507, 146, 0.9100000262260437], [1511842157.04046, 147, 0.949999988079071], [1511842157.075624, 148, 0.8799999952316284], [1511842157.113062, 149, 0.9100000262260437], [1511842157.610962, 151, 0.9200000166893005], [1511842157.644282, 152, 0.8899999856948853], [1511842157.674532, 153, 0.9399999976158142], [1511842157.704223, 154, 0.9700000286102295], [1511842157.734917, 155, 0.9100000262260437], [1511842157.766545, 156, 0.949999988079071], [1511842157.803228, 157, 0.9300000071525574], [1511842157.833582, 158, 0.9399999976158142], [1511842157.863983, 159, 0.9599999785423279], [1511842158.365138, 161, 0.9399999976158142], [1511842158.402051, 162, 0.8999999761581421], [1511842158.432824, 163, 0.9100000262260437], [1511842158.468544, 164, 0.9399999976158142], [1511842158.501693, 165, 0.9200000166893005], [1511842158.536712, 166, 0.9200000166893005], [1511842158.576052, 167, 0.9100000262260437], [1511842158.608077, 168, 0.9300000071525574], [1511842158.639638, 169, 0.9399999976158142], [1511842159.144704, 171, 0.949999988079071], [1511842159.175508, 172, 0.9200000166893005], [1511842159.206246, 173, 0.9399999976158142], [1511842159.236448, 174, 0.949999988079071], [1511842159.268592, 175, 0.8999999761581421], [1511842159.298385, 176, 0.8999999761581421], [1511842159.330691, 177, 0.9200000166893005], [1511842159.362888, 178, 0.949999988079071], [1511842159.394601, 179, 0.8899999856948853], [1511842159.917987, 181, 0.8500000238418579], [1511842159.949645, 182, 0.9800000190734863], [1511842159.980383, 183, 0.9399999976158142], [1511842160.011846, 184, 0.8999999761581421], [1511842160.043909, 185, 0.8999999761581421], [1511842160.082747, 186, 0.8999999761581421], [1511842160.116125, 187, 0.949999988079071], [1511842160.147119, 188, 0.9100000262260437], [1511842160.182338, 189, 0.9599999785423279], [1511842160.69661, 191, 0.9300000071525574], [1511842160.72888, 192, 0.8899999856948853], [1511842160.762084, 193, 0.9300000071525574], [1511842160.792814, 194, 0.9599999785423279], [1511842160.823444, 195, 0.9100000262260437], [1511842160.852744, 196, 0.9399999976158142], [1511842160.885255, 197, 0.9599999785423279], [1511842160.917985, 198, 0.8999999761581421], [1511842161.028077, 199, 0.949999988079071], [1511842161.548108, 201, 0.9300000071525574], [1511842161.580669, 202, 0.9100000262260437], [1511842161.613862, 203, 0.949999988079071], [1511842161.653309, 204, 0.8899999856948853], [1511842161.691085, 205, 0.9599999785423279], [1511842161.72533, 206, 0.9200000166893005], [1511842161.754774, 207, 0.9300000071525574], [1511842161.786702, 208, 0.9300000071525574], [1511842161.820508, 209, 0.8999999761581421], [1511842162.336378, 211, 0.949999988079071], [1511842162.373533, 212, 0.949999988079071], [1511842162.411207, 213, 0.8899999856948853], [1511842162.4438, 214, 0.9300000071525574], [1511842162.477444, 215, 0.949999988079071], [1511842162.509545, 216, 0.9399999976158142], [1511842162.543586, 217, 0.949999988079071], [1511842162.574829, 218, 0.9300000071525574], [1511842162.612825, 219, 0.9399999976158142], [1511842163.134331, 221, 0.9700000286102295], [1511842163.169464, 222, 0.9200000166893005], [1511842163.203311, 223, 0.9700000286102295], [1511842163.240668, 224, 0.9300000071525574], [1511842163.278642, 225, 0.9100000262260437], [1511842163.318872, 226, 0.9300000071525574], [1511842163.361079, 227, 0.9300000071525574], [1511842163.397876, 228, 0.9800000190734863], [1511842163.430826, 229, 0.9599999785423279], [1511842163.953991, 231, 0.9300000071525574], [1511842163.988582, 232, 0.9399999976158142], [1511842164.021841, 233, 0.949999988079071], [1511842164.052817, 234, 0.9300000071525574], [1511842164.090031, 235, 0.9399999976158142], [1511842164.121797, 236, 0.9100000262260437], [1511842164.158074, 237, 0.949999988079071], [1511842164.189932, 238, 0.9300000071525574], [1511842164.225797, 239, 0.9200000166893005], [1511842164.742692, 241, 0.949999988079071], [1511842164.773757, 242, 0.9800000190734863], [1511842164.810333, 243, 0.9300000071525574], [1511842164.840904, 244, 0.949999988079071], [1511842164.875269, 245, 0.949999988079071], [1511842164.907458, 246, 0.9700000286102295], [1511842164.940818, 247, 0.9200000166893005], [1511842165.032471, 248, 0.9399999976158142], [1511842165.06494, 249, 0.9399999976158142], [1511842165.711591, 251, 0.9200000166893005], [1511842165.742034, 252, 0.9399999976158142], [1511842165.776186, 253, 0.9100000262260437], [1511842165.80631, 254, 0.9300000071525574], [1511842165.841813, 255, 0.9700000286102295], [1511842165.88272, 256, 0.9100000262260437], [1511842165.914834, 257, 0.9399999976158142], [1511842165.944832, 258, 0.8999999761581421], [1511842165.977476, 259, 0.8999999761581421], [1511842166.49414, 261, 0.9300000071525574], [1511842166.530139, 262, 0.9300000071525574], [1511842166.582532, 263, 0.9200000166893005], [1511842166.624934, 264, 0.9399999976158142], [1511842166.65914, 265, 0.9200000166893005], [1511842166.708159, 266, 0.949999988079071], [1511842166.738785, 267, 0.8899999856948853], [1511842166.789074, 268, 0.9599999785423279], [1511842166.821725, 269, 0.949999988079071], [1511842167.351619, 271, 0.8899999856948853], [1511842167.383981, 272, 0.949999988079071], [1511842167.415674, 273, 0.9300000071525574], [1511842167.453889, 274, 0.9300000071525574], [1511842167.487546, 275, 0.9800000190734863], [1511842167.520855, 276, 0.8999999761581421], [1511842167.553859, 277, 0.949999988079071], [1511842167.591104, 278, 0.9800000190734863], [1511842167.627239, 279, 0.9100000262260437], [1511842168.151087, 281, 0.9599999785423279], [1511842168.185722, 282, 0.9300000071525574], [1511842168.225793, 283, 0.9399999976158142], [1511842168.265352, 284, 0.9200000166893005], [1511842168.297638, 285, 0.9599999785423279], [1511842168.331366, 286, 0.8899999856948853], [1511842168.367654, 287, 0.949999988079071], [1511842168.404366, 288, 0.9200000166893005], [1511842168.437306, 289, 0.9599999785423279], [1511842168.977181, 291, 0.9700000286102295], [1511842169.008927, 292, 0.8999999761581421], [1511842169.043079, 293, 0.8999999761581421], [1511842169.079313, 294, 0.9599999785423279], [1511842169.111267, 295, 0.8899999856948853], [1511842169.141979, 296, 0.9700000286102295], [1511842169.173568, 297, 0.9399999976158142], [1511842169.206784, 298, 0.9399999976158142], [1511842169.318883, 299, 0.9100000262260437], [1511842169.836233, 301, 0.949999988079071], [1511842169.869173, 302, 0.9300000071525574], [1511842169.899444, 303, 0.9599999785423279], [1511842169.93236, 304, 0.9399999976158142], [1511842169.964287, 305, 0.9200000166893005], [1511842169.999156, 306, 0.9399999976158142], [1511842170.04658, 307, 0.949999988079071], [1511842170.079765, 308, 0.9399999976158142], [1511842170.116286, 309, 0.9100000262260437], [1511842170.626257, 311, 0.9599999785423279], [1511842170.660356, 312, 0.9399999976158142], [1511842170.69418, 313, 0.9200000166893005], [1511842170.72758, 314, 0.8999999761581421], [1511842170.761281, 315, 0.9399999976158142], [1511842170.795563, 316, 0.9399999976158142], [1511842170.831212, 317, 0.949999988079071], [1511842170.865901, 318, 0.9200000166893005], [1511842170.900623, 319, 0.9100000262260437], [1511842171.442059, 321, 0.9200000166893005], [1511842171.474961, 322, 0.8999999761581421], [1511842171.506307, 323, 0.9399999976158142], [1511842171.539442, 324, 0.949999988079071], [1511842171.570183, 325, 0.9700000286102295], [1511842171.600969, 326, 0.9300000071525574], [1511842171.6316, 327, 0.949999988079071], [1511842171.665024, 328, 0.9399999976158142], [1511842171.697585, 329, 0.9399999976158142], [1511842172.226505, 331, 0.9300000071525574], [1511842172.261344, 332, 0.949999988079071], [1511842172.296245, 333, 0.9300000071525574], [1511842172.326279, 334, 0.9700000286102295], [1511842172.358168, 335, 0.9100000262260437], [1511842172.392341, 336, 0.9399999976158142], [1511842172.422466, 337, 0.9399999976158142], [1511842172.459868, 338, 0.9599999785423279], [1511842172.493555, 339, 0.949999988079071], [1511842173.033582, 341, 0.949999988079071], [1511842173.073034, 342, 0.9300000071525574], [1511842173.104858, 343, 0.9599999785423279], [1511842173.140056, 344, 0.8899999856948853], [1511842173.178958, 345, 0.9399999976158142], [1511842173.21675, 346, 0.9300000071525574], [1511842173.246909, 347, 0.9700000286102295], [1511842173.282099, 348, 0.9100000262260437], [1511842173.317242, 349, 0.9599999785423279], [1511842173.847353, 351, 0.9599999785423279], [1511842173.885366, 352, 0.9599999785423279], [1511842173.921206, 353, 0.8999999761581421], [1511842173.953769, 354, 0.9399999976158142], [1511842173.991128, 355, 0.9599999785423279], [1511842174.02312, 356, 0.8700000047683716], [1511842174.056031, 357, 0.9399999976158142], [1511842174.08923, 358, 0.9599999785423279], [1511842174.127158, 359, 0.9800000190734863], [1511842174.652944, 361, 0.9200000166893005], [1511842174.687431, 362, 0.9900000095367432], [1511842174.71948, 363, 0.9399999976158142], [1511842174.753943, 364, 0.9599999785423279], [1511842174.78847, 365, 0.9700000286102295], [1511842174.823361, 366, 0.8799999952316284], [1511842174.856826, 367, 0.9300000071525574], [1511842174.891638, 368, 0.8999999761581421], [1511842174.925622, 369, 0.9599999785423279], [1511842175.439573, 371, 0.9700000286102295], [1511842175.474021, 372, 0.9300000071525574], [1511842175.504075, 373, 0.9599999785423279], [1511842175.540268, 374, 0.9599999785423279], [1511842175.574921, 375, 0.9800000190734863], [1511842175.608212, 376, 0.949999988079071], [1511842175.64061, 377, 0.949999988079071], [1511842175.671253, 378, 0.9399999976158142], [1511842175.702623, 379, 0.949999988079071], [1511842176.214339, 381, 0.949999988079071], [1511842176.248076, 382, 0.8999999761581421], [1511842176.286246, 383, 0.949999988079071], [1511842176.319941, 384, 0.9300000071525574], [1511842176.357204, 385, 0.9100000262260437], [1511842176.388956, 386, 0.949999988079071], [1511842176.419332, 387, 0.9300000071525574], [1511842176.451727, 388, 0.9599999785423279], [1511842176.484456, 389, 0.9399999976158142], [1511842177.034638, 391, 0.9800000190734863], [1511842177.067667, 392, 0.9200000166893005], [1511842177.101138, 393, 0.9200000166893005], [1511842177.135038, 394, 0.9700000286102295], [1511842177.170068, 395, 0.9399999976158142], [1511842177.200651, 396, 0.949999988079071], [1511842177.23465, 397, 0.9599999785423279], [1511842177.269173, 398, 0.9700000286102295], [1511842177.379705, 399, 0.9300000071525574], [1511842177.930872, 401, 0.9700000286102295], [1511842177.964943, 402, 0.9200000166893005], [1511842177.999324, 403, 0.949999988079071], [1511842178.033477, 404, 0.9900000095367432], [1511842178.071781, 405, 0.949999988079071], [1511842178.105857, 406, 0.949999988079071], [1511842178.135511, 407, 0.9300000071525574], [1511842178.167634, 408, 0.9300000071525574], [1511842178.199537, 409, 0.9200000166893005], [1511842178.717725, 411, 0.9399999976158142], [1511842178.74796, 412, 0.9399999976158142], [1511842178.780912, 413, 0.949999988079071], [1511842178.811067, 414, 0.949999988079071], [1511842178.84161, 415, 0.9399999976158142], [1511842178.878333, 416, 0.949999988079071], [1511842178.914753, 417, 0.9100000262260437], [1511842178.947455, 418, 0.9800000190734863], [1511842178.979425, 419, 0.9700000286102295], [1511842179.503057, 421, 0.9200000166893005], [1511842179.540604, 422, 0.9300000071525574], [1511842179.573449, 423, 0.9300000071525574], [1511842179.608729, 424, 0.949999988079071], [1511842179.645117, 425, 0.949999988079071], [1511842179.678533, 426, 0.9599999785423279], [1511842179.725027, 427, 0.9100000262260437], [1511842179.758991, 428, 0.9700000286102295], [1511842179.78958, 429, 0.9300000071525574], [1511842180.311945, 431, 0.9700000286102295], [1511842180.342856, 432, 0.9800000190734863], [1511842180.372838, 433, 0.949999988079071], [1511842180.402146, 434, 0.9100000262260437], [1511842180.43488, 435, 0.9200000166893005], [1511842180.467817, 436, 0.8999999761581421], [1511842180.497947, 437, 0.9599999785423279], [1511842180.529357, 438, 0.9399999976158142], [1511842180.561293, 439, 0.949999988079071], [1511842181.077772, 441, 0.9399999976158142], [1511842181.108623, 442, 0.949999988079071], [1511842181.140136, 443, 0.9900000095367432], [1511842181.174364, 444, 0.9700000286102295], [1511842181.20535, 445, 0.9300000071525574], [1511842181.23487, 446, 0.9700000286102295], [1511842181.267768, 447, 0.9200000166893005], [1511842181.296881, 448, 0.9599999785423279], [1511842181.331577, 449, 0.9599999785423279], [1511842181.84731, 451, 0.9700000286102295], [1511842181.877643, 452, 0.949999988079071], [1511842181.90728, 453, 0.9200000166893005], [1511842181.937846, 454, 0.9599999785423279], [1511842181.971116, 455, 0.949999988079071], [1511842182.000763, 456, 0.949999988079071], [1511842182.037276, 457, 0.9399999976158142], [1511842182.06702, 458, 0.9399999976158142], [1511842182.096206, 459, 0.9300000071525574], [1511842182.611312, 461, 0.949999988079071], [1511842182.64513, 462, 0.9599999785423279], [1511842182.674909, 463, 0.9300000071525574], [1511842182.705437, 464, 0.9300000071525574], [1511842182.735784, 465, 1.0], [1511842182.767558, 466, 0.949999988079071], [1511842182.796914, 467, 0.949999988079071], [1511842182.826817, 468, 0.8999999761581421], [1511842182.857851, 469, 0.9800000190734863], [1511842183.352468, 471, 0.9800000190734863], [1511842183.384449, 472, 0.8799999952316284], [1511842183.420997, 473, 0.9300000071525574], [1511842183.452375, 474, 0.9399999976158142], [1511842183.483695, 475, 0.949999988079071], [1511842183.514538, 476, 0.949999988079071], [1511842183.547066, 477, 0.9599999785423279], [1511842183.577378, 478, 0.9399999976158142], [1511842183.613494, 479, 0.949999988079071], [1511842184.166345, 481, 0.9599999785423279], [1511842184.198856, 482, 0.9300000071525574], [1511842184.231571, 483, 0.9399999976158142], [1511842184.261741, 484, 0.949999988079071], [1511842184.291412, 485, 0.9599999785423279], [1511842184.321249, 486, 0.9900000095367432], [1511842184.351878, 487, 0.9300000071525574], [1511842184.381002, 488, 0.9399999976158142], [1511842184.410772, 489, 0.9700000286102295], [1511842184.908431, 491, 0.949999988079071], [1511842184.941166, 492, 0.949999988079071], [1511842184.978217, 493, 0.9700000286102295], [1511842185.008197, 494, 0.9399999976158142], [1511842185.039879, 495, 0.9800000190734863], [1511842185.070592, 496, 0.9599999785423279], [1511842185.10259, 497, 0.9599999785423279], [1511842185.133795, 498, 0.9900000095367432], [1511842185.243204, 499, 0.9599999785423279], [1511842185.856761, 501, 0.949999988079071], [1511842185.896018, 502, 0.9700000286102295], [1511842185.943021, 503, 0.949999988079071], [1511842185.981642, 504, 0.949999988079071], [1511842186.023147, 505, 0.9800000190734863], [1511842186.058391, 506, 0.949999988079071], [1511842186.092093, 507, 0.9599999785423279], [1511842186.134389, 508, 0.9200000166893005], [1511842186.168454, 509, 0.9300000071525574], [1511842186.73473, 511, 0.9399999976158142], [1511842186.765813, 512, 0.9399999976158142], [1511842186.798392, 513, 0.9599999785423279], [1511842186.832886, 514, 0.9700000286102295], [1511842186.869, 515, 0.9399999976158142], [1511842186.899931, 516, 0.9399999976158142], [1511842186.92933, 517, 0.9700000286102295], [1511842186.961637, 518, 0.949999988079071], [1511842186.993339, 519, 0.949999988079071], [1511842187.51295, 521, 0.949999988079071], [1511842187.542084, 522, 0.9300000071525574], [1511842187.571555, 523, 0.9800000190734863], [1511842187.600865, 524, 0.949999988079071], [1511842187.630905, 525, 0.9700000286102295], [1511842187.66434, 526, 0.9599999785423279], [1511842187.695883, 527, 0.9399999976158142], [1511842187.734118, 528, 0.949999988079071], [1511842187.768383, 529, 0.9399999976158142], [1511842188.2609, 531, 0.9599999785423279], [1511842188.291538, 532, 0.949999988079071], [1511842188.324743, 533, 0.949999988079071], [1511842188.359286, 534, 0.9399999976158142], [1511842188.392047, 535, 0.9300000071525574], [1511842188.421359, 536, 0.9399999976158142], [1511842188.454753, 537, 0.949999988079071], [1511842188.48794, 538, 0.9900000095367432], [1511842188.524741, 539, 0.9599999785423279], [1511842189.0112, 541, 0.949999988079071], [1511842189.043185, 542, 0.9300000071525574], [1511842189.074307, 543, 0.9700000286102295], [1511842189.106053, 544, 0.9399999976158142], [1511842189.135565, 545, 0.9700000286102295], [1511842189.168538, 546, 0.9599999785423279], [1511842189.201185, 547, 0.9399999976158142], [1511842189.235236, 548, 0.9900000095367432], [1511842189.26819, 549, 0.949999988079071], [1511842189.760432, 551, 0.9300000071525574], [1511842189.789696, 552, 0.9599999785423279], [1511842189.818744, 553, 0.9200000166893005], [1511842189.848042, 554, 0.949999988079071], [1511842189.877089, 555, 0.9399999976158142], [1511842189.907031, 556, 0.949999988079071], [1511842189.936881, 557, 0.9800000190734863], [1511842189.966071, 558, 0.9399999976158142], [1511842189.995653, 559, 0.9900000095367432], [1511842190.508212, 561, 0.9200000166893005], [1511842190.540299, 562, 0.9800000190734863], [1511842190.578574, 563, 0.9300000071525574], [1511842190.610377, 564, 0.949999988079071], [1511842190.643136, 565, 0.9399999976158142], [1511842190.672663, 566, 1.0], [1511842190.707029, 567, 0.9900000095367432], [1511842190.739414, 568, 0.949999988079071], [1511842190.77237, 569, 0.9599999785423279], [1511842191.31564, 571, 0.9300000071525574], [1511842191.348465, 572, 0.9900000095367432], [1511842191.382138, 573, 0.949999988079071], [1511842191.412707, 574, 0.9399999976158142], [1511842191.443585, 575, 0.9599999785423279], [1511842191.477383, 576, 0.9700000286102295], [1511842191.510109, 577, 0.9399999976158142], [1511842191.540084, 578, 0.9399999976158142], [1511842191.569611, 579, 0.9599999785423279], [1511842192.080061, 581, 0.949999988079071], [1511842192.114685, 582, 0.949999988079071], [1511842192.146026, 583, 0.9599999785423279], [1511842192.179577, 584, 0.9300000071525574], [1511842192.213491, 585, 0.949999988079071], [1511842192.247531, 586, 0.949999988079071], [1511842192.279046, 587, 0.9700000286102295], [1511842192.3092, 588, 0.9300000071525574], [1511842192.343594, 589, 0.9700000286102295], [1511842192.842748, 591, 0.9599999785423279], [1511842192.872712, 592, 0.9700000286102295], [1511842192.903806, 593, 0.9700000286102295], [1511842192.935047, 594, 0.949999988079071], [1511842192.966689, 595, 0.9300000071525574], [1511842192.996178, 596, 1.0], [1511842193.025323, 597, 0.9300000071525574], [1511842193.059378, 598, 0.949999988079071], [1511842193.161189, 599, 0.9599999785423279], [1511842193.658418, 601, 0.9900000095367432], [1511842193.688131, 602, 0.9399999976158142], [1511842193.720422, 603, 0.9800000190734863], [1511842193.752308, 604, 0.9599999785423279], [1511842193.782545, 605, 0.949999988079071], [1511842193.814567, 606, 0.9599999785423279], [1511842193.848188, 607, 0.9399999976158142], [1511842193.879656, 608, 0.9700000286102295], [1511842193.910992, 609, 0.9900000095367432], [1511842194.408775, 611, 0.949999988079071], [1511842194.557519, 612, 0.9900000095367432], [1511842194.59024, 613, 0.9700000286102295], [1511842194.62302, 614, 0.9399999976158142], [1511842194.656742, 615, 0.9599999785423279], [1511842194.68816, 616, 0.9900000095367432], [1511842194.720722, 617, 0.9300000071525574], [1511842194.752064, 618, 0.9800000190734863], [1511842194.784808, 619, 0.9100000262260437], [1511842195.290169, 621, 0.949999988079071], [1511842195.323044, 622, 0.9700000286102295], [1511842195.353092, 623, 0.9900000095367432], [1511842195.386405, 624, 0.949999988079071], [1511842195.417719, 625, 0.9700000286102295], [1511842195.471398, 626, 0.9800000190734863], [1511842195.508423, 627, 0.9599999785423279], [1511842195.543529, 628, 0.9700000286102295], [1511842195.582063, 629, 0.9700000286102295], [1511842196.143761, 631, 0.9700000286102295], [1511842196.182851, 632, 0.9700000286102295], [1511842196.214629, 633, 0.9700000286102295], [1511842196.253051, 634, 0.9700000286102295], [1511842196.287821, 635, 0.949999988079071], [1511842196.319766, 636, 0.9399999976158142], [1511842196.354184, 637, 0.9399999976158142], [1511842196.38808, 638, 0.9599999785423279], [1511842196.421604, 639, 0.949999988079071], [1511842196.947931, 641, 1.0], [1511842196.977982, 642, 0.949999988079071], [1511842197.013177, 643, 0.9599999785423279], [1511842197.053432, 644, 0.9599999785423279], [1511842197.089024, 645, 0.9700000286102295], [1511842197.120129, 646, 0.9599999785423279], [1511842197.150194, 647, 0.9300000071525574], [1511842197.18433, 648, 0.9700000286102295], [1511842197.214245, 649, 0.9599999785423279], [1511842197.734399, 651, 0.9599999785423279], [1511842197.765878, 652, 0.949999988079071], [1511842197.795536, 653, 0.9300000071525574], [1511842197.828955, 654, 0.949999988079071], [1511842197.858018, 655, 0.949999988079071], [1511842197.88918, 656, 0.9300000071525574], [1511842197.921247, 657, 0.9599999785423279], [1511842197.961132, 658, 0.9599999785423279], [1511842197.990723, 659, 0.949999988079071], [1511842198.489996, 661, 0.9700000286102295], [1511842198.520217, 662, 0.9900000095367432], [1511842198.550925, 663, 1.0], [1511842198.582604, 664, 0.9700000286102295], [1511842198.612304, 665, 0.9700000286102295], [1511842198.648211, 666, 0.9300000071525574], [1511842198.686078, 667, 0.9599999785423279], [1511842198.717921, 668, 0.949999988079071], [1511842198.750968, 669, 0.9599999785423279], [1511842199.258821, 671, 0.9399999976158142], [1511842199.291037, 672, 0.9800000190734863], [1511842199.320875, 673, 0.9700000286102295], [1511842199.352976, 674, 0.949999988079071], [1511842199.382681, 675, 0.9800000190734863], [1511842199.411833, 676, 0.949999988079071], [1511842199.443132, 677, 0.9700000286102295], [1511842199.475117, 678, 0.9700000286102295], [1511842199.505664, 679, 0.949999988079071], [1511842200.00445, 681, 0.949999988079071], [1511842200.037647, 682, 0.9900000095367432], [1511842200.073666, 683, 0.9200000166893005], [1511842200.104847, 684, 0.9200000166893005], [1511842200.137768, 685, 0.9300000071525574], [1511842200.170784, 686, 0.9800000190734863], [1511842200.204724, 687, 0.9800000190734863], [1511842200.240477, 688, 0.9800000190734863], [1511842200.275783, 689, 0.9900000095367432], [1511842200.81989, 691, 0.9700000286102295], [1511842200.858525, 692, 0.9300000071525574], [1511842200.890363, 693, 0.949999988079071], [1511842200.932829, 694, 0.9599999785423279], [1511842200.962743, 695, 0.9800000190734863], [1511842200.994843, 696, 0.9200000166893005], [1511842201.03947, 697, 0.9800000190734863], [1511842201.070836, 698, 0.9399999976158142], [1511842201.246026, 699, 0.9100000262260437], [1511842201.786404, 701, 0.9300000071525574], [1511842201.819202, 702, 0.9800000190734863], [1511842201.856957, 703, 0.9200000166893005], [1511842201.888767, 704, 1.0], [1511842201.92143, 705, 0.9399999976158142], [1511842201.961242, 706, 0.9700000286102295], [1511842201.996298, 707, 0.9200000166893005], [1511842202.032258, 708, 0.9800000190734863], [1511842202.069833, 709, 0.9300000071525574], [1511842202.5957, 711, 0.9800000190734863], [1511842202.632072, 712, 0.9800000190734863], [1511842202.664469, 713, 0.9700000286102295], [1511842202.696135, 714, 0.9300000071525574], [1511842202.72853, 715, 0.9700000286102295], [1511842202.759628, 716, 0.9800000190734863], [1511842202.794048, 717, 0.9800000190734863], [1511842202.827036, 718, 0.949999988079071], [1511842202.858473, 719, 0.9700000286102295], [1511842203.391985, 721, 0.9599999785423279], [1511842203.4215, 722, 0.9399999976158142], [1511842203.453421, 723, 0.9800000190734863], [1511842203.484233, 724, 0.9700000286102295], [1511842203.516743, 725, 0.9900000095367432], [1511842203.550632, 726, 0.9800000190734863], [1511842203.584461, 727, 0.9800000190734863], [1511842203.617915, 728, 0.9599999785423279], [1511842203.652398, 729, 0.9700000286102295], [1511842204.185468, 731, 0.9800000190734863], [1511842204.217265, 732, 0.9800000190734863], [1511842204.249281, 733, 1.0], [1511842204.282808, 734, 0.9700000286102295], [1511842204.314277, 735, 0.9700000286102295], [1511842204.345353, 736, 0.949999988079071], [1511842204.375898, 737, 0.9599999785423279], [1511842204.411013, 738, 0.9100000262260437], [1511842204.441207, 739, 0.9700000286102295], [1511842204.967109, 741, 0.9399999976158142], [1511842204.999614, 742, 0.9900000095367432], [1511842205.037706, 743, 0.9599999785423279], [1511842205.071398, 744, 0.9700000286102295], [1511842205.109827, 745, 0.9800000190734863], [1511842205.150377, 746, 0.9700000286102295], [1511842205.196859, 747, 0.9399999976158142], [1511842205.238587, 748, 0.9900000095367432], [1511842205.284592, 749, 0.9700000286102295], [1511842205.913203, 751, 0.9599999785423279], [1511842205.977628, 752, 0.9800000190734863], [1511842206.049908, 753, 0.9399999976158142], [1511842206.088929, 754, 0.9599999785423279], [1511842206.12656, 755, 0.9700000286102295], [1511842206.171609, 756, 0.9700000286102295], [1511842206.207161, 757, 0.9599999785423279], [1511842206.259537, 758, 0.9900000095367432], [1511842206.299124, 759, 0.9800000190734863], [1511842206.839902, 761, 0.9399999976158142], [1511842206.869605, 762, 0.9800000190734863], [1511842206.901015, 763, 0.9599999785423279], [1511842206.931029, 764, 0.9700000286102295], [1511842206.961387, 765, 0.9300000071525574], [1511842206.992158, 766, 0.9599999785423279], [1511842207.02291, 767, 0.9700000286102295], [1511842207.055302, 768, 0.9599999785423279], [1511842207.089098, 769, 0.9399999976158142], [1511842207.593272, 771, 0.9800000190734863], [1511842207.624582, 772, 0.949999988079071], [1511842207.654845, 773, 0.9599999785423279], [1511842207.688258, 774, 0.9800000190734863], [1511842207.718489, 775, 0.9700000286102295], [1511842207.747767, 776, 0.949999988079071], [1511842207.778593, 777, 0.9700000286102295], [1511842207.808232, 778, 0.9599999785423279], [1511842207.838551, 779, 0.9599999785423279], [1511842208.397092, 781, 0.9700000286102295], [1511842208.427281, 782, 0.949999988079071], [1511842208.458664, 783, 0.9800000190734863], [1511842208.488235, 784, 0.9599999785423279], [1511842208.519785, 785, 0.9599999785423279], [1511842208.554034, 786, 0.9800000190734863], [1511842208.586204, 787, 0.9800000190734863], [1511842208.619628, 788, 0.9700000286102295], [1511842208.654394, 789, 0.9800000190734863], [1511842209.194778, 791, 0.9800000190734863], [1511842209.226194, 792, 0.9599999785423279], [1511842209.266281, 793, 0.9599999785423279], [1511842209.295469, 794, 0.9800000190734863], [1511842209.327287, 795, 0.9800000190734863], [1511842209.364207, 796, 0.9599999785423279], [1511842209.395033, 797, 0.9599999785423279], [1511842209.429895, 798, 0.949999988079071], [1511842209.556844, 799, 0.949999988079071], [1511842210.130269, 801, 0.9700000286102295], [1511842210.160287, 802, 0.9700000286102295], [1511842210.193199, 803, 0.9700000286102295], [1511842210.22632, 804, 0.9399999976158142], [1511842210.26311, 805, 0.9800000190734863], [1511842210.309019, 806, 0.9599999785423279], [1511842210.347609, 807, 0.9800000190734863], [1511842210.390996, 808, 0.9900000095367432], [1511842210.439887, 809, 0.9200000166893005], [1511842211.003122, 811, 0.9599999785423279], [1511842211.037074, 812, 0.9599999785423279], [1511842211.067644, 813, 0.9399999976158142], [1511842211.101507, 814, 0.9599999785423279], [1511842211.140325, 815, 0.9599999785423279], [1511842211.174903, 816, 0.949999988079071], [1511842211.224003, 817, 0.9700000286102295], [1511842211.286801, 818, 0.9900000095367432], [1511842211.327776, 819, 0.9800000190734863], [1511842211.985095, 821, 0.9200000166893005], [1511842212.030882, 822, 0.9700000286102295], [1511842212.070569, 823, 0.9399999976158142], [1511842212.118181, 824, 0.9800000190734863], [1511842212.157094, 825, 0.9599999785423279], [1511842212.226286, 826, 0.9599999785423279], [1511842212.277023, 827, 0.9900000095367432], [1511842212.311592, 828, 1.0], [1511842212.348642, 829, 0.9599999785423279], [1511842212.91796, 831, 0.9900000095367432], [1511842212.950586, 832, 0.9800000190734863], [1511842212.996488, 833, 0.9599999785423279], [1511842213.027555, 834, 0.9800000190734863], [1511842213.058825, 835, 0.9800000190734863], [1511842213.091046, 836, 0.9599999785423279], [1511842213.125024, 837, 0.9599999785423279], [1511842213.160207, 838, 0.9399999976158142], [1511842213.191536, 839, 0.9700000286102295], [1511842213.728065, 841, 0.9700000286102295], [1511842213.762401, 842, 0.9700000286102295], [1511842213.799732, 843, 0.9700000286102295], [1511842213.833657, 844, 0.9800000190734863], [1511842213.866312, 845, 0.9800000190734863], [1511842213.902647, 846, 0.9599999785423279], [1511842213.942028, 847, 0.9700000286102295], [1511842213.983694, 848, 0.9599999785423279], [1511842214.017235, 849, 0.949999988079071], [1511842214.539192, 851, 0.9800000190734863], [1511842214.570802, 852, 0.9599999785423279], [1511842214.602371, 853, 0.9800000190734863], [1511842214.63469, 854, 0.9599999785423279], [1511842214.666527, 855, 0.9700000286102295], [1511842214.7013, 856, 0.949999988079071], [1511842214.736796, 857, 0.9700000286102295], [1511842214.773076, 858, 0.9900000095367432], [1511842214.804659, 859, 0.9900000095367432], [1511842215.333667, 861, 0.9700000286102295], [1511842215.36866, 862, 0.9800000190734863], [1511842215.408818, 863, 0.9800000190734863], [1511842215.446431, 864, 0.9900000095367432], [1511842215.484602, 865, 0.9399999976158142], [1511842215.520258, 866, 0.9800000190734863], [1511842215.555225, 867, 0.9800000190734863], [1511842215.592115, 868, 0.9599999785423279], [1511842215.630665, 869, 0.9700000286102295], [1511842216.128021, 871, 1.0], [1511842216.159525, 872, 0.9200000166893005], [1511842216.191044, 873, 0.9800000190734863], [1511842216.22625, 874, 0.949999988079071], [1511842216.264204, 875, 1.0], [1511842216.301708, 876, 0.9300000071525574], [1511842216.346822, 877, 0.949999988079071], [1511842216.387908, 878, 0.9900000095367432], [1511842216.431012, 879, 0.9399999976158142], [1511842216.948288, 881, 0.9800000190734863], [1511842216.980613, 882, 0.9599999785423279], [1511842217.01133, 883, 0.9700000286102295], [1511842217.042047, 884, 0.9900000095367432], [1511842217.073482, 885, 0.9300000071525574], [1511842217.108726, 886, 0.9599999785423279], [1511842217.14001, 887, 0.9800000190734863], [1511842217.171317, 888, 0.9599999785423279], [1511842217.203606, 889, 0.9800000190734863], [1511842217.753845, 891, 0.9399999976158142], [1511842217.789057, 892, 0.9599999785423279], [1511842217.830139, 893, 0.9800000190734863], [1511842217.864796, 894, 0.949999988079071], [1511842217.897203, 895, 0.9800000190734863], [1511842217.929849, 896, 0.949999988079071], [1511842217.963099, 897, 0.9800000190734863], [1511842217.996219, 898, 0.9599999785423279], [1511842218.111479, 899, 0.9599999785423279], [1511842218.683541, 901, 0.9700000286102295], [1511842218.714867, 902, 0.9900000095367432], [1511842218.745403, 903, 0.949999988079071], [1511842218.775027, 904, 0.9599999785423279], [1511842218.804858, 905, 0.9700000286102295], [1511842218.834642, 906, 0.9599999785423279], [1511842218.865326, 907, 0.9900000095367432], [1511842218.896291, 908, 0.9700000286102295], [1511842218.926799, 909, 0.9800000190734863], [1511842219.457638, 911, 0.949999988079071], [1511842219.489308, 912, 0.9700000286102295], [1511842219.524922, 913, 0.9100000262260437], [1511842219.55795, 914, 0.9900000095367432], [1511842219.595283, 915, 0.9900000095367432], [1511842219.687366, 916, 0.9900000095367432], [1511842219.727115, 917, 0.9800000190734863], [1511842219.768945, 918, 0.9599999785423279], [1511842219.801816, 919, 0.9800000190734863], [1511842220.390596, 921, 0.9900000095367432], [1511842220.43033, 922, 0.9700000286102295], [1511842220.469885, 923, 0.9700000286102295], [1511842220.501432, 924, 0.949999988079071], [1511842220.534336, 925, 0.949999988079071], [1511842220.577459, 926, 0.9800000190734863], [1511842220.634076, 927, 0.9700000286102295], [1511842220.668908, 928, 0.9599999785423279], [1511842220.7005, 929, 0.9900000095367432], [1511842221.287896, 931, 0.9800000190734863], [1511842221.319684, 932, 0.9599999785423279], [1511842221.355376, 933, 0.949999988079071], [1511842221.390386, 934, 0.9700000286102295], [1511842221.424849, 935, 0.9599999785423279], [1511842221.455576, 936, 0.9800000190734863], [1511842221.488522, 937, 0.9700000286102295], [1511842221.523331, 938, 0.949999988079071], [1511842221.562103, 939, 0.9800000190734863], [1511842222.11082, 941, 0.9399999976158142], [1511842222.144042, 942, 1.0], [1511842222.180893, 943, 0.9599999785423279], [1511842222.214718, 944, 0.9599999785423279], [1511842222.250779, 945, 0.9399999976158142], [1511842222.283768, 946, 0.9599999785423279], [1511842222.318964, 947, 0.949999988079071], [1511842222.351751, 948, 0.9599999785423279], [1511842222.382504, 949, 0.9800000190734863], [1511842222.889534, 951, 0.9800000190734863], [1511842222.921617, 952, 0.949999988079071], [1511842222.953747, 953, 0.9399999976158142], [1511842222.989928, 954, 0.9399999976158142], [1511842223.023551, 955, 0.9700000286102295], [1511842223.060438, 956, 0.9800000190734863], [1511842223.097254, 957, 0.9599999785423279], [1511842223.138771, 958, 0.9800000190734863], [1511842223.174054, 959, 0.9399999976158142], [1511842223.693137, 961, 0.949999988079071], [1511842223.723562, 962, 0.9800000190734863], [1511842223.755989, 963, 0.9700000286102295], [1511842223.790843, 964, 0.9900000095367432], [1511842223.822565, 965, 0.9800000190734863], [1511842223.853841, 966, 0.9900000095367432], [1511842223.892184, 967, 0.9399999976158142], [1511842223.928116, 968, 0.9800000190734863], [1511842223.961467, 969, 0.9700000286102295], [1511842224.536617, 971, 0.9900000095367432], [1511842224.577399, 972, 0.9599999785423279], [1511842224.617609, 973, 0.9700000286102295], [1511842224.655355, 974, 0.9599999785423279], [1511842224.689069, 975, 0.949999988079071], [1511842224.72824, 976, 0.9700000286102295], [1511842224.759455, 977, 0.949999988079071], [1511842224.793144, 978, 0.9599999785423279], [1511842224.824675, 979, 0.9700000286102295], [1511842225.342267, 981, 0.9599999785423279], [1511842225.374886, 982, 0.9700000286102295], [1511842225.407038, 983, 0.9800000190734863], [1511842225.438013, 984, 1.0], [1511842225.468219, 985, 0.9800000190734863], [1511842225.499246, 986, 0.9800000190734863], [1511842225.528987, 987, 0.949999988079071], [1511842225.56184, 988, 0.9599999785423279], [1511842225.596399, 989, 0.949999988079071], [1511842226.096082, 991, 0.9399999976158142], [1511842226.125964, 992, 0.9800000190734863], [1511842226.156644, 993, 0.9599999785423279], [1511842226.187556, 994, 0.9599999785423279], [1511842226.218394, 995, 0.9900000095367432], [1511842226.250693, 996, 0.9599999785423279], [1511842226.284415, 997, 0.9800000190734863], [1511842226.316085, 998, 0.9700000286102295], [1511842226.42392, 999, 0.9599999785423279]]
+            }
+        }
+    }
+    else {
+        return {
+            // moock delay
+            _timeout: 0,
+            // mock http status
+            _status: 200,
+            // mock response data
+            _data: {
+                status: 0,
+                msg: 'SUCCESS',
+                data: [[1511842145.514333, 0, 0.094200000166893], [1511842146.427384, 10, 0.7394000291824341], [1511842147.260405, 20, 0.8302000164985657], [1511842148.019018, 30, 0.8662999868392944], [1511842148.793569, 40, 0.8877999782562256], [1511842149.610228, 50, 0.8952000141143799], [1511842150.437095, 60, 0.9031000137329102], [1511842151.254679, 70, 0.9004999995231628], [1511842152.039353, 80, 0.9110000133514404], [1511842152.800043, 90, 0.9143000245094299], [1511842153.668115, 100, 0.9175000190734863], [1511842154.453025, 110, 0.9190000295639038], [1511842155.224028, 120, 0.9214000105857849], [1511842156.001674, 130, 0.9204999804496765], [1511842156.788682, 140, 0.9297999739646912], [1511842157.580495, 150, 0.9289000034332275], [1511842158.331122, 160, 0.9283999800682068], [1511842159.112936, 170, 0.9298999905586243], [1511842159.881351, 180, 0.9301000237464905], [1511842160.659058, 190, 0.9330999851226807], [1511842161.515267, 200, 0.9345999956130981], [1511842162.301136, 210, 0.9351000189781189], [1511842163.092769, 220, 0.9343000054359436], [1511842163.920516, 230, 0.9372000098228455], [1511842164.705352, 240, 0.9351999759674072], [1511842165.674882, 250, 0.9369999766349792], [1511842166.462909, 260, 0.9444000124931335], [1511842167.319383, 270, 0.9437000155448914], [1511842168.114944, 280, 0.9441999793052673], [1511842168.942822, 290, 0.9441999793052673], [1511842169.801691, 300, 0.9453999996185303], [1511842170.594651, 310, 0.9419000148773193], [1511842171.406169, 320, 0.9437000155448914], [1511842172.190729, 330, 0.9488999843597412], [1511842172.997593, 340, 0.9483000040054321], [1511842173.815758, 350, 0.9453999996185303], [1511842174.613314, 360, 0.9480000138282776], [1511842175.402401, 370, 0.9513999819755554], [1511842176.180888, 380, 0.9480999708175659], [1511842176.999133, 390, 0.9520000219345093], [1511842177.900425, 400, 0.954200029373169], [1511842178.682129, 410, 0.9490000009536743], [1511842179.471428, 420, 0.9534000158309937], [1511842180.272808, 430, 0.9549999833106995], [1511842181.044304, 440, 0.9545999765396118], [1511842181.814283, 450, 0.951200008392334], [1511842182.576814, 460, 0.9560999870300293], [1511842183.319649, 470, 0.9588000178337097], [1511842184.080669, 480, 0.9555000066757202], [1511842184.877782, 490, 0.955299973487854], [1511842185.816123, 500, 0.9545000195503235], [1511842186.704832, 510, 0.9559999704360962], [1511842187.475836, 520, 0.9563999772071838], [1511842188.231245, 530, 0.9596999883651733], [1511842188.981693, 540, 0.9562000036239624], [1511842189.72966, 550, 0.9553999900817871], [1511842190.468321, 560, 0.9580000042915344], [1511842191.281197, 570, 0.9575999975204468], [1511842192.046349, 580, 0.9589999914169312], [1511842192.808289, 590, 0.9599999785423279], [1511842193.623127, 600, 0.9603999853134155], [1511842194.371868, 610, 0.9605000019073486], [1511842195.257612, 620, 0.9606000185012817], [1511842196.113539, 630, 0.9559999704360962], [1511842196.914175, 640, 0.9610000252723694], [1511842197.701817, 650, 0.9621999859809875], [1511842198.457409, 660, 0.9599000215530396], [1511842199.228452, 670, 0.9620000123977661], [1511842199.973789, 680, 0.9628000259399414], [1511842200.786072, 690, 0.963699996471405], [1511842201.752806, 700, 0.963100016117096], [1511842202.55644, 710, 0.9632999897003174], [1511842203.355084, 720, 0.964900016784668], [1511842204.150081, 730, 0.9638000130653381], [1511842204.931775, 740, 0.9660000205039978], [1511842205.878417, 750, 0.9628000259399414], [1511842206.808438, 760, 0.9613000154495239], [1511842207.560386, 770, 0.9656000137329102], [1511842208.364481, 780, 0.9664000272750854], [1511842209.154627, 790, 0.9628000259399414], [1511842210.098208, 800, 0.9627000093460083], [1511842210.969653, 810, 0.9656999707221985], [1511842211.929992, 820, 0.9657999873161316], [1511842212.882522, 830, 0.9656000137329102], [1511842213.690861, 840, 0.9682000279426575], [1511842214.508996, 850, 0.9678999781608582], [1511842215.295672, 860, 0.968999981880188], [1511842216.096151, 870, 0.9682999849319458], [1511842216.910752, 880, 0.9661999940872192], [1511842217.718586, 890, 0.9648000001907349], [1511842218.653347, 900, 0.9678000211715698], [1511842219.421863, 910, 0.96670001745224], [1511842220.34967, 920, 0.9674000144004822], [1511842221.234565, 930, 0.9684000015258789], [1511842222.075741, 940, 0.9682000279426575], [1511842222.854794, 950, 0.9663000106811523], [1511842223.658847, 960, 0.9681000113487244], [1511842224.500655, 970, 0.9692999720573425], [1511842225.308939, 980, 0.9692000150680542], [1511842226.065685, 990, 0.9692000150680542]]
+            }
+        }
+    }
+};

frontend/mock/data/plugin/scalars/tags.js

+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+    return {
+        // moock delay
+        _timeout: 0,
+        // mock http status
+        _status: 200,
+        // mock response data
+        _data: {
+            status: 0,
+            msg: 'SUCCESS',
+            data: {
+                "test": {
+                    "layer2/biases/summaries/mean": {
+                        "displayName": "layer2/biases/summaries/mean",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/min": {
+                        "displayName": "layer1/weights/summaries/min",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/stddev_1": {
+                        "displayName": "layer2/biases/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/mean": {
+                        "displayName": "layer1/biases/summaries/mean",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/mean": {
+                        "displayName": "layer1/weights/summaries/mean",
+                        "description": ""
+                    },
+                    "dropout/dropout_keep_probability": {
+                        "displayName": "dropout/dropout_keep_probability",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/max": {
+                        "displayName": "layer1/weights/summaries/max",
+                        "description": ""
+                    }, "layer2/weights/summaries/mean": {
+                        "displayName": "layer2/weights/summaries/mean",
+                        "description": ""
+                    }, "layer2/weights/summaries/stddev_1": {
+                        "displayName": "layer2/weights/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer2/weights/summaries/min": {
+                        "displayName": "layer2/weights/summaries/min",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/max": {
+                        "displayName": "layer1/biases/summaries/max",
+                        "description": ""
+                    },
+                    "layer2/weights/summaries/max": {
+                        "displayName": "layer2/weights/summaries/max",
+                        "description": ""
+                    },
+                    "accuracy_1": {
+                        "displayName": "accuracy_1",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/min": {
+                        "displayName": "layer2/biases/summaries/min",
+                        "description": ""
+                    },
+                    "cross_entropy_1": {
+                        "displayName": "cross_entropy_1",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/max": {
+                        "displayName": "layer2/biases/summaries/max",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/stddev_1": {
+                        "displayName": "layer1/weights/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/stddev_1": {
+                        "displayName": "layer1/biases/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/min": {
+                        "displayName": "layer1/biases/summaries/min",
+                        "description": ""
+                    }
+                },
+                "train": {
+                    "layer2/biases/summaries/mean": {
+                        "displayName": "layer2/biases/summaries/mean",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/min": {
+                        "displayName": "layer1/weights/summaries/min",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/stddev_1": {
+                        "displayName": "layer2/biases/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/mean": {
+                        "displayName": "layer1/biases/summaries/mean",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/mean": {
+                        "displayName": "layer1/weights/summaries/mean",
+                        "description": ""
+                    },
+                    "dropout/dropout_keep_probability": {
+                        "displayName": "dropout/dropout_keep_probability",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/max": {
+                        "displayName": "layer1/weights/summaries/max",
+                        "description": ""
+                    },
+                    "layer2/weights/summaries/mean": {
+                        "displayName": "layer2/weights/summaries/mean",
+                        "description": ""
+                    },
+                    "layer2/weights/summaries/stddev_1": {
+                        "displayName": "layer2/weights/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer2/weights/summaries/min": {
+                        "displayName": "layer2/weights/summaries/min",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/max": {
+                        "displayName": "layer1/biases/summaries/max",
+                        "description": ""
+                    },
+                    "layer2/weights/summaries/max": {
+                        "displayName": "layer2/weights/summaries/max",
+                        "description": ""
+                    },
+                    "accuracy_1": {
+                        "displayName": "accuracy_1",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/min": {
+                        "displayName": "layer2/biases/summaries/min",
+                        "description": ""
+                    },
+                    "cross_entropy_1": {
+                        "displayName": "cross_entropy_1",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/max": {
+                        "displayName": "layer2/biases/summaries/max",
+                        "description": ""
+                    },
+                    "layer1/weights/summaries/stddev_1": {
+                        "displayName": "layer1/weights/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/stddev_1": {
+                        "displayName": "layer1/biases/summaries/stddev_1",
+                        "description": ""
+                    },
+                    "layer1/biases/summaries/min": {
+                        "displayName": "layer1/biases/summaries/min",
+                        "description": ""
+                    }
+                }
+            }
+        }
+    };
+};

server/visualdl/frontend/mock/example/mock.js → frontend/mock/data/runs.js

 /**
- * frontend mock data
+ * get mock data
  *
  * @param {string} path request path
- * @param {Object} queryParam params
- * @param {Object} postParam post post params
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
  * @return {Object}
  */
 module.exports = function (path, queryParam, postParam) {
     return {
-        // delay
+        // moock delay
         _timeout: 0,
-
-        // http code status
+        // mock http status
         _status: 200,
-
-        // response data
+        // mock response data
         _data: {
-            // 0 for sucsuss, others for error
             status: 0,
-            // error msg
-            msg: '',
-            data: ''
+            msg: 'SUCCESS',
+            data: ["train", "test", "model"]
         }
     };
 };

server/visualdl/frontend/package.json → frontend/package.json

@@ -17,9 +17,11 @@
   },
   "dependencies": {
     "axios": "^0.16.1",
+    "echarts": "^3.8.5",
     "file-saver": "^1.3.3",
     "lodash": "^4.17.4",
     "normalize.css": "^6.0.0",
+    "qs": "^6.5.1",
     "san": "3.2.3",
     "san-mui": "^1.0.4",
     "san-router": "^1.1.1",
@@ -45,7 +47,7 @@
     "css-loader": "^0.28.0",
     "express": "^4.16.2",
     "extract-text-webpack-plugin": "^2.1.0",
-    "fecs": "^1.5.2",
+    "fecs": "^1.5.3",
     "file-loader": "^0.11.1",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "glob": "^7.1.1",

frontend/src/App.san

+<template>
+    <div id="app">
+        <ui-app-menu
+            on-item-click="menuChange($event)"
+        ></ui-app-menu>
+        <div id="content-container" class="visual-dl-content-container">
+            <div id="app-content" class="visual-dl-app-content">
+                <div id="content"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import AppMenu from './common/ui/AppMenu';
+import {router} from 'san-router';
+import {routeTo} from './common/util/routeTo';
+
+export default {
+    components: {
+        'ui-app-menu': AppMenu
+    },
+    initData() {
+        return {};
+    },
+    attached() {
+        router.start();
+    },
+    menuChange({value, url, title}) {
+        routeTo(url);
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+// @import './style/variables';
+
+// +prefix-classes(prefix)
+
+</style>

server/visualdl/frontend/src/common/fun/downLoadCSV.js → frontend/src/common/fun/downLoadFile.js

 import XLSX from 'xlsx';
 import FileSaver from 'file-saver';
-// const JSON_TO_SHEET = XLSX.utils.json_to_sheet;
 const aoaToSheet = XLSX.utils.aoa_to_sheet;
 const saveAs = FileSaver.saveAs;
 function s2ab(s) {
@@ -50,3 +49,22 @@ export const generateXLSXandAutoDownload = function (data, name) {
         name + '.xlsx' || 'sheetjs.xlsx'
     );
 };
+
+/**
+ * download json
+ *
+ * @desc download json
+ * @param {Array} data the data for the xlsx
+ * @param {string} name filename
+ */
+export const generateJsonAndDownload = function (data, name) {
+    saveAs(
+        new Blob(
+            [s2ab(JSON.stringify(data, null, '    '))],
+            {
+                type: 'application/octet-stream'
+            }
+        ),
+        name + '.json' || 'json.json'
+    );
+};

frontend/src/common/ui/AppMenu.san

+<template>
+    <div class="visual-dl-app-menu">
+        <san-appbar title="VisualDL">
+            <san-menu slot="right">
+                <san-menu-item
+                    san-for="item in items"
+                    class="{{selected === item.value ? 'sm-menu-item-selected' : ''}}"
+                    on-click="handleItemClick(item)"
+                    title="{{item.title}}" />
+            </san-menu>
+        </san-appbar>
+    </div>
+</template>
+
+<script>
+import Appbar from 'san-mui/AppBar';
+import {MenuItem, Menu} from 'san-mui/Menu';
+export default {
+    components: {
+        'san-appbar': Appbar,
+        'san-menu': Menu,
+        'san-menu-item': MenuItem
+    },
+    initData() {
+        return {
+            selected: '1',
+            items: [
+                {
+                    value: '1',
+                    url: '/scalars',
+                    title: 'SCALARS'
+                },
+                {
+                    value: '2',
+                    url: '/image',
+                    title: 'IMAGES'
+                }
+            ]
+        };
+    },
+    handleItemClick(item) {
+        this.data.set('selected', item.value);
+        this.fire('item-click', item);
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
+
++prefix-classes(prefix)
+    .app-menu
+        width 100%
+
+.visual-dl-app-menu
+    .sm-appbar-title
+        flex none
+    .sm-appbar-right
+        width 100%
+        .sm-menu
+            width 100%
+            height 100%
+            display flex
+            flex-direction row
+            .sm-menu-item-selected
+                background #e4e4e4
+</style>
+

frontend/src/common/ui/Charts/chart.san

+<template>
+    <div class="visual-dl-charts">
+        <div class="visual-dl-chart-box" style="{{computedStyle}}">
+        </div>
+        <div class="visual-dl-chart-actions">
+            <ui-dropdown-menu
+                hintText="download type"
+                items="{{runsItems}}"
+                value="{=downloadType=}"
+            />
+            <san-button on-click="handleDownLoad">
+                <san-icon>file_download</san-icon>
+            </san-button>
+        </div>
+    </div>
+</template>
+<script>
+import Button from 'san-mui/Button';
+import Icon from 'san-mui/Icon';
+import DropDownMenu from '../../../common/ui/DropDownMenu';
+import {generateJsonAndDownload} from '../../../common/fun/downLoadFile';
+import echarts from 'echarts';
+import axios from 'axios';
+import {getPluginScalarsScalars} from '../../../service';
+export default {
+    components: {
+        'ui-dropdown-menu': DropDownMenu,
+        'san-button': Button,
+        'san-icon': Icon
+    },
+    computed: {
+        computedStyle() {
+            let width = this.data.get('width');
+            let height = this.data.get('height');
+            return 'height:' + height + 'px;'
+                + 'width:' + width + 'px;';
+        }
+    },
+    initData() {
+        return {
+            width: 400,
+            height: 300,
+            // line config
+            options: {},
+            data: [
+                {
+                    name: 'train',
+                    value: []
+                }
+            ],
+            // choose run type for download file
+            downloadType: ''
+        };
+    },
+    inited() {
+        this.watch('runsItems', val => {
+            this.initDownloadType();
+        });
+    },
+
+    attached() {
+        let tagInfo = this.data.get('tagInfo');
+        this.initCharts(tagInfo);
+    },
+
+    initDownloadType() {
+        let runsItems = this.data.get('runsItems') || [];
+        if (runsItems.length === 0) {
+            return;
+        }
+        this.data.set('downloadType', runsItems.find((item, index) => index === 0).value);
+    },
+
+    initCharts(tagInfo) {
+        this.createChart();
+        this.setChartsOptions(tagInfo);
+        this.setChartsData(tagInfo);
+    },
+
+    createChart() {
+        let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
+        this.myChart = echarts.init(el);
+    },
+    setChartsOptions({tagList, tag}) {
+        let seriesOption = tagList.map(item => {
+            return {
+                name: item.run,
+                type: 'line',
+                showSymbol: false,
+                hoverAnimation: false,
+                data: [],
+                smooth: true
+            };
+        });
+        let legendOptions = tagList.map(item => item.run);
+        let option = {
+            title: {
+                text: tag,
+                textStyle: {
+                    fontSize: '12'
+                }
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    animation: false
+                },
+                position: [10, 300]
+            },
+            toolbox: {
+                show: true,
+                showTitle: true,
+                feature: {
+                    dataZoom: {},
+                    restore: {},
+                    saveAsImage: {}
+                },
+                left: 40,
+                top: 270
+            },
+            legend: {
+                data: legendOptions,
+                top: 30
+            },
+            grid: {
+                top: 70,
+                bottom: 50
+            },
+            xAxis: [
+                {
+                    type: 'value',
+                    boundaryGap: false
+                },
+                {
+                    type: 'value',
+                    boundaryGap: false
+                }
+            ],
+            yAxis: {
+                type: 'value',
+                boundaryGap: [0, '100%'],
+                min(value) {
+                    return value.min;
+                },
+                max(value) {
+                    return value.max;
+                },
+                axisLabel: {
+                    formatter(value, index) {
+                        // keep 0.11111 to 0.111
+                        return value.toString().slice(0, 5);
+                    }
+                }
+            },
+            series: seriesOption
+        };
+        this.myChart.setOption(option);
+    },
+    setChartsData({tagList, tag}) {
+        let requestList = tagList.map(item => {
+            let params = {
+                run: item.run,
+                tag: tag
+            };
+            return getPluginScalarsScalars(params);
+        });
+        axios.all(requestList).then(resArray => {
+            let seriesData = resArray.map(res => {
+                return {
+                    data: res.data,
+                    encode: {
+                        // map 1 to xAixs。
+                        x: [1],
+                        // map 2 to yAixs。
+                        y: [2]
+                    }
+                };
+            });
+            this.myChart.setOption({
+                series: seriesData
+            });
+        });
+    },
+    getChartOptions() {
+        return this.myChart.getOption() || {};
+    },
+    handleDownLoad() {
+        let options = this.getChartOptions();
+        let series = options.series || [];
+        let downloadType = this.data.get('downloadType');
+        let sery = series.find(item => item.name === downloadType) || {};
+        let tagInfo = this.data.get('tagInfo');
+        let fileName = tagInfo.tag.replace(/\//g, '-');
+        generateJsonAndDownload(sery.data, fileName);
+    }
+};
+</script>
+<style lang="stylus">
+    .visual-dl-charts
+        float left
+        .visual-dl-chart-actions
+            .sm-form-item
+                width 300px
+                display inline-block
+</style>
+

frontend/src/common/ui/CheckBoxGroup.san

+<template>
+    <div class="sm-form-item">
+        <label class="label">{{label}}</label>
+        <div class="group-box">
+            <san-checkbox
+                san-if="showAll"
+                class="checkbox-all"
+                label="全选"
+                value="all"
+                on-change="handleAllChange($event)"
+                checked="{{All}}"
+            ></san-checkbox>
+            <div class="san-form-check-group">
+                <san-checkbox
+                    san-for="item in items"
+                    label="{{item.name}}"
+                    value="{{item.value}}"
+                    disabled="{{item.disabled}}"
+                    checked="{{value}}"
+                    on-change="handleChange($event, item)"
+                ></san-checkbox>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import Checkbox from 'san-mui/Checkbox';
+    import {DataTypes} from 'san';
+    export default {
+        components: {
+            'san-checkbox': Checkbox
+        },
+        dataTypes: {
+            items: DataTypes.array,
+            value: DataTypes.array
+        },
+        initData() {
+            return {
+                allValue: [],
+                items: {},
+                value: [],
+                All: [],
+                showAll: false
+            };
+        },
+        computed: {
+            allValue() {
+                let items = this.data.get('items') || [];
+                return items.map(item => item.value);
+            }
+        },
+        attached() {
+            this.jugdeAll();
+            this.watch('value', val => {
+                this.dispatch('UI:form-item-change');
+                this.jugdeAll();
+            });
+        },
+        handleChange(e, item) {
+            let checked = e.target.checked;
+            let valueItem = item.value;
+            if (checked) {
+                this.addValue(valueItem);
+            }
+            else {
+                this.removeValue(valueItem);
+            }
+            this.dispatch('UI:form-item-change');
+            this.jugdeAll();
+
+        },
+        handleAllChange(e) {
+            let checked = e.target.checked;
+            let allValue = this.data.get('allValue') || [];
+            if (checked) {
+                this.data.set('value', allValue.slice());
+                this.fire('valueChange', allValue.slice());
+            }
+            else {
+                this.data.set('value', []);
+                this.fire('valueChange', []);
+            }
+            this.dispatch('UI:form-item-change');
+        },
+        addValue(itemValue) {
+            let value = this.data.get('value') || [];
+            if (!value.includes(itemValue)) {
+                value.push(itemValue);
+                this.data.set('value', value.slice());
+                this.fire('valueChange', value.slice());
+            }
+        },
+        removeValue(itemValue) {
+            let value = this.data.get('value') || [];
+            if (value.includes(itemValue)) {
+                let index = value.indexOf(itemValue);
+                value.splice(index, 1);
+                this.data.set('value', value.slice());
+                this.fire('valueChange', value.slice());
+            }
+        },
+        jugdeAll() {
+            let allValue = this.data.get('allValue') || [];
+            let value = this.data.get('value') || [];
+            let isAll = allValue.every(val => value.includes(val));
+            if (isAll) {
+                this.data.set('All', ['all']);
+            }
+            else {
+                this.data.set('All', []);
+            }
+        }
+    };
+</script>

frontend/src/common/ui/DropDownMenu.san

+<template>
+    <div class="sm-form-item">
+        <label class="label">{{label}}</label>
+        <san-drop-down-menu
+            error="{{error}}"
+            disabled="{{disabled}}"
+            value="{=value=}"
+            maxHeight="{{200}}"
+            autoWidth="{{false}}">
+            <san-menu-item
+                s-for="item in items"
+                on-change="menuItemChange(item)"
+                value="{{item.value}}"
+                label="{{item.name}}" />
+        </sm-drop-down-menu>
+    </div>
+</template>
+<script>
+import {DataTypes} from 'san';
+import {MenuItem, DropDownMenu} from 'san-mui/Menu';
+export default {
+    components: {
+        'san-menu-item': MenuItem,
+        'san-drop-down-menu': DropDownMenu
+    },
+    dataTypes: {
+        value: DataTypes.string,
+        items: DataTypes.array,
+        disabled: DataTypes.bool
+    },
+    menuItemChange(item) {
+        let value = item.value;
+        this.fire('valueChange', value);
+        this.dispatch('UI:form-item-change');
+    },
+    initData() {
+        return {
+            value: '',
+            items: []
+        };
+    }
+};
+</script>

frontend/src/common/ui/ExpandPanel.san

+<template>
+    <div class="visaul-dl-expand-panel">
+        <h3
+            class="visaul-dl-expand-head"
+            on-click="handleHeadClick()"
+        >
+            <span>{{title}}</span>
+        </h3>
+        <div
+            style="display:{{displayStyle}}"
+            class="visaul-dl-expand-panel-content"
+        >
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    computed: {
+        displayStyle() {
+            let isShow = this.data.get('isShow');
+            return isShow ? 'block' : 'none';
+        }
+    },
+    initData() {
+        return {
+            isShow: false
+        };
+    },
+    handleHeadClick() {
+        this.toogleShow();
+    },
+    toogleShow() {
+        let isShow = this.data.get('isShow');
+        this.data.set('isShow', !isShow);
+    }
+};
+</script>
+<style lang="stylus">
+    .visaul-dl-expand-panel
+        .visaul-dl-expand-head
+            border solid 1px #e4e4e4
+            line-height 50px
+            height 50px
+            padding 0 20px
+            cursor pointer
+        .visaul-dl-expand-panel-content
+            padding 0 20px
+        .visaul-dl-expand-panel-content:after
+            content: "";
+            clear: both;
+            display: block;
+</style>
+
+

frontend/src/common/ui/Notification/Notification.js

+import NotificationItem from './NotificationItem';
+
+let seed = 1;
+// instances
+const instances = [];
+
+/**
+ * caculate top dist
+ *
+ * @param {number} topDist top dist
+ * @return {number} final top dist
+ */
+function calcTopDist(topDist = 16) {
+    for (let i = 0, len = instances.length; i < len; i++) {
+        topDist += (instances[i].vm.el.offsetHeight + 16);
+    }
+    return topDist;
+}
+
+/**
+ * Notification main func
+ *
+ * @param {Object} options options
+ * @return {NotificationItem} instance
+ */
+const notification = function (options = {}) {
+    options.top = calcTopDist(options.offset);
+    const {onClose, onClick} = options;
+    delete options.onClick;
+    delete options.onClose;
+    delete options.offset;
+    const instance = {
+        vm: new NotificationItem({
+            data: options
+        }),
+        id: `notification_${seed++}`
+    };
+
+    if (typeof onClick === 'function') {
+        instance.vm.on('itemClick', onClick);
+    }
+    instance.vm.on('close', () => {
+        notification.close(instance.id, onClose);
+    });
+    instance.vm.attach(document.body);
+
+    instances.push(instance);
+    return instance.vm;
+};
+
+/**
+ * close
+ *
+ * @param {string} id instance id
+ * @param {Function} onClose cusmtom func
+ */
+notification.close = function (id, onClose) {
+    let index;
+    let removedHeight;
+    let len = instances.length;
+    for (let i = 0; i < len; i++) {
+        if (id === instances[i].id) {
+            if (typeof onClose === 'function') {
+                onClose(instances[i]);
+            }
+            index = i;
+            removedHeight = instances[i].vm.el.offsetHeight;
+            // distroy instance
+            instances[i].vm.dispose();
+            instances[i] = null;
+            // reomve instance fron instances
+            instances.splice(i, 1);
+            break;
+        }
+    }
+    // change the left notification's height
+    if (len > 1) {
+        for (let i = index; i < len - 1; i++) {
+            instances[i].vm.el.style.top = `${parseInt(instances[i].vm.el.style.top, 10) - removedHeight - 16}px`;
+        }
+    }
+
+};
+
+// fout type func
+['success', 'warning', 'info', 'error'].forEach(type => {
+    notification[type] = options => {
+        if (typeof options === 'string') {
+            options = {
+                message: options
+            };
+        }
+        options = options || {};
+        options.type = type;
+        return notification(options);
+    };
+});
+
+export default notification;

frontend/src/common/ui/Notification/Notification.md

+
+## Notification
+
+### base usage
+
+```san Notification
+   <template>
+    <div>
+        <san-button
+            variants="raised info"
+            on-click="handleClick01">
+            auto close
+        </san-button>
+        <san-button
+            variants="raised info"
+            on-click="handleClick02">
+            no auto close
+        </san-button>
+    </div>
+</template>
+
+<script>
+import Notification from '../src/Notification';
+import '../src/Notification/Notification.styl';
+import Button from '../src/Button';
+import '../src/Button/Button.styl';
+
+export default {
+    components: {
+        'san-button': Button
+    },
+    // auto close
+    handleClick01() {
+        Notification({
+            message: 'welcome',
+            title: 'success'
+        })
+    },
+    // no auto close
+    handleClick02() {
+        Notification({
+            message: 'welcome',
+            title: 'success',
+            duration: 0
+        })
+    }
+}
+</script>
+```
+
+### with icon
+
+```san Notification
+<template>
+    <div>
+        <san-button
+            variants="raised info"
+            on-click="handleClick01">
+            success
+        </san-button>
+        <san-button
+            variants="raised info"
+            on-click="handleClick02">
+            warning
+        </san-button>
+        <san-button
+            variants="raised info"
+            on-click="handleClick03">
+            info
+        </san-button>
+        <san-button
+            variants="raised info"
+            on-click="handleClick04">
+            error
+        </san-button>
+        <san-button
+            variants="raised info"
+            on-click="handleClick05">
+            simplify
+        </san-button>
+    </div>
+</template>
+
+<script>
+import Notification from '../src/Notification';
+import '../src/Notification/Notification.styl';
+import Button from '../src/Button';
+import '../src/Button/Button.styl';
+
+export default {
+    components: {
+        'san-button': Button
+    },
+    handleClick01() {
+        Notification({
+            message: 'welcome',
+            title: 'success',
+            type: 'success'
+        })
+    },
+    handleClick02() {
+        Notification({
+            message: 'warning',
+            title: 'warning',
+            type: 'warning'
+        })
+    },
+    handleClick03() {
+        Notification({
+            message: 'info',
+            title: 'info',
+            type: 'info'
+        })
+    },
+    handleClick04() {
+        Notification({
+            message: '不可以攻击己方水晶',
+            title: '错误',
+            type: 'error'
+        })
+    },
+     handleClick05() {
+         Notification.success('simplify')
+     }
+}
+</script>
+```
+### width offset
+
+```san Notification
+<template>
+    <div>
+        <san-button
+            variants="raised info"
+            on-click="handleClick01">
+            width offset
+        </san-button>
+    </div>
+</template>
+
+<script>
+import Notification from '../src/Notification';
+import '../src/Notification/Notification.styl';
+import Button from '../src/Button';
+import '../src/Button/Button.styl';
+
+export default {
+    components: {
+        'san-button': Button
+    },
+    handleClick01() {
+        Notification({
+            message: 'offset 100px',
+            title: 'success',
+            offset:100
+        })
+    }
+}
+</script>
+```
+
+
+## API
+
+### Props
+
+| name | type | fefault | desc |
+| --- | --- | --- | --- |
+| title | String |  | title |
+| message | String |  | content |
+| customClass |String| | custom class |
+| offset | Number |  | offset to the top |
+| onClick | Function |  | on-click callback |
+| onClose | Function |  | on-close callback |
+| duration | Number | 3000 | duration |
+| type | String | | include success,error,warning,info, others not use |
+
+
+

frontend/src/common/ui/Notification/Notification.styl

+.sm-notification
+    position: fixed
+    display: flex
+    z-index: 9999
+    right: 16px
+    top 16px
+    width: 330px
+    padding: 20px
+    box-sizing border-box
+    border-radius 2px
+    background-color #fff
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    transition: all .4s;
+    overflow: hidden
+
+    &.state-hidden
+        transform translateX(346px)
+
+    &.state-open
+        transform translateX(0)
+
+    &-group
+        color: #000
+
+    &-type
+        margin auto 0
+        margin-right 20px
+        &.type-success
+            color: #13ce66
+        &.type-info
+            color: #50bfff
+        &.type-warning
+            color: #f7ba2a
+        &.type-error
+            color: #ff4949
+    &-title
+        color: #1f2d3d
+        font-size 16px
+    &-content
+        color: #8d9baf
+        padding: 5px 0
+    &-close
+        position: absolute
+        cursor: pointer
+        right 20px
+        top: 20px
+        &-btn
+            transition all .3s
+            color #bfcbd9
+            &:hover
+                color: #777F8C

frontend/src/common/ui/Notification/NotificationItem.js

+import {Component} from 'san';
+import Icon from 'san-mui/Icon';
+
+const typeMap = {
+    success: 'check_circle',
+    info: 'info',
+    warning: 'error',
+    error: 'cancel'
+};
+
+export default class NotificationItem extends Component {
+    static template = `
+    <div
+        class="sm-notification {{customClass}} {{closed ? 'state-hidden' : 'state-open'}}"
+        style="top: {{top}}px"
+        on-mouseenter="clearTimer"
+        on-mouseleave="startTimer"
+        on-click="handleClick">
+        <san-icon
+            san-if="type"
+            class="sm-notification-type type-{{type}}"
+            size="50">{{iconType}}</san-icon>
+        <div class="sm-notification-group" >
+            <p class="sm-notification-title">{{title}}</p>
+            <div class="sm-notification-content">{{message}}</div>
+            <div on-click="close($event)" class="sm-notification-close">
+                <san-icon size="20" class="sm-notification-close-btn">close</san-icon>
+            </div>
+        </div>
+    </div>
+    `;
+
+    initData() {
+        return {
+            title: '',
+            message: '',
+            duration: 3000,
+            closed: true
+        };
+    }
+
+    static components = {
+        'san-icon': Icon
+    };
+
+    static computed = {
+        iconType() {
+            return typeMap[this.data.get('type')];
+        }
+    };
+
+    handleClick() {
+        this.fire('itemClick');
+    }
+
+    /**
+     * close
+     *
+     * @param {Object} e event Object
+     */
+    close(e) {
+        if (e) {
+            e.stopPropagation();
+        }
+        this.data.set('closed', true);
+        this.el.addEventListener('transitionend', () => {
+            this.fire('close');
+        });
+    }
+
+    /**
+     * clear timer
+     */
+    clearTimer() {
+        clearTimeout(this.timer);
+    }
+
+    /**
+     * start timet
+     */
+    startTimer() {
+        const duration = this.data.get('duration');
+        if (duration > 0) {
+            this.timer = setTimeout(() => {
+                if (!this.closed) {
+                    this.close();
+                }
+            }, duration);
+        }
+    }
+
+    attached() {
+        if (this.el.parentNode !== document.body) {
+            document.body.appendChild(this.el);
+        }
+        requestAnimationFrame(() => {
+            this.data.set('closed', false);
+        });
+
+        this.startTimer();
+    }
+
+    detached() {
+        this.clearTimer();
+    }
+}

frontend/src/common/ui/Notification/index.js

+import Notification from './Notification';
+import NotificationItem from './NotificationItem';
+
+export {
+    NotificationItem,
+    Notification as default
+};

frontend/src/common/ui/RadioGroup.san

+<template>
+    <div class="sm-form-item">
+        <label class="label">{{label}}</label>
+        <div class="group-box">
+            <san-radio
+                on-change="handleChange($event)"
+                san-for="item in items"
+                label="{{item.name}}"
+                value="{{item.value}}"
+                disabled="{{item.disabled}}"
+                checked="{=value=}"
+            ></san-radio>
+        </div>
+    </div>
+</template>
+<script>
+    import Radio from 'san-mui/Radio';
+    import {DataTypes} from 'san';
+    export default {
+        components: {
+            'san-radio': Radio
+        },
+        dataTypes: {
+            items: DataTypes.array,
+            value: DataTypes.string
+        },
+        initData() {
+            return {
+                items: {},
+                value: [],
+                label: ''
+            };
+        },
+        attached(value) {
+            this.watch('value', val => {
+                this.dispatch('UI:form-item-change', val);
+            });
+        },
+        handleChange(val) {
+            this.fire('valueChange', val);
+        }
+    };
+</script>
\ No newline at end of file

frontend/src/common/ui/Slider.san

+<template>
+    <div class="sm-form-item">
+        <label class="label">{{label}}</label>
+        <div class="input-box">
+            <san-slider
+                on-change="handleSlideChange($event)"
+                value="{{value}}"
+                min="{{min}}"
+                max="{{max}}"
+                step="{{step}}"
+            />
+            <san-input-number
+                min="{{min}}"
+                max="{{max}}"
+                step="{{step}}"
+                value="{=value=}"
+                on-change="handlerChange($event)"
+                size="small">
+            </san-input-number>
+        </div>
+    </div>
+</template>
+
+<script>
+import Slider from 'san-mui/Slider';
+import InputNumber from 'san-mui/InputNumber';
+export default {
+    components: {
+        'san-slider': Slider,
+        'san-input-number': InputNumber
+    },
+    initData() {
+        return {
+            value: '0',
+            label: '',
+            max: 0,
+            min: 0,
+            step: 0
+        };
+    },
+    handleSlideChange(val) {
+        this.data.set('value', val.toString());
+    }
+};
+</script>
+
+<style lang="stylus">
+    .sm-form-item
+        .input-box
+            margin-top 10px
+            .sm-slider
+                display inline-block
+                margin-right 20px
+                margin-top 4px
+                float left
+                width 100px
+                .sm-slider-thumb
+                    transform translate(0, -50%)
+            .sm-inputNumber
+                width 130px
+                display inline-block
+
+</style>
+

frontend/src/common/ui/ui-common.styl

+// initual style
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
+
+@import './Notification/Notification.styl'
+
+// modify some styles of san-mui
+.sm-icon
+    width 100%
+    height 100%
+    overflow hidden
+
+.sm-radio,
+.sm-checkbox
+    margin-top 2px
+    margin-bottom 4px
+    margin-right 10px
+    float left
+    width 100%
+
+    .sm-radio-wrapper,
+    .sm-checkbox-wrapper
+        justify-content start
+
+        .sm-radio-label,
+        .sm-checkbox-label
+            font-size 12px
+
+        .sm-radio-icon
+        .sm-checkbox-icon
+            width 20px
+            height 20px
+            margin-right 10px
+
+            .sm-radio-ripple-wrapper
+            .sm-checkbox-ripple-wrapper
+                width 20px
+                height 20px
+                top 0px
+                left 0px
+
+            .sm-checkbox-svg-icon,
+            .sm-radio-svg-icon
+                width 20px
+                height 20px
+
+            .sm-checkbox-icon-uncheck
+            .sm-radio-icon-uncheck
+                color #58666e
+
+        .sm-radio-label,
+        .sm-checkbox-label
+            color #58666e
+
+.sm-dropdown-menu
+    .sm-dropdown-menu-icon
+        .sm-icon
+            color #58666e
+
+.sm-popover-content
+    .sm-menu-item
+        line-height 30px
+        font-size 14px
+        color #58666e
+
+    .sm-menu-item.state-selected
+        color #ff4081
+
+.sm-text-field-input
+    color #58666e
+
+.sm-form-item
+    margin-top 10px
+
+    .label
+        color rgba(0,0,0,0.54)
+        font-size 12px
+        line-height 20px
+
+    .group-box
+        overflow hidden
+
+.collapse-transition
+    transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+
+.sm-pagination
+    margin 30px 0
+    font-size 12px
\ No newline at end of file

frontend/src/common/util/http.js

+import axios from 'axios';
+import qs from 'qs';
+import Notification from '../ui/Notification';
+
+const STATUS = 'status';
+const STATUSINFO = 'msg';
+
+const instance = axios.create({
+    baseURL: '/',
+    timeout: 30000
+});
+
+const responseErrorStatus = response => {
+    const data = response.data;
+    if (data[STATUS] !== 0) {
+        Notification.error(data[STATUSINFO]);
+        return Promise.reject(data);
+    }
+    return data;
+};
+
+const responseNetError = error => {
+    Notification.error('net error');
+    return Promise.reject(error);
+};
+
+// post from
+const formInstance = axios.create({
+    baseURL: '/',
+    timeout: 3000,
+    transformRequest: [data => qs.stringify(data)],
+    headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Accept': 'application/json,application/vnd.ms-excel'
+    }
+});
+
+formInstance.interceptors.response.use(responseErrorStatus, responseNetError);
+
+instance.interceptors.response.use(responseErrorStatus, responseNetError);
+
+export const makeService = (url, opt = {method: 'get'}) => (params = {}) => {
+    if (opt.method === 'delete' || opt.method === 'get') {
+        params = {params};
+    }
+    return instance[opt.method](url, params);
+};
+
+export const makeFormService = (url, method = 'post') => (params = {}) => formInstance[method](url, params);

frontend/src/common/util/routeTo.js

+import {router} from 'san-router';
+
+export function routeTo(url, params = {}) {
+    let paramsArr = Object.keys(params).map(key => `${key}=${params[key]}`);
+    let urlParams = (url.indexOf('?') > -1 ? '&' : '?') + paramsArr.join('&');
+
+    router.locator.redirect(urlParams.length > 1 ? `${url}${urlParams}` : url);
+}

server/visualdl/frontend/src/home/Home.san → frontend/src/home/Home.san

@@ -2,7 +2,7 @@
 
 <article>
     <h1>
-        welcome
+        {{text}}
     </h1>
 
 </article>
@@ -12,7 +12,11 @@
 
 <script>
     export default {
-
+        initData() {
+            return {
+                text: 'welcome'
+            };
+        }
     };
 
 </script>

server/visualdl/frontend/src/home/index.js → frontend/src/home/index.js

 import {router} from 'san-router';
 
-
 import HomePage from './Home';
 
 router.add({
     target: '#content',
-    rule: '/home',
+    rule: '/',
     Component: HomePage
 });

server/visualdl/frontend/src/index.js → frontend/src/index.js

 import 'normalize.css/normalize.css';
 import 'san-mui/index.css';
-let App = require('./App');
+import './common/ui/ui-common.styl';
+
+import './home/index';
+import './scalars/index';
+
+import App from './App';
 new App({
     data: {
         titleName: 'VisualDL'

frontend/src/scalars/Scalars.san

+<template>
+    <div class="visual-dl-scalar-container">
+        <div class="visual-dl-scalar-left">
+            <div class="visual-dl-scalar-config-container">
+                <ui-config
+                    runsItems="{{runsItems}}"
+                    config="{=config=}"
+                ></ui-config>
+            </div>
+        </div>
+        <div class="visual-dl-scalar-right">
+            <ui-chart-page
+                config="{{config}}"
+                runsItems="{{runsItems}}"
+                tagList="{{filteredTagsList}}"
+                title="Tags matching {{config.groupNameReg}}"
+            ></ui-chart-page>
+            <ui-chart-page
+                san-for="item in groupedTags"
+                config="{{config}}"
+                runsItems="{{runsItems}}"
+                tagList="{{item.tags}}"
+                title="{{item.group}}"
+            ></ui-chart-page>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getPluginScalarsTags, getRuns} from '../service';
+import config from './ui/config';
+import chartPage from './ui/chartPage';
+import {debounce, flatten, uniq} from 'lodash';
+export default {
+    components: {
+        'ui-config': config,
+        'ui-chart-page': chartPage
+    },
+    computed: {
+        runsItems() {
+            let runsArray = this.data.get('runsArray') || [];
+            return runsArray.map(item => {
+                return {
+                    name: item,
+                    value: item
+                };
+            });
+        },
+        tagsList() {
+            let tags = this.data.get('tags');
+
+            let runs = Object.keys(tags);
+            let tagsArray = runs.map(run => Object.keys(tags[run]));
+            let allUniqTags = uniq(flatten(tagsArray));
+
+            // get the data for every chart
+            return allUniqTags.map(tag => {
+                let tagList = runs.map(run => {
+                    return {
+                        run,
+                        tag: tags[run][tag]
+                    };
+                });
+                return {
+                    tagList,
+                    tag,
+                    group: tag.split('/')[0]
+                };
+            });
+        },
+        groupedTags() {
+            let tagsList = this.data.get('tagsList') || [];
+            // put data in group
+            let groupData = {};
+            tagsList.forEach(item => {
+                let group = item.group;
+                if (groupData[group] === undefined) {
+                    groupData[group] = [];
+                    groupData[group].push(item);
+                }
+                else {
+                    groupData[group].push(item);
+                }
+            });
+
+            // to array
+            let groups = Object.keys(groupData);
+            return groups.map(group => {
+                return {
+                    group,
+                    tags: groupData[group]
+                };
+            });
+        }
+    },
+    initData() {
+        return {
+            runsArray: [],
+            tags: [],
+            config: {
+                groupNameReg: '.*',
+                smoothing: '0.5',
+                horizontal: '1',
+                sortingMethod: '2',
+                link: [],
+                chart: []
+            }
+        };
+    },
+    inited() {
+        getPluginScalarsTags().then(({errno, data}) => {
+            this.data.set('tags', data);
+
+            // filter when inited
+            let groupNameReg = this.data.get('config.groupNameReg');
+            this.filterTagsList(groupNameReg);
+        });
+        getRuns().then(({errno, data}) => {
+            this.data.set('runsArray', data);
+        });
+
+        // need debounce， can't use computed
+        this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
+    },
+
+    filterTagsList(groupNameReg) {
+        let tagsList = this.data.get('tagsList') || [];
+        let regExp = new RegExp(groupNameReg);
+        let filtedTagsList = tagsList.filter(item => regExp.test(item.tag));
+        this.data.set('filteredTagsList', filtedTagsList);
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+@import '../style/variables';
+
++prefix-classes('visual-dl-scalar-')
+    .container
+        padding-left 300px
+        position relative
+        .left
+            width 280px
+            min-height 300px
+            border solid 1px #e4e4e4
+            position absolute
+            left 0
+        .right
+            width 100%
+            border solid 1px #e4e4e4
+            min-height 300px
+            padding 20px
+</style>

frontend/src/scalars/index.js

+import {router} from 'san-router';
+
+import Scalar from './Scalars';
+
+router.add({
+    target: '#content',
+    rule: '/scalars',
+    Component: Scalar
+});

frontend/src/scalars/ui/chartPage.san

+<template>
+    <div class="visaul-dl-chart-page">
+        <ui-expand-panel title="{{title}}">
+            <div class="visaul-dl-chart-box">
+                <ui-chart
+                    san-for="tag in filteredTagList"
+                    tagInfo="{{tag}}"
+                    config="{{config}}"
+                    runsItems="{{runsItems}}"
+                ></ui-chart>
+            </div>
+            <ui-pagination
+                san-if="total > pageSize"
+                on-pageChange="handlePageChange($event)"
+                current="{{currentPage}}"
+                pageSize="{{pageSize}}"
+                total="{{total}}"
+                showSizeChanger="{{false}}"
+            />
+        </ui-expand-panel>
+    </div>
+</template>
+<script>
+import ExpandPanel from '../../common/ui/ExpandPanel';
+import chart from '../../common/ui/Charts/chart';
+import Pagination from 'san-mui/Pagination';
+
+export default {
+    components: {
+        'ui-chart': chart,
+        'ui-expand-panel': ExpandPanel,
+        'ui-pagination': Pagination
+    },
+    computed: {
+        filteredTagList() {
+            let tagList = this.data.get('tagList') || [];
+            let currentPage = this.data.get('currentPage');
+            let pageSize = this.data.get('pageSize');
+            return tagList.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+        },
+        total() {
+            let tagList = this.data.get('tagList') || [];
+            return tagList.length;
+        }
+    },
+    initData() {
+        return {
+            // current page
+            currentPage: 1,
+            // item per page
+            pageSize: 8
+        };
+    },
+
+    handlePageChange({pageNum}) {
+        this.data.set('currentPage', pageNum);
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
+
++prefix-classes('visual-dl-')
+    .visaul-dl-chart-page
+        .visaul-dl-chart-box:after
+                content: "";
+                clear: both;
+                display: block;
+</style>
+
+

frontend/src/scalars/ui/config.san

+<template>
+    <div class="visual-dl-scalar-config-com">
+        <san-text-field
+            hintText="input a tag group name to search"
+            label="Group name RegExp"
+            inputValue="{=config.groupNameReg=}"
+        />
+        <ui-slider
+            label="Smoothing"
+            value="{=config.smoothing=}"
+            min="{{0}}"
+            max="{{1}}"
+            step="{{0.001}}"
+        />
+        <ui-radio-group
+            label="Horizontal"
+            value="{{config.horizontal}}"
+            items="{{horizontalItems}}"
+        />
+        <ui-dropdown-menu
+            label="Tooltip sorting method"
+            items="{{sortingMethodItems}}"
+            value="{=config.sortingMethod=}"
+        />
+        <ui-checkbox-group
+            value="{=config.link=}"
+            items="{{lnksItems}}"
+        />
+        <ui-checkbox-group
+            value="{=config.chart=}"
+            items="{{chartItems}}"
+        />
+        <ui-checkbox-group
+            label="Runs"
+            items="{{runsItems}}"
+        />
+        <san-button class="visual-dl-scalar-run-toggle" variants="raised secondery">Toggle All Runs</san-button>
+    </div>
+</template>
+<script>
+import TextField from 'san-mui/TextField';
+import Slider from '../../common/ui/Slider';
+import RadioGroup from '../../common/ui/RadioGroup';
+import DropDownMenu from '../../common/ui/DropDownMenu';
+import CheckBoxGroup from '../../common/ui/CheckBoxGroup';
+import Button from 'san-mui/Button';
+export default {
+    components: {
+        'san-text-field': TextField,
+        'ui-slider': Slider,
+        'ui-radio-group': RadioGroup,
+        'ui-dropdown-menu': DropDownMenu,
+        'ui-checkbox-group': CheckBoxGroup,
+        'san-button': Button
+    },
+    initData() {
+        return {
+            config: {
+                groupName: 'aa',
+                smoothing: '0.5',
+                horizontal: '1',
+                sortingMethod: '2',
+                link: [],
+                chart: []
+            },
+            horizontalItems: [
+                {
+                    name: 'Step',
+                    value: '1'
+                },
+                {
+                    name: 'Relative',
+                    value: '2'
+                },
+                {
+                    name: 'Wall',
+                    value: '3'
+                }
+            ],
+            sortingMethodItems: [
+                {
+                    name: 'default',
+                    value: '1'
+                },
+                {
+                    name: 'descending',
+                    value: '2'
+                },
+                {
+                    name: 'ascending',
+                    value: '3'
+                },
+                {
+                    name: 'nearest',
+                    value: '4'
+                }
+            ],
+            runsItems: [],
+            lnksItems: [
+                {
+                    value: '1',
+                    name: 'Show data download links'
+                }
+            ],
+            chartItems: [
+                {
+                    value: '1',
+                    name: 'Ignore outliers in chart scaling'
+                }
+            ]
+        };
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
++prefix-classes('visual-dl-scalar-')
+    .config-com
+        width 90%
+        margin 0 auto
+        .run-toggle
+            width 100%
+            margin-top 20px
+</style>
+
+

frontend/src/service.js

+import {makeService} from './common/util/http';
+
+export const getPluginScalarsTags = makeService('/data/plugin/scalars/tags');
+
+export const getRuns = makeService('/data/runs');
+
+export const getPluginScalarsScalars = makeService('/data/plugin/scalars/scalars');

server/visualdl/frontend/template/index.html → frontend/template/index.html

 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <title>VisualDL</title>

server/visualdl/frontend/tool/dev-server.js → frontend/tool/dev-server.js

@@ -38,47 +38,23 @@ compiler.plugin('compilation', function (compilation) {
     });
 });
 
-var context = [
-    '/example',
-];
-var proxypath = '';
-
-var options = {
-    target: proxypath,
-    changeOrigin: true,
-};
-if (context.length) {
-   // app.use(proxyMiddleware(context, options));
-    app.use('/example', proxyMiddleware({
-        target: 'www.baidu.com',
-        changeOrigin: true,
-    }));
+// autoresponse
+let AutoresponseMatchs = ['data'];
+let matchsReg = new RegExp(AutoresponseMatchs.join('\|'));
+let excludeReg = /\.(html|js|map)$/;
+let isAutoresponseRequest = (path) => {
+    return !excludeReg.test(path) && matchsReg.test(path);
 }
+
 app.use(autoresponse({
     logLevel: 'debug',
     root: path.dirname(__dirname),
     rules: [
         {
-            match: '/example/:id',
-            method: ['get']
-        }
-    ],
-    post: {
-        match: function (reqPathName) {
-            return !/\.(html|js|map)$/.test(reqPathName) && /^\/(api)(.*)/.test(reqPathName);
-        }
-    },
-    delete: {
-        match: function () {
-            return true;
-        }
-    },
-    get: {
-        match: function (reqPathName) {
-            return !/\.(html|js|map)$/.test(reqPathName) && /^\/(api)(.*)/.test(reqPathName);
+            match: isAutoresponseRequest,
+            method: ['get', 'post', , 'delete']
         }
-    }
-
+    ]
 }));
 
 // serve webpack bundle output

server/visualdl/frontend/src/App.san

-<template>
-    <div id="app">
-        <san-appbar title="VisualDL">
-                <div class="visual-dl-user-info visual-dl-app-follow-list" slot="right"></div>
-        </san-appbar>
-        <div id="content-container" class="visual-dl-content-container">
-            <div id="app-content" class="visual-dl-app-content">
-                <div id="visual-dl-content"></div>
-            </div>
-        </div>
-        <div class="visual-dl-footer">
-            <div class="visual-dl-ftext"><a href="https://github.com/VisualDL/VisualDL" target="_blank" class="visual-dl-bluetext">GitHub</a></div>
-            <div class="visual-dl-ftext visual-dl-ftext3">VisualDL © MIT</div>
-        </div>
-    </div>
-</template>
-
-<script>
-import Appbar from 'san-mui/AppBar';
-
-export default {
-    components: {
-        'san-appbar': Appbar
-    },
-    initData() {
-        return {};
-    }
-};
-
-</script>
-
-<style lang="stylus">
-
-@import './style/variables';
-
-+prefix-classes(prefix)
-    .footer
-        float: left;
-        position:relative;
-        width: 100%
-        background: #fff
-        padding-top: 0
-        margin-top: -2px
-        background #fff
-        border solid 1px #e4e4e4
-        .ftext
-            width: 30%
-            float: left
-            text-align: center
-            padding: 30px 0
-            font-size: 14px
-        .ftext3
-            margin-left: 5%
-        .bluetext
-            text-decoration: none
-            color: #398bfb
-</style>