config(EJ2-28249): circular gauge sample added

Author: Balamurugan P

ej2-blazor-samples/Pages/CircularGauge/CircularGauge/Customization.razor

@@ -27,60 +27,50 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsCircularGauge id="circular" >
+    <EjsCircularGauge ID="gauge" >
         <CircularGaugeAxes>
-            <CircularGaugeAxis StartAngle="300" EndAngle="60" Minimum="999" Maximum="2000" Radius="80%"
-                               Annotations="@annotations" LineStyle="@lineStyle" LabelStyle="@labelStyle" 
-                               MajorTicks="@majorTicks" MinorTicks="@minorTicks" Ranges="@ranges" Pointers="@pointers">
-            </CircularGaugeAxis>
+            <CircularGaugeAxis StartAngle="300" EndAngle="60" Minimum="999" Maximum="2000" Radius="80%"  >  
+                    <CircularGaugeAxisLineStyle Width="0.01">
+                        </CircularGaugeAxisLineStyle>          
+                        <CircularGaugeAxisMajorTicks Width="0.01">
+                        </CircularGaugeAxisMajorTicks>
+                        <CircularGaugeAxisMinorTicks Width="0.01">
+                        </CircularGaugeAxisMinorTicks>
+                        <CircularGaugeLabel Font="@Font">
+                    </CircularGaugeLabel>
+                    <CircularGaugePointers>
+                            <CircularGaugePointer  Type="PointerType.RangeBar" Value=1800 Radius="90%" Color="#FFDD00" PointerWidth="30">                
+                                <CircularGaugeAnimation Enable="false" Duration="0" >
+                                </CircularGaugeAnimation>
+                            </CircularGaugePointer>
+                            <CircularGaugePointer  Value=1800 Radius="90%" Color="#424242" PointerWidth="9">                
+                                <CircularGaugeAnimation Enable="false" Duration="0" >
+                                </CircularGaugeAnimation>
+                                <CircularGaugeCap Radius="10" Color="#424242">
+                                    <CircularGaugeCapBorder Width="0">
+                                    </CircularGaugeCapBorder>
+                                </CircularGaugeCap>
+                            </CircularGaugePointer>
+                            <CircularGaugeRanges>
+                                <CircularGaugeRange  Start="1000" End="2000" Radius="90%" StartWidth="30" EndWidth="30" Color="#E0E0E0">
+                                </CircularGaugeRange>
+                            </CircularGaugeRanges>
+                    </CircularGaugePointers>
+                    <CircularGaugeAnnotations>
+                        <CircularGaugeAnnotation content="<div style='color:#666666;font-size:35px;'>1800</div>" Angle="0" Radius="110%" ZIndex="1">
+                        </CircularGaugeAnnotation>
+                    </CircularGaugeAnnotations>
+                </CircularGaugeAxis>
         </CircularGaugeAxes>
-    </EjsCircularGauge>
+</EjsCircularGauge>
 </div>
 
 @code {
-
-public object annotations = new List<object> {
-    new
-    { 
-        content = "<div style='color:#666666;font-size:35px;'>1800</div>",
-        angle = "0",
-        radius = "110%",
-        zIndex = 1 
-    }
-};
-public object lineStyle = new { width = "0" };
-public object labelStyle = new { font = new { size = "0px" } };
-public object majorTicks = new { width = "0" };
-public object minorTicks = new { width = "0" };
-public object ranges = new List<object> {
-    new
-    {
-        start = 1000,
-        end = 2000,
-        radius = "90%",
-        startWidth = 30,
-        endWidth = 30,
-        color = "#E0E0E0"
-    }
-};
-public object pointers  = new List<object> {
-    new
-    {
-        type = "RangeBar",
-        value = 1800,
-        radius = "90%",
-        color = "#FFDD00",
-        animation = new { enable = false, duration = "0" },
-        pointerWidth = 30
-    },
-    new
-    {
-        value = 1800,
-        radius = "90%",
-        color = "#424242",
-        animation = new { enable = false, duration = "0" },
-        pointerWidth = 9,
-        cap = new { radius = 10, color = "#424242", border = new { width = "0" } }
-    }
-};
+    public class font
+    {
+        public String size { get; set; }
+    }
+    public font Font = new font{
+        size = "0px"
+    };
 }