Function setup

packages/vuetify/src/labs/VHeatmap/VHeatmap.tsx:92–275

(props, { slots })

  props: makeVHeatmapProps(),

  setup (props, { slots }) {
    const { themeClasses } = provideTheme(props)
    const {
      rows,
      rowItems,
      groups,
      hasExplicitColumns,
      cellWidth,
      cellHeight,
      gap,
      cellStep,
      rowStep,
      totalWidth,
      totalHeight,
      bucketColors,
      linearColors,
      colorSpaceClass,
      bucketBoundaries,
    } = useHeatmap(props)

    const activeBuckets = ref<number[]>([])

    const colorProperties = computed(() => {
      const style: CSSProperties = {}
      const buckets = bucketColors.value
      const linear = linearColors.value

      for (let i = 0; i < buckets.length; i++) {
        style[`--v-heatmap-color-bucket-${i}`] = buckets[i]
      }

      if (linear) {
        style['--v-heatmap-color-start'] = linear.from
        style['--v-heatmap-color-end'] = linear.to
      }

      return style
    })

    watch(bucketBoundaries, val => {
      activeBuckets.value = val.map((_, i) => i)
    }, { immediate: true })

    function toggle (index: number) {
      const position = activeBuckets.value.indexOf(index)

      if (position >= 0) activeBuckets.value.splice(position, 1)
      else activeBuckets.value.push(index)
    }

    function isDisabled (cell: HeatmapCell) {
      if (cell.bucketIndex < 0) return false
      return !activeBuckets.value.includes(cell.bucketIndex)
    }

    useRender(() => {
      const radius = convertToUnit(props.rounded)
      const hasGroupLabels = !props.hideColumnHeaders && (!!slots['group-header'] || groups.value.some(group => group.label))