open-nomad/ui/app/templates/components/line-chart.hbs
Michael Lange cdb1831ceb Add a11y features to the line-chart component
- Treat it as an image
- Add a title and a description
- Hide the axes, just in case
2018-09-27 12:55:52 -07:00

38 lines
1.6 KiB
Handlebars

<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" elementId}} {{concat "desc-" elementId}}">
<title id="{{concat "title-" elementId}}">{{title}}</title>
<description id="{{concat "desc-" elementId}}">
{{#if description}}
{{description}}
{{else}}
X-axis values range from {{xRange.firstObject}} to {{xRange.lastObject}},
and Y-axis values range from {{yRange.firstObject}} to {{yRange.lastObject}}.
{{/if}}
</description>
<defs>
<linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
<stop class="start" offset="0%" />
<stop class="end" offset="100%" />
</linearGradient>
<clipPath id="{{maskId}}">
<path class="fill" d="{{area}}" />
</clipPath>
</defs>
<g class="y-gridlines gridlines" transform="translate({{yAxisOffset}}, 0)"></g>
<g class="canvas {{chartClass}}">
<path class="line" d="{{line}}" />
<rect class="area" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
<rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" />
</g>
<g aria-hidden="true" class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
<g aria-hidden="true" class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
</svg>
<div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
<p>
<span class="label">
<span class="color-swatch {{chartClass}}" />
{{activeDatumLabel}}
</span>
<span class="value">{{activeDatumValue}}</span>
</p>
</div>