packages/docs/src/examples/v-heatmap/usage.vue - master - githubmirror/vuetify

packages/docs/src/examples/v-heatmap/usage.vue
136 строк4 KB
J-Sek
chore(VHeatmap): simplfy `rounded`, cell is legend-cell
16 май 2026, 04:34
16 май 2026, 04:34d336bde
<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
    :script="script"
  >
    <div class="d-flex justify-center">
      <v-heatmap v-bind="{ ...props, columns, items, thresholds }"></v-heatmap>
    </div>

    <template v-slot:configuration>
      <v-checkbox v-model="hideColumnHeaders" label="Hide column headers" hide-details></v-checkbox>
      <v-checkbox v-model="hideRowHeaders" label="Hide row headers" hide-details></v-checkbox>
      <v-checkbox v-model="showLegend" label="Show legend" hide-details></v-checkbox>
      <v-checkbox v-model="hover" label="Hover effect" hide-details></v-checkbox>

      <v-slider
        v-model="cellSize"
        label="Cell size"
        max="48"
        min="24"
      ></v-slider>

      <v-slider
        v-model="gap"
        label="Gap"
        max="20"
        min="0"
      ></v-slider>

      <v-slider
        v-model="roundedIndex"
        :ticks="Object.fromEntries(roundedOptions.map((v, i) => [i, v]))"
        label="Rounded"
        max="5"
        min="0"
        step="1"
      ></v-slider>
    </template>
  </ExamplesUsageExample>
</template>

<script setup>
  const name = 'v-heatmap'
  const model = ref('default')
  const options = []

  const columns = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  const thresholds = [
    { min: 1, color: '#cfe0ff' },
    { min: 3, color: '#89a7ff' },
    { min: 6, color: '#4a76e8' },
    { min: 9, color: '#1e47c2' },
  ]

  // 5 weeks of pseudo-random activity
  const values = [
    null, 0, 2, 5, 4, 1, 0,
    1, 3, 4, 7, 2, 1, 0,
    0, 2, 5, 9, 6, 3, 1,
    0, 1, 3, 4, 2, 0, 0,
    2, 4, 6, 4, 0,
  ]
  const items = values.flatMap((value, i) =>
    value !== null
      ? [{
        row: `W${Math.floor(i / 7) + 1}`,
        column: columns[i % 7],
        value,
      }]
      : []
  )

  const hideColumnHeaders = ref(false)
  const hideRowHeaders = ref(false)
  const showLegend = ref(true)
  const hover = ref(false)
  const cellSize = ref(32)
  const gap = ref(6)
  const roundedOptions = ['0', '2', '4', '8', '24', '999']
  const roundedIndex = ref(2)
  const rounded = computed(() => roundedOptions[roundedIndex.value])

  const props = computed(() => {
    return {
      'cell-size': cellSize.value !== 26 ? cellSize.value : undefined,
      gap: gap.value !== 6 ? gap.value : undefined,
      'hide-column-headers': hideColumnHeaders.value || undefined,
      'hide-row-headers': hideRowHeaders.value || undefined,
      legend: showLegend.value || undefined,
      hover: hover.value || undefined,
      rounded: rounded.value,
    }
  })

  const script = computed(() => {
    return `<${''}script setup>
  const columns = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  const thresholds = [
    { min: 1, color: '#cfe0ff' },
    { min: 3, color: '#89a7ff' },
    { min: 6, color: '#4a76e8' },
    { min: 9, color: '#1e47c2' },
  ]
  const items = [
    { row: 'W1', column: 'Mon', value: null },
    { row: 'W1', column: 'Tue', value: 0 },
    { row: 'W1', column: 'Wed', value: 2 },
    { row: 'W1', column: 'Thu', value: 5 },
    { row: 'W1', column: 'Fri', value: 4 },
    { row: 'W1', column: 'Sat', value: 1 },
    { row: 'W1', column: 'Sun', value: 0 },
    { row: 'W2', column: 'Mon', value: 1 },
    { row: 'W2', column: 'Tue', value: 3 },
    { row: 'W2', column: 'Wed', value: 4 },
    { row: 'W2', column: 'Thu', value: 7 },
    { row: 'W2', column: 'Fri', value: 2 },
    { row: 'W2', column: 'Sat', value: 1 },
    { row: 'W2', column: 'Sun', value: 0 },
    /* etc. */
  ]
<` + '/script>'
  })

  const code = computed(() => {
    return `<${name} ${propsToString({
      ...props.value,
      columns: 'columns',
      items: 'items',
      thresholds: 'thresholds',
    }, ['columns', 'items', 'thresholds'])} />`
  })
</script>