github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-line-chart.hbs (about) 1 {{#freestyle-usage "line-chart-standard" title="Standard"}} 2 <div class="block" style="height:100px; width: 400px;"> 3 {{line-chart data=lineChartData xProp="year" yProp="value" chartClass="is-primary"}} 4 </div> 5 <div class="block" style="height:100px; width: 400px;"> 6 {{line-chart data=lineChartMild xProp="year" yProp="value" chartClass="is-info"}} 7 </div> 8 {{/freestyle-usage}} 9 10 {{#freestyle-usage "line-chart-fill-width" title="Fluid width"}} 11 <div class="block" style="height:250px;"> 12 {{line-chart data=lineChartData xProp="year" yProp="value" chartClass="is-danger"}} 13 </div> 14 <div class="block" style="height:250px;"> 15 {{line-chart data=lineChartMild xProp="year" yProp="value" chartClass="is-warning"}} 16 </div> 17 {{/freestyle-usage}} 18 {{#freestyle-annotation}} 19 <p>A line chart will assume the width of its container. This includes the dimensions of the axes, which are calculated based on real DOM measurements. This requires a two-pass render: first the axes are placed with their real domains (in order to capture width and height of tick labels), second the axes are adjusted to make sure both the x and y axes are within the height and width bounds of the container.</p> 20 {{/freestyle-annotation}} 21 22 {{#freestyle-usage "line-chart-live-data" title="Live data"}} 23 <div class="block" style="height:250px"> 24 {{line-chart 25 data=lineChartLive 26 xProp="ts" 27 yProp="val" 28 timeseries=true 29 chartClass="is-primary" 30 xFormat=secondsFormat}} 31 </div> 32 {{/freestyle-usage}} 33 34 {{#freestyle-usage "line-chart-with-gaps" title="Data with gaps"}} 35 <div class="block" style="height:250px"> 36 {{line-chart 37 data=lineChartGapData 38 xProp="year" 39 yProp="value" 40 chartClass="is-primary"}} 41 </div> 42 {{/freestyle-usage}}