@axdspub/axiom-charts 1.0.6 → 1.0.9

package/library/Libraries/axiom/index.js

@@ -4012,7 +4012,7 @@ class AxiomScatter extends AxiomPlotRoot {
             onLegendReady: { get: () => super.onLegendReady }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             const style = this.style !== undefined ? this.style : {};
             const data = yield this.getData();
             this.parsedData = (_a = data === null || data === void 0 ? void 0 : data.parsed) === null || _a === void 0 ? void 0 : _a.data;
@@ -4063,26 +4063,62 @@ class AxiomScatter extends AxiomPlotRoot {
             });
             // .style?.strokeColor !== undefined ? settings.style.strokeColor :
             // .style?.strokeWidth ||
-            const pointW = style.radius !== undefined ? style.radius : 2;
             /* ctx.save()
             ctx.beginPath()
             ctx.rect(this.chart.settings.margin.left - pointW, this.chart.settings.margin.top - pointW, this.xScale.range()[1] - pointW * 2, this.yScale.range()[0] - pointW * 2)
             ctx.clip() */
-            ctx.strokeStyle = style.strokeColor !== undefined ? style.strokeColor : '#FFF';
-            ctx.lineWidth = (style.strokeWidth !== undefined || style.strokeColor !== undefined) ? ((style.strokeWidth !== undefined ? style.strokeWidth : 1) + pointW) : 0;
-            ctx.fillStyle = style.fill !== undefined ? style.fill : '#666';
+            const defaultPointW = style.radius !== undefined ? style.radius : style.size !== undefined ? style.size : 2;
+            const defaultFill = style.fill !== undefined ? style.fill : '#666';
+            const defaultStroke = style.strokeColor !== undefined ? style.strokeColor : '#FFF';
+            const defaultStrokeWidth = (style.strokeWidth !== undefined || style.strokeColor !== undefined) ? ((style.strokeWidth !== undefined ? style.strokeWidth : 1) + defaultPointW) : 0;
+            const colorAccessor = (_o = this.getStringAccessorAtAxis('color')) !== null && _o !== void 0 ? _o : this.getStringAccessorAtAxis('fill');
+            const radiusAccessor = (_p = this.getAccessorAtAxis('radius')) !== null && _p !== void 0 ? _p : this.getAccessorAtAxis('size');
+            const strokeWidthAccessor = this.getAccessorAtAxis('strokeWidth');
+            const strokeColorAccessor = this.getStringAccessorAtAxis('strokeColor');
+            ctx.strokeStyle = defaultStroke;
+            ctx.lineWidth = defaultStrokeWidth;
+            ctx.fillStyle = defaultFill;
             visibleData.forEach(d => {
                 if (isDefined(d)) {
                     ctx.beginPath();
-                    ctx.arc(xPosition(d), yPosition(d), pointW, 0, 2 * Math.PI);
+                    const r = radiusAccessor === null || radiusAccessor === void 0 ? void 0 : radiusAccessor(d);
+                    const radius = r !== undefined ? +r : defaultPointW;
+                    ctx.arc(xPosition(d), yPosition(d), radius, 0, 2 * Math.PI);
+                    if (colorAccessor !== undefined) {
+                        const color = colorAccessor.apply(this, [d]);
+                        if (color !== undefined && color !== null) {
+                            ctx.fillStyle = color.toString();
+                        }
+                        else if (ctx.fillStyle !== defaultFill) {
+                            ctx.fillStyle = defaultFill;
+                        }
+                    }
+                    if (strokeColorAccessor !== undefined) {
+                        const sc = strokeColorAccessor.apply(this, [d]);
+                        if (sc !== undefined && sc !== null) {
+                            ctx.strokeStyle = sc.toString();
+                        }
+                        else if (ctx.strokeStyle !== defaultStroke) {
+                            ctx.strokeStyle = defaultStroke;
+                        }
+                    }
+                    if (strokeWidthAccessor !== undefined) {
+                        const sw = strokeWidthAccessor.apply(this, [d]);
+                        if (sw !== undefined && sw !== null) {
+                            ctx.lineWidth = +sw;
+                        }
+                        else if (ctx.lineWidth !== defaultStrokeWidth) {
+                            ctx.lineWidth = defaultStrokeWidth;
+                        }
+                    }
                     ctx.stroke();
                     ctx.fill();
                 }
             });
-            if (((_o = this.axes) === null || _o === void 0 ? void 0 : _o.y) !== undefined && !((_p = this.legendSettings.hide) !== null && _p !== void 0 ? _p : false)) {
+            if (((_q = this.axes) === null || _q === void 0 ? void 0 : _q.y) !== undefined && !((_r = this.legendSettings.hide) !== null && _r !== void 0 ? _r : false)) {
                 _super.onLegendReady.call(this, [{
                         id: this.axes.y.key,
-                        label: (_q = chart.getAxisLabel(this.axes.y, 'y')) !== null && _q !== void 0 ? _q : this.axes.y.key,
+                        label: (_s = chart.getAxisLabel(this.axes.y, 'y')) !== null && _s !== void 0 ? _s : this.axes.y.key,
                         style: {
                             backgroundColor: ctx.fillStyle,
                             border: `1px solid ${ctx.strokeStyle}`
@@ -4148,7 +4184,7 @@ class AxiomBar extends AxiomPlotRoot {
             onLegendReady: { get: () => super.onLegendReady }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             const style = this.style !== undefined ? this.style : {};
             const data = yield this.getData();
             const parsedData = (_a = data === null || data === void 0 ? void 0 : data.parsed) === null || _a === void 0 ? void 0 : _a.data;
@@ -4160,7 +4196,6 @@ class AxiomBar extends AxiomPlotRoot {
             const yAccessor = this.getAccessorAtAxis('y');
             const y0Accessor = yAccessors.y0;
             const y1Accessor = yAccessors.y1;
-            const colorAccessor = this.getStringAccessorAtAxis('color');
             const offset = {
                 x: ((_d = (_c = (_b = this === null || this === void 0 ? void 0 : this.axes) === null || _b === void 0 ? void 0 : _b.x) === null || _c === void 0 ? void 0 : _c.offset) === null || _d === void 0 ? void 0 : _d.x) !== undefined ? this.axes.x.offset.x : 0,
                 y: ((_g = (_f = (_e = this === null || this === void 0 ? void 0 : this.axes) === null || _e === void 0 ? void 0 : _e.y) === null || _f === void 0 ? void 0 : _f.offset) === null || _g === void 0 ? void 0 : _g.y) !== undefined ? this.axes.y.offset.y : 0
@@ -4193,12 +4228,12 @@ class AxiomBar extends AxiomPlotRoot {
                     return p === undefined ? 0 : (p + offset);
                 };
             };
+            const xDataSpan = Math.abs(+xAxisScale.domain[1] - +xAxisScale.domain[0]);
+            const yDataSpan = Math.abs(+yAxisScale.domain[1] - +yAxisScale.domain[0]);
             ctx.save();
             ctx.beginPath();
             ctx.rect(this.chart.settings.margin.left, this.chart.settings.margin.top, xScale.range()[1], yScale.range()[0]);
             ctx.clip();
-            const defaultColor = style.fill !== undefined ? style.fill : '#EDEDED';
-            ctx.fillStyle = defaultColor;
             const rect = {};
             if (x0Accessor !== undefined && x1Accessor !== undefined) {
                 rect.x0 = makePositionFn(x0Accessor, xScale, offset.x);
@@ -4225,7 +4260,6 @@ class AxiomBar extends AxiomPlotRoot {
                                 ? x0Accessor(d) !== undefined && x0Accessor(d) !== null && x1Accessor(d) !== undefined && x1Accessor(d) !== null
                                 : false;
             };
-            ctx.beginPath();
             const isVert = !!(rect.x0 !== undefined && rect.x1 !== undefined);
             const height = Math.abs(yAxisScale.range[1] - yAxisScale.range[0]);
             const width = Math.abs(xAxisScale.range[1] - xAxisScale.range[0]);
@@ -4233,20 +4267,83 @@ class AxiomBar extends AxiomPlotRoot {
             const barSpacePercent = 20;
             const visibleData = parsedData.filter(row => {
                 return isVert
-                    ? +rect.y(row) >= yAxisScale.range[0] && +rect.y(row) <= yAxisScale.range[1]
+                    ? +rect.y(row) >= yAxisScale.range[1] && +rect.y(row) <= yAxisScale.range[0]
                     : +rect.x(row) >= (xAxisScale.range[0] + offset.x) && +rect.x(row) <= (xAxisScale.range[1] + offset.x);
             });
-            const barSize = Math.round(((isVert ? height : width) - visibleData.length) / visibleData.length);
-            const defaultSize = Math.max(1, barSize - barSize * (barSpacePercent / 100));
-            let hadFillColor = false;
+            const colorAccessor = (_o = this.getStringAccessorAtAxis('color')) !== null && _o !== void 0 ? _o : this.getStringAccessorAtAxis('fill');
+            const strokeWidthAccessor = this.getAccessorAtAxis('strokeWidth');
+            const strokeColorAccessor = this.getStringAccessorAtAxis('strokeColor');
+            const sizeAccessor = this.getAccessorAtAxis('size');
+            const dataSpanAccessor = this.getAccessorAtAxis('dataSpan');
+            const sizeOfVisibleData = visibleData.length > 0 ?
+                isVert
+                    ? rect.y(visibleData[0]) - rect.y(visibleData[visibleData.length - 1])
+                    : rect.x(visibleData[visibleData.length - 1]) - rect.x(visibleData[0])
+                : 1;
+            const defaultBarSize = (_q = (_p = this.style) === null || _p === void 0 ? void 0 : _p.barSize) !== null && _q !== void 0 ? _q : Math.round((sizeOfVisibleData - visibleData.length) / visibleData.length);
+            const defaultFill = style.fill !== undefined ? style.fill : '#EDEDED';
+            const defaultStrokeWidth = style.strokeWidth !== undefined ? style.strokeWidth : 0;
+            const defaultStrokeColor = style.strokeColor !== undefined ? style.strokeColor : '#FFF';
+            ctx.fillStyle = defaultFill;
+            ctx.strokeStyle = defaultStrokeColor;
+            ctx.lineWidth = defaultStrokeWidth;
+            ctx.beginPath();
             visibleData.forEach((row, i) => {
+                var _a, _b;
+                const s = (_a = sizeAccessor === null || sizeAccessor === void 0 ? void 0 : sizeAccessor.apply) === null || _a === void 0 ? void 0 : _a.call(sizeAccessor, this, [row]);
+                const ds = s === undefined && dataSpanAccessor !== undefined
+                    ? (_b = dataSpanAccessor === null || dataSpanAccessor === void 0 ? void 0 : dataSpanAccessor.apply) === null || _b === void 0 ? void 0 : _b.call(dataSpanAccessor, this, [row])
+                    : undefined;
+                const dataSpanLength = ds !== undefined
+                    ? isVert
+                        ? yDataSpan / +ds
+                        : xDataSpan / +ds
+                    : undefined;
+                const dataSize = dataSpanLength !== undefined
+                    ? Math.round(((isVert ? height : width) - dataSpanLength) / dataSpanLength)
+                    : undefined;
+                const sizeWithoutSpace = s !== undefined && s !== null
+                    ? +s
+                    : dataSize !== undefined
+                        ? dataSize
+                        : defaultBarSize;
+                const size = Math.max(1, sizeWithoutSpace - sizeWithoutSpace * (barSpacePercent / 100));
+                if (colorAccessor !== undefined) {
+                    const color = colorAccessor.apply(this, [row]);
+                    if (color !== undefined && color !== null) {
+                        ctx.fillStyle = color.toString();
+                    }
+                    else if (ctx.fillStyle !== defaultFill) {
+                        ctx.fillStyle = defaultFill;
+                    }
+                }
+                if (strokeColorAccessor !== undefined) {
+                    const sc = strokeColorAccessor.apply(this, [row]);
+                    if (sc !== undefined && sc !== null) {
+                        ctx.strokeStyle = sc.toString();
+                    }
+                    else if (ctx.strokeStyle !== defaultStrokeColor) {
+                        ctx.strokeStyle = defaultStrokeColor;
+                    }
+                }
+                if (strokeWidthAccessor !== undefined) {
+                    const sw = strokeWidthAccessor.apply(this, [row]);
+                    if (sw !== undefined && sw !== null) {
+                        ctx.lineWidth = +sw;
+                    }
+                    else if (ctx.lineWidth !== defaultStrokeWidth) {
+                        ctx.lineWidth = defaultStrokeWidth;
+                    }
+                }
                 if (isVert) {
                     const xVal = rect.x0(row);
                     if (isDefined(row) && xVal !== undefined && xVal !== null) {
                         const xW = Math.abs(rect.x1(row) - xVal);
                         const yVal = rect.y(row);
-                        const yH = defaultSize;
-                        ctx.rect(xVal, yVal, xW, yH);
+                        const yH = size;
+                        ctx.fillRect(xVal, yVal, xW, yH);
+                        ctx.strokeRect(xVal, yVal, xW, yH);
+                        //ctx.rect(xVal, yVal, xW, yH)
                     }
                 }
                 else {
@@ -4254,30 +4351,21 @@ class AxiomBar extends AxiomPlotRoot {
                     const y1 = rect.y1(row);
                     if (isDefined(row) && y0 !== undefined && y1 !== undefined) {
                         // make sure bar doesn't go outside of chart area
-                        const xVal = rect.x(row) - defaultSize / 2;
+                        const xVal = rect.x(row) - size / 2;
                         // add per feature style option
                         // ctx.fillStyle = i % 2 === 0 ? '#FF0000' : '#006699'
-                        if (colorAccessor !== undefined) {
-                            const color = colorAccessor(row);
-                            if (color !== undefined && color !== null) {
-                                ctx.fillStyle = color.toString();
-                                hadFillColor = true;
-                            }
-                            else if (hadFillColor) {
-                                ctx.fillStyle = defaultColor;
-                                hadFillColor = false;
-                            }
-                        }
-                        ctx.fillRect(xVal, y0, defaultSize, y1 - y0);
+                        ctx.fillRect(xVal, y0, size, y1 - y0);
+                        ctx.strokeRect(xVal, y0, size, y1 - y0);
                     }
                 }
                 // ctx.rect(rect.x0(row),row.y0(row),)
             });
             ctx.fill();
-            if (((_o = this.axes) === null || _o === void 0 ? void 0 : _o.y) !== undefined && !((_p = this.legendSettings.hide) !== null && _p !== void 0 ? _p : false)) {
+            ctx.stroke();
+            if (((_r = this.axes) === null || _r === void 0 ? void 0 : _r.y) !== undefined && !((_s = this.legendSettings.hide) !== null && _s !== void 0 ? _s : false)) {
                 _super.onLegendReady.call(this, [{
                         id: this.axes.y.key,
-                        label: (_q = chart.getAxisLabel(this.axes.y, 'y')) !== null && _q !== void 0 ? _q : this.axes.y.key,
+                        label: (_t = chart.getAxisLabel(this.axes.y, 'y')) !== null && _t !== void 0 ? _t : this.axes.y.key,
                         style: { backgroundColor: ctx.fillStyle }
                     }]);
             }