resolve the histogram hover circle problem and adjust code (#141)

* modify overlay and offset chart view interplay problem

* resolve frontend fecs problem

* resolve the hover circle problem for histogram

* modify the color of multiple lines in scalar

* adjust the frontend code

* modify san template

* adjust histogramHelper code

* reslove fecs code style problem

Author: deqingli

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "front",
+  "name": "VisualDL",
   "version": "1.0.0",
   "description": "Visualization toolkit for deep learning",
   "scripts": {

frontend/src/App.san

@@ -37,8 +37,8 @@ export default {
             location.hash = '#/scalars';
         }
     },
-    menuChange({value, url, title}) {
-        routeTo(url);
+    menuChange(dataItem) {
+        routeTo(dataItem.url);
     }
 };
 

frontend/src/common/component/AppMenu.san

@@ -3,7 +3,7 @@
         <san-appbar title="VisualDL">
             <san-menu slot="right">
                 <san-menu-item
-                    san-for="item in items"
+                    s-for="item in items"
                     class="{{selected === item.name ? 'sm-menu-item-selected' : ''}}"
                     on-click="handleItemClick(item)"
                     title="{{item.title}}" />

frontend/src/common/component/CheckBoxGroup.san

@@ -3,7 +3,7 @@
         <label class="label">{{label}}</label>
         <div class="group-box">
             <san-checkbox
-                san-if="showAll"
+                s-if="showAll"
                 class="checkbox-all"
                 label="全选"
                 value="all"
@@ -12,7 +12,7 @@
             ></san-checkbox>
             <div class="san-form-check-group">
                 <san-checkbox
-                    san-for="item in items"
+                    s-for="item in items"
                     label="{{item.name}}"
                     value="{{item.value}}"
                     disabled="{{item.disabled}}"

frontend/src/common/component/ExpandPanel.san

@@ -11,7 +11,7 @@
             </span>
         </h3>
         <div
-            san-if="{{isShow}}"
+            s-if="{{isShow}}"
             class="visaul-dl-expand-panel-content"
         >
             <slot></slot>

frontend/src/common/component/Notification/Notification.md

@@ -6,16 +6,16 @@
 ```san Notification
    <template>
     <div>
-        <san-button
+        <s-button
             variants="raised info"
             on-click="handleClick01">
             auto close
-        </san-button>
-        <san-button
+        </s-button>
+        <s-button
             variants="raised info"
             on-click="handleClick02">
             no auto close
-        </san-button>
+        </s-button>
     </div>
 </template>
 
@@ -53,31 +53,31 @@ export default {
 ```san Notification
 <template>
     <div>
-        <san-button
+        <s-button
             variants="raised info"
             on-click="handleClick01">
             success
-        </san-button>
-        <san-button
+        </s-button>
+        <s-button
             variants="raised info"
             on-click="handleClick02">
             warning
-        </san-button>
-        <san-button
+        </s-button>
+        <s-button
             variants="raised info"
             on-click="handleClick03">
             info
-        </san-button>
-        <san-button
+        </s-button>
+        <s-button
             variants="raised info"
             on-click="handleClick04">
             error
-        </san-button>
-        <san-button
+        </s-button>
+        <s-button
             variants="raised info"
             on-click="handleClick05">
             simplify
-        </san-button>
+        </s-button>
     </div>
 </template>
 
@@ -130,11 +130,11 @@ export default {
 ```san Notification
 <template>
     <div>
-        <san-button
+        <s-button
             variants="raised info"
             on-click="handleClick01">
             width offset
-        </san-button>
+        </s-button>
     </div>
 </template>
 

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

@@ -16,15 +16,15 @@ export default class NotificationItem extends Component {
         on-mouseenter="clearTimer"
         on-mouseleave="startTimer"
         on-click="handleClick">
-        <san-icon
-            san-if="type"
+        <s-icon
+            s-if="type"
             class="sm-notification-type type-{{type}}"
-            size="50">{{iconType}}</san-icon>
+            size="50">{{iconType}}</s-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>
+                <s-icon size="20" class="sm-notification-close-btn">close</s-icon>
             </div>
         </div>
     </div>

frontend/src/common/component/RadioGroup.san

@@ -4,7 +4,7 @@
         <div class="group-box">
             <san-radio
                 on-change="handleChange($event)"
-                san-for="item in items"
+                s-for="item in items"
                 label="{{item.name}}"
                 value="{{item.value}}"
                 disabled="{{item.disabled}}"

frontend/src/common/component/Slider.san

@@ -10,16 +10,6 @@
                 step="{{step}}"
             />
             <span>{{value}}</span>
-            <!--
-            <san-input-number
-                min="{{min}}"
-                max="{{max}}"
-                step="{{step}}"
-                value="{=value=}"
-                on-change="handlerChange($event)"
-                size="small">
-            </san-input-number>
-            -->
         </div>
     </div>
 </template>

frontend/src/graph/Graph.san

@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import {getPluginGraphsGraph} from '../service';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 import config from './ui/config';
 import chart from './ui/chart';