github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/metrics.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 3 export default { 4 title: 'Components|Metrics', 5 }; 6 7 export let Standard = () => { 8 return { 9 template: hbs` 10 <h5 class="title is-5">Metrics</h5> 11 <div class="metric-group"> 12 <div class="metric"> 13 <h3 class="label">Label</h3> 14 <p class="value">12</p> 15 </div> 16 </div> 17 <p class="annotation">Metrics are a way to show simple values (generally numbers). Labels are smaller than numbers to put emphasis on the data.</p> 18 `, 19 }; 20 }; 21 22 export let Groups = () => { 23 return { 24 template: hbs` 25 <h5 class="title is-5">Metric groups</h5> 26 <div class="metric-group"> 27 <div class="metric"> 28 <h3 class="label">Label</h3> 29 <p class="value">1 / 2</p> 30 </div> 31 <div class="metric"> 32 <h3 class="label">Number</h3> 33 <p class="value">1,300</p> 34 </div> 35 <div class="metric"> 36 <h3 class="label">Datacenter</h3> 37 <p class="value">dc1</p> 38 </div> 39 </div> 40 41 <div class="metric-group"> 42 <div class="metric"> 43 <h3 class="label">Today</h3> 44 <p class="value">81º</p> 45 </div> 46 <div class="metric"> 47 <h3 class="label">Tomorrow</h3> 48 <p class="value">73º</p> 49 </div> 50 </div> 51 <p class="annotation">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> 52 `, 53 }; 54 }; 55 56 export let Colors = () => { 57 return { 58 template: hbs` 59 <h5 class="title is-5">Metric colors</h5> 60 <div class="metric-group"> 61 <div class="metric is-info"> 62 <h3 class="label">Info</h3> 63 <p class="value">1</p> 64 </div> 65 <div class="metric is-success"> 66 <h3 class="label">Success</h3> 67 <p class="value">2</p> 68 </div> 69 <div class="metric is-warning"> 70 <h3 class="label">Warning</h3> 71 <p class="value">3</p> 72 </div> 73 <div class="metric is-danger"> 74 <h3 class="label">Danger</h3> 75 <p class="value">4</p> 76 </div> 77 </div> 78 79 <div class="metric-group"> 80 <div class="metric is-white"> 81 <h3 class="label">White</h3> 82 <p class="value">5</p> 83 </div> 84 <div class="metric is-light"> 85 <h3 class="label">Light</h3> 86 <p class="value">6</p> 87 </div> 88 <div class="metric is-primary"> 89 <h3 class="label">Primary</h3> 90 <p class="value">7</p> 91 </div> 92 <div class="metric is-dark"> 93 <h3 class="label">Dark</h3> 94 <p class="value">8</p> 95 </div> 96 <div class="metric is-black"> 97 <h3 class="label">Black</h3> 98 <p class="value">9</p> 99 </div> 100 </div> 101 <p class="annotation">All color-modifiers work for metrics, but some work better than others.</p> 102 <p class="annotation">Emotive colors work well and are put to use when applicable. Other colors have worse support and less utility.</p> 103 `, 104 }; 105 }; 106 107 export let States = () => { 108 return { 109 template: hbs` 110 <h5 class="title is-5">Metric states</h5> 111 <div class="metric-group"> 112 <div class="metric is-primary is-faded"> 113 <h3 class="label">One</h3> 114 <p class="value">A</p> 115 </div> 116 <div class="metric is-primary"> 117 <h3 class="label">Two</h3> 118 <p class="value">B</p> 119 </div> 120 <div class="metric is-primary is-faded"> 121 <h3 class="label">Three</h3> 122 <p class="value">C</p> 123 </div> 124 </div> 125 126 <div class="metric-group"> 127 <div class="metric is-danger is-faded"> 128 <h3 class="label">One</h3> 129 <p class="value">A</p> 130 </div> 131 <div class="metric is-danger is-faded"> 132 <h3 class="label">Two</h3> 133 <p class="value">B</p> 134 </div> 135 <div class="metric is-danger"> 136 <h3 class="label">Three</h3> 137 <p class="value">C</p> 138 </div> 139 </div> 140 <p class="annotation">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> 141 `, 142 }; 143 };