docs(radial-gauge)

_contentTemplates/gauges/additional-customization.md

@@ -6,5 +6,12 @@ To further customize the elements of the linear gauge you can use nested tags. W
 * Pointers
 #end
 
+#radial-gauge-additional-customization
+To further customize the elements of the Radial Gauge you can use nested tags. When configuring nested properties and child elements in your Radial Gauge, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be `<RadialGauge*Category**Specifics*>` where the **Category** can be one of the following:
+
+* Scale
+* GaugeArea
+* Pointers
+#end
 
 

components/gauge-linear/overview.md

@@ -12,7 +12,7 @@ position: 0
 
 The Telerik Linear Gauge for Blazor represents [numerical values]({%slug linear-gauge-pointers%}) on a [scale]({%slug linear-gauge-scale%}) of ranges in a linear format.
 
-This article is separated in the following sections: 
+#### This article is separated in the following sections: 
 
 * [Basics](#basics)
 

components/gauge-linear/scale.md

@@ -10,7 +10,7 @@ position: 5
 
 ## Linear Gauge Scale
 
-The scale of the linear gauge renders the values, pointers and labels. You can customize it by adding an instance of the `<LinearGaugeScale>` to the `<LinearGaugeScale>` collection, child tag of the `<TelerikLinearGauge>`. The `<LinearGaugeScale>` exposes the following parameters:
+The scale of the linear gauge renders the values, pointers and labels. You can customize it by adding an instance of the `<LinearGaugeScale>` to the `<LinearGaugeScales>` collection, child tag of the `<TelerikLinearGauge>`. The `<LinearGaugeScale>` exposes the following parameters:
 
 * [Min and Max](#min-and-max)
 

components/gauge-radial/labels.md

@@ -0,0 +1,145 @@
+---
+title: Labels
+page_title: Labels
+description: Radial Gauge for Blazor - Labels.
+slug: radial-gauge-labels
+tags: telerik,blazor,radial,gauge,labels
+published: True
+position: 20
+---
+
+# Radial Gauge Labels
+
+You can customize the appearance of the labels rendered on the [scale]({%slug radial-gauge-scale%}) of the Radial Gauge by using the `<RadialGaugeScaleLabels>`, child tag of the `<RadialGaugeScale>`, and the parameters it exposes:
+
+* [Format](#format)
+
+* [Color](#color)
+
+* [Visible](#visible)
+
+* [Additional Customization](#additional-customization)
+
+## Format
+
+The `Format` (`string`) parameter allows you to customize the rendering of the labels by using the <a href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings" target="_blank">standard numeric format strings</a>. You can set the values of the labels to showcase, for example, currency, percentage, and so on.
+
+>caption Use the Format parameter to showcase currency. The result from the code snippet below.
+
+![Format parameter example](images/format-parameter-labels.png)
+
+````CSHTML
+@* Use the {0:C0} format string to format the values of the labels as currency. *@
+
+<TelerikRadialGauge>
+    <RadialGaugeScales>
+
+        <RadialGaugeScale>
+            <RadialGaugeScaleLabels Format="{0:C0}">
+            </RadialGaugeScaleLabels>
+        </RadialGaugeScale>
+
+    </RadialGaugeScales>
+
+    <RadialGaugePointers>
+
+        <RadialGaugePointer Value="30">
+        </RadialGaugePointer>
+
+    </RadialGaugePointers>
+</TelerikRadialGauge>
+````
+
+## Color
+
+The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.
+
+>caption Change the color of the labels. The result from the code snippet below.
+
+![Color parameter screenshot](images/color-parameter-labels.png)
+
+````CSHTML
+@* Change the color of the labels to blue *@
+
+<TelerikRadialGauge>
+    <RadialGaugeScales>
+        <RadialGaugeScale>
+            <RadialGaugeScaleLabels Color="blue">
+            </RadialGaugeScaleLabels>
+        </RadialGaugeScale>
+    </RadialGaugeScales>
+
+    <RadialGaugePointers>       
+
+        <RadialGaugePointer Value="30">
+        </RadialGaugePointer>
+
+    </RadialGaugePointers>
+</TelerikRadialGauge>
+````
+
+## Visible
+
+The `Visible` (`bool`) parameter controls wether the labels will be rendered.
+
+>caption Hide the labels by using the Visible parameter. The result from the code snippet below
+
+![Hide the labels](images/visible-parameter-labels.png)
+
+````CSHTML
+@* Set the Visible parameter to false to hide the labels *@
+
+<TelerikRadialGauge>
+    <RadialGaugeScales>
+        <RadialGaugeScale>
+            <RadialGaugeScaleLabels Visible="false">
+            </RadialGaugeScaleLabels>
+        </RadialGaugeScale>
+    </RadialGaugeScales>
+
+    <RadialGaugePointers>        
+
+        <RadialGaugePointer Value="30">
+        </RadialGaugePointer>
+
+    </RadialGaugePointers>
+</TelerikRadialGauge>
+````
+
+## Additional Customization
+
+@[template](/_contentTemplates/gauges/additional-customization.md#radial-gauge-additional-customization)
+
+>caption Customize the background and the margin of the Labels. The result from the code snippet below.
+
+![Custom Label background](images/labels-custom-background.png)
+
+````CSHTML
+@* Provide background color and margin to the labels *@
+
+<TelerikRadialGauge>
+    <RadialGaugeScales>
+
+        <RadialGaugeScale>
+            <RadialGaugeScaleLabels Background="yellow">
+                <RadialGaugeScaleLabels Margin Top="10" Bottom="10" Left="10" Right="10"></RadialGaugeScaleLabelsMargin>
+            </RadialGaugeScaleLabels>
+        </RadialGaugeScale>
+    </RadialGaugeScales>
+
+    <RadialGaugePointers>
+
+        <RadialGaugePointer Value="30">
+        </RadialGaugePointer>
+
+    </RadialGaugePointers>
+</TelerikRadialGauge>
+````
+
+## See Also
+
+* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge)
+* [Radial Gauge: Overview]({%slug radial-gauge-overview%})
+* [Radial Gauge: Scale]({%slug radial-gauge-scale%})
+* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%})
+* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%})

components/gauge-radial/overview.md

@@ -1,147 +1,113 @@
 ---
 title: Overview
-page_title: Chart Overview
-description: Overview of the Chart for Blazor.
+page_title: Radial Gauge Overview
+description: Overview of the Radial Gauge for Blazor.
 slug: radial-gauge-overview
-tags: telerik,blazor,chart,overview
+tags: telerik,blazor,radial,gauge,overview
 published: True
 position: 0
 ---
 
-# Chart Overview
+# Radial Gauge Overview
 
-The <a href="https://www.telerik.com/blazor-ui/chart" target="_blank">Blazor Chart component</a> allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates.
+The Telerik Radial Gauge for Blazor represents numerical values on a [scale]({%slug radial-gauge-scale%}) of ranges in a radial format.
 
-#### To use a Telerik chart for Blazor, add the `TelerikChart` tag.
+#### This article is separated in the following sections: 
 
->caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings
+* [Basics](#basics)
 
-````CSHTML
-Basic chart and common settings/elements
-
-<TelerikChart>
-	<ChartSeriesItems>
-		<ChartSeries Type="ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@simpleData">
-		</ChartSeries>
-		<ChartSeries Type="ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
-			<ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
-		</ChartSeries>
-	</ChartSeriesItems>
+* [Features](#features)
 
-	<ChartValueAxes>
-		<ChartValueAxis Color="red"></ChartValueAxis>
-	</ChartValueAxes>
+* [Methods](#methods)
 
-	<ChartCategoryAxes>
-		<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
-	</ChartCategoryAxes>
+## Basics
 
-	<ChartTitle Text="Quarterly sales trend"></ChartTitle>
+>caption To add a Telerik Radial Gauge for Blazor to your application:
 
-	<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
-	</ChartLegend>
-</TelerikChart>
+1. Add the `<TelerikRadialGauge>` tag.
 
-@code {
-	public class MyDataModel
-	{
-		public int SecondSeriesValue { get; set; }
-		public string ExtraData { get; set; }
+1. Add one or more instances of the `<RadialGaugePointer>` to the `<RadialGaugePointers>` collection.
 
-	}
+1. Provide a `Value` for each `<RadialGaugePointer>`.
 
-	public List<MyDataModel> modelData = new List<MyDataModel>()
-    {
-		new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
-		new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
-		new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
-		new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
-	};
+>caption Basic Telerik Radial Gauge for Blazor.
 
-	public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };
+![Basic Radial Gauge](images/basic-radial-gauge.png)
 
-	public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
-}
+````CSHTML
+@* Setup a basic radial gauge *@
+
+<TelerikRadialGauge>
+    <RadialGaugePointers>
+        <RadialGaugePointer Value="20">            
+        </RadialGaugePointer>        
+    </RadialGaugePointers>    
+</TelerikRadialGauge>
 ````
 
->caption The result from the code snippet above
-
-![](images/overview-chart.png)
-
+## Features
 
+The Telerik Radial Gauge for Blazor exposes the following features:
 
-@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
+#### Radial Gauge Size
 
->caption Component namespace and reference
+* `Width` - `string` - controls the width of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article.
 
-````CSHTML
-@using Telerik.Blazor.Components
+* `Height` - `string` - controls the height of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article.
 
-<TelerikChart @ref="myChartRef">
-</TelerikChart>
+You can also set the Gauge size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the gauge's `Refresh()` C# [method](#methods) after the DOM has been redrawn and the new container dimensions are rendered.
 
-@code {
-	Telerik.Blazor.Components.TelerikChart myChartRef;
-}
-````
+#### Other Features
 
-## Chart Size
+* `Class` - renders a custom CSS class on the topmost wrapping element of the component. You can use that class to reposition the component on the page.
 
-To control the chart size, use its `Width` and `Height` properties. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article.
+* [Scale]({%slug radial-gauge-scale%}) - The scale of the radial gauge renders the values of the [pointers]({%slug radial-gauge-pointers%}), different [ranges]({%slug radial-gauge-ranges%}) and [labels]({%slug radial-gauge-labels%}). 
 
-You can also set the chart size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample.
+* [Ranges]({%slug radial-gauge-ranges%}) - The ranges are used to visually distinguish particular values on the scale.
 
+* [Labels]({%slug radial-gauge-labels%}) - The labels are rendered on the scale of the component to give information to the users.
 
->caption Change the 100% chart size dynamically to have a responsive chart
+* [Pointers]({%slug radial-gauge-pointers%}) - The pointers indicate the values on the scale of the component. 
 
-````CSHTML
-You can make a responsive chart
+## Methods
 
-<TelerikButton OnClick="@ResizeChart">Resize the container and redraw the chart</TelerikButton>
+The Radial Gauge reference exposes the `Refresh` method which allows you to programatically re-render the component. 
 
-<div style="border: 1px solid red;width:@ContainerWidth; height: @ContainerHeight">
+>caption Get a component reference and use the Refresh method
 
-    <TelerikChart Width ="100%" Height="100%" @ref="theChart">
+````CSHTML
+@* Change the Height of the component *@
 
-        <ChartSeriesItems>
-            <ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@someData">
-            </ChartSeries>
-        </ChartSeriesItems>
-        <ChartCategoryAxes>
-            <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
-        </ChartCategoryAxes>
-        <ChartTitle Text="Quarterly sales trend"></ChartTitle>
+<TelerikButton OnClick="@ChangeHeight">Change the height</TelerikButton>
 
-    </TelerikChart>
+<TelerikRadialGauge @ref="@RadialGaugeRef" Height="@Height">
+    <RadialGaugePointers>
+        <RadialGaugePointer Value="20">
+        </RadialGaugePointer>
+    </RadialGaugePointers>
+</TelerikRadialGauge>
 
-</div>
+@code{
+    Telerik.Blazor.Components.TelerikRadialGauge RadialGaugeRef { get; set; }
 
-@code {
-    string ContainerWidth { get; set; } = "400px";
-    string ContainerHeight { get; set; } = "300px";
-    Telerik.Blazor.Components.TelerikChart theChart { get; set; }
+    public string Height { get; set; } = "200px";
 
-    async Task ResizeChart()
+    async Task ChangeHeight()
     {
-        //resize the container
-        ContainerHeight = "500px";
-        ContainerWidth = "800px";
+        Height = "400px";
 
-        //give time to the framework and browser to resize the actual DOM so the chart can use the expected size
-        await Task.Delay(20);
+        //give time to the framework and browser to resize the actual DOM so the gauge can use the expected size
+        await Task.Delay(30);
 
-        //redraw the chart
-        theChart.Refresh();
+        RadialGaugeRef.Refresh();
     }
-
-    public List<object> someData = new List<object>() { 10, 2, 7, 5 };
-
-    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
 }
 ````
 
 ## See Also
 
-  * [Data Binding]({%slug components/chart/databind%})
-  * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index)
-  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart)
+* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge)
+* [Radial Gauge: Scale]({%slug radial-gauge-scale%})
+* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%})
+* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%})
+* [Radial Gauge: Labels]({%slug radial-gauge-labels%})