Merge branch 'devel' of https://github.com/triAGENS/ArangoDB into mjmh

Documentation/ImplementorManual/HttpDatabase.md

@@ -116,6 +116,6 @@ applications until they are explicitly installed for the particular database.
 
 @copydoc GlossaryDatabaseName
 
-@copydoc GlossaryDatabaseOrganisation
+@copydoc GlossaryDatabaseOrganization
 
 @BNAVIGATE_HttpDatabase

Documentation/Manual/GlossaryCollection.md

@@ -3,7 +3,7 @@ Collection {#GlossaryCollection}
 
 @GE{Collection}: A collection consists of documents. It is uniquely identified
 by its collection identifier. It also has a unique name that clients should use
-to identify and access it. Collections can be renamed. is will change the
+to identify and access it. Collections can be renamed. This will change the
 collection name, but not the collection identifier. Collections have a _type_
 that is specified by the user when the collection is created. There are
 currently two types: _document_ and _edge_.  The default type is _document_.

Documentation/Manual/GlossaryCollectionIdentifier.md

@@ -1,7 +1,7 @@
 CollectionIdentifier {#GlossaryCollectionIdentifier}
 ====================================================
 
-@GE{Collection Identifier}: A collection identifier identifies a
+@GE{Collection Identifier}: A collection identifier lets you refer to a
 collection in a database. It is a string value and is unique within 
 the database.
 Up to including ArangoDB 1.1, the collection identifier has been a

Documentation/Manual/GlossaryDatabase.md

@@ -6,12 +6,12 @@ instance. Databases can be used to logically group and separate data. An ArangoD
 database consists of collections and dedicated database-specific worker processes.
 
 A database contains its own collections (which cannot be accessed from other databases),
-Foxx applications, and replication loggers and appliers. Each ArangoDB database
+Foxx applications and replication loggers and appliers. Each ArangoDB database
 contains its own system collections (e.g. `_users`, `_replication`, ...).
 
 There will always be at least one database in ArangoDB. This is the default
-database, named `_system`. This database cannot be dropped, and provides special
+database named `_system`. This database cannot be dropped and provides special
-operations for creating, dropping, and enumerating databases.
+operations for creating, dropping and enumerating databases.
 Users can create additional databases and give them unique names to access them later.
 Database management operations cannot be initiated from out of user-defined databases.
 

Documentation/Manual/GlossaryDatabaseName.md

@@ -2,10 +2,10 @@ DatabaseName {#GlossaryDatabaseName}
 ====================================
 
 @GE{Database Name}: A single ArangoDB instance can handle multiple databases 
-in parallel. When multiple databases are used, each database must be given a 
+in parallel. When multiple databases are used, each database must be given an 
 unique name. This name is used to uniquely identify a database. The default 
 database in ArangoDB is named `_system`.
 
 The database name is a string consisting of only letters, digits 
 and the `_` (underscore) and `-` (dash) characters. User-defined database 
-names must always start with a letter. Database names is case-sensitive.
+names must always start with a letter. Database names are case-sensitive.

Documentation/Manual/GlossaryDatabaseOrganization.md

@@ -1,8 +1,8 @@
-Database Organisation {#GlossaryDatabaseOrganisation}
+Database Organization {#GlossaryDatabaseOrganization}
 =====================================================
 
-@GE{Database Organisation}: A single ArangoDB instance can handle multiple
+@GE{Database Organization}: A single ArangoDB instance can handle multiple
-databases in parallel. By default, there will be at least one database, which
+databases in parallel. By default, there will be at least one database which
 is named `_system`.
 
 Databases are physically stored in separate sub-directories underneath the
@@ -26,7 +26,7 @@ layout could look like this:
           collection-<id>/    # directory containg data about a collection
           collection-<id>/    # directory containg data about a collection
 
-Foxx applications are also organised in database-specific directories inside
+Foxx applications are also organized in database-specific directories inside
 the application path. The filesystem layout could look like this:
 
     apps/                   # the instance's application directory

Documentation/Manual/GlossaryDocument.md

@@ -2,5 +2,5 @@ Document {#GlossaryDocument}
 ============================
 
 @GE{Document}: Documents in ArangoDB are JSON objects. These objects
-can be nested (to any depth) and may contains lists. Each document is
+can be nested (to any depth) and may contain lists. Each document is
 uniquely identified by its document handle.

Documentation/Manual/GlossaryDocumentRevision.md

@@ -20,9 +20,9 @@ opaque string when they store or use it locally. This will allow ArangoDB
 to change the format of revision ids later if this should be required.
 Clients can use revisions ids to perform simple equality/non-equality 
 comparisons (e.g. to check whether a document has changed or not), but 
-they should not use revision ids to perform greater/less than comparisions
+they should not use revision ids to perform greater/less than comparisons
 with them to check if a document revision is older than one another,
 even if this might work for some cases. 
 
-Note: revision ids have been returned as integers up to including 
+Note: Revision ids have been returned as integers up to including 
 ArangoDB 1.1

Documentation/Manual/GlossaryEdgeCollection.md

@@ -1,7 +1,7 @@
 EdgeCollection {#GlossaryEdgeCollection}
 ========================================
 
-@GE{Edge Collection}: Edge collections are special collection that
+@GE{Edge Collection}: Edge collections are special collections that
 store edge documents. Edge documents are connection documents that 
 reference other documents.
 The type of a collection must be specified when a collection is 

Documentation/UserManual/HandlingCollections.md

@@ -7,7 +7,7 @@ Handling Collections {#HandlingCollections}
 JavaScript Interface to Collections {#HandlingCollectionsIntro}
 ===============================================================
 
-This is an introduction to ArangoDB's interface for collections and how handle
+This is an introduction to ArangoDB's interface for collections and how to handle
 collections from the JavaScript shell _arangosh_. For other languages see the
 corresponding language API.
 
@@ -23,14 +23,14 @@ The most import call is the call to create a new collection, see
 Address of a Collection {#HandlingCollectionsResource}
 ======================================================
 
-All collections in ArangoDB have an unique identifier and a unique
+All collections in ArangoDB have an unique identifier and an unique
 name. ArangoDB internally uses the collection's unique identifier to look up
 collections. This identifier, however, is managed by ArangoDB and the user has
-no control over it. In order to allow users use their own names, each collection
+no control over it. In order to allow users to use their own names, each collection
-also has a unique name, which is specified by the user.  To access a collection
+	also has an unique name which is specified by the user. To access a collection
 from the user perspective, the collection name should be used, i.e.:
 
-    db._collection(@FA{collection-name})
+    @LIT{db._collection(@FA{collection-name})}
 
 A collection is created by a @ref HandlingCollectionsCreate "db._create" call.
 
@@ -43,16 +43,16 @@ If no collection with such a name exists, then @LIT{null} is returned.
 
 There is a short-cut that can be used for non-system collections:
 
-    db.@FA{collection-name}
+    @LIT{db.@FA{collection-name}}
 
-This call will either return the collection named @FA{collection-name} or create
+This call will either return the collection named @LIT{@FA{collection-name}} or create
 a new one with that name and a set of default properties.
 
-Note: creating a collection on the fly using @LIT{db.@FA{collection-name}} is
+Note: Creating a collection on the fly using @LIT{db.@FA{collection-name}} is
-not recommend and does not work in arangosh. To create a new collection, please
+not recommend and does not work in _arangosh_. To create a new collection, please
 use
 
-    db._create(@FA{collection-name})
+    @LIT{db._create(@FA{collection-name})}
 
 @CLEARPAGE
 Working with Collections {#HandlingCollectionsShell}
@@ -73,7 +73,7 @@ Collection Methods {#HandlingCollectionsCollectionMethods}
 @copydetails JS_PropertiesVocbaseCol
 
 @CLEARPAGE
-@anchor HandlingCollectionsFigures
+
 @copydetails JS_FiguresVocbaseCol
 
 @CLEARPAGE

Documentation/UserManual/HandlingDatabases.md

@@ -11,13 +11,13 @@ This is an introduction to managing databases in ArangoDB from within
 JavaScript. 
 
 While being in an established connection to ArangoDB, the current
-database can be changed explicity by using the `db._useDatabase()`
+database can be changed explicitly by using the `db._useDatabase()`
 method. This will switch to the specified database (provided it
 exists and the user can connect to it). From this point on, any
 following actions in the same shell or connection will use the
 specified database unless otherwise specified.
 
-Note: if the database is changed, client drivers need to store the 
+Note: If the database is changed, client drivers need to store the 
 current database name on their side, too. This is because connections
 in ArangoDB do not contain any state information. All state information
 is contained in the HTTP request/response data.
@@ -43,7 +43,7 @@ Working with Databases {#HandlingDatabasesShell}
 Database Methods {#HandlingDatabasesMethods}
 --------------------------------------------
 
-To following methods are available to manage databases via JavaScript.
+The following methods are available to manage databases via JavaScript.
 Please note that several of these methods can be used from the `_system`
 database only.
 
@@ -85,7 +85,7 @@ Notes about Databases {#HandlingDatabasesGlossary}
 Please keep in mind that each database contains its own system collections,
 which need to set up when a database is created. This will make the creation
 of a database take a while. Replication is configured on a per-database level,
-meaning that any replication logging or applying for the a new database must
+meaning that any replication logging or applying for a new database must
 be configured explicitly after a new database has been created. Foxx applications
 are also available only in the context of the database they have been installed 
 in. A new database will only provide access to the system applications shipped
@@ -96,6 +96,6 @@ applications until they are explicitly installed for the particular database.
 
 @copydoc GlossaryDatabaseName
 
-@copydoc GlossaryDatabaseOrganisation
+@copydoc GlossaryDatabaseOrganization
 
 @BNAVIGATE_HandlingDatabases

Documentation/UserManual/HandlingDocuments.md

@@ -7,7 +7,7 @@ Handling Documents {#HandlingDocuments}
 Documents, Identifiers, Handles {#HandlingDocumentsIntro}
 =========================================================
 
-This is an introduction to ArangoDB's interface for documents and how handle
+This is an introduction to ArangoDB's interface for documents to and how handle
 documents from the JavaScript shell _arangosh_. For other languages see the
 corresponding language API.
 
@@ -20,7 +20,7 @@ For example:
 @END_EXAMPLE_ARANGOSH_OUTPUT
 
 All documents contain special attributes: the document handle in `_id`, the
-document's unique key in `_key` and and the etag aka document revision in
+document's unique key in `_key` and and the ETag aka document revision in
 `_rev`. The value of the `_key` attribute can be specified by the user when
 creating a document.  `_id` and `_key` values are immutable once the document
 has been created. The `_rev` value is maintained by ArangoDB autonomously.
@@ -38,7 +38,7 @@ All documents in ArangoDB have a document handle. This handle uniquely defines a
 document and is managed by ArangoDB. The interface allows you to access the
 documents of a collection as:
 
-    db.@FA{collection}.document(@FA{document-handle})
+    db.collection.document("document-handle")
 
 For example: Assume that the document handle, which is stored in the `_id` field
 of the document, is `demo/362549` and the document lives in a collection
@@ -51,7 +51,7 @@ can leave out the @FA{collection} and use the shortcut:
 
     db._document("demo/362549736")
 
-Each document also has a document revision or etag with is returned in the
+Each document also has a document revision or ETag which is returned in the
 `_rev` field when requesting a document. The document's key is returned in the
 `_key` attribute.
 

Documentation/UserManual/HandlingEdges.md

@@ -7,7 +7,7 @@ Handling Edges{#HandlingEdges}
 Edges, Identifiers, Handles{#HandlingEdgesIntro}
 ================================================
 
-This is an introduction to ArangoDB's interface for edges and how handle
+This is an introduction to ArangoDB's interface for edges and how to handle
 edges from the JavaScript shell @LIT{arangosh}. For other languages see the
 corresponding language API.
 

js/apps/system/aardvark/frontend/js/templates/newDashboardView.ejs

@@ -0,0 +1,76 @@
+<script id="newDashboardView.ejs" type="text/template">
+  <% var largeChart = function(name) { %>
+    <div class="dashboard-large-chart">
+      <div id="<%= name %>"></div>
+      <div class="dasboard-legend" id="<%= name %>Legend"></div>
+    </div>
+  <% } %>
+  <% var smallChart = function(name) { %>
+    <div class="dashboard-small-chart">
+      <div id="<%= name %>"></div>
+      <div class="dasboard-legend" id="<%= name %>Legend"></div>
+    </div>
+  <% } %>
+  <% var tendency = function(title, name) { %>
+    <div class="dashboard-half-height-chart">
+      <div class="dashboard-title-bar"><%= title %></div>
+      <div class="dashboard-subtitle-bar">current</div>
+      <div class="dashboard-subtitle-bar">15-min-avg</div>
+      <div class="dashboard-tendency">
+        <span id="<%= name %>Current"></span>
+      </div>
+      <div class="dashboard-tendency">
+        <span id="<%= name %>Average"></span>
+      </div>
+    </div>
+  <% } %>
+  <div class="headerBar">
+    <a class="arangoHeader">Request Statistics</a>
+  </div>
+  <div class="contentDiv">
+    <div class="dashboard-title-bar">Total Time</div>
+    <div class="dashboard-row">
+      <% largeChart("totalTimeChart") %>
+      <% smallChart("totalTimeDistribution") %>
+    </div>
+    <div class="dashboard-title-bar">Data Transfer</div>
+    <div class="dashboard-row">
+      <% largeChart("dataTransferChart") %>
+      <% smallChart("dataTransferDistribution") %>
+    </div>
+    <div class="dashboard-title-bar">Requests</div>
+    <div class="dashboard-row">
+      <% largeChart("requestsChart") %>
+      <div class="dashboard-small-chart">
+        <% tendency("Async Requests", "asyncRequests"); %>
+        <% tendency("Client Connections", "clientConnections"); %>
+      </div>
+    </div>
+  </div>
+  <div class="headerBar">
+    <a class="arangoHeader">System Resources</a>
+  </div>
+  <div class="dashboard-row">
+    <div class="dashboard-small-chart dashboard-half-height-chart">
+      <% tendency("Number of threads", "numberOfThreads"); %>
+    </div>
+    <div class="dashboard-small-chart dashboard-half-height-chart">
+      <div class="dashboard-title-bar">Resident Size</div>
+      <div id="residentSizeChart"></div>
+    </div>
+    <div class="dashboard-small-chart dashboard-half-height-chart">
+      <% tendency("Virtual Size in GB", "virualSize"); %>
+    </div>
+  </div>
+  <div class="dashboard-row">
+    <div class="dashboard-medium-chart">
+      <div class="dashboard-title-bar">Major Page Faults</div>
+      <div id="majorPageFaultsChart"></div>
+    </div>
+    <div class="dashboard-medium-chart">
+      <div class="dashboard-title-bar">System User Time</div>
+      <div id="systemUserTimeChart"></div>
+      <div class="dasboard-legend" id="systemUserTimeLegend"></div>
+    </div>
+  </div>
+</script>

js/apps/system/aardvark/frontend/scss/_constants.scss

@@ -0,0 +1 @@
+$tile-width: 240px;

js/apps/system/aardvark/frontend/scss/_newDashboard.scss

@@ -0,0 +1,84 @@
+$dashboard-height: 250px;
+
+%dashboard-chart-box {
+  @extend %pull-left;
+  border-left: 1px solid $c-black;
+  margin-left: -1px;
+
+  &:first-child {
+    border-left: 0;
+    margin-left: 0;
+  }
+}
+
+.dashboard-large-chart {
+  @extend %dashboard-chart-box;
+  height: $dashboard-height;
+}
+
+.dashboard-medium-chart {
+  @extend %dashboard-chart-box;
+  height: $dashboard-height;
+}
+
+.dashboard-small-chart {
+  @extend %dashboard-chart-box;
+  height: $dashboard-height;
+}
+
+.dashboard-legend {
+  display: block;
+}
+
+.dashboard-half-height-chart {
+  @extend %clear-float;
+  height: $dashboard-height / 2;
+}
+
+.dashboard-title-bar {
+  background-color: $c-bar-bg;
+  border: {
+    bottom: 0;
+    left: 1px;
+    left-color: $c-black;
+    right: 1px;
+    right-color: $c-black;
+    style: solid;
+    top: 1px;
+    top-color: $c-black;
+  }
+  color: $c-white;
+  font-size: 16px;
+  height: 36px;
+  line-height: 36px;
+  margin-left: -1px;
+  margin-right: -1px;
+  text-align: center;
+}
+
+.dashboard-subtitle-bar {
+  @extend %pull-left;
+  @extend %dashboard-chart-box;
+  border-bottom: 1px solid $c-black;
+  border-top: 1px solid $c-black;
+  font-size: 16px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  width: 50%;
+}
+
+.dashboard-tendency {
+  @extend %pull-left;
+  @extend %dashboard-chart-box;
+  height: $dashboard-height / 2 - 36px - 36px;
+  width: 50%;
+}
+
+.dashboard-row {
+  @extend %clear-float;
+  border: 1px solid $c-black;
+  margin-bottom: 5px;
+  margin-left: -1px;
+  margin-right: -1px;
+}

js/apps/system/aardvark/frontend/scss/_resizing.scss

@@ -34,18 +34,31 @@ div.resizecontainer {
 
 }
 
-@for $i from 0 through 11 {
+@for $i from 1 through 11 {
-  $min: 242px * $i;
+  $min: $tile-width * $i;
-  @media (min-width: $min + 6) and (max-width: $min + 242 + 5) {
+  $content-size: $min - 12px;
+  @media (min-width: $min) and (max-width: $min + $tile-width - 1) {
 
     div.resizecontainer {
-      width: $min;
+      width: $content-size;
     }
 
     div.modalChartDetail {
       left: 50%;
-      margin-left: -$min/2;
+      margin-left: -($content-size)/2;
-      width: $min;
+      width: $content-size;
+    }
+
+    .dashboard-large-chart {
+      width: ($content-size * 2 / 3);
+    }
+
+    .dashboard-medium-chart {
+      width: ($content-size / 2);
+    }
+
+    .dashboard-small-chart {
+      width: ($content-size / 3);
     }
   }
 }

js/apps/system/aardvark/frontend/scss/_shared.scss

@@ -1,3 +1,5 @@
+// Constant variable values
+@import 'constants';
 // Shortcuts for multi-browser support
 @import 'mixins';
 // Fonts and font bindings

js/apps/system/aardvark/frontend/scss/_tiles.scss

@@ -170,14 +170,14 @@ div {
   & .tile {
     @extend %tile;
     height: 100px;
-    width: 230px;
+    width: $tile-width - 12px;
   }
 
   & .bigtile {
     @extend %clickable;
     @extend %tile;
     height: 309px;
-    width: 460px;
+    width: 2 * ($tile-width - 12px);
 
     div.shardContainer {
       font-size: 30px;

js/apps/system/aardvark/frontend/scss/generated.css

@@ -1369,13 +1369,13 @@ textarea,
 .fa-plus-square-o:before {
   content: "\f196"; }
 
-ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboardModal, .pagination-line li a {
+ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-subtitle-bar, .dashboard-tendency, .dashboardModal, .pagination-line li a {
   float: left; }
 
 div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, div.gv_colour_list, .docsThirdCol {
   float: right; }
 
-div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonBar:after, #distributionChartDiv:after, .lineChartDiv:after, .arango-tab:after, .pagination-line li:after {
+div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonBar:after, .dashboard-half-height-chart:after, .dashboard-row:after, #distributionChartDiv:after, .lineChartDiv:after, .arango-tab:after, .pagination-line li:after {
   clear: both;
   content: '.';
   display: block;
@@ -1444,9 +1444,9 @@ nav.navbar, footer.footer {
     background-color: #f87c0f; }
 
 .button-inactive {
-  background-color: lightgray; }
+  background-color: lightgrey; }
   .button-inactive:hover {
-    background-color: gray; }
+    background-color: grey; }
 
 ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu {
   -moz-border-radius: 3px;
@@ -2038,10 +2038,10 @@ div .tile, div .bigtile {
 
 div .tile {
   height: 100px;
-  width: 230px; }
+  width: 228px; }
 div .bigtile {
   height: 309px;
-  width: 460px; }
+  width: 456px; }
   div .bigtile div.shardContainer {
     font-size: 30px; }
     div .bigtile div.shardContainer span {
@@ -2074,102 +2074,193 @@ div.resizecontainer {
 @media (min-width: 1042px) and (max-width: 1284px) {
   #arangoCollectionUl a {
     font-size: 14px; } }
-@media (min-width: 6px) and (max-width: 247px) {
+@media (min-width: 240px) and (max-width: 479px) {
   div.resizecontainer {
-    width: 0px; }
+    width: 228px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: 0px;
+    margin-left: -114px;
-    width: 0px; } }
+    width: 228px; }
-@media (min-width: 248px) and (max-width: 489px) {
+
+  .dashboard-large-chart {
+    width: 152px; }
+
+  .dashboard-medium-chart {
+    width: 114px; }
+
+  .dashboard-small-chart {
+    width: 76px; } }
+@media (min-width: 480px) and (max-width: 719px) {
   div.resizecontainer {
-    width: 242px; }
+    width: 468px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -121px;
+    margin-left: -234px;
-    width: 242px; } }
+    width: 468px; }
-@media (min-width: 490px) and (max-width: 731px) {
+
+  .dashboard-large-chart {
+    width: 312px; }
+
+  .dashboard-medium-chart {
+    width: 234px; }
+
+  .dashboard-small-chart {
+    width: 156px; } }
+@media (min-width: 720px) and (max-width: 959px) {
   div.resizecontainer {
-    width: 484px; }
+    width: 708px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -242px;
+    margin-left: -354px;
-    width: 484px; } }
+    width: 708px; }
-@media (min-width: 732px) and (max-width: 973px) {
+
+  .dashboard-large-chart {
+    width: 472px; }
+
+  .dashboard-medium-chart {
+    width: 354px; }
+
+  .dashboard-small-chart {
+    width: 236px; } }
+@media (min-width: 960px) and (max-width: 1199px) {
   div.resizecontainer {
-    width: 726px; }
+    width: 948px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -363px;
+    margin-left: -474px;
-    width: 726px; } }
+    width: 948px; }
-@media (min-width: 974px) and (max-width: 1215px) {
+
+  .dashboard-large-chart {
+    width: 632px; }
+
+  .dashboard-medium-chart {
+    width: 474px; }
+
+  .dashboard-small-chart {
+    width: 316px; } }
+@media (min-width: 1200px) and (max-width: 1439px) {
   div.resizecontainer {
-    width: 968px; }
+    width: 1188px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -484px;
+    margin-left: -594px;
-    width: 968px; } }
+    width: 1188px; }
-@media (min-width: 1216px) and (max-width: 1457px) {
+
+  .dashboard-large-chart {
+    width: 792px; }
+
+  .dashboard-medium-chart {
+    width: 594px; }
+
+  .dashboard-small-chart {
+    width: 396px; } }
+@media (min-width: 1440px) and (max-width: 1679px) {
   div.resizecontainer {
-    width: 1210px; }
+    width: 1428px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -605px;
+    margin-left: -714px;
-    width: 1210px; } }
+    width: 1428px; }
-@media (min-width: 1458px) and (max-width: 1699px) {
+
+  .dashboard-large-chart {
+    width: 952px; }
+
+  .dashboard-medium-chart {
+    width: 714px; }
+
+  .dashboard-small-chart {
+    width: 476px; } }
+@media (min-width: 1680px) and (max-width: 1919px) {
   div.resizecontainer {
-    width: 1452px; }
+    width: 1668px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -726px;
+    margin-left: -834px;
-    width: 1452px; } }
+    width: 1668px; }
-@media (min-width: 1700px) and (max-width: 1941px) {
+
+  .dashboard-large-chart {
+    width: 1112px; }
+
+  .dashboard-medium-chart {
+    width: 834px; }
+
+  .dashboard-small-chart {
+    width: 556px; } }
+@media (min-width: 1920px) and (max-width: 2159px) {
   div.resizecontainer {
-    width: 1694px; }
+    width: 1908px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -847px;
+    margin-left: -954px;
-    width: 1694px; } }
+    width: 1908px; }
-@media (min-width: 1942px) and (max-width: 2183px) {
+
+  .dashboard-large-chart {
+    width: 1272px; }
+
+  .dashboard-medium-chart {
+    width: 954px; }
+
+  .dashboard-small-chart {
+    width: 636px; } }
+@media (min-width: 2160px) and (max-width: 2399px) {
   div.resizecontainer {
-    width: 1936px; }
+    width: 2148px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -968px;
+    margin-left: -1074px;
-    width: 1936px; } }
+    width: 2148px; }
-@media (min-width: 2184px) and (max-width: 2425px) {
+
+  .dashboard-large-chart {
+    width: 1432px; }
+
+  .dashboard-medium-chart {
+    width: 1074px; }
+
+  .dashboard-small-chart {
+    width: 716px; } }
+@media (min-width: 2400px) and (max-width: 2639px) {
   div.resizecontainer {
-    width: 2178px; }
+    width: 2388px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -1089px;
+    margin-left: -1194px;
-    width: 2178px; } }
+    width: 2388px; }
-@media (min-width: 2426px) and (max-width: 2667px) {
+
+  .dashboard-large-chart {
+    width: 1592px; }
+
+  .dashboard-medium-chart {
+    width: 1194px; }
+
+  .dashboard-small-chart {
+    width: 796px; } }
+@media (min-width: 2640px) and (max-width: 2879px) {
   div.resizecontainer {
-    width: 2420px; }
+    width: 2628px; }
 
   div.modalChartDetail {
     left: 50%;
-    margin-left: -1210px;
+    margin-left: -1314px;
-    width: 2420px; } }
+    width: 2628px; }
-@media (min-width: 2668px) and (max-width: 2909px) {
-  div.resizecontainer {
-    width: 2662px; }
 
-  div.modalChartDetail {
+  .dashboard-large-chart {
-    left: 50%;
+    width: 1752px; }
-    margin-left: -1331px;
+
-    width: 2662px; } }
+  .dashboard-medium-chart {
+    width: 1314px; }
+
+  .dashboard-small-chart {
+    width: 876px; } }
 div.centralRow {
   margin-top: 65px;
   margin-bottom: 65px; }
@@ -2734,7 +2825,7 @@ pre.gv-object-view {
     width: 5%; }
 
 .user-menu-img {
-  background-color: lightgray;
+  background-color: lightgrey;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2764,6 +2855,65 @@ pre.gv-object-view {
   text-overflow: ellipsis;
   white-space: nowrap; }
 
+.dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-subtitle-bar, .dashboard-tendency {
+  border-left: 1px solid black;
+  margin-left: -1px; }
+  .dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child {
+    border-left: 0;
+    margin-left: 0; }
+
+.dashboard-large-chart {
+  height: 250px; }
+
+.dashboard-medium-chart {
+  height: 250px; }
+
+.dashboard-small-chart {
+  height: 250px; }
+
+.dashboard-legend {
+  display: block; }
+
+.dashboard-half-height-chart {
+  height: 125px; }
+
+.dashboard-title-bar {
+  background-color: #686766;
+  border-bottom: 0;
+  border-left: 1px;
+  border-left-color: black;
+  border-right: 1px;
+  border-right-color: black;
+  border-style: solid;
+  border-top: 1px;
+  border-top-color: black;
+  color: white;
+  font-size: 16px;
+  height: 36px;
+  line-height: 36px;
+  margin-left: -1px;
+  margin-right: -1px;
+  text-align: center; }
+
+.dashboard-subtitle-bar {
+  border-bottom: 1px solid black;
+  border-top: 1px solid black;
+  font-size: 16px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  width: 50%; }
+
+.dashboard-tendency {
+  height: 53px;
+  width: 50%; }
+
+.dashboard-row {
+  border: 1px solid black;
+  margin-bottom: 5px;
+  margin-left: -1px;
+  margin-right: -1px; }
+
 .dashboardModal {
   -moz-border-radius: 8px !important;
   -webkit-border-radius: 8px !important;
@@ -3247,7 +3397,7 @@ pre.gv-object-view {
   color: #66ff00; }
 
 .jqconsole-cursor {
-  background-color: gray; }
+  background-color: grey; }
 
 .jqconsole-blurred .jqconsole-header .jqconsole-cursor {
   color: #c4cccc; }

js/apps/system/aardvark/frontend/scss/style.scss

@@ -17,6 +17,8 @@
 @import 'tooltips';
 // dbSelection
 @import 'dbSelection';
+// new dashboard, will be the highlander
+@import 'newDashboard';
 // dashboard http group
 @import 'dashboard';
 // dashboard http group