vccs 0.6.0 → 1.0.0-beta.2

package/dist/chart/SunburstChart.d.ts

@@ -1,117 +1,51 @@
-import { PropType, SlotsType } from 'vue';
-import { TooltipPayloadSearcher } from '../state/tooltipSlice';
-import { SunburstData, SunburstLayoutNode } from './sunburstUtils';
-export type { SunburstData };
+import { ChartDataKey } from '../types/base.js';
+import { ExtractPropTypes, PropType, SlotsType, VNode, VNodeChild } from 'vue';
+import { ChartTransition } from '../animation/motion.js';
+import { SunburstData, SunburstLayoutNode } from './sunburstUtils.js';
 export interface SunburstContentSlotProps extends SunburstLayoutNode {
     index: number;
 }
 export interface SunburstSlots {
-    content?: (props: SunburstContentSlotProps) => any;
-    default?: () => any;
+    content?: (props: SunburstContentSlotProps) => VNodeChild;
+    default?: () => VNode[];
 }
-export declare const sunburstPayloadSearcher: TooltipPayloadSearcher;
-export declare const SunburstChartVueProps: {
-    data: {
-        type: PropType<SunburstData>;
-        required: true;
-    };
-    dataKey: {
-        type: StringConstructor;
-        default: string;
-    };
-    nameKey: {
-        type: StringConstructor;
-        default: string;
-    };
+export declare const SunburstChart: import('../utils/attributes.js').WithAttributes<import('vue').DefineComponent<ExtractPropTypes<{
     width: {
         type: NumberConstructor;
-        required: true;
     };
     height: {
         type: NumberConstructor;
-        required: true;
-    };
-    cx: {
-        type: NumberConstructor;
-        default: any;
-    };
-    cy: {
-        type: NumberConstructor;
-        default: any;
-    };
-    innerRadius: {
-        type: NumberConstructor;
-        default: number;
-    };
-    outerRadius: {
-        type: NumberConstructor;
-        default: any;
     };
-    startAngle: {
+    aspect: {
         type: NumberConstructor;
-        default: number;
     };
-    endAngle: {
-        type: NumberConstructor;
-        default: number;
+    initialDimension: {
+        type: PropType<import('../hooks/useRoundedSize.js').RoundedSize>;
     };
-    ringPadding: {
-        type: NumberConstructor;
-        default: number;
-    };
-    padding: {
-        type: NumberConstructor;
-        default: number;
-    };
-    fill: {
+    title: {
         type: StringConstructor;
         default: string;
     };
-    stroke: {
-        type: StringConstructor;
-        default: string;
-    };
-    onClick: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
-    };
-    onMouseEnter: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
-    };
-    onMouseLeave: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
-    };
-};
-export declare const SunburstChart: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    desc: StringConstructor;
     data: {
         type: PropType<SunburstData>;
         required: true;
     };
     dataKey: {
-        type: StringConstructor;
+        type: PropType<ChartDataKey>;
         default: string;
     };
     nameKey: {
-        type: StringConstructor;
+        type: PropType<ChartDataKey>;
         default: string;
     };
-    width: {
-        type: NumberConstructor;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: true;
-    };
     cx: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     cy: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     innerRadius: {
         type: NumberConstructor;
@@ -119,7 +53,7 @@ export declare const SunburstChart: import('vue').DefineComponent<import('vue').
     };
     outerRadius: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     startAngle: {
         type: NumberConstructor;
@@ -139,52 +73,74 @@ export declare const SunburstChart: import('vue').DefineComponent<import('vue').
     };
     fill: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     stroke: {
         type: StringConstructor;
         default: string;
     };
-    onClick: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<ChartTransition>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'node-click': (_node: SunburstLayoutNode, _index: number, _event: MouseEvent | KeyboardEvent) => boolean;
+    'node-mouseenter': (_node: SunburstLayoutNode, _index: number, _event: MouseEvent) => boolean;
+    'node-mouseleave': (_node: SunburstLayoutNode, _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<ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
     };
-    onMouseEnter: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
+    height: {
+        type: NumberConstructor;
     };
-    onMouseLeave: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
+    aspect: {
+        type: NumberConstructor;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    initialDimension: {
+        type: PropType<import('../hooks/useRoundedSize.js').RoundedSize>;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    desc: StringConstructor;
     data: {
         type: PropType<SunburstData>;
         required: true;
     };
     dataKey: {
-        type: StringConstructor;
+        type: PropType<ChartDataKey>;
         default: string;
     };
     nameKey: {
-        type: StringConstructor;
+        type: PropType<ChartDataKey>;
         default: string;
     };
-    width: {
-        type: NumberConstructor;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: true;
-    };
     cx: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     cy: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     innerRadius: {
         type: NumberConstructor;
@@ -192,7 +148,7 @@ export declare const SunburstChart: import('vue').DefineComponent<import('vue').
     };
     outerRadius: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     startAngle: {
         type: NumberConstructor;
@@ -212,38 +168,51 @@ export declare const SunburstChart: import('vue').DefineComponent<import('vue').
     };
     fill: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     stroke: {
         type: StringConstructor;
         default: string;
     };
-    onClick: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
-    };
-    onMouseEnter: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
-    };
-    onMouseLeave: {
-        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
-        default: any;
-    };
-}>> & Readonly<{}>, {
-    fill: string;
-    padding: number;
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<ChartTransition>;
+        default: undefined;
+    };
+}>> & 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;
+    "onAnimation-start"?: (() => any) | undefined;
+    "onAnimation-end"?: (() => 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;
+    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;
+    "onNode-click"?: ((_node: SunburstLayoutNode, _index: number, _event: KeyboardEvent | MouseEvent) => any) | undefined;
+    "onNode-mouseenter"?: ((_node: SunburstLayoutNode, _index: number, _event: MouseEvent) => any) | undefined;
+    "onNode-mouseleave"?: ((_node: SunburstLayoutNode, _index: number, _event: MouseEvent) => any) | undefined;
+}>, {
     cx: number;
+    dataKey: ChartDataKey;
+    padding: number;
+    fill: string;
+    nameKey: ChartDataKey;
+    stroke: string;
     cy: number;
-    startAngle: number;
-    endAngle: number;
     innerRadius: number;
+    startAngle: number;
     outerRadius: number;
-    dataKey: string;
-    stroke: string;
-    onClick: (node: SunburstData, e: MouseEvent) => void;
-    nameKey: string;
-    onMouseEnter: (node: SunburstData, e: MouseEvent) => void;
-    onMouseLeave: (node: SunburstData, e: MouseEvent) => void;
+    endAngle: number;
+    isAnimationActive: boolean;
+    transition: ChartTransition;
+    title: string;
     ringPadding: number;
-}, SlotsType<SunburstSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, SlotsType<SunburstSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, import('../utils/attributes.js').HtmlTemplateAttributes>;

package/dist/chart/Tracker.d.ts

@@ -0,0 +1,211 @@
+import { StandaloneChartProps } from './directChartTypes.js';
+import { ChartRenderContext, ChartVNode, RowDataKey } from '../types/typed.js';
+import { PropType, SlotsType, VNode } from 'vue';
+import { CellEvents } from '../events/componentEvents.js';
+import { CellGridSlots } from './CellGridLayer.js';
+import { SvgTemplateAttributes } from '../utils/attributes.js';
+export type TrackerRow = Record<string, unknown>;
+export type TrackerSlots<Row = unknown> = CellGridSlots<Row> & {
+    default?: () => VNode[];
+};
+export type TrackerProps<Row = unknown> = StandaloneChartProps<InstanceType<typeof _Tracker>['$props'], CellEvents<NoInfer<Row>> & {
+    data: readonly Row[];
+    dataKey?: RowDataKey<NoInfer<Row>>;
+    nameKey?: RowDataKey<NoInfer<Row>>;
+}>;
+declare const _Tracker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    aspect: {
+        type: NumberConstructor;
+    };
+    initialDimension: {
+        type: PropType<import('../hooks/useRoundedSize.js').RoundedSize>;
+    };
+    /** One row per bar, oldest first. */
+    data: {
+        type: PropType<TrackerRow[]>;
+        required: true;
+    };
+    /** The field holding the status (`up`, `degraded`, `down`, `maintenance` or your own). */
+    dataKey: {
+        type: PropType<RowDataKey<TrackerRow>>;
+        default: string;
+    };
+    /** The field naming the bar, e.g. its date. It is also the bar's identity across updates. */
+    nameKey: {
+        type: PropType<RowDataKey<TrackerRow>>;
+        default: string;
+    };
+    /** Fill per status, merged over the defaults. */
+    statusColors: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    /** Readable text per status for tooltips and screen readers, merged over the defaults. */
+    statusLabels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Locale for dates in tooltips. Fixed by default so server and client render the same. */
+    locale: {
+        type: StringConstructor;
+        default: string;
+    };
+    desc: StringConstructor;
+    title: {
+        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>;
+    };
+    /** One row per bar, oldest first. */
+    data: {
+        type: PropType<TrackerRow[]>;
+        required: true;
+    };
+    /** The field holding the status (`up`, `degraded`, `down`, `maintenance` or your own). */
+    dataKey: {
+        type: PropType<RowDataKey<TrackerRow>>;
+        default: string;
+    };
+    /** The field naming the bar, e.g. its date. It is also the bar's identity across updates. */
+    nameKey: {
+        type: PropType<RowDataKey<TrackerRow>>;
+        default: string;
+    };
+    /** Fill per status, merged over the defaults. */
+    statusColors: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    /** Readable text per status for tooltips and screen readers, merged over the defaults. */
+    statusLabels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Locale for dates in tooltips. Fixed by default so server and client render the same. */
+    locale: {
+        type: StringConstructor;
+        default: string;
+    };
+    desc: StringConstructor;
+    title: {
+        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/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;
+    "onAnimation-start"?: (() => any) | undefined;
+    "onAnimation-end"?: (() => any) | undefined;
+    "onUpdate:activeIndex"?: ((_index: number | null) => 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;
+    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;
+    "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;
+    dataKey: RowDataKey<TrackerRow>;
+    nameKey: RowDataKey<TrackerRow>;
+    radius: number;
+    isAnimationActive: boolean;
+    transition: import('../index.js').ChartTransition;
+    title: string;
+    activeIndex: number | null;
+    locale: string;
+    statusColors: Record<string, string>;
+    statusLabels: Record<string, string>;
+}, SlotsType<CellGridSlots<TrackerRow> & {
+    default?: () => VNode[];
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * Uptime and status history: one bar per period, colored by status.
+ *
+ * ```vue
+ * <Tracker :data="days" data-key="status" name-key="date"><Tooltip /></Tracker>
+ * ```
+ */
+export declare const Tracker: <Row>(props: TrackerProps<Row> & Omit<SvgTemplateAttributes, keyof TrackerProps<Row>>, context?: ChartRenderContext<TrackerSlots<Row>>) => ChartVNode<TrackerProps<Row>, TrackerSlots<Row>>;
+export {};