search

pnp / List-Formatting

List Formatting Samples for use in SharePoint and Microsoft Lists
https://pnp.github.io/List-Formatting/
MIT License
1.74k stars 833 forks source link

Generic gauge sample - Is there an easy way to resize the gauge? #607

Closed samg365 closed 1 year ago

samg365 commented 1 year ago

Sample (which sample are you talking about)

generic gauge sample

Question (the more details, the better)

Is there a way to easily resize the size of the gauge and pointer? It is great but want to make the gauge larger if possible.

Thanks

Fedes365 commented 1 year ago

@samg365 Added few lines of code to make it larger:

immagine

Here is the code I used:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "margin-top": "8px", "width": "160px" }, "attributes": { "title": "@currentField" }, "children": [ { "elmType": "svg", "attributes": { "viewBox": "0 0 60 34" }, "children": [ { "elmType": "path", "style": { "fill": "#000000" }, "attributes": { "d": "m 29.994597,26.96385 a 3.0005242,2.9995135 0 0 0 -3.000562,2.99954 h 6.001125 a 3.0005242,2.9995135 0 0 0 -3.000563,-2.99954 z" } }, { "elmType": "path", "style": { "fill": "#c23800" }, "attributes": { "d": "m 26.563585,19.290748 a 11.251965,11.248175 36 0 0 -5.65065,4.084052 l 3.03227,2.203073 a 7.5013097,7.4987832 36 0 1 3.775342,-2.72672 z" } }, { "elmType": "path", "style": { "fill": "#ea4300" }, "attributes": { "d": "M 20.776908,1.4816213 A 30.005242,29.995135 36 0 0 5.7503318,12.358524 L 20.912935,23.3748 a 11.251965,11.248175 36 0 1 5.650003,-4.085799 z" } }, { "elmType": "path", "style": { "fill": "#d89d00" }, "attributes": { "d": "m 33.540525,19.323632 a 11.251965,11.248175 72 0 0 -6.972018,-0.0173 l 1.158225,3.564647 a 7.5013097,7.4987832 72 0 1 4.657041,0.01313 z" } }, { "elmType": "path", "style": { "fill": "#ffb900" }, "attributes": { "d": "M 39.326947,1.514422 A 30.005242,29.995135 72 0 0 20.776908,1.4816213 l 5.791599,17.8247097 a 11.251965,11.248175 72 0 1 6.972521,0.01551 z" } }, { "elmType": "path", "style": { "fill": "#99b208" }, "attributes": { "d": "m 39.170837,23.435679 a 11.248175,11.251965 18 0 0 -5.630312,-4.112046 l -1.158224,3.564648 a 7.4987832,7.5013097 18 0 1 3.759908,2.747962 z" } }, { "elmType": "path", "style": { "fill": "#bad80a" }, "attributes": { "d": "M 54.320142,12.428898 A 29.995135,30.005242 18 0 0 39.332125,1.4989228 l -5.7916,17.8247092 a 11.248175,11.251965 18 0 1 5.631772,4.110893 z" } }, { "elmType": "path", "style": { "fill": "#0c580c" }, "attributes": { "d": "M 41.308854,30.071809 A 11.248175,11.251965 54 0 0 39.170836,23.43568 l -3.03227,2.203073 a 7.4987832,7.5013097 54 0 1 1.426617,4.433167 z" } }, { "elmType": "path", "style": { "fill": "#107c10" }, "attributes": { "d": "M 60.034523,30.071674 A 29.995135,30.005242 54 0 0 54.333441,12.419403 L 39.170837,23.435679 a 11.248175,11.251965 54 0 1 2.139877,6.636055 z" } }, { "elmType": "path", "style": { "fill": "#b3292c" }, "attributes": { "d": "m 18.774918,30.01093 a 11.251965,11.248175 36 0 1 2.138018,-6.636129 l 3.03227,2.203073 a 7.5013097,7.4987832 36 0 0 -1.426617,4.433167 z" } }, { "elmType": "path", "style": { "fill": "#d13438" }, "attributes": { "d": "M 0.049249,30.010795 A 30.005242,29.995135 36 0 1 5.750331,12.358524 L 20.912935,23.3748 a 11.251965,11.248175 36 0 0 -2.139877,6.636055 z" } }, { "elmType": "path", "style": { "fill": "#000000" }, "attributes": { "d": "='M 28 29 L ' + toString(30+26*cos(3.14159265+3.14159265*if(@currentField=='On Track',.9,if(@currentField=='Some Concerns',.7,if(@currentField=='At Risk',.5,if(@currentField=='Off Track',.3,.1)))))+if(@currentField=='Critical' || @currentField=='Off Track',-1,0)) + ' ' + toString(30+26*sin(3.14159265+3.14159265*if(@currentField=='On Track',.9,if(@currentField=='Some Concerns',.7,if(@currentField=='At Risk',.5,if(@currentField=='Off Track',.3,.1)))))+if(@currentField=='Critical',2,0)) + ' L ' + toString(30+26*cos(3.14159265+3.14159265*if(@currentField=='On Track',.9,if(@currentField=='Some Concerns',.7,if(@currentField=='At Risk',.5,if(@currentField=='Off Track',.3,.1)))))+if(@currentField=='On Track' || @currentField=='Some Concerns',1,0)) + ' ' + toString(30+26*sin(3.14159265+3.14159265*if(@currentField=='On Track',.9,if(@currentField=='Some Concerns',.7,if(@currentField=='At Risk',.5,if(@currentField=='Off Track',.3,.1)))))+if(@currentField=='On Track',2,0)) +' L 32 29 Z'" } } ] } ] }

samg365 commented 1 year ago

Thanks @Fedes365