Result Range VisualizerCommunity Asset

<script setup lang="ts">
const interactiveLow = ref(0)
const interactiveHigh = ref(10)
const interactiveValue = ref(5)

const rangeDisplay = computed(() => {
  const low = interactiveLow.value
  const high = interactiveHigh.value

  const isLowEmpty = low === null || low === undefined || isNaN(low)
  const isHighEmpty = high === null || high === undefined || isNaN(high)

  if (isLowEmpty && isHighEmpty) {
    return 'No range'
  }
  if (isLowEmpty) {
    return `Below ${high}`
  }
  if (isHighEmpty) {
    return `Above ${low}`
  }
  return `${low} - ${high}`
})
</script>

<template>
  <div class="n-stack n-gap-m">
    <h3>Interactive Example</h3>
    <div class="n-stack n-gap-m n-padding-m n-border n-border-radius-m">
      <div class="n-stack-horizontal n-gap-m n-items-center">
        <UiResultRangeVisualizer
          :low="!isNaN(interactiveLow) ? interactiveLow : undefined"
          :high="!isNaN(interactiveHigh) ? interactiveHigh : undefined"
          :value="interactiveValue"
        />
        <div class="n-stack n-gap-s">
          <div>Range: {{ rangeDisplay }}</div>
          <div>Value: {{ interactiveValue }}</div>
        </div>
      </div>
      <div class="n-stack-horizontal">
        <div class="n-stack n-gap-s">
          <label for="low-input">Low:</label>
          <input
            id="low-input"
            v-model.number="interactiveLow"
            type="number"
            min="0"
            class="n-input"
            step="0.1"
            placeholder="Leave empty for 'Below'"
          />
        </div>
        <div class="n-stack n-gap-s">
          <label for="high-input">High:</label>
          <input
            id="high-input"
            v-model.number="interactiveHigh"
            type="number"
            min="0"
            class="n-input"
            step="0.1"
            placeholder="Leave empty for 'Above'"
          />
        </div>
        <div class="n-stack n-gap-s">
          <label for="value-input">Value:</label>
          <input
            id="value-input"
            v-model.number="interactiveValue"
            type="number"
            min="0"
            class="n-input"
            step="0.1"
          />
        </div>
      </div>
    </div>

    <h3>Safe Zone Examples</h3>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="5" :high="15" :value="10" />
      <div>
        <div>Range: 5 - 15</div>
        <div>Value: 10 (in the middle)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="5.5" :high="8.5" :value="6.2" />
      <div>
        <div>Range: 5.5 - 8.5</div>
        <div>Value: 6.2</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="6" :high="17" :value="17" />
      <div>
        <div>Range: 6 - 17</div>
        <div>Value: 17 (on the edge high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="10" :high="20" :value="10" />
      <div>
        <div>Range: 10 - 20</div>
        <div>Value: 10 (on the edge low)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="8" :high="8" :value="8" />
      <div>
        <div>Range: 8 - 8</div>
        <div>Value: 8 (exactly on both bounds)</div>
      </div>
    </div>

    <h3>Danger Zone Examples</h3>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="37" :high="55" :value="23" />
      <div>
        <div>Range: 37 - 55</div>
        <div>Value: 23 (below low)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="37" :high="55" :value="62" />
      <div>
        <div>Range: 37 - 55</div>
        <div>Value: 62 (above high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="20" :high="30" :value="5" />
      <div>
        <div>Range: 20 - 30</div>
        <div>Value: 5 (far below low)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="8" :high="8" :value="12" />
      <div>
        <div>Range: 8 - 8</div>
        <div>Value: 12 (above high)</div>
      </div>
    </div>

    <h3>Single Bound Examples</h3>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="4" :value="18" />
      <div>
        <div>Range: above 4</div>
        <div>Value: 18 (normal - above low)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="4" :value="2" />
      <div>
        <div>Range: above 4</div>
        <div>Value: 2 (below low)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :high="20" :value="7" />
      <div>
        <div>Range: below 20</div>
        <div>Value: 7 (normal - below high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :high="20" :value="25" />
      <div>
        <div>Range: below 20</div>
        <div>Value: 25 (above high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="3.5" :value="7.2" />
      <div>
        <div>Range: above 3.5</div>
        <div>Value: 7.2 (normal - above low)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="3.5" :value="2.1" />
      <div>
        <div>Range: above 3.5</div>
        <div>Value: 2.1 (below low)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :high="15.8" :value="12.3" />
      <div>
        <div>Range: below 15.8</div>
        <div>Value: 12.3 (normal - below high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :high="15.8" :value="18.7" />
      <div>
        <div>Range: below 15.8</div>
        <div>Value: 18.7 (above high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0.5" :value="0.5" />
      <div>
        <div>Range: above 0.5</div>
        <div>Value: 0.5 (exactly on the lower bound)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :high="100" :value="100" />
      <div>
        <div>Range: below 100</div>
        <div>Value: 100 (exactly on the upper bound)</div>
      </div>
    </div>

    <h3>Zero Lower Bound Examples</h3>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0" :high="10" :value="5" />
      <div>
        <div>Range: 0 - 10</div>
        <div>Value: 5 (normal range with low=0)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0" :high="10" :value="1" />
      <div>
        <div>Range: 0 - 10</div>
        <div>Value: 1 (normal - above lower bound of 0)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0" :high="10" :value="3" />
      <div>
        <div>Range: 0 - 10</div>
        <div>Value: 3 (normal - above lower bound of 0)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0" :high="10" :value="7" />
      <div>
        <div>Range: 0 - 10</div>
        <div>Value: 7 (normal - above lower bound of 0)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0" :high="10" :value="13" />
      <div>
        <div>Range: 0 - 10</div>
        <div>Value: 13 (above high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0" :high="10" :value="50" />
      <div>
        <div>Range: 0 - 10</div>
        <div>Value: 50 (far above high)</div>
      </div>
    </div>
    <div class="n-stack-horizontal n-gap-m n-items-center">
      <UiResultRangeVisualizer :low="0" :value="3" />
      <div>
        <div>Range: above 0</div>
        <div>Value: 3 (normal - above lower bound of 0)</div>
      </div>
    </div>
  </div>
</template>