Merge pull request #106 from sjdrew/master

feat: added markers/ticks/labels and bg color for ranges

Author: ashish-chopra

apps/demo/src/app/documentation/documentation.component.html

@@ -116,11 +116,28 @@ <h4>Configuration Options</h4>
             </tr>
             <tr>
                 <td>thresholds</td>
-                <td>Specifies an object of threshold values at which the gauge's color changes.</td>
+                <td>Specifies an object of threshold values at which the gauge's color changes. Also if you specify a bgOpacity, this color will be applied the opacity value and shown as the background for that range, otherwise the backgroundColor is used.</td>
                 <td>No</td>
                 <td>None</td>
-                <td>A special object</td>
+                <td>A special object of the format 
+                <code>{{ '{ "20": { color: "red", bgOpacity: .2 }  , ... }' }}</code></td>
             </tr>
+            <tr>
+                <td>markers</td>
+                <td>Specifies an object of marker values at which value to place a marker. Can be a line or triangle and optionally may specify color, size and label. Note if you use labels you should add to margin value to the gauge using the margin option.</td>
+                <td>No</td>
+                <td>None</td>
+                <td>A special object of the format shown. Currently type supports "line" or "triangle" marker.<br> 
+                    <code>{{ '{ "50": { color: "#555", type: "triangle", size: 8, label: "Goal", font: "12px arial" }  , ... }' }}</code>
+                </td>
+            </tr>  
+            <tr>
+                <td>margin</td>
+                <td>Specifies an optional margin for the chart.</td>
+                <td>No</td>
+                <td>0</td>
+                <td>A positive integer. If using markers, you should set at least a 8 margin or more if using labels.</td>
+            </tr>                      
             <tr>
                 <td>animate</td>
                 <td>toggles the gauge animation</td>

apps/demo/src/app/playground/playground.component.html

@@ -102,6 +102,7 @@ <h1>Playground - <small>Get your hands dirty!</small> </h1>
                 <ngx-gauge [type]="type" [size]="size" [thick]="thick" [label]="label" [append]="append"
                     [prepend]="prepend" [cap]="cap" [foregroundColor]="foregroundColor"
                     [backgroundColor]="backgroundColor" [value]="value" [min]="min" [max]="max"
+                    [markers]="markers" [margin]="12"
                     [thresholds]="enableThresholds ? thresholdConfig : {}"></ngx-gauge>
             </div>
         </section>

apps/demo/src/app/playground/playground.component.ts

@@ -27,11 +27,17 @@ export class PlaygroundComponent implements OnInit {
   backgroundColor: string = '#ebebeb';
 
   thresholdConfig = {
-    '0': { color: 'green' },
-    '40': { color: 'orange' },
-    '75.5': { color: 'red' }
+    '0': { color: 'green', bgOpacity: .2 },
+    '40': { color: 'orange', bgOpacity: .2 },
+    '75.5': { color: 'red', bgOpacity: .2 }
   };
 
+  markers = {
+      "30": { color: '#555', size: 8, label: '30', type: 'line'},
+      "70": { color: '#555', size: 8, label: '60', type: 'line'},
+      "100": { color: '#555', size: 8, label: '100', type: 'line'},
+  }
+
   onClick(e) {
     console.log(this.foregroundColor, this.backgroundColor);
     this.foregroundColor = 'red';