@niekes/charts-3d 0.5.0 → 0.6.0

package/README.md

@@ -38,6 +38,7 @@
     </tr>
     <tr style="background-color: #f6f8fa">
         <td><a target="_blank" href="https://niekes.github.io/charts-3d/docs/components/surface-chart-3d"><img src="assets/examples/surface-chart-3d.png" alt="Surface Chart 3D"></a></td>
+        <td><a target="_blank" href="https://niekes.github.io/charts-3d/docs/components/area-chart-3d"><img src="assets/examples/area-chart-3d.png" alt="Area Chart 3D"></a></td>
     </tr>
 </table>
 

package/dist/index.d.ts

@@ -30,9 +30,8 @@ export type View3D = {
 export type Renderer3D = "svg" | "canvas" | "webgl";
 /** Maps data values to the world box, which spans -1 to 1 on every axis, y up. */
 export type World = Record<keyof AxesSpec, (value: number) => number>;
+/** What a mark says while the pointer is on it, beside the pointer. */
 export type Tooltip3D = {
-  /** The anchor in the units of the view box. */
-  at: Point2D;
   title?: React.ReactNode;
   items: {
     label: React.ReactNode;
@@ -147,8 +146,14 @@ export type ChartContainer3DProps = {
    * @defaultValue "bottom-left"
    */
   gizmo?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | false;
+  /**
+   * The corner beside the pointer the tooltip sits at. Where the tooltip would
+   * leave the chart, it flips to the other side, on each axis alone.
+   * @defaultValue "top-right"
+   */
+  tooltip?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 };
-declare function ChartContainer3D({ id, config, defaultView, width, height, animationDuration, legend, renderer: requested, shortcuts, keymap, gizmo, className, children, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div"> & ChartContainer3DProps): React.JSX.Element;
+declare function ChartContainer3D({ id, config, defaultView, width, height, animationDuration, legend, renderer: requested, shortcuts, keymap, gizmo, tooltip, className, children, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div"> & ChartContainer3DProps): React.JSX.Element;
 /**
  * Eases a chart into new data: the numbers of `values` glide from the ones
  * on screen to these over the animationDuration of the container. A key
@@ -241,10 +246,68 @@ declare function shade(face: TransformedPoint<unknown>[], color: string): string
  * after `shade`, which would mix a translucent color back towards opaque.
  */
 declare function faded(color: string, opacity: number): string;
-/** The mean of the projected points, where a tooltip points at. */
-declare function center(points: TransformedPoint<unknown>[]): Point2D;
+/**
+ * The entries of `data` and their series, for a chart that lays the entries
+ * out along x and the series along z, as the bar and the area chart do. The
+ * name of every entry comes from its `index` field, the series are `keys` or
+ * the keys of the config, and the `target` of every cell is keyed by the name
+ * of its entry and its series, so it follows its entry when the data
+ * reorders; a value that is not a number stands as 0. Each glides by name:
+ * `values` from 0, `rows` - the place of every entry - to where it stands, and
+ * `presence` from 0 to 1 as an entry comes and back as it goes, the gone ones
+ * still among them. `labels` name the ticks: the entry at a tick of x, through
+ * `format.x` - a tick of a gone entry fades out unnamed - and the series at a
+ * tick of z.
+ */
+declare function useSeries<T extends Record<string, unknown>>({ data, index, keys, format }: {
+  data: T[];
+  index: keyof T & string;
+  keys?: string[];
+  format?: {
+    x?: (label: string) => React.ReactNode;
+    y?: (value: number) => React.ReactNode;
+  };
+}): {
+  series: string[];
+  target: {
+    [k: string]: number;
+  };
+  values: Record<string, number>;
+  rows: Record<string, number>;
+  presence: Record<string, number>;
+  labels: {
+    x: (i: number) => React.ReactNode;
+    y: ((value: number) => React.ReactNode) | undefined;
+    z: (j: number) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  };
+};
 /** The marks of a cube: its faces that look at the camera, shaded in `color`, each with `tooltip` on hover. */
 declare function cubeMarks(id: string, faces: CubeFace[], color: string, tooltip: Tooltip3D): Mark3D[];
+export type AreaChart3DProps<T extends Record<string, unknown> = Record<string, unknown>> = {
+  /** One entry per point along x, with a value per series. */
+  data: T[];
+  /** The field that names each entry, such as "year"; a point follows its name through updates, so the names should be unique. */
+  index: keyof T & string;
+  /**
+   * The fields that hold the series, one ribbon each.
+   * @defaultValue the keys of the chart config
+   */
+  keys?: string[];
+  /** Formats the labels of the entries along x and the values along y. */
+  format?: {
+    x?: (label: string) => React.ReactNode;
+    y?: (value: number) => React.ReactNode;
+  };
+  /** The titles of the axes. */
+  titles?: Partial<Record<keyof AxesSpec, React.ReactNode>>;
+};
+/**
+ * Areas pushed back into ribbons: the entries of `data` along x, one ribbon
+ * per series along z, the area under its line reaching down to the floor of
+ * the box. The series are the keys of the chart config unless `keys` names
+ * them.
+ */
+export declare function AreaChart3D<T extends Record<string, unknown>>({ data, index, keys, format, titles }: AreaChart3DProps<T>): React.JSX.Element;
 export type BarChart3DProps<T extends Record<string, unknown> = Record<string, unknown>> = {
   /** One entry per row of bars, with a value per series. */
   data: T[];
@@ -340,5 +403,5 @@ export type SurfaceChart3DProps = {
  * of the chart config, by default its first two.
  */
 export declare function SurfaceChart3D({ data, domain, colors, format, titles }: SurfaceChart3DProps): React.JSX.Element;
-export { Axes3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, axis, center, cubeMarks, faded, intoWorld, linear, pad, shade, useTween, useTweenAxes, worldBox };
+export { Axes3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, axis, cubeMarks, faded, intoWorld, linear, pad, shade, useSeries, useTween, useTweenAxes, worldBox };
 //# sourceMappingURL=index.d.ts.map