@reside-ic/skadi-chart 1.1.5-alpha → 1.1.6

package/README.md

@@ -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
@@ -196,11 +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. You may optionally specify an axis; if you do,
-then the 'closest point' will be determined by the distance from the cursor on that axis.
+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, "x");
+  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).

package/dist/skadi-chart.d.ts

@@ -39,10 +39,14 @@ declare module "types" {
         main: d3.ScaleBand<string>;
         bands: Record<string, ScaleNumeric>;
     };
-    export type TickConfig = {
-        count: number;
+    export type TickConfig<Domain> = {
+        padding?: number;
+        size?: number;
+        formatter?: (domainValue: Domain, index: number) => string;
+    } & (Domain extends number ? {
+        count?: number;
         specifier?: string;
-    };
+    } : {});
     export type LayerArgs = {
         id: string;
         getHtmlId: (layer: LayerType) => string;
@@ -50,7 +54,10 @@ declare module "types" {
         clipPathBounds: Bounds;
         globals: {
             animationDuration: number;
-            tickConfig: XY<TickConfig>;
+            tickConfig: {
+                numerical: XY<TickConfig<number>>;
+                categorical: XY<TickConfig<string>>;
+            };
         };
         scaleConfig: {
             numericalScales: XY<ScaleNumeric>;
@@ -211,10 +218,11 @@ declare module "layers/TooltipsLayer" {
     export type TooltipHtmlCallback<Metadata> = (pointWithMetadata: PointWithMetadata<Metadata>) => string;
     export class TooltipsLayer<Metadata> extends OptionalLayer {
         tooltipHtmlCallback: TooltipHtmlCallback<Metadata>;
+        radiusPx: number;
         distanceAxis?: AxisType;
         type: LayerType;
         tooltipRadiusSq: number;
-        constructor(tooltipHtmlCallback: TooltipHtmlCallback<Metadata>, distanceAxis?: AxisType);
+        constructor(tooltipHtmlCallback: TooltipHtmlCallback<Metadata>, radiusPx?: number, distanceAxis?: AxisType);
         private getDistanceSq;
         private getDistanceSqSC;
         private convertSCPointToCC;
@@ -263,7 +271,7 @@ declare module "Chart" {
     import { TracesOptions } from "layers/TracesLayer";
     import { ZoomOptions } from "layers/ZoomLayer";
     import { TooltipHtmlCallback } from "layers/TooltipsLayer";
-    import { AllOptionalLayers, Bounds, Lines, PartialScales, Scales, ScatterPoints, XY, XYLabel, ClipPathBounds } from "types";
+    import { AllOptionalLayers, Bounds, LayerArgs, Lines, PartialScales, Scales, ScatterPoints, XY, XYLabel, ClipPathBounds, TickConfig } from "types";
     import { LifecycleHooks, OptionalLayer } from "layers/Layer";
     export type ChartOptions = {
         logScale: XY<boolean>;
@@ -271,6 +279,10 @@ declare module "Chart" {
     type PartialChartOptions = {
         logScale?: Partial<XY<boolean>>;
         animationDuration?: number;
+        tickConfig?: {
+            numerical?: Partial<XY<Partial<TickConfig<number>>>>;
+            categorical?: Partial<XY<Partial<TickConfig<string>>>>;
+        };
     };
     type CategoricalScales = Partial<XY<string[]>>;
     export class Chart<Metadata = any> {
@@ -279,15 +291,7 @@ declare module "Chart" {
         isResponsive: boolean;
         globals: {
             animationDuration: number;
-            tickConfig: {
-                x: {
-                    count: number;
-                };
-                y: {
-                    count: number;
-                    specifier: string;
-                };
-            };
+            tickConfig: LayerArgs["globals"]["tickConfig"];
         };
         defaultMargin: {
             top: number;
@@ -306,7 +310,7 @@ declare module "Chart" {
         addTraces: (lines: Lines<Metadata>, options?: Partial<TracesOptions>) => this;
         addArea: () => this;
         addZoom: (options?: ZoomOptions) => this;
-        addTooltips: (tooltipHtmlCallback: TooltipHtmlCallback<Metadata>, distanceAxis?: "x" | "y") => this;
+        addTooltips: (tooltipHtmlCallback: TooltipHtmlCallback<Metadata>, radiusPx?: number, distanceAxis?: "x" | "y") => this;
         private filterScatterPointsForLogAxis;
         private filterScatterPoints;
         addScatterPoints: (points: ScatterPoints<Metadata>) => this;