From 169d6a6dbebecb003e42442958fd65cd3193c9c7 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sun, 28 Jun 2020 19:31:53 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96detail=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-detail.vue    | 302 +++++++++---------
 .../src/components/charts/chart-list.vue      |   7 +-
 .../src/components/charts/chart.scss          |  64 +---
 3 files changed, 163 insertions(+), 210 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 92d604bc3..25f96d2ec 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -24,176 +24,178 @@
         </div>
         <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
           <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
-            <div v-for="(item, index) in detail" :key="index" style="padding: 0 15px;">
+            <div v-for="(item, index) in detail" :key="index" class="chart-sub">
               <div class="chart-sub-title" @click="hideElement(index)">
                 <span><i :class="{'el-icon-caret-right': show.indexOf(index) == -1,'el-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
                 <span>{{item.title}}</span>
               </div>
-              <div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-600': show.indexOf(index) == -1, 'unfold-600': show.indexOf(index) > -1}">
-                <template v-for="(value, key, i) in item.data">
+              <el-collapse-transition>
+                <div class="chart-sub-content" v-show="show.indexOf(index) > -1">
+                  <template v-for="(value, key, i) in item.data">
 
-                  <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
-                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]">
-                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span class="content-text">{{assetKey[key]}}</span>
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
-                    </div>
-
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
-                      <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
-                      <div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
-                        <template v-if="value && value.length > 0">
-                          <nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;"
-                                        :cursor-point="false"
-                                        :key="tagItem.id"
-                                        v-for="(tagItem, tagIndex) in value">
-                            <div :id="`tag-${index}-${tagIndex}`" class="tag-value">
-                              <span class="content-text">{{tagItem.value}}</span>
-                            </div>
-                          </nz-alert-tag>
-                        </template>
-                        <template v-else>&nbsp;</template>
+                    <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
+                    <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]">
+                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                        <span class="content-text">{{assetKey[key]}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
                       </div>
-                      <template v-else-if="key == 'pingRtt'">
-                        <div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
-                        <span>{{value ? value + 'ms' : ''}}</span>
-                      </template>
-                      <template v-else-if="assetKey[key]">
-                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                      </template>
-                    </div>
-                  </div>
-                  <!-- endpoint-detail、asset、model的assetInfo的feature-->
-                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'feature'">
-                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span class="content-text">{{key}}</span>
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
-                    </div>
 
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
-                      <template v-if="Array.isArray(value) && value.length>0">
-                        <div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div>
-                        <el-table
-                          v-else
-                          class="nz-table asset-info-table"
-                          :data="value"
-                          tooltip-effect="light"
-                          height="100%"
-                          ref="dataTable"
-                          v-scrollBar:el-table="'small'"
-                        >
-                          <el-table-column
-                            :resizable="false"
-                            v-for="(_item, _index) in setLabels(value)"
-                            v-if="_item.show"
-                            :key="`col-${_index}`"
-                            :label="_item.label"
+                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                        <span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
+                        <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
+                        <div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
+                          <template v-if="value && value.length > 0">
+                            <nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;"
+                                          :cursor-point="false"
+                                          :key="tagItem.id"
+                                          v-for="(tagItem, tagIndex) in value">
+                              <div :id="`tag-${index}-${tagIndex}`" class="tag-value">
+                                <span class="content-text">{{tagItem.value}}</span>
+                              </div>
+                            </nz-alert-tag>
+                          </template>
+                          <template v-else>&nbsp;</template>
+                        </div>
+                        <template v-else-if="key == 'pingRtt'">
+                          <div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
+                          <span>{{value ? value + 'ms' : ''}}</span>
+                        </template>
+                        <template v-else-if="assetKey[key]">
+                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                        </template>
+                      </div>
+                    </div>
+                    <!-- endpoint-detail、asset、model的assetInfo的feature-->
+                    <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'feature'">
+                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                        <span class="content-text">{{key}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                      </div>
+
+                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
+                        <template v-if="Array.isArray(value) && value.length>0">
+                          <div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div>
+                          <el-table
+                            v-else
+                            class="nz-table asset-info-table"
+                            :data="value"
+                            tooltip-effect="light"
+                            height="100%"
+                            ref="dataTable"
+                            v-scrollBar:el-table="'small'"
                           >
-                            <template slot-scope="scope" :column="_item">
-                              <template >
-                                <span v-html="scope.row[_item.prop]"></span>
+                            <el-table-column
+                              :resizable="false"
+                              v-for="(_item, _index) in setLabels(value)"
+                              v-if="_item.show"
+                              :key="`col-${_index}`"
+                              :label="_item.label"
+                            >
+                              <template slot-scope="scope" :column="_item">
+                                <template >
+                                  <span v-html="scope.row[_item.prop]"></span>
+                                </template>
                               </template>
-                            </template>
-                          </el-table-column>
-                        </el-table>
-                      </template>
-                      <template v-else-if="key">
-                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                      </template>
+                            </el-table-column>
+                          </el-table>
+                        </template>
+                        <template v-else-if="key">
+                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                        </template>
+                      </div>
                     </div>
-                  </div>
 
-                  <!-- project的projectInfo的project详情-->
-                  <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
-                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span class="content-text">{{projectKey[key]}}</span>
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
+                    <!-- project的projectInfo的project详情-->
+                    <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
+                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                        <span class="content-text">{{projectKey[key]}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
+                      </div>
+                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                        <template v-if="key == 'alertStat'">
+                          <div class="active-icon dark-red"></div>
+                          <span>{{value[0]}}</span>&nbsp;&nbsp;
+                          <div class="active-icon red"></div>
+                          <span>{{value[1]}}</span>&nbsp;&nbsp;
+                          <div class="active-icon orange"></div>
+                          <span>{{value[2]}}</span>
+                        </template>
+                        <template v-else-if="projectKey[key]">
+                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                        </template>
+                      </div>
                     </div>
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <template v-if="key == 'alertStat'">
-                        <div class="active-icon dark-red"></div>
-                        <span>{{value[0]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon red"></div>
-                        <span>{{value[1]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon orange"></div>
-                        <span>{{value[2]}}</span>
-                      </template>
-                      <template v-else-if="projectKey[key]">
-                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                      </template>
+                    <!-- project的projectInfo的module详情-->
+                    <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
+                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                        <span class="content-text">{{moduleKey[key]}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
+                      </div>
+                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                        <template v-if="key == 'alertStat'">
+                          <div class="active-icon dark-red"></div>
+                          <span>{{value[0]}}</span>&nbsp;&nbsp;
+                          <div class="active-icon red"></div>
+                          <span>{{value[1]}}</span>&nbsp;&nbsp;
+                          <div class="active-icon orange"></div>
+                          <span>{{value[2]}}</span>
+                        </template>
+                        <template v-else-if="key == 'endpointStat'">
+                          <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
+                          <span>{{value[0]}}</span>&nbsp;&nbsp;
+                          <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
+                          <span>{{value[1]}}</span>&nbsp;&nbsp;
+                        </template>
+                        <template v-else-if="moduleKey[key]">
+                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                        </template>
+                      </div>
                     </div>
-                  </div>
-                  <!-- project的projectInfo的module详情-->
-                  <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
-                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span class="content-text">{{moduleKey[key]}}</span>
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
-                    </div>
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <template v-if="key == 'alertStat'">
-                        <div class="active-icon dark-red"></div>
-                        <span>{{value[0]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon red"></div>
-                        <span>{{value[1]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon orange"></div>
-                        <span>{{value[2]}}</span>
-                      </template>
-                      <template v-else-if="key == 'endpointStat'">
-                        <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
-                        <span>{{value[0]}}</span>&nbsp;&nbsp;
-                        <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
-                        <span>{{value[1]}}</span>&nbsp;&nbsp;
-                      </template>
-                      <template v-else-if="moduleKey[key]">
-                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                      </template>
-                    </div>
-                  </div>
 
-                  <!-- endpoint-detail的endpointInfo的endpoint详情-->
-                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]">
-                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span class="content-text">{{endpointKey[key]}}</span>
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
+                    <!-- endpoint-detail的endpointInfo的endpoint详情-->
+                    <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]">
+                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                        <span class="content-text">{{endpointKey[key]}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
+                      </div>
+                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                        <template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 80px;" @click="preview"></div></template>
+                        <template v-else-if="endpointKey[key]">
+                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                        </template>
+                      </div>
                     </div>
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 80px;" @click="preview"></div></template>
-                      <template v-else-if="endpointKey[key]">
+                    <!-- endpoint-detail的endpointInfo的alert详情-->
+                    <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
+                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                        <span class="content-text">{{key}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                      </div>
+                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
                         <span class="content-text">{{value ? value : "&nbsp;"}}</span>
                         <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                      </template>
+                      </div>
                     </div>
-                  </div>
-                  <!-- endpoint-detail的endpointInfo的alert详情-->
-                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
-                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span class="content-text">{{key}}</span>
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
-                    </div>
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                      <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                    </div>
-                  </div>
 
-                  <!-- alertRule-detail的详情-->
-                  <div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
-                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span class="content-text">{{key}}</span>
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                    <!-- alertRule-detail的详情-->
+                    <div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
+                      <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                        <span class="content-text">{{key}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                      </div>
+                      <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                      </div>
                     </div>
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                      <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
-                    </div>
-                  </div>
-                </template>
-              </div>
+                  </template>
+                </div>
+              </el-collapse-transition>
             </div>
           </el-scrollbar>
         </div>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 0263a5cdf..909e544d0 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1204,21 +1204,22 @@
           let step = bus.getStep(startTime, endTime);
           this.$nextTick(() => {
             let query = chartInfo.elements[0].expression;
-            this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step).then(response => {
+            this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step=5m').then(response => {
               if (response.status === 'success') {
                 if (response.data.result) {
                   let series = {
                     name: '',
                     symbol: 'emptyCircle',  //去掉点
-                    symbolSize: [2, 2],
+                    symbolSize: 6,
                     smooth: 0.2,  //曲线变平滑
-                    showSymbol: false,
+                    showSymbol: true,
                     data: [],
                     type: "line",
                     lineStyle: {
                       width: 1,
                       opacity: 0.9
                     },
+                    label: {show: true},
                     itemStyle: {
                       color: function(params) {
                         if (params.data[1] == "1") {
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 30cca2458..e26039d16 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -316,6 +316,13 @@
     .active-icon {
       margin: 0;
     }
+    .chart-sub {
+      padding: 0 15px;
+      margin-bottom: 5px;
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
     .chart-sub-title {
       background-color: #efefef;
       font-size: 13px;
@@ -326,11 +333,7 @@
       user-select: none;
     }
     .chart-sub-content {
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
       width: 100%;
-      margin-bottom: 5px;
       box-sizing: border-box;
       .content-item>div {
         display: inline-block;
@@ -443,59 +446,6 @@
         }
       }
     }
-    .init-no-animation {
-      opacity: 1;
-      max-height: 200px;
-      visibility: visible;
-    }
-    .fold-500 {
-      animation-name: fold-500; //该动画定义在main.scss里
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-    }
-    .fold-600 {
-      animation-name: fold-600; //该动画定义在main.scss里
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-    }
-    .fold-200 {
-      animation-name: fold-200; //该动画定义在main.scss里
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-    }
-    .unfold-500 {
-      animation-name: unfold-500;
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 500px;
-      visibility: visible;
-    }
-    .unfold-600 {
-      animation-name: unfold-600;
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 600px;
-      visibility: visible;
-    }
-    .unfold-200 {
-      animation-name: unfold-200;
-      animation-duration: 0.2s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 200px;
-      visibility: visible;
-    }
   }
   .chart-url {
     .url-container {