feat(dataLogs): new chart css for data center

This commit is contained in:
OldHawk
2018-06-05 16:11:34 +08:00
parent 32c8fc1d14
commit fabd4d8a99
9 changed files with 173 additions and 46 deletions

View File

@@ -1455,18 +1455,25 @@
// data center
DATA_CENTER: {
ITEM_SCORE: 'Score data analysis',
ITEM_SCORE_HISTORY: 'Score data history',
ITEM_UPLOADED: 'Uploaded data analysis',
ITEM_UPLOADED_HISTORY: 'Uploaded data history',
ITEM_DOWNLOADED: 'Downloaded data analysis',
LAST_30_DAYS_DATA_SCORE: 'The last 30 days score data',
LAST_30_DAYS_DATA_UPLOADED: 'The last 30 days uploaded data',
LAST_30_DAYS_DATA_DOWNLOADED: 'The last 30 days downloaded data',
LAST_12_MONTHS_DATA_SCORE: 'The last 12 months score data',
LAST_12_MONTHS_DATA_UPLOADED: 'The last 12 months uploaded data',
LAST_12_MONTHS_DATA_DOWNLOADED: 'The last 12 months downloaded data',
ITEM_DOWNLOADED_HISTORY: 'Downloaded data history',
LAST_DAYS_DATA_SCORE: 'The last {{days}} days score data',
LAST_DAYS_DATA_UPLOADED: 'The last {{days}} days uploaded data',
LAST_DAYS_DATA_DOWNLOADED: 'The last {{days}} days downloaded data',
LAST_DAYS_DATA_SCORE_HISTORY: 'The last {{days}} days score data history',
LAST_DAYS_DATA_UPLOADED_HISTORY: 'The last {{days}} days upload data history',
LAST_DAYS_DATA_DOWNLOADED_HISTORY: 'The last {{days}} days downloaded data history',
LAST_MONTHS_DATA_SCORE: 'The last {{months}} months score data',
LAST_MONTHS_DATA_UPLOADED: 'The last {{months}} months uploaded data',
LAST_MONTHS_DATA_DOWNLOADED: 'The last {{months}} months downloaded data',
GET_USER_LOGS_ERROR: 'Get user logs data failed',
SERIES_SCORE: 'score',
SERIES_UPLOADED: 'uploaded',
SERIES_DOWNLOADED: 'downloaded'
SERIES_DOWNLOADED: 'downloaded',
LEGEND_UNIT: ' (unit: GB)'
},
//status pages

View File

@@ -1455,18 +1455,25 @@
// data center
DATA_CENTER: {
ITEM_SCORE: '積分數據分析',
ITEM_SCORE_HISTORY: '積分數據歷史',
ITEM_UPLOADED: '上傳量數據分析',
ITEM_UPLOADED_HISTORY: '上傳量數據歷史',
ITEM_DOWNLOADED: '下載量數據分析',
LAST_30_DAYS_DATA_SCORE: '最近30天的積分數據',
LAST_30_DAYS_DATA_UPLOADED: '最近30天的上傳量數據',
LAST_30_DAYS_DATA_DOWNLOADED: '最近30天的下載量數據',
LAST_12_MONTHS_DATA_SCORE: '最近12個月的積分數據',
LAST_12_MONTHS_DATA_UPLOADED: '最近12個月的上傳量數據',
LAST_12_MONTHS_DATA_DOWNLOADED: '最近12個月的下載量量數據',
ITEM_DOWNLOADED_HISTORY: '下載量數據歷史',
LAST_DAYS_DATA_SCORE: '最近{{days}}天的積分數據',
LAST_DAYS_DATA_UPLOADED: '最近{{days}}天的上傳量數據',
LAST_DAYS_DATA_DOWNLOADED: '最近{{days}}天的下載量數據',
LAST_DAYS_DATA_SCORE_HISTORY: '最近{{days}}天的積分數據歷史',
LAST_DAYS_DATA_UPLOADED_HISTORY: '最近{{days}}天的上傳量數據歷史',
LAST_DAYS_DATA_DOWNLOADED_HISTORY: '最近{{days}}天的下載量數據歷史',
LAST_MONTHS_DATA_SCORE: '最近{{months}}個月的積分數據',
LAST_MONTHS_DATA_UPLOADED: '最近{{months}}個月的上傳量數據',
LAST_MONTHS_DATA_DOWNLOADED: '最近{{months}}個月的下載量量數據',
GET_USER_LOGS_ERROR: '獲取用戶日誌數據失敗',
SERIES_SCORE: '積分',
SERIES_UPLOADED: '上傳量',
SERIES_DOWNLOADED: '下載量'
SERIES_DOWNLOADED: '下載量',
LEGEND_UNIT: ' (單位: GB)'
},
//status pages

View File

@@ -1455,18 +1455,25 @@
// data center
DATA_CENTER: {
ITEM_SCORE: '积分数据分析',
ITEM_SCORE_HISTORY: '积分数据历史',
ITEM_UPLOADED: '上传量数据分析',
ITEM_UPLOADED_HISTORY: '上传量数据历史',
ITEM_DOWNLOADED: '下载量数据分析',
LAST_30_DAYS_DATA_SCORE: '最近30天的积分数据',
LAST_30_DAYS_DATA_UPLOADED: '最近30天的上传量数据',
LAST_30_DAYS_DATA_DOWNLOADED: '最近30天的下载量数据',
LAST_12_MONTHS_DATA_SCORE: '最近12个月的积分数据',
LAST_12_MONTHS_DATA_UPLOADED: '最近12个月的上传量数据',
LAST_12_MONTHS_DATA_DOWNLOADED: '最近12个月的下载量数据',
ITEM_DOWNLOADED_HISTORY: '下载量数据历史',
LAST_DAYS_DATA_SCORE: '最近{{days}}天的积分数据',
LAST_DAYS_DATA_UPLOADED: '最近{{days}}天的上传量数据',
LAST_DAYS_DATA_DOWNLOADED: '最近{{days}}天的下载量数据',
LAST_DAYS_DATA_SCORE_HISTORY: '最近{{days}}天的积分数据历史',
LAST_DAYS_DATA_UPLOADED_HISTORY: '最近{{days}}天的上传量数据历史',
LAST_DAYS_DATA_DOWNLOADED_HISTORY: '最近{{days}}天的下载量数据历史',
LAST_MONTHS_DATA_SCORE: '最近{{months}}个月的积分数据',
LAST_MONTHS_DATA_UPLOADED: '最近{{months}}个月的上传量数据',
LAST_MONTHS_DATA_DOWNLOADED: '最近{{months}}个月的下载量数据',
GET_USER_LOGS_ERROR: '获取用户日志数据失败',
SERIES_SCORE: '积分',
SERIES_UPLOADED: '上传量',
SERIES_DOWNLOADED: '下载量'
SERIES_DOWNLOADED: '下载量',
LEGEND_UNIT: ' (单位: GB)'
},
//status pages

View File

@@ -39,6 +39,27 @@
data: {
pageTitle: 'PAGETITLE.DATA_CENTER'
}
})
.state('dataCenter.scoreHistory', {
url: '/scoreHistory',
templateUrl: '/modules/data-logs/client/views/data-score-history.client.view.html',
data: {
pageTitle: 'PAGETITLE.DATA_CENTER'
}
})
.state('dataCenter.uploadedHistory', {
url: '/uploadedHistory',
templateUrl: '/modules/data-logs/client/views/data-uploaded-history.client.view.html',
data: {
pageTitle: 'PAGETITLE.DATA_CENTER'
}
})
.state('dataCenter.downloadedHistory', {
url: '/downloadedHistory',
templateUrl: '/modules/data-logs/client/views/data-downloaded-history.client.view.html',
data: {
pageTitle: 'PAGETITLE.DATA_CENTER'
}
});
}
}());

View File

@@ -14,6 +14,14 @@
vm.user = Authentication.user;
vm.itemsPerPageConfig = MeanTorrentConfig.meanTorrentConfig.itemsPerPage;
vm.announceConfig = MeanTorrentConfig.meanTorrentConfig.announce;
vm.scoreConfig = MeanTorrentConfig.meanTorrentConfig.score;
/**
* $scope.$on('chart-create')
*/
$scope.$on('chart-create', function (evt, chart) {
chart.generateLegend();
});
/**
* getUserDaysLogs
@@ -43,13 +51,32 @@
downloaded: []
},
data: {
score: [],
uploaded: [],
downloaded: []
score: [[]],
uploaded: [[]],
downloaded: [[]]
},
colors: {
score: ['rgb(255,102,0)']
},
options: {
legendCallback: function (chart) {
angular.forEach(chart.legend.legendItems, function (l) {
switch (l.text) {
case $translate.instant('DATA_CENTER.SERIES_UPLOADED'):
case $translate.instant('DATA_CENTER.SERIES_DOWNLOADED'):
l.text += $translate.instant('DATA_CENTER.LEGEND_UNIT');
}
});
},
legend: {
display: true,
},
tooltips: {
intersect: false
}
}
};
//labels
//labels
for (var i = vm.announceConfig.userDaysLogDays - 1; i >= 0; i--) {
logsData.labels.push(moment().subtract(i, 'days').format('YYYY-MM-DD'));
@@ -69,21 +96,21 @@
}).reduce(function (a, b) {
return a + b;
}) : 0;
logsData.data.score.push(labScore);
logsData.data.score[0].push(labScore);
var labUploaded = labItems.length > 0 ? labItems.map(function (x) {
return x.uploaded;
}).reduce(function (a, b) {
return a + b;
}) : 0;
logsData.data.uploaded.push(Math.round(labUploaded / (1024 * 1024 * 1024) * 100) / 100);
logsData.data.uploaded[0].push(Math.round(labUploaded / (1024 * 1024 * 1024) * 100) / 100);
var labDownloaded = labItems.length > 0 ? labItems.map(function (x) {
return x.downloaded;
}).reduce(function (a, b) {
return a + b;
}) : 0;
logsData.data.downloaded.push(Math.round(labDownloaded / (1024 * 1024 * 1024) * 100) / 100);
logsData.data.downloaded[0].push(Math.round(labDownloaded / (1024 * 1024 * 1024) * 100) / 100);
});
return logsData;
@@ -117,9 +144,29 @@
downloaded: []
},
data: {
score: [],
uploaded: [],
downloaded: []
score: [[]],
uploaded: [[]],
downloaded: [[]]
},
colors: {
score: ['rgb(255,102,0)']
},
options: {
legendCallback: function (chart) {
angular.forEach(chart.legend.legendItems, function (l) {
switch (l.text) {
case $translate.instant('DATA_CENTER.SERIES_UPLOADED'):
case $translate.instant('DATA_CENTER.SERIES_DOWNLOADED'):
l.text += $translate.instant('DATA_CENTER.LEGEND_UNIT');
}
});
},
legend: {
display: true,
},
tooltips: {
intersect: false
}
}
};
@@ -142,25 +189,31 @@
}).reduce(function (a, b) {
return a + b;
}) : 0;
logsData.data.score.push(labScore);
logsData.data.score[0].push(labScore);
var labUploaded = labItems.length > 0 ? labItems.map(function (x) {
return x.uploaded;
}).reduce(function (a, b) {
return a + b;
}) : 0;
logsData.data.uploaded.push(Math.round(labUploaded / (1024 * 1024 * 1024) * 100) / 100);
logsData.data.uploaded[0].push(Math.round(labUploaded / (1024 * 1024 * 1024) * 100) / 100);
var labDownloaded = labItems.length > 0 ? labItems.map(function (x) {
return x.downloaded;
}).reduce(function (a, b) {
return a + b;
}) : 0;
logsData.data.downloaded.push(Math.round(labDownloaded / (1024 * 1024 * 1024) * 100) / 100);
logsData.data.downloaded[0].push(Math.round(labDownloaded / (1024 * 1024 * 1024) * 100) / 100);
});
return logsData;
}
/**
* getUserScoreHistory
*/
vm.getUserScoreHistory = function () {
};
}
}());

View File

@@ -1,25 +1,33 @@
<section class="data-center" ng-controller="DataCenterController as vm">
<div class="panel panel-default" ng-init="vm.getUserDaysLogs()">
<div class="panel-heading"><i class="fa fa-line-chart text-mt"></i>&emsp;{{'DATA_CENTER.LAST_30_DAYS_DATA_DOWNLOADED' | translate}}</div>
<div class="panel-heading">
<i class="fa fa-line-chart text-mt"></i>&emsp;
<span translate="DATA_CENTER.LAST_DAYS_DATA_DOWNLOADED" translate-values="{days: vm.announceConfig.userDaysLogDays}"></span>
</div>
<div class="panel-body">
<!--<p>...</p>-->
</div>
<div class="chart-logs">
<canvas class="chart chart-line" chart-data="vm.userDaysLogsData.data.downloaded" chart-labels="vm.userDaysLogsData.labels"
chart-series="vm.userDaysLogsData.series.downloaded" chart-click=""></canvas>
chart-series="vm.userDaysLogsData.series.downloaded" chart-options="vm.userDaysLogsData.options"
chart-colors="vm.userDaysLogsData.colors.score" chart-click=""></canvas>
</div>
</div>
<div class="panel panel-default" ng-init="vm.getUserMonthsLogs()">
<div class="panel-heading"><i class="fa fa-line-chart text-mt"></i>&emsp;{{'DATA_CENTER.LAST_12_MONTHS_DATA_DOWNLOADED' | translate}}</div>
<div class="panel-heading">
<i class="fa fa-line-chart text-mt"></i>&emsp;
<span translate="DATA_CENTER.LAST_MONTHS_DATA_DOWNLOADED" translate-values="{months: vm.announceConfig.userMonthsLogMonths}"></span>
</div>
<div class="panel-body">
<!--<p>...</p>-->
</div>
<div class="chart-logs">
<canvas class="chart chart-line" chart-data="vm.userMonthsLogsData.data.downloaded" chart-labels="vm.userMonthsLogsData.labels"
chart-series="vm.userMonthsLogsData.series.downloaded" chart-click=""></canvas>
chart-series="vm.userMonthsLogsData.series.downloaded" chart-options="vm.userDaysLogsData.options"
chart-colors="vm.userDaysLogsData.colors.score" chart-click=""></canvas>
</div>
</div>
</section>

View File

@@ -1,25 +1,33 @@
<section class="data-center" ng-controller="DataCenterController as vm">
<div class="panel panel-default" ng-init="vm.getUserDaysLogs()">
<div class="panel-heading"><i class="fa fa-line-chart text-mt"></i>&emsp;{{'DATA_CENTER.LAST_30_DAYS_DATA_SCORE' | translate}}</div>
<div class="panel-heading">
<i class="fa fa-line-chart text-mt"></i>&emsp;
<span translate="DATA_CENTER.LAST_DAYS_DATA_SCORE" translate-values="{days: vm.announceConfig.userDaysLogDays}"></span>
</div>
<div class="panel-body">
<!--<p>...</p>-->
</div>
<div class="chart-logs">
<canvas class="chart chart-line" chart-data="vm.userDaysLogsData.data.score" chart-labels="vm.userDaysLogsData.labels"
chart-series="vm.userDaysLogsData.series.score" chart-click=""></canvas>
chart-series="vm.userDaysLogsData.series.score" chart-options="vm.userDaysLogsData.options"
chart-colors="vm.userDaysLogsData.colors.score" chart-click=""></canvas>
</div>
</div>
<div class="panel panel-default" ng-init="vm.getUserMonthsLogs()">
<div class="panel-heading"><i class="fa fa-line-chart text-mt"></i>&emsp;{{'DATA_CENTER.LAST_12_MONTHS_DATA_SCORE' | translate}}</div>
<div class="panel-heading">
<i class="fa fa-line-chart text-mt"></i>&emsp;
<span translate="DATA_CENTER.LAST_MONTHS_DATA_SCORE" translate-values="{months: vm.announceConfig.userMonthsLogMonths}"></span>
</div>
<div class="panel-body">
<!--<p>...</p>-->
</div>
<div class="chart-logs">
<canvas class="chart chart-line" chart-data="vm.userMonthsLogsData.data.score" chart-labels="vm.userMonthsLogsData.labels"
chart-series="vm.userMonthsLogsData.series.score" chart-click=""></canvas>
chart-series="vm.userMonthsLogsData.series.score" chart-options="vm.userDaysLogsData.options"
chart-colors="vm.userDaysLogsData.colors.score" chart-click=""></canvas>
</div>
</div>
</section>

View File

@@ -1,25 +1,33 @@
<section class="data-center" ng-controller="DataCenterController as vm">
<div class="panel panel-default" ng-init="vm.getUserDaysLogs()">
<div class="panel-heading"><i class="fa fa-line-chart text-mt"></i>&emsp;{{'DATA_CENTER.LAST_30_DAYS_DATA_UPLOADED' | translate}}</div>
<div class="panel-heading">
<i class="fa fa-line-chart text-mt"></i>&emsp;
<span translate="DATA_CENTER.LAST_DAYS_DATA_UPLOADED" translate-values="{days: vm.announceConfig.userDaysLogDays}"></span>
</div>
<div class="panel-body">
<!--<p>...</p>-->
</div>
<div class="chart-logs">
<canvas class="chart chart-line" chart-data="vm.userDaysLogsData.data.uploaded" chart-labels="vm.userDaysLogsData.labels"
chart-series="vm.userDaysLogsData.series.uploaded" chart-click=""></canvas>
chart-series="vm.userDaysLogsData.series.uploaded" chart-options="vm.userDaysLogsData.options"
chart-colors="vm.userDaysLogsData.colors.score" chart-click=""></canvas>
</div>
</div>
<div class="panel panel-default" ng-init="vm.getUserMonthsLogs()">
<div class="panel-heading"><i class="fa fa-line-chart text-mt"></i>&emsp;{{'DATA_CENTER.LAST_12_MONTHS_DATA_UPLOADED' | translate}}</div>
<div class="panel-heading">
<i class="fa fa-line-chart text-mt"></i>&emsp;
<span translate="DATA_CENTER.LAST_MONTHS_DATA_UPLOADED" translate-values="{months: vm.announceConfig.userMonthsLogMonths}"></span>
</div>
<div class="panel-body">
<!--<p>...</p>-->
</div>
<div class="chart-logs">
<canvas class="chart chart-line" chart-data="vm.userMonthsLogsData.data.uploaded" chart-labels="vm.userMonthsLogsData.labels"
chart-series="vm.userMonthsLogsData.series.uploaded" chart-click=""></canvas>
chart-series="vm.userMonthsLogsData.series.uploaded" chart-options="vm.userDaysLogsData.options"
chart-colors="vm.userDaysLogsData.colors.score" chart-click=""></canvas>
</div>
</div>
</section>

View File

@@ -9,6 +9,14 @@
<a ui-sref="dataCenter.downloaded" class="list-group-item"
ui-sref-active="active">{{'DATA_CENTER.ITEM_DOWNLOADED' | translate}}</a>
</div>
<div class="list-group panel-menu-list">
<a ui-sref="dataCenter.scoreHistory" class="list-group-item"
ui-sref-active="active">{{'DATA_CENTER.ITEM_SCORE_HISTORY' | translate}}</a>
<a ui-sref="dataCenter.uploadedHistory" class="list-group-item"
ui-sref-active="active">{{'DATA_CENTER.ITEM_UPLOADED_HISTORY' | translate}}</a>
<a ui-sref="dataCenter.downloadedHistory" class="list-group-item"
ui-sref-active="active">{{'DATA_CENTER.ITEM_DOWNLOADED_HISTORY' | translate}}</a>
</div>
</div>
<div class="col-sm-9">
<div ui-view></div>