github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/charts/gauge-chart.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 import DelayedArray from '../utils/delayed-array'; 3 import DelayedTruth from '../utils/delayed-truth'; 4 5 export default { 6 title: 'Charts/Gauge Chart', 7 }; 8 9 let totalVariations = [ 10 { value: 0, total: 10 }, 11 { value: 1, total: 10 }, 12 { value: 2, total: 10 }, 13 { value: 3, total: 10 }, 14 { value: 4, total: 10 }, 15 { value: 5, total: 10 }, 16 { value: 6, total: 10 }, 17 { value: 7, total: 10 }, 18 { value: 8, total: 10 }, 19 { value: 9, total: 10 }, 20 { value: 10, total: 10 }, 21 ]; 22 23 let complementVariations = [ 24 { value: 0, complement: 10 }, 25 { value: 1, complement: 9 }, 26 { value: 2, complement: 8 }, 27 { value: 3, complement: 7 }, 28 { value: 4, complement: 6 }, 29 { value: 5, complement: 5 }, 30 { value: 6, complement: 4 }, 31 { value: 7, complement: 3 }, 32 { value: 8, complement: 2 }, 33 { value: 9, complement: 1 }, 34 { value: 10, complement: 0 }, 35 ]; 36 37 let colorVariations = ['is-info', 'is-warning', 'is-success', 'is-danger']; 38 39 export let Total = () => { 40 return { 41 template: hbs` 42 <div class="multiples"> 43 {{#each variations as |v|}} 44 <div class="chart-container"> 45 <GaugeChart @value={{v.value}} @total={{v.total}} @label="Total" @chartClass="is-info" /> 46 </div> 47 {{/each}} 48 </div> 49 `, 50 context: { 51 variations: DelayedArray.create(totalVariations), 52 }, 53 }; 54 }; 55 56 export let Complement = () => { 57 return { 58 template: hbs` 59 <div class="multiples"> 60 {{#each variations as |v|}} 61 <div class="chart-container"> 62 <GaugeChart @value={{v.value}} @complement={{v.complement}} @label="Complement" @chartClass="is-info" /> 63 </div> 64 {{/each}} 65 </div> 66 `, 67 context: { 68 variations: DelayedArray.create(complementVariations), 69 }, 70 }; 71 }; 72 73 export let Colors = () => { 74 return { 75 template: hbs` 76 <div class="multiples"> 77 {{#each variations as |color|}} 78 <div class="chart-container"> 79 <GaugeChart @value={{7}} @total={{10}} @label={{color}} @chartClass={{color}} /> 80 </div> 81 {{/each}} 82 </div> 83 `, 84 context: { 85 variations: DelayedArray.create(colorVariations), 86 }, 87 }; 88 }; 89 90 export let Sizing = () => { 91 return { 92 template: hbs` 93 {{#if delayedTruth.complete}} 94 <div class="multiples"> 95 <div class="chart-container is-small"> 96 <GaugeChart @value={{7}} @total={{10}} @label="Small" /> 97 </div> 98 <div class="chart-container"> 99 <GaugeChart @value={{7}} @total={{10}} @label="Regular" /> 100 </div> 101 <div class="chart-container is-large"> 102 <GaugeChart @value={{7}} @total={{10}} @label="Large" /> 103 </div> 104 <div class="chart-container is-xlarge"> 105 <GaugeChart @value={{7}} @total={{10}} @label="X-Large" /> 106 </div> 107 </div> 108 {{/if}} 109 <p class="annotation">GaugeCharts fill the width of their container and have a dynamic height according to the height of the arc. However, the text within a gauge chart is fixed. This can create unsightly overlap or whitespace, so be careful about responsiveness when using this chart type.</p> 110 `, 111 context: { 112 delayedTruth: DelayedTruth.create(), 113 }, 114 }; 115 };