@pie-lib/graphing-module 1.6.3 → 1.7.0

package/module/index.js

@@ -1,7 +1,7 @@
-import {_dll_prop_types, _dll_react, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_pie_lib__render_ui, _dll_react_dom, _dll_lodash, _dll_debug, _dll_classnames, _dll_material_ui__core_styles_color_manipulator, _dll_material_ui__icons} from "../../shared-module@^1.5.4/module/index.js";
-import {_dll_pie_lib__drag} from "../../drag-module@^1.0.56/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../config-module@^2.1.4/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.0.3/module/index.js";
+import {_dll_prop_types, _dll_react, _dll_material_ui__core_styles, _dll_classnames, _dll_pie_lib__render_ui, _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.7/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.1.0/module/index.js";
+import {_dll_pie_lib__drag} from "../../drag-module@^1.0.59/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../config-module@^2.1.7/module/index.js";
 const PropTypes$D = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$D.number.isRequired,
@@ -821,30 +821,11 @@ var index$4 = Object.freeze({
 });
 const React$E = _dll_react;
 const {withStyles: withStyles$l} = _dll_material_ui__core_styles;
-const {Typography: Typography$2} = _dll_material_ui__core;
 const PropTypes$C = _dll_prop_types;
 const {color: color$i} = _dll_pie_lib__render_ui;
+const cn$3 = _dll_classnames;
+const EditableHtml$1 = _dll_pie_lib__editable_html;
 const _jsxFileName$w = "/home/circleci/repo/packages/plot/src/root.jsx";
-const GraphTitle = withStyles$l(theme => ({
-  title: {
-    color: color$i.text(),
-    textAlign: 'center',
-    paddingTop: theme.spacing.unit * 2,
-    fontSize: theme.typography.fontSize + 6
-  }
-}))(({value, classes}) => React$E.createElement(Typography$2, {
-  className: classes.title,
-  color: "primary",
-  variant: "h5",
-  dangerouslySetInnerHTML: {
-    __html: value
-  },
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$w,
-    lineNumber: 18
-  }
-}));
 class Root$1 extends React$E.Component {
   constructor(...args) {
     super(...args);
@@ -857,6 +838,7 @@ class Root$1 extends React$E.Component {
       graphProps: GraphPropsType.isRequired,
       onMouseMove: PropTypes$C.func,
       classes: PropTypes$C.object.isRequired,
+      showTitle: PropTypes$C.bool,
       rootRef: PropTypes$C.func
     };
   }
@@ -886,25 +868,36 @@ class Root$1 extends React$E.Component {
     g.on('mousemove', null);
   }
   render() {
-    const {graphProps, children, classes, title, rootRef} = this.props;
+    const {disabledTitle, graphProps, children, classes, onChangeTitle, showTitle, title, rootRef} = this.props;
     const {size: {width = 500, height = 500}, domain, range} = graphProps;
     const topPadding = 50;
     const leftPadding = topPadding + 10;
     const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
     const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
+    const activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
     return React$E.createElement('div', {
       className: classes.root,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 79
+        lineNumber: 82
       }
-    }, title && React$E.createElement(GraphTitle, {
-      value: title,
+    }, showTitle && React$E.createElement(EditableHtml$1, {
+      className: cn$3({
+        [classes.disabledTitle]: disabledTitle
+      }, classes.graphTitle),
+      markup: title || '',
+      width: finalWidth,
+      onChange: onChangeTitle,
+      placeholder: !disabledTitle && 'Click here to add a title for this graph',
+      toolbarOpts: {
+        noBorder: true
+      },
+      activePlugins: activeTitlePlugins,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 80
+        lineNumber: 84
       }
     }), React$E.createElement('svg', {
       width: finalWidth,
@@ -913,7 +906,7 @@ class Root$1 extends React$E.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 81
+        lineNumber: 99
       }
     }, React$E.createElement('g', {
       ref: r => {
@@ -927,13 +920,13 @@ class Root$1 extends React$E.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 82
+        lineNumber: 100
       }
     }, children)));
   }
 }
 Root$1.__initStatic();
-const styles$9 = () => ({
+const styles$9 = theme => ({
   root: {
     border: `solid 1px ${color$i.primaryLight()}`,
     color: color$i.text(),
@@ -943,6 +936,15 @@ const styles$9 = () => ({
   graphBox: {
     cursor: 'pointer',
     userSelect: 'none'
+  },
+  graphTitle: {
+    color: color$i.text(),
+    fontSize: theme.typography.fontSize + 2,
+    padding: '8px 50px 0',
+    textAlign: 'center'
+  },
+  disabledTitle: {
+    pointerEvents: 'none'
   }
 });
 var Root$2 = withStyles$l(styles$9)(Root$1);
@@ -5602,6 +5604,8 @@ const PropTypes$A = _dll_prop_types;
 const {withStyles: withStyles$k} = _dll_material_ui__core_styles;
 const {color: color$g} = _dll_pie_lib__render_ui;
 const {Readable: Readable$1} = _dll_pie_lib__render_ui;
+const cn$2 = _dll_classnames;
+const EditableHtml = _dll_pie_lib__editable_html;
 const _jsxFileName$u = "/home/circleci/repo/packages/graphing/src/labels.jsx";
 const rotations = {
   left: -90,
@@ -5627,13 +5631,13 @@ const getTransform = (side, width, height) => {
 const getY = (side, height) => {
   switch (side) {
     case 'left':
-      return -height;
+      return -height + 6;
     case 'top':
-      return -height + 10;
+      return -height + 6;
     case 'right':
-      return -height + 10;
+      return -height;
     default:
-      return 0;
+      return -height - 15;
   }
 };
 class RawLabel extends React$C.Component {
@@ -5642,11 +5646,12 @@ class RawLabel extends React$C.Component {
       text: PropTypes$A.string,
       side: PropTypes$A.string,
       classes: PropTypes$A.object,
+      disabledLabel: PropTypes$A.bool,
       graphProps: GraphPropsType.isRequired
     };
   }
   render() {
-    const {text, side, graphProps, classes} = this.props;
+    const {disabledLabel, text, side, graphProps, classes, onChange} = this.props;
     const {size, domain, range} = graphProps;
     const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
     const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
@@ -5654,34 +5659,43 @@ class RawLabel extends React$C.Component {
     const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
     const height = 36;
     const y = getY(side, height);
+    const activePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
     return React$C.createElement('foreignObject', {
       x: -(width / 2),
       y: y,
       width: width,
-      height: height,
+      height: height * 2,
       transform: transform,
       textAnchor: "middle",
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 64
+        lineNumber: 75
       }
     }, React$C.createElement(Readable$1, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 72
-      }
-    }, React$C.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: text
+        lineNumber: 83
+      }
+    }, React$C.createElement(EditableHtml, {
+      className: cn$2({
+        [classes.bottomLabel]: side === 'bottom',
+        [classes.disabledAxisLabel]: disabledLabel
+      }, classes.axisLabel),
+      markup: text || '',
+      onChange: onChange,
+      placeholder: !disabledLabel && `Click here to add a ${side} label`,
+      toolbarOpts: {
+        position: side === 'bottom' ? 'top' : 'bottom',
+        noBorder: true
       },
-      className: classes.axisLabel,
+      activePlugins: activePlugins,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 73
+        lineNumber: 84
       }
     })));
   }
@@ -5692,8 +5706,14 @@ const Label = withStyles$k(theme => ({
     fill: color$g.secondary()
   },
   axisLabel: {
-    fontSize: theme.typography.fontSize,
+    fontSize: theme.typography.fontSize - 2,
     textAlign: 'center'
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none'
+  },
+  bottomLabel: {
+    marginTop: '44px'
   }
 }))(RawLabel);
 const LabelType = {
@@ -5703,10 +5723,15 @@ const LabelType = {
   right: PropTypes$A.string
 };
 class Labels extends React$C.Component {
+  constructor(...args) {
+    super(...args);
+    Labels.prototype.__init.call(this);
+  }
   static __initStatic2() {
     this.propTypes = {
       classes: PropTypes$A.object,
       className: PropTypes$A.string,
+      disabledLabels: PropTypes$A.bool,
       value: PropTypes$A.shape(LabelType),
       graphProps: PropTypes$A.object
     };
@@ -5714,53 +5739,71 @@ class Labels extends React$C.Component {
   static __initStatic3() {
     this.defaultProps = {};
   }
+  __init() {
+    this.onChangeLabel = (newValue, side) => {
+      const {value, onChange} = this.props;
+      const labels = {
+        ...value,
+        [side]: newValue
+      };
+      onChange(labels);
+    };
+  }
   render() {
-    const {value, graphProps} = this.props;
+    const {disabledLabels, value = {}, graphProps} = this.props;
     return React$C.createElement(React$C.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 111
+        lineNumber: 155
       }
-    }, value && value.left && React$C.createElement(Label, {
+    }, React$C.createElement(Label, {
       key: "left",
       side: "left",
       text: value.left,
+      disabledLabel: disabledLabels,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'left'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 113
+        lineNumber: 156
       }
-    }), value && value.top && React$C.createElement(Label, {
+    }), React$C.createElement(Label, {
       key: "top",
       side: "top",
       text: value.top,
+      disabledLabel: disabledLabels,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'top'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 116
+        lineNumber: 164
       }
-    }), value && value.bottom && React$C.createElement(Label, {
+    }), React$C.createElement(Label, {
       key: "bottom",
       side: "bottom",
       text: value.bottom,
+      disabledLabel: disabledLabels,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'bottom'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 119
+        lineNumber: 172
       }
-    }), value && value.right && React$C.createElement(Label, {
+    }), React$C.createElement(Label, {
       key: "right",
       side: "right",
       text: value.right,
+      disabledLabel: disabledLabels,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'right'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 122
+        lineNumber: 180
       }
     }));
   }
@@ -9260,17 +9303,23 @@ const graphPropTypes = {
   className: PropTypes$q.string,
   collapsibleToolbar: PropTypes$q.bool,
   collapsibleToolbarTitle: PropTypes$q.string,
+  disabledLabels: PropTypes$q.bool,
+  disabledTitle: PropTypes$q.bool,
   domain: DomainType,
   labels: PropTypes$q.shape(LabelType),
   labelModeEnabled: PropTypes$q.bool,
   coordinatesOnHover: PropTypes$q.bool,
   marks: PropTypes$q.array,
+  onChangeLabels: PropTypes$q.func,
   onChangeMarks: PropTypes$q.func,
+  onChangeTitle: PropTypes$q.func,
   range: DomainType,
   size: PropTypes$q.shape({
     width: PropTypes$q.number.isRequired,
     height: PropTypes$q.number.isRequired
   }),
+  showLabels: PropTypes$q.bool,
+  showTitle: PropTypes$q.bool,
   title: PropTypes$q.string,
   tools: PropTypes$q.array
 };
@@ -9310,7 +9359,9 @@ class Graph extends React$s.Component {
   }
   static __initStatic2() {
     this.defaultProps = {
-      onChangeMarks: () => {}
+      onChangeMarks: () => {},
+      disabledLabels: false,
+      disabledTitle: false
     };
   }
   __init() {
@@ -9391,7 +9442,7 @@ class Graph extends React$s.Component {
     };
   }
   render() {
-    const {axesSettings, currentTool, coordinatesOnHover, size, domain, backgroundMarks, range, title, labels, labelModeEnabled} = this.props;
+    const {axesSettings, currentTool, coordinatesOnHover, size, disabledLabels, disabledTitle, domain, backgroundMarks, range, title, labels, labelModeEnabled, showLabels, showTitle, onChangeLabels, onChangeTitle} = this.props;
     let {marks} = this.props;
     const graphProps = create(domain, range, size, () => this.rootNode);
     const maskSize = getMaskSize(size);
@@ -9405,34 +9456,29 @@ class Graph extends React$s.Component {
     });
     return React$s.createElement(Root$2, {
       rootRef: r => this.rootNode = r,
+      disabledTitle: disabledTitle,
+      showTitle: showTitle,
       title: title,
+      onChangeTitle: onChangeTitle,
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 170
-      }
-    }, React$s.createElement(Labels, {
-      value: labels,
-      ...common,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$p,
-        lineNumber: 171
+        lineNumber: 184
       }
-    }), React$s.createElement('g', {
+    }, React$s.createElement('g', {
       transform: `translate(${domain.padding}, ${range.padding})`,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 172
+        lineNumber: 192
       }
     }, React$s.createElement(Grid$1, {
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 173
+        lineNumber: 193
       }
     }), React$s.createElement(Axes, {
       ...axesSettings,
@@ -9440,7 +9486,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 174
+        lineNumber: 194
       }
     }), React$s.createElement(Bg, {
       ...size,
@@ -9449,14 +9495,14 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 175
+        lineNumber: 195
       }
     }), React$s.createElement('mask', {
       id: "myMask",
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 176
+        lineNumber: 196
       }
     }, React$s.createElement('rect', {
       ...maskSize,
@@ -9464,7 +9510,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 177
+        lineNumber: 197
       }
     }), " "), React$s.createElement('g', {
       id: "marks",
@@ -9472,7 +9518,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 180
+        lineNumber: 200
       }
     }, (backgroundMarks || []).map((m, index) => {
       const Component = this.getComponent(m);
@@ -9489,7 +9535,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 186
+          lineNumber: 206
         }
       });
     }), marks.map((m, index) => {
@@ -9510,7 +9556,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 200
+          lineNumber: 220
         }
       });
     }), React$s.createElement('foreignObject', {
@@ -9524,9 +9570,19 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 216
+        lineNumber: 236
       }
-    }))));
+    }))), showLabels && React$s.createElement(Labels, {
+      disabledLabels: disabledLabels,
+      value: labels,
+      onChange: onChangeLabels,
+      ...common,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 246
+      }
+    }));
   }
 }
 Graph.__initStatic();
@@ -14771,6 +14827,10 @@ class GraphWithControls extends React$2.Component {
     this.defaultProps = {
       collapsibleToolbar: false,
       collapsibleToolbarTitle: '',
+      disabledLabels: false,
+      disabledTitle: false,
+      showLabels: true,
+      showTitle: true,
       toolbarTools: []
     };
   }
@@ -14804,7 +14864,7 @@ class GraphWithControls extends React$2.Component {
   }
   render() {
     let {currentTool, labelModeEnabled} = this.state;
-    const {axesSettings, classes, className, coordinatesOnHover, collapsibleToolbar, collapsibleToolbarTitle, disabled, domain, draggableTools, labels, onChangeMarks, onChangeTools, onUndo, onRedo, onReset, range, size, title} = this.props;
+    const {axesSettings, classes, className, coordinatesOnHover, collapsibleToolbar, collapsibleToolbarTitle, disabled, disabledLabels, disabledTitle, domain, draggableTools, labels, onChangeLabels, onChangeMarks, onChangeTitle, onChangeTools, onUndo, onRedo, onReset, range, size, showLabels, showTitle, title} = this.props;
     let {backgroundMarks, marks, toolbarTools} = this.props;
     toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];
     backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
@@ -14817,7 +14877,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 143
+        lineNumber: 153
       }
     }, React$2.createElement(ToolMenu, {
       currentToolType: currentTool && currentTool.type,
@@ -14831,7 +14891,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 144
+        lineNumber: 154
       }
     }), !disabled && React$2.createElement(UndoRedo$1, {
       onUndo: onUndo,
@@ -14840,7 +14900,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 155
+        lineNumber: 165
       }
     }));
     return React$2.createElement('div', {
@@ -14848,14 +14908,14 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 160
+        lineNumber: 170
       }
     }, React$2.createElement('div', {
       className: classes.controls,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 161
+        lineNumber: 171
       }
     }, collapsibleToolbar ? React$2.createElement(Collapsible, {
       classes: classes,
@@ -14863,33 +14923,39 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 163
+        lineNumber: 173
       }
     }, graphActions) : graphActions), React$2.createElement('div', {
       ref: r => this.labelNode = r,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 171
+        lineNumber: 181
       }
     }), React$2.createElement(Graph, {
       axesSettings: axesSettings,
       backgroundMarks: backgroundMarks,
       coordinatesOnHover: coordinatesOnHover,
       currentTool: currentTool,
+      disabledLabels: disabledLabels,
+      disabledTitle: disabledTitle,
       domain: domain,
       labels: labels,
       labelModeEnabled: labelModeEnabled,
       marks: marks,
       onChangeMarks: !disabled ? onChangeMarks : undefined,
+      onChangeLabels: onChangeLabels,
+      onChangeTitle: onChangeTitle,
       range: range,
       size: size,
+      showLabels: showLabels,
+      showTitle: showTitle,
       title: title,
       tools: tools,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 173
+        lineNumber: 183
       }
     }));
   }

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "mappings": {
     "@pie-lib/plot": "_dll_pie_lib__plot",
     "@pie-lib/graphing": "_dll_pie_lib__graphing",
@@ -10,10 +10,10 @@
   "versionInfo": {
     "data": {
       "@pie-lib/plot": {
-        "version": "2.2.0"
+        "version": "2.3.0"
       },
       "@pie-lib/graphing": {
-        "version": "2.8.1"
+        "version": "2.9.0"
       },
       "d3-scale": {
         "version": "2.2.2"
@@ -22,24 +22,24 @@
         "version": "1.4.2"
       }
     },
-    "hash": "d17b883f879e8c15e62756f2846d890d14b10b30"
+    "hash": "e57b7cc6974ecb5a2cd24865ee305d043798f37e"
   },
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.5.4"
+      "version": "^1.5.7"
     },
     {
-      "name": "@pie-lib/drag-module",
-      "version": "^1.0.56"
+      "name": "@pie-lib/editable-html-module",
+      "version": "^3.1.0"
     },
     {
-      "name": "@pie-lib/config-module",
-      "version": "^2.1.4"
+      "name": "@pie-lib/drag-module",
+      "version": "^1.0.59"
     },
     {
-      "name": "@pie-lib/editable-html-module",
-      "version": "^3.0.3"
+      "name": "@pie-lib/config-module",
+      "version": "^2.1.7"
     }
   ],
   "isLocal": true

package/package.json

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