Move chart + scoreboard to UI lib

modules/backend/assets/js/october.js

@@ -17,6 +17,7 @@
 =require ../../../system/assets/ui/js/loader.js
 =require ../../../system/assets/ui/js/popover.js
 =require ../../../system/assets/ui/js/popup.js
+=require ../../../system/assets/ui/js/chart.js
 =require ../../../system/assets/ui/js/list.js
 =require ../../../system/assets/ui/js/tab.js
 
@@ -29,7 +30,6 @@
 =require october.verticalmenu.js
 =require october.navbar.js
 =require october.sidenav.js
-=require october.goalmeter.js
 =require october.scrollbar.js
 =require october.filelist.js
 =require october.hotkey.js
@@ -39,10 +39,6 @@
 =require october.simplelist.js
 =require october.sortable.js
 =require october.changemonitor.js
-=require october.chartutils.js
-=require october.chartpie.js
-=require october.chartbar.js
-=require october.chartline.js
 =require october.balloonselector.js
 =require october.treelist.js
 =require october.autocomplete.js

modules/backend/assets/js/vendor/vendor.js

@@ -10,7 +10,6 @@
 =require mousewheel.js
 =require jquery.touchwipe.js
 =require moment.js
-=require raphael.js
 =require jquery.autoellipsis.js
 =require jquery.waterfall.js
 =require jquery.cookie.js
@@ -19,11 +18,6 @@
 =require ../../vendor/dropzone/dropzone.js
 =require ../../vendor/sweet-alert/sweet-alert.js
 
-=require ../../vendor/flot/jquery.flot.js
-=require ../../vendor/flot/jquery.flot.tooltip.js
-=require ../../vendor/flot/jquery.flot.resize.js
-=require ../../vendor/flot/jquery.flot.time.js
-
 =require ../../vendor/jcrop/js/jquery.Jcrop.js
 
 */

modules/backend/assets/less/core/variables.less

@@ -110,13 +110,6 @@
 @color-outer-header:                         #1d2d3d;
 @color-outer-form-label:                     #666666;
 
-@color-scoreboard-title:                     #666666;
-@color-scoreboard-description:               #999999;
-@color-scoreboard-body:                      #666666;
-@color-scoreboard-icon:                      #e5a91a;
-@color-scoreboard-positive:                  #95b753;
-@color-scoreboard-negative:                  #cc3300;
-
 @color-breadcrumb-text-active:               #9da3a7;
 @color-breadcrumb-text:                      #ecf0f1;
 @color-breadcrumb-background:                #2b343d;
@@ -176,11 +169,6 @@
 @color-report-widget-control-inactive:       #b6b6b6;
 @color-report-widget-description:            @color-report-widget-title;
 
-@color-chart-tooltip-bg:                     #000000;
-@color-chart-tooltip-text:                   #ffffff;
-
-@color-status-list-text:                     #7e8c8d;
-
 @color-treeview-item-bg:                     #ffffff;
 @color-treeview-item-title:                  #2b3e50;
 @color-treeview-item-comment:                #95a5a6;

modules/backend/assets/less/october.less

@@ -19,8 +19,6 @@
 @import "controls/scrollbar.less";
 @import "controls/filelist.less";
 @import "controls/common.less";
-@import "controls/scoreboard.less";
-@import "controls/charts.less";
 @import "controls/ballooncontrols.less";
 @import "controls/reportwidgets.less";
 @import "controls/treelist.less";
@@ -41,6 +39,8 @@
 @import "../../../system/assets/ui/less/global.less";
 @import "../../../system/assets/ui/less/site.less";
 @import "../../../system/assets/ui/less/button.less";
+@import "../../../system/assets/ui/less/chart.less";
+@import "../../../system/assets/ui/less/scoreboard.less";
 @import "../../../system/assets/ui/less/breadcrumb.less";
 @import "../../../system/assets/ui/less/flashmessage.less";
 @import "../../../system/assets/ui/less/icon.less";

modules/system/assets/ui/docs/chart.md

@@ -0,0 +1,65 @@
+# Chart
+
+<a name="pie-chart" class="anchor" href="#pie-chart"></a>
+## Pie chart
+
+The pie chart outputs information as a circle diagram, with optional label in the center. Example markup:
+
+    <div
+        class="control-chart centered wrap-legend"
+        data-control="chart-pie"
+        data-size="200"
+        data-center-text="100">
+        <ul>
+            <li>Label 1 <span>100</span></li>
+            <li>Label 2 <span>100</span></li>
+            <li>Label 3 <span>100</span></li>
+        </ul>
+    </div>
+
+![image](https://github.com/octobercms/docs/blob/master/images/traffic-sources.png?raw=true) {.img-responsive .frame}
+
+<a name="bar-chart" class="anchor" href="#bar-chart"></a>
+## Bar chart
+
+The next example shows a bar chart markup. The **wrap-legend** class is optional, it manages the legend layout. The **data-height** and **data-full-width** attributes are optional as well.
+
+    <div
+        class="control-chart wrap-legend"
+        data-control="chart-bar"
+        data-height="100"
+        data-full-width="1">
+        <ul>
+            <li>Label 1 <span>100</span></li>
+            <li>Label 2 <span>100</span></li>
+            <li>Label 3 <span>100</span></li>
+        </ul>
+    </div>
+
+![image](https://github.com/octobercms/docs/blob/master/images/bar-chart.png?raw=true) {.img-responsive .frame}
+
+# Example
+
+    <div
+        class="control-chart centered wrap-legend"
+        data-control="chart-pie"
+        data-size="200"
+        data-center-text="100">
+        <ul>
+            <li>Label 1 <span>100</span></li>
+            <li>Label 2 <span>100</span></li>
+            <li>Label 3 <span>100</span></li>
+        </ul>
+    </div>
+
+    <div
+        class="control-chart wrap-legend"
+        data-control="chart-bar"
+        data-height="100"
+        data-full-width="1">
+        <ul>
+            <li>Label 1 <span>100</span></li>
+            <li>Label 2 <span>100</span></li>
+            <li>Label 3 <span>100</span></li>
+        </ul>
+    </div>

modules/system/assets/ui/docs/scoreboard.md

@@ -0,0 +1,64 @@
+# Scoreboard
+
+Scoreboard
+
+# Example
+
+
+<script src="/assets/js/october.goalmeter.js"></script>
+<script src="/assets/js/vendor/raphael-min.js"></script>
+<script src="/assets/js/october.chartutils.js"></script>
+<script src="/assets/js/october.chartpie.js"></script>
+<script src="/assets/js/october.chartbar.js"></script>
+<script src="/assets/js/october.dragscroll.js"></script>
+<script src="/assets/js/october.toolbar.js"></script>
+
+    <div class="scoreboard">
+        <div data-control="toolbar">
+            <div class="scoreboard-item control-chart" data-control="chart-pie">
+                <ul>
+                    <li data-color="#95b753">Published <span>84</span></li>
+                    <li data-color="#e5a91a">Drafts <span>12</span></li>
+                    <li data-color="#cc3300">Deleted <span>18</span></li>
+                </ul>
+            </div>
+
+            <div class="scoreboard-item control-chart" data-control="chart-bar">
+                <ul>
+                    <li data-color="#95b753">Published <span>84</span></li>
+                    <li data-color="#e5a91a">Drafts <span>12</span></li>
+                    <li data-color="#cc3300">Deleted <span>18</span></li>
+                </ul>
+            </div>
+
+            <div class="scoreboard-item title-value">
+                <h4>Weight</h4>
+                <p>100</p>
+                <p class="description">unit: kg</p>
+            </div>
+
+            <div class="scoreboard-item title-value">
+                <h4>Comments</h4>
+                <p class="positive">44</p>
+                <p class="description">previous month: 32</p>
+            </div>
+
+            <div class="scoreboard-item title-value">
+                <h4>Length</h4>
+                <p class="negative">31</p>
+                <p class="description">previous: 42</p>
+            </div>
+
+            <div class="scoreboard-item title-value">
+                <h4>Latest commenter</h4>
+                <p class="oc-icon-star">John Smith</p>
+                <p class="description">registered: yes</p>
+            </div>
+
+            <div class="scoreboard-item title-value" data-control="goal-meter" data-value="88">
+                <h4>goal meter</h4>
+                <p>88%</p>
+                <p class="description">37 posts remain</p>
+            </div>
+        </div>
+    </div>

modules/system/assets/ui/js/chart.bar.js

@@ -1,5 +1,5 @@
 /*
- * The bar chart plugin. 
+ * The bar chart plugin.
  * 
  * Data attributes:
  * - data-control="chart-bar" - enables the bar chart plugin

modules/system/assets/ui/js/chart.js

@@ -0,0 +1,8 @@
+/*
+=require ../vendor/raphael/raphael.js
+=require chart.utils.js
+=require chart.line.js
+=require chart.bar.js
+=require chart.pie.js
+=require chart.meter.js
+*/

modules/system/assets/ui/js/chart.line.js

@@ -1,3 +1,9 @@
+/*
+=require ../vendor/flot/jquery.flot.js
+=require ../vendor/flot/jquery.flot.tooltip.js
+=require ../vendor/flot/jquery.flot.resize.js
+=require ../vendor/flot/jquery.flot.time.js
+*/
 /*
  * Line Chart Plugin
  *
@@ -38,8 +44,8 @@
          * Flot options
          */
         this.chartOptions = {
-            xaxis: { 
-                mode: "time", 
+            xaxis: {
+                mode: "time",
                 tickLength: 5
             },
             selection: { mode: "x" },

modules/system/assets/ui/js/chart.pie.js

@@ -1,5 +1,5 @@
 /*
- * The pie chart plugin. 
+ * The pie chart plugin.
  * 
  * Data attributes:
  * - data-control="chart-pie" - enables the pie chart plugin

modules/system/assets/ui/js/scoreboard.js

@@ -0,0 +1,4 @@
+/*
+=require toolbar.js
+=require chart.js
+*/

modules/system/assets/ui/less/chart.less

@@ -1,4 +1,26 @@
 
+//
+// Dependencies
+// --------------------------------------------------
+
+@import "global.less";
+@import "icon.less";
+
+//
+// Chart
+// --------------------------------------------------
+
+@color-status-list-text:                     #7e8c8d;
+
+@color-chart-tooltip-bg:                     #000000;
+@color-chart-tooltip-text:                   #ffffff;
+
+@color-scoreboard-title:                     #666666;
+@color-scoreboard-description:               #999999;
+@color-scoreboard-body:                      #666666;
+@color-scoreboard-icon:                      #e5a91a;
+@color-scoreboard-positive:                  #95b753;
+@color-scoreboard-negative:                  #cc3300;
 
 .control-chart-non-centered() {
     text-align: left;
@@ -9,6 +31,10 @@
     }
 }
 
+//
+// Chart
+// --------------------------------------------------
+
 .control-chart {
     div.canvas {
         display: inline-block;
@@ -315,7 +341,7 @@ ul.status-list {
     top: -2px;
 }
 
-.report-container { 
+.report-container {
     ul.status-list {
         margin-top: -10px;
     }

modules/system/assets/ui/less/scoreboard.less

@@ -1,3 +1,17 @@
+
+//
+// Dependencies
+// --------------------------------------------------
+
+@import "global.less";
+@import "icon.less";
+@import "chart.less";
+@import "toolbar.less";
+
+//
+// Scoreboard
+// --------------------------------------------------
+
 div.scoreboard {
     position: relative;
     padding: 0;
@@ -30,7 +44,7 @@ div.scoreboard {
             top: -2px;
 
             li {
-                padding-left: 18px; 
+                padding-left: 18px;
                 & > i { margin-left: -18px; }
             }
         }