vccs 0.6.0 → 1.0.0-beta.2

package/dist/chart/ChartWrapper.d.ts

@@ -0,0 +1,167 @@
+import { CSSProperties, PropType, StyleValue } from 'vue';
+import { ChartPointer } from '../types/index.js';
+export interface WrapperInteractions {
+    click: (pointer: ChartPointer, target?: EventTarget | null) => void;
+    move: (pointer: ChartPointer, target?: EventTarget | null) => void;
+    focus: () => void;
+    keyDown: (event: KeyboardEvent) => void;
+    touchMove: (event: TouchEvent) => void;
+}
+export declare const chartWrapperProps: {
+    accessibilityLayer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    desc: StringConstructor;
+    descriptionId: StringConstructor;
+    /** Overrides the default `application` role of an accessible chart. */
+    role: StringConstructor;
+    tabIndex: NumberConstructor;
+    class: {
+        type: PropType<import('../types/index.js').VueClassValue>;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    isResponsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Box style from useResponsiveSize. */
+    boxStyle: {
+        type: PropType<CSSProperties>;
+        required: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    style: {
+        type: PropType<StyleValue>;
+    };
+    width: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+};
+export declare const ChartWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    interactions: {
+        type: PropType<WrapperInteractions>;
+        required: true;
+    };
+    accessibilityLayer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    desc: StringConstructor;
+    descriptionId: StringConstructor;
+    /** Overrides the default `application` role of an accessible chart. */
+    role: StringConstructor;
+    tabIndex: NumberConstructor;
+    class: {
+        type: PropType<import('../types/index.js').VueClassValue>;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    isResponsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Box style from useResponsiveSize. */
+    boxStyle: {
+        type: PropType<CSSProperties>;
+        required: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    style: {
+        type: PropType<StyleValue>;
+    };
+    width: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    resize: (_width: number, _height: number) => true;
+    click: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseenter: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mousemove: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseleave: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mousedown: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseup: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    contextmenu: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    dblclick: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchstart: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchmove: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchend: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    interactions: {
+        type: PropType<WrapperInteractions>;
+        required: true;
+    };
+    accessibilityLayer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    desc: StringConstructor;
+    descriptionId: StringConstructor;
+    /** Overrides the default `application` role of an accessible chart. */
+    role: StringConstructor;
+    tabIndex: NumberConstructor;
+    class: {
+        type: PropType<import('../types/index.js').VueClassValue>;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    isResponsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Box style from useResponsiveSize. */
+    boxStyle: {
+        type: PropType<CSSProperties>;
+        required: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    style: {
+        type: PropType<StyleValue>;
+    };
+    width: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseenter?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseleave?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onContextmenu?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onDblclick?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMousedown?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMousemove?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseup?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onResize?: ((_width: number, _height: number) => any) | undefined;
+    onTouchend?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onTouchmove?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onTouchstart?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+}>, {
+    class: import('../types/index.js').VueClassValue;
+    accessibilityLayer: boolean;
+    isResponsive: boolean;
+    interactive: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/ChartsWrapper.d.ts

@@ -1,118 +1,106 @@
-import { PropType, StyleValue } from 'vue';
-import { CategoricalChartFunc } from '../types';
 export declare const ChartsWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    accessibilityLayer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    desc: StringConstructor;
+    descriptionId: StringConstructor;
+    role: StringConstructor;
+    tabIndex: NumberConstructor;
     class: {
-        type: PropType<import('../types').VueClassValue>;
-        default: any;
+        type: import('vue').PropType<import('../types/index.js').VueClassValue>;
+        default: undefined;
     };
     height: {
         type: NumberConstructor;
-        required: true;
-    };
-    onClick: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onContextMenu: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onDoubleClick: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseDown: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseEnter: {
-        type: PropType<CategoricalChartFunc>;
+        required: boolean;
     };
-    onMouseLeave: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseMove: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseUp: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onResize: {
-        type: PropType<(width: number, height: number) => void>;
-    };
-    onTouchEnd: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onTouchMove: {
-        type: PropType<CategoricalChartFunc>;
+    isResponsive: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    onTouchStart: {
-        type: PropType<CategoricalChartFunc>;
+    boxStyle: {
+        type: import('vue').PropType<import('vue').CSSProperties>;
+        required: boolean;
     };
-    responsive: {
+    interactive: {
         type: BooleanConstructor;
         default: boolean;
     };
     style: {
-        type: PropType<StyleValue>;
+        type: import('vue').PropType<import('vue').StyleValue>;
     };
     width: {
         type: NumberConstructor;
-        required: true;
+        required: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    resize: (_width: number, _height: number) => true;
+    click: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseenter: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mousemove: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseleave: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mousedown: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseup: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    contextmenu: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    dblclick: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchstart: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchmove: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchend: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    accessibilityLayer: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: StringConstructor;
+    desc: StringConstructor;
+    descriptionId: StringConstructor;
+    role: StringConstructor;
+    tabIndex: NumberConstructor;
     class: {
-        type: PropType<import('../types').VueClassValue>;
-        default: any;
+        type: import('vue').PropType<import('../types/index.js').VueClassValue>;
+        default: undefined;
     };
     height: {
         type: NumberConstructor;
-        required: true;
-    };
-    onClick: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onContextMenu: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onDoubleClick: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseDown: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseEnter: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseLeave: {
-        type: PropType<CategoricalChartFunc>;
+        required: boolean;
     };
-    onMouseMove: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onMouseUp: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onResize: {
-        type: PropType<(width: number, height: number) => void>;
-    };
-    onTouchEnd: {
-        type: PropType<CategoricalChartFunc>;
-    };
-    onTouchMove: {
-        type: PropType<CategoricalChartFunc>;
+    isResponsive: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    onTouchStart: {
-        type: PropType<CategoricalChartFunc>;
+    boxStyle: {
+        type: import('vue').PropType<import('vue').CSSProperties>;
+        required: boolean;
     };
-    responsive: {
+    interactive: {
         type: BooleanConstructor;
         default: boolean;
     };
     style: {
-        type: PropType<StyleValue>;
+        type: import('vue').PropType<import('vue').StyleValue>;
     };
     width: {
         type: NumberConstructor;
-        required: true;
-    };
-}>> & Readonly<{}>, {
-    class: import('../types').VueClassValue;
-    responsive: boolean;
+        required: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseenter?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseleave?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onContextmenu?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onDblclick?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMousedown?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMousemove?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseup?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onResize?: ((_width: number, _height: number) => any) | undefined;
+    onTouchend?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onTouchmove?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onTouchstart?: ((_state: import('../types/index.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+}>, {
+    class: import('../types/index.js').VueClassValue;
+    accessibilityLayer: boolean;
+    isResponsive: boolean;
+    interactive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/CohortChart.d.ts

@@ -0,0 +1,254 @@
+import { ChartRenderContext, ChartVNode, RowDataKey } from '../types/typed.js';
+import { DataKey } from '../types/common.js';
+import { PropType, SlotsType, VNode } from 'vue';
+import { CellEvents } from '../events/componentEvents.js';
+import { StandaloneChartProps } from './directChartTypes.js';
+import { CellGridSlots } from './CellGridLayer.js';
+import { HeatmapKey } from './Heatmap.js';
+import { SvgTemplateAttributes } from '../utils/attributes.js';
+export interface CohortCell<Row = unknown> {
+    x: HeatmapKey;
+    y: HeatmapKey;
+    value: number | null;
+    /** First contributing row; rows retains all sources when cohort names repeat. */
+    row: Row;
+    rows: readonly Row[];
+    period: number;
+}
+/**
+ * Cohort retention: one row per cohort, one column per period since it started, each cell the
+ * share of the cohort still active. Immature periods stay blank, so the grid is a triangle.
+ *
+ * ```vue
+ * <CohortChart :data="[{ cohort: 'Jan', values: [1200, 640, 410] }]" :period-formatter="i => `M${i}`" />
+ * ```
+ */
+declare const _CohortChart: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    aspect: {
+        type: NumberConstructor;
+    };
+    initialDimension: {
+        type: PropType<import('../hooks/useRoundedSize.js').RoundedSize>;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    desc: StringConstructor;
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueFormatter: {
+        type: PropType<(value: number, item: unknown) => string>;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** One row per cohort, oldest first. */
+    data: {
+        type: PropType<readonly unknown[]>;
+        required: true;
+    };
+    /** Field naming the cohort, e.g. its signup month. */
+    cohortKey: {
+        type: PropType<DataKey<unknown>>;
+        default: string;
+    };
+    /**
+     * Field with the counts per period: index 0 is the cohort's size, index n how many were
+     * still active n periods later. Periods not reached yet are simply left out.
+     */
+    valuesKey: {
+        type: PropType<DataKey<unknown>>;
+        default: string;
+    };
+    /** `percent` of the cohort size, or the raw `count`. */
+    mode: {
+        type: PropType<"percent" | "count">;
+        default: string;
+    };
+    /** Column heading per period, e.g. `i => \`Month ${i}\``. */
+    periodFormatter: {
+        type: PropType<(period: number) => string>;
+        default: (period: number) => string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeIndex: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    radius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<import('../index.js').ChartTransition>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:activeIndex': (_index: number | null) => boolean;
+    'cell-click': (_payload: unknown, _index: number, _event: MouseEvent | KeyboardEvent) => boolean;
+    'cell-mouseenter': (_payload: unknown, _index: number, _event: MouseEvent) => boolean;
+    'cell-mouseleave': (_payload: unknown, _index: number, _event: MouseEvent) => boolean;
+    'animation-start': () => boolean;
+    'animation-end': () => boolean;
+    click: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseenter: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mousemove: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseleave: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mousedown: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    mouseup: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    contextmenu: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    dblclick: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchstart: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchmove: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+    touchend: (_state: import('../events/componentEvents.js').ChartPointerState, _event: MouseEvent | TouchEvent) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    aspect: {
+        type: NumberConstructor;
+    };
+    initialDimension: {
+        type: PropType<import('../hooks/useRoundedSize.js').RoundedSize>;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    desc: StringConstructor;
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueFormatter: {
+        type: PropType<(value: number, item: unknown) => string>;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** One row per cohort, oldest first. */
+    data: {
+        type: PropType<readonly unknown[]>;
+        required: true;
+    };
+    /** Field naming the cohort, e.g. its signup month. */
+    cohortKey: {
+        type: PropType<DataKey<unknown>>;
+        default: string;
+    };
+    /**
+     * Field with the counts per period: index 0 is the cohort's size, index n how many were
+     * still active n periods later. Periods not reached yet are simply left out.
+     */
+    valuesKey: {
+        type: PropType<DataKey<unknown>>;
+        default: string;
+    };
+    /** `percent` of the cohort size, or the raw `count`. */
+    mode: {
+        type: PropType<"percent" | "count">;
+        default: string;
+    };
+    /** Column heading per period, e.g. `i => \`Month ${i}\``. */
+    periodFormatter: {
+        type: PropType<(period: number) => string>;
+        default: (period: number) => string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeIndex: {
+        type: PropType<number | null>;
+        default: undefined;
+    };
+    radius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<import('../index.js').ChartTransition>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClick?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseenter?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseleave?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    "onAnimation-start"?: (() => any) | undefined;
+    "onAnimation-end"?: (() => any) | undefined;
+    "onUpdate:activeIndex"?: ((_index: number | null) => any) | undefined;
+    onContextmenu?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onDblclick?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMousedown?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMousemove?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onMouseup?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onTouchend?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onTouchmove?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    onTouchstart?: ((_state: import('../types/common.js').MouseHandlerDataParam, _event: MouseEvent | TouchEvent) => any) | undefined;
+    "onCell-click"?: ((_payload: unknown, _index: number, _event: KeyboardEvent | MouseEvent) => any) | undefined;
+    "onCell-mouseenter"?: ((_payload: unknown, _index: number, _event: MouseEvent) => any) | undefined;
+    "onCell-mouseleave"?: ((_payload: unknown, _index: number, _event: MouseEvent) => any) | undefined;
+}>, {
+    gap: number;
+    color: string;
+    mode: "percent" | "count";
+    radius: number;
+    isAnimationActive: boolean;
+    transition: import('../index.js').ChartTransition;
+    title: string;
+    activeIndex: number | null;
+    valueFormatter: (value: number, item: unknown) => string;
+    locale: string;
+    emptyColor: string;
+    cohortKey: DataKey<unknown>;
+    valuesKey: DataKey<unknown>;
+    periodFormatter: (period: number) => string;
+}, SlotsType<CellGridSlots<CohortCell<unknown>> & {
+    default?: () => VNode[];
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export type CohortChartSlots<Row = unknown> = CellGridSlots<CohortCell<Row>> & {
+    default?: () => VNode[];
+};
+export type CohortChartProps<Row = unknown> = StandaloneChartProps<InstanceType<typeof _CohortChart>['$props'], CellEvents<CohortCell<NoInfer<Row>>> & {
+    data: readonly Row[];
+    cohortKey?: RowDataKey<NoInfer<Row>>;
+    valuesKey?: RowDataKey<NoInfer<Row>>;
+    valueFormatter?: (value: number, cell: CohortCell<NoInfer<Row>>) => string;
+}>;
+export declare const CohortChart: <Row>(props: CohortChartProps<Row> & Omit<SvgTemplateAttributes, keyof CohortChartProps<Row>>, context?: ChartRenderContext<CohortChartSlots<Row>>) => ChartVNode<CohortChartProps<Row>, CohortChartSlots<Row>>;
+export {};