From d840d05ccff71bc27000bf681c3eb5c4d097ebea Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 12 Mar 2021 17:33:34 +0200 Subject: [PATCH 01/21] feat(linear-gauge): initial commit --- .../gauges/additional-customization.md | 10 + components/gauge-arc/overview.md | 147 ++++++++++++++ components/gauge-circular/overview.md | 147 ++++++++++++++ .../images/basic-linear-gauge.png | Bin 0 -> 1852 bytes .../images/horizontal-linear-gauge.png | Bin 0 -> 1917 bytes .../images/min-and-max-linear-gauge.png | Bin 0 -> 2084 bytes .../minor-and-major-units-linear-gauge.png | Bin 0 -> 1114 bytes .../images/mirror-linear-gauge.png | Bin 0 -> 1746 bytes .../remove-minorunit-ticks-linear-gauge.png | Bin 0 -> 1018 bytes .../images/reverse-linear-gauge.png | Bin 0 -> 1482 bytes components/gauge-linear/overview.md | 91 +++++++++ components/gauge-linear/pointers.md | 86 ++++++++ components/gauge-linear/scale.md | 190 ++++++++++++++++++ components/gauge-radial/overview.md | 147 ++++++++++++++ 14 files changed, 818 insertions(+) create mode 100644 _contentTemplates/gauges/additional-customization.md create mode 100644 components/gauge-arc/overview.md create mode 100644 components/gauge-circular/overview.md create mode 100644 components/gauge-linear/images/basic-linear-gauge.png create mode 100644 components/gauge-linear/images/horizontal-linear-gauge.png create mode 100644 components/gauge-linear/images/min-and-max-linear-gauge.png create mode 100644 components/gauge-linear/images/minor-and-major-units-linear-gauge.png create mode 100644 components/gauge-linear/images/mirror-linear-gauge.png create mode 100644 components/gauge-linear/images/remove-minorunit-ticks-linear-gauge.png create mode 100644 components/gauge-linear/images/reverse-linear-gauge.png create mode 100644 components/gauge-linear/overview.md create mode 100644 components/gauge-linear/pointers.md create mode 100644 components/gauge-linear/scale.md create mode 100644 components/gauge-radial/overview.md diff --git a/_contentTemplates/gauges/additional-customization.md b/_contentTemplates/gauges/additional-customization.md new file mode 100644 index 0000000000..56440d89b9 --- /dev/null +++ b/_contentTemplates/gauges/additional-customization.md @@ -0,0 +1,10 @@ +#linear-gauge-additional-customization +When configuring nested properties and child elements in your Linear 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 `` where the **Category** can be one of the following: + +* Scale +* GaugeArea +* Pointers +#end + + + diff --git a/components/gauge-arc/overview.md b/components/gauge-arc/overview.md new file mode 100644 index 0000000000..d69b7e4136 --- /dev/null +++ b/components/gauge-arc/overview.md @@ -0,0 +1,147 @@ +--- +title: Overview +page_title: Chart Overview +description: Overview of the Chart for Blazor. +slug: components/chart/overview +tags: telerik,blazor,chart,overview +published: True +position: 0 +--- + +# Chart Overview + +The Blazor Chart component 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. + +#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. + +>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings + +````CSHTML +Basic chart and common settings/elements + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + + } + + public List modelData = new List() + { + new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, + new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, + new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" }, + new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" }, + }; + + public List simpleData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +>caption The result from the code snippet above + +![](images/overview-chart.png) + + + +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) + +>caption Component namespace and reference + +````CSHTML +@using Telerik.Blazor.Components + + + + +@code { + Telerik.Blazor.Components.TelerikChart myChartRef; +} +```` + +## Chart Size + +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. + +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. + + +>caption Change the 100% chart size dynamically to have a responsive chart + +````CSHTML +You can make a responsive chart + +Resize the container and redraw the chart + +
+ + + + + + + + + + + + + + +
+ +@code { + string ContainerWidth { get; set; } = "400px"; + string ContainerHeight { get; set; } = "300px"; + Telerik.Blazor.Components.TelerikChart theChart { get; set; } + + async Task ResizeChart() + { + //resize the container + ContainerHeight = "500px"; + ContainerWidth = "800px"; + + //give time to the framework and browser to resize the actual DOM so the chart can use the expected size + await Task.Delay(20); + + //redraw the chart + theChart.Refresh(); + } + + public List someData = new List() { 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) diff --git a/components/gauge-circular/overview.md b/components/gauge-circular/overview.md new file mode 100644 index 0000000000..d69b7e4136 --- /dev/null +++ b/components/gauge-circular/overview.md @@ -0,0 +1,147 @@ +--- +title: Overview +page_title: Chart Overview +description: Overview of the Chart for Blazor. +slug: components/chart/overview +tags: telerik,blazor,chart,overview +published: True +position: 0 +--- + +# Chart Overview + +The Blazor Chart component 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. + +#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. + +>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings + +````CSHTML +Basic chart and common settings/elements + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + + } + + public List modelData = new List() + { + new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, + new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, + new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" }, + new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" }, + }; + + public List simpleData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +>caption The result from the code snippet above + +![](images/overview-chart.png) + + + +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) + +>caption Component namespace and reference + +````CSHTML +@using Telerik.Blazor.Components + + + + +@code { + Telerik.Blazor.Components.TelerikChart myChartRef; +} +```` + +## Chart Size + +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. + +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. + + +>caption Change the 100% chart size dynamically to have a responsive chart + +````CSHTML +You can make a responsive chart + +Resize the container and redraw the chart + +
+ + + + + + + + + + + + + + +
+ +@code { + string ContainerWidth { get; set; } = "400px"; + string ContainerHeight { get; set; } = "300px"; + Telerik.Blazor.Components.TelerikChart theChart { get; set; } + + async Task ResizeChart() + { + //resize the container + ContainerHeight = "500px"; + ContainerWidth = "800px"; + + //give time to the framework and browser to resize the actual DOM so the chart can use the expected size + await Task.Delay(20); + + //redraw the chart + theChart.Refresh(); + } + + public List someData = new List() { 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) diff --git a/components/gauge-linear/images/basic-linear-gauge.png b/components/gauge-linear/images/basic-linear-gauge.png new file mode 100644 index 0000000000000000000000000000000000000000..8c5dc167fdd8bb2bcc3b75758737c4bdfa2edf5a GIT binary patch literal 1852 zcmV-C2gCS@P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D2GL1GK~#8N?VR09 zD@PQ-`)9WFQS6J~U-biT1O+eVK_A2*C>7McXrI)ysMToDLeW?$UbrIkK~Nv+gMA3a zhbBFUlpCYBvNblYj9J!PyU> zVIo+GXw=Ewc&9|4tec4Ax}j;*t^CgBg~byH#z$`T`1tr)nR2;|KZ`+>yz;3Vs>Ldj zRiRM8pT(ekE3XqKpI4Wcmv|Hdb*q*F$&Z1Wt%CQfU{8yDzxs{j@bD0?i$QxmFcuY( zi;D}qE(QjyXtei0EpWAhcJIsKnpZTg2TE~P2?6ac%5ixm#aSi9%gf7Oa?Z}q@VXcn zu!5$4l5=``ir2-!^*}9fwYs{x`d!Y^(Ggx30|Qp?@9+Q0aZe&roK-?VyMK}6W=v9? zl@=K1RY8u+D=E$@Azoi!pX8jMpW}5gFkp3mfB&bPlamv?E(Wd#YQdOQb5SR9P2~3W z_FB&I@iAT(gXmVGc-63Kr+!r~m;aGdEEe&)7(}&#$mDXq0Q*{_00IJ$@x!847mkE> zD`>ZuJie7$4Idf`^B{HbXE9K>f)v6=TNEqN=w^hN6?s)7Fx**C!>`jU5cz%u?fzAc z=DgB`u~?-FSF5+Tx4-2WnOh{l-QC?EatzG_Q^w_$6xRb2!p_lx#^se116I&(oE^2o z&6uP(D=je2EAK&G3SJij7b`7rwd%lsITN5G|B+4^mse5@SlL;Xv$KLqBn=wgoR(`Q3SkZ}GJ)qHSg{#Y2hJ$dRuA;tgqT{a=wjqM{eDI4RDuU# z+^M9`Dj|qnWyN91xZD(hvPo5S5N?5qf~*{p?m#n_720SF^I?f_(GMeNr6`0-=0wp){(6@i_3 zH9tSk)e71T)1sD4OiaMHxX8sSjI&A~-g$*@QwcFSIqC9BinB@x;w@9Nv$I_17Q`FD zrl+U5&I1WtUQu*b4}_7OYY!ww3wXY=@JR&5Ktnw+ShEt8a^FR(9uOF^!pca)s#fWF zf}=<~)^UOqVtjmD`;1A{-7@)`V642V+;c@7CQ+3$*#l=9t*`Y)Ps%%vTkY-)t6F@L zvw|@Yt@eKU(hANfqa#+(Q1SS#!06~Ge2d@w_(MR+`@k7x;#nn~SAMLFTD3C<5_E_a z5cz&Z{L48tHHC8v-Bz(7{*fLV8^d`ZJ1YWszB1GU(*)-1T&;+z9E|K(m1Ac`R8V0a zh!s?JRs@WDAOXaRs}-~x7mb7%8X7V*V@eaou_A!Gu(Oh4Ca-XjV~Bx)0SoiW&K@{2 zGQ!o0SO^YQxbmBw6|rc4aBvV;>9eyU7#<$BFs~R}5j&Nj2jWg8c2>l$GO)s3W$dg7 z?93~evvakAb{8e|_4QdeV`3aD0z0i>3}l>F_~M5UJv}`Z<`v^u5p;@`DDVg(R2hl4 z;eeI-Cz0AK&7UgKN^Ipfuhh@H)*-=HZq-H z6^svMMZB)<3;O%}3$?emb$+bWt$=d5EPewH-}g0rbXg^zS4k1es=YB#1F@`tHtts% qh-=lEI4eFlD?T_YKG~pvP literal 0 HcmV?d00001 diff --git a/components/gauge-linear/images/horizontal-linear-gauge.png b/components/gauge-linear/images/horizontal-linear-gauge.png new file mode 100644 index 0000000000000000000000000000000000000000..5f88da280850d373e4d5bafb82c378692368d05f GIT binary patch literal 1917 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 L)z4*}Q$iB}Y<%uB literal 0 HcmV?d00001 diff --git a/components/gauge-linear/images/mirror-linear-gauge.png b/components/gauge-linear/images/mirror-linear-gauge.png new file mode 100644 index 0000000000000000000000000000000000000000..3651282e84a7698dff978eb660398a2a8c078584 GIT binary patch literal 1746 zcmV;@1}*uCP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D24_h`K~#8N?VZm{ zBS{p1_s`sAkK&wWt_upro1hm@h6v(8SrFXQhU{wG{3I?cPFz_W7!md$7!T{gIfTW- zPWDyR>!g$Jm$WZcmFiS|X1VDQJw6S z3+hbqTAi590v&pljYLPUi_rNl96VJDtA)ywIy-{}I&_PPUW!2|2?b?XDEH*?3>N1g ze(8vf%HvmY4x($=ZxLzeGXsu8zu*6ynTLl5{MrP=u#rEx?C#iaZ`PsFXkZ63Ksv;^ zF20jK_Qv7z@)D190S+4#=)1jq(BjZ5Z;p3YUR$kQm(I`6f1e7rn}vuLMX4)OT43q^ z(CKu(P6gZ9!i{{G4__T1AIdcL4MQxsfyepKrV07L!B>Z7v-vm8(^Ixtjy^aJ^?Lmi z4QOCHTZDXY1CB$rTK$9O>go#H*@EK$bMJp?USD6aoh?E>xBVey8c9n49;ObC}QJawJ!P_&6^G54(ie*F?)Z| zJPvc?s{`Dp|Dkz#dBJwJ;5fj1=}(&5+gogBi;xd);A<=`Lr#Z$&=1E!^IT(YLM*v~ z$N4aYkPjSub2I{nsVJLD${^(RD?%e;Uwze;^!kwTFXn(4PRN8{K#5eNs!2Yd+yf%>*JLO!?w$DuLxojI9alA{%0 z9YQ|nhvTpe*VbjY$Ax^*4>KQdo}Gq$!w^eu;Bh|SI!qcNA2|5xplQumR2UHZ>)u+{ z?tA6Us6?X5C5GPhNH}PZrC}{AXLX=B!#a?Gdfde?gVpax4sZ--wAU0>{FthXLXTIz z8#%zSbkJDal>(!x>M;OQlqYlGMP#pc&CBgyb8u)xk8W{~I_q@vM z5}^D3V00Yx5ggornGf>m!*uK$hFEd~jzg}Vl_nf=^~^fq5b{Ak9EV)(r6C;JdD_!N zID~xA561!K8dI=u7-Go{JkAH)cb`Vc2M)eEzN*a5z0ZRZU!g;{Y>=-Q8U*sV4wK^=)hTIu77)e0;2$xPY$? zkPlm1TlmOTg52c8GQ`rs!GUVx0vv}h|_FK7*UUvHzQs zaDZ6a+uKu3T)+AR)iZs->XQ5ts3J0oOBKKOdSX?ZLLBM@kqUI3oX=1QA zhwI{~-_d(Rd2k#WjRwp$@D(|;pkARP-WzJk;fD`nAL-EV_pyT+AYTJyX&j7VDId&Y o=elGX8~2Bt5FFef{|a~60+7BevL9R^{>3CUu3#TRC;{v8UvZ>HVzuT2%UX)~DQ3@9pl+S6;W-CDq3KE?zITY0^&Z zTj%e-E!%!i)HPA=^XmHdx1@I6f5lcf{q)kxGy3s)Tjd|Uzx%Z+cio>?kIPOyn$NRw z$Ge@c|6Nd?zx(5k#V#OsP3-Q8NqM5AEH1h8#0gh76rsqPylS&qKUjj=cf04E`W)+f z&FK7Eox3l0s(EW()w( zw|k?X%P_5+&l44W%-mjaqO=gEEeMPEMy;DWb64|47x$_%nYHo$hC7NSW>`6YE|ze= zebu-8M!u2t)tcwW--n)hSn%WZ-K?#b()0dLG2b68zw`3c<7q1{Xnl*m`}+0k_1~=}l-8p&tGvRZkDP@X@>W35Z)|$-RyL#qbnV)xh56G(G z4+)?f9~G81WqZ{#X|74Tm7{)M^L%;ku0=QE9YrTs&zbjo?`#e&tLu3T=gsYx@A3Ni zbMKse+hcZ4vyQbrAG-SP;=0wx`dU{r=>A`RB64q^I&)G0JQ6s$m z+S*x*!>7k|SHI(nyE{<{TWlbOQ_(u>%U8{Qwx_sPrSVlhxyF3idZ$-Tg4W9emb3Hk zUR`_a;&1l7J~=XXzf>HUpRbi$D*HZ^t0j89M$_-Nuano^d8zg9Ro8((NhbTh%+#MR zoBeg7b!=-vVYT?-*10?q>sl{H1h#8%0b^*sUex@9 zF(>Zv>Na#+NIG#p@Va>Z?uA1;^yOgbq;Tp}`|}U4Pe0A3vlf_N89ZJ6T-G@yGywqm CCiIN} literal 0 HcmV?d00001 diff --git a/components/gauge-linear/images/reverse-linear-gauge.png b/components/gauge-linear/images/reverse-linear-gauge.png new file mode 100644 index 0000000000000000000000000000000000000000..7041694be8aae2afae4f534d8c0ba14733edd6eb GIT binary patch literal 1482 zcmV;*1vUDKP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1z$--K~#8N?VYi1 z6G0F_`AiUHWGZOsV*cWkijIy7%b+AAPEdk`f=z@HDQPGo#V$w@3JaycX6A0}v*X>( z?A@$22lHf!<8)S@X2!R^*}+NG$ty|zbM+@YUQ-MBRaEAxT3>OyS3T9o=m5M ztkuf;bb5VoMIoH+&JaA|5KRa9*)_rx9dHAIut=<)F}{v#`z;!~eQ6sT|?{TyU_dmAqj z7p=e~$kEXeUZg=ZOsdq2qev7~I(`(@Xc$YqG`ec^lOL;5X%vZ$Mx!5o4h|0RA`PNo zbM9wAR5MMG@g@_lP`XDc6RV04Wf5lWW|!F*KRrGD z>SuR%7cZ(SI_kDjYA#wdny=vq`;S|!4(WJ2{^bXrnDL@oqS&o%cL(4)7wuWjs9s`{9bI<%(U|KAVXc5JSMB#74z{m&R)0l|9dpq5DvLN~d&#b@}O;@A4@9&Gk znHBh=RX+7$5{UxQ_fb&!=!a@lKr}IO5lxID(c9bGpMGd$(ja8jS~3X!6U24WZIVh+<=rSXg%*-6RWBU$mdin|Ng_v`X6%RA>=_3)vc- zFJ{-=$OYzI@N}(l3DF@M6`L4%lMUhZL-(NNM72e+D9c*pMKru3>mIZ~3$$8KOHnwE z5yjG+?YSsOR-+f^(-#}1C>+C?6`Z2ZZ7azp8>)+9W|x@VN~7_*MWW$7 z*S%tswTX&hH5w1yhdd~{JvHWrAI54l9#EmLbS`WNmBvKl0Tp^Qc40Ltjf7~~(5tm{ zICYb3*xjUt^04!2rd6ds3O3YYbRpVyEIQ(Nq_N{%Qbv^5!;eBr6x;X!wVQdfB2^|E z3eo4YSG9;1y6DP_XqD+3&^rCP^r|E}pLj@Cqdc6Vxl<9aGI+^mMR<53ihe|$*=10n z30fC4gz|VW^$C%P=vpw*ct9mz=HkX`R2oI1tR-(e(u%Sc5%RFqGf*VTS~|=ltte|T zHV;cZ14W{s0^?)=x{iTGl!1xH11hv_&4tydG>Sx78(4Xy6=iJ+=3%L4ph&basc+1O zDU4+5`&-Wz8h2^7VDJcv4stOPtN@!;cw@U7+mOW3|ykQqm5}m zG^V8!Ml$tDQ6$=!Ms8zT<6*2u;{g?#{Bluy2wfMJdTDgkC@mszVKpj^B2m_lOYlf5 z%KEtu9+r9ribPqQ!G5Y9L0mF k*Mf;kW1`YDM07g+3qfp$8BteEPyhe`07*qoM6N<$f*doaEdT%j literal 0 HcmV?d00001 diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md new file mode 100644 index 0000000000..49e18c076f --- /dev/null +++ b/components/gauge-linear/overview.md @@ -0,0 +1,91 @@ +--- +title: Linear Gauge Overview +page_title: Linear Gauge Overview +description: Overview of the Linear Gauge for Blazor. +slug: linear-gauge-overview +tags: telerik,blazor,linear,gauge,overview +published: True +position: 0 +--- + +# Linear Gauge Overview + + + +This article is separated in the following sections: + +* [Basics](#basics) + +* [Features](#features) + +* [Linear Gauge Scale](#linear-gauge-scale) + +* [Linear Gauge Pointer](#linear-gauce-pointer) + +* [Methods](#methods) + +## Basics + +>caption To add a Telerik Linear Gauge for Blazor to your application: + +1. Add the `` tag. +1. Add one or more instance of the `` to the `` collection. +1. Provide a `Value` for each ``. + +>caption Basic Telerik Linear Gauge for Blazor. + +![Basic Linear Gauge](images/basic-linear-gauge.png) + +````CSHTML +@* Setup a basic linear gauge *@ + + + + + + + + + + +```` + +## Features + +The Telerik Linear Gauge for Blazor exposes the following features: + +* `Width` - `string` - controls the width of the component. + +* `Height` - `string` - controls the height of the component. + +* `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. + +* Scale - See the [Scale]({%slug linear-gauge-scale%}) for more information on how to customize the scale of the component. + +* Pointers - See the [Pointers]({%slug linear-gauge-pointers%}) for more information on how to customize the pointers of the component. + +## Linear Gauge Scale + +You can customize the scale of the component by using the `` child tag of the `` and the parameters it exposes: + +* `Max` - `double` - the maximum value rendered in the gauge scale. + +* `Min` - `double` - the minimum value rendered in the gauge scale. + +* `MajorUnit` - `double` - the interval between the major unit divisions. + +* `MinorUnit` - `double` - the interval between the minor unit divisions. + +* `Mirror` - `bool` - renders the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale. + +* `Reverse` - `bool` - renders the scale so that the values increase from top to bottom. + +## Linear Gauge Pointer + +The linear gauge pointers are the main building blocks of the component. They represent the value points in the [scale](#linear-gauge-scale) of the component. + + +## See Also + +* [Linear Gauge: Scale]({%slug linear-gauge-scale%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) \ No newline at end of file diff --git a/components/gauge-linear/pointers.md b/components/gauge-linear/pointers.md new file mode 100644 index 0000000000..1a61f4dae9 --- /dev/null +++ b/components/gauge-linear/pointers.md @@ -0,0 +1,86 @@ +--- +title: Linear Gauge Overview +page_title: Linear Gauge Overview +description: Overview of the Linear Gauge for Blazor. +slug: linear-gauge-overview +tags: telerik,blazor,linear,gauge,overview +published: True +position: 0 +--- + +# Linear Gauge Overview + + + +This article is separated in the following sections: + +* [Basics](#basics) + +* [Features](#features) + +* [Linear Gauge Scale](#linear-gauge-scale) + +* [Linear Gauge Pointer](#linear-gauce-pointer) + +* [Methods](#methods) + +## Basics + +>caption To add a Telerik Linear Gauge for Blazor to your application: + +1. Add the `` tag. +1. Add one or more instance of the `` to the `` collection. +1. Provide a `Value` for each ``. + +>caption Basic Telerik Linear Gauge for Blazor. + +![Basic Linear Gauge](images/basic-linear-gauge.png) + +````CSHTML +@* Setup a basic linear gauge *@ + + + + + + + + + + +```` + +## Features + +The Telerik Linear Gauge for Blazor exposes the following features: + +* `Width` - `string` - controls the width of the component. + +* `Height` - `string` - controls the height of the component. + +* `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. + +* Customization - See the [Customization]({%slug linear-gauge-customization%}) article for more information. + +## Linear Gauge Scale + +You can customize the scale of the component by using the `` child tag of the `` and the parameters it exposes: + +* `Max` - `double` - the maximum value rendered in the gauge scale. + +* `Min` - `double` - the minimum value rendered in the gauge scale. + +* `MajorUnit` - `double` - the interval between the major unit divisions. + +* `MinorUnit` - `double` - the interval between the minor unit divisions. + +* `Mirror` - `bool` - renders the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale. + +* `Reverse` - `bool` - renders the scale so that the values increase from top to bottom. + + +## 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) diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md new file mode 100644 index 0000000000..18887b3b6d --- /dev/null +++ b/components/gauge-linear/scale.md @@ -0,0 +1,190 @@ +--- +title: Linear Gauge - Scale +page_title: Linear Gauge - Scale +description: Linear Gauge for Blazor - Scale. +slug: linear-gauge-scale +tags: telerik,blazor,linear,gauge,scale +published: True +position: 5 +--- + +## Linear Gauge Scale + +You can customize the scale of the component by using the `` child tag of the `` and the parameters it exposes: + +* [Min and Max](#min-and-max) + +* [MinorUnit and MajorUnit](#minorunit-and-majorunit) + +* [Mirror](#mirror) + +* [Reverse](#reverse) + +* [Vertical](#vertical) + +* [Additional Customization](#additional-customization) + + * [Example: Remove the MinorUnit ticks](#example:-remove-the-minorunit-ticks) + + +## Min and Max + +* The `Max` (`double`) parameter controls the maximum value that the component can reach. + +* The `Min` (`double`) parameter controls the lowest value of the component. + +>caption Change the lowest and the highest values for the scale. The result from the code snippet below. + +![Min and max parameters example](images/min-and-max-linear-gauge.png) + +````CSHTML +@* Use the Min and Max parameters to change the lowest and highest values for the scale *@ + + + + + + + + + + + + + + + + +```` + +## MinorUnit and MajorUnit + +* The `MajorUnit` (`double`) parameter controls the interval between the major unit divisions of the component. + +* The `MinorUnit` (`double`) parameter controls the interval between the minor unit divisions of the component. + +>caption Change the rendering frequency of the minor and major unit divisions. The result from the code snippet below. + +![Minor and major units parameters](images/minor-and-major-units-linear-gauge.png) + +## Mirror + +If you set the `Mirror` (`bool`) parameter to `true` the scale will render the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale. + +>caption Render the labels and the ticks of the scale to the right. The result from the code snippet below + +![Mirror the linear gauge](images/mirror-linear-gauge.png) + +````CSHTML +@* Set the Mirror parameter to true *@ + + + + + + + + + + + + + + + + +```` + +## Reverse + +If you set the `Reverse` (`bool`) parameter to `true` the values of the scale will increase from top to bottom. By default they will raise from the bottom to the top. + +>caption Reverse the scale of the component. The result from the code snippet below. + +![reverse parameter example](images/reverse-linear-gauge.png) + +````CSHTML +@* Set the Reverse parameter to true *@ + + + + + + + + + + + + + + + + +```` + +## Vertical + +The `Vertical` (`bool`) parameter controls the orientation of the linear gauge. By default its value is `true`, but you can set to `false` so that the component renders horizontally. + +>caption Change the orientation of the Linear Gauge. The result from the code snippet below. + +![horizontal component](images/horizontal-linear-gauge.png) + +````CSHTML +@* Use the Vertical parameter to change the orientation of the scale *@ + + + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#linear-gauge-additional-customization) + +### Example: Remove the MinorUnit ticks + +You can remove the MinorUnit ticks from the rendering of the scale by using the `` nested tag and its `Visible` parameter. + +>caption Remove the MinorUnit ticks. The result from the code snippet below. + +![Remove the MinorUnit ticks](images/remove-minorunit-ticks-linear-gauge.png) + +````CSHMTL +@* Remove the MinorUnit ticks. *@ + + + + + + + + + + + + + + + + + + +```` + +## See Also + + * [Linear Gauge: Overview]({%slug linear-gauge-overview%}) diff --git a/components/gauge-radial/overview.md b/components/gauge-radial/overview.md new file mode 100644 index 0000000000..d69b7e4136 --- /dev/null +++ b/components/gauge-radial/overview.md @@ -0,0 +1,147 @@ +--- +title: Overview +page_title: Chart Overview +description: Overview of the Chart for Blazor. +slug: components/chart/overview +tags: telerik,blazor,chart,overview +published: True +position: 0 +--- + +# Chart Overview + +The Blazor Chart component 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. + +#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. + +>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings + +````CSHTML +Basic chart and common settings/elements + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + + } + + public List modelData = new List() + { + new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, + new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, + new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" }, + new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" }, + }; + + public List simpleData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +>caption The result from the code snippet above + +![](images/overview-chart.png) + + + +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) + +>caption Component namespace and reference + +````CSHTML +@using Telerik.Blazor.Components + + + + +@code { + Telerik.Blazor.Components.TelerikChart myChartRef; +} +```` + +## Chart Size + +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. + +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. + + +>caption Change the 100% chart size dynamically to have a responsive chart + +````CSHTML +You can make a responsive chart + +Resize the container and redraw the chart + +
+ + + + + + + + + + + + + + +
+ +@code { + string ContainerWidth { get; set; } = "400px"; + string ContainerHeight { get; set; } = "300px"; + Telerik.Blazor.Components.TelerikChart theChart { get; set; } + + async Task ResizeChart() + { + //resize the container + ContainerHeight = "500px"; + ContainerWidth = "800px"; + + //give time to the framework and browser to resize the actual DOM so the chart can use the expected size + await Task.Delay(20); + + //redraw the chart + theChart.Refresh(); + } + + public List someData = new List() { 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) From 565d6e17e704a33bb917b4857f1e5860210623b3 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 15 Mar 2021 18:29:06 +0200 Subject: [PATCH 02/21] chore(linear-gauge): major improvements --- .../gauges/additional-customization.md | 2 +- .../gauge-linear/images/arrow-pointers.png | Bin 0 -> 1866 bytes .../gauge-linear/images/color-parameter.png | Bin 0 -> 1946 bytes components/gauge-linear/overview.md | 42 +++-- components/gauge-linear/pointers.md | 152 +++++++++++++----- components/gauge-linear/scale.md | 56 +++++-- 6 files changed, 186 insertions(+), 66 deletions(-) create mode 100644 components/gauge-linear/images/arrow-pointers.png create mode 100644 components/gauge-linear/images/color-parameter.png diff --git a/_contentTemplates/gauges/additional-customization.md b/_contentTemplates/gauges/additional-customization.md index 56440d89b9..36af7caeaf 100644 --- a/_contentTemplates/gauges/additional-customization.md +++ b/_contentTemplates/gauges/additional-customization.md @@ -1,5 +1,5 @@ #linear-gauge-additional-customization -When configuring nested properties and child elements in your Linear 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 `` where the **Category** can be one of the following: +To further customize the elements of the linear gauge you can use nested tags. When configuring nested properties and child elements in your Linear 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 `` where the **Category** can be one of the following: * Scale * GaugeArea diff --git a/components/gauge-linear/images/arrow-pointers.png b/components/gauge-linear/images/arrow-pointers.png new file mode 100644 index 0000000000000000000000000000000000000000..e9d0cfb62b6ae110e0ea44ae64f63a202188d65e GIT binary patch literal 1866 zcmYL~c{CgN7RN*Flo488P`lPzjA@IGr92^os;v@I5p8VsBq7MDjBN-iiUd`Ziq=|t z8%q^YBDFNiw8m1E978O{SRTPky?HagbMEh+d(P+HKkoUS?`zLZlK=n!Cmlex zZv1?OA5&t2{2yvo=gLn47&m(xK;5w7BEJy2XYFha05p&!dH%xuTKwOj+ZX^qy7zks z^oPGd0stbj4z||r(S9pMzq_2bmrvP;w+27{$x%4TPx*0*Cs{CN$#PUwK@3+2f+>N* zLI?XiS$OAaPf$>`&I=C*Biv=N)b;K6tIMmOmSIs*%S!f}jI@kXKKkpZ0v_&yA?o=WI4|{|=KNZGUTLfL(qHu|s#ZEV9 zuBy`t;0NouO~XL(EmI2ceTM>Lp|*S&=nyS5ZuqSqB~Z@stmxMzA6euEmb!vcRLPDW z)gHVd>=MR7@N5gIydp|5t|~oUk|(TGL7m1n#vy&lD*nXNOnTdqqNFKCGrL-|p-QgE zj?*j-9YE7~sSX4Jp*iza(f}<~{GHpG0gj+t4mk1**k2_NZfrzzPic@BK^OQV(3R2w zm!#OnOgh_5={p#hNn}vXGN_lcm=^!E81Y-|e+1)xSXQ}ymJRG<6(HIuvK2L1%s{OT zTGHUww$*yQrVes!8;=YT7e1j~Hg5(w>OS#sf~()T_sCoz{-aG}YwPJ5AX`!VHWShC z`rNPa@$vN(Xo2$1m(f@AfBbMC;E=PW&aD!PePvK&(dT~Hc;bCO-;?)u3f@dP#wSYbQMWVOk9VejcD=}KDEV0AJp>j zc)Ux#l#EParmjsMtoU-gWmL-m=a!bbx_ZTY+Gr1O##-5kv9P%gU0quv^dhm?k64&& z8yk39U4#ZRh-306h8JXzNZ$uYGWkzQD?L5khrNNuBAaZ&LI3B11V=kLeZS=OLG2Dkc~1Y}L+p#p z@X*lQi=mK=PTrU8Q+0^Z8$B#@)WF`ONHRO9d+){AQe68@S!D!;?)Y(8_nx3{a!BRw zV8Q0*<^ncKdFV+Ot~zSrt~a<(@xq0p_eeB)<6`?SOXr?xDjZ$WKmwHIn;VcU7_+IV zsVo2e$Vh*93?GrqsjRHr)u*98L>RQOH)OOHv1V~hN9u-d&f;RwScDzQKPEPIFN0`6 z<2__7FV`%-R>Lwhc@Mkq+`m8Ut<%GH%is1UP6l`^Akdeb@Ew>C60RHOWRM(0>cajW z5d7AzY93{?ScWhj=zAq!e7AItI=L?=?jq8zp`AD*HhtdL-0)W&ZNlK*VeR89K_r9& zgvVHTWF^NnU=|93eI^AW+gv6{Q{q_~qa!g%&CSobwg+_mIg(IE1p46+v4JTQ4v(Bc zv84dU6mGA93Q~AXg&26N7gTrvpoQWF3Dt#w!C87d?f3iilOV7l7=*h<4 z4bUO8)be(*t`aoZ@c$H9vf->+;Pft>alQKIl96LQf>+5V0RaI%Y}T7kse>$5Hh*!= z^+_!va5s=Y5~&dfUiB#CYxcX;HS>0Xp%T5ly?pIvFqW38j#>5$1A#(axy=2LRPU9x|{O+R7l)ApTVzQFC(Ub@Rd2}zw#T=Ydn*g9Xrlk{`iBjrRZDH#(zlp z>;viBxxS#!2g(z^xtY>0S+~53t_0(zbOA~FU`=-&w4DCbpK!6~U9MfLxO(_iu+uZD zm*px%LUh*UFjz(=27LA0viVctZ}+}pKEem!iBEP?QI}>S#MH=xL{rN!Yl%*kpDfC} zv-$p@BOYwlXPOq6OHNJW#&Ue$DvYx(J$L?O)3~O0d*H6)j-}miJ6A<-ftV8l_RyHk zYs0?`Q+9W*BEPIT@3#Ps)d^lLiWU_S@mt5;ukH1gI6-R;cZKx*Wq{O!cxiVhgK>Yo zw5;BVS47)H{3|tNtxxwL1-jArLrB% sC2oS-pDcMrTGRFC>BmQ>r}0qKH*d;2gqsiJ-#>tZ9mKZI=1#(Y0WbTKMF0Q* literal 0 HcmV?d00001 diff --git a/components/gauge-linear/images/color-parameter.png b/components/gauge-linear/images/color-parameter.png new file mode 100644 index 0000000000000000000000000000000000000000..104ce3edd434ead6a33490b4fcd93cdc952014db GIT binary patch literal 1946 zcmX|Cd05iv76#E!P&8>w9m1t)(bCjxk|dKfmrNrfb45$ak}fKwh+DXY+O?==TAWgG zX`3{e)GRefrbN=*OH7DTMkzopnrXSr@6Nq5-}9XByzlqCf1UGw=M>>X{7qoiFc1i2 z5*Xl105T2;si7WlQ(Oxjfdr-#{C9)uUZIo#(T~Rk0}9>+_`(qbfEy(RgwsJFgz&!s z?nt~t27#bk0)27BG?MyeWFpdkRma+#fOh1Eoa`JOSR6EOo@rc`=Ep2Ha>Cl>xBK{_ z%poD@fK@2xkW(~XRp_2tYeHi&(f$wsis`O_w!yo#v#RHxivH83s*B$ce}8(wkrrCy z&c8k#^ERXP(~mDRMPTSS3qlisF>-HteJ_LO_d!|Q!cd&7r1o4CGSV&wN2wyU*>{gl z?IXW)F*Oq~(j*L?XXN&wS$iVGdGy(DtD>M8&5Vy%!7tQPWE&eNfEId{{PC1Keo;UV z>rDMN5S4)vbHg?tZ+F3BGn10!i*(C5W^B$WkNNYBR|L$&#GY^KjC0o9pdFnki$<>7 z$fz$zeI>m{X9!EChpjtyxb!6N>mCkzZ_NJNrzKQ<&j%W|3!hl%=pb&#v6sNG9!H>38zcIKp#|-ZQ)U zdxB9Q7mrtid>CxYp(EMZ+0MqDWJ0ZQZ&QnP_(4jimum3HCLX<~uE_lK&Ry=wrwWRf zH~w%IJ6DgO8jq$JJvO9JC@y=!5D0{anY4cu(O&>YaG;izEQut1PPv$3IfL;=%dLC_ z(iWil0bJ~f_i}lxe<7F|78A1^BI@lm8#34H5(%3)O65t2PTR&II__!A2SHHsHSM=J znO+y9N8;kfpmtw0(yEBvEGs5U_$w>QnJwi;IrGhQ@@J5H>+~(<^?W|xk(`hqW?>gL z{%|wopp%{8-`IssWExGUe)~uk!^V{hTNqQ>=5B6oxl){XVWE}A9!UvTIcP)^Z8d`^ zn8BvY$+HHz6R|Nd%94KN?X)-IZGC50txIe5b@;Q~@?D9Ijp5PJGQNRrfYVT>YER+F z+X4n=*EDnJ9Y1~cl;U@zNbfetRt0Zntb!J+S?v2YHK}gc!1}YiI_m(&#D9vKJb1}- z6pyGOC=(GieSK~8iG-i0=WmU0UtfYB3IYxsMfx(6iOu?YFe78JcQN>Jp3SjTjbvL< zfa9^7n7EYG*KonD_8d&pi!61r4|30^in)<7sZ_da{=Tf4m+_HUQ{_{eceJUg$)W(8 zIhXYC(Hj!70YON3u&v@rEZlf6n=?rtmPqD(L}MKnc%G*c6PNADr%$hH$y)_U2rRZ@ zhFM(dB-eYko>^WxY!??7M+`D_5xf_&P5E%wwWfR{D;t~J|LX(ewjO$Cx-Y`80(*k{ z-TB&DEowu7uA(3`O)Z5@`F;TH~1KYK6Swh z0o`CpjRs6PySl1BX-0Fa|Cv(kO1BvW%Sh?9qdjShPvXxk&)nXxW_NT`#VCXkh?@{N z7`LTFqs}^X_l5_SntE_dfI5G#9x!$w5q9NszTfGXr9qs;y(zV%+nRE1!)yj4>|x|`?UmbdFmzpTzuHYqhZ2O$qWo=AZ>*KENlQ2g{( z>g1Be10QWfE=W5(ENLb*>z(UmwmqcIXe_EAo?ld@z7TOyym^(+){ap0QzPP43n;?@ z)$W`-*MeM6L$0QhCg+-j(a1)`S5}-r7xPk6YN?VxCFOpM$b2}dG1l{A*H6+p*^ffp zu2;X28QMafywNuvgpC0c5{x+k*2yysHmnvy5F#9$!*=**=*q6n(JTHxV$;^=>wtCA zt2h3>$PAFWdk$}yS(EUNA;CthS#ZA6aPzqy^O{-ZR?~flpKDe)M8Zlw2~v53DGi`* z#L}p+w4uR=7uJ=J8~bd^8zPV^kCmq2nQ0|{`s~7v*K>s*r=>h{xtl+mL Zs5M*a^|kcfWniCz0{4XY*6ohX{S!`{tIhxb literal 0 HcmV?d00001 diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index 49e18c076f..8cd3bde198 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -10,7 +10,7 @@ position: 0 # Linear Gauge Overview - +The Telerik Linear Gauge for Blazor represents numerical values on a [scale]({%slug linear-gauge-scale%}) of ranges in a linear format. This article is separated in the following sections: @@ -18,10 +18,6 @@ This article is separated in the following sections: * [Features](#features) -* [Linear Gauge Scale](#linear-gauge-scale) - -* [Linear Gauge Pointer](#linear-gauce-pointer) - * [Methods](#methods) ## Basics @@ -64,28 +60,44 @@ The Telerik Linear Gauge for Blazor exposes the following features: * Pointers - See the [Pointers]({%slug linear-gauge-pointers%}) for more information on how to customize the pointers of the component. -## Linear Gauge Scale +## Methods -You can customize the scale of the component by using the `` child tag of the `` and the parameters it exposes: +The Linear Gauge reference exposes the `Refresh` method which allows you to programatically re-render the component. -* `Max` - `double` - the maximum value rendered in the gauge scale. +>caption Get a component reference and use the Refresh method -* `Min` - `double` - the minimum value rendered in the gauge scale. +````CSHTML +@* Change the Height of the component *@ -* `MajorUnit` - `double` - the interval between the major unit divisions. +Change the Height of the component -* `MinorUnit` - `double` - the interval between the minor unit divisions. + + + -* `Mirror` - `bool` - renders the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale. + -* `Reverse` - `bool` - renders the scale so that the values increase from top to bottom. + + + + -## Linear Gauge Pointer +@code { + Telerik.Blazor.Components.TelerikLinearGauge LinearGaugeRef { get; set; } -The linear gauge pointers are the main building blocks of the component. They represent the value points in the [scale](#linear-gauge-scale) of the component. + public string Height { get; set; } = "300px"; + private void ChangeTheHeight() + { + Height = "450px"; + + LinearGaugeRef.Refresh(); + } +} +```` ## See Also +* [Linear Gauge: Live Demo](https://demos.telerik.com/blazor-ui/linear-gauge) * [Linear Gauge: Scale]({%slug linear-gauge-scale%}) * [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) \ No newline at end of file diff --git a/components/gauge-linear/pointers.md b/components/gauge-linear/pointers.md index 1a61f4dae9..62bd1c7900 100644 --- a/components/gauge-linear/pointers.md +++ b/components/gauge-linear/pointers.md @@ -1,86 +1,158 @@ --- -title: Linear Gauge Overview -page_title: Linear Gauge Overview -description: Overview of the Linear Gauge for Blazor. -slug: linear-gauge-overview +title: Pointers +page_title: Linear Gauge - Pointers +description: Linear Gauge for Blazor - Pointers. +slug: linear-gauge-pointers tags: telerik,blazor,linear,gauge,overview published: True -position: 0 +position: 10 --- -# Linear Gauge Overview +# Linear Gauge Pointers +The pointers are the values that will be marked on the scale. You can customize them through the parameters they expose: +* [Shape](#shape) -This article is separated in the following sections: +* [Color](#color) -* [Basics](#basics) +* [Opacity](#opacity) -* [Features](#features) +* [Size](#size) -* [Linear Gauge Scale](#linear-gauge-scale) +* [Margin](#margin) -* [Linear Gauge Pointer](#linear-gauce-pointer) +* [Additional Customization](#additional-customization) -* [Methods](#methods) +>note The examples in this article are using the [Arrow shape](#shape) of the Pointers, but you can use BarIndicator too. -## Basics +## Shape ->caption To add a Telerik Linear Gauge for Blazor to your application: +The `Shape` parameter controls the shape of the pointer and takes a member of the `LinearGaugePointerShape` enum: -1. Add the `` tag. -1. Add one or more instance of the `` to the `` collection. -1. Provide a `Value` for each ``. +* `BarIndicator` - by default a bar indication will be rendered as the pointer shape ->caption Basic Telerik Linear Gauge for Blazor. +* `Arrow` -![Basic Linear Gauge](images/basic-linear-gauge.png) +>caption Change the shape of the pointer. The result from the code snippet below. + +![Arrow Pointers](images/arrow-pointers.png) ````CSHTML -@* Setup a basic linear gauge *@ +@* Use arrows as pointers in the Linear Gauge *@ - + + - + + - + + + ```` -## Features +## Color + +The `Color` (`string`) parameter controls the color of the pointers. It accepts **CSS**, **HEX** and **RGB** colors. -The Telerik Linear Gauge for Blazor exposes the following features: +>caption Change the color of the arrow pointers. The result from the code snippet below -* `Width` - `string` - controls the width of the component. +![color parameter example](images/color-parameter.png) -* `Height` - `string` - controls the height of the component. +````CSHTML +@* Change the color of the pointers *@ -* `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. + + + + -* Customization - See the [Customization]({%slug linear-gauge-customization%}) article for more information. + + -## Linear Gauge Scale + + + + + +```` -You can customize the scale of the component by using the `` child tag of the `` and the parameters it exposes: +## Opacity -* `Max` - `double` - the maximum value rendered in the gauge scale. +The `Opacity` (`double`) parameter controls the of the pointers. The value passed to it should be between **0** and **1**. -* `Min` - `double` - the minimum value rendered in the gauge scale. +````CSHML +@* Change the opacity of a pointer *@ -* `MajorUnit` - `double` - the interval between the major unit divisions. + + + + -* `MinorUnit` - `double` - the interval between the minor unit divisions. + + -* `Mirror` - `bool` - renders the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale. + + + + + +```` + +## Size + +The `Size` (`double`) parameter controls the size of the pointers. + +````CSHTML +@* Change the sizes of the pointers *@ + + + + + + + + + + + + + + +```` + +## Margin + +The `Margin` (`double`) parameter controls the margin between the [Scale]({%slug linear-gauge-scale%}) and the pointers. + +````CSHTML +@* Change the margin between the scale and the pointers *@ + + + + + + + + + + + + + + +```` -* `Reverse` - `bool` - renders the scale so that the values increase from top to bottom. +## Additional Customization +@[template](/_contentTemplates/gauges/additional-customization.md#linear-gauge-additional-customization) ## 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) +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Scale]({%slug linear-gauge-scale%}) diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md index 18887b3b6d..6928fc08bd 100644 --- a/components/gauge-linear/scale.md +++ b/components/gauge-linear/scale.md @@ -1,5 +1,5 @@ --- -title: Linear Gauge - Scale +title: Scale page_title: Linear Gauge - Scale description: Linear Gauge for Blazor - Scale. slug: linear-gauge-scale @@ -10,7 +10,7 @@ position: 5 ## Linear Gauge Scale -You can customize the scale of the component by using the `` child tag of the `` and the parameters it exposes: +You can customize the scale of the component by adding an instance of the `` to the `` collection, child tag of the ``. The `` exposes the following parameters: * [Min and Max](#min-and-max) @@ -41,7 +41,10 @@ You can customize the scale of the component by using the `` c @* Use the Min and Max parameters to change the lowest and highest values for the scale *@ - + + + + @@ -67,6 +70,29 @@ You can customize the scale of the component by using the `` c ![Minor and major units parameters](images/minor-and-major-units-linear-gauge.png) +````CSHTML +@* Update the rendering of the major and minor ticks *@ + + + + + + + + + + + + + + + + + + + +```` + ## Mirror If you set the `Mirror` (`bool`) parameter to `true` the scale will render the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale. @@ -79,7 +105,9 @@ If you set the `Mirror` (`bool`) parameter to `true` the scale will render the l @* Set the Mirror parameter to true *@ - + + + @@ -107,7 +135,9 @@ If you set the `Reverse` (`bool`) parameter to `true` the values of the scale wi @* Set the Reverse parameter to true *@ - + + + @@ -135,7 +165,9 @@ The `Vertical` (`bool`) parameter controls the orientation of the linear gauge. @* Use the Vertical parameter to change the orientation of the scale *@ - + + + @@ -167,9 +199,12 @@ You can remove the MinorUnit ticks from the rendering of the scale by using the @* Remove the MinorUnit ticks. *@ - - - + + + + + + @@ -187,4 +222,5 @@ You can remove the MinorUnit ticks from the rendering of the scale by using the ## See Also - * [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) From 1202fb411528a380d52f363eb02ef7198e94853c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 15 Mar 2021 18:32:36 +0200 Subject: [PATCH 03/21] chore(linear-gauge): add to config.yml --- _config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index be82a353a0..ac09ad5b8f 100644 --- a/_config.yml +++ b/_config.yml @@ -256,8 +256,8 @@ navigation: title: "FlatColorPicker" "*gantt": title: "Gantt" - "*lineargauge": - title: "LinearGauge" + "*gauge-linear": + title: "Gauge - Linear" "*listbox": title: "ListBox" "*loader": From 204d40779b2307a9c1a6c2c1260ccfd83ad7924a Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 15 Mar 2021 18:33:38 +0200 Subject: [PATCH 04/21] chore(linear-gauge): add to config.yml categories --- _config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/_config.yml b/_config.yml index ac09ad5b8f..4e8e264285 100644 --- a/_config.yml +++ b/_config.yml @@ -427,6 +427,7 @@ intro_columns: "Radar Column Charts": "chart-types-radarcolumn" "Radar Line Charts": "chart-types-radarline" "Stock Chart": "stockchart-overview" + "Linear Gauge": linear-gauge-overview" - From 57f095249f772f4979f1c49d1f68d2f84d2d126e Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 15 Mar 2021 18:36:01 +0200 Subject: [PATCH 05/21] chore(gauge): minor overview improvement --- components/gauge-linear/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index 8cd3bde198..0e4258b495 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -10,7 +10,7 @@ position: 0 # Linear Gauge Overview -The Telerik Linear Gauge for Blazor represents numerical values on a [scale]({%slug linear-gauge-scale%}) of ranges in a linear format. +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: From 3ef84b9c21c9de5752760adf5448f1cab78dd9c7 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Wed, 17 Mar 2021 16:04:36 +0200 Subject: [PATCH 06/21] chore(gauge): overview improvements --- components/gauge-linear/overview.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index 0e4258b495..32f5042a59 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -25,7 +25,9 @@ This article is separated in the following sections: >caption To add a Telerik Linear Gauge for Blazor to your application: 1. Add the `` tag. + 1. Add one or more instance of the `` to the `` collection. + 1. Provide a `Value` for each ``. >caption Basic Telerik Linear Gauge for Blazor. @@ -56,9 +58,13 @@ The Telerik Linear Gauge for Blazor exposes the following features: * `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. -* Scale - See the [Scale]({%slug linear-gauge-scale%}) for more information on how to customize the scale of the component. +* Scale - See the [Scale]({%slug linear-gauge-scale%}) article for more information on how to customize the scale of the component. + +* Ranges - See the [Ranges]({%slug linear-gauge-ranges%}) article for more information on how to provide ranges for the scale of the component. + +* Labels - See the [Labels]({%slug linear-gauge-labels%}) article for more information on how to customize the labels on the scale of the component. -* Pointers - See the [Pointers]({%slug linear-gauge-pointers%}) for more information on how to customize the pointers of the component. +* Pointers - See the [Pointers]({%slug linear-gauge-pointers%}) article for more information on how to customize the pointers of the component. ## Methods From a9bb41eef4204da6b194a04b248ae058c9c83214 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 18 Mar 2021 09:31:53 +0200 Subject: [PATCH 07/21] chore(gauge): ranges article --- .../images/color-parameter-ranges.png | Bin 0 -> 1862 bytes .../gauge-linear/images/from-to-range.png | Bin 0 -> 1897 bytes .../images/opacity-parameter-ranges.png | Bin 0 -> 1834 bytes components/gauge-linear/ranges.md | 144 ++++++++++++++++++ components/gauge-linear/scale.md | 4 +- 5 files changed, 146 insertions(+), 2 deletions(-) create mode 100644 components/gauge-linear/images/color-parameter-ranges.png create mode 100644 components/gauge-linear/images/from-to-range.png create mode 100644 components/gauge-linear/images/opacity-parameter-ranges.png create mode 100644 components/gauge-linear/ranges.md diff --git a/components/gauge-linear/images/color-parameter-ranges.png b/components/gauge-linear/images/color-parameter-ranges.png new file mode 100644 index 0000000000000000000000000000000000000000..9252765b94b51f3aa6f4ed052ee55a619ed02603 GIT binary patch literal 1862 zcmV-M2f6r(P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D2HQzQK~#8N?VRsV z+eR3G`BNtC3s7L?zu6|O+th*f`{TNOXy6kX>srQy(x3?mm|zrvI+TSj(gvdfBvb<1 z)J{WHyD3tWwN07~L7^Z*&*#_9<-qpYvCqEnKJtg)UQ|E6_q8wg`rLG^KIjk)&W1xK z(Pa`#=JcJpWK7=^-_Uo2iK9aG=~d_+HohLeMKrVTEq^hnAiy3L@{A`N^(!^uGp8?76(Q%(;zrv;Fc!|v|x z-@;_GS@@bKoO8O0kp?3D;L0JHOv2YZ;nIPIlkfSkva$l7JmKJ=T|*Nzl;Cjb>G%7( z6s!ZGdVgSI#_j!~P$;ZgGd4B`?L6Tomg=Bl%kuIvwDW`{2YUjKB?+kEK=OfHK&?i+1uNDXwCfmJhbzKB!``yoqN{I&CNkOPhc$hgc=UTVsXuy ziHQkl=Lty;M@L5_t*uyET7q_-z*zDLH5|xTZq3xx6twe%paU&rnGWvj z4~K_`|64!0M4A{Y}p=b*hjU#qH zcTe&Gp0_#;dHFy(MDGe^YbZ=Vs8>@YXeXWk>qUiXiuMnKa#WuU{e7L^1aJ{cS{_pk zk$$j$DEIEz*iLh^x&7DD0$=O>{P^RG)vfmu?6<{*gPF=cH+ z$vPA}I-p&Y9e5CQ*i9fgASfiG#_AEhJtf5JZHi|U!h2;W8OQ=Ib(9Hv7}yK(90#% z!hQWADs%T{ElaUF5Q|v{@}Vvoj)NILVs%mbn&MyI4?k~x#oP+*ufo?pdbh^m!*^i6 zEn*IuKy`7PNI#GPHZ9wp&Wjgm`d`CVDxHU~eeiaT!}}Ltzb(!V^b(}^0N}@S0*kCe zxopHzAP#y6aTlKY>!LCpszp&9;}+re{y@eW@O%knZLObm$mfl*MnJI?3^HRWDA1u6 zNe(0*;Q2$!=H>wFfcbz9;&9JO7YZ}1L$PR#y`${FJ+uDc!3gW{o(e8v3$IojZ4~unsuZK!-X|Gaq2x zJtdR5$~s^^po2KvJ3`9kA6bWI&t8LeQFh?o)pGy-cdP@Bz0pCOMu??G$mtV=5lb0k zfuD}sIpY&ZcgQ5V$>CNV+|S*IJJz7J-9(1%2i0mQ2CRc0Yb`@|5UMFUVdZe4*5NJK zZ;J;9p?=_gd~*Eo^R;i6+RW{Xo5u64U2oPny!Qs|x5bM?{rRx?&tg+=leu*c8vP*6 zq5hg;1RS)kaCd*;=Ezd_Qmn)IZ;UyzKppCYo2wj753>%fUm0_iQFh=6Czkw0Ne8Zm zGV<#P>u~OhG4_tK16RwMS)XAYI<6VDEQ}?oDCxk}*avP7unx^%8e?zl2dSU~kGy<< z$FC^;H~Luz%m;K3hkH~sy_IGi)EIknkL+H*b)9u+={Mf{gRvwPB^|i61Ear_GAumTyodS0`Bq9DAdKIAp8=%gQK&bAzk{jy2H1GpgnTEIX$3P4=-4m=9;# zL7TOw7;jOuhkGZ&!o!8o9nANjiq=p_KEP`!C__IDu?}J6gVqVK+RR*l>52%%(nh>` z+#B(3!$+L(9khC!lLPmX9FFnZPx#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D2L4GzK~#8N?VayS z97h<({fm-7k{2N%QQ|80ISe7~RaqfFNd(X_|+N$PYUG?xk za4qLji8|Q=UM*ywI2ZbICA`v7LR^d42BA`}FOix*gtNkEA~9O?Zy~|1rTJ8YO(B~| z>3gM)*& z(o`xHe3={}dG)Ay%k^thuK9c(UnYl?s}lqDdEMC9z%w}lT^%jA+dM7x_W>oY{QZ@G zubaNVz7evpuz>C4I5z{aI2E$KzK-qW(CaEjQ3hH9EmyFa4~JG>#n=q!fm~i+hhy`q z2U@P>a{0$_R##WCog8{yL1;Iem6a82Cx^{|9JE|FH#ffxXK`^6+sUEV_2lH_uW;-$ zp&n?tg3VXq*fCZQ)-@_%lMlz{RS&dWkB*KG!&zHf!*+7$b=}+B`yrg= zn*p7dnlE`>C^uiw6pCEI#tEgDSGjo@_~&8dlm}lXN1!W26IDD{qW#KL&cbvF=hcO~ zXOW$UsS)%33N~Mdqa?2_LUF%pg_i5_@$paLC>*yGu(PxCT{udg2Q*{z8Woc=VA5wx zjLmCQzy`C3rE!URSG8E9l8j)sfUZY}Ct=Oa*ycnC; zsDKU5y9Hs#SUo6m^~#!j?Nad`6D6)*t++Iwu9-!tX@U)|YY0MhUfpswJ5yXMhFh=V zyn6krx(2V-6*`iE`(fnfHpGjZcwpSZHBWDMtJ_;=4!9D;c^PnwnXX*FiWiUZ%+1Z= zS~4(8c2v7+2b@QBbw5&U`bceF_xJZP1FmaFJ04BCI$CbGd0nV@ZbOx;tB7D;8BO0` z1#3!YXJ>IuX71y|f$8pQDMurYa^nVB&rualFL zv|I&S(MLu`^6uVq>#7oR84v)^S+rd7{uIQ(zyPg#mS8Lx8yllF76^dPmN9uH=L$CX z2-rY6oi=8Sh38jeGGJX}05NqPV2SKPUc?`LLq zoHuuQfzFnA_Vy^+S zjt@LnIB(LG#T0tfb#qXW*IT!E*W$~U>|#9E`aBVjig_6IuIw#7L+utDWsiwFP3-dX zg$s4pbbI^y_&946uV1yn^((k4$$&Pjs~RA$&MF+_*Gre`u6=jz7?W3UH6{b(TzzZw z{=Rmt?)v%NyPK1ftPv4c-`dANuU_R{zj^kIH6r5bhsyxC8k1LYuD&(UzhAywcm3?% zy*CpRtPv4c-`etjZ`|Nrw_dzpjflAV;W7ZO#^m+s{rj|BVT@hi;GYS>)tE7sT)+A; z)b-N`56I;e_v<Ss{BW+HJbFaSRgeL2rIi7}XA4}7c_#e$@nfYKDCg2=YL~J1nCNoFYGK_qN=;KR z#)7M&F_u+>Q@Ns3%f?HJYsESGhh2Isf1fjTJeP3F9 z6f>FKo*wr|c6P45dc|HdHNlBG2V4n4+EqzjIeL0};16SG8eCP(ZE$FH1)9FU3iio& zcXz*b_sOeqjg4TRd}n7T?vp3tDggRbX$Evc&Q-8a9x{OY=c*C@Yz4`xr3XO4KT>hl@_S=VUy0kz1w0uk=7 jYH7mty<=TPx#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D2ER!}K~#8N?VasQ z97i0-{bTwfePbFG#gw4_7cD963%Qg+(-$de3niwd?+iXv@vx;NB{YRL(kEk!S|8C; zb85r~5=l^Es7I&}W3ow1=v`;V+1a_d-F0^NH=8;5eV7-=G6x^W@6GQ0W=5-u6$R>= z1a(b;k{KkUh9?ZfKidNt*!O#cY|=_RzUZ+aSHR(4WclyFWs@ z`0H*Dwv`Eyp=}$=vzO$D@rFEA{B`O0xnvjFB^nP`k-m1-)5TZU`@OS)WM=Y+hU#u@ zZQatwaUA|OJp!`p;i_woZY14_i3$ETJ+yRL9*ksnc6OG((!*ER*UZSw0HQ0;yYeqR z&b<3qD8s|Uyq_M2h9N11P-bRkct1Ui>xKgqhP1Fwmk138V_kN`!7!M_#_Uc9gV{BS zb-MX{ej}L4$w}T%597MTX)T!X@p0Zy4-7*Ttkccqa&y6qjEwMpdKlN;-`{^43_d`b z#5!Ff^hYpw6E+FzCW8n~1cTW%iFLX=J3IdbGc`5E`{`j^cYS?*Ihe7rG2TxP3_}!v zbxUibaVn5YOH1>?jE;`-etLxJ(&DbrjalDy9Oq#$k`8OvXMjpn@Sj6YEud|wmZ8ANRxogD?cu! zW^v|SBJ^i4AlXe1;L$aWb-KH|yZ;6QcvpjAb#?VdFrd#2=E3YHqr$>aVIQ?{FuTbh zLi~p72i}BDg1X5dLhL(EAiSR*IJ!}=PB*o(2n;C}oy>#TO-6;4qbsb~9}Z?W8AOOL z`T2o2VUqyqdNotIFdC<%7Y>N7SB|E~Q@C8rf+-Q=TP^&6&aPK9uY_{6H@fx~`#C(R z{LGK`QcCzvECs$X>(*LvX}+Y9D}Edn1}067wMRF6pWDOQ+Q&zZi1v41AAJvzJKb7* z-)-b|TwU=A1IlhoOR=g-wAJ2TdhtNF^$p%4>PlwbKmskL7|=bi4yUK>x z$MyBH?qWv=?UYm(4rROX)5b_FLp#}{%TL(4kOxRv7qbhC<+{oV zeW#&8*1gf$Njsq~5SU#^_yp!+`$Se@w+R)@E+qH>nI@Gj!yjIFET`;913i&6f%w|_q&$ZVk4#A|Z7Xba0pYWxWy}H+&S6>lr zF3Xa#!hlh+ONNo-TPEQI|%R zk1Gc#yTwbz;(5{L=LhJuWV%uYJb+ey;C1Qmx&(LXr9)1MGVhX`Fkh}_EH9tAefy+n z)6-wYPUhw7Iz-XeWDg zl`Wh1?tO9p{(GX$&R(IN?9nX)vkQo_nR|2d{Py-K(Pn18qn+&0Rkq4Md6Iqh>=V(h zU;mMIvPZWJ%q}40Cd|&ta8_16ymRL*(eNe=4C(?xvda%DGS=44Zfv|Q8fF(5yLFXg z&5s`SI?h?qth=izhsN*T{XCz4S2XLM8Op%y0#adNsIZS(8Ro(u*K{dyN_u4&(&cqX zp(__mPenRJ!|%TgGdE#caBdq~ltYtF#L3X8&Gx06+hrd zSNXQ1komspgMrsYyL^ouqPcQWa%GKN@k3h|D7!7+wp4vqC0g$_wytJCH|ETskeV(b z&b+IXMNWKkLe}m6wVQT=(S<-MI@R^o$+{N?F3?W)=qi{Dg8^*URm#!zef6?#$4_iO zgFU)RvH$p2$7NmXK57b>T~L%|z+>IVWZm|wY#$kpE)1v(3dt_tdBHf^c~sWL?1Eyu zuCh<7>0*6p!nPaRqpN_~ z1%=#%`56R8&6hQ@E>2{ipe`sRyZr1Iqq?J7*2V0ClBzD` to the `` collection, child tag of the ``. You can customize them by using the parameters exposed on the ``: + +* [From and To](#from-and-to) + +* [Color](#color) + +* [Opacity](#opacity) + +* [Class](#class) + +## From and To + +* The `From` (`double?`) parameter controls the lowest point in the range. + +* The `To` (`double?`) parameter controls the highest point in the range. + +>caption Use the From and To parameters to provide a range. The result from the code snippet below. + +![From and To parameters example](images/from-to-range.png) + +````CSHTML +@* Use the From and To parameters to provide a range on the scale. *@ + + + + + + + + + + + + + + + + + + + + + + + +```` + +## Color + +The `Color` (`string`) parameter controls the color of the range. It accepts **CSS**, **HEX** and **RGB** colors. + +If you do not define the `Color` parameter the range will not be visually rendered. + +>caption Use an RGB colors for the ranges in the linear gauge. The result from the code snippet below. + +![Color parameter screenshot](images/color-parameter-ranges.png) + +````CSHTML +@* Update the rendering of the major and minor ticks *@ + + + + + + + + + + + + + + + + + + + + + + + + + +```` + +## Opacity + +The `Opacity` (`double`) parameter controls the of the range. The value passed to it should be between **0** and **1**. + +>caption Change the opacity of a range. The result from the code snippet below + +![Mirror the linear gauge](images/opacity-parameter-ranges.png) + +````CSHTML +@* Make a range more opaque *@ + + + + + + + + + + + + + + + + + + + + + + + + + +```` + +## Class + +The `Class` (`string`) parameter renders a custom CSS class on the range. You can use it to provide additional customizations. + +## See Also + +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Overview]({%slug linear-gauge-scale%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md index 6928fc08bd..98affa3bc0 100644 --- a/components/gauge-linear/scale.md +++ b/components/gauge-linear/scale.md @@ -1,6 +1,6 @@ --- title: Scale -page_title: Linear Gauge - Scale +page_title: Scale description: Linear Gauge for Blazor - Scale. slug: linear-gauge-scale tags: telerik,blazor,linear,gauge,scale @@ -62,7 +62,7 @@ You can customize the scale of the component by adding an instance of the ` Date: Thu, 18 Mar 2021 10:41:11 +0200 Subject: [PATCH 08/21] chore(linear-gauge):add parameters labels image --- .../images/format-parameter-labels.PNG | Bin 0 -> 2230 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 components/gauge-linear/images/format-parameter-labels.PNG diff --git a/components/gauge-linear/images/format-parameter-labels.PNG b/components/gauge-linear/images/format-parameter-labels.PNG new file mode 100644 index 0000000000000000000000000000000000000000..ef11013952a1e74026de95c6703490ae675d4e50 GIT binary patch literal 2230 zcmZWrc{r478-Fd0?R7E?W)vmMv1A!T3S&3OG)p8L7(>%M;X_1yRGcR$Z_kw|crmsOJm z06^Z|&Dj&$ouD-;4TJ3F?XPRlCU(Zt)e)$Av0Df^k|7R98~~suS8n6<4#=0Gy7`^~ z02Q5YOU&I<`y&8Id$>D0c*XnA-UHa z=>w*A0{>@9jx)bMsY^2JM=Kv4T=_9Kzi<{|NSewS&G=#*l}WC*h#T$vFMF6ytJS!5Fz;X?xh9&n&%0t($rGQ9e^-}v8dlBa^f}(YA%9Kzvd)rib?E2* zV$|YTHLStTkb#ixaSmz6^WO7Kb*`C+$=4AQ8%=zKCQ>%=flbjwq^@M z`06RGI%y}E(uSRCqf3bbHpBQJRzZjHLCFjwdU=K7;4_gjTI+6wHu!+MIKjd4P21hp z`4|F$!0ouO(|T&OK3tT!mGlGOt@l-Rfc4bY<`lCox>?H!=1BUr1^4Ymi*GpZquAwy#%&v5` zPA-Sk#XniU+;o0jka89_NN?a$F`D*ZVZuanoQc89qg`hU-fMV9l=+uD^l%AcM1KrJ z;}5ish&#!e4HuV6m2o*{0H;w^xDuYPEMwNCE0BogCY*`gvNHP zhS*yE%~MbuJgnfiINE}BY9fr7jz~7toW1S-+Q*Gf_P^Fej zQ1IF6gooqCX0v*o(PeM+yIteKVQSNgi7@$%+�%!yraM2R9|Cz?AydKeW9*Tz%nC zQ96sj%=!##JO%v1Ujk)5WZw)~%VWlWUYy4Jc;NP*0x#-cjUk>{GSYaT^jw9O!qD=I zly>!=b<1#@-5arOb!Q1tEglk)R6fvzPc0|8d7OVdI#)<6Om+&$;Lo?$#)?YpoDz(> z>0%6oJ~IW&w9^vlt7Idz#%C{xGlw4Ee!5`X$TpA@j$i3&nwESE;@`qfotrru^>Js9 z!469$aW1lVGIpWS7j3*%5gV(t7nfnIBybuGc9cCow$F^7l6Cvm!Vm3_Z2i|L-r%T; zTP4z*I3iVte6)MX{sgbryh~?=`BX)Zfyz|89sT9dozv*v5$$U+B(F6=ifL|Y=sPuz z-G7Q52BO)~ujRw7T0+s>V)T_t8IKr`PmJu^NjJP1koPvJJ=t9FfJ0Ar;R zX>^&&={?X%hgOWb<{9-icJfI~QhGa9g2P2ZiLc985<^SKzcPue6_BPZ@bg>omD??s zR{k~PcjC+CKjlj?>7(P&j2i7AOZ6y=rW0e`>jwpKm<}3Ntu|{n)q>+qFT%vrK+yjj z;{>kbN_=rYg*wxnevRa}Hll^AH@Xa<4JyQ*_4Yx!trD_PrRUy$${50IZG`>R$XS?W zjuzvK6@~9pjtt&=7&LFPXd>$Wf}TU( zXve6H`p8A~e-Myd$jbD>+ffS&mJd3ec?N$evqabwrEg#vZ}r{wjX}ioKN`_S))8_q zKw~8*6;j<}V4)}Z6QU(bN|jKoI-J(y0e7;F?`tf@B0~u>)Y)Eo0wXFc!t%kLh8vo= zBDp?A9=d9O+VqW!TRg0>JvrHv+4C5)hb>1vpybFcxnSPsgiP8Q)*8`LGVt&;?c2zU zsRrVML(%Utj!LS#y1I&v8yIg+<=U5VO(hOs={A062k-(6L)#cL>X#~U>qwqMOo5x2 viVffGS5qumdr65L#6fO9K>uT4np;xW0x*7dRfm6q{u+S03&FX{F)-~93+(*a literal 0 HcmV?d00001 From 83ad1917b6e216bdeede9a6b87d08e80abe985e9 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 18 Mar 2021 11:45:54 +0200 Subject: [PATCH 09/21] chore(gauge): imrpovements --- .../images/color-parameter-labels.png | Bin 0 -> 1773 bytes .../images/visible-parameter-labels.png | Bin 0 -> 934 bytes components/gauge-linear/labels.md | 128 ++++++++++++++++++ components/gauge-linear/ranges.md | 2 +- 4 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 components/gauge-linear/images/color-parameter-labels.png create mode 100644 components/gauge-linear/images/visible-parameter-labels.png create mode 100644 components/gauge-linear/labels.md diff --git a/components/gauge-linear/images/color-parameter-labels.png b/components/gauge-linear/images/color-parameter-labels.png new file mode 100644 index 0000000000000000000000000000000000000000..47d1ce8032c625ce5e8ceb0ba984bce6ea391374 GIT binary patch literal 1773 zcmVPx#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D27*aMK~#8N?VQU? zEJqZFz5k*hBxEUB`F=l8gi#b+=tfsc5PTq*g(R4uMrRy+5WNx!Ubre`;U#gAS(wET zTx2?@tIu?|GhJoXOjUUb>Z7?dO%Hr??r*xD@TD&@%r@JC)~#^oJQuX&*rE4;EB&;Up#^2${KEF&E2YYB8Lo6# z%W5`eF4!R!7!+mu_yw%Pm5!4T6*crrSC=pS`1tr)nsT{}A5(#!=@j?{M+woM>9eyl+*5%oo$06j>Y-UW3IOP0psT1}r_Y7#@9*PzDoDkn87e|fPfzhY z6^u)Z(H##f5S0e4ANdf?v=|=`ThPsPk&n-`Er?1#Jw5%wr%)*1c`6u}2D49mj*pM= zJQaLA)FCQ;b#?VCpM!$~JWmDV(l0MB|MKy-rnVp|4O&0*@x!<+ytF<*E6>Mg+7?8m zOQq7Ed`?bI@H`caOW)ny{m$p;=m^hK!N)@#Q_?kEUDdAX&CSh6K8J^gc%BMxNwem3 zEZsnVx?C>*!>3p*;(02(Aq{n%N%>Kq2>_s+P}iiWa&s<9=#~a87TiQyZgvYiU~rZP zKc)g#8sZx{xl?K86#fL`jd?qe>4@}&g8b}Ol^Q?Q>ojQn!bfwa?O>|XMjI15y@z3ZruE@uJe>R?it(A&2Wa7torNF9ZQ-T$0b1;@DlT}Q3ck|n z5S4z1W=-?FM_bG=KGXVevZ?Om^o1CoX?=hePIPABhjClzmQHnh(=A=q2Ba9x(s5Hg ze6*;l*g&fnv~WR67REB2ngDR7sh(7t`t(JWD8cybmfS>GrR1Ygjt*OBL1BM3FA($Thqq z$C+kCDVM)aOD#p#CanpnMc>q<#psTQ6^KfMR*?@5$eDnebFKw1mspMX!=}P0ZEsNdVU80vf!QgU# ze@}F95%BQv;9jP$udj(pgBIR~*0Hj(;@&V$x6%Tflr9tsbTf_Zf;v`LSKZ4r-AW7C z+uPGE%{tJ{cTEKi$c>E+%?(J9!=8Dnf8IcU8sxC8TgTekn!#2td;t?LL^BYNn0O{Y zZq7xXot+(1(s3jtXSd`hik6m^aH8n&r{LRf5^30nBYfVF2IC~Va+Q{!lH1WR zZ2vluhW&=6A;DPVDta@$zP^s}&?TLuB8A@BE#1=We?Pn)SGV|54aE+RNMENx3n%aE zn4O))VO&?GEdci(n&V*sFRc~OVoR(ta5B@&%ggS?gRZn-+2+E+0xsL6CM{SXJ3T#( z3uLKD3s_uSbT89%r3K6DbGaNYucsz0c#vUkZmt+T$Use6!2JBYdzq#y4O%c(XEHiE z3jc;DIaF!5_i!&BURo=lg^#AzF)}jZUZ!DiaW5Wpr3DYWPfSb@9T5eu6@W|=z4s6> zH8tg4rs+xx;xRNdL^K|PAL7{9n0vRTlarHX;*su2GiE-hH6R6ykB=LWuJ%r2=>}T8 zpoOD$9sT|Nx`%PrHs8E>Rq3#){>b)pG}X;i8mODHIIkr8O->ZS9|7j2S#{4$NdNGC ztu!3rqrcMN5&kVDL2qv_{2P8|^ShKW+u#Tv6=~g>PAY9wTJJ>B@bIt=X+ZTlEojyZ z4i4gos9Cyc1Z}atzCOJ7pe8Kgeq3bT89z@8MoN=t>J#yumPzOWdeQ z3)U7wrg1SLHE97*Y47A*RPOyi<&YSIFFdV1W;G+k-XDst%P z=x}cshx=*w;^C#W0$TVaUmZ?n8U`2l;$cbpJQsXmQ%CZ10D=dDLE8AOY4i@dzba}S zb$r}93mch+GPiC8(d@;{>!;8f!$v$d+Y-^t2TD}2A)T(SKw9v|h8iFq`RD}>?_Ozn zX`oy#ho1q(;jUMkE@|zVZWsmW#;zVFP>=>1xK5iuO_~T^+7@2g4ngog1|;kXLx7>v P00000NkvXXu0mjfJqS_N literal 0 HcmV?d00001 diff --git a/components/gauge-linear/images/visible-parameter-labels.png b/components/gauge-linear/images/visible-parameter-labels.png new file mode 100644 index 0000000000000000000000000000000000000000..4bfb9200be1cb7834a269d348a011b3700f98c07 GIT binary patch literal 934 zcmV;X16lluP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D13O7XK~#8N?VL}G z6G0Hg{g`@K5!QoTQQC_PheMQ8&`h7GD|5v3NhZ(MlZoup2OjeYkzuu3{ov{M z`zWWtqqJNuzwvatU6fPMK%b`5=_j6cyNz-RJW9LWjyeU$U@$;A1r79xve8=}%SMQ` zi0spQ9`gy2VZC1eaM`^p={^p@u z3gr|u!6!;TbeAZxY=l^gm`Y^ZJ09~1kzuph{NkYoL^%Z>rTKjRndkcY8s!u;(5G~* zm##<1@mTvSZlc!HM^C5ChK4I3-MN*&W zPr-?g|EDBRTbCFN22lEPTRtk3mE@`T676;yN^f2tUR)LjomPm{dQ|o0!{Rt=CGVvMVVN9Q}h zgvcOoNTZIPp^{9VK2b&J(Jo^4@^p8uOtwB9pAT*<8zI&rvQK#9a$!CpGNc;;q#M=9 zWa3lJ5%u#YCrWf$p{zvDg5v~$iei@F+2a!>I;{|?^>R|8iZC1HqR2)$eI}V~eZuUn z3-bw)!MoZJP0720Vm=9YSMQ=Jc~>OOCjqMHxbE%7vJqk}BKw4$BreP+LZqKb}l9BwQdA=VSg(;5Y&42!jwWtrF1y_0T0vACA(S$DF6Tf07*qo IM6N<$g3CLyr~m)} literal 0 HcmV?d00001 diff --git a/components/gauge-linear/labels.md b/components/gauge-linear/labels.md new file mode 100644 index 0000000000..52f8319b46 --- /dev/null +++ b/components/gauge-linear/labels.md @@ -0,0 +1,128 @@ +--- +title: Labels +page_title: Labels +description: Linear Gauge for Blazor - Labels. +slug: linear-gauge-labels +tags: telerik,blazor,linear,gauge,labels +published: True +position: 20 +--- + +## Linear Gauge Labels + +You can customize the appearance of the labels rendered on the [scale]({%slug linear-gauge-scale%}) of the Linear Gauge by using the ``, child tag of the ``, and the parameters it exposes: + +* [Format](#format) + +* [Color](#color) + +* [Visible](#visible) + +## Format + +The `Format` (`string`) parameter allows you to customize the rendering of the labels by using the standard numeric format strings. 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. *@ + + + + + + + + + + + + + + + + + + + + + + +```` + +## 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 *@ + + + + + + + + + + + + + + + + + + + + + + +```` + +## 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 *@ + + + + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Scale]({%slug linear-gauge-scale%}) +* [Linear Gauge: Ranges]({%slug linear-gauge-ranges%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) diff --git a/components/gauge-linear/ranges.md b/components/gauge-linear/ranges.md index e9e1238152..c06efcb444 100644 --- a/components/gauge-linear/ranges.md +++ b/components/gauge-linear/ranges.md @@ -68,7 +68,7 @@ If you do not define the `Color` parameter the range will not be visually render ![Color parameter screenshot](images/color-parameter-ranges.png) ````CSHTML -@* Update the rendering of the major and minor ticks *@ +@* Change the color of the ranges *@ From ce855f8376870101dfbb5f97c069852821858527 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 18 Mar 2021 11:56:11 +0200 Subject: [PATCH 10/21] chore(config): fix slug --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 4e8e264285..58558ca75f 100644 --- a/_config.yml +++ b/_config.yml @@ -427,7 +427,7 @@ intro_columns: "Radar Column Charts": "chart-types-radarcolumn" "Radar Line Charts": "chart-types-radarline" "Stock Chart": "stockchart-overview" - "Linear Gauge": linear-gauge-overview" + "Linear Gauge": "linear-gauge-overview" - From e8439570e05823f1681dcab0279f995917f96507 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 18 Mar 2021 12:22:07 +0200 Subject: [PATCH 11/21] chore(gauge): fix slugs and config file --- _config.yml | 15 ++++++++++----- components/gauge-arc/overview.md | 6 +++--- components/gauge-circular/overview.md | 2 +- components/gauge-radial/overview.md | 2 +- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/_config.yml b/_config.yml index 58558ca75f..8527c97328 100644 --- a/_config.yml +++ b/_config.yml @@ -192,8 +192,8 @@ navigation: title: "TreeList" "*spreadsheet": title: "Spreadsheet" - "*arcgauge": - title: "ArcGauge" + "*gauge-arc": + title: "Gauge - Arc" "*autocomplete": title: "AutoComplete" "*barcode": @@ -258,6 +258,8 @@ navigation: title: "Gantt" "*gauge-linear": title: "Gauge - Linear" + "*gauge-circular": + title: "Gauge - Circular" "*listbox": title: "ListBox" "*loader": @@ -286,8 +288,8 @@ navigation: title: "QRCode" "*/radiobutton": title: "RadioButton" - "*radialgauge": - title: "RadialGauge" + "*gauge-radial": + title: "Gauge - Radial" "*rangeslider": title: "RangeSlider" "*responsivepanel": @@ -427,7 +429,10 @@ intro_columns: "Radar Column Charts": "chart-types-radarcolumn" "Radar Line Charts": "chart-types-radarline" "Stock Chart": "stockchart-overview" - "Linear Gauge": "linear-gauge-overview" + "Gauge - Linear": "linear-gauge-overview" + "Gauge - Radial": "radial-gauge-overview" + "Gauge - Arc": "arc-gauge-overview" + "Gauge - Circular": "circular-gauge-overview" - diff --git a/components/gauge-arc/overview.md b/components/gauge-arc/overview.md index d69b7e4136..0a1e96873a 100644 --- a/components/gauge-arc/overview.md +++ b/components/gauge-arc/overview.md @@ -1,8 +1,8 @@ --- title: Overview -page_title: Chart Overview -description: Overview of the Chart for Blazor. -slug: components/chart/overview +page_title: Arc Gauge Overview +description: Overview of the Arc Gauge for Blazor. +slug: arc-gauge-overview tags: telerik,blazor,chart,overview published: True position: 0 diff --git a/components/gauge-circular/overview.md b/components/gauge-circular/overview.md index d69b7e4136..3ef11919d3 100644 --- a/components/gauge-circular/overview.md +++ b/components/gauge-circular/overview.md @@ -2,7 +2,7 @@ title: Overview page_title: Chart Overview description: Overview of the Chart for Blazor. -slug: components/chart/overview +slug: circular-gauge-overview tags: telerik,blazor,chart,overview published: True position: 0 diff --git a/components/gauge-radial/overview.md b/components/gauge-radial/overview.md index d69b7e4136..73fdf3ae66 100644 --- a/components/gauge-radial/overview.md +++ b/components/gauge-radial/overview.md @@ -2,7 +2,7 @@ title: Overview page_title: Chart Overview description: Overview of the Chart for Blazor. -slug: components/chart/overview +slug: radial-gauge-overview tags: telerik,blazor,chart,overview published: True position: 0 From d6cef6e2ef6d1df8cebb51030bfcac4dcf4b39e8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 18 Mar 2021 12:26:45 +0200 Subject: [PATCH 12/21] chore(gauge): improvements overview --- components/gauge-linear/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index 32f5042a59..f3bdd6527b 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -1,5 +1,5 @@ --- -title: Linear Gauge Overview +title: Overview page_title: Linear Gauge Overview description: Overview of the Linear Gauge for Blazor. slug: linear-gauge-overview From 251854761e937a83b04c50c735a9ae1dbcdbd366 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 18 Mar 2021 12:27:57 +0200 Subject: [PATCH 13/21] chore(gauge): fix not working anchor --- components/gauge-linear/scale.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md index 98affa3bc0..cebb0e656d 100644 --- a/components/gauge-linear/scale.md +++ b/components/gauge-linear/scale.md @@ -24,7 +24,7 @@ You can customize the scale of the component by adding an instance of the ` Date: Thu, 18 Mar 2021 12:29:19 +0200 Subject: [PATCH 14/21] chore(gauge); remove class parameter --- components/gauge-linear/ranges.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/gauge-linear/ranges.md b/components/gauge-linear/ranges.md index c06efcb444..16f58069a4 100644 --- a/components/gauge-linear/ranges.md +++ b/components/gauge-linear/ranges.md @@ -18,8 +18,6 @@ You can highlight specific value ranges by providing one or more instances of th * [Opacity](#opacity) -* [Class](#class) - ## From and To * The `From` (`double?`) parameter controls the lowest point in the range. @@ -133,10 +131,6 @@ The `Opacity` (`double`) parameter controls the of the range. The value passed t ```` -## Class - -The `Class` (`string`) parameter renders a custom CSS class on the range. You can use it to provide additional customizations. - ## See Also * [Linear Gauge: Overview]({%slug linear-gauge-overview%}) From ff02193f022ecbf61889e244557825c0eb0c2d32 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Mar 2021 11:32:08 +0200 Subject: [PATCH 15/21] chore(gauge): fix naming in config file --- _config.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_config.yml b/_config.yml index 8527c97328..912f6db115 100644 --- a/_config.yml +++ b/_config.yml @@ -429,10 +429,10 @@ intro_columns: "Radar Column Charts": "chart-types-radarcolumn" "Radar Line Charts": "chart-types-radarline" "Stock Chart": "stockchart-overview" - "Gauge - Linear": "linear-gauge-overview" - "Gauge - Radial": "radial-gauge-overview" - "Gauge - Arc": "arc-gauge-overview" - "Gauge - Circular": "circular-gauge-overview" + "Linear Gauge": "linear-gauge-overview" + "Radial Gauge": "radial-gauge-overview" + "Arc Gauge": "arc-gauge-overview" + "Circular Gauge": "circular-gauge-overview" - From f3cc54f8fa19f088603d164ff289201421b278d8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Mar 2021 12:55:20 +0200 Subject: [PATCH 16/21] chore(gauge): improvements --- components/gauge-linear/overview.md | 18 ++++++++++++------ components/gauge-linear/pointers.md | 6 +++--- components/gauge-linear/scale.md | 6 +++--- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index f3bdd6527b..dec39c6bfd 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -52,19 +52,25 @@ This article is separated in the following sections: The Telerik Linear Gauge for Blazor exposes the following features: -* `Width` - `string` - controls the width of the component. +#### Linear Gauge Size -* `Height` - `string` - controls the height of the component. +* `Width` - `string` - controls the width of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. + +* `Height` - `string` - controls the height of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. + +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. + +#### Other Feautres * `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. -* Scale - See the [Scale]({%slug linear-gauge-scale%}) article for more information on how to customize the scale of the component. +* Scale - The scale of the linear gauge renders the values of the [pointers]({%slug linear-gauge-pointers%}), different [ranges]({%slug linear-gauge-ranges%}) and [labels]({%slug linear-gauge-ranges%}). See the [Scale]({%slug linear-gauge-scale%}) article for more information on how to customize the scale of the component. -* Ranges - See the [Ranges]({%slug linear-gauge-ranges%}) article for more information on how to provide ranges for the scale of the component. +* Ranges - The ranges are used to visually distinguish particular values on the scale. See the [Ranges]({%slug linear-gauge-ranges%}) article for more information on how to provide ranges for the scale of the component. -* Labels - See the [Labels]({%slug linear-gauge-labels%}) article for more information on how to customize the labels on the scale of the component. +* Labels - The labels are rendered on the scale of the component to give information to the users. See the [Labels]({%slug linear-gauge-labels%}) article for more information on how to customize the labels on the scale of the component. -* Pointers - See the [Pointers]({%slug linear-gauge-pointers%}) article for more information on how to customize the pointers of the component. +* Pointers - The pointers indicate the values on the scale of the component. See the [Pointers]({%slug linear-gauge-pointers%}) article for more information on how to customize the pointers of the component. ## Methods diff --git a/components/gauge-linear/pointers.md b/components/gauge-linear/pointers.md index 62bd1c7900..837a8dbe7d 100644 --- a/components/gauge-linear/pointers.md +++ b/components/gauge-linear/pointers.md @@ -69,10 +69,10 @@ The `Color` (`string`) parameter controls the color of the pointers. It accepts - + - + @@ -84,7 +84,7 @@ The `Color` (`string`) parameter controls the color of the pointers. It accepts ## Opacity -The `Opacity` (`double`) parameter controls the of the pointers. The value passed to it should be between **0** and **1**. +The `Opacity` (`double`) parameter controls the opacity of the pointers. The value passed to it should be between **0** and **1**. ````CSHML @* Change the opacity of a pointer *@ diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md index cebb0e656d..f300398f1f 100644 --- a/components/gauge-linear/scale.md +++ b/components/gauge-linear/scale.md @@ -10,7 +10,7 @@ position: 5 ## Linear Gauge Scale -You can customize the scale of the component by adding an instance of the `` to the `` collection, child tag of the ``. The `` 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 `` to the `` collection, child tag of the ``. The `` exposes the following parameters: * [Min and Max](#min-and-max) @@ -62,7 +62,7 @@ You can customize the scale of the component by adding an instance of the `caption Render the labels and the ticks of the scale to the right. The result from the code snippet below From 188eecd614f77e137e1c1335733b3c55737e95af Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Mar 2021 12:55:56 +0200 Subject: [PATCH 17/21] chore(gauge): improvements overview article --- components/gauge-linear/overview.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index dec39c6bfd..26c488196c 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -39,10 +39,6 @@ This article is separated in the following sections: - - - - From 71a257405c484fedc65f92055783c54ecd5aac88 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Mar 2021 12:56:09 +0200 Subject: [PATCH 18/21] chore(gauge): improvements overview article --- components/gauge-linear/overview.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index 26c488196c..4c9bac8d5e 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -81,10 +81,7 @@ The Linear Gauge reference exposes the `Refresh` method which allows you to prog - - - - + From 0f846536b8e3c743039e6d06f6cefc80027aeef5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Mar 2021 13:01:06 +0200 Subject: [PATCH 19/21] chore(gauge): remove tripple pointers from examples where applicable --- components/gauge-linear/scale.md | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md index f300398f1f..1bc1d8dff8 100644 --- a/components/gauge-linear/scale.md +++ b/components/gauge-linear/scale.md @@ -80,12 +80,6 @@ The scale of the linear gauge renders the values, pointers and labels. You can c - - - - - - @@ -110,12 +104,6 @@ If you set the `Mirror` (`bool`) parameter to `true` the scale will render the l - - - - - - @@ -140,12 +128,6 @@ If you set the `Reverse` (`bool`) parameter to `true` the values of the scale wi - - - - - - @@ -170,12 +152,6 @@ The `Vertical` (`bool`) parameter controls the orientation of the linear gauge. - - - - - - @@ -207,12 +183,6 @@ You can remove the MinorUnit ticks from the rendering of the scale by using the - - - - - - From 357d187d8db1a2efcac049dcdd14d89738a86d3f Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Mar 2021 13:11:33 +0200 Subject: [PATCH 20/21] chore(gauge); add customization section --- .../images/labels-custom-borders.png | Bin 0 -> 2524 bytes components/gauge-linear/labels.md | 37 ++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 components/gauge-linear/images/labels-custom-borders.png diff --git a/components/gauge-linear/images/labels-custom-borders.png b/components/gauge-linear/images/labels-custom-borders.png new file mode 100644 index 0000000000000000000000000000000000000000..04f9679bc1c4ebc8d7486f6596b0b0ee5acff067 GIT binary patch literal 2524 zcmaJ@eLU1z7ylI#rZ5_#%(KmS2{kRA+1QF13^REvtf6{O-0S#1m$0q_oz|%9hML)=HEjD)Id6e)jY1=lOh|{o~$q&pG#=`#txZb3Z57 z)5BR4jYk6jpy}#D_X2?RdyzF&eLXT;GQP1z$htT$XGfs+;b&6_qZ&>-NCSWd!N%oa z6vAtqbn%Y^0Ilw|v931;K8DC*UFkH46F76(Jx13TpB=t!r&ogi@d8%Da=J_2t+0O# z9IMO|>N{fxv@ac06s2CcEYZ`C>vYO&8MAc!*+6xNzk%WQ5}G1%>+IlLpJ6$x>Sm|i z@BrD9U@x$%_<;8H{`79&*uT!;-;I zGfXJ*;BxE7#ZFJxg;%Lwt_x+TlE*;JD)BY-hkw{-+;smIFkh*^-qU) zL{8v@8OKpVAza|gMSqV=zN84%C0=)_d*ZAD$8H4gy$Mc6kO0XJzk?`lV8s9WpvWml zYl>MoRKmBo1~#iDc@N@XbMa7uJVvzeG*5-(YK{e@26SyQsXPH=ajwjx}X?-j+99muQ}8l z`B{Ln0y{X=7?x)2d_L+)<9)ncTY;bzOT0E zE55Tr9w~OvG1yB#{j^R&v?k5_Cov_kofEsVe1=V_4ZNE;Ei-3R ztky-b)#oNt5%=5+E&P>aTic}7m9uOL{w=?3e4u1c-H|(C{NC2M$-s`}2);9Ad{4}? zQfiV6FPN6sjkUyfcvv=1lis` zb)pZ)rdS+qc|AYn&8BQWHHy#Bqm8~ zZF!8>)&w+F*c646OOIN`hWhLVYeMn*Vs#m($1KmZ{5lf2;;!N!WSs35-T@hn7=L92 z#Bo&{rYLPv;;1|<$_bC!X~1|fgZ zkT$I8Nvhy5ZEeGUHRRt<8gfNie;D{v!%JVYiS|zfCCa3a@1hT@2#EG6E6c5jH@#ct zEC(^?m=!tN#E!&;KD?j@dqQ{kZqj1@MQZ|Iqqp<<{qM{kU7_BV8qaBv?y6}MkmOue zIlrR_fs37EqDpoHmQ8I-&^0%(`J zR<5fKj^gKNF-z&i*)on5kA&Eyn$wZgUR|1qQfQo5KCu(YAme|U1kdF$P_cLhif>hW z8Gwn=6Sv}nF{X}bxmGDg8hCv+ z=Daxx0MfKIgzJGcpG+74%7+aQ$qDNLp-n<{>(L7VbYs2z<&`9ADTsEA96#s9+vbK4 zKTj|BupWFR4YK+5_M^734`1AQS2FJ^s%hK+gh z$+FYoVJ}a5>Y^+4z;@l15W&i$y}P&)NtBz+h*x;M-PA5$Hv_(=YpEYT$Qls-n5Tp9 zJSurJRW;&3+_)_RcI#M8iJETjHeBu9fku6yCqW|Y@YdJ+RJ9e)shpm0^3?^SmK+1o zB1-6{3YuiVn`zLLfk>RWw#YRQ(J?F=qBC@xZFEh?QtrjmE$a}5BX;nN@QjcQcQVA)?R*2u<2_M@D?z^vv z1+(&HpbuX5zT<(Pm|A6G^vL{Bw7DN0x0xGRu{%NsrxIg#2z!fMWE+^uzF{Q7I77|0 zBa*y`8(aA!mhb}$o465U5k5WsR5Q8RTUBy9KT zTi(BHo!2`|XBpR@pS8P*sxObxTde(lGo!#lJXpJcF}f)UY8sOErh9hS>MNFuTsy90^xV@5|_?uV>N)4F@EqVA?|Ib6s7*c%dQ z#uK%@c80EEa0NtDAv(6&`)o<0x+W;uieY{Ef=+(jmo&7AKJnO+bghs9-F0StlMM?Y z+0IViGUl`7E+6+YKN5Icn+NYVBa!S6&~aYP9$yaj1K+aAbX=$dgpx3R9F4lnfIvqu z;@pDj7#4RLGJYOV_4V?{maAxDW1FD^)XnAfX(LhjMt0v~wVz>F_3F-O>y!?QZzv=w ziksubKTDDzLOOiQ^@+2duie!%0#ctRI5CzwTOx6vC$Lt^$Eh(LSWwg0g0yE1gTEOU z&R~AB*5Q&k#5>$whXVU|ZMR#P#BxPOOPoaJd)`InC(Vk+^GV1356+k@|5Wxvpx|8O zJq7~hTenTwxv-<#^nAvP;C_0?v478ZU7r9{T)hC!V`1`{Ncprg6ESkUcJWq z(`T%h_S^$U_qo4|gDjBHs0brBfLZOC@kpf0;QcCKR*R6A2}icbax-DO9bA$Qy+D1f zM38^uiPqoLiU)Ml=Xk2t&7jnYEoL8*-?%mp-RQ+xu9c!s-R#P89976U`_Wt|`m?6@ zcJ6JU%O2-b5*x30Ra#BNtLOiqb&76&jf0ckAYX(lTY_1oYMb5+F+*3g$6j?fLAaqI z&Crstandard numeric format strings. You can set the values of the labels to showcase, for example, currency, percentage, and so on. @@ -120,6 +122,41 @@ The `Visible` (`bool`) parameter controls wether the labels will be rendered. ```` +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#linear-gauge-additional-customization) + +>caption Customize the borders of the Labels. The result from the code snippet below. + +![Custom Label borders](images/labels-custom-borders.png) + +````CSHTML +@* Provide color, solid outline and custom width to the label borders *@ + + + + + + + + + + + + + + + + + + + + + + + +```` + ## See Also * [Linear Gauge: Overview]({%slug linear-gauge-overview%}) From b5e74f7be770c7083116ec70a8f6f996ff9994f9 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Mar 2021 14:02:39 +0200 Subject: [PATCH 21/21] chore(gauge): custom pointer track --- .../images/custom-pointer-track.png | Bin 0 -> 1421 bytes components/gauge-linear/pointers.md | 21 ++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 components/gauge-linear/images/custom-pointer-track.png diff --git a/components/gauge-linear/images/custom-pointer-track.png b/components/gauge-linear/images/custom-pointer-track.png new file mode 100644 index 0000000000000000000000000000000000000000..bd974ae77db5351871d143dff95655239e591b43 GIT binary patch literal 1421 zcmV;81#Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1tLjAK~#8N?VUku z6G0Tm{g_@nN$J%u(0~`u9wg-2L!lOWC?S=CAk|b5Oa-an$wR>QU`uLgX-R3~o1MvI zlg=Awy8CwCl=mY@jT8Ot^uOacZ)SZm%^9&zhuEh>?9=gh?FXF|ORIaV-#qTN^gHcC z{YFYW_Q$=ody0o`&>p}SC%x86t9PQ`O@_yQ(7xxVI=-Xi^|je=NGfo9)w?s+dRh~* zWQ|p>%#~E-2*La^4sLHlQgm}6y3pU4{ngdg&tQhbA$(+SZ}06r;7$D-dhp$~b7of( z()UsJ-EJ2?LT_J$r}o?*92~%p_1n8e>mGBc>;aVxO(`L<1Ukv^>t`NVqXgr zFa3TW+VHjaLztWf;BF7OhhY(ed+z;6a?+7O?myy4?$g2D{`&g*7tZePF0|ome|dTN z17~Mv2iowp_anKdkhAsu2* z3FQ6*j^sWa-0g2}ZhqrvMZWeI7Z=}gwzs#T4PSddl6yaki`}tn$fMEdE6(QTCbXfm zFUmgFK7RfF_V)HK4h;FwhRPm#y47i0(QIlb3e~~wL8+TV>Q+$@+Jm18_uM|HW(ZRQ z_=5u>n<+rVwOo#UujCd`7m!u%HRa(Yqne>%QS<>d!}mBcLrw>G`|)`E2M59fZTQ-s zpPzrj+1lEIHhk^tUGBGqP;$7^pF!OJV%v8%9t$n0(PK^=OVxyG-6L+;H^A{R~M-j+-< ztUi?bKAXyq#-!YwGYqP_`L{4GVRtlsdh>eeRaf5^*HBzQNZmXr-QrwWHNy{Glo4C&(t1r zZ=OEjLUNxD?)LtNqQIaDZNxqWl6y+>9x?O&+scpRo)VcMqlkS4GRVDI{cs_oSVK;;3JaFA;zFs=5Wjw(eg$0hH}O*r3GHp|B&2Q?1--pZOIXeD!BsZ`d!;_l zcSzsEytgQ324O3n_1hQ2i|%zpKDnOc_%0DyVehRa>{G=KQf)>N`wC=`d$W_sh2%aR-0l4v90_+c z)bd4>y$B&P!0?O~>1PA9pLnL;|mo)XBtIgRQ5M=aHsJ8ns{OZ^YjJ*pnq- z(1edL>ia1B;cy5a0nwvZFPB~f_I2l8bA(`i87I;{e#{{y);@Z?CnesV6JnnZu}??N b_S5Mcaption Customize the Pointer Track. The result from the code snippet below. + +![custom pointer track](images/custom-pointer-track.png) + +````CSHTML +@* Customize the pointer track *@ + + + + + + + + + + + + + +```` + ## See Also * [Linear Gauge: Overview]({%slug linear-gauge-overview%})