VoronoiOverlay

import { VoronoiOverlay } from "@grassroot/charts-react";
 
const demandSites = [
  {
    id: "highlands",
    x: 42,
    y: 36,
  },
  {
    id: "north",
    x: 58,
    y: 78,
  },
  {
    id: "northwest",
    x: 88,
    y: 48,
  },
  {
    id: "west",
    x: 112,
    y: 142,
  },
  {
    id: "central",
    x: 174,
    y: 94,
  },
  {
    id: "midlands",
    x: 196,
    y: 128,
  },
  {
    id: "east",
    x: 238,
    y: 62,
  },
  {
    id: "south",
    x: 274,
    y: 152,
  },
  {
    id: "southwest",
    x: 248,
    y: 178,
  },
  {
    id: "coast",
    x: 320,
    y: 108,
  },
];
 
export default function VoronoiOverlayDemo() {
  return (
    <div>
      <svg
        viewBox="0 0 360 220"
        width="360"
        height="220"
        style={{ maxWidth: "100%" }}
        role="img"
        aria-label="Nearest-site interaction zones for ten regional demand centres"
      >
        <title>Regional demand centres with nearest-point hit areas</title>
        {demandSites.map((site) => (
          <circle key={site.id} cx={site.x} cy={site.y} r={6} fill="var(--accent)" />
        ))}
        <VoronoiOverlay
          points={demandSites}
          width={360}
          height={220}
          aria-label="Nearest demand centre hit areas"
        />
      </svg>
    </div>
  );
}

<script setup lang="ts">
import { VoronoiOverlay } from "@grassroot/charts-vue";
 
const demandSites = [
  {
    id: "highlands",
    x: 42,
    y: 36,
  },
  {
    id: "north",
    x: 58,
    y: 78,
  },
  {
    id: "northwest",
    x: 88,
    y: 48,
  },
  {
    id: "west",
    x: 112,
    y: 142,
  },
  {
    id: "central",
    x: 174,
    y: 94,
  },
  {
    id: "midlands",
    x: 196,
    y: 128,
  },
  {
    id: "east",
    x: 238,
    y: 62,
  },
  {
    id: "south",
    x: 274,
    y: 152,
  },
  {
    id: "southwest",
    x: 248,
    y: 178,
  },
  {
    id: "coast",
    x: 320,
    y: 108,
  },
];
</script>
 
<template>
  <svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Nearest-site interaction zones for ten regional demand centres"
  >
    <title>Regional demand centres with nearest-point hit areas</title>
    <circle
      v-for="site in demandSites"
      :key="site.id"
      :cx="site.x"
      :cy="site.y"
      r="6"
      fill="var(--accent)"
    />
    <VoronoiOverlay
      :points="demandSites"
      :width="360"
      :height="220"
      aria-label="Nearest demand centre hit areas"
    />
  </svg>
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootVoronoiOverlay } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-voronoi-overlay-chart-demo",
  standalone: true,
  imports: [GrassrootVoronoiOverlay],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Nearest-site interaction zones for ten regional demand centres"
  >
    <title>Regional demand centres with nearest-point hit areas</title>
    <circle cx="42" cy="36" r="6" fill="var(--accent)" />
    <circle cx="58" cy="78" r="6" fill="var(--accent)" />
    <circle cx="88" cy="48" r="6" fill="var(--accent)" />
    <circle cx="112" cy="142" r="6" fill="var(--accent)" />
    <circle cx="174" cy="94" r="6" fill="var(--accent)" />
    <circle cx="196" cy="128" r="6" fill="var(--accent)" />
    <circle cx="238" cy="62" r="6" fill="var(--accent)" />
    <circle cx="274" cy="152" r="6" fill="var(--accent)" />
    <circle cx="248" cy="178" r="6" fill="var(--accent)" />
    <circle cx="320" cy="108" r="6" fill="var(--accent)" />
    <g
      grassroot-voronoi-overlay
      [points]="demandSites"
      [width]="360"
      [height]="220"
      aria-label="Nearest demand centre hit areas"
    ></g>
  </svg>`,
})
export class VoronoiOverlayDemoComponent {
  readonly demandSites = [
    {
      id: "highlands",
      x: 42,
      y: 36,
    },
    {
      id: "north",
      x: 58,
      y: 78,
    },
    {
      id: "northwest",
      x: 88,
      y: 48,
    },
    {
      id: "west",
      x: 112,
      y: 142,
    },
    {
      id: "central",
      x: 174,
      y: 94,
    },
    {
      id: "midlands",
      x: 196,
      y: 128,
    },
    {
      id: "east",
      x: 238,
      y: 62,
    },
    {
      id: "south",
      x: 274,
      y: 152,
    },
    {
      id: "southwest",
      x: 248,
      y: 178,
    },
    {
      id: "coast",
      x: 320,
      y: 108,
    },
  ];
}
 
export default VoronoiOverlayDemoComponent;

<script lang="ts">
  import { VoronoiOverlay } from "@grassroot/charts-svelte";
 
  const demandSites = [
    {
      id: "highlands",
      x: 42,
      y: 36,
    },
    {
      id: "north",
      x: 58,
      y: 78,
    },
    {
      id: "northwest",
      x: 88,
      y: 48,
    },
    {
      id: "west",
      x: 112,
      y: 142,
    },
    {
      id: "central",
      x: 174,
      y: 94,
    },
    {
      id: "midlands",
      x: 196,
      y: 128,
    },
    {
      id: "east",
      x: 238,
      y: 62,
    },
    {
      id: "south",
      x: 274,
      y: 152,
    },
    {
      id: "southwest",
      x: 248,
      y: 178,
    },
    {
      id: "coast",
      x: 320,
      y: 108,
    },
  ];
</script>
 
<svg
  viewBox="0 0 360 220"
  width="360"
  height="220"
  style="max-width: 100%"
  role="img"
  aria-label="Nearest-site interaction zones for ten regional demand centres"
>
  <title>Regional demand centres with nearest-point hit areas</title>
  {#each demandSites as site (site.id)}
    <circle cx={site.x} cy={site.y} r="6" fill="var(--accent)" />
  {/each}
  <VoronoiOverlay
    points={demandSites}
    width={360}
    height={220}
    aria-label="Nearest demand centre hit areas"
  />
</svg>

/** @jsxImportSource solid-js */
import { For } from "solid-js";
import { VoronoiOverlay } from "@grassroot/charts-solid";
 
const demandSites = [
  {
    id: "highlands",
    x: 42,
    y: 36,
  },
  {
    id: "north",
    x: 58,
    y: 78,
  },
  {
    id: "northwest",
    x: 88,
    y: 48,
  },
  {
    id: "west",
    x: 112,
    y: 142,
  },
  {
    id: "central",
    x: 174,
    y: 94,
  },
  {
    id: "midlands",
    x: 196,
    y: 128,
  },
  {
    id: "east",
    x: 238,
    y: 62,
  },
  {
    id: "south",
    x: 274,
    y: 152,
  },
  {
    id: "southwest",
    x: 248,
    y: 178,
  },
  {
    id: "coast",
    x: 320,
    y: 108,
  },
];
 
export default function VoronoiOverlayDemo() {
  return (
    <svg
      viewBox="0 0 360 220"
      width="360"
      height="220"
      style={{ "max-width": "100%" }}
      role="img"
      aria-label="Nearest-site interaction zones for ten regional demand centres"
    >
      <title>Regional demand centres with nearest-point hit areas</title>
      <For each={demandSites}>
        {(site) => <circle cx={site.x} cy={site.y} r="6" fill="var(--accent)" />}
      </For>
      <VoronoiOverlay
        points={demandSites}
        width={360}
        height={220}
        aria-label="Nearest demand centre hit areas"
      />
    </svg>
  );
}