RasterHeatmap

import { RasterHeatmap } from "@grassroot/charts-react";
 
const rasterCells = Array.from({ length: 24 }, (_, index) => ({ x: index % 6, y: Math.floor(index / 6), value: 2 + (index * 7) % 19 }));
 
 
<RasterHeatmap cells={rasterCells} />

<script setup lang="ts">
import { RasterHeatmap } from "@grassroot/charts-vue";
 
const rasterCells = Array.from({ length: 24 }, (_, index) => ({ x: index % 6, y: Math.floor(index / 6), value: 2 + (index * 7) % 19 }));
</script>
 
<template>
  <RasterHeatmap :cells='rasterCells' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootRasterHeatmap } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-raster-heatmap-chart-demo",
  standalone: true,
  imports: [GrassrootRasterHeatmap],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-raster-heatmap [cells]='rasterCells' />`,
})
export class RasterHeatmapDemoComponent {
  readonly rasterCells = Array.from({ length: 24 }, (_, index) => ({ x: index % 6, y: Math.floor(index / 6), value: 2 + (index * 7) % 19 }));
}
 
export default RasterHeatmapDemoComponent;

<script lang="ts">
  import { RasterHeatmap } from "@grassroot/charts-svelte";
 
  const rasterCells = Array.from({ length: 24 }, (_, index) => ({ x: index % 6, y: Math.floor(index / 6), value: 2 + (index * 7) % 19 }));
</script>
 
<RasterHeatmap cells={rasterCells} />

/** @jsxImportSource solid-js */
import { RasterHeatmap } from "@grassroot/charts-solid";
 
const rasterCells = Array.from({ length: 24 }, (_, index) => ({ x: index % 6, y: Math.floor(index / 6), value: 2 + (index * 7) % 19 }));
 
export default function RasterHeatmapDemo() {
  return <RasterHeatmap cells={rasterCells} />;
}