github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-line-chart.hbs (about)

     1  {{#freestyle-usage "line-chart-standard" title="Standard"}}
     2    <div class="block" style="height:100px; width: 400px;">
     3      {{line-chart data=lineChartData xProp="year" yProp="value" chartClass="is-primary"}}
     4    </div>
     5    <div class="block" style="height:100px; width: 400px;">
     6      {{line-chart data=lineChartMild xProp="year" yProp="value" chartClass="is-info"}}
     7    </div>
     8  {{/freestyle-usage}}
     9  
    10  {{#freestyle-usage "line-chart-fill-width" title="Fluid width"}}
    11    <div class="block" style="height:250px;">
    12      {{line-chart data=lineChartData xProp="year" yProp="value" chartClass="is-danger"}}
    13    </div>
    14    <div class="block" style="height:250px;">
    15      {{line-chart data=lineChartMild xProp="year" yProp="value" chartClass="is-warning"}}
    16    </div>
    17  {{/freestyle-usage}}
    18  {{#freestyle-annotation}}
    19    <p>A line chart will assume the width of its container. This includes the dimensions of the axes, which are calculated based on real DOM measurements. This requires a two-pass render: first the axes are placed with their real domains (in order to capture width and height of tick labels), second the axes are adjusted to make sure both the x and y axes are within the height and width bounds of the container.</p>
    20  {{/freestyle-annotation}}
    21  
    22  {{#freestyle-usage "line-chart-live-data" title="Live data"}}
    23    <div class="block" style="height:250px">
    24      {{line-chart
    25        data=lineChartLive
    26        xProp="ts"
    27        yProp="val"
    28        timeseries=true
    29        chartClass="is-primary"
    30        xFormat=secondsFormat}}
    31    </div>
    32  {{/freestyle-usage}}
    33  
    34  {{#freestyle-usage "line-chart-with-gaps" title="Data with gaps"}}
    35    <div class="block" style="height:250px">
    36      {{line-chart
    37        data=lineChartGapData
    38        xProp="year"
    39        yProp="value"
    40        chartClass="is-primary"}}
    41    </div>
    42  {{/freestyle-usage}}