60 lines
2.2 KiB
Handlebars
60 lines
2.2 KiB
Handlebars
<div
|
|
class="chart line-chart"
|
|
...attributes
|
|
{{did-insert this.onInsert}}
|
|
{{did-update this.renderChart}}
|
|
{{window-resize this.updateDimensions}}>
|
|
<svg data-test-line-chart aria-labelledby="{{this.titleId}}" aria-describedby="{{this.descriptionId}}">
|
|
<title id="{{this.titleId}}">{{this.title}}</title>
|
|
<desc id="{{this.descriptionId}}">
|
|
{{#if this.description}}
|
|
{{this.description}}
|
|
{{else}}
|
|
X-axis values range from {{this.xRange.firstObject}} to {{this.xRange.lastObject}},
|
|
and Y-axis values range from {{this.yRange.firstObject}} to {{this.yRange.lastObject}}.
|
|
{{/if}}
|
|
</desc>
|
|
<g class="y-gridlines gridlines" transform="translate({{this.yAxisOffset}}, 0)"></g>
|
|
{{#if this.ready}}
|
|
{{yield (hash
|
|
Area=(component "chart-primitives/area"
|
|
curve="linear"
|
|
xScale=this.xScale
|
|
yScale=this.yScale
|
|
xProp=this.xProp
|
|
yProp=this.yProp
|
|
width=this.yAxisOffset
|
|
height=this.xAxisOffset)
|
|
) to="svg"}}
|
|
{{/if}}
|
|
<g aria-hidden="true" class="x-axis axis" transform="translate(0, {{this.xAxisOffset}})"></g>
|
|
<g aria-hidden="true" class="y-axis axis" transform="translate({{this.yAxisOffset}}, 0)"></g>
|
|
<rect class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
|
|
</svg>
|
|
{{#if this.ready}}
|
|
{{yield (hash
|
|
VAnnotations=(component "chart-primitives/v-annotations"
|
|
timeseries=@timeseries
|
|
format=this.xFormat
|
|
scale=this.xScale
|
|
prop=this.xProp
|
|
height=this.xAxisOffset)
|
|
HAnnotations=(component "chart-primitives/h-annotations"
|
|
format=this.yFormat
|
|
scale=this.yScale
|
|
prop=this.yProp
|
|
left=this.canvasDimensions.left
|
|
width=this.canvasDimensions.width)
|
|
) to="after"}}
|
|
{{/if}}
|
|
<div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
|
|
<p>
|
|
<span class="label">
|
|
<span class="color-swatch {{this.chartClass}}" />
|
|
{{this.activeDatumLabel}}
|
|
</span>
|
|
<span class="value">{{this.activeDatumValue}}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|