@pie-lib/graphing 2.14.9-next.0 → 2.14.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/lib/bg.js +14 -11
- package/lib/bg.js.map +1 -1
- package/package.json +3 -3
- package/src/bg.jsx +17 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.14.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.14.8...@pie-lib/graphing@2.14.9) (2023-08-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **graphing:** adjust ploting position to match with the gridlines PD-3005 ([23c5727](https://github.com/pie-framework/pie-lib/commit/23c5727124309b6723517bbacbecd1c938858e6a))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [2.14.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.14.7...@pie-lib/graphing@2.14.8) (2023-08-21)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @pie-lib/graphing
|
package/lib/bg.js
CHANGED
|
@@ -50,14 +50,22 @@ var Bg = /*#__PURE__*/function (_React$Component) {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
53
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getRectPadding", function () {
|
|
54
|
+
var graphProps = _this.props.graphProps;
|
|
55
|
+
return (0, _utils.thinnerShapesNeeded)(graphProps) ? 6 : 10;
|
|
56
|
+
});
|
|
53
57
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRectClick", function (rect) {
|
|
54
58
|
var _this$props = _this.props,
|
|
55
59
|
onClick = _this$props.onClick,
|
|
56
60
|
graphProps = _this$props.graphProps;
|
|
57
61
|
var scale = graphProps.scale;
|
|
58
|
-
|
|
59
|
-
var
|
|
60
|
-
|
|
62
|
+
|
|
63
|
+
var padding = _this.getRectPadding();
|
|
64
|
+
|
|
65
|
+
var coords = (0, _d3Selection.mouse)(rect._groups[0][0]); // decrease the padding from coordinates to indicate the correct point clicked
|
|
66
|
+
|
|
67
|
+
var x = scale.x.invert(coords[0] - padding);
|
|
68
|
+
var y = scale.y.invert(coords[1] - padding);
|
|
61
69
|
var rowTicks = (0, _utils.getTickValues)(graphProps.range);
|
|
62
70
|
var columnTicks = (0, _utils.getTickValues)(graphProps.domain);
|
|
63
71
|
|
|
@@ -95,11 +103,6 @@ var Bg = /*#__PURE__*/function (_React$Component) {
|
|
|
95
103
|
value: function shouldComponentUpdate(nextProps) {
|
|
96
104
|
return !_plot.utils.isDomainRangeEqual(this.props.graphProps, nextProps.graphProps) || this.props.width !== nextProps.width || this.props.height !== nextProps.height;
|
|
97
105
|
}
|
|
98
|
-
/**
|
|
99
|
-
* Note: we use d3 click + mouse to give us domain values directly.
|
|
100
|
-
* Saves us having to calculate them ourselves from a MouseEvent.
|
|
101
|
-
*/
|
|
102
|
-
|
|
103
106
|
}, {
|
|
104
107
|
key: "render",
|
|
105
108
|
value: function render() {
|
|
@@ -107,9 +110,9 @@ var Bg = /*#__PURE__*/function (_React$Component) {
|
|
|
107
110
|
|
|
108
111
|
var _this$props2 = this.props,
|
|
109
112
|
width = _this$props2.width,
|
|
110
|
-
height = _this$props2.height
|
|
111
|
-
|
|
112
|
-
|
|
113
|
+
height = _this$props2.height;
|
|
114
|
+
var padding = this.getRectPadding(); // expand the size of clickable area so a small area outside the edges of the grid lines to be clickable
|
|
115
|
+
|
|
113
116
|
return /*#__PURE__*/_react["default"].createElement("rect", {
|
|
114
117
|
ref: function ref(rect) {
|
|
115
118
|
return _this2.rect = rect;
|
package/lib/bg.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/bg.jsx"],"names":["Bg","
|
|
1
|
+
{"version":3,"sources":["../src/bg.jsx"],"names":["Bg","graphProps","props","rect","onClick","scale","padding","getRectPadding","coords","_groups","x","invert","y","rowTicks","range","columnTicks","domain","closest","ticks","value","length","reduce","prev","curr","currentDistance","Math","abs","previousDistance","snapped","indexOf","on","onRectClick","bind","nextProps","utils","isDomainRangeEqual","width","height","React","Component","PropTypes","number","isRequired","func","types","GraphPropsType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { select, mouse } from 'd3-selection';\nimport { types, utils } from '@pie-lib/plot';\nimport { getTickValues, thinnerShapesNeeded } from './utils';\n\nexport default class Bg extends React.Component {\n static propTypes = {\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n onClick: PropTypes.func.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n };\n\n static defaultProps = {};\n\n componentDidMount() {\n const rect = select(this.rect);\n\n rect.on('click', this.onRectClick.bind(this, rect));\n }\n\n shouldComponentUpdate(nextProps) {\n return (\n !utils.isDomainRangeEqual(this.props.graphProps, nextProps.graphProps) ||\n this.props.width !== nextProps.width ||\n this.props.height !== nextProps.height\n );\n }\n\n getRectPadding = () => {\n const { graphProps } = this.props;\n\n return thinnerShapesNeeded(graphProps) ? 6 : 10;\n };\n\n /**\n * Note: we use d3 click + mouse to give us domain values directly.\n * Saves us having to calculate them ourselves from a MouseEvent.\n */\n onRectClick = (rect) => {\n const { onClick, graphProps } = this.props;\n const { scale } = graphProps;\n\n const padding = this.getRectPadding();\n const coords = mouse(rect._groups[0][0]);\n\n // decrease the padding from coordinates to indicate the correct point clicked\n const x = scale.x.invert(coords[0] - padding);\n const y = scale.y.invert(coords[1] - padding);\n\n const rowTicks = getTickValues(graphProps.range);\n const columnTicks = getTickValues(graphProps.domain);\n\n const closest = (ticks, value) => {\n return (\n ticks.length &&\n ticks.reduce((prev, curr) => {\n const currentDistance = Math.abs(curr - value);\n const previousDistance = Math.abs(prev - value);\n\n return currentDistance <= previousDistance ? curr : prev;\n })\n );\n };\n\n let snapped = {};\n\n if (columnTicks.indexOf(x) >= 0 && rowTicks.indexOf(y) >= 0) {\n snapped.x = x;\n snapped.y = y;\n } else {\n snapped.x = closest(columnTicks, x);\n snapped.y = closest(rowTicks, y);\n }\n\n onClick(snapped);\n };\n\n render() {\n const { width, height } = this.props;\n const padding = this.getRectPadding();\n\n // expand the size of clickable area so a small area outside the edges of the grid lines to be clickable\n return (\n <rect\n ref={(rect) => (this.rect = rect)}\n transform={`translate(-${padding}, -${padding})`}\n fill=\"red\"\n fillOpacity=\"0.0\"\n width={width + padding * 2}\n height={height + padding * 2}\n />\n );\n }\n}\n"],"file":"bg.js"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "2.14.9
|
|
6
|
+
"version": "2.14.9",
|
|
7
7
|
"description": "Graphing components",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"react",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@pie-lib/drag": "^2.2.4",
|
|
22
22
|
"@pie-lib/graphing-utils": "^1.1.33",
|
|
23
23
|
"@pie-lib/plot": "^2.7.2",
|
|
24
|
-
"@pie-lib/render-ui": "^4.15.
|
|
24
|
+
"@pie-lib/render-ui": "^4.15.1",
|
|
25
25
|
"@pie-lib/translator": "^2.2.0",
|
|
26
26
|
"@vx/axis": "^0.0.189",
|
|
27
27
|
"@vx/clip-path": "^0.0.189",
|
|
@@ -45,6 +45,6 @@
|
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"react": "^16.8.1"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "a909018f206b6936cca4b4e0d49e83689aa31a9c",
|
|
49
49
|
"scripts": {}
|
|
50
50
|
}
|
package/src/bg.jsx
CHANGED
|
@@ -27,6 +27,13 @@ export default class Bg extends React.Component {
|
|
|
27
27
|
this.props.height !== nextProps.height
|
|
28
28
|
);
|
|
29
29
|
}
|
|
30
|
+
|
|
31
|
+
getRectPadding = () => {
|
|
32
|
+
const { graphProps } = this.props;
|
|
33
|
+
|
|
34
|
+
return thinnerShapesNeeded(graphProps) ? 6 : 10;
|
|
35
|
+
};
|
|
36
|
+
|
|
30
37
|
/**
|
|
31
38
|
* Note: we use d3 click + mouse to give us domain values directly.
|
|
32
39
|
* Saves us having to calculate them ourselves from a MouseEvent.
|
|
@@ -34,9 +41,14 @@ export default class Bg extends React.Component {
|
|
|
34
41
|
onRectClick = (rect) => {
|
|
35
42
|
const { onClick, graphProps } = this.props;
|
|
36
43
|
const { scale } = graphProps;
|
|
44
|
+
|
|
45
|
+
const padding = this.getRectPadding();
|
|
37
46
|
const coords = mouse(rect._groups[0][0]);
|
|
38
|
-
|
|
39
|
-
|
|
47
|
+
|
|
48
|
+
// decrease the padding from coordinates to indicate the correct point clicked
|
|
49
|
+
const x = scale.x.invert(coords[0] - padding);
|
|
50
|
+
const y = scale.y.invert(coords[1] - padding);
|
|
51
|
+
|
|
40
52
|
const rowTicks = getTickValues(graphProps.range);
|
|
41
53
|
const columnTicks = getTickValues(graphProps.domain);
|
|
42
54
|
|
|
@@ -66,9 +78,10 @@ export default class Bg extends React.Component {
|
|
|
66
78
|
};
|
|
67
79
|
|
|
68
80
|
render() {
|
|
69
|
-
const { width, height
|
|
70
|
-
const padding =
|
|
81
|
+
const { width, height } = this.props;
|
|
82
|
+
const padding = this.getRectPadding();
|
|
71
83
|
|
|
84
|
+
// expand the size of clickable area so a small area outside the edges of the grid lines to be clickable
|
|
72
85
|
return (
|
|
73
86
|
<rect
|
|
74
87
|
ref={(rect) => (this.rect = rect)}
|