mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-24 16:11:08 +02:00
f04fe92b89
* delete vertical bar grouped * delete individual routes and tabs for client count types * add nav-bar component to hide tab in production * first round of test updates * skip client list tests for now * reogranize overview tests * fix css color for chart * change chart styling from grid to flex * add split view for running total chart * update latest colors from designs * add changelog * rename yield blocks to be more flexible * add conditional for description * delete routes
113 lines
3.5 KiB
Handlebars
113 lines
3.5 KiB
Handlebars
{{!
|
|
Copyright (c) HashiCorp, Inc.
|
|
SPDX-License-Identifier: BUSL-1.1
|
|
}}
|
|
|
|
<div class="lineal-chart" data-test-chart={{or @chartTitle "vertical bar chart"}}>
|
|
<Lineal::Fluid as |width|>
|
|
{{#let
|
|
(scale-band domain=this.xDomain range=(array 0 width) padding=0.1)
|
|
(scale-linear range=(array this.chartHeight 0) domain=this.yDomain)
|
|
(scale-linear range=(array 0 this.chartHeight) domain=this.yDomain)
|
|
as |xScale yScale hScale|
|
|
}}
|
|
<svg width={{width}} height={{this.chartHeight}}>
|
|
<title>{{@chartTitle}}</title>
|
|
|
|
{{#if (and xScale.isValid yScale.isValid)}}
|
|
<Lineal::Axis
|
|
@scale={{yScale}}
|
|
@tickCount="4"
|
|
@tickPadding={{10}}
|
|
@tickSizeInner={{concat "-" width}}
|
|
@tickFormat={{this.formatTicksY}}
|
|
@orientation="left"
|
|
@includeDomain={{false}}
|
|
class="lineal-axis"
|
|
data-test-y-axis
|
|
/>
|
|
<Lineal::Axis
|
|
@scale={{xScale}}
|
|
@orientation="bottom"
|
|
transform="translate(0,{{yScale.range.min}})"
|
|
@includeDomain={{false}}
|
|
@tickSize="0"
|
|
@tickPadding={{10}}
|
|
class="lineal-axis"
|
|
data-test-x-axis
|
|
/>
|
|
{{/if}}
|
|
<Lineal::Bars
|
|
@data={{this.chartData}}
|
|
@x="x"
|
|
@y="y"
|
|
@height="y"
|
|
@width={{this.barWidth}}
|
|
@xScale={{xScale}}
|
|
@yScale={{yScale}}
|
|
@heightScale={{hScale}}
|
|
transform="translate({{this.barOffset xScale.bandwidth}},0)"
|
|
fill="transparent"
|
|
stroke="transparent"
|
|
class="lineal-chart-bar"
|
|
data-test-vertical-bar
|
|
/>
|
|
{{#if (and xScale.isValid yScale.isValid)}}
|
|
{{#each this.chartData as |d|}}
|
|
<rect
|
|
role="button"
|
|
aria-label="Show exact counts for {{d.legendX}}"
|
|
x="0"
|
|
y="0"
|
|
height={{this.chartHeight}}
|
|
width={{xScale.bandwidth}}
|
|
fill="transparent"
|
|
stroke="transparent"
|
|
transform="translate({{xScale.compute d.x}})"
|
|
{{on "mouseover" (fn (mut this.activeDatum) d)}}
|
|
{{on "mouseout" (fn (mut this.activeDatum) null)}}
|
|
data-test-interactive-area={{d.x}}
|
|
/>
|
|
{{/each}}
|
|
{{/if}}
|
|
</svg>
|
|
{{#if this.activeDatum}}
|
|
<div
|
|
class="chart-tooltip"
|
|
role="status"
|
|
{{style
|
|
--x=(this.tooltipX (xScale.compute this.activeDatum.x) xScale.bandwidth)
|
|
--y=(this.tooltipY (hScale.compute this.activeDatum.y))
|
|
}}
|
|
>
|
|
<div data-test-tooltip>
|
|
<p class="bold" data-test-tooltip-month>{{this.activeDatum.legendX}}</p>
|
|
<p data-test-tooltip-count>{{this.activeDatum.tooltip}}</p>
|
|
</div>
|
|
<div class="chart-tooltip-arrow"></div>
|
|
</div>
|
|
{{/if}}
|
|
{{/let}}
|
|
</Lineal::Fluid>
|
|
</div>
|
|
{{#if @showTable}}
|
|
<details data-test-underlying-data>
|
|
<summary>Underlying data</summary>
|
|
<Hds::Table @caption="Underlying data">
|
|
<:head as |H|>
|
|
<H.Tr>
|
|
<H.Th>Month</H.Th>
|
|
<H.Th>{{if @dataKey (humanize @dataKey)}} Count</H.Th>
|
|
</H.Tr>
|
|
</:head>
|
|
<:body as |B|>
|
|
{{#each this.chartData as |row|}}
|
|
<B.Tr>
|
|
<B.Td>{{row.legendX}}</B.Td>
|
|
<B.Td>{{row.legendY}}</B.Td>
|
|
</B.Tr>
|
|
{{/each}}
|
|
</:body>
|
|
</Hds::Table>
|
|
</details>
|
|
{{/if}} |