IsoMountainChart

const isoMountainChartFixture = {
  id: "iso-mountain-chart",
  ariaLabel: "Hourly website sessions peaking at 412 thousand visits",
  data: [
    18, 14, 12, 11, 12, 16, 28, 46, 72, 98, 128, 162, 198, 236, 274, 312, 348, 378, 398, 412, 396,
    354, 302, 248, 198, 152, 118, 92, 74, 58, 44, 32, 26, 22, 20, 18,
  ].map((value) => ({ value })),
  peakLabel: "412k visits",
};
 
import { IsoMountainChart } from "@grassroot/charts-react";
 
export default function IsoMountainChartDemo() {
  return (
    <div>
      <IsoMountainChart {...isoMountainChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const isoMountainChartFixture = {
  id: "iso-mountain-chart",
  ariaLabel: "Hourly website sessions peaking at 412 thousand visits",
  data: [
    18, 14, 12, 11, 12, 16, 28, 46, 72, 98, 128, 162, 198, 236, 274, 312, 348, 378, 398, 412, 396,
    354, 302, 248, 198, 152, 118, 92, 74, 58, 44, 32, 26, 22, 20, 18,
  ].map((value) => ({ value })),
  peakLabel: "412k visits",
};
 
import { IsoMountainChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoMountainChart v-bind="isoMountainChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const isoMountainChartFixture = {
  id: "iso-mountain-chart",
  ariaLabel: "Hourly website sessions peaking at 412 thousand visits",
  data: [
    18, 14, 12, 11, 12, 16, 28, 46, 72, 98, 128, 162, 198, 236, 274, 312, 348, 378, 398, 412, 396,
    354, 302, 248, 198, 152, 118, 92, 74, 58, 44, 32, 26, 22, 20, 18,
  ].map((value) => ({ value })),
  peakLabel: "412k visits",
};
 
import { GrassrootIsoMountainChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-mountain-chart-demo",
  standalone: true,
  imports: [GrassrootIsoMountainChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-mountain-chart
    [data]="fixture.data"
    [ariaLabel]="fixture.ariaLabel"
    [peakLabel]="fixture.peakLabel"
  />`,
})
export class IsoMountainChartDemoComponent {
  readonly fixture = isoMountainChartFixture;
}
 
export default IsoMountainChartDemoComponent;

<script lang="ts">
  const isoMountainChartFixture = {
    id: "iso-mountain-chart",
    ariaLabel: "Hourly website sessions peaking at 412 thousand visits",
    data: [
      18, 14, 12, 11, 12, 16, 28, 46, 72, 98, 128, 162, 198, 236, 274, 312, 348, 378, 398, 412, 396,
      354, 302, 248, 198, 152, 118, 92, 74, 58, 44, 32, 26, 22, 20, 18,
    ].map((value) => ({ value })),
    peakLabel: "412k visits",
  };
 
  import { IsoMountainChart } from "@grassroot/charts-svelte";
</script>
 
<IsoMountainChart {...isoMountainChartFixture} />

/** @jsxImportSource solid-js */
const isoMountainChartFixture = {
  id: "iso-mountain-chart",
  ariaLabel: "Hourly website sessions peaking at 412 thousand visits",
  data: [
    18, 14, 12, 11, 12, 16, 28, 46, 72, 98, 128, 162, 198, 236, 274, 312, 348, 378, 398, 412, 396,
    354, 302, 248, 198, 152, 118, 92, 74, 58, 44, 32, 26, 22, 20, 18,
  ].map((value) => ({ value })),
  peakLabel: "412k visits",
};
 
import { IsoMountainChart } from "@grassroot/charts-solid";
 
export default function IsoMountainChartDemo() {
  return <IsoMountainChart {...isoMountainChartFixture} />;
}