abstract-chart 6.0.0 → 7.0.1

package/lib/chart.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -20,95 +24,77 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateYAxisLabel = exports.generateYAxisLabels = exports.generateYAxisLines = exports.generateXAxisLabel = exports.generateXAxisLabels = exports.generateXAxisGridLines = exports.generatePoints = exports.generateLines = exports.generateStack = exports.generateYAxisRight = exports.generateYAxisLeft = exports.generateXAxisTop = exports.generateXAxisBottom = exports.generateBackground = exports.renderChart = exports.inverseTransformPoint = exports.createChartStack = exports.createChartStackConfig = exports.createChartLine = exports.createChartPoint = exports.createChart = void 0;
-const AbstractImage = __importStar(require("abstract-image"));
+const AI = __importStar(require("abstract-image"));
 const Axis = __importStar(require("./axis"));
 const ts_exhaustive_check_1 = require("ts-exhaustive-check");
 function createChart(props) {
-    const { width = 600, height = 400, chartPoints = [], chartLines = [], chartStack = createChartStack({}), xAxisBottom = Axis.createLinearAxis(0, 100, ""), xAxisTop = undefined, yAxisLeft = Axis.createLinearAxis(0, 100, ""), yAxisRight = undefined, backgroundColor = AbstractImage.white, gridColor = AbstractImage.gray, gridThickness = 1, font = "Arial", fontSize = 12, labelLayout = "original", } = 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;
     return {
-        width,
-        height,
-        chartPoints,
-        chartLines,
-        chartStack,
-        xAxisBottom,
-        xAxisTop,
-        yAxisLeft,
-        yAxisRight,
-        backgroundColor,
-        gridColor,
-        gridThickness,
-        font,
-        fontSize,
-        labelLayout,
+        width: (_a = props.width) !== null && _a !== void 0 ? _a : 600,
+        height: (_b = props.height) !== null && _b !== void 0 ? _b : 600,
+        chartPoints: (_c = props.chartPoints) !== null && _c !== void 0 ? _c : [],
+        chartLines: (_d = props.chartLines) !== null && _d !== void 0 ? _d : [],
+        chartStack: (_e = props.chartStack) !== null && _e !== void 0 ? _e : createChartStack({}),
+        xAxisBottom: (_f = props.xAxisBottom) !== null && _f !== void 0 ? _f : Axis.createLinearAxis(0, 100, ""),
+        xAxisTop: (_g = props.xAxisTop) !== null && _g !== void 0 ? _g : undefined,
+        yAxisLeft: (_h = props.yAxisLeft) !== null && _h !== void 0 ? _h : Axis.createLinearAxis(0, 100, ""),
+        yAxisRight: (_j = props.yAxisRight) !== null && _j !== void 0 ? _j : undefined,
+        backgroundColor: (_k = props.backgroundColor) !== null && _k !== void 0 ? _k : AI.white,
+        font: (_l = props.font) !== null && _l !== void 0 ? _l : "Arial",
+        fontSize: (_m = props.fontSize) !== null && _m !== void 0 ? _m : 12,
+        labelLayout: (_o = props.labelLayout) !== null && _o !== void 0 ? _o : "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),
+        },
+        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 },
     };
 }
 exports.createChart = createChart;
 function createChartPoint(props) {
-    const { shape = "circle", position = AbstractImage.createPoint(0, 0), color = AbstractImage.black, size = AbstractImage.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, size = AI.createSize(6, 6), label = "", xAxis = "bottom", yAxis = "left", } = props || {};
+    return { shape, position, color, size, label, xAxis, yAxis };
 }
 exports.createChartPoint = createChartPoint;
 function createChartLine(props) {
-    const { points = [], color = AbstractImage.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" } = props || {};
+    return { points, color, thickness, label, xAxis, yAxis };
 }
 exports.createChartLine = createChartLine;
 function createChartStackConfig(props) {
-    const { color = AbstractImage.black, label = "" } = props || {};
-    return {
-        color,
-        label,
-    };
+    const { color = AI.black, label = "" } = props || {};
+    return { color, label };
 }
 exports.createChartStackConfig = createChartStackConfig;
 function createChartStack(props) {
     const { points = [], xAxis = "bottom", yAxis = "left", config = [createChartStackConfig({})] } = props || {};
-    return {
-        points,
-        xAxis,
-        yAxis,
-        config,
-    };
+    return { points, xAxis, yAxis, config };
 }
 exports.createChartStack = createChartStack;
-const padding = 80;
-function inverseTransformPoint(point, chart, xAxis, yAxis) {
-    const xMin = padding;
-    const xMax = chart.width - padding;
-    const yMin = chart.height - 0.5 * padding;
-    const yMax = 0.5 * padding;
+function inverseTransformPoint(point, chart, xAxis, yAxis, padding) {
+    const xMin = padding.left;
+    const xMax = chart.width - padding.right;
+    const yMin = chart.height - padding.bottom;
+    const yMax = padding.top;
     const x = Axis.inverseTransformValue(point.x, xMin, xMax, xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom);
     const y = Axis.inverseTransformValue(point.y, yMin, yMax, yAxis === "right" ? chart.yAxisRight : chart.yAxisLeft);
     if (x === undefined || y === undefined) {
         return undefined;
     }
-    return AbstractImage.createPoint(x, y);
+    return AI.createPoint(x, y);
 }
 exports.inverseTransformPoint = inverseTransformPoint;
 function renderChart(chart) {
-    const { width, height, xAxisBottom, xAxisTop, yAxisLeft, yAxisRight } = chart;
-    const gridWidth = width - 2 * padding;
-    const gridHeight = height - padding;
-    const xMin = padding;
-    const xMax = width - padding;
-    const yMin = height - 0.5 * padding;
-    const yMax = 0.5 * padding;
+    const { width, height, xAxisBottom, xAxisTop, yAxisLeft, yAxisRight, padding } = chart;
+    const gridWidth = width - padding.left - padding.right;
+    const gridHeight = height - padding.bottom - padding.top;
+    const xMin = padding.left;
+    const xMax = width - padding.right;
+    const yMin = height - padding.bottom;
+    const yMax = padding.top;
     const renderedBackground = generateBackground(xMin, xMax, yMin, yMax, chart);
     const xNumTicks = gridWidth / 40;
     const renderedXAxisBottom = generateXAxisBottom(xNumTicks, xAxisBottom, xMin, xMax, yMin, yMax, chart);
@@ -129,113 +115,125 @@ function renderChart(chart) {
         renderedLines,
         renderedPoints,
     ];
-    const topLeft = AbstractImage.createPoint(0, 0);
-    const size = AbstractImage.createSize(width, height);
-    return AbstractImage.createAbstractImage(topLeft, size, AbstractImage.white, components);
+    const topLeft = AI.createPoint(0, 0);
+    const size = AI.createSize(width, height);
+    return AI.createAbstractImage(topLeft, size, AI.white, components);
 }
 exports.renderChart = renderChart;
 function generateBackground(xMin, xMax, yMin, yMax, chart) {
-    const topLeft = AbstractImage.createPoint(xMin, yMax);
-    const bottomRight = AbstractImage.createPoint(xMax, yMin);
-    return AbstractImage.createRectangle(topLeft, bottomRight, chart.gridColor, chart.gridThickness, chart.backgroundColor);
+    return AI.createRectangle(AI.createPoint(xMin, yMax), AI.createPoint(xMax, yMin), AI.transparent, 0, chart.backgroundColor);
 }
 exports.generateBackground = generateBackground;
-function generateXAxisBottom(xNumTicks, xAxisBottom, xMin, xMax, yMin, yMax, chart) {
-    if (!xAxisBottom) {
-        return AbstractImage.createGroup("XAxisBottom", []);
+function generateXAxisBottom(xNumTicks, axis, xMin, xMax, yMin, yMax, chart) {
+    var _a, _b, _c, _d, _e;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("XAxisBottom", components);
+    }
+    const axisLabelPosY = yMin + chart.padding.bottom - ((_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize);
+    const xTicks = Axis.getTicks(xNumTicks, axis);
+    if (chart.xGrid) {
+        components.push(generateXAxisGridLines(xMin, xMax, yMin + 10, yMax, xTicks, axis, chart.xGrid));
     }
-    const xTicks = Axis.getTicks(xNumTicks, xAxisBottom);
-    const xLines = generateXAxisGridLines(xMin, xMax, yMin + 10, yMax, xTicks, xAxisBottom, chart);
-    const xLabels = generateXAxisLabels(xMin, xMax, yMin + 10, "down", xTicks, xAxisBottom, chart);
-    let xLabel;
+    components.push(AI.createLine({ x: xMin, y: yMin }, { x: xMax, y: yMin }, (_b = axis.axisColor) !== null && _b !== void 0 ? _b : AI.gray, (_c = axis.thickness) !== null && _c !== void 0 ? _c : 1), generateXAxisLabels(xMin, xMax, yMin + ((_d = axis.tickLabelDisp) !== null && _d !== void 0 ? _d : 10), "down", xTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            xLabel = generateXAxisLabel(xMax + 0.5 * padding, yMin + 10, "uniform", "down", xAxisBottom.label, chart);
+            components.push(generateXAxisLabel(xMax + chart.padding.right, yMin + ((_e = axis.tickLabelDisp) !== null && _e !== void 0 ? _e : 10), "uniform", "down", axis, chart));
             break;
         case "end":
-            xLabel = generateXAxisLabel(xMax, yMin + 25, "left", "down", xAxisBottom.label, chart);
+            components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "down", axis, chart));
             break;
         case "center":
-            xLabel = generateXAxisLabel((xMin + xMax) / 2, yMin + 25, "uniform", "down", xAxisBottom.label, chart);
+            components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "down", axis, chart));
             break;
         default:
             return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
     }
-    return AbstractImage.createGroup("XAxisBottom", [xLines, xLabels, xLabel]);
+    return AI.createGroup("XAxisBottom", components);
 }
 exports.generateXAxisBottom = generateXAxisBottom;
-function generateXAxisTop(xNumTicks, xAxisTop, xMin, xMax, yMax, chart) {
-    if (!xAxisTop) {
-        return AbstractImage.createGroup("XAxisTop", []);
+function generateXAxisTop(xNumTicks, axis, xMin, xMax, yMax, chart) {
+    var _a, _b, _c, _d, _e;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("XAxisTop", components);
     }
-    const xTicks2 = Axis.getTicks(xNumTicks, xAxisTop);
-    const xLines2 = generateXAxisGridLines(xMin, xMax, yMax - 10, yMax, xTicks2, xAxisTop, chart);
-    const xLabels2 = generateXAxisLabels(xMin, xMax, yMax - 13, "up", xTicks2, xAxisTop, chart);
-    let xLabel2;
+    const axisLabelPosY = yMax - chart.padding.top + ((_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize);
+    const xTicks = Axis.getTicks(xNumTicks, axis);
+    if (chart.xGrid) {
+        components.push(generateXAxisGridLines(xMin, xMax, yMax - 10, yMax, xTicks, axis, chart.xGrid));
+    }
+    components.push(AI.createLine({ x: xMin, y: yMax }, { x: xMax, y: yMax }, (_b = axis.axisColor) !== null && _b !== void 0 ? _b : AI.gray, (_c = axis.thickness) !== null && _c !== void 0 ? _c : 1), generateXAxisLabels(xMin, xMax, yMax - ((_d = axis.tickLabelDisp) !== null && _d !== void 0 ? _d : 13), "up", xTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            xLabel2 = generateXAxisLabel(xMax + 0.5 * padding, yMax - 13, "uniform", "up", xAxisTop.label, chart);
+            components.push(generateXAxisLabel(xMax + 0.5 * chart.padding.right, yMax - ((_e = axis.tickLabelDisp) !== null && _e !== void 0 ? _e : 13), "uniform", "up", axis, chart));
             break;
         case "end":
-            xLabel2 = generateXAxisLabel(xMax, yMax - 30, "left", "up", xAxisTop.label, chart);
+            components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "up", axis, chart));
             break;
         case "center":
-            xLabel2 = generateXAxisLabel((xMin + xMax) / 2, yMax - 30, "uniform", "up", xAxisTop.label, chart);
+            components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "up", axis, chart));
             break;
         default:
             return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
     }
-    return AbstractImage.createGroup("XAxisTop", [xLines2, xLabels2, xLabel2]);
+    return AI.createGroup("XAxisTop", components);
 }
 exports.generateXAxisTop = generateXAxisTop;
-function generateYAxisLeft(yNumTicks, yAxisLeft, xMin, xMax, yMin, yMax, chart) {
-    if (!yAxisLeft) {
-        return AbstractImage.createGroup("YAxisLeft", []);
+function generateYAxisLeft(yNumTicks, axis, xMin, xMax, yMin, yMax, chart) {
+    var _a, _b, _c, _d;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("YAxisLeft", components);
+    }
+    const axisLabelPosX = xMin - chart.padding.left + ((_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize);
+    const yTicks = Axis.getTicks(yNumTicks, axis);
+    if (chart.yGrid) {
+        components.push(generateYAxisLines(xMin - 5, xMax, yMin, yMax, yTicks, axis, chart.yGrid));
     }
-    const yTicks = Axis.getTicks(yNumTicks, yAxisLeft);
-    const yLines = generateYAxisLines(xMin - 5, xMax, yMin, yMax, yTicks, yAxisLeft, chart);
-    const yLabels = generateYAxisLabels(xMin - 7, yMin, yMax, "left", yTicks, yAxisLeft, chart);
-    const labelPaddingLeft = 5 + labelPadding(formatNumber(yAxisLeft.max).length, chart.fontSize, 0.5);
-    let yLabel;
+    components.push(AI.createLine({ x: xMin, y: yMin }, { x: xMin, y: yMax }, (_b = axis.axisColor) !== null && _b !== void 0 ? _b : AI.gray, (_c = axis.thickness) !== null && _c !== void 0 ? _c : 1), generateYAxisLabels(xMin - ((_d = axis.tickLabelDisp) !== null && _d !== void 0 ? _d : 7), yMin, yMax, "left", yTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            yLabel = generateYAxisLabel(xMin - labelPaddingLeft, yMax + 0.5 * padding, "uniform", "up", yAxisLeft.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax + 0.5 * chart.padding.bottom, "uniform", "up", axis, chart));
             break;
         case "end":
-            yLabel = generateYAxisLabel(xMin - labelPaddingLeft, yMax, "left", "up", yAxisLeft.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax, "left", "up", axis, chart));
             break;
         case "center":
-            yLabel = generateYAxisLabel(xMin - labelPaddingLeft, (yMin + yMax) / 2, "uniform", "up", yAxisLeft.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, "uniform", "up", axis, chart));
             break;
         default:
             return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
     }
-    return AbstractImage.createGroup("YAxisLeft", [yLines, yLabels, yLabel]);
+    return AI.createGroup("YAxisLeft", components);
 }
 exports.generateYAxisLeft = generateYAxisLeft;
-function generateYAxisRight(yNumTicks, yAxisRight, xMax, yMin, yMax, chart) {
-    if (!yAxisRight) {
-        return AbstractImage.createGroup("YAxisRight", []);
+function generateYAxisRight(yNumTicks, axis, xMax, yMin, yMax, chart) {
+    var _a, _b, _c, _d;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("YAxisRight", components);
+    }
+    const axisLabelPosX = xMax + chart.padding.right - ((_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize);
+    const yTicks = Axis.getTicks(yNumTicks, axis);
+    if (chart.yGrid) {
+        components.push(generateYAxisLines(xMax - 5, xMax + 5, yMin, yMax, yTicks, axis, chart.yGrid));
     }
-    const yTicks2 = Axis.getTicks(yNumTicks, yAxisRight);
-    const yLines2 = generateYAxisLines(xMax - 5, xMax + 5, yMin, yMax, yTicks2, yAxisRight, chart);
-    const yLabels2 = generateYAxisLabels(xMax + 7, yMin, yMax, "right", yTicks2, yAxisRight, chart);
-    const labelPaddingRight = 7 + labelPadding(formatNumber(yAxisRight.max).length, chart.fontSize, 1.5);
-    let yLabel2;
+    components.push(AI.createLine({ x: xMax, y: yMin }, { x: xMax, y: yMax }, (_b = axis.axisColor) !== null && _b !== void 0 ? _b : AI.gray, (_c = axis.thickness) !== null && _c !== void 0 ? _c : 1), generateYAxisLabels(xMax + ((_d = axis.tickLabelDisp) !== null && _d !== void 0 ? _d : 7), yMin, yMax, "right", yTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            yLabel2 = generateYAxisLabel(xMax + labelPaddingRight, yMax + 0.5 * padding, "uniform", "up", yAxisRight.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax + 0.5 * chart.padding.bottom, "uniform", "up", axis, chart));
             break;
         case "end":
-            yLabel2 = generateYAxisLabel(xMax + labelPaddingRight, yMax, "left", "up", yAxisRight.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax, "left", "up", axis, chart));
             break;
         case "center":
-            yLabel2 = generateYAxisLabel(xMax + labelPaddingRight, (yMin + yMax) / 2, "uniform", "up", yAxisRight.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, "uniform", "up", axis, chart));
             break;
         default:
             return (0, ts_exhaustive_check_1.exhaustiveCheck)(chart.labelLayout);
     }
-    return AbstractImage.createGroup("YAxisRight", [yLines2, yLabels2, yLabel2]);
+    return AI.createGroup("YAxisRight", components);
 }
 exports.generateYAxisRight = generateYAxisRight;
 function generateStack(xMin, xMax, yMin, yMax, chart) {
@@ -249,12 +247,13 @@ function generateStack(xMin, xMax, yMin, yMax, chart) {
         ys: [...stackPoint.ys.map((y) => Math.max(0, y))],
     }));
     const stackNeg = generateUnsignedStack(xMin, xMax, yMin, yMax, Object.assign(Object.assign({}, chart), { chartStack: Object.assign(Object.assign({}, chart.chartStack), { points: pointsNeg }) }));
-    return AbstractImage.createGroup("Stacks", [stackPos, stackNeg]);
+    return AI.createGroup("Stacks", [stackPos, stackNeg]);
 }
 exports.generateStack = generateStack;
 function generateUnsignedStack(xMin, xMax, yMin, yMax, chart) {
+    var _a, _b;
     if (chart.chartStack.points.length < 2) {
-        return AbstractImage.createGroup("stack", []);
+        return AI.createGroup("stack", []);
     }
     const xAxis = chart.chartStack.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
     const yAxis = chart.chartStack.yAxis === "right" ? chart.yAxisRight : chart.yAxisLeft;
@@ -262,20 +261,20 @@ function generateUnsignedStack(xMin, xMax, yMin, yMax, chart) {
         let sumY = 0;
         const points = stackPoints.ys.map((y) => {
             sumY += y;
-            return Axis.transformPoint(AbstractImage.createPoint(stackPoints.x, sumY), xMin, xMax, yMin, yMax, xAxis, yAxis);
+            return Axis.transformPoint(AI.createPoint(stackPoints.x, sumY), xMin, xMax, yMin, yMax, xAxis, yAxis);
         });
         return points;
     });
     // Transpose the xPoints data to lines.
     const lines = [];
-    for (let i = 0; i < xPoints[0].length; ++i) {
+    for (let i = 0; i < ((_b = (_a = xPoints[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0); ++i) {
         lines[i] = [];
         for (const points of xPoints) {
             lines[i].push(points[i]);
         }
     }
     const polygons = [];
-    let lastLine = chart.chartStack.points.map((stackPoint) => Axis.transformPoint(AbstractImage.createPoint(stackPoint.x, 0), xMin, xMax, yMin, yMax, xAxis, yAxis));
+    let lastLine = chart.chartStack.points.map((stackPoint) => Axis.transformPoint(AI.createPoint(stackPoint.x, 0), xMin, xMax, yMin, yMax, xAxis, yAxis));
     lines.forEach((line, index) => {
         const config = chart.chartStack.config[index];
         if (!config) {
@@ -284,39 +283,40 @@ function generateUnsignedStack(xMin, xMax, yMin, yMax, chart) {
         const color = config.color;
         const points = [...line, ...lastLine.slice().reverse()];
         lastLine = line;
-        polygons.push(AbstractImage.createPolygon(points, color, 0, color));
+        polygons.push(AI.createPolygon(points, color, 0, color));
     });
-    return AbstractImage.createGroup("Stack", polygons);
+    return AI.createGroup("Stack", polygons);
 }
 function generateLines(xMin, xMax, yMin, yMax, chart) {
     const lines = chart.chartLines.map((l) => {
+        var _a;
         if (l.points.length < 2) {
-            return AbstractImage.createGroup(l.label, []);
+            return AI.createGroup(l.label, []);
         }
         const xAxis = l.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
         const yAxis = l.yAxis === "right" ? chart.yAxisRight : chart.yAxisLeft;
         const points = l.points.map((p) => Axis.transformPoint(p, xMin, xMax, yMin, yMax, xAxis, yAxis));
-        const last = points[points.length - 1];
-        return AbstractImage.createGroup(l.label, [
-            AbstractImage.createPolyLine(points, l.color, l.thickness),
-            AbstractImage.createText(last, l.label, chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", "right", "down", 0, AbstractImage.black, false),
+        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),
         ]);
     });
-    return AbstractImage.createGroup("Lines", lines);
+    return AI.createGroup("Lines", lines);
 }
 exports.generateLines = generateLines;
 function generatePoints(xMin, xMax, yMin, yMax, chart) {
     const points = chart.chartPoints.map((p) => {
+        var _a;
         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 AbstractImage.createGroup(p.label, [
+        return AI.createGroup(p.label, [
             shape,
-            AbstractImage.createText(position, p.label, chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", "right", "down", 0, AbstractImage.black, false),
+            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),
         ]);
     });
-    return AbstractImage.createGroup("Points", points);
+    return AI.createGroup("Points", points);
 }
 exports.generatePoints = generatePoints;
 function generatePointShape(p, position) {
@@ -324,67 +324,71 @@ function generatePointShape(p, position) {
     const halfHeight = p.size.height * 0.5;
     if (p.shape === "triangle") {
         const trianglePoints = [
-            AbstractImage.createPoint(position.x, position.y + halfHeight),
-            AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight),
-            AbstractImage.createPoint(position.x + halfWidth, position.y - halfHeight),
+            AI.createPoint(position.x, position.y + halfHeight),
+            AI.createPoint(position.x - halfWidth, position.y - halfHeight),
+            AI.createPoint(position.x + halfWidth, position.y - halfHeight),
         ];
-        return AbstractImage.createPolygon(trianglePoints, AbstractImage.black, 1, p.color);
+        return AI.createPolygon(trianglePoints, AI.black, 1, p.color);
     }
     else if (p.shape === "square") {
-        const topLeft = AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight);
-        const bottomRight = AbstractImage.createPoint(position.x + halfWidth, position.y + halfHeight);
-        return AbstractImage.createRectangle(topLeft, bottomRight, AbstractImage.black, 1, p.color);
+        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);
     }
     else {
-        const topLeft = AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight);
-        const bottomRight = AbstractImage.createPoint(position.x + halfWidth, position.y + halfHeight);
-        return AbstractImage.createEllipse(topLeft, bottomRight, AbstractImage.black, 1, p.color);
+        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);
     }
 }
-function generateXAxisGridLines(xMin, xMax, yMin, yMax, xTicks, xAxis, chart) {
+function generateXAxisGridLines(xMin, xMax, yMin, yMax, xTicks, xAxis, grid) {
     const xLines = xTicks.map((l) => {
-        const x = Axis.transformValue(l, xMin, xMax, xAxis);
-        const start = AbstractImage.createPoint(x, yMin);
-        const end = AbstractImage.createPoint(x, yMax);
-        return AbstractImage.createLine(start, end, chart.gridColor, chart.gridThickness);
+        const x = Axis.transformValue(l.value, xMin, xMax, xAxis);
+        const start = AI.createPoint(x, yMin);
+        const end = AI.createPoint(x, yMax);
+        return AI.createLine(start, end, grid.color, grid.thickness);
     });
-    return AbstractImage.createGroup("Lines", xLines);
+    return AI.createGroup("Lines", xLines);
 }
 exports.generateXAxisGridLines = generateXAxisGridLines;
-function generateXAxisLabels(xMin, xMax, y, growVertical, xTicks, xAxis, chart) {
-    const xLabels = xTicks.map((l) => {
-        const position = AbstractImage.createPoint(Axis.transformValue(l, xMin, xMax, xAxis), y);
-        return AbstractImage.createText(position, formatNumber(l), chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", "uniform", growVertical, 0, AbstractImage.black, false);
+function generateXAxisLabels(xMin, xMax, y, growVertical, ticks, axis, chart) {
+    const xLabels = ticks.map((l) => {
+        var _a, _b, _c, _d, _e;
+        const position = AI.createPoint(Axis.transformValue(l.value, xMin, xMax, axis), y);
+        return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = axis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal", (_d = axis.labelRotation) !== null && _d !== void 0 ? _d : 0, "center", "uniform", growVertical, 0, (_e = axis.labelColor) !== null && _e !== void 0 ? _e : AI.black, false);
     });
-    return AbstractImage.createGroup("Labels", xLabels);
+    return AI.createGroup("Labels", xLabels);
 }
 exports.generateXAxisLabels = generateXAxisLabels;
-function generateXAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, label, chart) {
-    const position = AbstractImage.createPoint(x, y);
-    return AbstractImage.createText(position, label, chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, AbstractImage.black, false);
+function generateXAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, axis, chart) {
+    var _a, _b, _c;
+    const position = AI.createPoint(x, y);
+    return AI.createText(position, axis.label, chart.font, (_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal", 0, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, false);
 }
 exports.generateXAxisLabel = generateXAxisLabel;
-function generateYAxisLines(xMin, xMax, yMin, yMax, yTicks, yAxis, chart) {
+function generateYAxisLines(xMin, xMax, yMin, yMax, yTicks, yAxis, grid) {
     const yLines = yTicks.map((l) => {
-        const y = Axis.transformValue(l, yMin, yMax, yAxis);
-        const start = AbstractImage.createPoint(xMin, y);
-        const end = AbstractImage.createPoint(xMax, y);
-        return AbstractImage.createLine(start, end, chart.gridColor, chart.gridThickness);
+        const y = Axis.transformValue(l.value, yMin, yMax, yAxis);
+        const start = AI.createPoint(xMin, y);
+        const end = AI.createPoint(xMax, y);
+        return AI.createLine(start, end, grid.color, grid.thickness);
     });
-    return AbstractImage.createGroup("Lines", yLines);
+    return AI.createGroup("Lines", yLines);
 }
 exports.generateYAxisLines = generateYAxisLines;
 function generateYAxisLabels(x, yMin, yMax, growHorizontal, yTicks, yAxis, chart) {
     const yLabels = yTicks.map((l) => {
-        const position = AbstractImage.createPoint(x, Axis.transformValue(l, yMin, yMax, yAxis));
-        return AbstractImage.createText(position, formatNumber(l), chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", growHorizontal, "uniform", 0, AbstractImage.black, false);
+        var _a, _b, _c, _d, _e;
+        const position = AI.createPoint(x, Axis.transformValue(l.value, yMin, yMax, yAxis));
+        return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = yAxis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = yAxis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal", (_d = yAxis.labelRotation) !== null && _d !== void 0 ? _d : 0, "center", growHorizontal, "uniform", 0, (_e = yAxis.labelColor) !== null && _e !== void 0 ? _e : AI.black, false);
     });
-    return AbstractImage.createGroup("Labels", yLabels);
+    return AI.createGroup("Labels", yLabels);
 }
 exports.generateYAxisLabels = generateYAxisLabels;
-function generateYAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, label, chart) {
-    const position = AbstractImage.createPoint(x, y);
-    return AbstractImage.createText(position, label, chart.font, chart.fontSize, AbstractImage.black, "normal", -90, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, AbstractImage.black, false);
+function generateYAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, axis, chart) {
+    var _a, _b, _c;
+    const position = AI.createPoint(x, y);
+    return AI.createText(position, axis.label, chart.font, (_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal", -90, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, false);
 }
 exports.generateYAxisLabel = generateYAxisLabel;
 function formatNumber(n) {