@nightingale-elements/nightingale-linegraph-track - npm Package Compare versions

Comparing version 4.0.3-alpha.0 to 4.0.3

dist/nightingale-linegraph-track.d.ts

@@ -6,10 +6,10 @@ import { ScaleLinear, CurveFactory, Area, Line } from "d3";
 };
-declare type LineValue = {
+type LineValue = {
     position: number;
     value: number;
 };
-declare type LineData = {
+type LineData = {
     name: string;
     range: number[];
-    colour?: string;
+    color?: string;
     fill?: string;
@@ -19,3 +19,3 @@ lineCurve?: keyof typeof curves;
 };
-declare const NightingaleLinegraphTrack_base: import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withZoom").WithZoomInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withMargin").withMarginInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withPosition").withPositionInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withDimensions").WithDimensionsInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withHighlight").WithHighlightInterface> & typeof NightingaleElement;
+declare const NightingaleLinegraphTrack_base: import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withZoom").WithZoomInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withResizable").WithResizableInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withMargin").withMarginInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withPosition").withPositionInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withDimensions").WithDimensionsInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withHighlight").WithHighlightInterface> & typeof NightingaleElement;
 declare class NightingaleLinegraphTrack extends NightingaleLinegraphTrack_base {
@@ -31,2 +31,3 @@ #private;
     refresh(): void;
+    onDimensionsChange(): void;
     _initYScale(): void;
@@ -33,0 +34,0 @@ drawLine(d: LineData): Area<LineValue> | Line<LineValue>;

package.json

 {
   "name": "@nightingale-elements/nightingale-linegraph-track",
   "description": "Nightingale Line Graph",
-  "version": "4.0.3-alpha.0",
+  "version": "4.0.3",
   "files": [
@@ -35,6 +35,6 @@ "dist",
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "*",
-    "d3": "7.6.1"
+    "@nightingale-elements/nightingale-new-core": "^4.0.3",
+    "d3": "7.8.3"
   },
-  "gitHead": "5fa55c1b97504b8510c23b8a0d3b393259d31cff"
+  "gitHead": "a9dbc45f4a6940e915a6eac46e5bd8691281d802"
 }

README.md

@@ -41,5 +41,5 @@ # nightingale-linegraph-track
     range:[min, max],
-    colour?: Line colour,
-        (Colour will be assigned if not provided. Use "none" for no line colour)
-    fill?: Create area plot using given fill colour (default "none"),
+    color?: Line color,
+        (color will be assigned if not provided. Use "none" for no line color)
+    fill?: Create area plot using given fill color (default "none"),
     lineCurve?: 'curveLinear'(default)|'curveBasis'|'curveCardinal'|'curveStep'|'curveNatural',
@@ -46,0 +46,0 @@ (More curves - https://github.com/d3/d3-shape/blob/v2.0.0/README.md#curves)

src/nightingale-linegraph-track.ts

@@ -59,4 +59,4 @@ import { customElement, property } from "lit/decorators.js";
   range: number[];
-  colour?: string; // (Colour will be assigned if not provided. Use "none" for no line colour)
-  fill?: string; //Create area plot using given fill colour (default "none"),
+  color?: string; // (color will be assigned if not provided. Use "none" for no line color)
+  fill?: string; //Create area plot using given fill color (default "none"),
   lineCurve?: keyof typeof curves; // See https://github.com/d3/d3-shape/#curves
@@ -101,2 +101,8 @@ values: Array<LineValue>;
   #maxRange?: number;
+  #overlay?: Selection<
+    SVGRectElement,
+    unknown,
+    HTMLElement | SVGElement | null,
+    unknown
+  >;
 
@@ -169,3 +175,3 @@ constructor() {
       .attr("d", (d) => {
-        d.colour = d.colour || interpolateRainbow(Math.random());
+        d.color = d.color || interpolateRainbow(Math.random());
         // eslint-disable-next-line no-param-reassign
@@ -176,3 +182,3 @@ d.fill = d.fill || "none";
       .attr("fill", (d) => d.fill || null)
-      .attr("stroke", (d) => d.colour || null)
+      .attr("stroke", (d) => d.color || null)
       .attr("transform", "translate(0,0)");
@@ -194,3 +200,3 @@
       .attr("r", 7)
-      .style("stroke", (d) => d.colour || null)
+      .style("stroke", (d) => d.color || null)
       .style("fill", "none")
@@ -200,5 +206,8 @@ .style("stroke-width", "1px")
 
-    mousePerLine.append("text").attr("transform", "translate(10,3)");
+    mousePerLine
+      .append("text")
+      .attr("transform", "translate(10,3)")
+      .attr("pointer-events", "none");
 
-    mouseG
+    this.#overlay = mouseG
       .append("rect") // append a rect to catch mouse movements on canvas
@@ -220,4 +229,7 @@ .attr("width", this.width) // can't catch mouse events on a g element
         if (
-          mouse[0] < (this.xScale?.(beginning) || 0) ||
-          mouse[0] > (this.xScale?.(end) || 0) + this.getSingleBaseWidth()
+          mouse[0] < (this.xScale?.(beginning) || 0) + this["margin-left"] ||
+          mouse[0] >
+            (this.xScale?.(end) || 0) +
+              this.getSingleBaseWidth() +
+              this["margin-left"]
         ) {
@@ -228,3 +240,5 @@ chartGroup.selectAll(".mouse-per-line circle").style("opacity", "0");
           const features: Record<string, LineValue | undefined> = {};
-          const seqPosition = Math.floor(this.xScale?.invert(mouse[0]) || 0);
+          const seqPosition = Math.floor(
+            this.xScale?.invert(mouse[0] - this["margin-left"]) || 0
+          );
 
@@ -302,6 +316,3 @@ chartGroup
 
-      this.svg = select(this as unknown as NightingaleElement)
-        .selectAll<SVGSVGElement, unknown>("svg")
-        .attr("width", this.width)
-        .attr("height", this.height);
+      this.svg?.attr("width", this.width);
 
@@ -313,2 +324,6 @@ this.updateHighlight();
   }
+  onDimensionsChange(): void {
+    super.onDimensionsChange();
+    this.#overlay?.attr("width", this.width).attr("height", this.height);
+  }
 
@@ -335,7 +350,11 @@ _initYScale() {
       .defined((d) => d.value !== null) // To have gaps in the line graph
-      .x(
-        (d) =>
-          this.getXFromSeqPosition(d.position + 1) -
-          this.getSingleBaseWidth() / 2
-      )
+      .x((d, i, data) => {
+        let offset = this.getSingleBaseWidth() / 2;
+        if (i === 0 || data[i - 1]?.value === null) {
+          offset = this.getSingleBaseWidth();
+        } else if (i + 1 === data.length || data[i + 1]?.value === null) {
+          offset = 0;
+        }
+        return this.getXFromSeqPosition(d.position + 1) - offset;
+      })
       .curve(curves[curve] || curveLinear);
@@ -342,0 +361,0 @@ }

New alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

12

increased by20%

Number of low quality alerts

0

decreased by-100%

Number of medium quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

431413

decreased by-37.35%

Number of low license alerts

1

increased byInfinity%

Lines of code

744

decreased by-20.43%

Dependency changes

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@nightingale-elements/nightingale-new-core@4.5.0(transitive)

• + Addedd3@7.8.37.8.5(transitive)

• + Addedlit@2.7.6(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removed@lit/reactive-element@2.0.4(transitive)

• - Removed@nightingale-elements/nightingale-new-core@5.4.1(transitive)

• - Removedd3@7.6.17.9.0(transitive)

• - Removedlit@3.1.3(transitive)

• - Removedlit-element@4.1.1(transitive)

• - Removedlit-html@3.2.1(transitive)

• Updated@nightingale-elements/nightingale-new-core@^4.0.3

• Updatedd3@7.8.3