Documentation Index Fetch the complete documentation index at: https://docs.omni.co/llms.txt
Use this file to discover all available pages before exploring further.
Squares will automatically adjust size and wrap to the next line.
Setup These charts use the Mustache iterator syntax to draw a shape for each row in the results. Your query should have a dimension that determines the number of pies and their labels and the values for the numerator and denominator to calculate the percentage fill. Then you’ll need to add a lot calculations. The following table explains each field used in the example, including the calculation formulas.
This chart is a bit crazy. We’re not actually drawing 100 tiny squares for each waffle shape, but instead filling 10 bars per waffle and drawing some dividers on top of them to simulate a waffle.
Col Name Description or formula Purpose A Category query field determines number of waffles to make and their labels B Products Count query field denominator for % calculation C Products over $50 query field numerator for % calculation D % over $50 (calc_1) =C1 / B1 calculation for filling waffle squares, label E 1s (calc_5) =IF(D1 >= 10, 100, 10 * D1) how far to fill the 1s bar F 10s (calc_6) =IF(D1 >= 20, 100, MAX(0, (D1 - 10)) * 10) how far to fill the 10s bar G 20s (calc_7) =IF(D1 >= 30, 100, MAX(0, (D1 - 20)) * 10) how far to fill the 20s bar H 30s (calc_8) =IF(D1 >= 40, 100, MAX(0, (D1 - 30)) * 10) how far to fill the 30s bar I 40s (calc_9) =IF(D1 >= 50, 100, MAX(0, (D1 - 40)) * 10) how far to fill the 40s bar J 50s (calc_10) =IF(D1 >= 60, 100, MAX(0, (D1 - 50)) * 10) how far to fill the 50s bar K 60s (calc_11) =IF(D1 >= 70, 100, MAX(0, (D1 - 60)) * 10) how far to fill the 60s bar L 70s (calc_12) =IF(D1 >= 80, 100, MAX(0, (D1 - 70)) * 10) how far to fill the 70s bar M 80s (calc_13) =IF(D1 >= 90, 100, MAX(0, (D1 - 80)) * 10) how far to fill the 80s bar N 90s (calc_14) =IF(D1 >= 100, 100, MAX(0, (D1 - 90)) * 10) how far to fill the 90s bar
Example code < style > h3 { margin-top : 0 ; } .percent-fill-boxes { & ul { list-style : none ; margin : 0 ; padding : 0 ; display : grid ; grid-template-columns : repeat ( auto-fit , minmax ( 100 px , 1 fr )); gap : var ( --size4 ); } & li { list-style : none ; margin : 0 ; padding : 0 ; } & p { list-style : none ; margin : 0 ; padding : 0 ; } & .big-box { --grid-background-color : var ( --color-background ); width : 100 % ; aspect-ratio : 1 / 1 ; position : relative ; display : grid ; grid-template-rows : repeat ( 10 , 1 fr ); gap : 2 % ; } & .big-box p { background-color : var ( --color-border2 ); width : 100 % ; position : relative ; & . row-fill { background-color : var ( --color-info ); display : block ; height : 100 % ; } & .row-dividers { position : absolute ; width : 100 % ; height : 100 % ; top : 0 ; left : 0 ; background-image : linear-gradient ( 90 deg , var ( --grid-background-color ) 0 % , var ( --grid-background-color ) 1 % , transparent 1 % , transparent 9 % , var ( --grid-background-color ) 9 % , var ( --grid-background-color ) 11 % , transparent 11 % , transparent 19 % , var ( --grid-background-color ) 19 % , var ( --grid-background-color ) 21 % , transparent 21 % , transparent 29 % , var ( --grid-background-color ) 29 % , var ( --grid-background-color ) 31 % , transparent 31 % , transparent 39 % , var ( --grid-background-color ) 39 % , var ( --grid-background-color ) 41 % , transparent 41 % , transparent 49 % , var ( --grid-background-color ) 49 % , var ( --grid-background-color ) 51 % , transparent 51 % , transparent 59 % , var ( --grid-background-color ) 59 % , var ( --grid-background-color ) 61 % , transparent 61 % , transparent 69 % , var ( --grid-background-color ) 69 % , var ( --grid-background-color ) 71 % , transparent 71 % , transparent 79 % , var ( --grid-background-color ) 79 % , var ( --grid-background-color ) 81 % , transparent 81 % , transparent 89 % , var ( --grid-background-color ) 89 % , var ( --grid-background-color ) 91 % , transparent 91 % , transparent 99 % , var ( --grid-background-color ) 99 % , var ( --grid-background-color ) 100 % ); } } & p .label { text-align : left ; } } </ style > < article class = "percent-fill-boxes" > < h3 > % of products over $50 </ h3 > < ul > {{#result}} < li > < div class = "big-box" " > < p class = "d9" >< span class = "row-fill" style = "width: {{calc_14.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d8" >< span class = "row-fill" style = "width: {{calc_13.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d7" >< span class = "row-fill" style = "width: {{calc_12.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d6" >< span class = "row-fill" style = "width: {{calc_11.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d5" >< span class = "row-fill" style = "width: {{calc_10.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d4" >< span class = "row-fill" style = "width: {{calc_9.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d3" >< span class = "row-fill" style = "width: {{calc_8.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d2" >< span class = "row-fill" style = "width: {{calc_7.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d1" >< span class = "row-fill" style = "width: {{calc_6.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > < p class = "d0" >< span class = "row-fill" style = "width: {{calc_5.value}}%" ></ span >< span class = "row-dividers" ></ span ></ p > </ div > < p class = "label" > < span > {{products.category.value}} • {{calc_1.value}}% </ span > </ p > </ li > {{/result}} </ ul > </ article >
