GlyphPlotChart

import { GlyphPlotChart } from "@grassroot/charts-react";
import {
  formatGlyphPlotYTick,
  glyphPlotDemoAriaLabel,
  glyphPlotDemoPoints,
} from "../../../site/glyph-plot-demo";
 
export default function GlyphPlotChartDemo() {
  return (
    <div>
      <GlyphPlotChart
        ariaLabel={glyphPlotDemoAriaLabel}
        points={glyphPlotDemoPoints}
        xAxisLabel="P95 latency (ms)"
        yAxisLabel="Error rate"
        formatYTick={formatGlyphPlotYTick}
      />
    </div>
  );
}

<script setup lang="ts">
import { GlyphPlotChart } from "@grassroot/charts-vue";
import {
  formatGlyphPlotYTick,
  glyphPlotDemoAriaLabel,
  glyphPlotDemoPoints,
} from "../../../site/glyph-plot-demo";
</script>
 
<template>
  <GlyphPlotChart
    :aria-label="glyphPlotDemoAriaLabel"
    :points="glyphPlotDemoPoints"
    x-axis-label="P95 latency (ms)"
    y-axis-label="Error rate"
    :format-y-tick="formatGlyphPlotYTick"
  />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootGlyphPlotChart } from "@grassroot/charts-angular";
import {
  formatGlyphPlotYTick,
  glyphPlotDemoAriaLabel,
  glyphPlotDemoPoints,
} from "../../../site/glyph-plot-demo";
 
@Component({
  selector: "app-glyph-plot-chart-chart-demo",
  standalone: true,
  imports: [GrassrootGlyphPlotChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-glyph-plot-chart
    [ariaLabel]="ariaLabel"
    [points]="points"
    [xAxisLabel]="'P95 latency (ms)'"
    [yAxisLabel]="'Error rate'"
    [formatYTick]="formatYTick"
  />`,
})
export class GlyphPlotChartDemoComponent {
  readonly ariaLabel = glyphPlotDemoAriaLabel;
  readonly points = glyphPlotDemoPoints;
  readonly formatYTick = formatGlyphPlotYTick;
}
 
export default GlyphPlotChartDemoComponent;

<script lang="ts">
  import { GlyphPlotChart } from "@grassroot/charts-svelte";
  import {
    formatGlyphPlotYTick,
    glyphPlotDemoAriaLabel,
    glyphPlotDemoPoints,
  } from "../../../site/glyph-plot-demo";
</script>
 
<GlyphPlotChart
  ariaLabel={glyphPlotDemoAriaLabel}
  points={glyphPlotDemoPoints}
  xAxisLabel="P95 latency (ms)"
  yAxisLabel="Error rate"
  formatYTick={formatGlyphPlotYTick}
/>

/** @jsxImportSource solid-js */
import { GlyphPlotChart } from "@grassroot/charts-solid";
import {
  formatGlyphPlotYTick,
  glyphPlotDemoAriaLabel,
  glyphPlotDemoPoints,
} from "../../../site/glyph-plot-demo";
 
export default function GlyphPlotChartDemo() {
  return (
    <GlyphPlotChart
      ariaLabel={glyphPlotDemoAriaLabel}
      points={glyphPlotDemoPoints}
      xAxisLabel="P95 latency (ms)"
      yAxisLabel="Error rate"
      formatYTick={formatGlyphPlotYTick}
    />
  );
}