docs(VSparkline): update heart-rate example and add new dashboard cards

packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue

@@ -0,0 +1,112 @@
+<template>
+  <v-row dense>
+    <v-col v-for="(card, i) in cards" :key="i" cols="12" md="4">
+      <v-card elevation="4">
+        <div class="pa-4">
+          <div class="ps-4 text-caption text-medium-emphasis">{{ card.title }}</div>
+
+          <v-card-title class="pt-0 mt-n1 d-flex align-center">
+            <div class="me-2">{{ card.value }}</div>
+
+            <v-chip
+              :color="card.color"
+              :prepend-icon="`mdi-arrow-${card.change.startsWith('-') ? 'down' : 'up'}`"
+              class="pe-1"
+              size="x-small"
+              label
+            >
+              <template v-slot:prepend>
+                <v-icon size="10"></v-icon>
+              </template>
+
+              <span class="text-caption">{{ card.change }}</span>
+            </v-chip>
+          </v-card-title>
+        </div>
+
+        <v-sparkline
+          :color="card.color"
+          :gradient="[`${card.color}E6`, `${card.color}33`, `${card.color}00`]"
+          :model-value="card.data"
+          height="50"
+          line-width="1"
+          min="0"
+          padding="0"
+          fill
+          smooth
+        ></v-sparkline>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+
+  const bandwidth = [5, 2, 5, 9, 5, 10, 3, 5, 3, 7, 1, 8, 2, 9, 6]
+  const requests = [1, 3, 8, 2, 9, 5, 10, 3, 5, 3, 7, 6, 8, 2, 9, 6]
+  const cache = [9, 9, 9, 9, 8.9, 9, 9, 9, 9, 9]
+
+  const cards = computed(() => ([
+    {
+      title: 'Bandwidth Used',
+      value: '1.01 TB',
+      change: '-20.12%',
+      color: '#da5656',
+      data: bandwidth,
+    },
+    {
+      title: 'Requests Served',
+      value: '7.96 M',
+      change: '-7.73%',
+      color: '#da5656',
+      data: requests,
+    },
+    {
+      title: 'Cache Hit Rate',
+      value: '95.69 %',
+      change: '0.75%',
+      color: '#2fc584',
+      data: cache,
+    },
+  ]))
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        bandwidth: [5, 2, 5, 9, 5, 10, 3, 5, 3, 7, 1, 8, 2, 9, 6],
+        requests: [1, 3, 8, 2, 9, 5, 10, 3, 5, 3, 7, 6, 8, 2, 9, 6],
+        cache: [9, 9, 9, 9, 8.9, 9, 9, 9, 9, 9],
+      }
+    },
+    computed: {
+      cards () {
+        return [
+          {
+            title: 'Bandwidth Used',
+            value: '1.01 TB',
+            change: '-20.12%',
+            color: '#da5656',
+            data: this.bandwidth,
+          },
+          {
+            title: 'Requests Served',
+            value: '7.96 M',
+            change: '-7.73%',
+            color: '#da5656',
+            data: this.requests,
+          },
+          {
+            title: 'Cache Hit Rate',
+            value: '95.69 %',
+            change: '0.75%',
+            color: '#2fc584',
+            data: this.cache,
+          },
+        ]
+      },
+    },
+  }
+</script>

packages/docs/src/examples/v-sparkline/misc-heart-rate.vue

@@ -1,12 +1,12 @@
 <template>
   <v-card
     class="mx-auto"
-    color="grey-lighten-4"
+    color="surface-light"
     max-width="600"
   >
     <template v-slot:prepend>
       <v-icon
-        :color="checking ? 'red lighten-2' : 'indigo'"
+        :color="checking ? 'red lighten-2' : 'indigo-lighten-2'"
         class="me-8"
         icon="mdi-heart-pulse"
         size="64"

packages/docs/src/pages/en/components/sparklines.md

@@ -79,3 +79,9 @@ The `v-sparkline` component pairs nicely with `v-card` and `v-sheet` to create c
 For concise information, a complete chart might be overkill. Using a trend line with gradient provides enough detail for the user without showing too much information.
 
 <ExamplesExample file="v-sparkline/misc-heart-rate" />
+
+#### Dashboard cards
+
+The `v-sparkline` component can be used to create a variety of different cards for a dashboard. Here we show a few examples of how it can be used to display different types of data.
+
+<ExamplesExample file="v-sparkline/misc-dashboard-cards" />