@{
    var showTexts = new[] { "None", "Value", "MinMax", "All" };
}

<h1>
    Gauge Basics
</h1>
<p>
    The main properties common to all C1 MVC gauge classes are:
</p>
<dl class="dl-horizontal">
    <dt>min</dt>
    <dd>The smallest value that can be displayed on the gauge.</dd>
    <dt>max</dt>
    <dd>The largest value that can be displayed on the gauge.</dd>
    <dt>value</dt>
    <dd>The current value displayed on the gauge.</dd>
    <dt>showText</dt>
    <dd>Whether to show the min/max/value properties as text on the gauge.</dd>
</dl>

<p>
    C1 MVC gauges can be used as value editors. The editing features
    are controlled by these properties:
</p>
<dl class="dl-horizontal">
    <dt>isReadOnly</dt>
    <dd>Whether users can change the gauge value.</dd>
    <dt>step</dt>
    <dd>The step to use then changing the gauge value.</dd>
    <dt>isAnimated</dt>
    <dd>Whether to use animations to display value changes.</dd>
</dl>

<p>
    Use the panel below to see the effect of each of these properties
    on different types of Gauge:
</p>

<div class="row demo-settings">
    <div class="col-xs-6">
        <label>min</label>
        @Html.C1().InputNumber().Id("min").Step(10)
        <br />
        <label>max</label>
        @Html.C1().InputNumber().Id("max").Step(10)
        <br />
        <label>value</label>
        @Html.C1().InputNumber().Id("value").Step(10)
        <br />
        <label>showText</label>
        @Html.C1().ComboBox().Id("showText").Bind(showTexts)
        <br />
        <label>isReadOnly</label>
        <input id="isReadOnly" type="checkbox" checked="checked">
        <br />
        <label>step</label>
        @Html.C1().InputNumber().Id("step").Step(1)
        <br />
        <label>isAnimated</label>
        <input id="isAnimated" type="checkbox" checked="checked">
    </div>
    <div class="col-xs-6">
        @(Html.C1().RadialGauge().Id("theRadialGauge")
            .Min(0).Max(100).Value(75)
            .ShowText(ShowText.None)
        )
        @(Html.C1().LinearGauge().Id("theLinearGauge")
            .Min(0).Max(100).Value(75)
            .ShowText(ShowText.None)
        )
        @(Html.C1().BulletGraph().Id("theBulletGraph")
            .Min(0).Max(100).Value(75)
            .Target(60).Bad(50).Good(70)
            .ShowText(ShowText.None)
        )
    </div>
</div>