heatmap-filter

Heatmap filter component

A filter component to be used only by heatmap.com devs component export tutorial.

🚀 Installation

Install using your package manager of choice:

pnpm add heatmap-filter

📺 Demo

https://matija-components.vercel.app/tri-state-checkbox

⚙️ Usage

Import the component locally or define it globally and include the css file:

<template>
  <!-- create a reset button that dispatched  "reset-all-filters-event"-->
  <button @click="resetAll">reset</button> 
  <!-- disabled comparison mode -->
    <button @click="disabledComparison">disabled Comparison</button>
  <!-- enabled comparison mode -->
  <button @click="enabledComparison">enabled Comparison</button>
  <!-- call the HeatmapFilter -->
  <HeatmapFilter @on-filter-values-change="filterValueChanged" />
  
</template>

<script lang="ts" setup>
import { HeatmapFilter } from "heatmap-filter";

const filterValueChanged = (value: ReturnData[]) => {
  console.log(value);
  // do your stuff here
};

// when ever reset button is clicked, dispatch this event
const resetAll = () => {
  const resetAllEvent = new CustomEvent("reset-all-filters-event");
  document.dispatchEvent(resetAllEvent);
};

const disabledComparison = () => {
  const resetAllEvent = new CustomEvent("disable-comparison-event", {
    detail: { disabled: true },
  });
  document.dispatchEvent(resetAllEvent);
};

const enabledComparison = () => {
  const resetAllEvent = new CustomEvent("disable-comparison-event", {
    detail: { disabled: false },
  });
  document.dispatchEvent(resetAllEvent);
};

</script>

📃 Emitters

📃 Custom Events