How to display risk on a spectrum low to high?

I'm looking for a component that can help me display a result on a "spectrum" of risk from low to high.


For example, the risk spectrum is 0-100 where 0-33 = LOW, 34-66 MODERATE, and 67-100 HIGH

If the underlying data results in 45, I want to be able to display that on a dashboard that indicates that that is a MODERATE result - would love for it to be displayed/overlaid atop the spectrum for context but can't seem to find a good, common, pattern for this.

Thanks!

  Discussion posts and replies are publicly visible

Parents Reply Children
  • 0
    Appian Employee
    in reply to BenMc

    Ah, ok, so it's not as intuitive but you can add reference lines onto column/bar charts (depends if you want the bar to be vertical/horizontal), have the reference lines as the thresholds you describe and the colour your column/bar red/amber/green as appropriate...that's one suggestion...I'll see if there's anything else a bit more intuitive

  • 0
    Certified Senior Developer
    in reply to BenMc


    Something like this with richTextDisplayField works? If so below is something that might help. You can try to write in a more efficient way.

    a!localVariables(
      local!value: 77 / 10,
      local!items: (enumerate(10) + 1),
      {
        a!richTextDisplayField(
          marginBelow: "NONE",
          align: "CENTER",
          value: a!forEach(
            items: local!items,
            expression: {
              a!richTextIcon(
                icon: if(
                  fv!index <= local!value,
                  "circle-large",
                  if(
                    (fv!index - 0.5) <= local!value,
                    "adjust",
                    "circle-o-large"
                  )
                ),
                size: "LARGE",
                caption: fv!item * 10,
                color: if(
                  fv!item <= 3,
                  "POSITIVE",
                  if(
                    and(fv!item > 3, fv!item <= 6),
                    "#F4C430",
                    "#FF0000",
                    
                  )
                )
              ),
              char(32)
            }
          )
        ),
        a!richTextDisplayField(
          marginAbove: "NONE",
          align: "CENTER",
          value: a!richTextItem(
            text: local!value * 10,
            size: "LARGE",
            style: "STRONG",
            color: "SECONDARY"
          )
        )
      }
    )