{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "illustration-graph",
  "type": "registry:ui",
  "description": "Graph illustration component",
  "files": [
    {
      "path": "registry/default/ui/illustration-graph.tsx",
      "content": "\"use client\"\n\nimport { useId, type ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface DataPoint {\n  x: number\n  y: number\n}\n\nexport interface IllustrationGraphProps\n  extends Omit<React.ComponentProps<\"svg\">, \"width\" | \"height\"> {\n  width?: number\n  height?: number\n  backgroundColor?: string\n  borderColor?: string\n  cardFill?: string\n  cardStroke?: string\n  gridLineColor?: string\n  primaryLineColor?: string\n  errorLineColor?: string\n  errorBadgeColor?: string\n  errorBadgeTextColor?: string\n  highlightAreaColor?: string\n  highlightBorderColor?: string\n  textColor?: string\n  mutedTextColor?: string\n  badgeText?: string\n  headerText?: string\n  footerText?: string\n  yAxisLabels?: string[]\n  dataPoints?: DataPoint[]\n  errorRegion?: { start: number; end: number }\n  showHighlightArea?: boolean\n  customBadgeIcon?: ReactNode\n}\n\nexport const defaultDataPoints: DataPoint[] = [\n  { x: 40, y: 107 },\n  { x: 102, y: 107 },\n  { x: 119.5, y: 105.5 },\n  { x: 147.5, y: 107 },\n  { x: 174.5, y: 107 },\n  { x: 216.5, y: 107 },\n  { x: 224, y: 99.5 },\n  { x: 228.5, y: 102.5 },\n  { x: 237, y: 90 },\n  { x: 257, y: 84 },\n  { x: 280.5, y: 50.5 },\n  { x: 293.5, y: 55 },\n  { x: 313.5, y: 53.5 },\n  { x: 336.5, y: 74 },\n  { x: 352.5, y: 99.5 },\n  { x: 367, y: 107 },\n  { x: 417.5, y: 107 },\n]\n\nfunction generatePath(points: DataPoint[]) {\n  if (points.length === 0) return \"\"\n  return points\n    .map((point, index) => `${index === 0 ? \"M\" : \"L\"}${point.x} ${point.y}`)\n    .join(\" \")\n}\n\nfunction IllustrationGraphDefs({\n  footerShadowId,\n  chartShadowId,\n}: {\n  footerShadowId: string\n  chartShadowId: string\n}) {\n  return (\n    <defs data-slot=\"illustration-graph-defs\">\n      <filter\n        id={footerShadowId}\n        x=\"0\"\n        y=\"142.589\"\n        width=\"450\"\n        height=\"42\"\n        filterUnits=\"userSpaceOnUse\"\n        colorInterpolationFilters=\"sRGB\"\n      >\n        <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n        <feColorMatrix\n          in=\"SourceAlpha\"\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n          result=\"hardAlpha\"\n        />\n        <feOffset dy=\"1\" />\n        <feGaussianBlur stdDeviation=\"1\" />\n        <feColorMatrix\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0\"\n        />\n        <feBlend\n          mode=\"normal\"\n          in2=\"BackgroundImageFix\"\n          result=\"effect1_dropShadow\"\n        />\n        <feBlend\n          mode=\"normal\"\n          in=\"SourceGraphic\"\n          in2=\"effect1_dropShadow\"\n          result=\"shape\"\n        />\n      </filter>\n      <filter\n        id={chartShadowId}\n        x=\"0\"\n        y=\"0\"\n        width=\"450\"\n        height=\"141.178\"\n        filterUnits=\"userSpaceOnUse\"\n        colorInterpolationFilters=\"sRGB\"\n      >\n        <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n        <feColorMatrix\n          in=\"SourceAlpha\"\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n          result=\"hardAlpha\"\n        />\n        <feOffset dy=\"1\" />\n        <feGaussianBlur stdDeviation=\"1\" />\n        <feColorMatrix\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0\"\n        />\n        <feBlend\n          mode=\"normal\"\n          in2=\"BackgroundImageFix\"\n          result=\"effect1_dropShadow\"\n        />\n        <feBlend\n          mode=\"normal\"\n          in=\"SourceGraphic\"\n          in2=\"effect1_dropShadow\"\n          result=\"shape\"\n        />\n      </filter>\n    </defs>\n  )\n}\n\nfunction IllustrationGraphFooter({\n  shadowId,\n  cardFill,\n  cardStroke,\n  mutedTextColor,\n  footerText,\n}: {\n  shadowId: string\n  cardFill: string\n  cardStroke: string\n  mutedTextColor: string\n  footerText: string\n}) {\n  return (\n    <g data-slot=\"illustration-graph-footer\" filter={`url(#${shadowId})`}>\n      <path\n        d=\"M3 156.589C3 149.962 8.37258 144.589 15 144.589H435C441.627 144.589 447 149.962 447 156.589V168.589C447 175.217 441.627 180.589 435 180.589H15C8.37258 180.589 3 175.217 3 168.589V156.589Z\"\n        fill={cardFill}\n      />\n      <path\n        d=\"M435 144.089C441.904 144.089 447.5 149.686 447.5 156.589V168.589C447.5 175.493 441.904 181.089 435 181.089H15C8.09644 181.089 2.5 175.493 2.5 168.589V156.589C2.5 149.686 8.09644 144.089 15 144.089H435Z\"\n        stroke={cardStroke}\n      />\n      <circle\n        cx=\"20.5\"\n        cy=\"158.66\"\n        r=\"0.786\"\n        fill=\"color-mix(in srgb, var(--muted-foreground) 45%, transparent)\"\n      />\n      <circle\n        cx=\"22.07\"\n        cy=\"161.28\"\n        r=\"0.786\"\n        fill=\"color-mix(in srgb, var(--muted-foreground) 65%, transparent)\"\n      />\n      <circle\n        cx=\"18.93\"\n        cy=\"161.28\"\n        r=\"0.786\"\n        fill=\"color-mix(in srgb, var(--muted-foreground) 65%, transparent)\"\n      />\n      <circle cx=\"20.5\" cy=\"163.9\" r=\"0.786\" fill=\"var(--muted-foreground)\" />\n      <circle cx=\"17.36\" cy=\"163.9\" r=\"0.786\" fill=\"var(--muted-foreground)\" />\n      <circle cx=\"23.64\" cy=\"163.9\" r=\"0.786\" fill=\"var(--muted-foreground)\" />\n      <circle\n        cx=\"22.07\"\n        cy=\"166.52\"\n        r=\"0.786\"\n        fill=\"color-mix(in srgb, var(--muted-foreground) 65%, transparent)\"\n      />\n      <circle\n        cx=\"25.22\"\n        cy=\"166.52\"\n        r=\"0.786\"\n        fill=\"color-mix(in srgb, var(--muted-foreground) 45%, transparent)\"\n      />\n      <circle\n        cx=\"18.93\"\n        cy=\"166.52\"\n        r=\"0.786\"\n        fill=\"color-mix(in srgb, var(--muted-foreground) 65%, transparent)\"\n      />\n      <circle\n        cx=\"15.79\"\n        cy=\"166.52\"\n        r=\"0.786\"\n        fill=\"color-mix(in srgb, var(--muted-foreground) 45%, transparent)\"\n      />\n      <text\n        x=\"31\"\n        y=\"166\"\n        fill={mutedTextColor}\n        fontSize=\"8\"\n        fontFamily=\"system-ui, sans-serif\"\n      >\n        {footerText}\n      </text>\n    </g>\n  )\n}\n\nfunction IllustrationGraphChart({\n  shadowId,\n  cardFill,\n  cardStroke,\n  gridLineColor,\n  errorBadgeColor,\n  errorBadgeTextColor,\n  highlightAreaColor,\n  highlightBorderColor,\n  mutedTextColor,\n  badgeText,\n  headerText,\n  yAxisLabels,\n  errorRegion,\n  showHighlightArea,\n  customBadgeIcon,\n  textColor,\n}: {\n  shadowId: string\n  cardFill: string\n  cardStroke: string\n  gridLineColor: string\n  errorBadgeColor: string\n  errorBadgeTextColor: string\n  highlightAreaColor: string\n  highlightBorderColor: string\n  mutedTextColor: string\n  badgeText: string\n  headerText: string\n  yAxisLabels: string[]\n  errorRegion: { start: number; end: number }\n  showHighlightArea: boolean\n  customBadgeIcon?: ReactNode\n  textColor: string\n}) {\n  return (\n    <g data-slot=\"illustration-graph-chart\" filter={`url(#${shadowId})`}>\n      <path\n        d=\"M3 14C3 7.37258 8.37258 2 15 2H435C441.627 2 447 7.37258 447 14V125.178C447 131.806 441.627 137.178 435 137.178H15C8.37258 137.178 3 131.806 3 125.178V14Z\"\n        fill={cardFill}\n      />\n      <path\n        d=\"M435 1.5C441.904 1.5 447.5 7.09644 447.5 14V125.179C447.5 132.082 441.903 137.679 435 137.679H15C8.09652 137.679 2.50013 132.082 2.5 125.179V14L2.50391 13.6777C2.67484 6.92311 8.20418 1.5 15 1.5H435Z\"\n        stroke={cardStroke}\n      />\n\n      <path\n        d=\"M21 14.5H41C44.0376 14.5 46.5 16.9624 46.5 20V28C46.5 31.0376 44.0376 33.5 41 33.5H21C17.9624 33.5 15.5 31.0376 15.5 28V20C15.5 16.9624 17.9624 14.5 21 14.5Z\"\n        stroke={errorBadgeColor}\n        fill=\"none\"\n      />\n      {textColor && customBadgeIcon ? (\n        <g transform=\"translate(19, 18)\" style={{ color: textColor }}>\n          {customBadgeIcon}\n        </g>\n      ) : null}\n      <text\n        x=\"31\"\n        y=\"28\"\n        fill={errorBadgeTextColor}\n        fontSize=\"10\"\n        fontFamily=\"system-ui, sans-serif\"\n        textAnchor=\"middle\"\n      >\n        {badgeText}\n      </text>\n      <text\n        x=\"55\"\n        y=\"28\"\n        fill={mutedTextColor}\n        fontSize=\"10\"\n        fontFamily=\"system-ui, sans-serif\"\n      >\n        {headerText}\n      </text>\n\n      <text\n        x=\"25\"\n        y=\"54\"\n        fill={mutedTextColor}\n        fontSize=\"9\"\n        fontFamily=\"system-ui, sans-serif\"\n        textAnchor=\"middle\"\n      >\n        {yAxisLabels[0]}\n      </text>\n      <text\n        x=\"25\"\n        y=\"82\"\n        fill={mutedTextColor}\n        fontSize=\"9\"\n        fontFamily=\"system-ui, sans-serif\"\n        textAnchor=\"middle\"\n      >\n        {yAxisLabels[1]}\n      </text>\n      <text\n        x=\"25\"\n        y=\"110\"\n        fill={mutedTextColor}\n        fontSize=\"9\"\n        fontFamily=\"system-ui, sans-serif\"\n        textAnchor=\"middle\"\n      >\n        {yAxisLabels[2]}\n      </text>\n\n      {showHighlightArea ? (\n        <rect\n          opacity=\"0.5\"\n          x={errorRegion.start}\n          y=\"50.589\"\n          width={errorRegion.end - errorRegion.start}\n          height=\"56\"\n          fill={highlightAreaColor}\n        />\n      ) : null}\n\n      <path d=\"M38.906 107.045H418.906\" stroke={gridLineColor} />\n      <path d=\"M38.906 79.045H418.906\" stroke={gridLineColor} />\n      <path d=\"M38.906 50.784H418.906\" stroke={gridLineColor} />\n\n      {showHighlightArea ? (\n        <>\n          <line\n            x1={errorRegion.start + 0.5}\n            y1=\"107.589\"\n            x2={errorRegion.start + 0.5}\n            y2=\"51.589\"\n            stroke={highlightBorderColor}\n            strokeDasharray=\"1 3\"\n          />\n          <line\n            x1={errorRegion.end + 0.5}\n            y1=\"107.589\"\n            x2={errorRegion.end + 0.5}\n            y2=\"51.589\"\n            stroke={highlightBorderColor}\n            strokeDasharray=\"1 3\"\n          />\n        </>\n      ) : null}\n\n      <text\n        x=\"400\"\n        y=\"121\"\n        fill={mutedTextColor}\n        fontSize=\"8\"\n        fontFamily=\"system-ui, sans-serif\"\n        textAnchor=\"middle\"\n      >\n        now\n      </text>\n      <text\n        x=\"63\"\n        y=\"121\"\n        fill={mutedTextColor}\n        fontSize=\"8\"\n        fontFamily=\"system-ui, sans-serif\"\n        textAnchor=\"middle\"\n      >\n        12h ago\n      </text>\n    </g>\n  )\n}\n\nfunction IllustrationGraphLines({\n  fullPath,\n  errorPath,\n  primaryLineColor,\n  errorLineColor,\n  showHighlightArea,\n}: {\n  fullPath: string\n  errorPath: string\n  primaryLineColor: string\n  errorLineColor: string\n  showHighlightArea: boolean\n}) {\n  return (\n    <g data-slot=\"illustration-graph-lines\">\n      <path\n        d={fullPath}\n        stroke={primaryLineColor}\n        strokeWidth=\"2\"\n        fill=\"none\"\n      />\n      {showHighlightArea && errorPath ? (\n        <path\n          d={errorPath}\n          stroke={errorLineColor}\n          strokeWidth=\"2\"\n          fill=\"none\"\n        />\n      ) : null}\n    </g>\n  )\n}\n\nfunction IllustrationGraph({\n  width = 450,\n  height = 185,\n  backgroundColor = \"transparent\",\n  borderColor,\n  cardFill = \"var(--card)\",\n  cardStroke = \"var(--border)\",\n  gridLineColor = \"var(--border)\",\n  primaryLineColor = \"#0070F3\",\n  errorLineColor = \"var(--destructive)\",\n  errorBadgeColor = \"var(--destructive)\",\n  errorBadgeTextColor = \"var(--destructive)\",\n  highlightAreaColor = \"color-mix(in srgb, var(--destructive) 8%, transparent)\",\n  highlightBorderColor = \"color-mix(in srgb, var(--destructive) 25%, transparent)\",\n  textColor = \"var(--card-foreground)\",\n  mutedTextColor = \"var(--muted-foreground)\",\n  badgeText = \"5xx\",\n  headerText = \"api / api/error rate / error rate\",\n  footerText = \"Investigate 12h ago / now\",\n  yAxisLabels = [\"40%\", \"20%\", \"0%\"],\n  dataPoints = defaultDataPoints,\n  errorRegion = { start: 205, end: 355 },\n  showHighlightArea = true,\n  customBadgeIcon,\n  className,\n  ...props\n}: IllustrationGraphProps) {\n  void borderColor\n  const idBase = useId().replaceAll(\":\", \"\")\n  const footerShadowId = `${idBase}-drop-shadow-footer`\n  const chartShadowId = `${idBase}-drop-shadow-chart`\n\n  const errorPoints = dataPoints.filter(\n    (point) => point.x >= errorRegion.start && point.x <= errorRegion.end\n  )\n  const fullPath = generatePath(dataPoints)\n  const errorPath = generatePath(errorPoints)\n\n  return (\n    <svg\n      data-slot=\"illustration-graph\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 450 185\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(className)}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      <title>API error rate graph</title>\n      <IllustrationGraphDefs\n        footerShadowId={footerShadowId}\n        chartShadowId={chartShadowId}\n      />\n      <IllustrationGraphFooter\n        shadowId={footerShadowId}\n        cardFill={cardFill}\n        cardStroke={cardStroke}\n        mutedTextColor={mutedTextColor}\n        footerText={footerText}\n      />\n      <IllustrationGraphChart\n        shadowId={chartShadowId}\n        cardFill={cardFill}\n        cardStroke={cardStroke}\n        gridLineColor={gridLineColor}\n        errorBadgeColor={errorBadgeColor}\n        errorBadgeTextColor={errorBadgeTextColor}\n        highlightAreaColor={highlightAreaColor}\n        highlightBorderColor={highlightBorderColor}\n        mutedTextColor={mutedTextColor}\n        badgeText={badgeText}\n        headerText={headerText}\n        yAxisLabels={yAxisLabels}\n        errorRegion={errorRegion}\n        showHighlightArea={showHighlightArea}\n        customBadgeIcon={customBadgeIcon}\n        textColor={textColor}\n      />\n      <IllustrationGraphLines\n        fullPath={fullPath}\n        errorPath={errorPath}\n        primaryLineColor={primaryLineColor}\n        errorLineColor={errorLineColor}\n        showHighlightArea={showHighlightArea}\n      />\n    </svg>\n  )\n}\n\nexport {\n  IllustrationGraph,\n  IllustrationGraphDefs,\n  IllustrationGraphFooter,\n  IllustrationGraphChart,\n  IllustrationGraphLines,\n}\n",
      "type": "registry:ui"
    }
  ]
}