@reside-ic/skadi-chart 1.1.2 → 1.1.4

package/README.md

@@ -41,14 +41,15 @@ const chart = document.getElementById("chart") as HTMLDivElement;
 // example custom metadata: define a type that you can attach to lines or scatter points
 type Metadata = { type: "line" | "point" }
 
-// two straight lines
+// two straight lines, first one will also display the area underneath the trace
 const lines: Lines<Metadata> = [
     {
         points: [
             { x: 0, y: 0 },
             { x: 1, y: 1 },
         ],
-        style: { color: "black" },
+        fill: true,
+        style: { color: "black", fillColor: "blue", fillOpacity: 0.5 },
         metadata: { type: "line" }
     },
     {
@@ -97,7 +98,7 @@ class CustomLayer extends OptionalLayer {
         const svg = layerArgs.coreLayers[LayerType.Svg];
         const { getHtmlId } = layerArgs;
         svg.append("svg:circle")
-          .attr("id", `${getHtmlId(this.type)}-circle`)
+          .attr("id", `circle-${getHtmlId(this.type)}`)
           .attr("cx", "50%")
           .attr("cy", "50%")
           .attr("r", "5%")
@@ -167,7 +168,7 @@ fixed scale.
   chart.addTraces(lines);
   ```
 * `addArea` adds an [AreaLayer](./src/layers/AreaLayer.ts). This will add an area underneath
-the traces to the graph.
+the traces that specify `{ fill: true }` property in their config to the graph.
   ```ts
   chart.addArea();
   ```
@@ -229,7 +230,7 @@ class CustomLayer extends OptionalLayer {
         const svg = layerArgs.coreLayers[LayerType.Svg];
         const { getHtmlId } = layerArgs;
         svg.append("svg:circle")
-          .attr("id", `${getHtmlId(this.type)}-circle`)
+          .attr("id", `circle-${getHtmlId(this.type)}`)
           .attr("cx", "50%")
           .attr("cy", "50%")
           .attr("r", "5%")

package/dist/skadi-chart.d.ts

@@ -29,6 +29,9 @@ declare module "types" {
             right: number;
         };
     };
+    export type ClipPathBounds = Partial<Omit<Bounds, "margin">> & {
+        margin?: Partial<Bounds["margin"]>;
+    };
     export type D3Selection<Element extends d3.BaseType> = d3.Selection<Element, Point, null, undefined>;
     export type AllOptionalLayers = OptionalLayer<any>;
     export type ScaleNumeric = d3.ScaleContinuousNumeric<number, number, never>;
@@ -44,12 +47,13 @@ declare module "types" {
         id: string;
         getHtmlId: (layer: LayerType) => string;
         bounds: Bounds;
+        clipPathBounds: Bounds;
         globals: {
             animationDuration: number;
             tickConfig: XY<TickConfig>;
         };
         scaleConfig: {
-            linearScales: XY<ScaleNumeric>;
+            numericalScales: XY<ScaleNumeric>;
             scaleExtents: Scales;
             categoricalScales: Partial<XY<CategoricalScaleConfig>>;
         };
@@ -142,8 +146,8 @@ declare module "layers/AxesLayer" {
     }
 }
 declare module "helpers" {
-    import { LayerArgs, ScaleNumeric, XY, Point, ZoomExtents, Scales } from "types";
-    export const customLineGen: (lineSC: Point[], zoomExtents: ZoomExtents) => string[];
+    import { LayerArgs, ScaleNumeric, XY, Point, Scales } 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;
@@ -219,8 +223,15 @@ declare module "layers/GridLayer" {
     import { LayerArgs } from "types";
     import { LayerType, OptionalLayer } from "layers/Layer";
     export class GridLayer extends OptionalLayer {
+        directions: {
+            x: boolean;
+            y: boolean;
+        };
         type: LayerType;
-        constructor();
+        constructor(directions: {
+            x: boolean;
+            y: boolean;
+        });
         draw: (layerArgs: LayerArgs) => void;
     }
 }
@@ -249,7 +260,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 } from "types";
+    import { AllOptionalLayers, Lines, PartialScales, Scales, ScatterPoints, XY, XYLabel, ClipPathBounds } from "types";
     import { LifecycleHooks, OptionalLayer } from "layers/Layer";
     export type ChartOptions = {
         logScale: XY<boolean>;
@@ -286,7 +297,7 @@ declare module "Chart" {
         autoscaledMaxExtents: Scales;
         constructor(options?: PartialChartOptions);
         addAxes: (labels?: XYLabel) => this;
-        addGridLines: () => this;
+        addGridLines: (directions?: Partial<XY<boolean>>) => this;
         private filterLinesForLogAxis;
         private filterLines;
         addTraces: (lines: Lines<Metadata>, options?: Partial<TracesOptions>) => this;
@@ -302,8 +313,9 @@ declare module "Chart" {
         private addLinearPadding;
         private addLogPadding;
         private processScales;
+        private appendClipPath;
         private draw;
-        appendTo: (baseElement: HTMLDivElement, maxExtents?: PartialScales, initialExtents?: PartialScales, categoricalScales?: CategoricalScales) => this;
+        appendTo: (baseElement: HTMLDivElement, maxExtents?: PartialScales, initialExtents?: PartialScales, categoricalScales?: CategoricalScales, clipPathBoundsOptions?: ClipPathBounds) => this;
         private createCategoricalScale;
     }
 }