github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/templates/components/line-chart.hbs (about) 1 <div 2 class="chart line-chart" 3 ...attributes 4 {{did-insert this.onInsert}} 5 {{did-update this.renderChart}} 6 {{did-update this.recomputeXAxis this.xScale}} 7 {{did-update this.recomputeYAxis this.yScale}} 8 {{window-resize this.updateDimensions}}> 9 <svg data-test-line-chart aria-labelledby="{{this.titleId}}" aria-describedby="{{this.descriptionId}}"> 10 <title id="{{this.titleId}}">{{this.title}}</title> 11 <desc id="{{this.descriptionId}}"> 12 {{#if this.description}} 13 {{this.description}} 14 {{else}} 15 X-axis values range from {{this.xRange.firstObject}} to {{this.xRange.lastObject}}, 16 and Y-axis values range from {{this.yRange.firstObject}} to {{this.yRange.lastObject}}. 17 {{/if}} 18 </desc> 19 <g class="y-gridlines gridlines" transform="translate({{this.yAxisOffset}}, 0)"></g> 20 {{#if this.ready}} 21 {{yield (hash 22 Area=(component "chart-primitives/area" 23 curve="linear" 24 xScale=this.xScale 25 yScale=this.yScale 26 xProp=this.xProp 27 yProp=this.yProp 28 width=this.yAxisOffset 29 height=this.xAxisOffset) 30 ) to="svg"}} 31 {{/if}} 32 <g aria-hidden="true" class="x-axis axis" transform="translate(0, {{this.xAxisOffset}})"></g> 33 <g aria-hidden="true" class="y-axis axis" transform="translate({{this.yAxisOffset}}, 0)"></g> 34 <rect data-test-hover-target class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" /> 35 </svg> 36 {{#if this.ready}} 37 {{yield (hash 38 VAnnotations=(component "chart-primitives/v-annotations" 39 timeseries=@timeseries 40 format=this.xFormat 41 scale=this.xScale 42 prop=this.xProp 43 height=this.xAxisOffset) 44 HAnnotations=(component "chart-primitives/h-annotations" 45 format=this.yFormat 46 scale=this.yScale 47 prop=this.yProp 48 left=this.canvasDimensions.left 49 width=this.canvasDimensions.width) 50 Tooltip=(component "chart-primitives/tooltip" 51 active=this.activeData.length 52 style=this.tooltipStyle 53 data=this.activeData) 54 ) to="after"}} 55 {{/if}} 56 </div>