hypocube - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/js/components/base/Chart.js

@@ -21,2 +21,5 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -26,54 +29,44 @@ const d3_scale_1 = require("d3-scale");
 const normalize_1 = require("../../lib/normalize");
+const useCanvas_1 = __importDefault(require("../../lib/useCanvas"));
+const Viewbox_1 = __importStar(require("../../lib/Viewbox"));
+const Handle_1 = require("../primitives/Handle");
+const ChartError_1 = __importDefault(require("./ChartError"));
 const ChartState_1 = require("./ChartState");
 const ChartStyle_1 = require("./ChartStyle");
-const Chart = (props) => {
-    const { children, height, view } = props;
+const ChartInner = (props) => {
+    const { children, height, width } = props;
     const isCanvas = normalize_1.normalize(props.isCanvas, false);
-    const rootStyles = normalize_1.normalize(props.rootStyles, {});
+    const chartStyle = normalize_1.normalize(props.chartStyle, {});
     const gutter = normalize_1.normalize(props.gutter, [0, 0, 0, 0]);
     const containerRef = react_1.useRef(null);
-    const canvasRef = react_1.useRef(null);
-    const renderer = react_1.useRef(null);
-    react_1.useEffect(() => {
-        const canvasEl = canvasRef.current;
-        renderer.current = canvasEl ? canvasEl.getContext('2d') : null;
-    }, [canvasRef]);
-    const [pxBox, setPxBox] = react_1.useState({
-        x: [0, 1],
-        y: [0, 1],
-    });
-    const calculateScales = react_1.useCallback(() => {
+    const [pxBox, setPxBox] = react_1.useState(new Viewbox_1.default(0, 0, width, height));
+    const calculateSizes = react_1.useCallback(() => {
         const containerEl = containerRef.current;
         if (containerEl) {
-            setPxBox({
-                x: [0, containerEl.clientWidth],
-                y: [0, containerEl.clientHeight],
-            });
+            setPxBox(new Viewbox_1.default(0, 0, containerEl.clientWidth, containerEl.clientHeight));
         }
     }, [containerRef]);
     react_1.useEffect(() => {
-        calculateScales();
+        calculateSizes();
         if (!window) {
             return;
         }
-        window.addEventListener('resize', calculateScales);
+        window.addEventListener('resize', calculateSizes);
         return () => {
-            window.removeEventListener('resize', calculateScales);
+            window.removeEventListener('resize', calculateSizes);
         };
-    }, [containerRef, calculateScales]);
-    const cartesianBox = view;
-    const scaleX = d3_scale_1.scaleLinear()
+    }, [containerRef, calculateSizes]);
+    const cartesianBox = Viewbox_1.createViewbox(typeof props.view === 'function' ? props.view(width) : props.view);
+    const scaleX = react_1.useMemo(() => d3_scale_1.scaleLinear()
         .domain(cartesianBox.x)
-        .range([pxBox.x[0] + gutter[3], pxBox.x[1] - gutter[1]]);
-    const scaleY = d3_scale_1.scaleLinear()
+        .range([pxBox.x[0] + gutter[3], pxBox.x[1] - gutter[1]]), [pxBox, cartesianBox]);
+    const scaleY = react_1.useMemo(() => d3_scale_1.scaleLinear()
         .domain(cartesianBox.y)
-        .range([pxBox.y[1] - gutter[2], pxBox.y[0] + gutter[0]]);
+        .range([pxBox.y[1] - gutter[2], pxBox.y[0] + gutter[0]]), [pxBox, cartesianBox]);
     const containerOffset = containerRef.current
         ? [containerRef.current.offsetLeft, containerRef.current.offsetTop]
         : [0, 0];
-    if (renderer.current) {
-        renderer.current.clearRect(0, 0, pxBox.x[1], pxBox.y[1]);
-    }
+    const { pushToCanvasQueue, canvasRef } = useCanvas_1.default(pxBox, children);
     return (react_1.default.createElement(ChartState_1.ChartStateContext.Provider, { value: {
-            renderer: renderer.current,
+            pushToCanvasQueue,
             isCanvas,
@@ -86,12 +79,40 @@ pxBox,
         } },
-        react_1.default.createElement(ChartStyle_1.ChartStyleProvider, { rootStyles: rootStyles },
-            react_1.default.createElement("div", { ref: containerRef, style: { width: '100%', height, position: 'relative' } },
-                isCanvas ? (react_1.default.createElement("canvas", { ref: canvasRef, width: pxBox.x[1], height: height }, children)) : (react_1.default.createElement("svg", { width: pxBox.x[1], height: pxBox.y[1] }, children)),
-                props.tooltip && props.tooltipPosition ? (react_1.default.createElement("div", { style: {
-                        position: 'absolute',
-                        left: scaleX(props.tooltipPosition[0]),
-                        top: scaleY(props.tooltipPosition[1]),
-                    } }, props.tooltip)) : null))));
+        react_1.default.createElement(ChartStyle_1.ChartStyleProvider, { chartStyle: chartStyle },
+            react_1.default.createElement("div", { ref: containerRef, style: {
+                    height,
+                    maxWidth: width,
+                    minWidth: '100%',
+                    position: 'relative',
+                } },
+                react_1.default.createElement(Handle_1.ChartHandle, Object.assign({}, props),
+                    isCanvas ? (react_1.default.createElement("canvas", { ref: canvasRef, width: pxBox.x[1], height: height }, children)) : (react_1.default.createElement("svg", { width: pxBox.x[1], height: pxBox.y[1] }, children)),
+                    props.tooltip && props.tooltipPosition ? (react_1.default.createElement("div", { style: {
+                            position: 'absolute',
+                            left: scaleX(props.tooltipPosition[0]),
+                            top: scaleY(props.tooltipPosition[1]),
+                        } }, props.tooltip)) : null)))));
 };
+class Chart extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, errorMessage: '' };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, errorMessage: error.message };
+    }
+    componentDidCatch(error) {
+        // eslint-disable-next-line no-console
+        console.warn('Error while rendering Hypocube chart', error);
+    }
+    render() {
+        if (this.state.hasError && this.props.renderError) {
+            return this.props.renderError(this.state.errorMessage);
+        }
+        else if (this.state.hasError) {
+            return react_1.default.createElement(ChartError_1.default, Object.assign({}, this.props));
+        }
+        return react_1.default.createElement(ChartInner, Object.assign({}, this.props));
+    }
+}
 exports.default = Chart;
 //# sourceMappingURL=Chart.js.map

build/js/components/base/ChartState.js

@@ -21,2 +21,5 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -26,10 +29,11 @@ exports.ChartStateContext = exports.getDefaultState = void 0;
 const react_1 = __importStar(require("react"));
+const Viewbox_1 = __importDefault(require("../../lib/Viewbox"));
 const getDefaultState = () => ({
     isCanvas: false,
-    cartesianBox: { x: [0, 1], y: [0, 1] },
-    pxBox: { x: [0, 1], y: [0, 1] },
+    cartesianBox: new Viewbox_1.default(0, 0, 1, 1),
+    pxBox: new Viewbox_1.default(0, 0, 1, 1),
     scaleX: d3_scale_1.scaleLinear(),
     scaleY: d3_scale_1.scaleLinear(),
-    renderer: null,
     containerOffset: [0, 0],
+    pushToCanvasQueue: () => undefined,
 });
@@ -36,0 +40,0 @@ exports.getDefaultState = getDefaultState;

build/js/components/base/ChartStyle.js

@@ -25,7 +25,7 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChartStyles = exports.ChartStyleProvider = exports.ChartStyleContext = void 0;
+exports.useChartStyle = exports.ChartStyleProvider = exports.ChartStyleContext = void 0;
 const react_1 = __importStar(require("react"));
 const normalize_1 = require("../../lib/normalize");
 const ChartState_1 = __importDefault(require("./ChartState"));
-const baseStyles = {
+const baseStyle = {
     baseFontSize: 16,
@@ -38,31 +38,38 @@ axisColor: '#666',
     axisLabelOffset: 50,
-    dataFill: '#000',
-    dataStroke: '#000',
-    dataStrokeWidth: 1,
+    dataBoxFill: '#000',
+    dataBoxStroke: '#000',
+    dataBoxStrokeWidth: 0,
     dataBoxThickness: 10,
-    dataPointSize: 8,
-    dataPointSymbol: 'circle',
+    dataBoxLeftOffset: -0.5,
+    dataPointSize: 5,
+    dataPointSymbol: 'none',
+    dataPointFill: '#000',
+    dataPointStroke: '#000',
+    dataPointStrokeWidth: 0,
+    dataPointMinTargetRadius: 0,
     dataLineCurveType: 'linear',
     dataLineDashType: 'solid',
+    dataLineStroke: '#000',
+    dataLineStrokeWidth: 1,
 };
-const contextualizeStyles = (overrides, defaults, state) => {
-    return Object.keys(defaults).reduce((styles, key) => {
-        return Object.assign(Object.assign({}, styles), { [key]: normalize_1.contextualize(overrides[key], defaults[key], state) });
+const contextualizeStyle = (overrides, defaults, state) => {
+    return Object.keys(defaults).reduce((style, key) => {
+        return Object.assign(Object.assign({}, style), { [key]: normalize_1.contextualize(overrides[key], defaults[key], state) });
     }, defaults);
 };
-exports.ChartStyleContext = react_1.default.createContext(baseStyles);
+exports.ChartStyleContext = react_1.default.createContext(baseStyle);
 const ChartStyleProvider = (props) => {
     const state = ChartState_1.default();
-    const rootStyles = contextualizeStyles(props.rootStyles, baseStyles, state);
-    return (react_1.default.createElement(exports.ChartStyleContext.Provider, { value: rootStyles }, props.children));
+    const chartStyle = contextualizeStyle(props.chartStyle, baseStyle, state);
+    return (react_1.default.createElement(exports.ChartStyleContext.Provider, { value: chartStyle }, props.children));
 };
 exports.ChartStyleProvider = ChartStyleProvider;
-const useChartStyles = (overrides) => {
+const useChartStyle = (overrides) => {
     const state = ChartState_1.default();
-    const rootStyles = react_1.useContext(exports.ChartStyleContext);
+    const chartStyle = react_1.useContext(exports.ChartStyleContext);
     if (!overrides)
-        return rootStyles;
-    return contextualizeStyles(overrides, rootStyles, state);
+        return chartStyle;
+    return contextualizeStyle(overrides, chartStyle, state);
 };
-exports.useChartStyles = useChartStyles;
+exports.useChartStyle = useChartStyle;
 //# sourceMappingURL=ChartStyle.js.map

build/js/components/dataSeries/Databox.js

@@ -11,21 +11,18 @@ "use strict";
 const ChartStyle_1 = require("../base/ChartStyle");
-const normalize_1 = require("../../lib/normalize");
 const DataboxVertical = (props) => {
     const { scaleX, scaleY } = ChartState_1.default();
-    const { dataBoxThickness, dataFill, dataStroke, dataStrokeWidth, } = ChartStyle_1.useChartStyles(props.overrideStyles);
-    const tHalf = dataBoxThickness / 2;
+    const { dataBoxThickness, dataBoxFill, dataBoxStroke, dataBoxStrokeWidth, dataBoxLeftOffset: offset, } = ChartStyle_1.useChartStyle(props.chartStyle);
     const yMin = scaleY(props.yMin);
     const yMax = scaleY(props.yMax);
-    const x = scaleX(props.x);
-    const xOffset = normalize_1.normalize(props.xOffset, 0);
-    const fill = props.color || dataFill;
+    const dataX = scaleX(props.x);
+    const leftX = dataX + dataBoxThickness * offset;
     const path = [
-        [x - tHalf + xOffset, yMax],
-        [x + tHalf + xOffset, yMax],
-        [x + tHalf + xOffset, yMin],
-        [x - tHalf + xOffset, yMin],
+        [leftX, yMax],
+        [leftX + dataBoxThickness, yMax],
+        [leftX + dataBoxThickness, yMin],
+        [leftX, yMin],
     ];
-    return (react_1.default.createElement(Line_1.PxLine, { path: path, fill: fill, stroke: dataStroke, strokeWidth: dataStrokeWidth }));
+    return (react_1.default.createElement(Line_1.PxLine, { path: path, fill: dataBoxFill, stroke: dataBoxStroke, strokeWidth: dataBoxStrokeWidth }));
 };
 exports.DataboxVertical = DataboxVertical;
 //# sourceMappingURL=Databox.js.map

build/js/components/dataSeries/LineSeries.js

@@ -6,12 +6,51 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineSeries = void 0;
+exports.LineSeries = exports.LineSeriesComposer = exports.DataLine = exports.DataPoint = void 0;
 const react_1 = __importDefault(require("react"));
+const Symbol_1 = require("../primitives/Symbol");
+const Line_1 = require("../primitives/Line");
 const ChartStyle_1 = require("../base/ChartStyle");
-const Line_1 = require("../primitives/Line");
-const LineSeries = (props) => {
-    const { color, data } = props;
-    const { dataStrokeWidth, dataLineCurveType, dataLineDashType, } = ChartStyle_1.useChartStyles(props.overrideStyles);
-    return (react_1.default.createElement(Line_1.Line, { path: data, stroke: color, strokeWidth: dataStrokeWidth, curveType: dataLineCurveType, dash: dataLineDashType }));
+const normalize_1 = require("../../lib/normalize");
+const ChartState_1 = __importDefault(require("../base/ChartState"));
+const Viewbox_1 = require("../../lib/Viewbox");
+const Handle_1 = __importDefault(require("../primitives/Handle"));
+const DataPoint = (props) => {
+    const { x, y } = props;
+    const { dataPointFill, dataPointStroke, dataPointStrokeWidth, dataPointSize, dataPointSymbol, dataPointMinTargetRadius, } = ChartStyle_1.useChartStyle(props.chartStyle);
+    return (react_1.default.createElement(Handle_1.default, Object.assign({}, props, { elementPosition: [x, y], meta: props.handlerMeta }),
+        react_1.default.createElement(Symbol_1.Symbol, { point: [x, y], symbol: dataPointSymbol, size: dataPointSize, stroke: dataPointStroke, strokeWidth: dataPointStrokeWidth, fill: dataPointFill, quietRenderRadius: dataPointMinTargetRadius })));
 };
-exports.LineSeries = LineSeries;
+exports.DataPoint = DataPoint;
+const DataLine = (props) => {
+    const { data } = props;
+    const { dataLineStroke, dataLineStrokeWidth, dataLineCurveType, dataLineDashType, } = ChartStyle_1.useChartStyle(props.chartStyle);
+    // filter out points that are out of range and both their neighbours are
+    // out of range.
+    return (react_1.default.createElement(Line_1.Line, { path: data, stroke: dataLineStroke, strokeWidth: dataLineStrokeWidth, curveType: dataLineCurveType, dash: dataLineDashType }));
+};
+exports.DataLine = DataLine;
+const LineSeriesDefaultComponents = {
+    DataPoint: exports.DataPoint,
+    DataLine: exports.DataLine,
+};
+const LineSeriesComposer = (Components = {}) => {
+    const { DataLine, DataPoint } = Object.assign(Object.assign({}, LineSeriesDefaultComponents), Components);
+    const LineSeries = (props) => {
+        const { cartesianBox, isCanvas } = ChartState_1.default();
+        const { dataPointSymbol } = ChartStyle_1.useChartStyle(props.chartStyle);
+        const view = Viewbox_1.createViewbox(normalize_1.normalize(props.view, cartesianBox));
+        const filteredPoints = isCanvas && dataPointSymbol === 'none'
+            ? // No interaction, no render: don't bother
+                []
+            : props.data.filter(([x, y], i) => x >= view.x[0] &&
+                x <= view.x[1] &&
+                y >= view.y[0] &&
+                y <= view.y[1]);
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(DataLine, Object.assign({}, props)),
+            filteredPoints.map(([x, y]) => (react_1.default.createElement(DataPoint, Object.assign({ x: x, y: y, key: `${x},${y}` }, props))))));
+    };
+    return LineSeries;
+};
+exports.LineSeriesComposer = LineSeriesComposer;
+exports.LineSeries = exports.LineSeriesComposer();
 //# sourceMappingURL=LineSeries.js.map

build/js/components/furniture/Axes.js

@@ -36,4 +36,6 @@ "use strict";
         const state = ChartState_1.default();
-        const { range, intercept, tickPositions, getTickLabel, } = normalizeAxisProps(props, state);
-        const { axisColor, axisThickness } = ChartStyle_1.useChartStyles(props.overrideStyles);
+        const { range, intercept, tickPositions, getTickLabel,
+        // axisLabel,
+         } = normalizeAxisProps(props, state);
+        const { axisColor, axisThickness } = ChartStyle_1.useChartStyle(props.chartStyle);
         return (react_1.default.createElement(Handle_1.default, { elementPosition: [range[0], intercept] },
@@ -44,3 +46,4 @@ react_1.default.createElement(Line_1.Line, { path: [
                 ], strokeWidth: axisThickness, stroke: axisColor }),
-            tickPositions.map((pos) => (react_1.default.createElement(XTickMark, { position: [pos, intercept], label: getTickLabel(pos), overrideStyles: props.overrideStyles, key: pos })))));
+            tickPositions.map((pos) => pos >= range[0] &&
+                pos <= range[1] && (react_1.default.createElement(XTickMark, { position: [pos, intercept], label: getTickLabel(pos), chartStyle: props.chartStyle, key: pos })))));
     };
@@ -58,5 +61,7 @@ return XAxis;
         const state = ChartState_1.default();
-        const { range, intercept, tickPositions, getTickLabel, } = normalizeAxisProps(props, state);
+        const { range, intercept, tickPositions, getTickLabel,
+        // axisLabel,
+         } = normalizeAxisProps(props, state);
         // const axisLabel = normalize(props.axisLabel, null);
-        const { axisColor, axisThickness } = ChartStyle_1.useChartStyles(props.overrideStyles);
+        const { axisColor, axisThickness } = ChartStyle_1.useChartStyle(props.chartStyle);
         return (react_1.default.createElement(Handle_1.default, { elementPosition: [intercept, range[0]] },
@@ -67,3 +72,4 @@ react_1.default.createElement(Line_1.Line, { path: [
                 ], strokeWidth: axisThickness, stroke: axisColor }),
-            tickPositions.map((pos) => (react_1.default.createElement(YTickMark, { position: [intercept, pos], label: getTickLabel(pos), overrideStyles: props.overrideStyles, key: pos })))));
+            tickPositions.map((pos) => pos <= range[0] &&
+                pos >= range[1] && (react_1.default.createElement(YTickMark, { position: [intercept, pos], label: getTickLabel(pos), chartStyle: props.chartStyle, key: pos })))));
     };
@@ -70,0 +76,0 @@ return YAxis;

build/js/components/furniture/TickMarks.js

@@ -16,3 +16,3 @@ "use strict";
         const label = normalize_1.normalize(props.label, '');
-        const { baseFontSize, axisColor, axisThickness, axisTickLength, axisTickOffset, axisTickLabelOffset, } = ChartStyle_1.useChartStyles(props.overrideStyles);
+        const { baseFontSize, axisColor, axisThickness, axisTickLength, axisTickOffset, axisTickLabelOffset, } = ChartStyle_1.useChartStyle(props.chartStyle);
         const labelAbsoluteOffset = axisTickLength + axisTickLabelOffset + baseFontSize;
@@ -34,3 +34,3 @@ return (react_1.default.createElement(react_1.default.Fragment, null,
         const label = normalize_1.normalize(props.label, '');
-        const { axisColor, axisThickness, axisTickLength, axisTickOffset, axisTickLabelOffset, } = ChartStyle_1.useChartStyles(props.overrideStyles);
+        const { axisColor, axisThickness, axisTickLength, axisTickOffset, axisTickLabelOffset, } = ChartStyle_1.useChartStyle(props.chartStyle);
         const labelAbsoluteOffset = 0 - axisTickLength - axisTickLabelOffset;
@@ -37,0 +37,0 @@ return (react_1.default.createElement(react_1.default.Fragment, null,

build/js/components/primitives/Handle.js

@@ -21,2 +21,13 @@ "use strict";
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -26,4 +37,14 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartHandle = void 0;
 const react_1 = __importStar(require("react"));
 const ChartState_1 = __importDefault(require("../base/ChartState"));
+const useHandle_1 = __importDefault(require("../../lib/useHandle"));
+const useRescaleGestures_1 = __importDefault(require("../../lib/useRescaleGestures"));
+const ChartHandle = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const handlers = useHandle_1.default(props);
+    const bind = useRescaleGestures_1.default(props.onGesture);
+    return (react_1.default.createElement("div", Object.assign({}, handlers, bind()), children));
+};
+exports.ChartHandle = ChartHandle;
 const Handle = (props) => {
@@ -36,23 +57,8 @@ const { isCanvas } = ChartState_1.default();
 };
-const HandleInner = ({ onClick, elementPosition, meta, children, }) => {
-    const { scaleX, scaleY, containerOffset } = ChartState_1.default();
-    const getData = react_1.useCallback((event) => {
-        return {
-            meta: meta || {},
-            elementPosition,
-            event,
-            pointerPosition: [
-                scaleX.invert(event.clientX - containerOffset[0]),
-                scaleY.invert(event.clientY - containerOffset[1]),
-            ],
-        };
-    }, [meta, elementPosition, scaleX, scaleY, containerOffset]);
-    const handleClick = react_1.useCallback((event) => {
-        if (onClick) {
-            onClick(getData(event));
-        }
-    }, [onClick, getData]);
-    return react_1.default.createElement("g", { onClick: handleClick }, children);
+const HandleInner = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const handlers = useHandle_1.default(props);
+    return react_1.default.createElement("g", Object.assign({}, handlers), children);
 };
 exports.default = Handle;
 //# sourceMappingURL=Handle.js.map

build/js/components/primitives/Line.js

 "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]; } });
-}) : (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) {
@@ -26,3 +7,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.PxLine = exports.TranslatedLine = exports.Line = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const d3_shape_1 = require("d3-shape");
@@ -77,20 +58,21 @@ const ChartState_1 = __importDefault(require("../base/ChartState"));
     const dashArray = getDashArray(dash);
-    const { renderer, isCanvas } = ChartState_1.default();
-    react_1.useEffect(() => {
-        if (renderer) {
-            const line = d3_shape_1.line().curve(curveFactory).context(renderer);
-            renderer.beginPath();
+    const { pushToCanvasQueue, isCanvas } = ChartState_1.default();
+    pushToCanvasQueue((renderer) => {
+        const line = d3_shape_1.line()
+            .curve(curveFactory)
+            .context(renderer);
+        renderer.beginPath();
+        if (stroke) {
             renderer.strokeStyle = stroke;
-            renderer.lineWidth = strokeWidth;
-            if (dashArray) {
-                renderer.setLineDash(dashArray);
-            }
-            line(path);
-            renderer.stroke();
-            if (fill) {
-                renderer.fillStyle = fill;
-                renderer.fill();
-            }
-            renderer.restore();
         }
+        renderer.lineWidth = strokeWidth;
+        if (dashArray) {
+            renderer.setLineDash(dashArray);
+        }
+        line(path);
+        renderer.stroke();
+        if (fill) {
+            renderer.fillStyle = fill;
+            renderer.fill();
+        }
     });
@@ -104,5 +86,5 @@ if (isCanvas) {
     }
-    return (react_1.default.createElement("path", { d: line, stroke: stroke, fill: fill || 'transparent', strokeWidth: strokeWidth, strokeDasharray: dashArray ? dashArray.join(',') : undefined }));
+    return (react_1.default.createElement("path", { d: line, stroke: stroke || 'transparent', fill: fill || 'transparent', strokeWidth: strokeWidth, strokeDasharray: dashArray ? dashArray.join(',') : undefined }));
 };
 exports.PxLine = PxLine;
 //# sourceMappingURL=Line.js.map

build/js/components/primitives/Symbol.js

 "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]; } });
-}) : (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) {
@@ -27,3 +8,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 const d3_shape_1 = require("d3-shape");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const ChartState_1 = __importDefault(require("../base/ChartState"));
@@ -47,2 +28,4 @@ const getD3Symbol = (input) => {
             return d3_shape_1.symbolWye;
+        case 'none':
+            return null;
     }
@@ -52,21 +35,20 @@ return d3_shape_1.symbolCircle;
 const Symbol = (props) => {
-    const { point, size, symbol, stroke, fill, strokeWidth } = Object.assign({ size: 8, symbol: d3_shape_1.symbolCircle, stroke: '#000', strokeWidth: 1, fill: null }, props);
+    const { point, size, symbol, stroke, fill, strokeWidth, quietRenderRadius, } = Object.assign({ size: 5, symbol: d3_shape_1.symbolCircle, stroke: '#000', strokeWidth: 1, fill: null, quietRenderRadius: 0 }, props);
     const symbolF = getD3Symbol(symbol);
-    const { scaleX, scaleY, renderer, isCanvas } = ChartState_1.default();
+    if (!symbolF) {
+        return null;
+    }
+    const { scaleX, scaleY, pushToCanvasQueue, isCanvas } = ChartState_1.default();
     const pxPoint = [scaleX(point[0]), scaleY(point[1])];
-    react_1.useEffect(() => {
-        if (renderer) {
-            const line = d3_shape_1.symbol(symbolF, size * 8).context(renderer);
-            renderer.setTransform(1, 0, 0, 1, ...pxPoint);
-            renderer.beginPath();
-            renderer.strokeStyle = stroke;
-            renderer.lineWidth = strokeWidth;
-            line();
-            renderer.stroke();
-            if (fill) {
-                renderer.fillStyle = fill;
-                renderer.fill();
-            }
-            renderer.restore();
-            renderer.setTransform(1, 0, 0, 1, 0, 0);
+    pushToCanvasQueue((renderer) => {
+        const line = d3_shape_1.symbol(symbolF, size * 8).context(renderer);
+        renderer.setTransform(1, 0, 0, 1, ...pxPoint);
+        renderer.beginPath();
+        renderer.strokeStyle = stroke;
+        renderer.lineWidth = strokeWidth;
+        line();
+        renderer.stroke();
+        if (fill) {
+            renderer.fillStyle = fill;
+            renderer.fill();
         }
@@ -80,2 +62,3 @@ });
     return (react_1.default.createElement("g", { transform: `translate(${pxPoint[0]}, ${pxPoint[1]})` },
+        react_1.default.createElement("circle", { r: quietRenderRadius, x: 0, y: 0, fill: "transparent" }),
         react_1.default.createElement("path", { d: line, stroke: stroke, fill: fill || 'transparent', strokeWidth: strokeWidth })));
@@ -82,0 +65,0 @@ };

build/js/components/primitives/Text.js

 "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]; } });
-}) : (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) {
@@ -25,7 +6,7 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const normalize_1 = require("../../lib/normalize");
 const ChartState_1 = __importDefault(require("../base/ChartState"));
 const Text = (props) => {
-    const { scaleX, scaleY, renderer, isCanvas } = ChartState_1.default();
+    const { scaleX, scaleY, pushToCanvasQueue, isCanvas } = ChartState_1.default();
     const { position, text } = props;
@@ -39,9 +20,7 @@ const font = normalize_1.normalize(props.font, 'Helvetica');
     const y = scaleY(position[1]) + pxOffset[1];
-    react_1.useEffect(() => {
-        if (renderer) {
-            renderer.font = `${fontSize}px ${font}`;
-            renderer.textAlign = align;
-            renderer.fillStyle = color;
-            renderer.fillText(text, x, y);
-        }
+    pushToCanvasQueue((renderer) => {
+        renderer.font = `${fontSize}px ${font}`;
+        renderer.textAlign = align;
+        renderer.fillStyle = color;
+        renderer.fillText(text, x, y);
     });
@@ -52,5 +31,5 @@ if (isCanvas) {
     const svgAnchor = align === 'center' ? 'middle' : align === 'right' ? 'end' : 'start';
-    return (react_1.default.createElement("text", { x: x, y: y, fill: color, fontSize: fontSize, style: { fontFamily: `${font}, sans-serif` }, textAnchor: svgAnchor }, text));
+    return (react_1.default.createElement("text", { x: x, y: y, fill: color, fontSize: fontSize, style: { fontFamily: `${font}, sans-serif`, userSelect: 'none' }, textAnchor: svgAnchor }, text));
 };
 exports.default = Text;
 //# sourceMappingURL=Text.js.map

build/js/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DOTTED_LINE = exports.DASHED_LINE = void 0;
+exports.SUPPORTED_EVENTS = exports.DOTTED_LINE = exports.DASHED_LINE = void 0;
 exports.DASHED_LINE = [5, 5];
 exports.DOTTED_LINE = [1, 1];
+exports.SUPPORTED_EVENTS = [
+    'onPointerDown',
+    'onPointerMove',
+    'onPointerUp',
+    'onPointerCancel',
+    'onGotPointerCapture',
+    'onLostPointerCapture',
+    'onPointerEnter',
+    'onPointerLeave',
+    'onPointerOver',
+    'onPointerOut',
+];
 //# sourceMappingURL=constants.js.map

build/js/index.js

@@ -16,11 +16,7 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Symbol = exports.PxLine = exports.Line = exports.Handle = exports.YAxis = exports.XAxis = exports.LineSeries = exports.ScatterSeries = exports.DataPoint = exports.BarVerticalSeries = exports.BarVertical = exports.Chart = void 0;
+exports.Viewbox = exports.Symbol = exports.PxLine = exports.Line = exports.Handle = exports.VoronoiHandle = exports.YAxis = exports.XAxis = exports.LineSeries = exports.BarVerticalSeries = exports.Chart = void 0;
 var Chart_1 = require("./components/base/Chart");
 Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return __importDefault(Chart_1).default; } });
-var Bar_1 = require("./components/dataSeries/Bar");
-Object.defineProperty(exports, "BarVertical", { enumerable: true, get: function () { return Bar_1.BarVertical; } });
-Object.defineProperty(exports, "BarVerticalSeries", { enumerable: true, get: function () { return Bar_1.BarVerticalSeries; } });
-var Scatter_1 = require("./components/dataSeries/Scatter");
-Object.defineProperty(exports, "DataPoint", { enumerable: true, get: function () { return Scatter_1.DataPoint; } });
-Object.defineProperty(exports, "ScatterSeries", { enumerable: true, get: function () { return Scatter_1.ScatterSeries; } });
+var BarSeries_1 = require("./components/dataSeries/BarSeries");
+Object.defineProperty(exports, "BarVerticalSeries", { enumerable: true, get: function () { return BarSeries_1.BarVerticalSeries; } });
 var LineSeries_1 = require("./components/dataSeries/LineSeries");
@@ -31,2 +27,4 @@ Object.defineProperty(exports, "LineSeries", { enumerable: true, get: function () { return LineSeries_1.LineSeries; } });
 Object.defineProperty(exports, "YAxis", { enumerable: true, get: function () { return Axes_1.YAxis; } });
+var VoronoiHandle_1 = require("./components/furniture/VoronoiHandle");
+Object.defineProperty(exports, "VoronoiHandle", { enumerable: true, get: function () { return __importDefault(VoronoiHandle_1).default; } });
 var Handle_1 = require("./components/primitives/Handle");
@@ -39,3 +37,5 @@ Object.defineProperty(exports, "Handle", { enumerable: true, get: function () { return __importDefault(Handle_1).default; } });
 Object.defineProperty(exports, "Symbol", { enumerable: true, get: function () { return Symbol_1.Symbol; } });
+var Viewbox_1 = require("./lib/Viewbox");
+Object.defineProperty(exports, "Viewbox", { enumerable: true, get: function () { return __importDefault(Viewbox_1).default; } });
 __exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

build/js/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GesturePhase = exports.GestureKind = void 0;
+var GestureKind;
+(function (GestureKind) {
+    GestureKind["Drag"] = "Drag";
+    GestureKind["Swipe"] = "Swipe";
+    GestureKind["Pinch"] = "Pinch";
+    GestureKind["Wheel"] = "Wheel";
+})(GestureKind = exports.GestureKind || (exports.GestureKind = {}));
+var GesturePhase;
+(function (GesturePhase) {
+    GesturePhase["Start"] = "Start";
+    GesturePhase["Continue"] = "Continue";
+    GesturePhase["End"] = "End";
+})(GesturePhase = exports.GesturePhase || (exports.GesturePhase = {}));
 //# sourceMappingURL=types.js.map

build/types/components/base/Chart.d.ts

 import React from 'react';
-import { ChartStyleOptions, Point, Viewbox } from '../../types';
-interface Props {
+import { HandlerProps } from '../../lib/useHandle';
+import { ViewboxDuck } from '../../lib/Viewbox';
+import { ChartStyleOptions, Point } from '../../types';
+export interface Props extends HandlerProps {
     height: number;
-    view: Viewbox;
+    width: number;
+    view: ViewboxDuck | ((width: number) => ViewboxDuck);
+    /**
+     * An additional number of pixels added to each side of the graph, specified as [top, right, bottom, left]
+     */
     gutter?: [number, number, number, number];
     isCanvas?: boolean;
-    rootStyles?: ChartStyleOptions;
-    tooltip?: JSX.Element;
-    tooltipPosition?: Point;
+    chartStyle?: ChartStyleOptions;
+    tooltip?: JSX.Element | null;
+    tooltipPosition?: Point | null;
+    renderError?: (message?: string) => React.ReactNode;
 }
-declare const Chart: React.FC<Props>;
+interface State {
+    hasError: boolean;
+    errorMessage: string;
+}
+declare class Chart extends React.Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        errorMessage: string;
+    };
+    componentDidCatch(error: Error): void;
+    render(): React.ReactNode;
+}
 export default Chart;

build/types/components/base/ChartStyle.d.ts

 import React from 'react';
-import type { ChartStyleOptions, ChartStyleT } from '../../types';
+import { ChartStyleOptions, ChartStyleT } from '../../types';
 export declare const ChartStyleContext: React.Context<ChartStyleT>;
 export declare const ChartStyleProvider: React.FC<{
-    rootStyles: ChartStyleOptions;
+    chartStyle: ChartStyleOptions;
 }>;
-export declare const useChartStyles: (overrides?: ChartStyleOptions | undefined) => ChartStyleT;
+export declare const useChartStyle: (overrides?: ChartStyleOptions | undefined) => ChartStyleT;

build/types/components/dataSeries/Databox.d.ts

@@ -7,7 +7,5 @@ import React from 'react';
     x: number;
-    xOffset?: number;
-    color?: string;
-    overrideStyles?: ChartStyleOptions;
+    chartStyle?: ChartStyleOptions;
 }
 export declare const DataboxVertical: React.FC<DataboxVerticalProps>;
 export {};

build/types/components/dataSeries/LineSeries.d.ts

 import React from 'react';
-import { ChartStyleOptions, Point } from '../../types';
-import { dashType } from '../primitives/Line';
+import { ChartStyleOptions, ChartEventMetaData, ChartEventHandlers, Point } from '../../types';
+import { ViewboxDuck } from '../../lib/Viewbox';
+interface DataPointProps {
+    x: number;
+    y: number;
+    chartStyle?: ChartStyleOptions;
+    handlerMeta?: ChartEventMetaData;
+}
+export declare const DataPoint: React.FC<DataPointProps & ChartEventHandlers>;
+interface DataLineProps {
+    data: Point[];
+    chartStyle?: ChartStyleOptions;
+}
+export declare const DataLine: React.FC<DataLineProps>;
+interface LineSeriesComponents {
+    DataPoint?: React.FC<DataPointProps>;
+    DataLine?: React.FC<DataLineProps>;
+}
 interface LineSeriesProps {
     data: Point[];
-    color: string;
-    dash?: dashType;
-    overrideStyles?: ChartStyleOptions;
+    view?: ViewboxDuck;
+    chartStyle?: ChartStyleOptions;
+    handlerMeta?: ChartEventMetaData;
 }
-export declare const LineSeries: React.FC<LineSeriesProps>;
+export declare const LineSeriesComposer: (Components?: LineSeriesComponents) => React.FC<LineSeriesProps & ChartEventHandlers>;
+export declare const LineSeries: React.FC<LineSeriesProps & ChartEventHandlers>;
 export {};

build/types/components/furniture/Axes.d.ts

@@ -5,2 +5,5 @@ import React from 'react';
 interface AxisProps {
+    /**
+     * The start and end of the axis on the Cartesian scale. Defaults to the corresponding value in the Chart view
+     */
     range?: [number, number];
@@ -11,3 +14,3 @@ intercept?: number;
     axisLabel?: string | null;
-    overrideStyles?: ChartStyleOptions;
+    chartStyle?: ChartStyleOptions;
 }
@@ -14,0 +17,0 @@ interface XAxisComponents {

build/types/components/furniture/TickMarks.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
     label?: string;
-    overrideStyles?: ChartStyleOptions;
+    chartStyle?: ChartStyleOptions;
 }
@@ -9,0 +9,0 @@ export declare const XTickMarkComposer: () => React.FC<TickMarkProps>;

build/types/components/primitives/Handle.d.ts

 import React from 'react';
-import { Interaction } from '../../types';
-interface Props {
-    onClick?: (data: Interaction) => void;
-    elementPosition: [number, number];
-    meta?: {
-        [key: string]: string | number | boolean;
-    };
-}
-declare const Handle: React.FC<Props>;
+import { HandlerProps } from '../../lib/useHandle';
+export declare const ChartHandle: React.FC<HandlerProps>;
+declare const Handle: React.FC<HandlerProps>;
 export default Handle;

build/types/components/primitives/Line.d.ts

@@ -8,4 +8,4 @@ import React from 'react';
     path: Point[];
-    stroke?: string;
-    fill?: string;
+    stroke?: string | null;
+    fill?: string | null;
     strokeWidth?: number;
@@ -12,0 +12,0 @@ curveType?: curveType | CurveFactoryLineOnly;

build/types/components/primitives/Symbol.d.ts

 import { SymbolType as D3SymbolType } from 'd3-shape';
 import React from 'react';
-export declare type symbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+export declare type symbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none';
 interface SymbolProps {
@@ -11,4 +11,5 @@ point: [number, number];
     strokeWidth?: number;
+    quietRenderRadius?: number;
 }
 export declare const Symbol: React.FC<SymbolProps>;
 export {};

build/types/constants.d.ts

@@ -0,2 +1,4 @@
+import { ReactHandlers } from './types';
 export declare const DASHED_LINE: number[];
 export declare const DOTTED_LINE: number[];
+export declare const SUPPORTED_EVENTS: Array<keyof ReactHandlers>;

build/types/index.d.ts

 export { default as Chart } from './components/base/Chart';
-export { BarVertical, BarVerticalSeries } from './components/dataSeries/Bar';
-export { DataPoint, ScatterSeries } from './components/dataSeries/Scatter';
+export { BarVerticalSeries } from './components/dataSeries/BarSeries';
 export { LineSeries } from './components/dataSeries/LineSeries';
 export { XAxis, YAxis } from './components/furniture/Axes';
+export { default as VoronoiHandle } from './components/furniture/VoronoiHandle';
 export { default as Handle } from './components/primitives/Handle';
 export { Line, PxLine } from './components/primitives/Line';
 export { Symbol } from './components/primitives/Symbol';
+export { default as Viewbox } from './lib/Viewbox';
 export * from './types';

build/types/lib/normalize.d.ts

 import { ChartState, Contextual } from '../types';
 export declare const normalize: <T>(prop: T | undefined, defaultProp: T) => T;
-export declare const contextualize: <T>(prop: T | ((chartState: ChartState) => T) | undefined, defaultProp: Contextual<T>, chartState: ChartState) => T;
+export declare const contextualize: <T>(prop: Contextual<T> | undefined, defaultProp: Contextual<T>, chartState: ChartState) => T;

build/types/types.d.ts

@@ -5,8 +5,5 @@ /// <reference types="react" />
 import { symbolType } from './components/primitives/Symbol';
+import { CanvasComponent } from './lib/useCanvas';
+import Viewbox from './lib/Viewbox';
 export declare type Point = [number, number];
-export declare type Range = [number, number];
-export interface Viewbox {
-    x: Range;
-    y: Range;
-}
 export interface ChartState {
@@ -19,19 +16,5 @@ isCanvas: boolean;
     containerOffset: [number, number];
-    renderer?: CanvasRenderingContext2D | null;
+    pushToCanvasQueue: (func: CanvasComponent) => void;
 }
-export declare type Event = React.MouseEvent<SVGGElement> | React.PointerEvent<SVGGElement>;
 export declare type Contextual<T> = T | ((chartState: ChartState) => T);
-export interface Interaction {
-    event: Event;
-    elementPosition: [number, number];
-    pointerPosition: [number, number];
-    meta: {
-        [key: string]: string | number | boolean;
-    };
-}
-export interface Handlers {
-    onClick: Event;
-    onMouseOver: Event;
-    onDrag: Event;
-}
 export interface ChartStyleOptions {
@@ -45,10 +28,17 @@ baseFontSize?: Contextual<number>;
     axisLabelOffset?: Contextual<number>;
-    dataFill?: Contextual<string>;
-    dataStroke?: Contextual<string>;
-    dataStrokeWidth?: Contextual<number>;
+    dataBoxFill?: Contextual<string>;
+    dataBoxStroke?: Contextual<string>;
+    dataBoxStrokeWidth?: Contextual<number>;
     dataBoxThickness?: Contextual<number>;
+    dataBoxLeftOffset?: Contextual<number>;
     dataPointSize?: Contextual<number>;
     dataPointSymbol?: Contextual<symbolType>;
+    dataPointFill?: Contextual<string>;
+    dataPointStroke?: Contextual<string>;
+    dataPointStrokeWidth?: Contextual<number>;
+    dataPointMinTargetRadius?: Contextual<number>;
     dataLineCurveType?: Contextual<curveType>;
     dataLineDashType?: Contextual<dashType>;
+    dataLineStroke?: Contextual<string>;
+    dataLineStrokeWidth?: Contextual<number>;
 }
@@ -63,10 +53,76 @@ export interface ChartStyleT {
     axisLabelOffset: number;
-    dataFill: string;
-    dataStroke: string;
-    dataStrokeWidth: number;
+    dataBoxFill: string;
+    dataBoxStroke: string;
+    dataBoxStrokeWidth: number;
     dataBoxThickness: number;
+    dataBoxLeftOffset: number;
     dataPointSize: number;
     dataPointSymbol: symbolType;
+    dataPointFill: string;
+    dataPointStroke: string;
+    dataPointStrokeWidth: number;
+    dataPointMinTargetRadius: number;
     dataLineCurveType: curveType;
     dataLineDashType: dashType;
+    dataLineStroke: string;
+    dataLineStrokeWidth: number;
 }
+export declare type ReactEvent = React.PointerEvent<SVGGElement> | React.PointerEvent<HTMLDivElement> | React.WheelEvent<SVGGElement> | React.WheelEvent<HTMLDivElement>;
+export interface ReactHandlers {
+    onPointerDown?: (e: ReactEvent) => void;
+    onPointerMove?: (e: ReactEvent) => void;
+    onPointerUp?: (e: ReactEvent) => void;
+    onPointerCancel?: (e: ReactEvent) => void;
+    onGotPointerCapture?: (e: ReactEvent) => void;
+    onLostPointerCapture?: (e: ReactEvent) => void;
+    onPointerEnter?: (e: ReactEvent) => void;
+    onPointerLeave?: (e: ReactEvent) => void;
+    onPointerOver?: (e: ReactEvent) => void;
+    onPointerOut?: (e: ReactEvent) => void;
+}
+export declare type ChartEventMetaData = Record<string, string | number | boolean | null>;
+export interface ChartEventData {
+    event: ReactEvent;
+    pointerPosition: [number, number];
+    pointerId: number | null;
+    elementPosition?: [number, number];
+    modifiers: Array<string>;
+    meta: ChartEventMetaData;
+}
+export declare type ChartEventHandler = (data: ChartEventData) => void;
+export declare enum GestureKind {
+    Drag = "Drag",
+    Swipe = "Swipe",
+    Pinch = "Pinch",
+    Wheel = "Wheel"
+}
+export declare enum GesturePhase {
+    Start = "Start",
+    Continue = "Continue",
+    End = "End"
+}
+export interface ChartGestureData {
+    kind: GestureKind;
+    phase: GesturePhase;
+    nextView: Viewbox;
+    state: any;
+}
+export interface ChartEventHandlers {
+    onPointerDown?: ChartEventHandler;
+    onPointerMove?: ChartEventHandler;
+    onPointerUp?: ChartEventHandler;
+    onPointerCancel?: ChartEventHandler;
+    onGotPointerCapture?: ChartEventHandler;
+    onLostPointerCapture?: ChartEventHandler;
+    onPointerEnter?: ChartEventHandler;
+    onPointerLeave?: ChartEventHandler;
+    onPointerOver?: ChartEventHandler;
+    onPointerOut?: ChartEventHandler;
+    onGesture?: (data: ChartGestureData) => void;
+}
+export declare type ChartAnimation = (time: number, end: () => void) => Viewbox;
+export interface Dataseries {
+    data: Point[];
+    key: string;
+    meta?: ChartEventMetaData;
+}

package.json

 {
   "name": "hypocube",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
-  "main": "build/js/index.js",
+  "repository": {
+    "url": "https://github.com/CAYdenberg/hypocube"
+  },
+  "main": "build/js/index.ts",
   "types": "build/types",
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=7.0.0"
+  },
   "scripts": {
-    "build": "tsc"
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src sandbox --ext .ts,.tsx --max-warnings=0",
+    "test": "jest --env=jsdom",
+    "quickcheck": "npm run typecheck && npm run lint && npm run test",
+    "build": "tsc --project tsconfig.build.json",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build",
+    "preversion": "npm run typecheck && npm run lint && npm run test && npm run build",
+    "sandbox": "parcel sandbox/index.html",
+    "autofix": "eslint src sandbox --ext .ts,.tsx --fix --max-warnings=0"
   },
@@ -13,13 +29,34 @@ "author": "@CAYdenberg",
   "dependencies": {
+    "color-interpolate": "^1.0.5",
+    "d3-delaunay": "^5.3.0",
     "d3-scale": "^3.2.3",
-    "d3-shape": "^2.0.0"
+    "d3-shape": "^2.0.0",
+    "react-use-gesture": "^9.1.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@manuscripts/eslint-config": "^0.4.2",
+    "@types/d3-delaunay": "^5.3.0",
     "@types/d3-scale": "^3.2.2",
     "@types/d3-shape": "^2.0.0",
     "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.1",
+    "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.11.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "jest": "^26.6.3",
+    "parcel-bundler": "^1.12.4",
+    "prettier": "^1.13.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.1.3"
@@ -26,0 +63,0 @@ },

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123009

increased by71.86%

Number of package files

88

increased by60%

Lines of code

1800

increased by71.1%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

20

increased byInfinity%

Worsened metrics

Dependency count

7

increased by75%

Dev dependency count

26

increased by225%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcolor-interpolate@^1.0.5

• + Addedd3-delaunay@^5.3.0

• + Addedreact-use-gesture@^9.1.3

• + Addedalmost-equal@1.1.0(transitive)

• + Addedclamp@1.0.1(transitive)

• + Addedcolor-interpolate@1.0.5(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcolor-parse@1.4.3(transitive)

• + Addedcolor-space@1.16.0(transitive)

• + Addedd3-delaunay@5.3.0(transitive)

• + Addeddelaunator@4.0.1(transitive)

• + Addedhsluv@0.0.3(transitive)

• + Addedlerp@1.0.3(transitive)

• + Addedmumath@3.3.4(transitive)

• + Addedreact-use-gesture@9.1.3(transitive)