@neo4j-ndl/react 2.16.26 → 3.0.0-alpha-4904fb7

package/lib/cjs/charts/Axis.js

@@ -0,0 +1,216 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YAxis = exports.XAxis = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const usehooks_ts_1 = require("usehooks-ts");
+const typography_1 = require("../typography");
+const Chart_1 = require("./Chart");
+const d3 = __importStar(require("d3"));
+exports.XAxis = (0, react_1.forwardRef)(function XAxis({ position, 
+//numberOfTicks = 8,
+title, labelFormat: labelFormatProp, scale: scaleId, }, ref) {
+    var _a, _b, _c, _d, _e, _f;
+    const classes = (0, react_1.useMemo)(() => (0, classnames_1.default)('ndl-charts-chart-axis', 'ndl-charts-chart-axis-x', {
+        'ndl-charts-chart-axis-top': position === 'top',
+        'ndl-charts-chart-axis-bottom': position === 'bottom',
+    }), [position]);
+    const svgRef = (0, react_1.useRef)(null);
+    const chartsChartContextValue = (0, react_1.useContext)(Chart_1.ChartsChartContext);
+    const xAxisRef = (0, react_1.useRef)(null);
+    const [largestTextWidth, setLargestTextWidth] = (0, react_1.useState)(50);
+    const scale = (_a = chartsChartContextValue === null || chartsChartContextValue === void 0 ? void 0 : chartsChartContextValue.scales) === null || _a === void 0 ? void 0 : _a[scaleId];
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        // console.info('Axis.tsx - useImperativeHandle');
+        const svgChart = containerRef.current;
+        if (!svgChart) {
+            return null;
+        }
+        return svgChart;
+    });
+    (0, usehooks_ts_1.useResizeObserver)({
+        ref: containerRef,
+        onResize: () => {
+            // Delay by 0ms to ensure all rendering is complete
+            setTimeout(() => {
+                var _a;
+                const childNodes = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('text');
+                if (!childNodes) {
+                    return;
+                }
+                const textWidths = Array.from(childNodes).map((node) => {
+                    if (node instanceof SVGTextElement) {
+                        return node.getBoundingClientRect().width;
+                    }
+                    return 0;
+                });
+                setLargestTextWidth(Math.max(...textWidths));
+            }, 0);
+        },
+    });
+    const xScale = scale === null || scale === void 0 ? void 0 : scale.functionWithContentWidthAsRange;
+    /* @ts-expect-error we don't have the correct type for the tick values */
+    const labelFormat = (0, react_1.useMemo)(() => {
+        if (labelFormatProp) {
+            return labelFormatProp;
+        }
+        if (xScale === undefined) {
+            return (dataPoint) => dataPoint.toString();
+        }
+        return xScale.tickFormat();
+    }, [labelFormatProp, xScale]);
+    (0, react_1.useEffect)(() => {
+        const AxisRefCurrent = xAxisRef.current;
+        if (AxisRefCurrent === null || xScale === undefined) {
+            return;
+        }
+        const xAxis = d3
+            .axisBottom(xScale)
+            .tickValues([xScale.domain()[0], ...xScale.ticks(), xScale.domain()[1]]); // Ensure the start and end ticks
+        xAxis.tickPadding(8);
+        d3.select(AxisRefCurrent).call(xAxis);
+        return () => {
+            d3.select(AxisRefCurrent).selectAll('*').remove();
+        };
+    }, [xScale]);
+    //const ticks = d3.ticks(xScale?.range()[0], xScale?.range()[1], 5);
+    const pixelsPerTick = largestTextWidth;
+    const pixelsAvailable = (_c = (_b = chartsChartContextValue.contentSize) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
+    const tickCount = Math.floor(pixelsAvailable / pixelsPerTick); // Adjust the number of ticks based on width (example logic)
+    const ticks = (_d = xScale === null || xScale === void 0 ? void 0 : xScale.ticks(Math.floor(tickCount))) !== null && _d !== void 0 ? _d : [];
+    if (xScale === undefined) {
+        return null;
+    }
+    const domainStrokeWidth = 2;
+    const tickLength = domainStrokeWidth + 8;
+    const marginBetweenTickAndLabel = tickLength + 8;
+    const height = '2';
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: classes, children: [position === 'top' && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-charts-chart-axis-title", variant: "body-medium", children: title })), (0, jsx_runtime_1.jsx)("svg", { ref: svgRef, children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, x2: (_f = (_e = chartsChartContextValue.contentSize) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : 0, y1: height, y2: height, className: "domain" }), ticks.map((tick, index) => {
+                            const x = xScale(tick);
+                            return ((0, jsx_runtime_1.jsxs)("g", { className: "tick", transform: `translate(${x} 0)`, children: [(0, jsx_runtime_1.jsx)("text", { y: position === 'bottom' ? marginBetweenTickAndLabel : 0, textAnchor: "middle", fill: "currentColor", children: labelFormat(tick) }), (0, jsx_runtime_1.jsx)("line", { y1: position === 'bottom'
+                                            ? 0
+                                            : marginBetweenTickAndLabel + tickLength, y2: position === 'bottom'
+                                            ? tickLength
+                                            : marginBetweenTickAndLabel, stroke: "currentColor" })] }, index));
+                        })] }) }), position === 'bottom' && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-charts-chart-axis-title", variant: "body-medium", children: title }))] }));
+});
+exports.YAxis = (0, react_1.forwardRef)(function YAxis({ position, title, labelFormat: labelFormatProp, scale: scaleId }, ref) {
+    var _a, _b, _c, _d;
+    const [offsetHeight, setOffsetHeight] = (0, react_1.useState)(0);
+    const [largestTextWidth, setLargestTextWidth] = (0, react_1.useState)(0);
+    const chartsChartContextValue = (0, react_1.useContext)(Chart_1.ChartsChartContext);
+    const scale = (_a = chartsChartContextValue === null || chartsChartContextValue === void 0 ? void 0 : chartsChartContextValue.scales) === null || _a === void 0 ? void 0 : _a[scaleId];
+    const svgRef = (0, react_1.useRef)(null);
+    const classes = (0, react_1.useMemo)(() => (0, classnames_1.default)('ndl-charts-chart-axis', 'ndl-charts-chart-axis-y', {
+        'ndl-charts-chart-axis-left': position === 'left',
+        'ndl-charts-chart-axis-right': position === 'right',
+    }), [position]);
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        // console.info('Axis.tsx - useImperativeHandle');
+        const svgChart = containerRef.current;
+        if (!svgChart) {
+            return null;
+        }
+        return svgChart;
+    });
+    (0, usehooks_ts_1.useResizeObserver)({
+        ref: containerRef,
+        onResize: () => {
+            var _a, _b;
+            setOffsetHeight((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
+            if (svgRef.current === null) {
+                return;
+            }
+            // Delay by 0ms to ensure all rendering is complete
+            setTimeout(() => {
+                var _a;
+                const childNodes = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.childNodes;
+                if (!childNodes) {
+                    return;
+                }
+                const textWidths = Array.from(childNodes).map((node) => {
+                    if (node instanceof SVGTextElement) {
+                        return node.getBoundingClientRect().width;
+                    }
+                    return 0;
+                });
+                setLargestTextWidth(Math.max(...textWidths));
+            }, 0);
+        },
+    });
+    //const yScale = scale?.function.copy().range(range);
+    const yScale = scale === null || scale === void 0 ? void 0 : scale.functionWithContentHeightAsRange;
+    //@ts-expect-error - this is a hack to get the yScale to work
+    const labelFormat = (0, react_1.useMemo)(() => {
+        var _a;
+        if (labelFormatProp) {
+            return labelFormatProp;
+        }
+        return (_a = yScale === null || yScale === void 0 ? void 0 : yScale.tickFormat()) !== null && _a !== void 0 ? _a : (() => '');
+    }, [labelFormatProp, yScale]);
+    //TODO: make this dynamic
+    const pixelsPerTick = 20;
+    const pixelsAvailable = (_c = (_b = chartsChartContextValue.contentSize) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 0;
+    const ticks = (_d = yScale === null || yScale === void 0 ? void 0 : yScale.ticks(Math.floor(pixelsAvailable / pixelsPerTick))) !== null && _d !== void 0 ? _d : [];
+    if (yScale === undefined) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: classes, style: { paddingLeft: '8px', paddingRight: '8px' }, children: [position === 'left' && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-charts-chart-axis-title", variant: "body-medium", children: title })), (0, jsx_runtime_1.jsx)("svg", { style: {
+                    position: 'relative',
+                    height: offsetHeight,
+                    width: largestTextWidth,
+                }, ref: svgRef, children: ticks.map((tick) => {
+                    const y = yScale(tick);
+                    return ((0, jsx_runtime_1.jsx)("text", { className: "tick", textAnchor: position === 'left' ? 'end' : 'start', x: position === 'left' ? '100%' : 0, y: y, dy: "0.4em", children: labelFormat(tick) }, labelFormat(tick)));
+                }) }), position === 'right' && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-charts-chart-axis-title", variant: "body-medium", children: title }))] }));
+});
+//# sourceMappingURL=Axis.js.map

package/lib/cjs/charts/Axis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Axis.js","sourceRoot":"","sources":["../../../src/charts/Axis.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iCAQe;AACf,4DAAoC;AACpC,6CAAgD;AAChD,8CAA2C;AAC3C,mCAA6C;AAC7C,uCAAyB;AAkBZ,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAC,SAAS,KAAK,CAC5C,EACE,QAAQ;AACR,oBAAoB;AACpB,KAAK,EACL,WAAW,EAAE,eAAe,EAC5B,KAAK,EAAE,OAAO,GACH,EACb,GAAG;;IAEH,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CACH,IAAA,oBAAU,EAAC,uBAAuB,EAAE,yBAAyB,EAAE;QAC7D,2BAA2B,EAAE,QAAQ,KAAK,KAAK;QAC/C,8BAA8B,EAAE,QAAQ,KAAK,QAAQ;KACtD,CAAC,EACJ,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,MAAM,GAAG,IAAA,cAAM,EAAgB,IAAI,CAAC,CAAC;IAE3C,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,0BAAkB,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,MAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,MAAM,0CAAG,OAAO,CAAC,CAAC;IAEzD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAElD,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,kDAAkD;QAClD,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,IAAA,+BAAiB,EAAC;QAChB,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,GAAG,EAAE;YACb,mDAAmD;YACnD,UAAU,CAAC,GAAG,EAAE;;gBACd,MAAM,UAAU,GAAG,MAAA,MAAM,CAAC,OAAO,0CAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;gBAE5D,IAAI,CAAC,UAAU,EAAE,CAAC;oBAChB,OAAO;gBACT,CAAC;gBAED,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBACrD,IAAI,IAAI,YAAY,cAAc,EAAE,CAAC;wBACnC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAC5C,CAAC;oBACD,OAAO,CAAC,CAAC;gBACX,CAAC,CAAC,CAAC;gBACH,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;KACF,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,+BAA+B,CAAC;IACtD,yEAAyE;IACzE,MAAM,WAAW,GAAmC,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/D,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,eAAe,CAAC;QACzB,CAAC;QACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,CAAC,SAAiB,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;QACrD,CAAC;QAED,OAAO,MAAM,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;QACxC,IAAI,cAAc,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACpD,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,EAAE;aACb,UAAU,CAAC,MAAM,CAAC;aAClB,UAAU,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iCAAiC;QAE7G,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACrB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEtC,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,oEAAoE;IAEpE,MAAM,aAAa,GAAG,gBAAgB,CAAC;IACvC,MAAM,eAAe,GAAG,MAAA,MAAA,uBAAuB,CAAC,WAAW,0CAAE,KAAK,mCAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC,CAAC,CAAC,4DAA4D;IAC3H,MAAM,KAAK,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,mCAAI,EAAE,CAAC;IAEzD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,iBAAiB,GAAG,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG,iBAAiB,GAAG,CAAC,CAAC;IACzC,MAAM,yBAAyB,GAAG,UAAU,GAAG,CAAC,CAAC;IAEjD,MAAM,MAAM,GAAG,GAAG,CAAC;IAEnB,OAAO,CACL,iCAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,aACvC,QAAQ,KAAK,KAAK,IAAI,CACrB,uBAAC,uBAAU,IACT,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAC,aAAa,YAEpB,KAAK,GACK,CACd,EACD,gCAAK,GAAG,EAAE,MAAM,YACd,0CAEE,iCACE,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,MAAA,MAAA,uBAAuB,CAAC,WAAW,0CAAE,KAAK,mCAAI,CAAC,EACnD,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,QAAQ,GAClB,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;4BACzB,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;4BAEvB,OAAO,CACL,+BAAe,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,aAAa,CAAC,KAAK,aAC5D,iCACE,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,EACxD,UAAU,EAAC,QAAQ,EACnB,IAAI,EAAC,cAAc,YAElB,WAAW,CAAC,IAAI,CAAC,GACb,EACP,iCACE,EAAE,EACA,QAAQ,KAAK,QAAQ;4CACnB,CAAC,CAAC,CAAC;4CACH,CAAC,CAAC,yBAAyB,GAAG,UAAU,EAE5C,EAAE,EACA,QAAQ,KAAK,QAAQ;4CACnB,CAAC,CAAC,UAAU;4CACZ,CAAC,CAAC,yBAAyB,EAE/B,MAAM,EAAC,cAAc,GACrB,KApBI,KAAK,CAqBT,CACL,CAAC;wBACJ,CAAC,CAAC,IACA,GACA,EACL,QAAQ,KAAK,QAAQ,IAAI,CACxB,uBAAC,uBAAU,IACT,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAC,aAAa,YAEpB,KAAK,GACK,CACd,IACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAC,SAAS,KAAK,CAC5C,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,EAAE,OAAO,EAAc,EAC7E,GAAG;;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAC5D,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,0BAAkB,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,MAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,MAAM,0CAAG,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,IAAA,cAAM,EAAgB,IAAI,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CACH,IAAA,oBAAU,EAAC,uBAAuB,EAAE,yBAAyB,EAAE;QAC7D,4BAA4B,EAAE,QAAQ,KAAK,MAAM;QACjD,6BAA6B,EAAE,QAAQ,KAAK,OAAO;KACpD,CAAC,EACJ,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAElD,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,kDAAkD;QAClD,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,IAAA,+BAAiB,EAAC;QAChB,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,GAAG,EAAE;;YACb,eAAe,CAAC,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC,CAAC;YACzD,IAAI,MAAM,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;YAED,mDAAmD;YACnD,UAAU,CAAC,GAAG,EAAE;;gBACd,MAAM,UAAU,GAAG,MAAA,MAAM,CAAC,OAAO,0CAAE,UAAU,CAAC;gBAE9C,IAAI,CAAC,UAAU,EAAE,CAAC;oBAChB,OAAO;gBACT,CAAC;gBAED,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBACrD,IAAI,IAAI,YAAY,cAAc,EAAE,CAAC;wBACnC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAC5C,CAAC;oBACD,OAAO,CAAC,CAAC;gBACX,CAAC,CAAC,CAAC;gBACH,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;KACF,CAAC,CAAC;IAEH,qDAAqD;IACrD,MAAM,MAAM,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gCAAgC,CAAC;IAEvD,6DAA6D;IAC7D,MAAM,WAAW,GAAmC,IAAA,eAAO,EAAC,GAAG,EAAE;;QAC/D,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,eAAe,CAAC;QACzB,CAAC;QAED,OAAO,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,mCAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,yBAAyB;IACzB,MAAM,aAAa,GAAG,EAAE,CAAC;IACzB,MAAM,eAAe,GAAG,MAAA,MAAA,uBAAuB,CAAC,WAAW,0CAAE,MAAM,mCAAI,CAAC,CAAC;IAEzE,MAAM,KAAK,GACT,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC,CAAC,mCAAI,EAAE,CAAC;IAEnE,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,iCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,aAEjD,QAAQ,KAAK,MAAM,IAAI,CACtB,uBAAC,uBAAU,IACT,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAC,aAAa,YAEpB,KAAK,GACK,CACd,EACD,gCACE,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,YAAY;oBACpB,KAAK,EAAE,gBAAgB;iBACxB,EACD,GAAG,EAAE,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAClB,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;oBACvB,OAAO,CACL,iCAEE,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EACjD,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EACnC,CAAC,EAAE,CAAC,EACJ,EAAE,EAAC,OAAO,YAET,WAAW,CAAC,IAAI,CAAC,IAPb,WAAW,CAAC,IAAI,CAAC,CAQjB,CACR,CAAC;gBACJ,CAAC,CAAC,GACE,EACL,QAAQ,KAAK,OAAO,IAAI,CACvB,uBAAC,uBAAU,IACT,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAC,aAAa,YAEpB,KAAK,GACK,CACd,IACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/cjs/charts/CartesianGrid.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartesianGrid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Chart_1 = require("./Chart");
+const CartesianGrid = ({ className, htmlAttributes, scaleXAxis: scaleXAxisId, scaleYAxis: scaleYAxisId, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const containerElement = (0, react_1.useRef)(null);
+    const classes = (0, classnames_1.default)('ndl-charts-chart-cartesian-grid', className);
+    const { scales, contentSize } = (0, react_1.useContext)(Chart_1.ChartsChartContext);
+    let scaleXAxis = undefined;
+    let scaleYAxis = undefined;
+    if (scaleXAxisId) {
+        scaleXAxis = (_a = scales === null || scales === void 0 ? void 0 : scales[scaleXAxisId]) === null || _a === void 0 ? void 0 : _a.functionWithContentWidthAsRange;
+    }
+    if (scaleYAxisId) {
+        scaleYAxis = (_b = scales === null || scales === void 0 ? void 0 : scales[scaleYAxisId]) === null || _b === void 0 ? void 0 : _b.functionWithContentHeightAsRange;
+    }
+    //TODO: make this dynamic
+    const pixelsPerYTick = 20;
+    const pixelsYAvailable = (_c = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _c !== void 0 ? _c : 0;
+    const yTicks = (_d = scaleYAxis === null || scaleYAxis === void 0 ? void 0 : scaleYAxis.ticks(Math.floor(pixelsYAvailable / pixelsPerYTick))) !== null && _d !== void 0 ? _d : [];
+    //TODO: make this dynamic
+    const pixelsPerXTick = 30;
+    const pixelsXAvailable = (_e = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) !== null && _e !== void 0 ? _e : 0;
+    const xTicks = (_f = scaleXAxis === null || scaleXAxis === void 0 ? void 0 : scaleXAxis.ticks(Math.floor(pixelsXAvailable / pixelsPerXTick))) !== null && _f !== void 0 ? _f : [];
+    if (!scaleXAxis && !scaleYAxis) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, ref: containerElement }, htmlAttributes, { children: [yTicks.map((tick) => {
+                const y = scaleYAxis === null || scaleYAxis === void 0 ? void 0 : scaleYAxis(tick);
+                return ((0, jsx_runtime_1.jsx)("div", { className: "ndl-charts-chart-cartesian-grid-line", style: {
+                        top: y,
+                        position: 'absolute',
+                        width: '100%',
+                    } }, tick.toString()));
+            }), xTicks.map((tick) => {
+                const x = scaleXAxis === null || scaleXAxis === void 0 ? void 0 : scaleXAxis(tick);
+                return ((0, jsx_runtime_1.jsx)("div", { className: "ndl-charts-chart-cartesian-grid-line", style: {
+                        left: x,
+                        position: 'absolute',
+                        width: '1px',
+                        height: '100%',
+                    } }, tick.toString()));
+            })] })));
+};
+exports.CartesianGrid = CartesianGrid;
+//# sourceMappingURL=CartesianGrid.js.map

package/lib/cjs/charts/CartesianGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianGrid.js","sourceRoot":"","sources":["../../../src/charts/CartesianGrid.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,iCAAkD;AAClD,mCAAiE;AAS1D,MAAM,aAAa,GAAG,CAAC,EAC5B,SAAS,EACT,cAAc,EACd,UAAU,EAAE,YAAY,EACxB,UAAU,EAAE,YAAY,GACL,EAAE,EAAE;;IACvB,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,iCAAiC,EAAE,SAAS,CAAC,CAAC;IAEzE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,0BAAkB,CAAC,CAAC;IAC/D,IAAI,UAAU,GAA8B,SAAS,CAAC;IACtD,IAAI,UAAU,GAA8B,SAAS,CAAC;IAEtD,IAAI,YAAY,EAAE,CAAC;QACjB,UAAU,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,YAAY,CAAC,0CAAE,+BAA+B,CAAC;IACvE,CAAC;IACD,IAAI,YAAY,EAAE,CAAC;QACjB,UAAU,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,YAAY,CAAC,0CAAE,gCAAgC,CAAC;IACxE,CAAC;IAED,yBAAyB;IACzB,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,MAAM,gBAAgB,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,mCAAI,CAAC,CAAC;IAClD,MAAM,MAAM,GACV,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC,mCAAI,EAAE,CAAC;IAEzE,yBAAyB;IACzB,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,MAAM,gBAAgB,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAAI,CAAC,CAAC;IAEjD,MAAM,MAAM,GACV,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC,mCAAI,EAAE,CAAC;IAEzE,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,+CAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,gBAAgB,IAAM,cAAc,eAC/D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACnB,MAAM,CAAC,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,IAAI,CAAC,CAAC;gBAC7B,OAAO,CACL,gCAEE,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE;wBACL,GAAG,EAAE,CAAC;wBACN,QAAQ,EAAE,UAAU;wBACpB,KAAK,EAAE,MAAM;qBACd,IANI,IAAI,CAAC,QAAQ,EAAE,CAOpB,CACH,CAAC;YACJ,CAAC,CAAC,EAED,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACnB,MAAM,CAAC,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,IAAI,CAAC,CAAC;gBAC7B,OAAO,CACL,gCAEE,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE;wBACL,IAAI,EAAE,CAAC;wBACP,QAAQ,EAAE,UAAU;wBACpB,KAAK,EAAE,KAAK;wBACZ,MAAM,EAAE,MAAM;qBACf,IAPI,IAAI,CAAC,QAAQ,EAAE,CAQpB,CACH,CAAC;YACJ,CAAC,CAAC,KACE,CACP,CAAC;AACJ,CAAC,CAAC;AAvEW,QAAA,aAAa,iBAuExB"}