|
| 1 | +<div v-bind:class="[componentId, 'clyd-widget']"> |
| 2 | + <div class="bu-level" v-if="!showZoom"> |
| 3 | + <div class="bu-level-left bu-is-flex-shrink-1" style="min-width: 0"> |
| 4 | + <clyd-widget-title class="bu-level-item" :title="title" :labels="metricLabels"></clyd-widget-title> |
| 5 | + </div> |
| 6 | + <div class="bu-level-right" v-if="isAllowed"> |
| 7 | + <div class="bu-level-item"> |
| 8 | + <clyd-bucket v-if="showBuckets" :widget-id="data._id" v-model="selectedBucket"></clyd-bucket> |
| 9 | + </div> |
| 10 | + <div class="bu-level-item"> |
| 11 | + <cly-more-options @command="onWidgetCommand"> |
| 12 | + <el-dropdown-item class="dashboard-more-options" command="edit">{{i18n('common.edit')}}</el-dropdown-item> |
| 13 | + <el-dropdown-item class="dashboard-more-options" command="delete">{{i18n('common.delete')}}</el-dropdown-item> |
| 14 | + <el-dropdown-item class="dashboard-more-options" v-if="data.visualization === 'time-series' || data.visualization === 'bar-chart'" command="zoom">{{i18n('common.zoom-in')}}</el-dropdown-item> |
| 15 | + <div v-if="data.visualization === 'time-series'"> |
| 16 | + <hr class="dashboard-more-options__divider"> |
| 17 | + <el-dropdown-item class="dashboard-more-options" command="add">{{i18n('notes.add-note')}}</el-dropdown-item> |
| 18 | + <el-dropdown-item class="dashboard-more-options" command="manage">{{i18n('notes.manage-notes')}}</el-dropdown-item> |
| 19 | + <el-dropdown-item class="dashboard-more-options" command="show">{{!areNotesHidden ? i18n("notes.hide-notes") : i18n("notes.show-notes")}}</el-dropdown-item> |
| 20 | + </div> |
| 21 | + </cly-more-options> |
| 22 | + </div> |
| 23 | + </div> |
| 24 | + </div> |
| 25 | + <cly-chart-zoom ref="zoomRef" v-if="showZoom" @zoom-reset="onZoomReset" :echartRef="$refs.echartRef.$refs.echarts" class="bu-is-flex bu-is-align-items-center bu-is-justify-content-flex-end bu-m-0 cly-vue-zoom__external"></cly-chart-zoom> |
| 26 | + <clyd-primary-legend :custom-period="data.custom_period"></clyd-primary-legend> |
| 27 | + <div class="clyd-widget__content" v-loading="loading" :class="'clyd-widget__content--vis-' + data.visualization"> |
| 28 | + <template v-if="!loading"> |
| 29 | + <cly-chart-time v-if="data.visualization === 'time-series' && !data.breakdowns" :show-zoom="false" @patchzoom="onPatchZoom" @datazoom="onDataZoom" ref="echartRef" :showDownload="false" :showToggle="false" :option="timelineGraph.lineOptions" height="auto" skin="full" :legend="{show: false}" :category="data.data_type || data.feature" :sub-category="data.feature === 'events' ? data.events : []"> |
| 30 | + </cly-chart-time> |
| 31 | + <div v-else-if="data.visualization === 'number'" > |
| 32 | + <h1 class="bu-pb-2">{{formatNumber(number.total)}}</h1> |
| 33 | + <p v-if="number.trend== 'u'" class="trend-up bu-p-0 bu-m-0"> |
| 34 | + <i class="cly-trend-up-icon ion-android-arrow-up bu-ml-2"></i><span>{{number.change}}</span> |
| 35 | + <span class="text-medium ">{{i18n('dashboards.compared-to-prev-period')}}</span> |
| 36 | + </p> |
| 37 | + <p v-if="number.trend == 'd'" class="trend-down bu-p-0 bu-m-0"> |
| 38 | + <i class="cly-trend-down-icon ion-android-arrow-down bu-ml-2"></i><span>{{number.change}}</span> |
| 39 | + <span class="text-medium ">{{i18n('dashboards.compared-to-prev-period')}}</span> |
| 40 | + </p> |
| 41 | + </div> |
| 42 | + <div v-else-if="data.visualization === 'table'" style="width: 100%; height: 100%;"> |
| 43 | + <cly-datatable-n v-if="getTableData.length" :rows="getTableData" :hideTop="true" style="width: 100%; height: 100%;"> |
| 44 | + <template v-slot="scope"> |
| 45 | + <el-table-column v-for="(item, index) in tableStructure" :key="index" :sortable="false" :prop="item.prop" :label="item.title"> |
| 46 | + <template slot-scope="scope"> |
| 47 | + <span v-if="item.type === 'number'"> |
| 48 | + {{formatNumber(scope.row[item.prop] || 0)}} |
| 49 | + </span> |
| 50 | + <span v-else> |
| 51 | + {{scope.row[item.prop]}} |
| 52 | + </span> |
| 53 | + </template> |
| 54 | + </el-table-column> |
| 55 | + </template> |
| 56 | + </cly-datatable-n> |
| 57 | + <cly-blank :classes="{'bu-p-0': true}" v-else></cly-blank> |
| 58 | + </div> |
| 59 | + <cly-chart-bar v-else-if="data.visualization === 'bar-chart'" :show-zoom="false" @patchzoom="onPatchZoom" @datazoom="onDataZoom" ref="echartRef" :showDownload="false" :showToggle="false" :option="barOptions" height="auto" skin="full" :legend="{show: false}" :patch-x-axis="barOptions.patchXAxis !== undefined ? barOptions.patchXAxis : true"></cly-chart-bar> |
| 60 | + <cly-chart-time v-else-if="data.visualization === 'time-series'" :valFormatter="valFormatter" :option="timelineGraph.lineOptions" :patch-x-axis="false" :no-hourly="true" category="user-analytics" :hideNotation="false" :show-zoom="false" @patchzoom="onPatchZoom" @datazoom="onDataZoom" ref="echartRef" :showDownload="false" :showToggle="false" height="auto" skin="full"></cly-chart-time> |
| 61 | + <cly-chart-pie v-else-if="data.visualization === 'pie-chart'" :showZoom="false" :showDownload="false" :showToggle="false" :option="pieGraph" height="auto" skin="full" :legend="{show: false}"></cly-chart-pie> |
| 62 | + </template> |
| 63 | + </div> |
| 64 | + <drawer :settings="drawerSettingsForWidgets" :controls="drawers.annotation" @cly-refresh="refresh"></drawer> |
| 65 | + <clyd-secondary-legend :apps="data.apps" :labels="legendLabels" v-if="data.visualization === 'time-series' && !data.breakdowns"></clyd-secondary-legend> |
| 66 | + <clyd-widget-apps :apps="data.apps"></clyd-widget-apps> |
| 67 | +</div> |
0 commit comments