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

victory-canvas

Package Overview
Dependencies
Maintainers
17
Versions
53
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

victory-canvas - npm Package Compare versions

Comparing version 36.8.1 to 36.8.2

es/canvas-bar.d.ts
es/canvas-curve.d.ts
es/canvas-group.d.ts
es/canvas-point.d.ts
es/hooks/use-canvas-context.d.ts
lib/canvas-bar.d.ts
lib/canvas-curve.d.ts
lib/canvas-group.d.ts
lib/canvas-point.d.ts
lib/hooks/use-canvas-context.d.ts
src/canvas-bar.tsx
src/canvas-curve.tsx
src/canvas-group.tsx
src/canvas-point.tsx
src/hooks/use-canvas-context.ts
src/index.ts

6

CHANGELOG.md
# victory-canvas
## 36.8.2
### Patch Changes
- Migrate victory-canvas to TypeScript ([#2710](https://github.com/FormidableLabs/victory/pull/2710))
## 36.8.1

@@ -4,0 +10,0 @@

70

es/canvas-bar.js
import _assign from "lodash/assign";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import PropTypes from "prop-types";
import React from "react";
import { getBarPath, getBarWidth, getCornerRadius, getPolarBarPath, getStyle } from "victory-bar";
import { useCanvasContext } from "./hooks/use-canvas-context";
import { CommonProps } from "victory-core";

@@ -30,3 +21,4 @@ var evaluateProps = function (props) {

}));
return _assign({}, props, {
var modifiedProps = _assign({}, props, {
style: style,

@@ -36,5 +28,7 @@ barWidth: barWidth,

});
return modifiedProps;
};
export var usePreviousValue = function (value) {
var usePreviousValue = function (value) {
var ref = React.useRef();

@@ -47,16 +41,16 @@ React.useEffect(function () {

var CanvasBar = function (initialProps) {
export var CanvasBar = function (props) {
var _useCanvasContext = useCanvasContext(),
canvasRef = _useCanvasContext.canvasRef;
var props = evaluateProps(initialProps);
var polar = props.polar,
style = props.style,
barWidth = props.barWidth,
cornerRadius = props.cornerRadius,
origin = props.origin;
var modifiedProps = evaluateProps(props);
var polar = modifiedProps.polar,
style = modifiedProps.style,
barWidth = modifiedProps.barWidth,
cornerRadius = modifiedProps.cornerRadius,
origin = modifiedProps.origin;
var path2d = React.useMemo(function () {
var p = polar ? getPolarBarPath(props, cornerRadius) : getBarPath(props, barWidth, cornerRadius);
var p = polar ? getPolarBarPath(modifiedProps, cornerRadius) : getBarPath(modifiedProps, barWidth, cornerRadius);
return new Path2D(p);
}, [polar, barWidth, cornerRadius, props]);
}, [polar, barWidth, cornerRadius, modifiedProps]);
var previousPath = usePreviousValue(path2d);

@@ -70,3 +64,3 @@ var draw = React.useCallback(function (ctx, path) {

if (polar) {
ctx.translate(origin.x, origin.y);
ctx.translate((origin === null || origin === void 0 ? void 0 : origin.x) || 0, (origin === null || origin === void 0 ? void 0 : origin.y) || 0);
}

@@ -82,3 +76,4 @@

ctx.lineWidth = style.strokeWidth + 2;
var strokeWidth = style.strokeWidth || 0;
ctx.lineWidth = strokeWidth + 2;
ctx.globalCompositeOperation = "destination-out";

@@ -91,29 +86,10 @@ draw(ctx, previousPath);

React.useEffect(function () {
var ctx = canvasRef.current.getContext("2d");
var _canvasRef$current;
var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext("2d");
if (!ctx) return;
clearPreviousPath(ctx);
draw(ctx, path2d);
}, [canvasRef, draw, polar, barWidth, cornerRadius, props, path2d, clearPreviousPath]);
}, [canvasRef, draw, polar, barWidth, cornerRadius, modifiedProps, path2d, clearPreviousPath]);
return null;
};
CanvasBar.propTypes = _objectSpread(_objectSpread({}, CommonProps.primitiveProps), {}, {
alignment: PropTypes.oneOf(["start", "middle", "end"]),
barRatio: PropTypes.number,
barWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func, PropTypes.shape({
top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
})]),
datum: PropTypes.object,
getPath: PropTypes.func,
horizontal: PropTypes.bool,
width: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number,
y0: PropTypes.number
});
export default CanvasBar;
};

27

es/canvas-curve.js

@@ -1,13 +0,5 @@

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import PropTypes from "prop-types";
import React from "react";
import { CommonProps, LineHelpers } from "victory-core";
import { LineHelpers } from "victory-core";
import { useCanvasContext } from "./hooks/use-canvas-context";
var CanvasCurve = function (props) {
export var CanvasCurve = function (props) {
var _useCanvasContext = useCanvasContext(),

@@ -30,3 +22,6 @@ canvasRef = _useCanvasContext.canvasRef,

React.useEffect(function () {
var ctx = canvasRef.current.getContext("2d");
var _canvasRef$current;
var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext("2d");
if (!ctx) return;
clear(ctx);

@@ -37,10 +32,2 @@ draw(ctx);

return null;
};
CanvasCurve.propTypes = _objectSpread(_objectSpread({}, CommonProps.primitiveProps), {}, {
interpolation: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
openCurve: PropTypes.bool,
origin: PropTypes.object,
polar: PropTypes.bool
});
export default CanvasCurve;
};

38

es/canvas-group.js
import React from "react";
import { CanvasContext } from "./hooks/use-canvas-context";
import PropTypes from "prop-types";
import { PropTypes as CustomPropTypes } from "victory-core";
var CanvasGroup = function (props) {
var canvasRef = React.useRef();
export var CanvasGroup = function (props) {
var canvasRef = React.useRef(null);
var children = props.children,
width = props.width,
height = props.height,
_props$width = props.width,
width = _props$width === void 0 ? 0 : _props$width,
_props$height = props.height,
height = _props$height === void 0 ? 0 : _props$height,
clipWidth = props.clipWidth,

@@ -19,4 +18,6 @@ padding = props.padding;

var clip = React.useCallback(function (ctx) {
var maxClipWidth = width - padding.right - padding.left;
ctx.clearRect(width - padding.right, 0, (maxClipWidth - clipWidth) * -1, height);
var paddingRight = typeof padding === "number" ? padding : (padding === null || padding === void 0 ? void 0 : padding.right) || 0;
var paddingLeft = typeof padding === "number" ? padding : (padding === null || padding === void 0 ? void 0 : padding.left) || 0;
var maxClipWidth = width - paddingRight - paddingLeft;
ctx.clearRect(width - paddingRight, 0, clipWidth ? (maxClipWidth - clipWidth) * -1 : 0, height);
}, [width, height, padding, clipWidth]);

@@ -40,19 +41,2 @@ return /*#__PURE__*/React.createElement(CanvasContext.Provider, {

};
CanvasGroup.propTypes = {
"aria-label": PropTypes.string,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
className: PropTypes.string,
clipWidth: CustomPropTypes.nonNegative,
height: PropTypes.number,
padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
top: PropTypes.number,
bottom: PropTypes.number,
left: PropTypes.number,
right: PropTypes.number
})]),
width: PropTypes.number
};
CanvasGroup.role = "container";
CanvasGroup.displayName = "CanvasGroup";
export default CanvasGroup;
CanvasGroup.role = "container";

35

es/canvas-point.js
import _assign from "lodash/assign";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from "react";
import PropTypes from "prop-types";
import { Helpers, CommonProps, PointPathHelpers } from "victory-core";
import { Helpers, PointPathHelpers } from "victory-core";
import { useCanvasContext } from "./hooks/use-canvas-context";

@@ -56,10 +48,10 @@

var CanvasPoint = function (initialProps) {
export var CanvasPoint = function (props) {
var _useCanvasContext = useCanvasContext(),
canvasRef = _useCanvasContext.canvasRef;
var props = evaluateProps(initialProps);
var modifiedProps = evaluateProps(props);
var draw = React.useCallback(function (ctx) {
var style = props.style;
var path = getPath(props);
var style = modifiedProps.style;
var path = getPath(modifiedProps);
ctx.fillStyle = style.fill; // eslint-disable-next-line no-undef

@@ -69,16 +61,11 @@

ctx.fill(path2d);
}, [props]);
}, [modifiedProps]);
React.useEffect(function () {
var ctx = canvasRef.current.getContext("2d");
var _canvasRef$current;
var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext("2d");
if (!ctx) return;
draw(ctx); // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return null;
};
CanvasPoint.propTypes = _objectSpread(_objectSpread({}, CommonProps.primitiveProps), {}, {
datum: PropTypes.object,
size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
x: PropTypes.number,
y: PropTypes.number
});
export default CanvasPoint;
};

2

es/hooks/use-canvas-context.js
import React from "react";
export var CanvasContext = /*#__PURE__*/React.createContext();
export var CanvasContext = /*#__PURE__*/React.createContext(undefined);
export var useCanvasContext = function () {

@@ -4,0 +4,0 @@ var context = React.useContext(CanvasContext);

79

es/index.d.ts

@@ -1,73 +0,6 @@

import { VictoryBarAlignmentType } from "victory-bar";
import {
VictoryCommonPrimitiveProps,
NumberOrCallback,
StringOrCallback,
ScatterSymbolType,
PaddingProps,
} from "victory-core";
import * as React from "react";
export interface CanvasBarProps extends VictoryCommonPrimitiveProps {
alignment?: VictoryBarAlignmentType;
barOffset?: number[];
barRatio?: number;
barWidth?: NumberOrCallback;
cornerRadius?:
| NumberOrCallback
| {
top?: NumberOrCallback;
topLeft?: NumberOrCallback;
topRight?: NumberOrCallback;
bottom?: NumberOrCallback;
bottomLeft?: NumberOrCallback;
bottomRight?: NumberOrCallback;
};
datum?: any;
getPath?: Function;
horizontal?: boolean;
width?: number;
x?: number;
y?: number;
y0?: number;
}
export class CanvasBar extends React.Component<CanvasBarProps, any> {}
export interface CanvasCurveProps extends VictoryCommonPrimitiveProps {
ariaLabel?: StringOrCallback;
interpolation?: string | Function;
openCurve?: boolean;
tabIndex?: NumberOrCallback;
}
export class CanvasCurve extends React.Component<CanvasCurveProps> {}
export interface CanvasPointProps extends VictoryCommonPrimitiveProps {
datum?: any;
getPath?: (x: number, y: number, size: number) => string;
size?: number | Function;
symbol?: ScatterSymbolType | Function;
x?: number;
y?: number;
}
export class CanvasPoint extends React.Component<CanvasPointProps> {}
export interface CanvasGroupProps {
children?: React.ReactNode | React.ReactNode[];
clipWidth?: number;
height?: number;
padding?: PaddingProps;
width?: number;
}
export class CanvasGroup extends React.Component<CanvasGroupProps, any> {}
export interface CanvasContextValue {
canvasRef: React.RefObject<HTMLCanvasElement>;
clear(ctx: CanvasRenderingContext2D): void;
clip(ctx: CanvasRenderingContext2D): void;
}
export const useCanvasContext: () => CanvasContextValue;
export * from "./canvas-bar";
export * from "./canvas-group";
export * from "./canvas-curve";
export * from "./canvas-point";
export { useCanvasContext } from "./hooks/use-canvas-context";
//# sourceMappingURL=index.d.ts.map

8

es/index.js

@@ -1,5 +0,5 @@

export { default as CanvasBar } from "./canvas-bar";
export { default as CanvasGroup } from "./canvas-group";
export { default as CanvasCurve } from "./canvas-curve";
export { default as CanvasPoint } from "./canvas-point";
export * from "./canvas-bar";
export * from "./canvas-group";
export * from "./canvas-curve";
export * from "./canvas-point";
export { useCanvasContext } from "./hooks/use-canvas-context";

70

lib/canvas-bar.js

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

});
exports.usePreviousValue = exports.default = void 0;
exports.CanvasBar = void 0;
var _assign2 = _interopRequireDefault(require("lodash/assign"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));

@@ -19,12 +17,4 @@

var _victoryCore = require("victory-core");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var evaluateProps = function (props) {

@@ -45,3 +35,3 @@ /**

}));
return (0, _assign2.default)({}, props, {
var modifiedProps = (0, _assign2.default)({}, props, {
style: style,

@@ -51,2 +41,3 @@ barWidth: barWidth,

});
return modifiedProps;
};

@@ -64,19 +55,17 @@

exports.usePreviousValue = usePreviousValue;
var CanvasBar = function (initialProps) {
var CanvasBar = function (props) {
var _useCanvasContext = (0, _useCanvasContext2.useCanvasContext)(),
canvasRef = _useCanvasContext.canvasRef;
var props = evaluateProps(initialProps);
var polar = props.polar,
style = props.style,
barWidth = props.barWidth,
cornerRadius = props.cornerRadius,
origin = props.origin;
var modifiedProps = evaluateProps(props);
var polar = modifiedProps.polar,
style = modifiedProps.style,
barWidth = modifiedProps.barWidth,
cornerRadius = modifiedProps.cornerRadius,
origin = modifiedProps.origin;
var path2d = _react.default.useMemo(function () {
var p = polar ? (0, _victoryBar.getPolarBarPath)(props, cornerRadius) : (0, _victoryBar.getBarPath)(props, barWidth, cornerRadius);
var p = polar ? (0, _victoryBar.getPolarBarPath)(modifiedProps, cornerRadius) : (0, _victoryBar.getBarPath)(modifiedProps, barWidth, cornerRadius);
return new Path2D(p);
}, [polar, barWidth, cornerRadius, props]);
}, [polar, barWidth, cornerRadius, modifiedProps]);

@@ -92,3 +81,3 @@ var previousPath = usePreviousValue(path2d);

if (polar) {
ctx.translate(origin.x, origin.y);
ctx.translate((origin === null || origin === void 0 ? void 0 : origin.x) || 0, (origin === null || origin === void 0 ? void 0 : origin.y) || 0);
}

@@ -105,3 +94,4 @@

ctx.lineWidth = style.strokeWidth + 2;
var strokeWidth = style.strokeWidth || 0;
ctx.lineWidth = strokeWidth + 2;
ctx.globalCompositeOperation = "destination-out";

@@ -115,6 +105,9 @@ draw(ctx, previousPath);

_react.default.useEffect(function () {
var ctx = canvasRef.current.getContext("2d");
var _canvasRef$current;
var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext("2d");
if (!ctx) return;
clearPreviousPath(ctx);
draw(ctx, path2d);
}, [canvasRef, draw, polar, barWidth, cornerRadius, props, path2d, clearPreviousPath]);
}, [canvasRef, draw, polar, barWidth, cornerRadius, modifiedProps, path2d, clearPreviousPath]);

@@ -124,23 +117,2 @@ return null;

CanvasBar.propTypes = _objectSpread(_objectSpread({}, _victoryCore.CommonProps.primitiveProps), {}, {
alignment: _propTypes.default.oneOf(["start", "middle", "end"]),
barRatio: _propTypes.default.number,
barWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
cornerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func, _propTypes.default.shape({
top: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
topLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
topRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
bottom: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
bottomLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
bottomRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func])
})]),
datum: _propTypes.default.object,
getPath: _propTypes.default.func,
horizontal: _propTypes.default.bool,
width: _propTypes.default.number,
x: _propTypes.default.number,
y: _propTypes.default.number,
y0: _propTypes.default.number
});
var _default = CanvasBar;
exports.default = _default;
exports.CanvasBar = CanvasBar;

24

lib/canvas-curve.js

@@ -6,6 +6,4 @@ "use strict";

});
exports.default = void 0;
exports.CanvasCurve = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));

@@ -19,8 +17,2 @@

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var CanvasCurve = function (props) {

@@ -47,3 +39,6 @@ var _useCanvasContext = (0, _useCanvasContext2.useCanvasContext)(),

_react.default.useEffect(function () {
var ctx = canvasRef.current.getContext("2d");
var _canvasRef$current;
var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext("2d");
if (!ctx) return;
clear(ctx);

@@ -57,9 +52,2 @@ draw(ctx);

CanvasCurve.propTypes = _objectSpread(_objectSpread({}, _victoryCore.CommonProps.primitiveProps), {}, {
interpolation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
openCurve: _propTypes.default.bool,
origin: _propTypes.default.object,
polar: _propTypes.default.bool
});
var _default = CanvasCurve;
exports.default = _default;
exports.CanvasCurve = CanvasCurve;

40

lib/canvas-group.js

@@ -6,3 +6,3 @@ "use strict";

});
exports.default = void 0;
exports.CanvasGroup = void 0;

@@ -13,14 +13,12 @@ var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));
var _victoryCore = require("victory-core");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var CanvasGroup = function (props) {
var canvasRef = _react.default.useRef();
var canvasRef = _react.default.useRef(null);
var children = props.children,
width = props.width,
height = props.height,
_props$width = props.width,
width = _props$width === void 0 ? 0 : _props$width,
_props$height = props.height,
height = _props$height === void 0 ? 0 : _props$height,
clipWidth = props.clipWidth,

@@ -36,4 +34,6 @@ padding = props.padding;

var clip = _react.default.useCallback(function (ctx) {
var maxClipWidth = width - padding.right - padding.left;
ctx.clearRect(width - padding.right, 0, (maxClipWidth - clipWidth) * -1, height);
var paddingRight = typeof padding === "number" ? padding : (padding === null || padding === void 0 ? void 0 : padding.right) || 0;
var paddingLeft = typeof padding === "number" ? padding : (padding === null || padding === void 0 ? void 0 : padding.left) || 0;
var maxClipWidth = width - paddingRight - paddingLeft;
ctx.clearRect(width - paddingRight, 0, clipWidth ? (maxClipWidth - clipWidth) * -1 : 0, height);
}, [width, height, padding, clipWidth]);

@@ -59,19 +59,3 @@

CanvasGroup.propTypes = {
"aria-label": _propTypes.default.string,
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
className: _propTypes.default.string,
clipWidth: _victoryCore.PropTypes.nonNegative,
height: _propTypes.default.number,
padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
top: _propTypes.default.number,
bottom: _propTypes.default.number,
left: _propTypes.default.number,
right: _propTypes.default.number
})]),
width: _propTypes.default.number
};
CanvasGroup.role = "container";
CanvasGroup.displayName = "CanvasGroup";
var _default = CanvasGroup;
exports.default = _default;
exports.CanvasGroup = CanvasGroup;
CanvasGroup.role = "container";

34

lib/canvas-point.js

@@ -6,3 +6,3 @@ "use strict";

});
exports.default = void 0;
exports.CanvasPoint = void 0;

@@ -13,4 +13,2 @@ var _assign2 = _interopRequireDefault(require("lodash/assign"));

var _propTypes = _interopRequireDefault(require("prop-types"));
var _victoryCore = require("victory-core");

@@ -22,8 +20,2 @@

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var getPath = function (props) {

@@ -74,11 +66,11 @@ var x = props.x,

var CanvasPoint = function (initialProps) {
var CanvasPoint = function (props) {
var _useCanvasContext = (0, _useCanvasContext2.useCanvasContext)(),
canvasRef = _useCanvasContext.canvasRef;
var props = evaluateProps(initialProps);
var modifiedProps = evaluateProps(props);
var draw = _react.default.useCallback(function (ctx) {
var style = props.style;
var path = getPath(props);
var style = modifiedProps.style;
var path = getPath(modifiedProps);
ctx.fillStyle = style.fill; // eslint-disable-next-line no-undef

@@ -88,6 +80,9 @@

ctx.fill(path2d);
}, [props]);
}, [modifiedProps]);
_react.default.useEffect(function () {
var ctx = canvasRef.current.getContext("2d");
var _canvasRef$current;
var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext("2d");
if (!ctx) return;
draw(ctx); // eslint-disable-next-line react-hooks/exhaustive-deps

@@ -99,9 +94,2 @@ }, []);

CanvasPoint.propTypes = _objectSpread(_objectSpread({}, _victoryCore.CommonProps.primitiveProps), {}, {
datum: _propTypes.default.object,
size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
x: _propTypes.default.number,
y: _propTypes.default.number
});
var _default = CanvasPoint;
exports.default = _default;
exports.CanvasPoint = CanvasPoint;

2

lib/hooks/use-canvas-context.js

@@ -12,3 +12,3 @@ "use strict";

var CanvasContext = /*#__PURE__*/_react.default.createContext();
var CanvasContext = /*#__PURE__*/_react.default.createContext(undefined);

@@ -15,0 +15,0 @@ exports.CanvasContext = CanvasContext;

79

lib/index.d.ts

@@ -1,73 +0,6 @@

import { VictoryBarAlignmentType } from "victory-bar";
import {
VictoryCommonPrimitiveProps,
NumberOrCallback,
StringOrCallback,
ScatterSymbolType,
PaddingProps,
} from "victory-core";
import * as React from "react";
export interface CanvasBarProps extends VictoryCommonPrimitiveProps {
alignment?: VictoryBarAlignmentType;
barOffset?: number[];
barRatio?: number;
barWidth?: NumberOrCallback;
cornerRadius?:
| NumberOrCallback
| {
top?: NumberOrCallback;
topLeft?: NumberOrCallback;
topRight?: NumberOrCallback;
bottom?: NumberOrCallback;
bottomLeft?: NumberOrCallback;
bottomRight?: NumberOrCallback;
};
datum?: any;
getPath?: Function;
horizontal?: boolean;
width?: number;
x?: number;
y?: number;
y0?: number;
}
export class CanvasBar extends React.Component<CanvasBarProps, any> {}
export interface CanvasCurveProps extends VictoryCommonPrimitiveProps {
ariaLabel?: StringOrCallback;
interpolation?: string | Function;
openCurve?: boolean;
tabIndex?: NumberOrCallback;
}
export class CanvasCurve extends React.Component<CanvasCurveProps> {}
export interface CanvasPointProps extends VictoryCommonPrimitiveProps {
datum?: any;
getPath?: (x: number, y: number, size: number) => string;
size?: number | Function;
symbol?: ScatterSymbolType | Function;
x?: number;
y?: number;
}
export class CanvasPoint extends React.Component<CanvasPointProps> {}
export interface CanvasGroupProps {
children?: React.ReactNode | React.ReactNode[];
clipWidth?: number;
height?: number;
padding?: PaddingProps;
width?: number;
}
export class CanvasGroup extends React.Component<CanvasGroupProps, any> {}
export interface CanvasContextValue {
canvasRef: React.RefObject<HTMLCanvasElement>;
clear(ctx: CanvasRenderingContext2D): void;
clip(ctx: CanvasRenderingContext2D): void;
}
export const useCanvasContext: () => CanvasContextValue;
export * from "./canvas-bar";
export * from "./canvas-group";
export * from "./canvas-curve";
export * from "./canvas-point";
export { useCanvasContext } from "./hooks/use-canvas-context";
//# sourceMappingURL=index.d.ts.map

85

lib/index.js

@@ -6,26 +6,5 @@ "use strict";

});
Object.defineProperty(exports, "CanvasBar", {
enumerable: true,
get: function () {
return _canvasBar.default;
}
});
Object.defineProperty(exports, "CanvasCurve", {
enumerable: true,
get: function () {
return _canvasCurve.default;
}
});
Object.defineProperty(exports, "CanvasGroup", {
enumerable: true,
get: function () {
return _canvasGroup.default;
}
});
Object.defineProperty(exports, "CanvasPoint", {
enumerable: true,
get: function () {
return _canvasPoint.default;
}
});
var _exportNames = {
useCanvasContext: true
};
Object.defineProperty(exports, "useCanvasContext", {

@@ -38,12 +17,58 @@ enumerable: true,

var _canvasBar = _interopRequireDefault(require("./canvas-bar"));
var _canvasBar = require("./canvas-bar");
var _canvasGroup = _interopRequireDefault(require("./canvas-group"));
Object.keys(_canvasBar).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _canvasBar[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _canvasBar[key];
}
});
});
var _canvasCurve = _interopRequireDefault(require("./canvas-curve"));
var _canvasGroup = require("./canvas-group");
var _canvasPoint = _interopRequireDefault(require("./canvas-point"));
Object.keys(_canvasGroup).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _canvasGroup[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _canvasGroup[key];
}
});
});
var _useCanvasContext = require("./hooks/use-canvas-context");
var _canvasCurve = require("./canvas-curve");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Object.keys(_canvasCurve).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _canvasCurve[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _canvasCurve[key];
}
});
});
var _canvasPoint = require("./canvas-point");
Object.keys(_canvasPoint).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _canvasPoint[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _canvasPoint[key];
}
});
});
var _useCanvasContext = require("./hooks/use-canvas-context");

6

package.json
{
"name": "victory-canvas",
"version": "36.8.1",
"version": "36.8.2",
"description": "HTML5 Canvas Components for Victory",

@@ -25,4 +25,4 @@ "keywords": [

"prop-types": "^15.8.1",
"victory-bar": "^36.8.1",
"victory-core": "^36.8.1"
"victory-bar": "^36.8.2",
"victory-core": "^36.8.2"
},

@@ -29,0 +29,0 @@ "peerDependencies": {

src/canvas-bar.js
src/canvas-curve.js
src/canvas-group.js
src/canvas-point.js
src/hooks/use-canvas-context.js
src/index.d.ts
src/index.js
dist/victory-canvas.js

Sorry, the diff of this file is too big to display

dist/victory-canvas.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc