github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/templates/components/line-chart.hbs (about)

     1  <div
     2    class="chart line-chart"
     3    ...attributes
     4    {{did-insert this.onInsert}}
     5    {{did-update this.renderChart}}
     6    {{window-resize this.updateDimensions}}>
     7    <svg data-test-line-chart aria-labelledby="{{this.titleId}}" aria-describedby="{{this.descriptionId}}">
     8      <title id="{{this.titleId}}">{{this.title}}</title>
     9      <desc id="{{this.descriptionId}}">
    10        {{#if this.description}}
    11          {{this.description}}
    12        {{else}}
    13          X-axis values range from {{this.xRange.firstObject}} to {{this.xRange.lastObject}},
    14          and Y-axis values range from {{this.yRange.firstObject}} to {{this.yRange.lastObject}}.
    15        {{/if}}
    16      </desc>
    17      <g class="y-gridlines gridlines" transform="translate({{this.yAxisOffset}}, 0)"></g>
    18      {{#if this.ready}}
    19        {{yield (hash
    20          Area=(component "chart-primitives/area"
    21            colorClass=this.chartClass
    22            curve="linear"
    23            xScale=this.xScale
    24            yScale=this.yScale
    25            xProp=this.xProp
    26            yProp=this.yProp
    27            width=this.yAxisOffset
    28            height=this.xAxisOffset)
    29        ) to="svg"}}
    30      {{/if}}
    31      <g aria-hidden="true" class="x-axis axis" transform="translate(0, {{this.xAxisOffset}})"></g>
    32      <g aria-hidden="true" class="y-axis axis" transform="translate({{this.yAxisOffset}}, 0)"></g>
    33      <rect class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
    34    </svg>
    35    {{#if this.ready}}
    36      {{yield (hash
    37        VAnnotations=(component "chart-primitives/v-annotations"
    38          timeseries=@timeseries
    39          format=this.xFormat
    40          scale=this.xScale
    41          prop=this.xProp
    42          height=this.xAxisOffset)
    43      ) to="after"}}
    44    {{/if}}
    45    <div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
    46      <p>
    47        <span class="label">
    48          <span class="color-swatch {{this.chartClass}}" />
    49          {{this.activeDatumLabel}}
    50        </span>
    51        <span class="value">{{this.activeDatumValue}}</span>
    52      </p>
    53    </div>
    54  </div>