IsoCubeStaircaseChart

const isoCubeStaircaseChartFixture = {
  id: "iso-cube-staircase-chart",
  ariaLabel: "Customer onboarding funnel from sign-up to first paid invoice",
  data: [
    { label: "Signed up", value: 1840 },
    { label: "Email verified", value: 1612 },
    { label: "Workspace created", value: 1288 },
    { label: "Data imported", value: 964 },
    { label: "First query", value: 742 },
    { label: "Teammate invited", value: 588 },
    { label: "Activated", value: 488 },
    { label: "Paid", value: 312 },
  ],
};
 
import { IsoCubeStaircaseChart } from "@grassroot/charts-react";
 
export default function IsoCubeStaircaseChartDemo() {
  return (
    <div>
      <IsoCubeStaircaseChart {...isoCubeStaircaseChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const isoCubeStaircaseChartFixture = {
  id: "iso-cube-staircase-chart",
  ariaLabel: "Customer onboarding funnel from sign-up to first paid invoice",
  data: [
    { label: "Signed up", value: 1840 },
    { label: "Email verified", value: 1612 },
    { label: "Workspace created", value: 1288 },
    { label: "Data imported", value: 964 },
    { label: "First query", value: 742 },
    { label: "Teammate invited", value: 588 },
    { label: "Activated", value: 488 },
    { label: "Paid", value: 312 },
  ],
};
 
import { IsoCubeStaircaseChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoCubeStaircaseChart v-bind="isoCubeStaircaseChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const isoCubeStaircaseChartFixture = {
  id: "iso-cube-staircase-chart",
  ariaLabel: "Customer onboarding funnel from sign-up to first paid invoice",
  data: [
    { label: "Signed up", value: 1840 },
    { label: "Email verified", value: 1612 },
    { label: "Workspace created", value: 1288 },
    { label: "Data imported", value: 964 },
    { label: "First query", value: 742 },
    { label: "Teammate invited", value: 588 },
    { label: "Activated", value: 488 },
    { label: "Paid", value: 312 },
  ],
};
 
import { GrassrootIsoCubeStaircaseChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-cube-staircase-chart-demo",
  standalone: true,
  imports: [GrassrootIsoCubeStaircaseChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-cube-staircase-chart
    [data]="fixture.data"
    [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class IsoCubeStaircaseChartDemoComponent {
  readonly fixture = isoCubeStaircaseChartFixture;
}
 
export default IsoCubeStaircaseChartDemoComponent;

<script lang="ts">
  const isoCubeStaircaseChartFixture = {
    id: "iso-cube-staircase-chart",
    ariaLabel: "Customer onboarding funnel from sign-up to first paid invoice",
    data: [
      { label: "Signed up", value: 1840 },
      { label: "Email verified", value: 1612 },
      { label: "Workspace created", value: 1288 },
      { label: "Data imported", value: 964 },
      { label: "First query", value: 742 },
      { label: "Teammate invited", value: 588 },
      { label: "Activated", value: 488 },
      { label: "Paid", value: 312 },
    ],
  };
 
  import { IsoCubeStaircaseChart } from "@grassroot/charts-svelte";
</script>
 
<IsoCubeStaircaseChart {...isoCubeStaircaseChartFixture} />

/** @jsxImportSource solid-js */
const isoCubeStaircaseChartFixture = {
  id: "iso-cube-staircase-chart",
  ariaLabel: "Customer onboarding funnel from sign-up to first paid invoice",
  data: [
    { label: "Signed up", value: 1840 },
    { label: "Email verified", value: 1612 },
    { label: "Workspace created", value: 1288 },
    { label: "Data imported", value: 964 },
    { label: "First query", value: 742 },
    { label: "Teammate invited", value: 588 },
    { label: "Activated", value: 488 },
    { label: "Paid", value: 312 },
  ],
};
 
import { IsoCubeStaircaseChart } from "@grassroot/charts-solid";
 
export default function IsoCubeStaircaseChartDemo() {
  return <IsoCubeStaircaseChart {...isoCubeStaircaseChartFixture} />;
}