@axdspub/axiom-charts 0.0.49 → 0.0.51

package/craco.config.js

@@ -1,18 +1,16 @@
 const path = require('path')
+
 // someday, clean up the the FOUR! repeated declarations of aliases (others are is in tsconfig.paths.json => tsconfig.json and .storybook/main.ts)
 // https://stackoverflow.com/a/71892901
-console.log(path.resolve(__dirname, './src/'))
 
 module.exports = {
   webpack: {
     eslint: {
       enable: false
     },
-    typescript: {
-      enableTypeChecking: true
-    },
     alias: {
-      '@': path.resolve(__dirname, './src/')
+      '@': path.resolve(__dirname, './src/'),
+      '@WebCOOS': path.resolve(__dirname, 'src/Root/Images/WebCOOS/')
     },
     configure: {
       ignoreWarnings: [/Failed to parse source map/],
@@ -23,6 +21,10 @@ module.exports = {
           path: false,
           zlib: false
         }
+      },
+      module: {
+        // this silences a warning (Critical dependency: require function is used in a way in which dependencies cannot be statically extracted) that comes up with the cesium build included with @axdspubs/axiom-maps
+        unknownContextCritical: false
       }
     }
   },

package/library/Libraries/axiom/index.js

@@ -3,7 +3,7 @@ import { extent, sum } from 'd3-array';
 import { groupBy, debounce } from 'lodash';
 import { create } from 'd3-selection';
 import * as d3 from 'd3';
-import { bisector } from 'd3';
+import { curveStep, curveCardinal, curveCatmullRom, curveMonotoneX, curveNatural, bisector } from 'd3';
 import { scaleUtc, scaleLinear, scaleRadial } from 'd3-scale';
 import { axisLeft, axisBottom } from 'd3-axis';
 import { line, area, lineRadial, curveLinearClosed, pointRadial, areaRadial } from 'd3-shape';
@@ -54,6 +54,7 @@ var EPlotTypes;
     EPlotTypes["scatter"] = "scatter";
     EPlotTypes["box"] = "box";
     EPlotTypes["bar"] = "bar";
+    EPlotTypes["time_series_bar"] = "time_series_bar";
     EPlotTypes["stacked"] = "stacked";
     EPlotTypes["anomaly"] = "anomaly";
     EPlotTypes["curtain"] = "curtain";
@@ -84,9 +85,24 @@ class PlotRoot extends RequestItem {
         this.onDataLoad = props.onDataLoad;
         this.axisSettings = props.axisSettings;
         this.scrubSettings = Object.assign(Object.assign({}, this.scrubSettingsDefaults), props.scrubSettings);
+        this.interpolate = props.interpolate;
         this.legendSettings = Object.assign(Object.assign({}, this.legendSettingsDefaults), props.legendSettings);
         this.runtime = {};
     }
+    createAccessorGroupingsAtAxis(accessors, axis) {
+        const axisSetting = this.getAxisSetting(axis);
+        const accessProperties = axisSetting.accessProperties !== undefined ? axisSetting.accessProperties : {};
+        const accessorKeys = Object.keys(accessors).filter(k => k.startsWith(axis));
+        const accessorMap = Object.fromEntries(accessorKeys.map(k => [k, accessors[k]]));
+        Object.keys(accessProperties).forEach(k => {
+            const accessorKey = accessProperties[k];
+            const accFn = accessors[accessorKey];
+            if (accFn !== undefined) {
+                accessorMap[k] = accFn;
+            }
+        });
+        return accessorMap;
+    }
     getAxisSetting(axis) {
         if (this.axisSettings === undefined) {
             return {};
@@ -97,7 +113,7 @@ class PlotRoot extends RequestItem {
         }
         return axisSetting;
     }
-    getDomainAccessor(axis) {
+    getDomainAccessorAtAxis(axis) {
         var _a, _b, _c, _d, _e, _f;
         const domainAccessors = ((_c = (_b = (_a = this.runtime) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.parsed) === null || _c === void 0 ? void 0 : _c.domainAccessors) !== undefined ? this.runtime.data.parsed.domainAccessors : {};
         const accessors = ((_f = (_e = (_d = this.runtime) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.parsed) === null || _f === void 0 ? void 0 : _f.accessors) !== undefined ? this.runtime.data.parsed.accessors : {};
@@ -111,24 +127,25 @@ class PlotRoot extends RequestItem {
             return (typeof d === 'number' || d instanceof Date || typeof d === 'string') ? d : d[axis];
         };
     }
+    getAvailableDomainAccessors() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return ((_c = (_b = (_a = this.runtime) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.parsed) === null || _c === void 0 ? void 0 : _c.domainAccessors) !== undefined
+            ? this.runtime.data.parsed.domainAccessors
+            : ((_f = (_e = (_d = this.runtime) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.parsed) === null || _f === void 0 ? void 0 : _f.accessors) !== undefined
+                ? (_j = (_h = (_g = this.runtime) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.parsed) === null || _j === void 0 ? void 0 : _j.accessors
+                : {};
+    }
+    getDomainAccessorsAtAxis(axis) {
+        const accessors = this.getAvailableDomainAccessors();
+        return this.createAccessorGroupingsAtAxis(accessors, axis);
+    }
     getAvailableAccessors() {
         var _a, _b, _c;
         return ((_c = (_b = (_a = this.runtime) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.parsed) === null || _c === void 0 ? void 0 : _c.accessors) !== undefined ? this.runtime.data.parsed.accessors : {};
     }
     getAccessorsAtAxis(axis) {
         const accessors = this.getAvailableAccessors();
-        const axisSetting = this.getAxisSetting(axis);
-        const accessProperties = axisSetting.accessProperties !== undefined ? axisSetting.accessProperties : {};
-        const accessorKeys = Object.keys(accessors).filter(k => k.startsWith(axis));
-        const accessorMap = Object.fromEntries(accessorKeys.map(k => [k, accessors[k]]));
-        Object.keys(accessProperties).forEach(k => {
-            const accessorKey = accessProperties[k];
-            const accFn = accessors[accessorKey];
-            if (accFn !== undefined) {
-                accessorMap[k] = accFn;
-            }
-        });
-        return accessorMap;
+        return this.createAccessorGroupingsAtAxis(accessors, axis);
     }
     getAccessorAtAxis(axis) {
         const axisAccessors = this.getAccessorsAtAxis(axis);
@@ -147,7 +164,7 @@ class PlotRoot extends RequestItem {
         return __awaiter(this, void 0, void 0, function* () {
             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) !== undefined ? data.parsed.data : [];
-            const accessor = this.getDomainAccessor(axis);
+            const accessor = this.getDomainAccessorAtAxis(axis);
             const values = parsedData
                 .map((d) => {
                 return accessor(d);
@@ -252,7 +269,12 @@ class ChartRoot {
     onDraw() {
     }
     getDomainForPlotImplementations(plotImplementations, axis) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
+            const overrides = (_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.axes) === null || _b === void 0 ? void 0 : _b[String(axis)];
+            if ((overrides === null || overrides === void 0 ? void 0 : overrides.domain) !== undefined) {
+                return overrides.domain;
+            }
             const domains = yield Promise.all(plotImplementations.map((p) => __awaiter(this, void 0, void 0, function* () {
                 const domain = yield p.getDomain(axis);
                 return domain;
@@ -310,8 +332,11 @@ class ChartRoot {
         const yAxesWidth = this.getYAxesWidth();
         return this.getWidth() - yAxesWidth - this.settings.margin.right;
     }
+    getXAxesGroups() {
+        return this.plotImplementations !== undefined ? this.getPlotImplementationGroups(this.plotImplementations, 'x') : {};
+    }
     getChartHeight() {
-        const xGroups = this.plotImplementations !== undefined ? this.getPlotImplementationGroups(this.plotImplementations, 'x') : {};
+        const xGroups = this.getXAxesGroups();
         const xGroupCount = Object.keys(xGroups).length;
         return this.settings.height - this.settings.margin.top - (this.settings.margin.bottom * xGroupCount);
     }
@@ -347,7 +372,7 @@ class ChartRoot {
               })
             })) */
             const { margin } = this.settings;
-            const xGroups = this.getPlotImplementationGroups(this.plotImplementations, 'x');
+            const xGroups = this.getXAxesGroups();
             const chartHeight = this.getChartHeight();
             const yGroups = this.getPlotImplementationGroups(this.plotImplementations, 'y');
             const yAxes = [];
@@ -482,16 +507,6 @@ class AxiomLine extends AxiomPlotRoot {
             super.onScrubEnd();
         };
     }
-    getDomainAccessor(axis) {
-        var _a, _b, _c;
-        const accessors = ((_c = (_b = (_a = this.runtime) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.parsed) === null || _c === void 0 ? void 0 : _c.accessors) !== undefined ? this.runtime.data.parsed.accessors : {};
-        if (accessors[axis] !== undefined) {
-            return accessors[axis];
-        }
-        return (d) => {
-            return (typeof d === 'number' || d instanceof Date || typeof d === 'string') ? d : d[axis];
-        };
-    }
     draw() {
         const _super = Object.create(null, {
             onLegendReady: { get: () => super.onLegendReady }
@@ -534,7 +549,7 @@ class AxiomLine extends AxiomPlotRoot {
                     return 0;
                 const v = yAccessor(d);
                 const p = this.yScale(v);
-                return p === undefined ? 0 : (p + this.offset.y);
+                return p === undefined ? 0 : (p /* + this.offset.y */);
             };
             const isDefined = (d) => {
                 const v = yAccessor(d);
@@ -548,6 +563,21 @@ class AxiomLine extends AxiomPlotRoot {
                 .x(xPosition)
                 .y(yPosition)
                 .defined(isDefined);
+            if (this.interpolate === 'step') {
+                line$1.curve(curveStep);
+            }
+            else if (this.interpolate === 'cardinal') {
+                line$1.curve(curveCardinal);
+            }
+            else if (this.interpolate === 'catmullRom') {
+                line$1.curve(curveCatmullRom);
+            }
+            else if (this.interpolate === 'monotone') {
+                line$1.curve(curveMonotoneX);
+            }
+            else if (this.interpolate === 'natural') {
+                line$1.curve(curveNatural);
+            }
             line$1.context(ctx);
             ctx.beginPath();
             if ((style === null || style === void 0 ? void 0 : style.strokeDash) !== undefined) {
@@ -608,12 +638,12 @@ class AxiomLine extends AxiomPlotRoot {
 
 class AxiomArea extends AxiomPlotRoot {
     getMaxAccessorAtAxis(axis) {
-        const axisAccessors = this.getAccessorsAtAxis(axis);
+        const axisAccessors = this.getDomainAccessorsAtAxis(axis);
         const maxAccessor = axisAccessors[`${axis}1`];
         return maxAccessor;
     }
     getMinAccessorAtAxis(axis) {
-        const axisAccessors = this.getAccessorsAtAxis(axis);
+        const axisAccessors = this.getDomainAccessorsAtAxis(axis);
         const minAccessor = axisAccessors[`${axis}0`];
         return minAccessor;
     }
@@ -697,12 +727,27 @@ class AxiomArea extends AxiomPlotRoot {
                 area$1.x(makePositionFn(xAccessor, xScale, offset.x));
             }
             if (y0Accessor !== undefined && y1Accessor !== undefined) {
-                area$1.y0(makePositionFn(y0Accessor, yScale, offset.y));
-                area$1.y1(makePositionFn(y1Accessor, yScale, offset.y));
+                area$1.y0(makePositionFn(y0Accessor, yScale, 0.01));
+                area$1.y1(makePositionFn(y1Accessor, yScale, 0.01));
                 area$1.defined(makeDefinedFn(y1Accessor));
             }
             else if (yAccessor !== undefined) {
-                area$1.y(makePositionFn(yAccessor, yScale, offset.y));
+                area$1.y(makePositionFn(yAccessor, yScale, 0.01));
+            }
+            if (this.interpolate === 'step') {
+                area$1.curve(curveStep);
+            }
+            else if (this.interpolate === 'cardinal') {
+                area$1.curve(curveCardinal);
+            }
+            else if (this.interpolate === 'catmullRom') {
+                area$1.curve(curveCatmullRom);
+            }
+            else if (this.interpolate === 'monotone') {
+                area$1.curve(curveMonotoneX);
+            }
+            else if (this.interpolate === 'natural') {
+                area$1.curve(curveNatural);
             }
             area$1.context(ctx);
             ctx.beginPath();
@@ -749,16 +794,6 @@ class AxiomScatter extends AxiomPlotRoot {
             super.onScrubEnd();
         };
     }
-    getDomainAccessor(axis) {
-        var _a, _b, _c;
-        const accessors = ((_c = (_b = (_a = this.runtime) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.parsed) === null || _c === void 0 ? void 0 : _c.accessors) !== undefined ? this.runtime.data.parsed.accessors : {};
-        if (accessors[axis] !== undefined) {
-            return accessors[axis];
-        }
-        return (d) => {
-            return (typeof d === 'number' || d instanceof Date || typeof d === 'string') ? d : d[axis];
-        };
-    }
     draw() {
         const _super = Object.create(null, {
             onLegendReady: { get: () => super.onLegendReady }
@@ -798,7 +833,7 @@ class AxiomScatter extends AxiomPlotRoot {
                     return 0;
                 const v = yAccessor(d);
                 const p = this.yScale(v);
-                return p === undefined ? 0 : (p + this.offset.y);
+                return p === undefined ? 0 : (p /* + this.offset.y */);
             };
             const isDefined = (d) => {
                 const v = yAccessor(d);
@@ -851,7 +886,7 @@ class AxiomScatter extends AxiomPlotRoot {
     }
 }
 
-class AxiomBar extends AxiomPlotRoot {
+let AxiomBar$1 = class AxiomBar extends AxiomPlotRoot {
     constructor(props) {
         super(props);
         this.legendHeight = 12;
@@ -1049,13 +1084,152 @@ class AxiomBar extends AxiomPlotRoot {
         }
         return subgroupScales;
     }
+};
+
+class AxiomBar extends AxiomPlotRoot {
+    getMaxAccessorAtAxis(axis) {
+        const axisAccessors = this.getDomainAccessorsAtAxis(axis);
+        const maxAccessor = axisAccessors[`${axis}1`];
+        return maxAccessor;
+    }
+    getMinAccessorAtAxis(axis) {
+        const axisAccessors = this.getDomainAccessorsAtAxis(axis);
+        const minAccessor = axisAccessors[`${axis}0`];
+        return minAccessor;
+    }
+    getDomainAccessor(axis) {
+        const minAccessor = this.getMinAccessorAtAxis(axis);
+        const maxAccessor = this.getMaxAccessorAtAxis(axis);
+        if (minAccessor !== undefined && maxAccessor !== undefined) {
+            return (d) => {
+                return [
+                    minAccessor(d),
+                    maxAccessor(d)
+                ];
+            };
+        }
+        const accessor = this.getAccessorAtAxis(axis);
+        if (accessor !== undefined) {
+            return accessor;
+        }
+        return (d) => {
+            return (d instanceof Date || d === null || typeof d === 'number' || typeof d === 'string') ? d : sum(Object.values(d));
+        };
+    }
+    draw() {
+        const _super = Object.create(null, {
+            onLegendReady: { get: () => super.onLegendReady }
+        });
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return __awaiter(this, void 0, void 0, function* () {
+            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;
+            const xAccessors = this.getAccessorsAtAxis('x');
+            const xAccessor = this.getAccessorAtAxis('x');
+            const x0Accessor = xAccessors.x0;
+            const x1Accessor = xAccessors.x1;
+            const yAccessors = this.getAccessorsAtAxis('y');
+            const yAccessor = this.getAccessorAtAxis('y');
+            const y0Accessor = yAccessors.y0;
+            const y1Accessor = yAccessors.y1;
+            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
+            };
+            const chart = this.chart;
+            const ctx = chart.getCanvasContext();
+            if (ctx === null) {
+                return undefined;
+            }
+            const xAxisScale = (_j = (_h = this === null || this === void 0 ? void 0 : this.axes) === null || _h === void 0 ? void 0 : _h.x) === null || _j === void 0 ? void 0 : _j.scale;
+            const yAxisScale = (_l = (_k = this === null || this === void 0 ? void 0 : this.axes) === null || _k === void 0 ? void 0 : _k.y) === null || _l === void 0 ? void 0 : _l.scale;
+            if (xAxisScale === undefined ||
+                yAxisScale === undefined ||
+                parsedData === undefined ||
+                (xAccessor === undefined && x0Accessor === undefined && x1Accessor === undefined) ||
+                (yAccessor === undefined && y0Accessor === undefined && y1Accessor === undefined)) {
+                console.log('Missing one of: xAxisScale, yAxisScale, parsedData, xAccessor(s), yAccessor(s)');
+                return undefined;
+            }
+            const xScale = chart.getD3XScale(xAxisScale);
+            const yScale = chart.getD3YScale(yAxisScale);
+            const makePositionFn = (acc, d3Scale, offset) => {
+                return (d) => {
+                    const v = acc(d);
+                    const p = d3Scale(v);
+                    return p === undefined ? 0 : (p + offset);
+                };
+            };
+            ctx.fillStyle = style.fill !== undefined ? style.fill : '#EDEDED';
+            const rect = {};
+            if (x0Accessor !== undefined && x1Accessor !== undefined) {
+                rect.x0 = makePositionFn(x0Accessor, xScale, offset.x);
+                rect.x1 = makePositionFn(x1Accessor, xScale, offset.x);
+            }
+            else if (xAccessor !== undefined) {
+                rect.x = makePositionFn(xAccessor, xScale, offset.x);
+            }
+            if (y0Accessor !== undefined && y1Accessor !== undefined) {
+                rect.y0 = makePositionFn(y0Accessor, yScale, 0.01);
+                rect.y1 = makePositionFn(y1Accessor, yScale, 0.01);
+            }
+            else if (yAccessor !== undefined) {
+                rect.y = makePositionFn(yAccessor, yScale, 0.01);
+            }
+            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]);
+            // const barSpace = 2
+            const barSpacePercent = 20;
+            const visibleData = parsedData.filter(row => {
+                return isVert
+                    ? +rect.y(row) >= yAxisScale.range[0] && +rect.y(row) <= yAxisScale.range[1]
+                    : +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));
+            visibleData.forEach((row, i) => {
+                if (isVert) {
+                    const xVal = rect.x0(row);
+                    if (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);
+                    }
+                }
+                else {
+                    const y0 = rect.y0(row);
+                    const y1 = rect.y1(row);
+                    if (y0 !== undefined && y0 !== null && y1 !== undefined && y1 !== null) {
+                        const xVal = rect.x(row) - defaultSize / 2;
+                        // add per feature style option
+                        // ctx.fillStyle = i % 2 === 0 ? '#FF0000' : '#006699'
+                        ctx.fillRect(xVal, y0, defaultSize, y1 - y0);
+                    }
+                }
+                // ctx.rect(rect.x0(row),row.y0(row),)
+            });
+            ctx.fill();
+            if (((_m = this.axes) === null || _m === void 0 ? void 0 : _m.y) !== undefined && !((_o = this.legendSettings.hide) !== null && _o !== void 0 ? _o : false)) {
+                _super.onLegendReady.call(this, [{
+                        id: this.axes.y.key,
+                        label: (_p = chart.getAxisLabel(this.axes.y, 'y')) !== null && _p !== void 0 ? _p : this.axes.y.key,
+                        style: { backgroundColor: ctx.fillStyle }
+                    }]);
+            }
+        });
+    }
 }
 
 const chartTypes = {
     Line: AxiomLine,
     Area: AxiomArea,
     Scatter: AxiomScatter,
-    Bar: AxiomBar
+    Bar: AxiomBar,
+    CategoricalBar: AxiomBar$1
 };
 
 function styleInject(css, ref) {
@@ -1180,7 +1354,12 @@ class AxiomChart extends ChartRoot {
             if ((axis === null || axis === void 0 ? void 0 : axis.scale) !== undefined) {
                 const axisG = this.getYAxis(axis, axisSettings, index);
                 const axisSelection = svg.select('.y-axis').size() > 0 ? svg.select('.y-axis') : svg.append('g').attr('class', 'y-axis axis');
-                axisSelection.append('g').call(axisG);
+                const newAxis = axisSelection.append('g').call(axisG);
+                const allPlotsUseSameYAxis = axis.plots.length === this.plots.length;
+                if (!allPlotsUseSameYAxis) {
+                    const plotColor = this.getAxisColor(axis);
+                    newAxis.attr('stroke', plotColor);
+                }
             }
         });
         if (this.settings.layout === 'timeseries') {
@@ -1219,7 +1398,7 @@ class AxiomChart extends ChartRoot {
         });
     }
     getXAxisOffset(axis) {
-        return Object.assign({ x: this.settings.margin.left, y: this.settings.height - this.settings.margin.bottom }, axis.offset);
+        return Object.assign({ x: this.settings.margin.left, y: this.settings.height + this.settings.margin.top }, axis.offset);
     }
     getyAxisOffset(axis) {
         return Object.assign({ x: this.settings.margin.left, y: this.settings.margin.top }, axis.offset);
@@ -1236,13 +1415,19 @@ class AxiomChart extends ChartRoot {
                 const axisSettings = this.settings.axes === undefined ? {} : (_a = this.settings.axes[axis.key]) !== null && _a !== void 0 ? _a : {};
                 const axisG = this.getXAxis(axis, axisSettings);
                 const axisSelection = svg.select('.x-axis').size() > 0 ? svg.select('.x-axis') : svg.append('g').attr('class', 'x-axis axis');
-                axisSelection.append('g').call(axisG);
+                const newAxis = axisSelection.append('g').call(axisG);
+                const allPlotsUseSameYAxis = axis.plots.length === this.plots.length;
+                if (!allPlotsUseSameYAxis) {
+                    const plotColor = this.getAxisColor(axis);
+                    newAxis.attr('stroke', plotColor);
+                }
             }
         });
     }
     getCanvasContext() {
-        if (this.chartElements !== undefined) {
-            const { canvas } = this.chartElements;
+        const chartElements = this.getChartElements();
+        if (chartElements !== undefined) {
+            const { canvas } = chartElements;
             const node = canvas.node();
             if (node !== undefined && node !== null) {
                 return node.getContext('2d');
@@ -1417,6 +1602,18 @@ class AxiomChart extends ChartRoot {
         var _a;
         return (_a = style === null || style === void 0 ? void 0 : style.strokeColor) !== null && _a !== void 0 ? _a : '#333';
     }
+    getAxisColor(axis) {
+        var _a, _b;
+        let plot = axis.plots.find(plot => { var _a; return ((_a = plot.style) === null || _a === void 0 ? void 0 : _a.fill) !== undefined; });
+        if (plot !== undefined) {
+            return (_a = plot.style) === null || _a === void 0 ? void 0 : _a.fill;
+        }
+        plot = axis.plots.find(plot => { var _a; return ((_a = plot.style) === null || _a === void 0 ? void 0 : _a.strokeColor) !== undefined; });
+        if (plot !== undefined) {
+            return (_b = plot.style) === null || _b === void 0 ? void 0 : _b.strokeColor;
+        }
+        return '#000';
+    }
     getPlotStrokeWidth(style) {
         var _a;
         return (_a = style === null || style === void 0 ? void 0 : style.strokeWidth) !== null && _a !== void 0 ? _a : 1;