LegendItem

import { LegendItem } from "@nexera-ui/react";

const shapes = ["dot", "line", "dashed", "square"] as const satisfies readonly SeriesMarkerShape[];

const series = Array.from({ length: 8 }, (_, index) => index);

export function SeriesStyles() {
  return (
    <div className="flex flex-col gap-4">
      {shapes.map((shape) => (
        <ul key={shape} className="m-0 flex list-none flex-wrap gap-4 p-0">
          {series.map((seriesIndex) => (
            <li key={seriesIndex}>
              <LegendItem
                seriesIndex={seriesIndex}
                shape={shape}
                label={`${shape} ${String(seriesIndex + 1)}`}
              />
            </li>
          ))}
        </ul>
      ))}
      <ul className="m-0 flex list-none flex-wrap gap-4 p-0">
        {series.map((seriesIndex) => (
          <li key={seriesIndex}>
            <LegendItem
              seriesIndex={seriesIndex}
              shape="line"
              hasMarker
              label={`line + marker ${String(seriesIndex + 1)}`}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useState } from "react";
import { LegendItem } from "@nexera-ui/react";

const series = Array.from({ length: 8 }, (_, index) => index);

function ToggleLegend({ names, shape }: { names: readonly string[]; shape: SeriesMarkerShape }) {
  const [hidden, setHidden] = useState<readonly number[]>([]);
  return (
    <div className="flex flex-col gap-3">
      <ul className="m-0 flex list-none flex-wrap gap-4 p-0">
        {names.map((name, index) => (
          <li key={name}>
            <LegendItem
              seriesIndex={index}
              shape={shape}
              label={name}
              isSelected={!hidden.includes(index)}
              onChange={(shown) => {
                setHidden((current) =>
                  shown ? current.filter((i) => i !== index) : [...current, index],
                );
              }}
            />
          </li>
        ))}
      </ul>
      <p className="text-body-small text-secondary m-0">
        {hidden.length === 0
          ? "All series shown."
          : `Hidden: ${hidden.map((i) => names[i] ?? "").join(", ")}.`}
      </p>
    </div>
  );
}

export function Interactive() {
  return <ToggleLegend names={["Actual", "Plan", "Forecast"]} shape="line" />;
}

import { LegendItem } from "@nexera-ui/react";

export function InteractiveStates() {
  return (
    <ul className="m-0 flex list-none flex-wrap gap-4 p-0">
      <li>
        <LegendItem label="Shown" onChange={() => undefined} />
      </li>
      <li>
        <LegendItem
          label="Hidden"
          defaultSelected={false}
          seriesIndex={1}
          onChange={() => undefined}
        />
      </li>
      <li>
        <LegendItem label="Disabled" isDisabled seriesIndex={2} onChange={() => undefined} />
      </li>
      <li>
        <LegendItem label="With value" value="42 %" seriesIndex={3} onChange={() => undefined} />
      </li>
    </ul>
  );
}

import { LegendItem } from "@nexera-ui/react";

export function WithValues() {
  return (
    <ul className="m-0 flex list-none flex-wrap gap-4 p-0">
      {[
        ["Engineering", "42 %"],
        ["Sales", "31 %"],
        ["Operations", "27 %"],
      ].map(([label, value], index) => (
        <li key={label}>
          <LegendItem seriesIndex={index} shape="square" label={label} value={value} />
        </li>
      ))}
    </ul>
  );
}

import { LegendItem } from "@nexera-ui/react";

export function InChartFrame() {
  return (
    <ChartFrame
      title="Headcount by month"
      description="Last 12 months"
      summary="Headcount grew from 96 to 128 over twelve months."
      legend={[
        <LegendItem key="a" seriesIndex={0} shape="line" label="Actual headcount" />,
        <LegendItem key="b" seriesIndex={1} shape="dashed" label="Plan" />,
        <LegendItem
          key="c"
          seriesIndex={2}
          shape="line"
          label="Forecast including the annual company offsite and every open requisition"
        />,
      ]}
    >
      <svg role="img" aria-label="Placeholder plot" viewBox="0 0 100 20" className="h-20 w-full" />
    </ChartFrame>
  );
}

import { LegendItem } from "@nexera-ui/react";

export function LongLabels() {
  return (
    <div className="flex max-w-xs flex-col gap-4">
      <LegendItem
        seriesIndex={1}
        shape="line"
        label="Annual compensation review budget for the whole engineering organisation"
      />
      <LegendItem
        seriesIndex={2}
        shape="square"
        onChange={() => undefined}
        label="Annual compensation review budget for the whole engineering organisation"
      />
    </div>
  );
}

import { LegendItem } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <ul className="m-0 flex list-none flex-wrap gap-4 p-0">
      <li>
        <LegendItem seriesIndex={0} shape="line" label="عدد الموظفين" />
      </li>
      <li>
        <LegendItem seriesIndex={1} shape="dashed" label="الخطة" />
      </li>
      <li>
        <LegendItem seriesIndex={2} label="التوقعات" onChange={() => undefined} />
      </li>
    </ul>
  );
}