vccs 0.6.0 → 1.0.0-beta.1

package/LICENSE

@@ -19,3 +19,28 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+This project is a Vue port of Recharts. Portions are derived from Recharts,
+which is licensed under the MIT License:
+
+The MIT License (MIT)
+
+Copyright (c) 2015-present recharts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,155 +1,176 @@
-<p align="center">
-  <img src="docs/public/logo.svg" alt="vccs logo" width="120" />
-</p>
+# vccs
 
-<h1 align="center">Vue Charts (vccs)</h1>
+Composable charts for Vue 3. vccs is an unofficial Vue port of [Recharts](https://recharts.org):
+you build a chart from components, and each component owns one part of it.
 
-<p align="center">
-  <strong>Composable charting components for Vue 3</strong>
-</p>
+```vue
+<script setup lang="ts">
+import { Bar, BarChart, Tooltip, XAxis, YAxis } from 'vccs'
 
-<p align="center">
-  An unofficial Vue.js port of <a href="https://recharts.org">Recharts</a>, bringing React's most popular charting library to the Vue ecosystem.
-</p>
+const data = [
+  { month: 'Jan', visits: 4000, signups: 240 },
+  { month: 'Feb', visits: 3000, signups: 139 },
+  { month: 'Mar', visits: 2000, signups: 980 },
+]
+</script>
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/vccs"><img src="https://img.shields.io/npm/v/vccs.svg" alt="npm version"></a>
-</p>
+<template>
+  <BarChart
+    :data="data"
+    :height="300"
+  >
+    <XAxis data-key="month" />
+    <YAxis />
+    <Tooltip :cursor="false" />
+    <Bar data-key="visits" />
+    <Bar data-key="signups" />
+  </BarChart>
+</template>
+```
+
+The chart fills its container's width. Series without a color take the next color from the
+palette, which you can change with CSS variables.
 
----
+## Requirements
 
-> **Work in Progress**: This library is under active development. APIs may change.
+- Vue `^3.5`
+- [`motion-v`](https://motion.dev/docs/vue) `^2.4`, a required peer dependency that drives all animation
+- An ESM build setup (Vite, Nuxt, or another bundler). vccs ships ES modules only.
+- For the Nuxt module (`vccs/nuxt`): Nuxt `^4`
+- For the resolver (`vccs/resolver`): [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components) in your own dev dependencies
 
 ## Install
 
 ```bash
-# pnpm
-pnpm add vccs
+pnpm add vccs motion-v
+```
+
+npm, yarn and bun work the same way: `npm install vccs motion-v`.
+
+### Nuxt
+
+Add the module. It registers every component and composable, so you can use them without
+imports. Import types and `defineChartComponents` from `vccs`.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['vccs/nuxt'],
+})
+```
+
+Set `vccs: { prefix: 'V' }` to register `<VBarChart>` and so on.
+
+### Vite with auto-imports
+
+With [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components), the
+resolver imports components on use:
 
-# npm
-npm install vccs
+```ts
+// vite.config.ts
+import Components from 'unplugin-vue-components/vite'
+import { VccsResolver } from 'vccs/resolver'
 
-# yarn
-yarn add vccs
+export default defineConfig({
+  plugins: [vue(), Components({ resolvers: [VccsResolver()] })],
+})
 ```
 
-**Peer dependency**: `vue >= 3.0.0`
+## Typed rows
 
-## Quick Start
+`defineChartComponents` binds your row type to the components you pick. A wrong `data-key` is
+then a type error, and tooltip payloads carry your row type. Only the components you pick end up
+in your bundle.
 
 ```vue
-<script setup>
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'vccs'
+<script setup lang="ts">
+import { Area, AreaChart, Tooltip, XAxis, defineChartComponents } from 'vccs'
 
-const data = [
-  { name: 'Page A', uv: 4000, pv: 2400 },
-  { name: 'Page B', uv: 3000, pv: 1398 },
-  { name: 'Page C', uv: 2000, pv: 9800 },
-  { name: 'Page D', uv: 2780, pv: 3908 },
-  { name: 'Page E', uv: 1890, pv: 4800 },
-  { name: 'Page F', uv: 2390, pv: 3800 },
-]
+interface Visit { date: string, desktop: number, mobile: number }
+defineProps<{ visits: Visit[] }>()
+
+const Chart = defineChartComponents<Visit>()({ AreaChart, Area, XAxis, Tooltip })
 </script>
 
 <template>
-  <ResponsiveContainer
-    width="100%"
+  <Chart.AreaChart
+    :data="visits"
     :height="300"
   >
-    <BarChart :data="data">
-      <CartesianGrid stroke-dasharray="3 3" />
-      <XAxis data-key="name" />
-      <YAxis />
-      <Tooltip />
-      <Bar
-        data-key="pv"
-        fill="#8884d8"
-      />
-      <Bar
-        data-key="uv"
-        fill="#82ca9d"
-      />
-    </BarChart>
-  </ResponsiveContainer>
+    <Chart.XAxis data-key="date" />
+    <Chart.Area data-key="desktop" />
+    <Chart.Tooltip />
+  </Chart.AreaChart>
 </template>
 ```
 
-## Chart Types
+Standalone charts such as `Heatmap` and `BarList` infer the row type from `data`.
 
-| Chart | Component | Description |
-|-------|-----------|-------------|
-| Area | `<AreaChart>` + `<Area>` | Filled area charts with stacking & gradients |
-| Bar | `<BarChart>` + `<Bar>` | Vertical/horizontal bar charts |
-| Line | `<LineChart>` + `<Line>` | Line charts with multiple curve types |
-| Scatter | `<ScatterChart>` + `<Scatter>` | X-Y scatter plots |
-| Composed | `<ComposedChart>` | Mix Area, Bar, Line in one chart |
-| Pie | `<PieChart>` + `<Pie>` | Pie and donut charts |
-| Radar | `<RadarChart>` + `<Radar>` | Radar/spider charts |
-| Radial Bar | `<RadialBarChart>` + `<RadialBar>` | Circular bar charts |
-| Funnel | `<FunnelChart>` + `<Funnel>` | Funnel/pipeline charts |
-| Treemap | `<Treemap>` | Not yet supported |
-| Sankey | `<Sankey>` | Not yet supported |
-| Sunburst | `<SunburstChart>` | Not yet supported |
+## Charts
 
-## Components
+| From Recharts | Component |
+| --- | --- |
+| Area, Bar, Line, Scatter | `AreaChart`, `BarChart`, `LineChart`, `ScatterChart` |
+| Mixed series | `ComposedChart` |
+| Pie, Radar, Radial bar | `PieChart`, `RadarChart`, `RadialBarChart` |
+| Funnel | `FunnelChart` |
+| Hierarchy and flow | `Treemap`, `SunburstChart`, `Sankey` |
 
-**Cartesian**: `XAxis`, `YAxis`, `ZAxis`, `CartesianGrid`, `ReferenceLine`, `ReferenceArea`, `ErrorBar`, `Brush`
+| Added by vccs | Use it for |
+| --- | --- |
+| `BarList` | Ranked lists with inline bars |
+| `Sparkline` | Small trend lines inside text or tables |
+| `Tracker` | Status over time, one block per period |
+| `Heatmap` | Values on a grid of two categories |
+| `CalendarHeatmap` | Daily values over a year |
+| `CohortChart` | Retention by cohort and period |
+| `JourneySankey` | Paths that users take, step by step |
 
-**Polar**: `PolarGrid`, `PolarAngleAxis`, `PolarRadiusAxis`
+Building blocks:
 
-**General**: `Tooltip`, `Legend`, `Label`, `LabelList`, `Cell`, `ResponsiveContainer`
+- Series: `Area`, `Bar`, `Line`, `Scatter`, `Pie`, `Radar`, `RadialBar`, `Funnel`
+- Axes and grids: `XAxis`, `YAxis`, `ZAxis`, `CartesianAxis`, `CartesianGrid`, `PolarGrid`,
+  `PolarAngleAxis`, `PolarRadiusAxis`
+- Annotations: `ReferenceLine`, `ReferenceArea`, `ReferenceDot`, `ErrorBar`, `Brush`
+- Tooltip, legend and text: `Tooltip`, `Legend`, `Label`, `LabelList`, `Text`, `Cell`
+- Shapes: `Rectangle`, `Dot`, `Sector`, `Curve`, `Symbols`, `Cross`, `Polygon`, `Trapezoid`
 
-**Shapes**: `Rectangle`, `Dot`, `Sector`, `Symbols`
+`ResponsiveContainer` and `Customized` still work but are deprecated and are removed in 2.0.
+Charts are responsive without a wrapper, and custom SVG goes in the chart's default slot (see
+the migration guide).
 
-## Features
+## What works the Vue way
 
-- **Vue 3 Native** — Composition API + JSX, full TypeScript support
-- **Recharts API** — Same intuitive composable component design
-- **Animated** — Smooth transitions powered by [Motion for Vue](https://motion.dev/docs/vue)
-- **Interactive** — Tooltip, legend, brush, and click/hover events
-- **Responsive** — `<ResponsiveContainer>` adapts to parent width
-- **Customizable** — Named slots for shapes, ticks, tooltip content, legend, and more
+- **Models:** `v-model:active-index` on `Tooltip`, `Bar`, `Pie` and the standalone charts
+  (`Sparkline`, `Tracker`, `Heatmap`, `CohortChart`, `CalendarHeatmap`); `v-model:range` on
+  `Brush`; `v-model:hidden` on `Legend`.
+- **Slots:** custom shapes, dots, ticks, labels and tooltip content are named slots.
+- **Events:** item events receive `(item, index, event)`.
+- **Server rendering:** charts render on the server and hydrate without layout jumps.
+- **Motion:** enter, update and exit animations follow `prefers-reduced-motion`.
+- **Accessibility:** every chart has an accessible name, and item charts support the keyboard.
 
-## Architecture
+## Upgrading from 0.x
 
-- **State**: Redux Toolkit via [@reduxjs/vue-redux](https://github.com/nicepkg/reduxjs-vue-redux) — one store per chart
-- **Math**: D3 scales and shapes via [victory-vendor](https://github.com/FormidableLabs/victory)
-- **Animation**: [Motion for Vue](https://motion.dev/docs/vue)
+1.0 changes some props, events and exports. The
+[migration guide](https://github.com/unovue/vue-charts/blob/main/docs/content/1.getting-started/3.migration.md)
+lists every change with a before and after example.
 
-## Project Structure
+## Links
 
-```
-packages/vue/src/     # Library source (published as vccs)
-playground/nuxt/      # Nuxt 3 playground for manual testing
-docs/                 # Documentation site (Nuxt 3 + Docus)
-```
+- [Documentation](https://vue-charts.com) ([source](https://github.com/unovue/vue-charts/tree/main/docs/content))
+- [Changelog](https://github.com/unovue/vue-charts/blob/main/CHANGELOG.md)
+- [Issues](https://github.com/unovue/vue-charts/issues)
 
-## Development
+## Contribute
 
-```bash
-pnpm install          # Install dependencies
-pnpm dev              # Watch mode (library)
-pnpm test             # Run tests
-pnpm test:coverage    # Tests with coverage
-pnpm storybook        # Storybook
-pnpm play             # Nuxt playground
-pnpm docs             # Documentation site
-```
+The repository holds the library (`packages/vue`), the docs site (`docs`) and a Nuxt playground
+(`playground/nuxt`). `pnpm install`, then `pnpm test` for the tests and `pnpm verify` for the
+default checks (`--release` adds the slow browser gates, `--quick` skips the browser checks). `VERIFY.md` lists what each check proves.
 
 ## License
 
-[MIT](LICENSE)
-
-## Credits
-
-- **[Recharts](https://recharts.org)** — Original React charting library this project ports from
-- **[Victory Vendor](https://github.com/FormidableLabs/victory)** — D3 math utilities
-- **[Motion for Vue](https://motion.dev/docs/vue)** — Animation engine
-- **[Redux Toolkit](https://redux-toolkit.js.org/)** — State management
-- **[VueUse](https://vueuse.org/)** — Vue composition utilities
-
----
-
-<p align="center">
-  <em>This is an unofficial port and is not affiliated with the original Recharts team.</em>
-</p>
+MIT. vccs is an unofficial port and is not affiliated with the Recharts team. It builds on
+[Recharts](https://recharts.org), the [D3](https://d3js.org) modules `d3-scale`, `d3-shape`,
+`d3-hierarchy` and `d3-sankey`, [Motion for Vue](https://motion.dev/docs/vue) and
+[VueUse](https://vueuse.org).

package/dist/animation/ActiveDot.d.ts

@@ -0,0 +1,14 @@
+/** Radius and opacity appear together; pointer retargeting keeps the mounted dot. */
+export declare const ActiveDot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    isAnimationActive: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/animation/MovingLabels.d.ts

@@ -0,0 +1,57 @@
+import { PropType } from 'vue';
+import { ChartTransition } from './motion.js';
+export interface MovingLabel {
+    key: PropertyKey;
+    text: string;
+    x: number;
+    y: number;
+}
+/** A child shares the chart's resize and hydration context with its cells. */
+export declare const MovingLabels: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    labels: {
+        type: PropType<readonly MovingLabel[]>;
+        required: true;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<ChartTransition>;
+        default: undefined;
+    };
+    textAnchor: {
+        type: PropType<"start" | "middle" | "end">;
+        default: undefined;
+    };
+    centered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    labels: {
+        type: PropType<readonly MovingLabel[]>;
+        required: true;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<ChartTransition>;
+        default: undefined;
+    };
+    textAnchor: {
+        type: PropType<"start" | "middle" | "end">;
+        default: undefined;
+    };
+    centered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    textAnchor: "end" | "start" | "middle";
+    isAnimationActive: boolean;
+    transition: ChartTransition;
+    centered: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/animation/SweepClip.d.ts

@@ -0,0 +1,56 @@
+/** Plot bounds also sweep flat lines, whose object bounding box has zero height. */
+export declare const SweepClip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    progress: {
+        type: NumberConstructor;
+        required: true;
+    };
+    vertical: BooleanConstructor;
+    x: {
+        type: NumberConstructor;
+        required: true;
+    };
+    y: {
+        type: NumberConstructor;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    progress: {
+        type: NumberConstructor;
+        required: true;
+    };
+    vertical: BooleanConstructor;
+    x: {
+        type: NumberConstructor;
+        required: true;
+    };
+    y: {
+        type: NumberConstructor;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/animation/gridTransition.d.ts

@@ -0,0 +1,38 @@
+/** A cell of a keyed grid as the transition plan sees it. */
+export interface GridItem {
+    /** Stable identity across data changes. */
+    key: string;
+    row: number;
+    column: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface GridSeams<C extends GridItem> {
+    /** Where an arriving cell starts: a zero-thick line on the seam it opens. */
+    enter: Map<string, C>;
+    /** Where a leaving cell ends: a zero-thick line on the seam it closes. */
+    exit: Map<string, C>;
+}
+export interface GridTransitionPlan<C extends GridItem> {
+    /** On-screen identity per cell key. */
+    keys: Map<string, string>;
+    /** Cells that move far against the common move: they shrink and regrow instead of streaking. */
+    jumping: Set<string>;
+    seams: GridSeams<C>;
+}
+export declare function emptyGridTransitionPlan<C extends GridItem>(): GridTransitionPlan<C>;
+/**
+ * Plans how a keyed grid moves from `previous` to `next`. Identity on screen is usually the
+ * cell's own key, with two exceptions decided per change:
+ * - A few cells move far against the common grid move (Sundays wrapping to the last row when
+ *   the week start changes): they shrink and regrow in place instead of streaking across.
+ * - Nothing stays, or most cells would have to jump (a different year, a reversed axis):
+ *   new cells take over the node at the same grid position, so the grid recolors in place
+ *   instead of every cell shrinking and growing at once.
+ *
+ * `generation` must differ per call; it keeps a reused on-screen key unique.
+ */
+export declare function planGridTransition<C extends GridItem>(previous: readonly C[], next: readonly C[], previousKeys: ReadonlyMap<string, string>, generation: number): GridTransitionPlan<C>;
+export {};

package/dist/animation/motion.d.ts

@@ -0,0 +1,78 @@
+import { ValueAnimationTransition } from 'motion-v';
+/** Options for a chart element's `transition` prop: duration, ease, delay, or a spring. */
+export type ChartTransition = ValueAnimationTransition<number>;
+export interface Reveal<T> {
+    from?: (to: T) => T;
+    order?: (to: T) => number;
+}
+export interface PhaseTiming {
+    /** Seconds. */
+    duration: number;
+    ease: (t: number) => number;
+}
+/**
+ * Default timings shared by chart elements. Lines and areas keep drawing at their steady
+ * pace after bars land. Elements leave faster than they arrive, so exits clear the way.
+ */
+export declare const motionTokens: {
+    /**
+     * First appearance: long enough to watch the chart build up, and decelerating gently, so most
+     * of it is not over in the first frames (a quint curve finished two thirds in 120 ms).
+     */
+    readonly enter: {
+        readonly duration: 1;
+        readonly ease: (t: number) => number;
+    };
+    /** Data changes: same curve, shorter, so interruptions feel responsive. */
+    readonly update: {
+        readonly duration: 0.5;
+        readonly ease: (t: number) => number;
+    };
+    /** Removed elements: the same curve, shorter still, so they clear the way for the rest. */
+    readonly exit: {
+        readonly duration: 0.3;
+        readonly ease: (t: number) => number;
+    };
+    /** Pointer feedback and tooltip appearance share the CSS ease-out curve. */
+    readonly feedback: {
+        readonly duration: 0.15;
+        readonly ease: "easeOut";
+        readonly cssEase: "ease-out";
+    };
+    readonly color: {
+        readonly duration: 0.3;
+        readonly ease: "easeOut";
+        readonly cssEase: "ease-out";
+    };
+    readonly follow: {
+        readonly type: "spring";
+        readonly stiffness: 500;
+        readonly damping: 40;
+        readonly mass: 1;
+    };
+};
+/**
+ * A cascade entrance: items start one after another over the first `spread` of `duration` and
+ * each takes the rest on the entrance curve, so the wave reads as one gesture, not many.
+ */
+export declare const cascadeTiming: {
+    duration: number;
+    spread: number;
+    ease: (t: number) => number;
+};
+/**
+ * A line drawing itself on first appearance. Its tip travels the whole curve, so the duration
+ * follows the length it travels: 1.2 s up to 500 px, 0.2 s more per further 1000 px, at most
+ * 2 s. A dense line then never races faster than the eye can follow, and a short one does not
+ * crawl. The curve starts gently and settles for longer than it accelerates.
+ */
+export declare function drawTiming(length: number): PhaseTiming;
+interface CascadeBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** The diagonal reveal shared by treemaps and cell charts; timelines slide instead. */
+export declare function cascadeReveal<T extends CascadeBox>(cells: readonly CascadeBox[], style?: 'cascade' | 'slide'): Reveal<T> | undefined;
+export {};

package/dist/animation/ridingLabels.d.ts

@@ -0,0 +1,29 @@
+import { DisplayItem } from './useKeyedTransition.js';
+/**
+ * Labels ride along with their shape on every frame and show the new value at once. A label
+ * fades with a shape that enters or leaves; settled and moving shapes keep full opacity.
+ */
+export declare function labelOpacity(item: DisplayItem<unknown>): number | undefined;
+/**
+ * The labels of points the reveal has passed. `reached(point, index)` is the share of the
+ * reveal at which it reaches the point. Each label fades in behind the edge and is fully shown
+ * when the reveal ends; all of them are unchanged once it has finished.
+ */
+export declare function sweptLabels<P extends {
+    opacity?: number;
+}>(points: readonly P[], reveal: number, reached: (point: P, index: number) => number | undefined): readonly P[];
+/** Where a straight sweep across `start`..`start + size` reaches a coordinate, as a share. */
+export declare function sweepShare(position: number | null | undefined, start: number, size: number): number | undefined;
+/**
+ * Where a line drawn along its length reaches each point, as a share of its length; straight
+ * segments between the points approximate the curve. Gaps (null coordinates) are skipped.
+ */
+export declare function lengthShares(points: readonly {
+    x?: number | null;
+    y?: number | null;
+}[]): (number | undefined)[];
+/** The length of the straight segments through the points, skipping gaps. */
+export declare function polylineLength(points: readonly {
+    x?: number | null;
+    y?: number | null;
+}[]): number;

package/dist/animation/useAnimationCallbacks.d.ts

@@ -0,0 +1,5 @@
+/** Ignore the inline instance replaced by the chart's mount-time layer teleport. */
+export declare function useAnimationCallbacks(onStart: () => void, onEnd: () => void): {
+    onStart: () => void;
+    onEnd: () => void;
+};