{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": "true",
  "hideColumnHeader": "true",
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "align-items": "flex-end",
      "width": "800px",
      "box-sizing": "border-box",
      "border-left": "3px solid"
    },
    "attributes": {
      "class": "ms-fontColor-themeDark"
    },
    "children": [
      {
        "elmType": "span",
        "txtContent": "Fruits",
        "style": {
          "display": "=if([$IsLastItem], 'block','none')",
          "position": "absolute",
          "left": "-21px",
          "top": "=@rowIndex*70 -130 + 'px'",
          "width": "12px",
          "text-align": "center",
          "font-size": "24px",
          "line-height": "22px"
        }
      },
      {
        "elmType": "span",
        "style": {
          "display": "=if([$IsLastItem], 'block','none')",
          "position": "absolute",
          "left": "-27px",
          "top": "=@rowIndex*70 + 'px'",
          "width": "10px",
          "font-size": "24px"
        },
        "attributes": {
          "iconName": "ChevronUp"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "=@rowIndex*65 + 'px'",
          "left": "=(700 / 1000) * (800 - 45) + 'px'",
          "border-left": "3px dashed",
          "width": "2px",
          "height": "65px"
        },
        "attributes": {
          "class": "animated zoomIn"
        }
      },
      {
        "elmType": "span",
        "style": {
          "display": "=if([$IsLastItem], 'block','none')",
          "position": "absolute",
          "left": "4px",
          "top": "=@rowIndex*70+48 + 'px'",
          "font-size": "24px"
        },
        "attributes": {
          "iconName": "ChevronRight"
        }
      },
      {
        "elmType": "span",
        "txtContent": "Votes",
        "style": {
          "display": "=if([$IsLastItem], 'block','none')",
          "position": "absolute",
          "left": "28px",
          "top": "=@rowIndex*70+48 + 'px'",
          "font-size": "24px",
          "line-height": "24px"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "display": "=if([$IsLastItem], 'block','none')",
          "left": "px",
          "top": "=@rowIndex*70+42 + 'px'",
          "border-bottom": "3px solid",
          "width": "800px",
          "height": "2px"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "=if([$Votes] >= 700, 'ms-bgColor-themeDarker ms-fontColor-white ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-font-m animated bounceInLeft delay-1s', 'ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-font-m animated bounceInLeft delay-1s')",
          "title": "=[$Title] + ' has ' + [$Votes] + ' Votes' + if([$Votes] >= 700, ' and is trending.','.')"
        },
        "style": {
          "height": "56px",
          "width": "=if([$Votes] >= 1000, (800 - 45) + 'px', ([$Votes] / 1000) * (800 - 45) + 'px')",
          "margin": "5px 0px",
          "box-shadow": "2px 0px 4px 0px darkgrey",
          "box-sizing": "border-box",
          "padding": "15px 10px",
          "border-right": "2px solid",
          "z-index": "1"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "margin-top": "-12px",
              "margin-bottom": "10px",
              "display": "=if([$IsHighest], 'block','none')",
              "color": "#FFD700",
              "font-size": "42px",
              "float": "right"
            },
            "attributes": {
              "iconName": "CrownSolid"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if([$Votes] >= 700, 'block','none')",
              "float": "right",
              "margin-left": "5px",
              "margin-right": "5px"
            },
            "attributes": {
              "iconName": "Trending12"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=if([$Votes] > 1000, '1000+', [$Votes])",
            "style": {
              "display": "block",
              "float": "right"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Title]",
            "style": {
              "display": "block",
              "float": "left"
            }
          },
          {
            "elmType": "img",
            "attributes": {
              "src": "[$Icon]"
            },
            "style": {
              "display": "block",
              "float": "left",
              "width": "20px",
              "margin-left": "5px"
            }
          }
        ]
      }
    ]
  }
}