IsoRidgeTerrainChart

function ridge(label: string, start: number, step: number) {
  const values = Array.from({ length: 28 }, (_, index) => {
    const weekday = index % 7;
    const weekend = weekday === 5 || weekday === 6;
    const wave = Math.round(start + step * Math.sin(index / 3.2) + index * 0.8);
    return weekend ? Math.round(wave * 0.68) : wave;
  });
  return { label, values };
}
 
const isoRidgeTerrainChartFixture = {
  id: "iso-ridge-terrain-chart",
  ariaLabel: "Daily support ticket volume by regional team over four weeks",
  data: [
    ridge("London", 92, 14),
    ridge("Manchester", 62, 11),
    ridge("Bristol", 41, 8),
    ridge("Glasgow", 48, 9),
    ridge("Belfast", 29, 6),
    ridge("Cardiff", 35, 7),
    ridge("Leeds", 54, 10),
    ridge("Edinburgh", 38, 7),
  ],
};
 
import { IsoRidgeTerrainChart } from "@grassroot/charts-react";
 
export default function IsoRidgeTerrainChartDemo() {
  return (
    <div>
      <IsoRidgeTerrainChart {...isoRidgeTerrainChartFixture} />
    </div>
  );
}

<script setup lang="ts">
function ridge(label: string, start: number, step: number) {
  const values = Array.from({ length: 28 }, (_, index) => {
    const weekday = index % 7;
    const weekend = weekday === 5 || weekday === 6;
    const wave = Math.round(start + step * Math.sin(index / 3.2) + index * 0.8);
    return weekend ? Math.round(wave * 0.68) : wave;
  });
  return { label, values };
}
 
const isoRidgeTerrainChartFixture = {
  id: "iso-ridge-terrain-chart",
  ariaLabel: "Daily support ticket volume by regional team over four weeks",
  data: [
    ridge("London", 92, 14),
    ridge("Manchester", 62, 11),
    ridge("Bristol", 41, 8),
    ridge("Glasgow", 48, 9),
    ridge("Belfast", 29, 6),
    ridge("Cardiff", 35, 7),
    ridge("Leeds", 54, 10),
    ridge("Edinburgh", 38, 7),
  ],
};
 
import { IsoRidgeTerrainChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoRidgeTerrainChart v-bind="isoRidgeTerrainChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
function ridge(label: string, start: number, step: number) {
  const values = Array.from({ length: 28 }, (_, index) => {
    const weekday = index % 7;
    const weekend = weekday === 5 || weekday === 6;
    const wave = Math.round(start + step * Math.sin(index / 3.2) + index * 0.8);
    return weekend ? Math.round(wave * 0.68) : wave;
  });
  return { label, values };
}
 
const isoRidgeTerrainChartFixture = {
  id: "iso-ridge-terrain-chart",
  ariaLabel: "Daily support ticket volume by regional team over four weeks",
  data: [
    ridge("London", 92, 14),
    ridge("Manchester", 62, 11),
    ridge("Bristol", 41, 8),
    ridge("Glasgow", 48, 9),
    ridge("Belfast", 29, 6),
    ridge("Cardiff", 35, 7),
    ridge("Leeds", 54, 10),
    ridge("Edinburgh", 38, 7),
  ],
};
 
import { GrassrootIsoRidgeTerrainChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-ridge-terrain-chart-demo",
  standalone: true,
  imports: [GrassrootIsoRidgeTerrainChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-ridge-terrain-chart
    [data]="fixture.data"
    [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class IsoRidgeTerrainChartDemoComponent {
  readonly fixture = isoRidgeTerrainChartFixture;
}
 
export default IsoRidgeTerrainChartDemoComponent;

<script lang="ts">
  function ridge(label: string, start: number, step: number) {
    const values = Array.from({ length: 28 }, (_, index) => {
      const weekday = index % 7;
      const weekend = weekday === 5 || weekday === 6;
      const wave = Math.round(start + step * Math.sin(index / 3.2) + index * 0.8);
      return weekend ? Math.round(wave * 0.68) : wave;
    });
    return { label, values };
  }
 
  const isoRidgeTerrainChartFixture = {
    id: "iso-ridge-terrain-chart",
    ariaLabel: "Daily support ticket volume by regional team over four weeks",
    data: [
      ridge("London", 92, 14),
      ridge("Manchester", 62, 11),
      ridge("Bristol", 41, 8),
      ridge("Glasgow", 48, 9),
      ridge("Belfast", 29, 6),
      ridge("Cardiff", 35, 7),
      ridge("Leeds", 54, 10),
      ridge("Edinburgh", 38, 7),
    ],
  };
 
  import { IsoRidgeTerrainChart } from "@grassroot/charts-svelte";
</script>
 
<IsoRidgeTerrainChart {...isoRidgeTerrainChartFixture} />

/** @jsxImportSource solid-js */
function ridge(label: string, start: number, step: number) {
  const values = Array.from({ length: 28 }, (_, index) => {
    const weekday = index % 7;
    const weekend = weekday === 5 || weekday === 6;
    const wave = Math.round(start + step * Math.sin(index / 3.2) + index * 0.8);
    return weekend ? Math.round(wave * 0.68) : wave;
  });
  return { label, values };
}
 
const isoRidgeTerrainChartFixture = {
  id: "iso-ridge-terrain-chart",
  ariaLabel: "Daily support ticket volume by regional team over four weeks",
  data: [
    ridge("London", 92, 14),
    ridge("Manchester", 62, 11),
    ridge("Bristol", 41, 8),
    ridge("Glasgow", 48, 9),
    ridge("Belfast", 29, 6),
    ridge("Cardiff", 35, 7),
    ridge("Leeds", 54, 10),
    ridge("Edinburgh", 38, 7),
  ],
};
 
import { IsoRidgeTerrainChart } from "@grassroot/charts-solid";
 
export default function IsoRidgeTerrainChartDemo() {
  return <IsoRidgeTerrainChart {...isoRidgeTerrainChartFixture} />;
}