bendtherules/chart-builder-demo
1
0
Fork 0
mirror of https://github.com/bendtherules/chart-builder-demo.git synced 2026-08-18 13:42:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add plot random button

Browse Source
This commit is contained in:
bendtherules
2017-03-18 20:56:56 +05:30
parent 0530eb60dd
commit 3ff22d7809
4 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.js
+16
View File
@@ -43,6 +43,9 @@ app.value("allData",{
app.controller("mainController", ["allData","$scope",function (allData,$scope) { app.controller("mainController", ["allData","$scope",function (allData,$scope) {
init();
function init() {
$scope.data = {}; $scope.data = {};
$scope.data.chooserDimensions = allData.dimensions; $scope.data.chooserDimensions = allData.dimensions;
$scope.data.chosenDimension = undefined; $scope.data.chosenDimension = undefined;
@@ -50,6 +53,7 @@ app.controller("mainController", ["allData","$scope",function (allData,$scope) {
$scope.data.chosenMeasure = undefined; $scope.data.chosenMeasure = undefined;
$scope.data.values = allData.values; $scope.data.values = allData.values;
}
$scope.allowDrop = function(ev,location) { $scope.allowDrop = function(ev,location) {
// var prevLocation = ev.dataTransfer.getData("location"); // var prevLocation = ev.dataTransfer.getData("location");
@@ -128,4 +132,16 @@ app.controller("mainController", ["allData","$scope",function (allData,$scope) {
} }
} }
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$scope.plotRandom = function () {
var indexDimension = getRandomInt(0,($scope.data.chooserDimensions.length - 1));
var indexMeasure = getRandomInt(0,($scope.data.chooserMeasures.length - 1));
moveData("chooser.dimension","chosen.dimension", $scope.data.chooserDimensions[indexDimension]);
moveData("chooser.measure","chosen.measure", $scope.data.chooserMeasures[indexMeasure]);
}
}]); }]);
app/directives/directives.js
+4 -4
View File
@@ -8,7 +8,7 @@ app.directive("dynamicChart", function (d3Tip) {
$scope.chartTypeChosen = $scope.chartTypes[0]; $scope.chartTypeChosen = $scope.chartTypes[0];
$scope.$watch("[chartData,chartAxisLabel,chartTypeChosen]",function(){ $scope.$watch("[chartData,chartAxisLabel,chartTypeChosen]",function(){
console.log([$scope.chartData,$scope.chartAxisLabel]); // console.log([$scope.chartData,$scope.chartAxisLabel]);
if ($scope.chartTypeChosen && $scope.chartData){ if ($scope.chartTypeChosen && $scope.chartData){
drawChart($scope.chartTypeChosen,$scope.chartData,$scope.chartAxisLabel); drawChart($scope.chartTypeChosen,$scope.chartData,$scope.chartAxisLabel);
} }
@@ -300,7 +300,7 @@ app.directive("dynamicChart", function (d3Tip) {
var indexDirection = Math.floor(midAngle/360 *8); var indexDirection = Math.floor(midAngle/360 *8);
var direction = availableDirection[indexDirection]; var direction = availableDirection[indexDirection];
console.log(direction); // console.log(direction);
return direction; return direction;
}) })
.offset(function (d) { .offset(function (d) {
@@ -312,8 +312,8 @@ app.directive("dynamicChart", function (d3Tip) {
var extraRadius = 15; var extraRadius = 15;
var posCentre = [-extraRadius*Math.sin(midAngle),-extraRadius*Math.cos(midAngle)]; var posCentre = [-extraRadius*Math.sin(midAngle),-extraRadius*Math.cos(midAngle)];
console.log(midAngle*180/Math.PI); // console.log(midAngle*180/Math.PI);
console.log(posCentre); // console.log(posCentre);
return posCentre; return posCentre;
}); });
index.html
+3 -2
View File
@@ -5,11 +5,11 @@
<title>Chart Builder</title> <title>Chart Builder</title>
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body ng-app="chart-builder"> <body ng-app="chart-builder" ng-controller="mainController">
<div class="header"> <div class="header">
Chart Builder Chart Builder
</div> </div>
<div class="content" ng-controller="mainController"> <div class="content">
<div class="sidebar chooser"> <div class="sidebar chooser">
<div class="chooser-dim" ng-drop="drop($event,'chooser.dimension')" ng-dragover="allowDrop($event,'chooser.dimension')"> <div class="chooser-dim" ng-drop="drop($event,'chooser.dimension')" ng-dragover="allowDrop($event,'chooser.dimension')">
<div class="dim-header"> Dimensions </div> <div class="dim-header"> Dimensions </div>
@@ -57,6 +57,7 @@
</div> </div>
</div> </div>
</div> </div>
<input type="button" class="plot-btn" ng-click="plotRandom()" value="Plot something"></input>
<script type="text/javascript" src="./lib/d3.v4.min.js"></script> <script type="text/javascript" src="./lib/d3.v4.min.js"></script>
<script type="text/javascript" src="./lib/d3-tip.js"></script> <script type="text/javascript" src="./lib/d3-tip.js"></script>
<script type="text/javascript" src="./lib/angular.min.js"></script> <script type="text/javascript" src="./lib/angular.min.js"></script>
styles/style.css
+7
View File
@@ -131,3 +131,10 @@ li[draggable] {
padding: .25em .5em; padding: .25em .5em;
margin: .5em 0; margin: .5em 0;
} }
.plot-btn
{
position: absolute;
left: 1em;
top: 1em;
}