Chaged chart library to a angular chart.js
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
index 5d64575..326f286 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
@@ -15,8 +15,8 @@
"tests"
],
"dependencies": {
- "angular-charts": "teone/angular-charts#~0.2.7",
- "n3-line-chart": "~1.1.12"
+ "Split.js": "~1.0.4",
+ "angular-chart.js": "~0.8.7"
},
"devDependencies": {
"jquery": "~2.1.4",
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
index 0868702..56ae00f 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
@@ -1,67 +1,123 @@
-.chart {
- width: 100%;
- height: 500px;
-}
-.loader {
- font-size: 10px;
- margin: 50px auto;
- text-indent: -9999em;
- width: 11em;
- height: 11em;
- border-radius: 50%;
- background: #ffffff;
- background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- position: relative;
- -webkit-animation: load3 1.4s infinite linear;
- animation: load3 1.4s infinite linear;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
-}
-.loader:before {
- width: 50%;
- height: 50%;
- background: #105E9E;
- border-radius: 100% 0 0 0;
- position: absolute;
- top: 0;
- left: 0;
- content: '';
-}
-.loader:after {
- background: #fff;
- width: 75%;
- height: 75%;
- border-radius: 50%;
- content: '';
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
-}
-@-webkit-keyframes load3 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
+/*ceilometer-dashboard{*/
+
+ /* Panel Layout */
+ .panel {
+ margin-top: 10px;
}
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
+
+ .panel-body:not(:first-child) {
+ border-top: 1px solid #e3e3e3;
}
-}
-@keyframes load3 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
+
+ .panel-body .row {
+ margin-top: 10px;
}
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
+
+ /* Chart details */
+ .chart {
+ width: 100%;
+ height: 300px;
}
-}
+
+ /* Loader */
+ .loader {
+ font-size: 10px;
+ margin: 50px auto;
+ text-indent: -9999em;
+ width: 11em;
+ height: 11em;
+ border-radius: 50%;
+ background: #ffffff;
+ background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ position: relative;
+ -webkit-animation: load3 1.4s infinite linear;
+ animation: load3 1.4s infinite linear;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ }
+ .loader:before {
+ width: 50%;
+ height: 50%;
+ background: #105E9E;
+ border-radius: 100% 0 0 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: '';
+ }
+ .loader:after {
+ background: #fff;
+ width: 75%;
+ height: 75%;
+ border-radius: 50%;
+ content: '';
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ }
+ @-webkit-keyframes load3 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes load3 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+
+ /* Split.js */
+
+ html, body {
+ height: 100%;
+ }
+
+ body {
+ box-sizing: border-box;
+ }
+
+ .split {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+ .gutter {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: 50%;
+ }
+ .gutter.gutter-horizontal {
+ cursor: col-resize;
+ background-image: url('grips/vertical.png');
+ }
+ .gutter.gutter-vertical {
+ cursor: row-resize;
+ background-image: url('grips/horizontal.png');
+ }
+ .split.split-horizontal, .gutter.gutter-horizontal {
+ height: 100%;
+ float: left;
+ }
+
+
+/*}
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png
new file mode 100644
index 0000000..0ac8fa1
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png
Binary files differ
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
index a3d4845..adaa2ee 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
@@ -2,6 +2,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
<!-- browserSync -->
<!-- bower:css -->
+<link rel="stylesheet" href="vendor/angular-chart.js/dist/angular-chart.css" />
<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
<!-- endbower --><!-- endcss -->
<!-- inject:css -->
@@ -15,11 +16,10 @@
</div>
<!-- bower:js -->
-<script src="vendor/d3/d3.js"></script>
+<script src="vendor/Split.js/split.js"></script>
<script src="vendor/angular/angular.js"></script>
-<script src="vendor/angular-charts/dist/angular-charts.js"></script>
-<script src="vendor/moment/moment.js"></script>
-<script src="vendor/n3-line-chart/build/line-chart.min.js"></script>
+<script src="vendor/Chart.js/Chart.js"></script>
+<script src="vendor/angular-chart.js/dist/angular-chart.js"></script>
<script src="vendor/jquery/dist/jquery.js"></script>
<script src="vendor/angular-mocks/angular-mocks.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
index c0180fa..0dfa92b 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -6,7 +6,8 @@
'ngLodash',
'ui.router',
'xos.helpers',
- 'angularCharts'
+ // 'angularCharts',
+ 'chart.js'
])
.config(($stateProvider) => {
$stateProvider
@@ -17,6 +18,16 @@
.state('samples', {
url: '/:name/:tenant/samples',
template: '<ceilometer-samples></ceilometer-samples>'
+ })
+ .state('split', {
+ url: '/split',
+ controller: () => {
+ console.log('split', Split);
+ Split(['#one', '#two', '#three'], {
+
+ });
+ },
+ templateUrl: 'templates/split.html'
});
})
.config(function($httpProvider){
@@ -120,14 +131,30 @@
return lodash.sortBy(formatted, 'timestamp');
}
+ this.getLabels = (data) => {
+ return data.reduce((list, item) => {
+ let date = new Date(item.timestamp);
+ list.push(`${date.getHours()}:${(date.getMinutes()<10?'0':'') + date.getMinutes()}:${date.getSeconds()}`);
+ return list;
+ }, []);
+ };
+
+ this.getData = (data) => {
+ return data.reduce((list, item) => {
+ list.push(item.volume);
+ return list;
+ }, []);
+ }
+
this.showSamples = () => {
this.loader = true;
Ceilometer.getSamples(this.name, this.tenant)
.then(res => {
- console.log(res.length, lodash.groupBy(res, 'timestamp'));
- this.sampleChartData = {
- series: [$stateParams.name],
- data: this.formatSamplesData(res)
+ res = lodash.sortBy(res, 'timestamp');
+ this.chart = {
+ series: [this.name],
+ labels: this.getLabels(res),
+ data: [this.getData(res)]
}
})
.catch(err => {
@@ -139,19 +166,6 @@
};
this.showSamples();
-
- this.sampleChartConfig = {
- title: false,
- tooltips: true,
- labels: false,
- legend: {
- display: false,
- //could be 'left, right'
- position: 'right'
- },
- lineLegend: 'traditional',
- waitForHeightAndWidth: true
- }
}
}
});
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
index 67a5284..3eee429 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
@@ -11,11 +11,15 @@
</div>
<section ng-hide="vm.loader">
-
+ <div class="row">
+ <div class="col-xs-12">
+ <h2>Projects</h2>
+ </div>
+ </div>
<div class="well" ng-repeat="(project, resources) in vm.projects">
<div class="row">
<div class="col-xs-11">
- {{project}}
+ <h3>{{project}}</h3>
</div>
<div class="col-xs-1">
<a ng-click="expandProject = !expandProject" class="btn btn-primary">
@@ -23,70 +27,57 @@
</a>
</div>
</div>
-
- <div class="panel panel-default" ng-show="expandProject">
-<!-- <div class="panel-body">
- <div class="col-xs-3"><b>
- Resource
- </b></div>
- <div class="col-xs-3"><b>
- Name
- </b></div>
- <div class="col-xs-3"><b>
- Unit
- </b></div>
- <div class="col-xs-3"><b>
- Actions
- </b></div>
- </div>
- <div class="panel-body">
- <div class="col-xs-3">
- <input class="form-control" ng-model="vm.query.resource_id" type="text"/>
+
+ <div class="row">
+ <div class="panel panel-default" ng-show="expandProject">
+ <div class="panel-heading">
+ <h4>Resources</h4>
</div>
- <div class="col-xs-3">
- <input class="form-control" ng-model="vm.query.name" type="text"/>
- </div>
- <div class="col-xs-3">
- <input class="form-control" ng-model="vm.query.unit" type="text"/>
- </div>
- </div> -->
- <div class="panel-body" ng-repeat="(resource, meters) in resources">
- <div class="row">
- <div class="col-xs-11">
- <b>{{resource}}</b>
+ <div class="panel-body" ng-repeat="(resource, meters) in resources">
+ <div class="row">
+ <div class="col-xs-11">
+ <b>{{resource}}</b>
+ </div>
+ <div class="col-xs-1">
+ <a ng-click="expandResource = !expandResource" class="btn btn-primary">
+ <i class="glyphicon glyphicon-plus"></i>
+ </a>
+ </div>
</div>
- <div class="col-xs-1">
- <a ng-click="expandResource = !expandResource" class="btn btn-primary">
- <i class="glyphicon glyphicon-plus"></i>
- </a>
+ <div class="row" ng-show="expandResource">
+ <div class="col-xs-4">
+ <b>Meter:</b>
+ </div>
+ <div class="col-xs-4">
+ <b>Unit:</b>
+ </div>
+ <div class="col-xs-4">
+ <b>Actions:</b>
+ </div>
</div>
- </div>
- <div class="row" ng-repeat="meter in meters" ng-show="expandResource">
- <div class="col-xs-3">
- {{meter.resource_id}}
- </div>
- <div class="col-xs-3">
- {{meter.name}}
- </div>
- <div class="col-xs-3">
- {{meter.unit}}
- </div>
- <div class="col-xs-3">
- <a ng-click="showMeter = !showMeter" class="btn btn-primary">
- <i class="glyphicon glyphicon-search"></i> Details
- </a>
- <a ng-click="showChart = !showChart" class="btn btn-primary">
- <i class="glyphicon glyphicon-search"></i> Samples
- </a>
- </div>
- <div class="col-xs-12" ng-show="showMeter">
- <pre>{{ meter | json }}</pre>
- </div>
- <div class="col-xs-12" ng-show="showChart">
- <ceilometer-samples name="meter.name" tenant="meter.project_id" ng-if="showChart"></ceilometer-samples>
+ <div class="row" ng-repeat="meter in meters" ng-show="expandResource">
+ <div class="col-xs-4">
+ {{meter.name}}
+ </div>
+ <div class="col-xs-4">
+ {{meter.unit}}
+ </div>
+ <div class="col-xs-4">
+ <!-- <a ng-click="showMeter = !showMeter" class="btn btn-primary">
+ <i class="glyphicon glyphicon-search"></i> Details
+ </a> -->
+ <a ng-click="showChart = !showChart" class="btn btn-primary">
+ <i class="glyphicon glyphicon-search"></i> View chart
+ </a>
+ </div>
+ <!-- -->
+ <div class="col-xs-12" ng-show="showChart">
+ <ceilometer-samples name="meter.name" tenant="meter.project_id" ng-if="showChart"></ceilometer-samples>
+ </div>
</div>
</div>
</div>
</div>
+
</div>
</section>
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
index cb4e8be..d935e27 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
@@ -1,14 +1,13 @@
<div class="row">
- <div class="col-xs-12">
- <a ui-sref="ceilometerDashboard" class="btn btn-primary">Back</a>
- <h1>{{vm.stateParams.name}} Samples</h1>
- </div>
-
<div class="col-xs-12" ng-show="vm.loader">
<div class="loader">Loading</div>
</div>
<div class="col-xs-12" ng-if="!vm.loader">
- <div ac-chart="'line'" ac-data="vm.sampleChartData" ac-config="vm.sampleChartConfig" class="chart"></div>
+ <!-- <div ac-chart="'line'" ac-data="vm.sampleChartData" ac-config="vm.sampleChartConfig" class="chart"></div> -->
+ <canvas id="line" class="chart chart-line" chart-data="vm.chart.data"
+ chart-labels="vm.chart.labels" chart-legend="true" chart-series="vm.chart.series">
+ </canvas>
+ <!-- <pre> {{ vm.chart | json }} </pre> -->
</div>
</div>
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/split.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/split.html
new file mode 100644
index 0000000..534d3d5
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/split.html
@@ -0,0 +1,21 @@
+<div id="one" class="split split-horizontal">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, eos debitis repellendus corrupti vel dolores asperiores, ipsam voluptatibus nesciunt ipsum architecto harum magnam similique doloremque rerum illum. Magnam, nesciunt magni.
+ Minus nostrum dolores perspiciatis dolorum eos? Sed, ad fugiat natus amet voluptas officiis, reiciendis tempora error quia repudiandae odit nisi distinctio atque ipsam iste officia ab porro et quo magni.
+ Voluptatem ab rem necessitatibus nam voluptas quo, velit nobis id ea temporibus illum corrupti sequi, aperiam reprehenderit cum! Placeat quas quod minima expedita beatae totam numquam veritatis adipisci doloremque, sit.
+ Suscipit doloremque voluptatum maiores architecto ipsa quis, nihil provident totam, quos qui. Ipsa quibusdam sit, cumque eum provident ratione molestiae quia in ex! Rem voluptates officiis aperiam ullam dignissimos sequi.
+ Ad sed quasi et, dolorem autem perferendis dolor. Cupiditate nemo delectus minus sint mollitia accusantium odio, explicabo nihil illum ut possimus ducimus! Recusandae excepturi, est deleniti accusamus aut quasi. Sit!
+</div>
+<div id="two" class="split split-horizontal">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit accusamus laboriosam, quo, ipsa quisquam, neque alias animi esse quia, doloremque nulla nihil. Id aliquid necessitatibus atque eum, fugit sed nobis!
+ Blanditiis ab earum placeat tenetur in eos, omnis quidem accusantium voluptate corporis, labore, cum voluptatibus totam sunt mollitia et rerum sit. Voluptatem fugiat eaque dolore explicabo ex veritatis deleniti delectus.
+ Nobis aliquam blanditiis cumque nesciunt repellendus voluptate ullam, eligendi dicta voluptates tenetur molestias omnis itaque eius voluptas dignissimos inventore repellat distinctio velit ducimus ipsam placeat. Quo amet aut, doloremque incidunt.
+ Asperiores sed cupiditate animi aliquam, facilis vitae nobis deserunt ipsa fugiat, at incidunt eum delectus error inventore itaque fuga sunt aspernatur beatae saepe maxime id. Fuga consequatur hic debitis ipsum.
+ Animi dolorum ullam, dolorem ut quibusdam tempora repellendus iste veritatis doloribus nam? Minima veritatis omnis deleniti illo? Vero, perferendis ipsum, ea dicta illum non reiciendis obcaecati sunt dolorem esse hic.
+</div>
+<div id="three" class="split split-horizontal">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quod expedita vero voluptatibus modi, dolores assumenda ex atque aliquam accusamus, deserunt quibusdam pariatur eaque optio ducimus minima. Commodi, odit. Nulla.
+ Rerum, nostrum, officiis! Nam vel in ea ut et nemo quae quis suscipit dolores voluptatum odio, qui ratione dolor vero perspiciatis enim incidunt error harum hic ad numquam nostrum magni.
+ Minus illo vel ipsa, ullam unde itaque cum mollitia nihil! Voluptatibus quaerat ab ut quo, repudiandae qui reprehenderit eligendi maiores harum labore sit, laudantium expedita reiciendis hic nostrum beatae id!
+ Laborum magni iusto sunt commodi dolor quis voluptatibus fugiat alias, aliquid fugit nisi facere. Eaque harum laudantium sint, veniam laborum illum beatae cumque quis reprehenderit tempore, animi perferendis officiis quos.
+ Quam iusto id necessitatibus nam asperiores quod inventore itaque ullam laborum quis. Excepturi, suscipit, autem! Pariatur commodi nisi quia, sit perspiciatis necessitatibus, tempore neque nulla nemo eum aspernatur placeat voluptate!
+</div>
\ No newline at end of file
