高度な機能

import { Callout, Grid, H2, Row, Stack, Stat, Text } from "cursor/canvas";

export default function Metrics() {
  return (
    <Stack gap={16}>
      <H2>Release health</H2>
      <Row gap={16} wrap>
        <Stat value="99.2%" label="Uptime" tone="success" />
        <Stat value="142 ms" label="p95 latency" tone="info" />
        <Stat value="3" label="Open incidents" tone="warning" />
      </Row>
      <Grid columns={2} gap={12}>
        <Callout tone="success" title="Deployed">
          canvas-host 1.4.2 is live in all regions.
        </Callout>
        <Callout tone="warning" title="Budget">
          Error budget burn is 18% for the current window.
        </Callout>
      </Grid>
      <Text size="small" tone="tertiary">
        Sample data · not connected to production
      </Text>
    </Stack>
  );
}

import { BarChart, H2, PieChart, Stack, Text } from "cursor/canvas";

export default function Charts() {
  return (
    <Stack gap={16}>
      <H2>Traffic mix</H2>
      <BarChart
        categories={["Mon", "Tue", "Wed", "Thu", "Fri"]}
        series={[
          { name: "Accepted", data: [42, 55, 48, 61, 58], tone: "success" },
          { name: "Rejected", data: [8, 6, 11, 7, 9], tone: "danger" },
        ]}
        stacked
        height={200}
      />
      <PieChart
        data={[
          { label: "IDE", value: 128, tone: "info" },
          { label: "CLI", value: 34, tone: "success" },
          { label: "Cloud", value: 51, tone: "warning" },
        ]}
        donut
        size={180}
      />
      <Text size="small" tone="tertiary">
        Sample telemetry · stacked series and donut share
      </Text>
    </Stack>
  );
}