@reside-ic/skadi-chart 1.1.4 → 1.1.5

package/README.md

@@ -98,7 +98,7 @@ class CustomLayer extends OptionalLayer {
         const svg = layerArgs.coreLayers[LayerType.Svg];
         const { getHtmlId } = layerArgs;
         svg.append("svg:circle")
-          .attr("id", `circle-${getHtmlId(this.type)}`)
+          .attr("id", `${getHtmlId(this.type)}-circle`)
           .attr("cx", "50%")
           .attr("cy", "50%")
           .attr("r", "5%")
@@ -123,11 +123,15 @@ new Chart()
 
 ## Base chart class
 
-All charts start with the `Chart` class that takes in `ChartOptions` (e.g. `animationDuration`
-in ms or `logScale`, see [here](./src/Chart.ts) for source code):
+All charts start with the `Chart` class that takes in `ChartOptions`, e.g. `animationDuration`
+in ms, `logScale`, or tick configuration options. See [here](./src/Chart.ts) for source code.
+
+Examples:
 
 ```ts
-const chart = new Chart({ animationDuration: 500 });
+const chart = new Chart()
+const chartWithLongerAnimation = new Chart({ animationDuration: 500 });
+const chartWithFewXAxisTicks = new Chart({ tickConfig: { numerical: { x: { size: 1 } } } });
 ```
 
 ## Layers
@@ -157,9 +161,13 @@ overview of the methods [Chart](./src/Chart.ts) class provides for adding layers
 
 * `addAxes` adds an [AxesLayer](./src/layers/AxesLayer.ts). This will draw axes with tick
 marks. The axes can be autoscaled based on your data or you can provide a fixed scale in
-the `appendTo` function below.
+the `appendTo` function below. Both the arguments are optional. Note that the values passed in
+the `labelPositions` argument are proportions: for example, `{ x: 0.5 }` would mean to position
+the axis label halfway (50%) between the bottom edge of the graph and the bottom edge of the svg.
   ```ts
-  chart.addAxes();
+  labels = { x: "Time" }
+  labelPositions = { x: 0.5 }
+  chart.addAxes(labels, labelPositions);
   ```
 * `addTraces` adds a [TracesLayer](./src/layers/TracesLayer.ts). This will add traces to
 the graph. This data will also be used for autoscaling the axes if you haven't provided a
@@ -192,9 +200,12 @@ Each layer itself defines how it zooms so this will let the user zoom on your gr
 * `addTooltips` adds a [TooltipLayer](./src/layers/TooltipsLayer.ts) which adds tooltips
 to the chart. For traces and points this means the tooltip will appear pointing to the
 closest point in the graph to the cursor (once it is within a threshold). You must provide
-a callback returning HTML to render the tooltip.
+a callback returning HTML to render the tooltip. You may optionally configure the radius (px)
+within which a point triggers the tooltip to be displayed. You may also optionally specify an axis;
+if you do, then the 'closest point' will be determined by the distance from the cursor on that axis.
+For example, you may want to show the tooltip for the nearest x value regardless of y distance.
   ```ts
-  chart.addTooltips(tooltipHtmlCallback);
+  chart.addTooltips(tooltipHtmlCallback, 25, "x");
   ```
 * `makeResponsive` is not really a layer but will make your graph responsive (redraw on change
 to container bounds and changes to window size).
@@ -230,7 +241,7 @@ class CustomLayer extends OptionalLayer {
         const svg = layerArgs.coreLayers[LayerType.Svg];
         const { getHtmlId } = layerArgs;
         svg.append("svg:circle")
-          .attr("id", `circle-${getHtmlId(this.type)}`)
+          .attr("id", `${getHtmlId(this.type)}-circle`)
           .attr("cx", "50%")
           .attr("cy", "50%")
           .attr("r", "5%")

package/dist/skadi-chart.d.ts

@@ -132,11 +132,12 @@ declare module "layers/Layer" {
 }
 declare module "layers/AxesLayer" {
     import { LayerType, OptionalLayer } from "layers/Layer";
-    import { LayerArgs, XYLabel } from "types";
+    import { LayerArgs, XY, XYLabel } from "types";
     export class AxesLayer extends OptionalLayer {
         labels: XYLabel;
+        labelPositions: XY<number>;
         type: LayerType;
-        constructor(labels: XYLabel);
+        constructor(labels: XYLabel, labelPositions: XY<number>);
         private drawAxis;
         draw: (layerArgs: LayerArgs) => void;
         private drawCategoricalAxis;
@@ -146,11 +147,12 @@ declare module "layers/AxesLayer" {
     }
 }
 declare module "helpers" {
-    import { LayerArgs, ScaleNumeric, XY, Point, Scales } from "types";
+    import { LayerArgs, ScaleNumeric, XY, Point, Scales, AxisType } from "types";
     export const customLineGen: (lineSC: Point[], layerArgs: LayerArgs) => string[];
     export const numScales: (bands: Partial<XY<string>> | undefined, layerArgs: LayerArgs) => XY<ScaleNumeric>;
     export const getXYMinMax: (points: Point[]) => Scales;
     export const getSvgRectPath: (xStart: number, xEnd: number, yStart: number, yEnd: number) => string;
+    export const mapScales: <T>(layerArgs: LayerArgs, callback: (scale: ScaleNumeric, axis: AxisType) => T) => [Record<string, T>, Record<string, Record<string, T>>];
 }
 declare module "layers/TracesLayer" {
     import { LayerArgs, Lines, Point, ZoomExtents } from "types";
@@ -205,13 +207,14 @@ declare module "layers/ScatterLayer" {
 }
 declare module "layers/TooltipsLayer" {
     import { LayerType, OptionalLayer } from "layers/Layer";
-    import { LayerArgs, PointWithMetadata } from "types";
+    import { AxisType, LayerArgs, PointWithMetadata } from "types";
     export type TooltipHtmlCallback<Metadata> = (pointWithMetadata: PointWithMetadata<Metadata>) => string;
     export class TooltipsLayer<Metadata> extends OptionalLayer {
         tooltipHtmlCallback: TooltipHtmlCallback<Metadata>;
+        distanceAxis?: AxisType;
         type: LayerType;
         tooltipRadiusSq: number;
-        constructor(tooltipHtmlCallback: TooltipHtmlCallback<Metadata>);
+        constructor(tooltipHtmlCallback: TooltipHtmlCallback<Metadata>, distanceAxis?: AxisType);
         private getDistanceSq;
         private getDistanceSqSC;
         private convertSCPointToCC;
@@ -260,7 +263,7 @@ declare module "Chart" {
     import { TracesOptions } from "layers/TracesLayer";
     import { ZoomOptions } from "layers/ZoomLayer";
     import { TooltipHtmlCallback } from "layers/TooltipsLayer";
-    import { AllOptionalLayers, Lines, PartialScales, Scales, ScatterPoints, XY, XYLabel, ClipPathBounds } from "types";
+    import { AllOptionalLayers, Bounds, Lines, PartialScales, Scales, ScatterPoints, XY, XYLabel, ClipPathBounds } from "types";
     import { LifecycleHooks, OptionalLayer } from "layers/Layer";
     export type ChartOptions = {
         logScale: XY<boolean>;
@@ -296,14 +299,14 @@ declare module "Chart" {
         options: ChartOptions;
         autoscaledMaxExtents: Scales;
         constructor(options?: PartialChartOptions);
-        addAxes: (labels?: XYLabel) => this;
+        addAxes: (labels?: XYLabel, labelPositions?: Partial<XY<number>>) => this;
         addGridLines: (directions?: Partial<XY<boolean>>) => this;
         private filterLinesForLogAxis;
         private filterLines;
         addTraces: (lines: Lines<Metadata>, options?: Partial<TracesOptions>) => this;
         addArea: () => this;
         addZoom: (options?: ZoomOptions) => this;
-        addTooltips: (tooltipHtmlCallback: TooltipHtmlCallback<Metadata>) => this;
+        addTooltips: (tooltipHtmlCallback: TooltipHtmlCallback<Metadata>, distanceAxis?: "x" | "y") => this;
         private filterScatterPointsForLogAxis;
         private filterScatterPoints;
         addScatterPoints: (points: ScatterPoints<Metadata>) => this;
@@ -315,7 +318,7 @@ declare module "Chart" {
         private processScales;
         private appendClipPath;
         private draw;
-        appendTo: (baseElement: HTMLDivElement, maxExtents?: PartialScales, initialExtents?: PartialScales, categoricalScales?: CategoricalScales, clipPathBoundsOptions?: ClipPathBounds) => this;
+        appendTo: (baseElement: HTMLDivElement, maxExtents?: PartialScales, initialExtents?: PartialScales, categoricalScales?: CategoricalScales, margins?: Partial<Bounds["margin"]>, clipPathBoundsOptions?: ClipPathBounds) => this;
         private createCategoricalScale;
     }
 }