@pie-lib/graphing-module 1.10.13 → 1.10.14

package/module/index.js

@@ -1,7 +1,7 @@
-import {_dll_prop_types, _dll_pie_lib__render_ui, _dll_material_ui__core_styles, _dll_react, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_material_ui__core, _dll_material_ui__core_styles_color_manipulator, _dll_material_ui__icons} from "../../shared-module@^1.5.43/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.5.1/module/index.js";
-import {_dll_pie_lib__drag} from "../../drag-module@^2.0.14/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../config-module@^2.4.1/module/index.js";
+import {_dll_prop_types, _dll_pie_lib__render_ui, _dll_material_ui__core_styles, _dll_react, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_material_ui__core, _dll_material_ui__core_styles_color_manipulator, _dll_material_ui__icons} from "../../shared-module@^1.5.44/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.5.2/module/index.js";
+import {_dll_pie_lib__drag} from "../../drag-module@^2.0.15/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../config-module@^2.4.2/module/index.js";
 const PropTypes$D = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$D.number.isRequired,
@@ -900,14 +900,14 @@ var Label$1 = withStyles$m(theme => ({
   axisLabel: {
     fontSize: theme.typography.fontSize - 2,
     textAlign: 'center',
-    margin: '4px',
-    padding: '4px 0'
+    margin: theme.spacing.unit / 2,
+    padding: `${theme.spacing.unit / 2}px 0`
   },
   chartLabel: {
     fontSize: theme.typography.fontSize + 2,
     textAlign: 'center',
-    margin: '4px',
-    padding: '4px 0'
+    margin: theme.spacing.unit / 2,
+    padding: `${theme.spacing.unit / 2}px 0`
   },
   disabledLabel: {
     pointerEvents: 'none',
@@ -1260,13 +1260,13 @@ const styles$9 = theme => ({
   graphTitle: {
     color: color$i.text(),
     fontSize: theme.typography.fontSize + 2,
-    padding: '12px 4px 0',
+    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
     textAlign: 'center'
   },
   chartTitle: {
     color: color$i.text(),
     fontSize: theme.typography.fontSize + 4,
-    padding: '12px 4px 0',
+    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
     textAlign: 'center'
   },
   disabledTitle: {
@@ -8526,11 +8526,11 @@ const PropTypes$w = _dll_prop_types;
 const classNames$f = _dll_classnames;
 const {withStyles: withStyles$k} = _dll_material_ui__core_styles;
 const _jsxFileName$u = "/home/circleci/repo/packages/graphing/src/axis/arrow.jsx";
-const style = {
+const style = theme => ({
   root: {
-    fill: 'var(--arrow-color, black)'
+    fill: `var(--arrow-color, ${theme.palette.common.black})`
   }
-};
+});
 class Arrow$2 extends React$y.Component {
   render() {
     const {x, y, classes, className, scale} = this.props;
@@ -9847,21 +9847,21 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 187
+        lineNumber: 188
       }
     }, React$s.createElement('g', {
       transform: domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 202
+        lineNumber: 203
       }
     }, React$s.createElement(Grid$1, {
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 207
+        lineNumber: 208
       }
     }), React$s.createElement(Axes, {
       ...axesSettings,
@@ -9869,7 +9869,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 208
+        lineNumber: 209
       }
     }), React$s.createElement(Bg, {
       ...size,
@@ -9878,14 +9878,14 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 209
+        lineNumber: 210
       }
     }), React$s.createElement('mask', {
       id: "myMask",
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 210
+        lineNumber: 211
       }
     }, React$s.createElement('rect', {
       ...maskSize,
@@ -9893,7 +9893,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 211
+        lineNumber: 212
       }
     }), " "), React$s.createElement('g', {
       id: "marks",
@@ -9901,7 +9901,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 214
+        lineNumber: 215
       }
     }, (backgroundMarks || []).map((m, index) => {
       const Component = this.getComponent(m);
@@ -9918,7 +9918,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 220
+          lineNumber: 221
         }
       });
     }), marks.map((m, index) => {
@@ -9939,7 +9939,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 234
+          lineNumber: 235
         }
       });
     }), React$s.createElement('foreignObject', {
@@ -11562,7 +11562,7 @@ const styles$8 = theme => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.fontSize,
     borderRadius: '8px',
-    background: '#FFFFFF',
+    background: theme.palette.common.white,
     color: color$c.primaryDark()
   },
   inputLabel: {
@@ -11646,12 +11646,19 @@ class RawBp extends React$n.Component {
     };
   }
   render() {
-    const {classes, className, coordinatesOnHover, x, y, disabled, correctness, graphProps, labelNode, ...rest} = this.props;
+    const {classes, className, coordinatesOnHover, x, y, disabled, correctness, graphProps, labelNode, style, ...rest} = this.props;
     const {showCoordinates} = this.state;
     const {scale} = graphProps;
     const r = thinnerShapesNeeded(graphProps) ? 5 : 7;
-    return React$n.createElement('g', {
-      className: classNames$e(classes.point, disabled && classes.disabled, classes[correctness], className),
+    return React$n.createElement(React$n.Fragment, null, React$n.createElement('circle', {
+      style: {
+        fill: 'transparent',
+        cursor: 'pointer',
+        pointerEvents: 'all'
+      },
+      r: r * 3,
+      cx: scale.x(x),
+      cy: scale.y(y),
       onMouseEnter: () => this.setState({
         showCoordinates: true
       }),
@@ -11662,28 +11669,31 @@ class RawBp extends React$n.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 45
+        lineNumber: 47
       }
-    }, React$n.createElement('circle', {
-      style: {
-        fill: 'transparent'
-      },
-      r: r * 2,
-      cx: 2 * scale.x(x),
-      cy: 2 * scale.y(y),
+    }), React$n.createElement('g', {
+      className: classNames$e(classes.point, disabled && classes.disabled, classes[correctness], className),
+      onMouseEnter: () => this.setState({
+        showCoordinates: true
+      }),
+      onMouseLeave: () => this.setState({
+        showCoordinates: false
+      }),
+      ...rest,
       __self: this,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 51
+        lineNumber: 56
       }
-    }), React$n.createElement('circle', {
+    }, React$n.createElement('circle', {
+      ...rest,
       r: r,
       cx: scale.x(x),
       cy: scale.y(y),
       __self: this,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 52
+        lineNumber: 62
       }
     }), labelNode && coordinatesOnHover && showCoordinates && ReactDOM$4.createPortal(React$n.createElement(CoordinatesLabel$1, {
       graphProps: graphProps,
@@ -11692,9 +11702,9 @@ class RawBp extends React$n.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 56
+        lineNumber: 66
       }
-    }), labelNode));
+    }), labelNode)));
   }
 }
 RawBp.__initStatic();
@@ -12231,8 +12241,8 @@ const {useState: useState} = _dll_react;
 const {useCallback: useCallback} = _dll_react;
 const {useEffect: useEffect} = _dll_react;
 const cn$1 = _dll_classnames;
-const {withStyles: withStyles$e} = _dll_material_ui__core_styles;
 const PropTypes$i = _dll_prop_types;
+const {withStyles: withStyles$e} = _dll_material_ui__core_styles;
 const {color: color$a} = _dll_pie_lib__render_ui;
 const _jsxFileName$j = "/home/circleci/repo/packages/graphing/src/mark-label.jsx";
 const styles$6 = theme => ({
@@ -12247,11 +12257,11 @@ const styles$6 = theme => ({
   },
   disabled: {
     border: `solid 1px ${color$a.primaryDark()}`,
-    background: color$a.background()
+    background: theme.palette.background.paper
   },
   disabledMark: {
     border: `solid 1px ${color$a.disabled()}`,
-    background: color$a.background(),
+    background: theme.palette.background.paper,
     color: color$a.disabled()
   }
 });
@@ -12268,9 +12278,10 @@ const position = (graphProps, mark, rect) => {
   const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';
   return `${v}-${h}`;
 };
-const coordinates = (graphProps, mark, rect, position) => {
+const coordinates = (graphProps, mark, rect, position, fontSize) => {
   const {scale} = graphProps;
   const shift = 10;
+  const font = fontSize ? fontSize : 16;
   rect = rect || ({
     width: 0,
     height: 0
@@ -12279,29 +12290,29 @@ const coordinates = (graphProps, mark, rect, position) => {
     case 'bottom-right':
       {
         return {
-          left: scale.x(mark.x) + shift,
-          top: scale.y(mark.y) + shift
+          left: `${(scale.x(mark.x) + shift) / font}rem`,
+          top: `${(scale.y(mark.y) + shift) / font}rem`
         };
       }
     case 'bottom-left':
       {
         return {
-          left: scale.x(mark.x) - shift - rect.width,
-          top: scale.y(mark.y) + shift
+          left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,
+          top: `${(scale.y(mark.y) + shift) / font}rem`
         };
       }
     case 'top-left':
       {
         return {
-          left: scale.x(mark.x) - shift - rect.width,
-          top: scale.y(mark.y) - shift - rect.height
+          left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,
+          top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`
         };
       }
     case 'top-right':
       {
         return {
-          left: scale.x(mark.x) + shift,
-          top: scale.y(mark.y) - shift - rect.height
+          left: `${(scale.x(mark.x) + shift) / font}rem`,
+          top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`
         };
       }
   }
@@ -12309,7 +12320,7 @@ const coordinates = (graphProps, mark, rect, position) => {
 const MarkLabel = props => {
   const [input, setInput] = useState(null);
   const _ref = useCallback(node => setInput(node));
-  const {mark, graphProps, classes, disabled, inputRef: externalInputRef} = props;
+  const {mark, graphProps, classes, disabled, inputRef: externalInputRef, theme} = props;
   const [label, setLabel] = useState(mark.label);
   const onChange = e => setLabel(e.target.value);
   const debouncedLabel = useDebounce(label, 200);
@@ -12321,14 +12332,15 @@ const MarkLabel = props => {
       props.onChange(debouncedLabel);
     }
   }, [debouncedLabel]);
+  const fontSize = theme && theme.typography ? theme.typography.fontSize + 2 : 16;
   const rect = input ? input.getBoundingClientRect() : {
     width: 0,
     height: 0
   };
   const pos = position(graphProps, mark, rect);
-  const leftTop = coordinates(graphProps, mark, rect, pos);
+  const leftTop = coordinates(graphProps, mark, rect, pos, fontSize);
   const style = {
-    position: 'absolute',
+    position: 'fixed',
     pointerEvents: 'auto',
     ...leftTop
   };
@@ -12339,14 +12351,17 @@ const MarkLabel = props => {
       externalInputRef(r);
     },
     disabled: disabledInput,
-    inputClassName: cn$1(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark),
+    inputClassName: cn$1(classes.input, {
+      [classes.disabled]: disabled,
+      [classes.disabledMark]: mark.disabled
+    }),
     value: label,
     style: style,
     onChange: onChange,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 107
+      lineNumber: 117
     }
   });
 };
@@ -12356,9 +12371,12 @@ MarkLabel.propTypes = {
   graphProps: GraphPropsType,
   classes: PropTypes$i.object,
   inputRef: PropTypes$i.func,
-  mark: PropTypes$i.object
+  mark: PropTypes$i.object,
+  theme: PropTypes$i.object
 };
-var MarkLabel$1 = withStyles$e(styles$6)(MarkLabel);
+var MarkLabel$1 = withStyles$e(styles$6, {
+  withTheme: true
+})(MarkLabel);
 const React$i = _dll_react;
 const ReactDOM$3 = _dll_react_dom;
 const {isEqual: isEqual$3} = _dll_lodash;
@@ -12473,6 +12491,14 @@ class Point extends React$i.Component {
       onDragStart: this.startDrag,
       onDragStop: this.stopDrag,
       onClick: this.clickPoint,
+      onTouchStart: e => {
+        e.stopPropagation();
+        this.clickPoint();
+      },
+      onTouchEnd: e => {
+        e.stopPropagation();
+        this.clickPoint();
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
@@ -12487,7 +12513,7 @@ class Point extends React$i.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 92
+        lineNumber: 94
       }
     }), labelNode));
   }

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.10.13",
+  "version": "1.10.14",
   "mappings": {
     "@pie-lib/plot": "_dll_pie_lib__plot",
     "@pie-lib/graphing": "_dll_pie_lib__graphing",
@@ -13,7 +13,7 @@
         "version": "2.5.4"
       },
       "@pie-lib/graphing": {
-        "version": "2.11.8"
+        "version": "2.11.9"
       },
       "d3-scale": {
         "version": "2.2.2"
@@ -22,24 +22,24 @@
         "version": "1.4.2"
       }
     },
-    "hash": "922bb3325c0e6c9b14b952613220796241eae950"
+    "hash": "402b07a859a2f0dc231a8830c130024393cd998a"
   },
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.5.43"
+      "version": "^1.5.44"
     },
     {
       "name": "@pie-lib/editable-html-module",
-      "version": "^3.5.1"
+      "version": "^3.5.2"
     },
     {
       "name": "@pie-lib/drag-module",
-      "version": "^2.0.14"
+      "version": "^2.0.15"
     },
     {
       "name": "@pie-lib/config-module",
-      "version": "^2.4.1"
+      "version": "^2.4.2"
     }
   ],
   "isLocal": true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.10.13",
+  "version": "1.10.14",
   "module": "module/index.js",
   "repository": "pie-framework/pie-lib",
   "publishConfig": {