abstract-chart - npm Package Compare versions

Comparing version 7.0.1 to 7.1.0

CHANGELOG.md

@@ -5,2 +5,13 @@ # Change Log
 
+## [7.1.0] - 2024-05-10
+
+### Added
+
+- Support for id parameter on chart objects to support abstract-image click functionality
+- Text color and text outline color in charts
+
+### Changed
+
+- Changed text growth direction from down/right to automatic for point and line labels to keep them inside the grid
+
 ## [7.0.0] - 2024-05-06
@@ -7,0 +18,0 @@

lib/chart.d.ts

@@ -22,2 +22,4 @@ import * as AI from "abstract-image";
     readonly fontSize: number;
+    readonly textColor: AI.Color;
+    readonly textOutlineColor: AI.Color;
     readonly labelLayout: LabelLayout;
@@ -45,2 +47,4 @@ readonly padding: Padding;
     readonly color: AI.Color;
+    readonly strokeColor: AI.Color;
+    readonly strokeThickness: number;
     readonly size: AI.Size;
@@ -51,2 +55,5 @@ readonly label: string;
     readonly fontSize?: number;
+    readonly textColor?: AI.Color;
+    readonly textOutlineColor?: AI.Color;
+    readonly id?: string;
 }
@@ -63,2 +70,5 @@ export type ChartPointProps = Partial<ChartPoint>;
     readonly fontSize?: number;
+    readonly textColor?: AI.Color;
+    readonly textOutlineColor?: AI.Color;
+    readonly id?: string;
 }
@@ -70,2 +80,3 @@ export type ChartLineProps = Partial<ChartLine>;
     readonly label: string;
+    readonly id?: string;
 }
@@ -72,0 +83,0 @@ export type ChartStackConfigProps = Partial<ChartStackConfig>;

lib/chart.js

@@ -31,3 +31,3 @@ "use strict";
 function createChart(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
     return {
@@ -46,11 +46,13 @@ width: (_a = props.width) !== null && _a !== void 0 ? _a : 600,
         fontSize: (_m = props.fontSize) !== null && _m !== void 0 ? _m : 12,
-        labelLayout: (_o = props.labelLayout) !== null && _o !== void 0 ? _o : "original",
+        textColor: (_o = props.textColor) !== null && _o !== void 0 ? _o : AI.black,
+        textOutlineColor: (_p = props.textOutlineColor) !== null && _p !== void 0 ? _p : AI.transparent,
+        labelLayout: (_q = props.labelLayout) !== null && _q !== void 0 ? _q : "original",
         padding: {
-            top: (_q = (_p = props.padding) === null || _p === void 0 ? void 0 : _p.top) !== null && _q !== void 0 ? _q : (props.xAxisTop !== undefined ? 45 : 10),
-            right: (_s = (_r = props.padding) === null || _r === void 0 ? void 0 : _r.right) !== null && _s !== void 0 ? _s : (props.yAxisRight !== undefined ? 45 : 10),
-            bottom: (_u = (_t = props.padding) === null || _t === void 0 ? void 0 : _t.bottom) !== null && _u !== void 0 ? _u : (props.xAxisBottom === undefined ? 10 : 45),
-            left: (_w = (_v = props.padding) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : (!props.yAxisLeft === undefined ? 10 : 45),
+            top: (_s = (_r = props.padding) === null || _r === void 0 ? void 0 : _r.top) !== null && _s !== void 0 ? _s : (props.xAxisTop !== undefined ? 45 : 10),
+            right: (_u = (_t = props.padding) === null || _t === void 0 ? void 0 : _t.right) !== null && _u !== void 0 ? _u : (props.yAxisRight !== undefined ? 45 : 10),
+            bottom: (_w = (_v = props.padding) === null || _v === void 0 ? void 0 : _v.bottom) !== null && _w !== void 0 ? _w : (props.xAxisBottom === undefined ? 10 : 45),
+            left: (_y = (_x = props.padding) === null || _x === void 0 ? void 0 : _x.left) !== null && _y !== void 0 ? _y : (!props.yAxisLeft === undefined ? 10 : 45),
         },
-        xGrid: { color: (_y = (_x = props.xGrid) === null || _x === void 0 ? void 0 : _x.color) !== null && _y !== void 0 ? _y : AI.gray, thickness: (_0 = (_z = props.xGrid) === null || _z === void 0 ? void 0 : _z.thickness) !== null && _0 !== void 0 ? _0 : 1 },
-        yGrid: { color: (_2 = (_1 = props.yGrid) === null || _1 === void 0 ? void 0 : _1.color) !== null && _2 !== void 0 ? _2 : AI.gray, thickness: (_4 = (_3 = props.yGrid) === null || _3 === void 0 ? void 0 : _3.thickness) !== null && _4 !== void 0 ? _4 : 1 },
+        xGrid: { color: (_0 = (_z = props.xGrid) === null || _z === void 0 ? void 0 : _z.color) !== null && _0 !== void 0 ? _0 : AI.gray, thickness: (_2 = (_1 = props.xGrid) === null || _1 === void 0 ? void 0 : _1.thickness) !== null && _2 !== void 0 ? _2 : 1 },
+        yGrid: { color: (_4 = (_3 = props.yGrid) === null || _3 === void 0 ? void 0 : _3.color) !== null && _4 !== void 0 ? _4 : AI.gray, thickness: (_6 = (_5 = props.yGrid) === null || _5 === void 0 ? void 0 : _5.thickness) !== null && _6 !== void 0 ? _6 : 1 },
     };
@@ -60,9 +62,23 @@ }
 function createChartPoint(props) {
-    const { shape = "circle", position = AI.createPoint(0, 0), color = AI.black, size = AI.createSize(6, 6), label = "", xAxis = "bottom", yAxis = "left", } = props || {};
-    return { shape, position, color, size, label, xAxis, yAxis };
+    const { shape = "circle", position = AI.createPoint(0, 0), color = AI.black, strokeColor = AI.black, strokeThickness = 1, size = AI.createSize(6, 6), label = "", xAxis = "bottom", yAxis = "left", fontSize, textColor, textOutlineColor, id, } = props || {};
+    return {
+        shape,
+        position,
+        color,
+        strokeColor,
+        strokeThickness,
+        size,
+        label,
+        xAxis,
+        yAxis,
+        fontSize,
+        textColor,
+        textOutlineColor,
+        id,
+    };
 }
 exports.createChartPoint = createChartPoint;
 function createChartLine(props) {
-    const { points = [], color = AI.black, thickness = 1, label = "", xAxis = "bottom", yAxis = "left" } = props || {};
-    return { points, color, thickness, label, xAxis, yAxis };
+    const { points = [], color = AI.black, thickness = 1, label = "", xAxis = "bottom", yAxis = "left", fontSize, textColor, textOutlineColor, id, } = props || {};
+    return { points, color, thickness, label, xAxis, yAxis, fontSize, textColor, textOutlineColor, id };
 }
@@ -289,3 +305,3 @@ exports.createChartLine = createChartLine;
         lastLine = line;
-        polygons.push(AI.createPolygon(points, color, 0, color));
+        polygons.push(AI.createPolygon(points, color, 0, color, config.id));
     });
@@ -296,3 +312,3 @@ return AI.createGroup("Stack", polygons);
     const lines = chart.chartLines.map((l) => {
-        var _a;
+        var _a, _b, _c;
         if (l.points.length < 2) {
@@ -304,6 +320,10 @@ return AI.createGroup(l.label, []);
         const points = l.points.map((p) => Axis.transformPoint(p, xMin, xMax, yMin, yMax, xAxis, yAxis));
-        return AI.createGroup(l.label, [
-            AI.createPolyLine(points, l.color, l.thickness),
-            AI.createText(points.at(-1), l.label, chart.font, (_a = l.fontSize) !== null && _a !== void 0 ? _a : chart.fontSize, AI.black, "normal", 0, "center", "right", "down", 0, AI.black, false),
-        ]);
+        const components = [];
+        const outlineColor = (_a = l.textOutlineColor) !== null && _a !== void 0 ? _a : chart.textOutlineColor;
+        const last = points.at(-1);
+        components.push(AI.createPolyLine(points, l.color, l.thickness), AI.createText(last, l.label, chart.font, (_b = l.fontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = l.textColor) !== null && _c !== void 0 ? _c : chart.textColor, "normal", 0, "center", textHorizontalGrowth(last.x, xMin, xMax), textVerticalGrowth(last.y, yMin, yMax), outlineColor !== AI.transparent ? 3 : 0, outlineColor, false));
+        if (l.id !== undefined) {
+            components.push(AI.createPolyLine(points, AI.transparent, l.thickness + 8, l.id));
+        }
+        return AI.createGroup(l.label, components);
     });
@@ -315,11 +335,15 @@ return AI.createGroup("Lines", lines);
     const points = chart.chartPoints.map((p) => {
-        var _a;
+        var _a, _b, _c;
         const xAxis = p.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
         const yAxis = p.yAxis === "right" ? chart.yAxisRight : chart.yAxisLeft;
         const position = Axis.transformPoint(p.position, xMin, xMax, yMin, yMax, xAxis, yAxis);
-        const shape = generatePointShape(p, position);
-        return AI.createGroup(p.label, [
-            shape,
-            AI.createText(position, p.label, chart.font, (_a = p.fontSize) !== null && _a !== void 0 ? _a : chart.fontSize, AI.black, "normal", 0, "center", "right", "down", 0, AI.black, false),
-        ]);
+        const outlineColor = (_a = p.textOutlineColor) !== null && _a !== void 0 ? _a : chart.textOutlineColor;
+        const components = [
+            generatePointShape(p, position, undefined),
+            AI.createText(position, p.label, chart.font, (_b = p.fontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = p.textColor) !== null && _c !== void 0 ? _c : chart.textColor, "normal", 0, "center", textHorizontalGrowth(position.x, xMin, xMax), textVerticalGrowth(position.y, yMin, yMax), outlineColor !== AI.transparent ? 3 : 0, outlineColor, false),
+        ];
+        if (p.id !== undefined) {
+            components.push(generatePointShape(Object.assign(Object.assign({}, p), { color: AI.transparent, strokeColor: AI.transparent, strokeThickness: 0, size: { width: p.size.width + 10, height: p.size.height + 10 } }), position, p.id));
+        }
+        return AI.createGroup(p.label, components);
     });
@@ -329,3 +353,9 @@ return AI.createGroup("Points", points);
 exports.generatePoints = generatePoints;
-function generatePointShape(p, position) {
+function textHorizontalGrowth(position, xMin, xMax) {
+    return position > (xMin + xMax) * 0.5 ? "left" : "right";
+}
+function textVerticalGrowth(position, yMin, yMax) {
+    return position < (yMin + yMax) * 0.5 ? "down" : "up";
+}
+function generatePointShape(p, position, id) {
     const halfWidth = p.size.width * 0.5;
@@ -339,3 +369,3 @@ const halfHeight = p.size.height * 0.5;
         ];
-        return AI.createPolygon(trianglePoints, AI.black, 1, p.color);
+        return AI.createPolygon(trianglePoints, p.strokeColor, p.strokeThickness, p.color, id);
     }
@@ -345,3 +375,3 @@ else if (p.shape === "square") {
         const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
-        return AI.createRectangle(topLeft, bottomRight, AI.black, 1, p.color);
+        return AI.createRectangle(topLeft, bottomRight, p.strokeColor, p.strokeThickness, p.color, id);
     }
@@ -351,3 +381,3 @@ else {
         const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
-        return AI.createEllipse(topLeft, bottomRight, AI.black, 1, p.color);
+        return AI.createEllipse(topLeft, bottomRight, p.strokeColor, p.strokeThickness, p.color, id);
     }
@@ -354,0 +384,0 @@ }

package.json

 {
   "name": "abstract-chart",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "Drawing charts using multiple unit of measure axes as coordinate system",
@@ -21,3 +21,3 @@ "repository": "https://github.com/dividab/abstract-visuals/tree/master/packages/abstract-chart",
   },
-  "gitHead": "71bfae10c4c28a5e785fcfd429495f44d939f3f9"
+  "gitHead": "5b63dcc2ecfc728a85beccb0fae5115c85b6841a"
 }

src/chart.ts

@@ -26,2 +26,4 @@ import * as AI from "abstract-image";
   readonly fontSize: number;
+  readonly textColor: AI.Color;
+  readonly textOutlineColor: AI.Color;
   readonly labelLayout: LabelLayout;
@@ -49,2 +51,4 @@ readonly padding: Padding;
     fontSize: props.fontSize ?? 12,
+    textColor: props.textColor ?? AI.black,
+    textOutlineColor: props.textOutlineColor ?? AI.transparent,
     labelLayout: props.labelLayout ?? "original",
@@ -73,2 +77,4 @@ padding: {
   readonly color: AI.Color;
+  readonly strokeColor: AI.Color;
+  readonly strokeThickness: number;
   readonly size: AI.Size;
@@ -79,2 +85,5 @@ readonly label: string;
   readonly fontSize?: number;
+  readonly textColor?: AI.Color;
+  readonly textOutlineColor?: AI.Color;
+  readonly id?: string;
 }
@@ -89,2 +98,4 @@
     color = AI.black,
+    strokeColor = AI.black,
+    strokeThickness = 1,
     size = AI.createSize(6, 6),
@@ -94,4 +105,22 @@ label = "",
     yAxis = "left",
+    fontSize,
+    textColor,
+    textOutlineColor,
+    id,
   } = props || {};
-  return { shape, position, color, size, label, xAxis, yAxis };
+  return {
+    shape,
+    position,
+    color,
+    strokeColor,
+    strokeThickness,
+    size,
+    label,
+    xAxis,
+    yAxis,
+    fontSize,
+    textColor,
+    textOutlineColor,
+    id,
+  };
 }
@@ -107,2 +136,5 @@
   readonly fontSize?: number;
+  readonly textColor?: AI.Color;
+  readonly textOutlineColor?: AI.Color;
+  readonly id?: string;
 }
@@ -113,4 +145,15 @@
 export function createChartLine(props: ChartLineProps): ChartLine {
-  const { points = [], color = AI.black, thickness = 1, label = "", xAxis = "bottom", yAxis = "left" } = props || {};
-  return { points, color, thickness, label, xAxis, yAxis };
+  const {
+    points = [],
+    color = AI.black,
+    thickness = 1,
+    label = "",
+    xAxis = "bottom",
+    yAxis = "left",
+    fontSize,
+    textColor,
+    textOutlineColor,
+    id,
+  } = props || {};
+  return { points, color, thickness, label, xAxis, yAxis, fontSize, textColor, textOutlineColor, id };
 }
@@ -121,2 +164,3 @@
   readonly label: string;
+  readonly id?: string;
 }
@@ -463,3 +507,3 @@
     lastLine = line;
-    polygons.push(AI.createPolygon(points, color, 0, color));
+    polygons.push(AI.createPolygon(points, color, 0, color, config.id));
   });
@@ -478,20 +522,27 @@
     const points = l.points.map((p) => Axis.transformPoint(p, xMin, xMax, yMin, yMax, xAxis, yAxis));
-    return AI.createGroup(l.label, [
+    const components = [];
+    const outlineColor = l.textOutlineColor ?? chart.textOutlineColor;
+    const last = points.at(-1)!;
+    components.push(
       AI.createPolyLine(points, l.color, l.thickness),
       AI.createText(
-        points.at(-1)!,
+        last,
         l.label,
         chart.font,
         l.fontSize ?? chart.fontSize,
-        AI.black,
+        l.textColor ?? chart.textColor,
         "normal",
         0,
         "center",
-        "right",
-        "down",
-        0,
-        AI.black,
+        textHorizontalGrowth(last.x, xMin, xMax),
+        textVerticalGrowth(last.y, yMin, yMax),
+        outlineColor !== AI.transparent ? 3 : 0,
+        outlineColor,
         false
-      ),
-    ]);
+      )
+    );
+    if (l.id !== undefined) {
+      components.push(AI.createPolyLine(points, AI.transparent, l.thickness + 8, l.id));
+    }
+    return AI.createGroup(l.label, components);
   });
@@ -506,5 +557,5 @@ return AI.createGroup("Lines", lines);
     const position = Axis.transformPoint(p.position, xMin, xMax, yMin, yMax, xAxis, yAxis);
-    const shape = generatePointShape(p, position);
-    return AI.createGroup(p.label, [
-      shape,
+    const outlineColor = p.textOutlineColor ?? chart.textOutlineColor;
+    const components = [
+      generatePointShape(p, position, undefined),
       AI.createText(
@@ -515,13 +566,29 @@ position,
         p.fontSize ?? chart.fontSize,
-        AI.black,
+        p.textColor ?? chart.textColor,
         "normal",
         0,
         "center",
-        "right",
-        "down",
-        0,
-        AI.black,
+        textHorizontalGrowth(position.x, xMin, xMax),
+        textVerticalGrowth(position.y, yMin, yMax),
+        outlineColor !== AI.transparent ? 3 : 0,
+        outlineColor,
         false
       ),
-    ]);
+    ];
+    if (p.id !== undefined) {
+      components.push(
+        generatePointShape(
+          {
+            ...p,
+            color: AI.transparent,
+            strokeColor: AI.transparent,
+            strokeThickness: 0,
+            size: { width: p.size.width + 10, height: p.size.height + 10 },
+          },
+          position,
+          p.id
+        )
+      );
+    }
+    return AI.createGroup(p.label, components);
   });
@@ -531,3 +598,11 @@ return AI.createGroup("Points", points);
 
-function generatePointShape(p: ChartPoint, position: AI.Point): AI.Component {
+function textHorizontalGrowth(position: number, xMin: number, xMax: number): AI.GrowthDirection {
+  return position > (xMin + xMax) * 0.5 ? "left" : "right";
+}
+
+function textVerticalGrowth(position: number, yMin: number, yMax: number): AI.GrowthDirection {
+  return position < (yMin + yMax) * 0.5 ? "down" : "up";
+}
+
+function generatePointShape(p: ChartPoint, position: AI.Point, id: string | undefined): AI.Component {
   const halfWidth = p.size.width * 0.5;
@@ -541,11 +616,11 @@ const halfHeight = p.size.height * 0.5;
     ];
-    return AI.createPolygon(trianglePoints, AI.black, 1, p.color);
+    return AI.createPolygon(trianglePoints, p.strokeColor, p.strokeThickness, p.color, id);
   } else if (p.shape === "square") {
     const topLeft = AI.createPoint(position.x - halfWidth, position.y - halfHeight);
     const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
-    return AI.createRectangle(topLeft, bottomRight, AI.black, 1, p.color);
+    return AI.createRectangle(topLeft, bottomRight, p.strokeColor, p.strokeThickness, p.color, id);
   } else {
     const topLeft = AI.createPoint(position.x - halfWidth, position.y - halfHeight);
     const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
-    return AI.createEllipse(topLeft, bottomRight, AI.black, 1, p.color);
+    return AI.createEllipse(topLeft, bottomRight, p.strokeColor, p.strokeThickness, p.color, id);
   }
@@ -552,0 +627,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124315

increased by6.26%

Lines of code

1748

increased by7.11%

No dependency changes