<template>
  <loading-card :loading="loading" class="metric px-6 py-4 relative">
    <div class="flex mb-4">
      <h3 class="mr-3 text-base text-80 font-bold">{{ card.name }}</h3>
    </div>
    
    <p class="flex items-center text-4xl mb-4">{{ value }}</p>
  </loading-card>
</template>

<script>
export default {
  props: {
    card: {
      type: Object,
      required: true,
    },
    resourceName: {
      type: String,
      default: '',
    },
    resourceId: {
      type: Number,
      default: 0,
    },
  },
  data: function() {
    return {
      loading: true,
      value: '',
    };
  },
  mounted: function() {
    var url = '/nova-api/' + this.resourceName + '/' + this.resourceId + '/metrics/' + this.card.uriKey;
    console.log(this.card);

    var thisObj = this;
    Nova.request().get(url).then(function(response) {
      thisObj.value = response.data.value.value;
      thisObj.title = response.data.value.title;
      thisObj.loading = false;
    });
  },
}
</script>

<template>
  <loading-card :loading="loading" class="metric px-6 py-4 relative">
    <div class="flex mb-4">
      <h3 class="mr-3 text-base text-80 font-bold">{{ card.name }}</h3>

      <select v-if="card.ranges.length > 0" @change="refresh" class="ml-auto min-w-24 h-6 text-xs no-appearance bg-40">
        <option v-for="range in card.ranges" :key="range.value" :value="range.value" :selected="range.value == selectedRange">{{ range.label }}</option>
      </select>
    </div>

    <p class="flex items-center text-4xl mb-4">{{ value }}</p>
  </loading-card>
</template>

<script>
export default {
  props: {
    card: {
      type: Object,
      required: true,
    },
    resourceName: {
      type: String,
      default: '',
    },
    resourceId: {
      type: Number,
      default: 0,
    },
  },
  data: function() {
    return {
      loading: true,
      value: '',
      url: '',
      selectedRange: null,
    };
  },
  mounted: function() {
    this.url = '/nova-api/' + this.resourceName + '/' + this.resourceId + '/metrics/' + this.card.uriKey;

    this.refresh();
  },
  methods: {
    refresh: function() {
      this.loading = true;

      var thisObj = this;
      Nova.request().get(this.url, this.card.ranges.length > 0 ? {params: {range: this.selectedRange}} : {}).then(function(response) {
        thisObj.value = response.data.value.value;
        thisObj.title = response.data.value.title;
        thisObj.loading = false;
      });
    },
  },
}
</script>

Support ranges on text metrics
Support ranges on text metrics
