244157786a
This is the result of running the no-implicit-this-codemod, some manual fixes, and the addition of a linting rule to prevent future ambiguity.
38 lines
1.8 KiB
Handlebars
38 lines
1.8 KiB
Handlebars
<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" this.elementId}} {{concat "desc-" this.elementId}}">
|
|
<title id="{{concat "title-" this.elementId}}">{{this.title}}</title>
|
|
<description id="{{concat "desc-" this.elementId}}">
|
|
{{#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}}
|
|
</description>
|
|
<defs>
|
|
<linearGradient x1="0" x2="0" y1="0" y2="1" class="{{this.chartClass}}" id="{{this.fillId}}">
|
|
<stop class="start" offset="0%" />
|
|
<stop class="end" offset="100%" />
|
|
</linearGradient>
|
|
<clipPath id="{{this.maskId}}">
|
|
<path class="fill" d="{{this.area}}" />
|
|
</clipPath>
|
|
</defs>
|
|
<g class="y-gridlines gridlines" transform="translate({{this.yAxisOffset}}, 0)"></g>
|
|
<g class="canvas {{this.chartClass}}">
|
|
<path class="line" d="{{this.line}}" />
|
|
<rect class="area" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" fill="url(#{{this.fillId}})" clip-path="url(#{{this.maskId}})" />
|
|
<rect class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
|
|
</g>
|
|
<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>
|
|
</svg>
|
|
<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>
|