IsoMatrixChart

const cells = [
  [48, 62, 88, 126, 188, 214, 196, 164, 128, 96, 74, 58],
  [42, 56, 81, 118, 172, 198, 181, 151, 116, 88, 68, 52],
  [31, 44, 66, 91, 144, 168, 152, 132, 98, 76, 58, 41],
  [26, 38, 54, 78, 116, 138, 124, 109, 82, 62, 48, 34],
  [22, 31, 46, 64, 98, 118, 106, 92, 71, 51, 39, 28],
  [18, 26, 38, 52, 84, 102, 91, 79, 60, 43, 32, 24],
  [14, 21, 31, 44, 68, 84, 76, 64, 49, 36, 26, 19],
  [11, 16, 24, 36, 54, 68, 61, 51, 38, 28, 20, 14],
] as const;
 
const isoMatrixChartFixture = {
  id: "iso-matrix-chart",
  ariaLabel: "Average requests per minute for eight services across twelve hours",
  data: cells.flatMap((values, x) => values.map((value, y) => ({ x, y, value }))),
  columns: 8,
  rows: 12,
};
 
import { IsoMatrixChart } from "@grassroot/charts-react";
 
export default function IsoMatrixChartDemo() {
  return (
    <div>
      <IsoMatrixChart {...isoMatrixChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const cells = [
  [48, 62, 88, 126, 188, 214, 196, 164, 128, 96, 74, 58],
  [42, 56, 81, 118, 172, 198, 181, 151, 116, 88, 68, 52],
  [31, 44, 66, 91, 144, 168, 152, 132, 98, 76, 58, 41],
  [26, 38, 54, 78, 116, 138, 124, 109, 82, 62, 48, 34],
  [22, 31, 46, 64, 98, 118, 106, 92, 71, 51, 39, 28],
  [18, 26, 38, 52, 84, 102, 91, 79, 60, 43, 32, 24],
  [14, 21, 31, 44, 68, 84, 76, 64, 49, 36, 26, 19],
  [11, 16, 24, 36, 54, 68, 61, 51, 38, 28, 20, 14],
] as const;
 
const isoMatrixChartFixture = {
  id: "iso-matrix-chart",
  ariaLabel: "Average requests per minute for eight services across twelve hours",
  data: cells.flatMap((values, x) => values.map((value, y) => ({ x, y, value }))),
  columns: 8,
  rows: 12,
};
 
import { IsoMatrixChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoMatrixChart v-bind="isoMatrixChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const cells = [
  [48, 62, 88, 126, 188, 214, 196, 164, 128, 96, 74, 58],
  [42, 56, 81, 118, 172, 198, 181, 151, 116, 88, 68, 52],
  [31, 44, 66, 91, 144, 168, 152, 132, 98, 76, 58, 41],
  [26, 38, 54, 78, 116, 138, 124, 109, 82, 62, 48, 34],
  [22, 31, 46, 64, 98, 118, 106, 92, 71, 51, 39, 28],
  [18, 26, 38, 52, 84, 102, 91, 79, 60, 43, 32, 24],
  [14, 21, 31, 44, 68, 84, 76, 64, 49, 36, 26, 19],
  [11, 16, 24, 36, 54, 68, 61, 51, 38, 28, 20, 14],
] as const;
 
const isoMatrixChartFixture = {
  id: "iso-matrix-chart",
  ariaLabel: "Average requests per minute for eight services across twelve hours",
  data: cells.flatMap((values, x) => values.map((value, y) => ({ x, y, value }))),
  columns: 8,
  rows: 12,
};
 
import { GrassrootIsoMatrixChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-matrix-chart-demo",
  standalone: true,
  imports: [GrassrootIsoMatrixChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-matrix-chart
    [data]="fixture.data"
    [ariaLabel]="fixture.ariaLabel"
    [columns]="fixture.columns"
    [rows]="fixture.rows"
  />`,
})
export class IsoMatrixChartDemoComponent {
  readonly fixture = isoMatrixChartFixture;
}
 
export default IsoMatrixChartDemoComponent;

<script lang="ts">
  const cells = [
    [48, 62, 88, 126, 188, 214, 196, 164, 128, 96, 74, 58],
    [42, 56, 81, 118, 172, 198, 181, 151, 116, 88, 68, 52],
    [31, 44, 66, 91, 144, 168, 152, 132, 98, 76, 58, 41],
    [26, 38, 54, 78, 116, 138, 124, 109, 82, 62, 48, 34],
    [22, 31, 46, 64, 98, 118, 106, 92, 71, 51, 39, 28],
    [18, 26, 38, 52, 84, 102, 91, 79, 60, 43, 32, 24],
    [14, 21, 31, 44, 68, 84, 76, 64, 49, 36, 26, 19],
    [11, 16, 24, 36, 54, 68, 61, 51, 38, 28, 20, 14],
  ] as const;
 
  const isoMatrixChartFixture = {
    id: "iso-matrix-chart",
    ariaLabel: "Average requests per minute for eight services across twelve hours",
    data: cells.flatMap((values, x) => values.map((value, y) => ({ x, y, value }))),
    columns: 8,
    rows: 12,
  };
 
  import { IsoMatrixChart } from "@grassroot/charts-svelte";
</script>
 
<IsoMatrixChart {...isoMatrixChartFixture} />

/** @jsxImportSource solid-js */
const cells = [
  [48, 62, 88, 126, 188, 214, 196, 164, 128, 96, 74, 58],
  [42, 56, 81, 118, 172, 198, 181, 151, 116, 88, 68, 52],
  [31, 44, 66, 91, 144, 168, 152, 132, 98, 76, 58, 41],
  [26, 38, 54, 78, 116, 138, 124, 109, 82, 62, 48, 34],
  [22, 31, 46, 64, 98, 118, 106, 92, 71, 51, 39, 28],
  [18, 26, 38, 52, 84, 102, 91, 79, 60, 43, 32, 24],
  [14, 21, 31, 44, 68, 84, 76, 64, 49, 36, 26, 19],
  [11, 16, 24, 36, 54, 68, 61, 51, 38, 28, 20, 14],
] as const;
 
const isoMatrixChartFixture = {
  id: "iso-matrix-chart",
  ariaLabel: "Average requests per minute for eight services across twelve hours",
  data: cells.flatMap((values, x) => values.map((value, y) => ({ x, y, value }))),
  columns: 8,
  rows: 12,
};
 
import { IsoMatrixChart } from "@grassroot/charts-solid";
 
export default function IsoMatrixChartDemo() {
  return <IsoMatrixChart {...isoMatrixChartFixture} />;
}