Got event overview working, started work on event detail

QutEcoacoustics · Jan 19, 2015 · 750d887 · 750d887
1 parent 62a47eb
commit 750d887
Show file tree

Hide file tree

Showing 11 changed files with 544 additions and 348 deletions.
diff --git a/src/app/d3Bindings/d3.js b/src/app/d3Bindings/d3.js
@@ -6,6 +6,6 @@ angular.module("bawApp.d3", [
     "bawApp.d3.timelineView",
     "bawApp.d3.eventDistribution.distributionOverview",
     "bawApp.d3.eventDistribution.distributionDetail",
-    "bawApp.d3.eventDistribution.distributionController"
-
+    "bawApp.d3.eventDistribution.distributionController",
+    "bawApp.d3.widgets"
 ]);
diff --git a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
@@ -2,40 +2,44 @@ $mini-backgrounds: darksalmon darkolivegreen slategray #8f7f6f #7a6f8f #8f6f8f;
 
 event-distribution-overview {
 
+  // purple only for debugging
+  background-color: purple;
+  width: 100%;
+  display: flex;
 
-    background-color: purple;
+  & svg {
     width: 100%;
+  }
 
-    & .chart {
-      shape-rendering: crispEdges;
-      background-color: greenyellow;
-    }
+  & .chart {
+    shape-rendering: crispEdges;
+    background-color: #ffffff;
+  }
 
-    & .mini {
-      fill: blue;
+  & .mini {
+    fill: black;
 
-      & text {
-        font: 9px sans-serif;
-      }
+    & text {
+      font: 12px sans-serif;
     }
+  }
 
-    .brush .extent {
-      stroke: gray;
-      fill: dodgerblue;
-      fill-opacity: .365;
-    }
+  .brush .extent {
+    stroke: gray;
+    fill: dodgerblue;
+    fill-opacity: .365;
+  }
 
-    @for $i from 1 through length($mini-backgrounds) {
-      $item: nth($mini-backgrounds, $i);
+  @for $i from 1 through length($mini-backgrounds) {
+    $item: nth($mini-backgrounds, $i);
 
-      & .miniItem#{$i - 1} {
-        fill: $item;
-        stroke-width: 6;
-        fill-opacity: 0.7;
-      }
+    & .miniItem#{$i - 1} {
+      fill: $item;
+      stroke-width: 6;
+      fill-opacity: 0.7;
     }
+  }
 
 }
 
 
-
diff --git a/src/app/d3Bindings/eventDistribution/distributionDetail.js b/src/app/d3Bindings/eventDistribution/distributionDetail.js
@@ -7,11 +7,93 @@
  */
 angular
     .module("bawApp.d3.eventDistribution.distributionDetail", [])
-    .directive(
+    .service(
+    "DistributionDetail",
+    [
+        "d3",
+        "TimeAxis",
+        function (d3, TimeAxis) {
+            return function DistributionDetail(target, data, dataFunctions) {
+                var that = this,
+                    container = d3.select(target),
+                    chart,
+                    main,
+                    xAxis,
+                    xScale,
+                    yScale,
+                    laneLinesGroup,
+                    laneLabelsGroup,
+                    mainItemsGroup,
+                    margin = {
+                        top: 5,
+                        right: 20,
+                        bottom: 5,
+                        left: 120
+                    },
+                    // these are initial values only
+                    // this is the width and height of the main group
+                    mainWidth = 1000,
+                    mainHeight = 256;
+
+                // exports
+                this.updateData = updateData;
+
+                // init
+                create();
+
+                // exported functions
+
+                function updateData() {
+
+                }
+
+                // other functions
+                function create() {
+                    createChart();
+
+                    createMain();
+                }
+
+                function createChart() {
+                    chart = container.append("svg")
+                        .classed("chart", true);
+                }
+
+                function createMain() {
+                    // create main surface
+                    main = chart.append("g")
+                        .translate([margin.left, margin.top]);
+
+                    // group for separator lines between lanes/categories
+                    laneLinesGroup = main.append("g").classed("laneLinesGroup", true);
+
+                    // group for textual labels, left of the lanes
+                    laneLabelsGroup = main.append("g").classed("laneLabelsGroup", true);
+
+                    // group for rects painted in lanes
+                    mainItemsGroup = main.append("g").classed("mainItemsGroup", true);
+
+                    xAxis = new TimeAxis(main, xScale, {y: mainHeight})
+                }
+            }
+        }
+    ]
+).directive(
     "eventDistributionDetail",
     [
-        function () {
+        "DistributionDetail",
+        function (DistributionDetail) {
+            // directive definition object
+            return {
+                restrict: "EA",
+                scope: {},
+                require: "^^eventDistribution",
+                link: function ($scope, $element, attributes, controller, transcludeFunction) {
+                    var element = $element[0];
 
+                    controller.detail = new DistributionDetail(element, {}, controller.dataFunctions);
+                }
+            };
         }
     ]
 );