json-render/examples/dashboard/components/ui/chart.tsx

"use client";

import { type ComponentRenderProps } from "@json-render/react";
import { useData } from "@json-render/react";
import { getByPath } from "@json-render/core";

export function Chart({ element }: ComponentRenderProps) {
  const { title, dataPath } = element.props as {
    title?: string | null;
    dataPath: string;
  };
  const { data } = useData();
  const chartData = getByPath(data, dataPath) as
    | Array<{ label: string; value: number }>
    | undefined;

  if (!chartData || !Array.isArray(chartData)) {
    return <div style={{ padding: 20, color: "var(--muted)" }}>No data</div>;
  }

  const maxValue = Math.max(...chartData.map((d) => d.value));

  return (
    <div>
      {title && (
        <h4 style={{ margin: "0 0 16px", fontSize: 14, fontWeight: 600 }}>
          {title}
        </h4>
      )}
      <div
        style={{ display: "flex", gap: 8, alignItems: "flex-end", height: 120 }}
      >
        {chartData.map((d, i) => (
          <div
            key={i}
            style={{
              flex: 1,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 4,
            }}
          >
            <div
              style={{
                width: "100%",
                height: `${(d.value / maxValue) * 100}%`,
                background: "var(--foreground)",
                borderRadius: "4px 4px 0 0",
                minHeight: 4,
              }}
            />
            <span style={{ fontSize: 12, color: "var(--muted)" }}>
              {d.label}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}