@umituz/web-design-system 6.0.1 → 6.1.0

package/src/__tests__/charts/ChartPrimitives.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { ChartCard } from "../../presentation/organisms/charts/ChartCard";
+import { Legend } from "../../presentation/organisms/charts/Legend";
+import { HBars } from "../../presentation/organisms/charts/HBars";
+import { Sparkline } from "../../presentation/organisms/charts/Sparkline";
+import type { TipState } from "../../presentation/organisms/charts/utils";
+
+describe("ChartCard", () => {
+  const tip: TipState = { x: 10, y: 20, title: "bugün", rows: [{ label: "A", value: "7", color: "#111111" }] };
+
+  it("renders the heading, tools, body and tooltip", () => {
+    const { container } = render(
+      <ChartCard
+        title="Gelir"
+        subtitle="son 30 gün"
+        legend={<Legend items={[{ label: "A", color: "#111111", value: "7" }]} />}
+        actions={<button type="button">act</button>}
+        tip={tip}
+      >
+        <div>plot</div>
+      </ChartCard>,
+    );
+    expect(container.querySelector(".udb-chartcard__title")!.textContent).toBe("Gelir");
+    expect(container.querySelector(".udb-chartcard__sub")!.textContent).toBe("son 30 gün");
+    expect(container.querySelector(".udb-chartlegend__value")!.textContent).toBe("7");
+    expect(container.querySelector(".udb-chartcard__tools button")).not.toBeNull();
+    expect(container.querySelector(".udb-charttip__title")!.textContent).toBe("bugün");
+    expect(container.querySelector(".udb-charttip")!.textContent).toContain("7");
+  });
+
+  it("omits the tooltip when tip is null and zeroes body padding when bare", () => {
+    const { container } = render(
+      <ChartCard title="T" tip={null} bare>
+        <div>x</div>
+      </ChartCard>,
+    );
+    expect(container.querySelector(".udb-charttip")).toBeNull();
+    expect(container.querySelector<HTMLElement>(".udb-chartcard__body")!.style.padding).toBe("0px");
+  });
+});
+
+describe("Legend", () => {
+  it("renders items with optional value and hint", () => {
+    const { container } = render(
+      <Legend
+        items={[
+          { label: "A", color: "#111111", value: "3" },
+          { label: "B", color: "#222222", hint: "tahmini" },
+        ]}
+      />,
+    );
+    const items = container.querySelectorAll(".udb-chartlegend__item");
+    expect(items).toHaveLength(2);
+    expect(items[0]!.textContent).toContain("3");
+    expect(items[1]!.textContent).toContain("tahmini");
+  });
+});
+
+describe("HBars", () => {
+  it("scales fill widths against the largest row and applies tones", () => {
+    const { container } = render(
+      <HBars
+        rows={[
+          { label: "A", value: 5 },
+          { label: "B", value: 10, tone: "#00ff00" },
+        ]}
+        formatValue={(n) => `${n}₺`}
+      />,
+    );
+    const fills = [...container.querySelectorAll(".udb-hbars__fill")] as HTMLElement[];
+    expect(fills.map((f) => f.style.width)).toEqual(["50%", "100%"]);
+    expect(fills[1]!.style.background).toBe("rgb(0, 255, 0)");
+    expect(container.querySelector(".udb-hbars__value")!.textContent).toBe("5₺");
+  });
+});
+
+describe("Sparkline", () => {
+  it("renders a gradient area, line and end dot", () => {
+    const { container } = render(<Sparkline data={[1, 5, 3]} />);
+    expect(container.querySelector("linearGradient")).not.toBeNull();
+    expect(container.querySelector("circle")).not.toBeNull();
+    expect(container.querySelectorAll("path")).toHaveLength(2);
+  });
+
+  it("renders nothing for fewer than two points", () => {
+    const { container } = render(<Sparkline data={[1]} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/__tests__/charts/Donut.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+import { Donut } from "../../presentation/organisms/charts/Donut";
+
+describe("Donut", () => {
+  it("renders one segment per entry with computed percentages", () => {
+    const { container } = render(
+      <Donut
+        segments={[
+          { label: "A", value: 3 },
+          { label: "B", value: 1 },
+        ]}
+        centerValue="4"
+        centerLabel="total"
+      />,
+    );
+    expect(container.querySelectorAll(".udb-donut__seg")).toHaveLength(2);
+    expect(container.querySelectorAll(".udb-donut__item")).toHaveLength(2);
+    expect(container.querySelector(".udb-donut__pct")!.textContent).toBe("75%");
+    expect(container.querySelector(".udb-donut__value")!.textContent).toBe("4");
+    expect(container.querySelector(".udb-donut__label")!.textContent).toBe("total");
+  });
+
+  it("swaps the center readout to the hovered segment", () => {
+    const { container } = render(
+      <Donut
+        segments={[
+          { label: "A", value: 3 },
+          { label: "B", value: 1 },
+        ]}
+        centerValue="4"
+      />,
+    );
+    fireEvent.mouseEnter(container.querySelectorAll(".udb-donut__seg")[1]!);
+    expect(container.querySelector(".udb-donut__value")!.textContent).toBe("1");
+    expect(container.querySelector(".udb-donut__label")!.textContent).toBe("B");
+  });
+
+  it("colors segments through the --udb-chart tokens by default", () => {
+    const { container } = render(<Donut segments={[{ label: "A", value: 1 }]} />);
+    const seg = container.querySelector(".udb-donut__seg")!;
+    expect(seg.getAttribute("stroke")).toContain("var(--udb-chart-1");
+  });
+
+  it("lets an explicit tone win over the series tokens", () => {
+    const { container } = render(
+      <Donut segments={[{ label: "A", value: 1, tone: "#ff0000" }]} />,
+    );
+    expect(container.querySelector(".udb-donut__seg")!.getAttribute("stroke")).toBe("#ff0000");
+  });
+});

package/src/__tests__/charts/LineChart.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+import { LineChart } from "../../presentation/organisms/charts/LineChart";
+
+const labels = ["1", "2", "3", "4"];
+
+describe("LineChart", () => {
+  it("renders nothing without points", () => {
+    const { container } = render(<LineChart labels={[]} series={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders a flat area by default", () => {
+    const { container } = render(
+      <LineChart labels={labels} series={[{ label: "A", values: [1, 2, 3, 4] }]} />,
+    );
+    const paths = container.querySelectorAll("path");
+    expect(paths).toHaveLength(2);
+    expect(paths[0]!.getAttribute("opacity")).toBe("0.07");
+    expect(container.querySelector("linearGradient")).toBeNull();
+  });
+
+  it("paints the area with a per-series gradient when requested", () => {
+    const { container } = render(
+      <LineChart
+        labels={labels}
+        series={[{ label: "A", values: [1, 2, 3, 4], areaFill: "gradient" }]}
+      />,
+    );
+    const gradient = container.querySelector("linearGradient");
+    expect(gradient).not.toBeNull();
+    expect(gradient!.querySelectorAll("stop")).toHaveLength(2);
+    const areaPath = [...container.querySelectorAll("path")].find((p) =>
+      p.getAttribute("fill")?.startsWith("url(#"),
+    );
+    expect(areaPath).toBeDefined();
+    expect(areaPath!.getAttribute("opacity")).toBeNull();
+  });
+
+  it("drops the area for dashed series", () => {
+    const { container } = render(
+      <LineChart labels={labels} series={[{ label: "A", values: [1, 2, 3, 4], dashed: true }]} />,
+    );
+    expect(container.querySelectorAll("path")).toHaveLength(1);
+    expect(container.querySelector("linearGradient")).toBeNull();
+  });
+
+  it("renders the band and a crosshair with tooltip on hover", () => {
+    const { container } = render(
+      <LineChart
+        labels={labels}
+        band={{ from: 1, to: 2 }}
+        series={[{ label: "A", values: [1, 2, 3, 4] }]}
+      />,
+    );
+    expect(container.querySelector(".udb-linechart__band")).not.toBeNull();
+
+    const svg = container.querySelector("svg")!;
+    fireEvent.mouseMove(svg, { clientX: 700, clientY: 50 });
+    expect(container.querySelector(".udb-linechart__crosshair")).not.toBeNull();
+    const tip = container.querySelector(".udb-linechart__tip");
+    expect(tip).not.toBeNull();
+    expect(tip!.textContent).toContain("A");
+  });
+
+  it("renders the built-in legend from the series", () => {
+    const { container } = render(
+      <LineChart
+        labels={labels}
+        series={[
+          { label: "A", values: [1, 2, 3, 4] },
+          { label: "B", values: [4, 3, 2, 1], axis: "right" },
+        ]}
+      />,
+    );
+    const items = container.querySelectorAll(".udb-chartlegend__item");
+    expect(items).toHaveLength(2);
+    expect(items[0]!.textContent).toContain("A");
+    expect(items[1]!.textContent).toContain("B");
+  });
+});

package/src/__tests__/layout-components.test.tsx

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { SectionHeader } from '../presentation/templates/SectionHeader';
+import { PageHeader } from '../presentation/templates/PageHeader';
+import { TabNav } from '../presentation/molecules/TabNav';
+import { AuditLogList } from '../presentation/organisms/AuditLogList';
+
+describe('SectionHeader', () => {
+  it('renders kicker, title, description, and actions', () => {
+    render(
+      <SectionHeader
+        kicker="Overview"
+        title="Account Settings"
+        description="Manage your account preferences"
+        actions={<button type="button">Save</button>}
+      />
+    );
+
+    expect(screen.getByText('Overview')).toBeDefined();
+    expect(screen.getByText('Account Settings')).toBeDefined();
+    expect(screen.getByText('Manage your account preferences')).toBeDefined();
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDefined();
+  });
+});
+
+describe('PageHeader enhanced', () => {
+  it('renders breadcrumbs, kicker, title, and actions', () => {
+    render(
+      <MemoryRouter>
+        <PageHeader
+          breadcrumbs={[
+            { label: 'Home', to: '/' },
+            { label: 'Settings', to: '/settings' },
+            { label: 'Security' },
+          ]}
+          kicker="Security Panel"
+          title="Two-Factor Auth"
+          description="Protect your workspace"
+          actions={<button type="button">Enable</button>}
+        />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Home')).toBeDefined();
+    expect(screen.getByText('Settings')).toBeDefined();
+    expect(screen.getByText('Security')).toBeDefined();
+    expect(screen.getByText('Security Panel')).toBeDefined();
+    expect(screen.getByText('Two-Factor Auth')).toBeDefined();
+    expect(screen.getByText('Protect your workspace')).toBeDefined();
+    expect(screen.getByRole('button', { name: 'Enable' })).toBeDefined();
+  });
+});
+
+describe('TabNav', () => {
+  it('renders router links with active status', () => {
+    render(
+      <MemoryRouter initialEntries={['/profile']}>
+        <TabNav
+          items={[
+            { label: 'General', to: '/general' },
+            { label: 'Profile', to: '/profile' },
+            { label: 'Billing', to: '/billing' },
+          ]}
+        />
+      </MemoryRouter>
+    );
+
+    const profileLink = screen.getByText('Profile');
+    expect(profileLink).toBeDefined();
+    expect(profileLink.closest('a')?.getAttribute('href')).toBe('/profile');
+  });
+});
+
+describe('AuditLogList', () => {
+  it('renders empty state when no entries', () => {
+    render(<AuditLogList entries={[]} emptyLabel="No activity recorded" />);
+    expect(screen.getByText('No activity recorded')).toBeDefined();
+  });
+
+  it('renders list of entries with actor, action, and target', () => {
+    render(
+      <AuditLogList
+        entries={[
+          {
+            id: '1',
+            actor: 'alice@example.com',
+            action: 'updated role',
+            target: 'bob@example.com',
+            at: '2026-11-06T12:00:00Z',
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByText('alice@example.com')).toBeDefined();
+    expect(screen.getByText('updated role')).toBeDefined();
+    expect(screen.getByText('bob@example.com')).toBeDefined();
+  });
+});

package/src/presentation/molecules/TabNav.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { NavLink } from 'react-router';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface TabNavItem {
+  to: string;
+  label: string;
+  end?: boolean;
+}
+
+export interface TabNavProps extends BaseProps {
+  items: readonly TabNavItem[];
+}
+
+export const TabNav: React.FC<TabNavProps> = ({ items, className }) => {
+  return (
+    <nav
+      className={cn(
+        'flex items-center gap-1 border-b border-border overflow-x-auto py-1',
+        className
+      )}
+      aria-label="Section tabs"
+    >
+      {items.map((item) => (
+        <NavLink
+          key={item.to}
+          to={item.to}
+          end={item.end}
+          className={({ isActive }) =>
+            cn(
+              'px-3.5 py-1.5 text-xs font-semibold rounded-lg transition-colors whitespace-nowrap',
+              isActive
+                ? 'bg-primary/10 text-primary font-bold'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/60'
+            )
+          }
+        >
+          {item.label}
+        </NavLink>
+      ))}
+    </nav>
+  );
+};
+
+TabNav.displayName = 'TabNav';

package/src/presentation/molecules/index.ts

@@ -87,3 +87,6 @@ export type { ConfirmButtonProps } from './ConfirmButton';
 
 export { Toolbar } from './Toolbar';
 export type { ToolbarProps } from './Toolbar';
+
+export { TabNav } from './TabNav';
+export type { TabNavProps, TabNavItem } from './TabNav';

package/src/presentation/organisms/AuditLogList.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { ScrollText } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface AuditEntry {
+  id: string;
+  actor: string;
+  action: string;
+  target?: string;
+  at: string;
+}
+
+export interface AuditLogListProps extends BaseProps {
+  entries: AuditEntry[];
+  emptyLabel?: string;
+  formatAt?: (iso: string) => string;
+}
+
+const defaultFormatAt = (iso: string): string => {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toISOString().slice(0, 16).replace('T', ' ');
+};
+
+export const AuditLogList: React.FC<AuditLogListProps> = ({
+  entries,
+  emptyLabel = 'Henüz denetim kaydı bulunmuyor.',
+  formatAt = defaultFormatAt,
+  className,
+}) => {
+  if (entries.length === 0) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center p-8 text-center text-muted-foreground', className)}>
+        <ScrollText className="size-8 opacity-40 mb-2" aria-hidden="true" />
+        <p className="text-xs sm:text-sm">{emptyLabel}</p>
+      </div>
+    );
+  }
+
+  return (
+    <ul className={cn('divide-y divide-border border border-border rounded-xl overflow-hidden bg-card text-xs', className)}>
+      {entries.map((entry) => (
+        <li key={entry.id} className="flex flex-wrap items-center gap-3 p-3 hover:bg-muted/40 transition-colors">
+          <span className="font-mono text-muted-foreground shrink-0">{formatAt(entry.at)}</span>
+          <span className="font-semibold text-foreground">{entry.actor}</span>
+          <span className="text-muted-foreground">{entry.action}</span>
+          {entry.target && (
+            <span className="font-medium text-primary bg-primary/10 px-1.5 py-0.5 rounded text-[11px]">
+              {entry.target}
+            </span>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+AuditLogList.displayName = 'AuditLogList';

package/src/presentation/organisms/charts/ActivityHeatmap.tsx

@@ -0,0 +1,58 @@
+export interface HeatmapCell {
+  day: string;
+  value: number;
+}
+
+export interface ActivityHeatmapProps {
+  cells: HeatmapCell[];
+  max?: number;
+  titleFor?: (cell: HeatmapCell) => string;
+  ariaLabel?: string;
+  className?: string;
+  levelClassNames?: string[];
+}
+
+const DEFAULT_HEATMAP_LEVELS = [
+  'udb-heatmap__cell--l0',
+  'udb-heatmap__cell--l1',
+  'udb-heatmap__cell--l2',
+  'udb-heatmap__cell--l3',
+  'udb-heatmap__cell--l4',
+];
+
+export function ActivityHeatmap({
+  cells,
+  max,
+  titleFor,
+  ariaLabel = 'Activity heatmap',
+  className = '',
+  levelClassNames = DEFAULT_HEATMAP_LEVELS,
+}: ActivityHeatmapProps) {
+  const peak = Math.max(1, max ?? Math.max(0, ...cells.map((cell) => cell.value)));
+  const maxIntensity = levelClassNames.length - 1;
+
+  return (
+    <div
+      className={['udb-heatmap', className].filter(Boolean).join(' ')}
+      role="img"
+      aria-label={ariaLabel}
+    >
+      {cells.map((cell, index) => {
+        const intensity =
+          cell.value <= 0 ? 0 : Math.min(maxIntensity, Math.ceil((cell.value / peak) * maxIntensity));
+        const cellClass = levelClassNames[intensity] ?? levelClassNames[0];
+        const cellTitle = titleFor ? titleFor(cell) : `${cell.day}: ${cell.value}`;
+
+        return (
+          <span
+            key={`${cell.day}-${index}`}
+            className={`udb-heatmap__cell ${cellClass}`}
+            title={cellTitle}
+          >
+            <span className="udb-heatmap__sr">{cellTitle}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/src/presentation/organisms/charts/BarChart.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { seriesColor } from './utils';
+
+export interface BarSeries {
+  key?: string;
+  label: string;
+  values?: readonly number[];
+  data?: readonly number[];
+  tone?: string;
+  color?: string;
+  accents?: readonly (string | undefined)[];
+}
+
+export interface BarChartGoalLine {
+  value: number;
+  label?: string;
+  tone?: string;
+}
+
+export interface BarChartProps {
+  labels: readonly string[];
+  series: BarSeries[];
+  stacking?: 'grouped' | 'stacked';
+  totalLabel?: string;
+  height?: number;
+  formatValue?: (v: number) => string;
+  formatLabel?: (l: string) => string;
+  goalLine?: BarChartGoalLine;
+}
+
+export function BarChart({
+  labels,
+  series,
+  stacking = 'grouped',
+  totalLabel = 'Σ',
+  height = 130,
+  formatValue = (v: number) => String(v),
+  formatLabel = (l: string) => l,
+  goalLine,
+}: BarChartProps) {
+  const [hover, setHover] = useState<number | null>(null);
+  const vals = (s: BarSeries) => s.values ?? s.data ?? [];
+  const columnTotals = labels.map((_, i) => series.reduce((sum, s) => sum + (vals(s)[i] ?? 0), 0));
+  const max =
+    stacking === 'stacked'
+      ? Math.max(1, ...columnTotals, goalLine?.value ?? 0)
+      : Math.max(1, ...series.flatMap((s) => vals(s)), goalLine?.value ?? 0);
+  const toneOf = (s: BarSeries, i: number) => s.tone ?? s.color ?? seriesColor(i);
+  const accentOf = (s: BarSeries, si: number, i: number) => s.accents?.[i] ?? toneOf(s, si);
+  const goalPct = goalLine !== undefined ? Math.min(100, (goalLine.value / max) * 100) : null;
+  return (
+    <div className="udb-barchart" style={{ height }}>
+      {goalLine !== undefined && goalPct !== null && (
+        <div
+          className="udb-barchart__goal"
+          style={{
+            bottom: `${goalPct}%`,
+            ...(goalLine.tone !== undefined ? { borderTopColor: goalLine.tone } : {}),
+          }}
+          title={goalLine.label ?? formatValue(goalLine.value)}
+          aria-hidden="true"
+        >
+          {goalLine.label !== undefined && (
+            <span
+              className="udb-barchart__goallabel"
+              style={
+                goalLine.tone !== undefined
+                  ? { color: goalLine.tone, borderColor: goalLine.tone }
+                  : undefined
+              }
+            >
+              {goalLine.label}
+            </span>
+          )}
+        </div>
+      )}
+      {labels.map((label, i) => (
+        <div
+          key={label}
+          className="udb-barchart__col"
+          onMouseEnter={() => setHover(i)}
+          onMouseLeave={() => setHover(null)}
+        >
+          {stacking === 'stacked' ? (
+            <div className="udb-barchart__bars udb-barchart__bars--stacked">
+              {series.map((s, si) => {
+                const v = vals(s)[i] ?? 0;
+                return (
+                  <div
+                    key={s.key ?? s.label}
+                    className="udb-barchart__bar"
+                    style={{
+                      height: `${(v / max) * 100}%`,
+                      background: accentOf(s, si, i),
+                      opacity: hover === null || hover === i ? 1 : 0.4,
+                      ...(v === 0 ? { minHeight: 0 } : {}),
+                    }}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div className="udb-barchart__bars">
+              {series.map((s, si) => (
+                <div
+                  key={s.key ?? s.label}
+                  className="udb-barchart__bar"
+                  style={{
+                    height: `${Math.max(2, ((vals(s)[i] ?? 0) / max) * 100)}%`,
+                    background: accentOf(s, si, i),
+                    opacity: hover === null || hover === i ? 1 : 0.4,
+                  }}
+                />
+              ))}
+            </div>
+          )}
+          {hover === i && (
+            <div className="udb-barchart__tip">
+              <div className="udb-barchart__tiptitle">{formatLabel(label)}</div>
+              {series.map((s, si) => (
+                <div key={s.key ?? s.label} className="udb-barchart__tiprow">
+                  <span className="udb-barchart__tiplabel">
+                    <span className="udb-chartlegend__dot" style={{ background: accentOf(s, si, i) }} />
+                    {s.label}
+                  </span>
+                  <b>{formatValue(vals(s)[i] ?? 0)}</b>
+                </div>
+              ))}
+              {stacking === 'stacked' && (
+                <div className="udb-barchart__tiprow udb-barchart__tiprow--total">
+                  <span className="udb-barchart__tiplabel">
+                    <b>{totalLabel}</b>
+                  </span>
+                  <b>{formatValue(columnTotals[i] ?? 0)}</b>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/presentation/organisms/charts/ChartCard.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { TipState } from './utils';
+import { ChartTip } from './ChartTip';
+
+export interface ChartCardProps {
+  title: string;
+  subtitle?: string;
+  legend?: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  tip: TipState | null;
+  hostRef?: React.Ref<HTMLDivElement>;
+  onMouseLeave?: () => void;
+  bare?: boolean;
+  className?: string;
+}
+
+export function ChartCard({ title, subtitle, legend, actions, children, tip, hostRef, onMouseLeave, bare, className }: ChartCardProps) {
+  return (
+    <div className={['udb-chartcard', className].filter(Boolean).join(' ')}>
+      <div className="udb-chartcard__head">
+        <div className="udb-chartcard__heading">
+          <div className="udb-chartcard__title">{title}</div>
+          {subtitle && <div className="udb-chartcard__sub">{subtitle}</div>}
+        </div>
+        <div className="udb-chartcard__tools">
+          {legend}
+          {actions}
+        </div>
+      </div>
+      <div className="udb-chartcard__body" style={bare ? { padding: 0 } : undefined}>
+        <div ref={hostRef} className="udb-chartcard__plot" onMouseLeave={onMouseLeave}>
+          {children}
+          {tip && <ChartTip tip={tip} />}
+        </div>
+      </div>
+    </div>
+  );
+}