Radar Chart

"use client";

import { createRng } from "@/components/miyuki-ui/lib/prng";
import { RadarChart } from "@/components/miyuki-ui/radar-chart";

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
const titles = ["January", "February", "March", "April", "May", "June"];

const rng = createRng("radar-visitors");
const raw = [1.24, 1.16, 1.02, 0.78, 0.86, 0.94].map((s) => s * rng.range(0.96, 1.04));
const visitors = raw.map((v) => Math.round((v / raw.reduce((a, b) => a + b, 0)) * 1424 * 6));

export default function RadarChartDemo() {
  return (
    <RadarChart
      className="w-full max-w-[440px]"
      label="Visitors"
      value="1,424"
      delta={0.052}
      caption="a month"
      labels={months}
      titles={titles}
      series={[{ name: "Visitors", data: visitors }]}
    />
  );
}

"use client";

import { createRng } from "@/components/miyuki-ui/lib/prng";
import { RadarChart } from "@/components/miyuki-ui/radar-chart";

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
const titles = ["January", "February", "March", "April", "May", "June"];

const rng = createRng("radar-app");
const raw = [0.92, 0.88, 1.04, 1.18, 1.1, 0.88].map((s) => s * rng.range(0.96, 1.04));
const sessions = raw.map((v) => Math.round((v / raw.reduce((a, b) => a + b, 0)) * 1424 * 6));

export default function RadarChartDottedDemo() {
  return (
    <RadarChart
      className="w-full max-w-[440px]"
      variant="dotted"
      label="Visitors in the app"
      value="1,424"
      delta={0.052}
      caption="a month"
      labels={months}
      titles={titles}
      series={[{ name: "Visitors", data: sessions }]}
    />
  );
}

"use client";

import { createRng } from "@/components/miyuki-ui/lib/prng";
import { RadarChart } from "@/components/miyuki-ui/radar-chart";

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
const titles = ["January", "February", "March", "April", "May", "June"];

function half(seed: string, shape: number[], average: number) {
  const rng = createRng(seed);
  const raw = shape.map((s) => s * rng.range(0.96, 1.04));
  const sum = raw.reduce((a, b) => a + b, 0);
  return raw.map((v) => Math.round((v / sum) * average * shape.length));
}

const thisYear = half("radar-this-year", [1.24, 1.16, 1.02, 0.78, 0.86, 0.94], 1424);
const lastYear = half("radar-last-year", [1.08, 1.2, 1.12, 0.84, 0.76, 0.8], 1354);

export default function RadarChartLinesDemo() {
  return (
    <RadarChart
      className="w-full max-w-[440px]"
      variant="lines"
      label="Visitors"
      value="1,424"
      delta={0.052}
      caption="a month"
      labels={months}
      titles={titles}
      series={[
        { name: "This year", data: thisYear },
        { name: "Last year", data: lastYear },
      ]}
    />
  );
}

"use client";

import { RadarChart } from "@/components/miyuki-ui/radar-chart";

export default function RadarChartScoreDemo() {
  return (
    <RadarChart
      className="w-full max-w-[440px]"
      variant="score"
      label="Guest rating, Hakuba"
      value="79"
      delta={0.031}
      caption="out of 100"
      labels={["Snow", "Lifts", "Food", "Lodging", "Access", "Value"]}
      series={[{ name: "Score", data: [92, 84, 77, 81, 69, 71] }]}
      max={100}
      height={272}
    />
  );
}