github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-metrics.hbs (about) 1 {{#freestyle-usage "metrics" title="Metrics"}} 2 <div class="metric-group"> 3 <div class="metric"> 4 <h3 class="label">Label</h3> 5 <p class="value">12</p> 6 </div> 7 </div> 8 {{/freestyle-usage}} 9 {{#freestyle-annotation}} 10 <p>Metrics are a way to show simple values (generally numbers). Labels are smaller than numbers to put emphasis on the data.</p> 11 {{/freestyle-annotation}} 12 13 {{#freestyle-usage "metric-groups" title="Metric Groups"}} 14 <div class="metric-group"> 15 <div class="metric"> 16 <h3 class="label">Label</h3> 17 <p class="value">1 / 2</p> 18 </div> 19 <div class="metric"> 20 <h3 class="label">Number</h3> 21 <p class="value">1,300</p> 22 </div> 23 <div class="metric"> 24 <h3 class="label">Datacenter</h3> 25 <p class="value">dc1</p> 26 </div> 27 </div> 28 29 <div class="metric-group"> 30 <div class="metric"> 31 <h3 class="label">Today</h3> 32 <p class="value">81º</p> 33 </div> 34 <div class="metric"> 35 <h3 class="label">Tomorrow</h3> 36 <p class="value">73º</p> 37 </div> 38 </div> 39 {{/freestyle-usage}} 40 {{#freestyle-annotation}} 41 <p>Related metrics should be lumped together in metric groups. All metrics have to be in a metric group. By putting multiple metrics in a single group, they will be visually lumped together.</p> 42 {{/freestyle-annotation}} 43 44 {{#freestyle-usage "metric-colors" title="Metric Colors"}} 45 <div class="metric-group"> 46 <div class="metric is-info"> 47 <h3 class="label">Info</h3> 48 <p class="value">1</p> 49 </div> 50 <div class="metric is-success"> 51 <h3 class="label">Success</h3> 52 <p class="value">2</p> 53 </div> 54 <div class="metric is-warning"> 55 <h3 class="label">Warning</h3> 56 <p class="value">3</p> 57 </div> 58 <div class="metric is-danger"> 59 <h3 class="label">Danger</h3> 60 <p class="value">4</p> 61 </div> 62 </div> 63 64 <div class="metric-group"> 65 <div class="metric is-white"> 66 <h3 class="label">White</h3> 67 <p class="value">5</p> 68 </div> 69 <div class="metric is-light"> 70 <h3 class="label">Light</h3> 71 <p class="value">6</p> 72 </div> 73 <div class="metric is-primary"> 74 <h3 class="label">Primary</h3> 75 <p class="value">7</p> 76 </div> 77 <div class="metric is-dark"> 78 <h3 class="label">Dark</h3> 79 <p class="value">8</p> 80 </div> 81 <div class="metric is-black"> 82 <h3 class="label">Black</h3> 83 <p class="value">9</p> 84 </div> 85 </div> 86 {{/freestyle-usage}} 87 {{#freestyle-annotation}} 88 <p>All color-modifiers work for metrics, but some work better than others.</p> 89 <p>Emotive colors work well and are put to use when applicable. Other colors have worse support and less utility.</p> 90 {{/freestyle-annotation}} 91 92 {{#freestyle-usage "metric-states" title="Metric States"}} 93 <div class="metric-group"> 94 <div class="metric is-primary is-faded"> 95 <h3 class="label">One</h3> 96 <p class="value">A</p> 97 </div> 98 <div class="metric is-primary"> 99 <h3 class="label">Two</h3> 100 <p class="value">B</p> 101 </div> 102 <div class="metric is-primary is-faded"> 103 <h3 class="label">Three</h3> 104 <p class="value">C</p> 105 </div> 106 </div> 107 108 <div class="metric-group"> 109 <div class="metric is-danger is-faded"> 110 <h3 class="label">One</h3> 111 <p class="value">A</p> 112 </div> 113 <div class="metric is-danger is-faded"> 114 <h3 class="label">Two</h3> 115 <p class="value">B</p> 116 </div> 117 <div class="metric is-danger"> 118 <h3 class="label">Three</h3> 119 <p class="value">C</p> 120 </div> 121 </div> 122 {{/freestyle-usage}} 123 {{#freestyle-annotation}} 124 <p>Metrics have a disabled state. This is used when a metric is non-existent or irrelevant. It's just as important to show the lack of value as it is to show a value, so simply not rendering non-existent or irrelevant metrics would be worse.</p> 125 {{/freestyle-annotation}}