99185e2d8f
* Remove the newline after .hbs copyright headers * Trying with the whitespace control char
177 lines
4.6 KiB
Handlebars
177 lines
4.6 KiB
Handlebars
{{!
|
|
Copyright (c) HashiCorp, Inc.
|
|
SPDX-License-Identifier: MPL-2.0
|
|
~}}
|
|
|
|
<div
|
|
...attributes
|
|
class="chart recommendation-chart {{this.directionClass}}"
|
|
{{did-insert this.onResize}}
|
|
{{window-resize this.onResize}}
|
|
{{on "mousemove" this.setLegendPosition}}
|
|
{{on "mouseleave" (action (mut this.showLegend) false)}}
|
|
>
|
|
|
|
<svg
|
|
class="chart"
|
|
height={{this.chartHeight}}
|
|
{{did-insert this.storeSvgElement}}
|
|
>
|
|
<svg
|
|
class="icon delta"
|
|
x={{this.icon.x}}
|
|
y={{this.icon.y}}
|
|
width={{this.icon.width}}
|
|
height={{this.icon.height}}
|
|
>
|
|
{{x-icon this.icon.name}}
|
|
</svg>
|
|
|
|
<text
|
|
class="resource"
|
|
x={{this.resourceLabel.x}}
|
|
y={{this.resourceLabel.y}}
|
|
>
|
|
{{this.resourceLabel.text}}
|
|
</text>
|
|
|
|
{{#if this.center}}
|
|
<line
|
|
class="center"
|
|
x1={{this.center.x1}}
|
|
y1={{this.center.y1}}
|
|
x2={{this.center.x2}}
|
|
y2={{this.center.y2}}
|
|
></line>
|
|
{{/if}}
|
|
|
|
{{#each this.statsShapes as |shapes|}}
|
|
<text
|
|
class="stats-label {{shapes.text.class}}"
|
|
text-anchor="end"
|
|
x={{shapes.text.x}}
|
|
y={{shapes.text.y}}
|
|
data-test-label={{shapes.class}}
|
|
{{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
|
|
{{on "mouseleave" this.unsetActiveLegendRow}}
|
|
>
|
|
{{shapes.text.label}}
|
|
</text>
|
|
|
|
<rect
|
|
class="stat {{shapes.class}}"
|
|
x={{shapes.rect.x}}
|
|
width={{shapes.rect.width}}
|
|
y={{shapes.rect.y}}
|
|
height={{shapes.rect.height}}
|
|
{{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
|
|
{{on "mouseleave" this.unsetActiveLegendRow}}
|
|
></rect>
|
|
|
|
<line
|
|
class="stat {{shapes.class}}"
|
|
x1={{shapes.line.x1}}
|
|
y1={{shapes.line.y1}}
|
|
x2={{shapes.line.x2}}
|
|
y2={{shapes.line.y2}}
|
|
{{on "mouseenter" (fn this.setActiveLegendRow shapes.text.label)}}
|
|
{{on "mouseleave" this.unsetActiveLegendRow}}
|
|
></line>
|
|
{{/each}}
|
|
|
|
{{#unless @disabled}}
|
|
{{#if this.deltaRect.x}}
|
|
<rect
|
|
{{did-insert this.isShown}}
|
|
class="delta"
|
|
x={{this.deltaRect.x}}
|
|
y={{this.deltaRect.y}}
|
|
width={{this.deltaRect.width}}
|
|
height={{this.deltaRect.height}}
|
|
></rect>
|
|
|
|
<polygon
|
|
class="delta"
|
|
style={{this.deltaTriangle.style}}
|
|
points={{this.deltaTriangle.points}}
|
|
></polygon>
|
|
|
|
<line
|
|
class="changes delta"
|
|
style={{this.deltaLines.delta.style}}
|
|
x1={{0}}
|
|
y1={{this.edgeTickY1}}
|
|
x2={{0}}
|
|
y2={{this.edgeTickY2}}
|
|
{{on "mouseenter" (fn this.setActiveLegendRow "New")}}
|
|
{{on "mouseleave" this.unsetActiveLegendRow}}
|
|
></line>
|
|
|
|
<line
|
|
class="changes"
|
|
x1={{this.deltaLines.original.x}}
|
|
y1={{this.edgeTickY1}}
|
|
x2={{this.deltaLines.original.x}}
|
|
y2={{this.edgeTickY2}}
|
|
{{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
|
|
{{on "mouseleave" this.unsetActiveLegendRow}}
|
|
></line>
|
|
|
|
<text
|
|
class="changes"
|
|
text-anchor="{{this.deltaText.original.anchor}}"
|
|
x={{this.deltaText.original.x}}
|
|
y={{this.deltaText.original.y}}
|
|
{{on "mouseenter" (fn this.setActiveLegendRow "Current")}}
|
|
{{on "mouseleave" this.unsetActiveLegendRow}}
|
|
>
|
|
Current
|
|
</text>
|
|
|
|
<text
|
|
class="changes new"
|
|
text-anchor="{{this.deltaText.delta.anchor}}"
|
|
x={{this.deltaText.delta.x}}
|
|
y={{this.deltaText.delta.y}}
|
|
{{on "mouseenter" (fn this.setActiveLegendRow "New")}}
|
|
{{on "mouseleave" this.unsetActiveLegendRow}}
|
|
>
|
|
New
|
|
</text>
|
|
|
|
<text
|
|
class="changes percent"
|
|
x={{this.deltaText.percent.x}}
|
|
y={{this.deltaText.percent.y}}
|
|
>
|
|
{{this.deltaText.percent.text}}
|
|
</text>
|
|
{{/if}}
|
|
{{/unless}}
|
|
|
|
<line
|
|
class="zero"
|
|
x1={{this.gutterWidthLeft}}
|
|
y1={{this.edgeTickY1}}
|
|
x2={{this.gutterWidthLeft}}
|
|
y2={{this.edgeTickY2}}
|
|
></line>
|
|
</svg>
|
|
|
|
<div
|
|
class="chart-tooltip {{if this.showLegend 'active' 'inactive'}}"
|
|
style={{this.tooltipStyle}}
|
|
>
|
|
<ol>
|
|
{{#each this.sortedStats as |stat|}}
|
|
<li class={{if (eq this.activeLegendRow stat.label) "active"}}>
|
|
<span class="label">
|
|
{{stat.label}}
|
|
</span>
|
|
<span class="value">{{stat.value}}</span>
|
|
</li>
|
|
{{/each}}
|
|
</ol>
|
|
</div>
|
|
|
|
</div> |