Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@visx/shape

Package Overview
Dependencies
Maintainers
4
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@visx/shape - npm Package Compare versions

Comparing version 1.14.0 to 1.16.0

esm/util/getOrCreateMeasurementElement.js

98

esm/shapes/SplitLinePath.js

@@ -6,4 +6,14 @@ import _pt from "prop-types";

import React, { useMemo } from 'react';
import getSplitLineSegments from '../util/getSplitLineSegments';
import { line } from '../util/D3ShapeFactories';
import LinePath from './LinePath';
import getSplitLineSegments from '../util/getSplitLineSegments';
var getX = function getX(d) {
return d.x || 0;
};
var getY = function getY(d) {
return d.y || 0;
};
export default function SplitLinePath(_ref) {

@@ -14,2 +24,3 @@ var children = _ref.children,

defined = _ref.defined,
segmentation = _ref.segmentation,
sampleRate = _ref.sampleRate,

@@ -20,41 +31,49 @@ segments = _ref.segments,

styles = _ref.styles;
// combine data to first draw entire path
var combinedSegments = useMemo(function () {
return segments.reduce(function (flat, segmentData) {
return flat.concat([].concat(segmentData));
}, []);
}, [segments]);
return /*#__PURE__*/React.createElement(LinePath, {
data: combinedSegments,
defined: defined,
curve: curve,
x: x,
y: y
}, function (_ref2) {
var path = _ref2.path;
// use entire path to interpolate individual segments
var entirePath = path(combinedSegments);
var computedLineSegments = getSplitLineSegments({
path: entirePath || '',
segments: segments,
// Convert data in all segments to points.
var pointsInSegments = useMemo(function () {
var xFn = typeof x === 'number' || typeof x === 'undefined' ? function () {
return x;
} : x;
var yFn = typeof y === 'number' || typeof y === 'undefined' ? function () {
return y;
} : y;
return segments.map(function (s) {
return s.map(function (value, i) {
return {
x: xFn(value, i, s),
y: yFn(value, i, s)
};
});
});
}, [x, y, segments]);
var pathString = useMemo(function () {
var path = line({
x: x,
y: y,
defined: defined,
curve: curve
});
return path(segments.flat()) || '';
}, [x, y, defined, curve, segments]);
var splitLineSegments = useMemo(function () {
return getSplitLineSegments({
path: pathString,
segmentation: segmentation,
pointsInSegments: pointsInSegments,
sampleRate: sampleRate
});
return computedLineSegments.map(function (segment, index) {
return children ? children({
index: index,
segment: segment,
styles: styles[index] || styles[index % styles.length]
}) : /*#__PURE__*/React.createElement(LinePath, _extends({
key: index,
className: className,
data: segment,
x: function x(d) {
return d.x || 0;
},
y: function y(d) {
return d.y || 0;
}
}, styles[index] || styles[index % styles.length]));
});
});
}, [pathString, segmentation, pointsInSegments, sampleRate]);
return /*#__PURE__*/React.createElement("g", null, splitLineSegments.map(function (segment, index) {
return children ? children({
index: index,
segment: segment,
styles: styles[index] || styles[index % styles.length]
}) : /*#__PURE__*/React.createElement(LinePath, _extends({
key: index,
className: className,
data: segment,
x: getX,
y: getY
}, styles[index] || styles[index % styles.length]));
}));
}

@@ -65,4 +84,3 @@ SplitLinePath.propTypes = {

children: _pt.func,
className: _pt.string,
sampleRate: _pt.number
className: _pt.string
};

@@ -1,51 +0,95 @@

import memoize from 'lodash/memoize';
import getOrCreateMeasurementElement from './getOrCreateMeasurementElement';
var MEASUREMENT_ELEMENT_ID = '__visx_splitpath_svg_path_measurement_id';
var SVG_NAMESPACE_URL = 'http://www.w3.org/2000/svg';
export function getSplitLineSegments(_ref) {
var TRUE = function TRUE() {
return true;
};
export default function getSplitLineSegments(_ref) {
var path = _ref.path,
segments = _ref.segments,
pointsInSegments = _ref.pointsInSegments,
_ref$segmentation = _ref.segmentation,
segmentation = _ref$segmentation === void 0 ? 'x' : _ref$segmentation,
_ref$sampleRate = _ref.sampleRate,
sampleRate = _ref$sampleRate === void 0 ? 0.25 : _ref$sampleRate;
sampleRate = _ref$sampleRate === void 0 ? 1 : _ref$sampleRate;
try {
var pathElement = document.getElementById(MEASUREMENT_ELEMENT_ID); // create a single path element if not done already
var pathElement = getOrCreateMeasurementElement(MEASUREMENT_ELEMENT_ID);
pathElement.setAttribute('d', path);
var totalLength = pathElement.getTotalLength();
var numSegments = pointsInSegments.length;
var lineSegments = pointsInSegments.map(function () {
return [];
});
if (!pathElement) {
var svg = document.createElementNS(SVG_NAMESPACE_URL, 'svg'); // not visible
if (segmentation === 'x' || segmentation === 'y') {
var segmentStarts = pointsInSegments.map(function (points) {
var _points$find;
svg.style.opacity = '0';
svg.style.width = '0';
svg.style.height = '0'; // off screen
return (_points$find = points.find(function (p) {
return typeof p[segmentation] === 'number';
})) == null ? void 0 : _points$find[segmentation];
});
var first = pathElement.getPointAtLength(0);
var last = pathElement.getPointAtLength(totalLength);
var isIncreasing = last[segmentation] > first[segmentation];
var isBeyondSegmentStart = isIncreasing ? segmentStarts.map(function (start) {
return typeof start === 'undefined' ? TRUE : function (xOrY) {
return xOrY >= start;
};
}) : segmentStarts.map(function (start) {
return typeof start === 'undefined' ? TRUE : function (xOrY) {
return xOrY <= start;
};
});
var currentSegment = 0;
svg.style.position = 'absolute';
svg.style.top = '-100%';
svg.style.left = '-100%'; // no mouse events
for (var distance = 0; distance <= totalLength; distance += sampleRate) {
var sample = pathElement.getPointAtLength(distance);
var position = sample[segmentation]; // find the current segment to which this sample belongs
svg.style.pointerEvents = 'none';
pathElement = document.createElementNS(SVG_NAMESPACE_URL, 'path');
pathElement.setAttribute('id', MEASUREMENT_ELEMENT_ID);
svg.appendChild(pathElement);
document.body.appendChild(svg);
}
while (currentSegment < numSegments - 1 && isBeyondSegmentStart[currentSegment + 1](position)) {
currentSegment += 1;
} // add sample to segment
pathElement.setAttribute('d', path);
var totalPathLength = pathElement.getTotalLength();
var totalPieces = segments.reduce(function (sum, curr) {
return sum + curr.length;
}, 0);
var pieceSize = totalPathLength / totalPieces;
var cumulativeSize = 0;
var lineSegments = segments.map(function (segment) {
var segmentPointCount = segment.length;
var coords = [];
for (var i = 0; i < segmentPointCount + sampleRate; i += sampleRate) {
var distance = (cumulativeSize + i) * pieceSize;
var point = pathElement.getPointAtLength(distance);
coords.push(point);
lineSegments[currentSegment].push(sample);
}
} else {
// segmentation === "length"
var numPointsInSegment = pointsInSegments.map(function (points) {
return points.length;
});
var numPoints = numPointsInSegment.reduce(function (sum, curr) {
return sum + curr;
}, 0);
var lengthBetweenPoints = totalLength / Math.max(1, numPoints - 1);
cumulativeSize += segmentPointCount;
return coords;
});
var _segmentStarts = numPointsInSegment.slice(0, numSegments - 1);
_segmentStarts.unshift(0);
for (var i = 2; i < numSegments; i += 1) {
_segmentStarts[i] += _segmentStarts[i - 1];
}
for (var _i = 0; _i < numSegments; _i += 1) {
_segmentStarts[_i] *= lengthBetweenPoints;
}
var _currentSegment = 0;
for (var _distance = 0; _distance <= totalLength; _distance += sampleRate) {
var _sample = pathElement.getPointAtLength(_distance); // find the current segment to which this sample belongs
while (_currentSegment < numSegments - 1 && _distance >= _segmentStarts[_currentSegment + 1]) {
_currentSegment += 1;
} // add sample to segment
lineSegments[_currentSegment].push(_sample);
}
}
return lineSegments;

@@ -55,10 +99,2 @@ } catch (e) {

}
}
export default memoize(getSplitLineSegments, function (_ref2) {
var path = _ref2.path,
segments = _ref2.segments,
sampleRate = _ref2.sampleRate;
return path + "_" + segments.length + "_" + segments.map(function (segment) {
return segment.length;
}).join('-') + "_" + sampleRate;
});
}
import React from 'react';
import { GetLineSegmentsConfig } from '../util/getSplitLineSegments';
import { LinePathConfig } from '../types';
declare type SplitLinePathProps<Datum> = {
export declare type SplitLinePathRenderer = (renderProps: {
index: number;
segment: {
x: number;
y: number;
}[];
styles?: Omit<React.SVGProps<SVGPathElement>, 'x' | 'y' | 'children'>;
}) => React.ReactNode;
export declare type SplitLinePathProps<Datum> = {
/** Array of data segments, where each segment will be a separate path in the rendered line. */

@@ -9,17 +18,7 @@ segments: Datum[][];

/** Override render function which is passed the configured path generator as input. */
children?: (renderProps: {
index: number;
segment: {
x: number;
y: number;
}[];
styles?: Omit<React.SVGProps<SVGPathElement>, 'x' | 'y' | 'children'>;
}) => React.ReactNode;
children?: SplitLinePathRenderer;
/** className applied to path element. */
className?: string;
/** Optionally specify the sample rate for interpolating line segments. */
sampleRate?: number;
} & LinePathConfig<Datum>;
export default function SplitLinePath<Datum>({ children, className, curve, defined, sampleRate, segments, x, y, styles, }: SplitLinePathProps<Datum>): JSX.Element;
export {};
} & LinePathConfig<Datum> & Pick<GetLineSegmentsConfig, 'segmentation' | 'sampleRate'>;
export default function SplitLinePath<Datum>({ children, className, curve, defined, segmentation, sampleRate, segments, x, y, styles, }: SplitLinePathProps<Datum>): JSX.Element;
//# sourceMappingURL=SplitLinePath.d.ts.map

@@ -10,6 +10,8 @@ "use strict";

var _getSplitLineSegments = _interopRequireDefault(require("../util/getSplitLineSegments"));
var _D3ShapeFactories = require("../util/D3ShapeFactories");
var _LinePath = _interopRequireDefault(require("./LinePath"));
var _getSplitLineSegments = _interopRequireDefault(require("../util/getSplitLineSegments"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

@@ -23,2 +25,10 @@

var getX = function getX(d) {
return d.x || 0;
};
var getY = function getY(d) {
return d.y || 0;
};
function SplitLinePath(_ref) {

@@ -29,2 +39,3 @@ var children = _ref.children,

defined = _ref.defined,
segmentation = _ref.segmentation,
sampleRate = _ref.sampleRate,

@@ -35,41 +46,49 @@ segments = _ref.segments,

styles = _ref.styles;
// combine data to first draw entire path
var combinedSegments = (0, _react.useMemo)(function () {
return segments.reduce(function (flat, segmentData) {
return flat.concat([].concat(segmentData));
}, []);
}, [segments]);
return /*#__PURE__*/_react.default.createElement(_LinePath.default, {
data: combinedSegments,
defined: defined,
curve: curve,
x: x,
y: y
}, function (_ref2) {
var path = _ref2.path;
// use entire path to interpolate individual segments
var entirePath = path(combinedSegments);
var computedLineSegments = (0, _getSplitLineSegments.default)({
path: entirePath || '',
segments: segments,
// Convert data in all segments to points.
var pointsInSegments = (0, _react.useMemo)(function () {
var xFn = typeof x === 'number' || typeof x === 'undefined' ? function () {
return x;
} : x;
var yFn = typeof y === 'number' || typeof y === 'undefined' ? function () {
return y;
} : y;
return segments.map(function (s) {
return s.map(function (value, i) {
return {
x: xFn(value, i, s),
y: yFn(value, i, s)
};
});
});
}, [x, y, segments]);
var pathString = (0, _react.useMemo)(function () {
var path = (0, _D3ShapeFactories.line)({
x: x,
y: y,
defined: defined,
curve: curve
});
return path(segments.flat()) || '';
}, [x, y, defined, curve, segments]);
var splitLineSegments = (0, _react.useMemo)(function () {
return (0, _getSplitLineSegments.default)({
path: pathString,
segmentation: segmentation,
pointsInSegments: pointsInSegments,
sampleRate: sampleRate
});
return computedLineSegments.map(function (segment, index) {
return children ? children({
index: index,
segment: segment,
styles: styles[index] || styles[index % styles.length]
}) : /*#__PURE__*/_react.default.createElement(_LinePath.default, _extends({
key: index,
className: className,
data: segment,
x: function x(d) {
return d.x || 0;
},
y: function y(d) {
return d.y || 0;
}
}, styles[index] || styles[index % styles.length]));
});
});
}, [pathString, segmentation, pointsInSegments, sampleRate]);
return /*#__PURE__*/_react.default.createElement("g", null, splitLineSegments.map(function (segment, index) {
return children ? children({
index: index,
segment: segment,
styles: styles[index] || styles[index % styles.length]
}) : /*#__PURE__*/_react.default.createElement(_LinePath.default, _extends({
key: index,
className: className,
data: segment,
x: getX,
y: getY
}, styles[index] || styles[index % styles.length]));
}));
}

@@ -81,4 +100,3 @@

children: _propTypes.default.func,
className: _propTypes.default.string,
sampleRate: _propTypes.default.number
className: _propTypes.default.string
};

@@ -1,20 +0,37 @@

/// <reference types="lodash" />
export interface GetLineSegmentsConfig<Datum> {
interface PointInSegment {
x: number | undefined;
y: number | undefined;
}
/** Different algorithms to segment the line */
export declare type LineSegmentation = 'x' | 'y' | 'length';
declare type LineSegments = {
x: number;
y: number;
}[][];
export interface GetLineSegmentsConfig {
/** Full path `d` attribute to be broken up into `n` segments. */
path: string;
/** Array of length `n`, where `n` is the number of segments. */
pointsInSegments: PointInSegment[][];
/**
* Array of length `n`, where `n` is the number of resulting line segments.
* For each segment of length `m`, `m / sampleRate` evenly spaced points will be returned.
* How to segment the line
* - `x`: Split based on x-position,
* assuming x values increase only (`segment[i].x > segment[i-1].x`)
* or decrease only (`segment[i].x < segment[i-1].x`).
* - `y`: Split based on y-position,
* assuming y values increase only (`segment[i].y > segment[i-1].y`)
* or decrease only (`segment[i].y < segment[i-1].y`).
* - `length`: Assuming the path length between consecutive points are equal.
*
* Default is `x`.
*/
segments: Datum[][];
/** For each segment of length `m`, `m / sampleRate` evenly spaced points will be returned. */
segmentation: LineSegmentation;
/**
* The `path` will be sampled every `sampleRate` pixel to generate the returned points.
* Default is `1` pixel.
*/
sampleRate?: number;
}
declare type LineSegments = {
x: number;
y: number;
}[][];
export declare function getSplitLineSegments<Datum>({ path, segments, sampleRate, }: GetLineSegmentsConfig<Datum>): LineSegments;
declare const _default: typeof getSplitLineSegments & import("lodash").MemoizedFunction;
export default _default;
export default function getSplitLineSegments({ path, pointsInSegments, segmentation, sampleRate, }: GetLineSegmentsConfig): LineSegments;
export {};
//# sourceMappingURL=getSplitLineSegments.d.ts.map
"use strict";
exports.__esModule = true;
exports.getSplitLineSegments = getSplitLineSegments;
exports.default = void 0;
exports.default = getSplitLineSegments;
var _memoize = _interopRequireDefault(require("lodash/memoize"));
var _getOrCreateMeasurementElement = _interopRequireDefault(require("./getOrCreateMeasurementElement"));

@@ -12,51 +11,94 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var MEASUREMENT_ELEMENT_ID = '__visx_splitpath_svg_path_measurement_id';
var SVG_NAMESPACE_URL = 'http://www.w3.org/2000/svg';
var TRUE = function TRUE() {
return true;
};
function getSplitLineSegments(_ref) {
var path = _ref.path,
segments = _ref.segments,
pointsInSegments = _ref.pointsInSegments,
_ref$segmentation = _ref.segmentation,
segmentation = _ref$segmentation === void 0 ? 'x' : _ref$segmentation,
_ref$sampleRate = _ref.sampleRate,
sampleRate = _ref$sampleRate === void 0 ? 0.25 : _ref$sampleRate;
sampleRate = _ref$sampleRate === void 0 ? 1 : _ref$sampleRate;
try {
var pathElement = document.getElementById(MEASUREMENT_ELEMENT_ID); // create a single path element if not done already
var pathElement = (0, _getOrCreateMeasurementElement.default)(MEASUREMENT_ELEMENT_ID);
pathElement.setAttribute('d', path);
var totalLength = pathElement.getTotalLength();
var numSegments = pointsInSegments.length;
var lineSegments = pointsInSegments.map(function () {
return [];
});
if (!pathElement) {
var svg = document.createElementNS(SVG_NAMESPACE_URL, 'svg'); // not visible
if (segmentation === 'x' || segmentation === 'y') {
var segmentStarts = pointsInSegments.map(function (points) {
var _points$find;
svg.style.opacity = '0';
svg.style.width = '0';
svg.style.height = '0'; // off screen
return (_points$find = points.find(function (p) {
return typeof p[segmentation] === 'number';
})) == null ? void 0 : _points$find[segmentation];
});
var first = pathElement.getPointAtLength(0);
var last = pathElement.getPointAtLength(totalLength);
var isIncreasing = last[segmentation] > first[segmentation];
var isBeyondSegmentStart = isIncreasing ? segmentStarts.map(function (start) {
return typeof start === 'undefined' ? TRUE : function (xOrY) {
return xOrY >= start;
};
}) : segmentStarts.map(function (start) {
return typeof start === 'undefined' ? TRUE : function (xOrY) {
return xOrY <= start;
};
});
var currentSegment = 0;
svg.style.position = 'absolute';
svg.style.top = '-100%';
svg.style.left = '-100%'; // no mouse events
for (var distance = 0; distance <= totalLength; distance += sampleRate) {
var sample = pathElement.getPointAtLength(distance);
var position = sample[segmentation]; // find the current segment to which this sample belongs
svg.style.pointerEvents = 'none';
pathElement = document.createElementNS(SVG_NAMESPACE_URL, 'path');
pathElement.setAttribute('id', MEASUREMENT_ELEMENT_ID);
svg.appendChild(pathElement);
document.body.appendChild(svg);
}
while (currentSegment < numSegments - 1 && isBeyondSegmentStart[currentSegment + 1](position)) {
currentSegment += 1;
} // add sample to segment
pathElement.setAttribute('d', path);
var totalPathLength = pathElement.getTotalLength();
var totalPieces = segments.reduce(function (sum, curr) {
return sum + curr.length;
}, 0);
var pieceSize = totalPathLength / totalPieces;
var cumulativeSize = 0;
var lineSegments = segments.map(function (segment) {
var segmentPointCount = segment.length;
var coords = [];
for (var i = 0; i < segmentPointCount + sampleRate; i += sampleRate) {
var distance = (cumulativeSize + i) * pieceSize;
var point = pathElement.getPointAtLength(distance);
coords.push(point);
lineSegments[currentSegment].push(sample);
}
} else {
// segmentation === "length"
var numPointsInSegment = pointsInSegments.map(function (points) {
return points.length;
});
var numPoints = numPointsInSegment.reduce(function (sum, curr) {
return sum + curr;
}, 0);
var lengthBetweenPoints = totalLength / Math.max(1, numPoints - 1);
cumulativeSize += segmentPointCount;
return coords;
});
var _segmentStarts = numPointsInSegment.slice(0, numSegments - 1);
_segmentStarts.unshift(0);
for (var i = 2; i < numSegments; i += 1) {
_segmentStarts[i] += _segmentStarts[i - 1];
}
for (var _i = 0; _i < numSegments; _i += 1) {
_segmentStarts[_i] *= lengthBetweenPoints;
}
var _currentSegment = 0;
for (var _distance = 0; _distance <= totalLength; _distance += sampleRate) {
var _sample = pathElement.getPointAtLength(_distance); // find the current segment to which this sample belongs
while (_currentSegment < numSegments - 1 && _distance >= _segmentStarts[_currentSegment + 1]) {
_currentSegment += 1;
} // add sample to segment
lineSegments[_currentSegment].push(_sample);
}
}
return lineSegments;

@@ -66,13 +108,2 @@ } catch (e) {

}
}
var _default = (0, _memoize.default)(getSplitLineSegments, function (_ref2) {
var path = _ref2.path,
segments = _ref2.segments,
sampleRate = _ref2.sampleRate;
return path + "_" + segments.length + "_" + segments.map(function (segment) {
return segment.length;
}).join('-') + "_" + sampleRate;
});
exports.default = _default;
}
{
"name": "@visx/shape",
"version": "1.14.0",
"version": "1.16.0",
"description": "visx shape",

@@ -48,3 +48,3 @@ "sideEffects": false,

},
"gitHead": "9c209f6d7d582f642c4bbb3af2f39db84b763f58"
"gitHead": "1b549312c37f23d7145b518ca00fcc889d3cb47a"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc