@ac-design/design-system 1.0.3 → 2.1.0

package/README.md

@@ -14,7 +14,7 @@ npm run dev          # docs site at http://localhost:5173
 | | |
 | --- | --- |
 | **Theme** | `src/lib/theme.css`: colour scales, semantic tokens (text, borders, surfaces), type scale, radii, shadows and a full dark theme, as a Tailwind `@theme`. |
-| **Components** | 73 Vue components (counting sub-parts) in eight groups, listed below. |
+| **Components** | 85 Vue components plus 2 editors and 4 charts (counting sub-parts) in eight groups, listed below. |
 | **Editors** | `AcCodeEditor` and `AcFileEditor` on CodeMirror 6, in a separate entry so other apps don't bundle CodeMirror. |
 | **Composables** | `useColorMode()` (light/dark/system), `useToast()` (notifications), `useBrandColor()` (re-hue the brand at runtime). |
 | **Logo** | `AcLogo`: the AppsCode logo and mark as inline SVG that follows dark mode. |
@@ -24,29 +24,36 @@ npm run dev          # docs site at http://localhost:5173
 
 | Group | Components |
 | --- | --- |
-| Element | Button, Button Group, Badge, Tag, Avatar, Alert, Banner, Card, Divider, Kbd |
-| Feedback | Spinner, Preloader, Skeleton, Progress, Toast, Empty State |
-| Form | Input, Textarea, Code Editor, File Editor, Select, CheckBox, CheckRadio, Switch, Search Bar, File Upload, Slider, Date Picker, Form, Form Array, Theme Mode |
-| Overlay | Modal, Delete Modal, Side Panel, Dropdown, Tooltip |
-| Layout | Sidebar, Navbar, Header, Content Table, Section, Accordion, Status Bar |
-| Navigation | Breadcrumb, Tabs, Steps, Pagination, Side Tabs, App Switcher, Cluster Switcher, Notifications |
-| Data | Table, Info Table, Cell Value |
+| Element | Button, Button Group, Badge, Tag, Avatar, Alert, Banner, Card, Divider, Kbd, Copy Button |
+| Feedback | Spinner, Preloader, Skeleton, Progress, Circular Progress, Toast, Empty State |
+| Form | Input, Number Input, Tag Input, Key-Value Input, Textarea, Code Editor, File Editor, Select, CheckBox, CheckRadio, Switch, Switch Card, Search Bar, File Upload, Slider, Date Picker, Time Picker, Color Input, Form, Form Array, Theme Mode |
+| Overlay | Modal, Confirm Modal, Delete Modal, Side Panel, Dropdown, Tooltip |
+| Layout | Sidebar, Navbar, Header, Content Table, Section, Accordion, Status Bar, Footer |
+| Navigation | Breadcrumb, Tabs, Steps, Pagination, Side Tabs, App Switcher, Cluster Switcher, Notifications, Locale Switcher |
+| Data | Table, Bulk Action Bar, Info Table, Cell Value |
 | Cards | Stat Card, Feature Card, Resource Card, Usage Card |
+| Charts (`/charts`) | Line Chart, Area Chart, Bar Chart, Donut Chart |
 
 Example pages put them together: a database list, a database detail page, a create wizard, settings, empty and error states, and a full app shell.
 
 ## Look and feel
 
-- **Type:** Geist for the interface and Geist Mono for code and resource names, on a 13px base.
-- **Colour:** the AppsCode green brand scale and slate neutrals. Status colours are green, blue, yellow and red.
-- **Shape:** 6px radius on controls and 10px on surfaces, with soft layered shadows from `shadow-xs` to `shadow-xl`.
-- **Focus:** a `focus-ring` utility (primary border and a soft halo) on form fields.
+The look and voice are the AppsCode Cloud console's (`cloud-ui`), so the system fits cloud-ui, kubedb-ui, cluster-ui and platform-ui alike.
+
+- **Type:** Roboto for the interface, Google Sans Flex for headings and JetBrains Mono for code and resource names, on a 14px base.
+- **Colour:** white cards on a `#f9fafb` page, neutral greys (`#252525` text, `#5c5c5c` descriptions, one `#ebebeb` border), the `#00a651` brand green, and success, info, warning, danger and pending statuses, each with an AA `-strong` text colour.
+- **Shape:** 40px controls with a 10px radius, 14px cards and 16px dialogs. Cards rest on a border; shadows mark only what floats.
+- **Focus:** a `focus-ring` utility (primary border and a 2px halo) on form fields, and a 2px offset ring on buttons.
 - **Dark mode:** class-based. Every token has a dark value, so components need no dark-specific code.
 - **Icons:** [Lucide](https://lucide.dev) (`@lucide/vue`). Components never draw their own SVG icons.
 
 ## Using it in an app
 
-The package is `@ac-design/design-system` **1.0.0**. `npm run build:lib` writes it to `dist/lib`, and `npm pack` makes an installable tarball.
+The package is `@ac-design/design-system` **2.0.0**. `npm run build:lib` writes it to `dist/lib`, and `npm pack` makes an installable tarball.
+
+## Styling rule
+
+Style with **Tailwind utility classes and the design tokens**. Don't write custom CSS: no `<style>` blocks in components and no one-off class rules. Use arbitrary values (`max-w-[320px]`, `bg-[color-mix(in_srgb,var(--color-primary)_6%,var(--color-surface))]`) for exact values, and arbitrary variants (`[&_.cm-content]:p-2`) for markup you don't own. If something truly can't be a utility, add a token or `@utility` to `theme.css`. The full rule is in `CLAUDE.md`.
 
 There are two ways to load the styles:
 
@@ -61,14 +68,15 @@ The docs page **Getting Started → Existing Apps** has the full guide. In short
 
 ```sh
 # installed next to the old 2.x package, under a second name
-npm install @appscode/ds-next@npm:@ac-design/design-system@1.0.0 @lucide/vue
+npm install @appscode/ds-next@npm:@ac-design/design-system@2.0.0 @lucide/vue
 ```
 
 ```ts
 // main.ts (Vite), or the `css` list in nuxt.config.ts: after the old styles
 import "./assets/styles/scss/main.scss";
-import "@fontsource-variable/geist";
-import "@fontsource-variable/geist-mono";
+import "@fontsource-variable/roboto";
+import "@fontsource-variable/google-sans-flex/opsz.css";
+import "@fontsource-variable/jetbrains-mono";
 import "@appscode/ds-next/compat.css";
 ```
 
@@ -79,8 +87,9 @@ import "@appscode/ds-next/compat.css";
 
 ```ts
 // main.ts: fonts once
-import "@fontsource-variable/geist";
-import "@fontsource-variable/geist-mono";
+import "@fontsource-variable/roboto";
+import "@fontsource-variable/google-sans-flex/opsz.css";
+import "@fontsource-variable/jetbrains-mono";
 ```
 
 ```css

package/dist/lib/charts/ChartFrame.js

@@ -0,0 +1,5 @@
+import e from "./ChartFrame.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/charts/ChartFrame.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/lib/charts/ChartFrame.vue.d.ts

@@ -0,0 +1,71 @@
+import type { Component } from "vue";
+import type { ChartDatum, ChartLegendItem, ChartTable, ChartTooltipItem } from "./shared";
+export interface ChartTooltipState {
+    /** Pointer position in viewport px. */
+    clientX: number;
+    clientY: number;
+    title: string;
+    items: ChartTooltipItem[];
+    /** Sum of the items, shown for stacked charts. */
+    total?: string;
+    datum: ChartDatum;
+    index: number;
+}
+export interface ChartTooltipSlotProps {
+    /** The hovered row. */
+    datum: ChartDatum;
+    /** Its index in `data`. */
+    index: number;
+    /** The formatted x value or segment name. */
+    title: string;
+    /** One entry per visible series: name, colour, value and formatted value. */
+    items: ChartTooltipItem[];
+}
+type __VLS_Props = {
+    testid: string;
+    height: number;
+    loading: boolean;
+    empty: boolean;
+    emptyText: string;
+    emptyIcon: Component;
+    legend: "top" | "bottom" | "right" | "none";
+    legendItems: ChartLegendItem[];
+    /** Centres a top or bottom legend under a round plot. */
+    legendCentered?: boolean;
+    summary: string;
+    title?: string;
+    description?: string;
+    table: ChartTable;
+    tip: ChartTooltipState | null;
+    tooltip: boolean;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+    tooltip?: (props: ChartTooltipSlotProps) => unknown;
+    /** Buttons over the plot, e.g. zoom. Kept outside the role="img" element so they stay reachable. */
+    controls?: () => unknown;
+};
+type __VLS_ModelProps = {
+    "hidden": string[];
+    "width"?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:hidden": (value: string[]) => any;
+    "update:width": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:hidden"?: ((value: string[]) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    legendCentered: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/charts/ChartFrame.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,173 @@
+import e from "../components/AcSkeleton.js";
+import t from "../components/AcEmptyState.js";
+import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, useModel as b, watch as x } from "vue";
+//#region src/lib/charts/ChartFrame.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate" }, T = {
+	key: 0,
+	class: "ml-auto pl-3 font-medium text-heading tabular-nums"
+}, E = ["role", "aria-label"], D = ["aria-label"], O = {
+	key: 4,
+	class: "sr-only"
+}, k = {
+	key: 5,
+	class: "sr-only"
+}, A = {
+	scope: "row",
+	class: "text-left"
+}, j = {
+	key: 0,
+	class: "mb-1.5 font-medium text-heading"
+}, M = { class: "m-0 flex list-none flex-col gap-1 p-0" }, N = { class: "min-w-0 flex-1 truncate text-muted" }, P = { class: "pl-4 font-medium text-heading tabular-nums" }, F = {
+	key: 1,
+	class: "mt-1.5 flex justify-between gap-4 border-t border-border pt-1.5"
+}, I = { class: "font-medium text-heading tabular-nums" }, L = 14, R = 300, z = 200, B = /*@__PURE__*/ l({
+	__name: "ChartFrame",
+	props: /*@__PURE__*/ u({
+		testid: {},
+		height: {},
+		loading: { type: Boolean },
+		empty: { type: Boolean },
+		emptyText: {},
+		emptyIcon: {},
+		legend: {},
+		legendItems: {},
+		legendCentered: {
+			type: Boolean,
+			default: !1
+		},
+		summary: {},
+		title: { default: "" },
+		description: { default: "" },
+		table: {},
+		tip: {},
+		tooltip: { type: Boolean }
+	}, {
+		hidden: { required: !0 },
+		hiddenModifiers: {},
+		width: { default: 0 },
+		widthModifiers: {}
+	}),
+	emits: ["update:hidden", "update:width"],
+	setup(l) {
+		let u = l, B = b(l, "hidden"), V = b(l, "width"), H = g(), U;
+		function W(e) {
+			let t = B.value.includes(e);
+			!t && u.legendItems.length - B.value.length <= 1 || (B.value = t ? B.value.filter((t) => t !== e) : [...B.value, e]);
+		}
+		function G(e) {
+			let t = e.clientX > window.innerWidth - R, n = e.clientY > window.innerHeight - z;
+			return {
+				left: t ? void 0 : `${e.clientX + L}px`,
+				right: t ? `${window.innerWidth - e.clientX + L}px` : void 0,
+				top: n ? void 0 : `${e.clientY + L}px`,
+				bottom: n ? `${window.innerHeight - e.clientY + L}px` : void 0
+			};
+		}
+		function K() {
+			U?.disconnect(), H.value && typeof ResizeObserver < "u" && (U = new ResizeObserver(([e]) => {
+				e && (V.value = Math.round(e.contentRect.width));
+			}), U.observe(H.value));
+		}
+		return x(H, K), m(K), p(() => U?.disconnect()), (u, p) => (h(), o("figure", {
+			class: d(["m-0 flex w-full min-w-0 gap-3", l.legend === "right" ? "flex-wrap items-center justify-center gap-x-10" : "flex-col"]),
+			"data-ac-ds": "",
+			"data-ac-chart": "",
+			"data-testid": l.testid
+		}, [
+			l.legend !== "none" && l.legendItems.length > 1 && !l.loading && !l.empty ? (h(), o("ul", {
+				key: 0,
+				class: d(["m-0 flex list-none flex-wrap gap-x-4 gap-y-1.5 p-0", [
+					l.legend === "bottom" && "order-last",
+					l.legend === "right" && "order-last max-w-[320px] min-w-[180px] flex-1 flex-col gap-y-2",
+					l.legendCentered && l.legend !== "right" && "justify-center"
+				]]),
+				"aria-label": "Legend"
+			}, [(h(!0), o(n, null, _(l.legendItems, (e) => (h(), o("li", {
+				key: e.key,
+				class: "flex"
+			}, [s("button", {
+				type: "button",
+				class: d(["inline-flex min-w-0 cursor-pointer items-center gap-2 rounded-6 text-xs transition-colors duration-200 hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface motion-reduce:transition-none", [B.value.includes(e.key) ? "text-muted/60 line-through" : "text-muted", l.legend === "right" && "w-full"]]),
+				"aria-pressed": !B.value.includes(e.key),
+				onClick: (t) => W(e.key)
+			}, [
+				s("span", {
+					class: d(["size-2.5 shrink-0 rounded-full transition-opacity duration-200 motion-reduce:transition-none", B.value.includes(e.key) && "opacity-30"]),
+					style: f({ backgroundColor: e.color }),
+					"aria-hidden": "true"
+				}, null, 6),
+				s("span", w, y(e.name), 1),
+				e.value ? (h(), o("span", T, y(e.value), 1)) : a("", !0)
+			], 10, C)]))), 128))], 2)) : a("", !0),
+			l.loading ? (h(), i(e, {
+				key: 1,
+				shape: "rect",
+				height: `${l.height}px`,
+				label: "Loading chart"
+			}, null, 8, ["height"])) : l.empty ? (h(), o("div", {
+				key: 2,
+				class: "flex w-full items-center justify-center overflow-hidden",
+				style: f({ height: `${l.height}px` })
+			}, [c(t, {
+				size: "small",
+				icon: l.emptyIcon,
+				title: l.emptyText
+			}, null, 8, ["icon", "title"])], 4)) : (h(), o("div", {
+				key: 3,
+				ref_key: "plot",
+				ref: H,
+				class: d(["relative min-w-0", l.legend === "right" ? "max-w-full shrink-0" : "w-full"]),
+				style: f(l.legend === "right" ? {
+					height: `${l.height}px`,
+					width: `${l.height}px`
+				} : { height: `${l.height}px` }),
+				role: u.$slots.controls ? void 0 : "img",
+				"aria-label": u.$slots.controls ? void 0 : l.summary
+			}, [u.$slots.controls ? (h(), o("div", {
+				key: 0,
+				class: "size-full",
+				role: "img",
+				"aria-label": l.summary
+			}, [v(u.$slots, "default")], 8, D)) : v(u.$slots, "default", {}, void 0, void 0, 1), v(u.$slots, "controls")], 14, E)),
+			l.title || l.description ? (h(), o("figcaption", O, y([l.title, l.description].filter(Boolean).join(". ")), 1)) : a("", !0),
+			!l.loading && !l.empty ? (h(), o("table", k, [
+				s("caption", null, y(l.title ? `${l.title}: data` : "Chart data"), 1),
+				s("thead", null, [s("tr", null, [(h(!0), o(n, null, _(l.table.columns, (e, t) => (h(), o("th", {
+					key: t,
+					scope: "col",
+					class: "text-left"
+				}, y(e), 1))), 128))])]),
+				s("tbody", null, [(h(!0), o(n, null, _(l.table.rows, (e, t) => (h(), o("tr", { key: t }, [s("th", A, y(e[0]), 1), (h(!0), o(n, null, _(e.slice(1), (e, t) => (h(), o("td", { key: t }, y(e), 1))), 128))]))), 128))])
+			])) : a("", !0),
+			(h(), i(r, { to: "body" }, [l.tooltip && l.tip && !l.loading && !l.empty ? (h(), o("div", {
+				key: 0,
+				class: "pointer-events-none fixed z-[100] w-max max-w-[280px] min-w-[160px] rounded-10 border border-border bg-surface px-3 py-2.5 text-xs text-body shadow-lg",
+				style: f(G(l.tip)),
+				"aria-hidden": "true",
+				"data-ac-ds": "",
+				"data-testid": "ac-chart-tooltip"
+			}, [v(u.$slots, "tooltip", {
+				datum: l.tip.datum,
+				index: l.tip.index,
+				title: l.tip.title,
+				items: l.tip.items
+			}, () => [
+				l.tip.title ? (h(), o("p", j, y(l.tip.title), 1)) : a("", !0),
+				s("ul", M, [(h(!0), o(n, null, _(l.tip.items, (e) => (h(), o("li", {
+					key: e.key,
+					class: "flex items-center gap-2"
+				}, [
+					s("span", {
+						class: "size-2 shrink-0 rounded-full",
+						style: f({ backgroundColor: e.color })
+					}, null, 4),
+					s("span", N, y(e.name), 1),
+					s("span", P, y(e.formatted), 1)
+				]))), 128))]),
+				l.tip.total ? (h(), o("p", F, [p[0] ||= s("span", { class: "text-muted" }, "Total", -1), s("span", I, y(l.tip.total), 1)])) : a("", !0)
+			])], 4)) : a("", !0)]))
+		], 10, S));
+	}
+});
+//#endregion
+export { B as default };

package/dist/lib/charts/cartesian.d.ts

@@ -0,0 +1,324 @@
+import type { ECharts } from "echarts/core";
+import type { ChartTheme } from "./echarts";
+import type { useXYChart, XYChartProps } from "./xy";
+type XYState = ReturnType<typeof useXYChart>;
+interface CartesianOptions {
+    /** Bars sit between ticks; lines run edge to edge. */
+    boundaryGap: boolean;
+    /** Values on x and categories on y (horizontal bars). */
+    horizontal?: boolean;
+    /** `line` guide for lines and areas, `shadow` band for bars. */
+    pointer: "line" | "shadow";
+}
+/** Loads the zoom slider and wheel zoom only for charts that turn `zoom` on. */
+export declare function prepareZoom(props: Pick<XYChartProps, "zoom">): Promise<unknown> | undefined;
+export declare function animationFor(props: Pick<XYChartProps, "animation" | "data">, t: ChartTheme): boolean;
+export declare function cartesianOption(t: ChartTheme, props: XYChartProps, s: XYState, o: CartesianOptions): {
+    dataZoom?: ({
+        filterMode: string;
+        zoomOnMouseWheel: string;
+        moveOnMouseWheel: boolean;
+        moveOnMouseMove: boolean;
+        yAxisIndex: number;
+        xAxisIndex?: undefined;
+        type: string;
+    } | {
+        filterMode: string;
+        zoomOnMouseWheel: string;
+        moveOnMouseWheel: boolean;
+        moveOnMouseMove: boolean;
+        xAxisIndex: number;
+        yAxisIndex?: undefined;
+        type: string;
+    } | {
+        filterMode: string;
+        height: number;
+        bottom: number;
+        left: number;
+        right: number;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        fillerColor: string;
+        dataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        selectedDataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        handleStyle: {
+            color: string;
+            borderColor: string;
+        };
+        moveHandleStyle: {
+            color: string;
+        };
+        emphasis: {
+            handleStyle: {
+                borderColor: string;
+            };
+            moveHandleStyle: {
+                color: string;
+            };
+        };
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+        labelFormatter: (v: number) => string;
+        brushSelect: boolean;
+        yAxisIndex: number;
+        xAxisIndex?: undefined;
+        type: string;
+    } | {
+        filterMode: string;
+        height: number;
+        bottom: number;
+        left: number;
+        right: number;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        fillerColor: string;
+        dataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        selectedDataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        handleStyle: {
+            color: string;
+            borderColor: string;
+        };
+        moveHandleStyle: {
+            color: string;
+        };
+        emphasis: {
+            handleStyle: {
+                borderColor: string;
+            };
+            moveHandleStyle: {
+                color: string;
+            };
+        };
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+        labelFormatter: (v: number) => string;
+        brushSelect: boolean;
+        xAxisIndex: number;
+        yAxisIndex?: undefined;
+        type: string;
+    })[] | undefined;
+    animation: boolean;
+    animationDuration: number;
+    textStyle: {
+        fontFamily: string;
+        color: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        outerBoundsMode: string;
+        outerBoundsContain: string;
+    };
+    xAxis: {
+        type: string;
+        data: string[] | undefined;
+        boundaryGap: boolean;
+        min: string | undefined;
+        max: string | undefined;
+        axisLabel: {
+            formatter: ((v: number) => string) | undefined;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+        };
+        axisPointer: {
+            show: boolean;
+            type: "line" | "shadow";
+            snap: boolean;
+            triggerTooltip: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+            shadowStyle: {
+                color: string;
+            };
+            label: {
+                show: boolean;
+            };
+            z: number;
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | {
+        type: string;
+        min: number | undefined;
+        max: number | undefined;
+        splitNumber: number;
+        axisLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            formatter: (v: number) => string;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+    yAxis: {
+        type: string;
+        min: number | undefined;
+        max: number | undefined;
+        splitNumber: number;
+        axisLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            formatter: (v: number) => string;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | {
+        inverse: boolean;
+        type: string;
+        data: string[] | undefined;
+        boundaryGap: boolean;
+        min: string | undefined;
+        max: string | undefined;
+        axisLabel: {
+            formatter: ((v: number) => string) | undefined;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+        };
+        axisPointer: {
+            show: boolean;
+            type: "line" | "shadow";
+            snap: boolean;
+            triggerTooltip: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+            shadowStyle: {
+                color: string;
+            };
+            label: {
+                show: boolean;
+            };
+            z: number;
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+};
+/** The row under the pointer: the category index, or the nearest x value on a time or number axis. */
+export declare function locateRow(chart: ECharts, point: [number, number], s: XYState, horizontal?: boolean): number | null;
+export {};