@pie-lib/graphing-module 1.6.4 → 1.7.1

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.5/module/index.js";
-import {_dll_pie_lib__drag} from "../../drag-module@^1.0.57/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../config-module@^2.1.5/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.0.4/module/index.js";
+import {_dll_prop_types, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _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.8/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.1.1/module/index.js";
+import {_dll_pie_lib__drag} from "../../drag-module@^1.0.60/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../config-module@^2.1.8/module/index.js";
 const PropTypes$D = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$D.number.isRequired,
@@ -821,30 +821,12 @@ 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 {Readable: Readable$2} = _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);
@@ -854,9 +836,14 @@ class Root$1 extends React$E.Component {
     this.propTypes = {
       title: PropTypes$C.string,
       children: ChildrenType,
+      disabledTitle: PropTypes$C.bool,
       graphProps: GraphPropsType.isRequired,
+      onChangeTitle: PropTypes$C.func,
       onMouseMove: PropTypes$C.func,
       classes: PropTypes$C.object.isRequired,
+      showLabels: PropTypes$C.bool,
+      showTitle: PropTypes$C.bool,
+      showPixelGuides: PropTypes$C.bool,
       rootRef: PropTypes$C.func
     };
   }
@@ -886,34 +873,89 @@ 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, showLabels, showPixelGuides, 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 padding = showLabels ? 70 : 40;
+    const extraPadding = showLabels ? 16 : 40;
+    const finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
+    const finalHeight = height + padding * 2 + (range.padding || 0) * 2;
+    const activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
+    const nbOfVerticalLines = parseInt(width / 100);
+    const nbOfHorizontalLines = parseInt(height / 100);
+    const sideGridlinesPadding = parseInt(height % 100);
     return React$E.createElement('div', {
       className: classes.root,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 79
+        lineNumber: 94
+      }
+    }, showPixelGuides && React$E.createElement('div', {
+      className: classes.topPixelGuides,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 96
+      }
+    }, [...Array(nbOfVerticalLines + 1).keys()].map(value => React$E.createElement(Readable$2, {
+      false: true,
+      key: `top-guide-${value}`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 98
+      }
+    }, React$E.createElement('div', {
+      className: classes.topPixelIndicator,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 99
+      }
+    }, React$E.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 100
       }
-    }, title && React$E.createElement(GraphTitle, {
-      value: title,
+    }, value * 100, "px"), React$E.createElement('div', {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 80
+        lineNumber: 101
       }
-    }), React$E.createElement('svg', {
+    }, "|"))))), 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: 108
+      }
+    }), React$E.createElement('div', {
+      className: classes.wrapper,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 123
+      }
+    }, React$E.createElement('svg', {
       width: finalWidth,
       height: finalHeight,
       className: classes.svg,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 81
+        lineNumber: 124
       }
     }, React$E.createElement('g', {
       ref: r => {
@@ -923,26 +965,94 @@ class Root$1 extends React$E.Component {
         }
       },
       className: classes.graphBox,
-      transform: `translate(${leftPadding}, ${topPadding})`,
+      transform: `translate(${padding}, ${padding})`,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 82
+        lineNumber: 125
       }
-    }, children)));
+    }, children)), showPixelGuides && React$E.createElement('div', {
+      className: classes.sidePixelGuides,
+      style: {
+        paddingTop: sideGridlinesPadding
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 139
+      }
+    }, [...Array(nbOfHorizontalLines + 1).keys()].reverse().map(value => React$E.createElement(Readable$2, {
+      false: true,
+      key: `top-guide-${value}`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 141
+      }
+    }, React$E.createElement('div', {
+      className: classes.sidePixelIndicator,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 142
+      }
+    }, "━ ", value * 100, "px"))))));
   }
 }
 Root$1.__initStatic();
-const styles$9 = () => ({
+const styles$9 = theme => ({
   root: {
     border: `solid 1px ${color$i.primaryLight()}`,
     color: color$i.text(),
     backgroundColor: color$i.background()
   },
+  wrapper: {
+    display: 'flex'
+  },
   svg: {},
   graphBox: {
     cursor: 'pointer',
     userSelect: 'none'
+  },
+  graphTitle: {
+    color: color$i.text(),
+    fontSize: theme.typography.fontSize + 2,
+    padding: '12px 4px 0',
+    textAlign: 'center'
+  },
+  disabledTitle: {
+    pointerEvents: 'none'
+  },
+  topPixelGuides: {
+    display: 'flex',
+    paddingTop: '6px',
+    marginLeft: '10px'
+  },
+  topPixelIndicator: {
+    color: color$i.primaryLight(),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100px',
+    pointerEvents: 'none',
+    userSelect: 'none'
+  },
+  sidePixelGuides: {
+    width: '70px',
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: '40px',
+    marginRight: '6px'
+  },
+  sidePixelIndicator: {
+    color: color$i.primaryLight(),
+    textAlign: 'right',
+    height: '20px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    '&:not(:last-child)': {
+      marginBottom: '80px'
+    }
   }
 });
 var Root$2 = withStyles$l(styles$9)(Root$1);
@@ -5602,6 +5712,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,
@@ -5629,11 +5741,11 @@ const getY = (side, height) => {
     case 'left':
       return -height;
     case 'top':
-      return -height + 10;
+      return -height;
     case 'right':
-      return -height + 10;
+      return -height - 10;
     default:
-      return 0;
+      return -height + 10;
   }
 };
 class RawLabel extends React$C.Component {
@@ -5642,11 +5754,13 @@ class RawLabel extends React$C.Component {
       text: PropTypes$A.string,
       side: PropTypes$A.string,
       classes: PropTypes$A.object,
+      disabledLabel: PropTypes$A.bool,
+      placeholder: PropTypes$A.string,
       graphProps: GraphPropsType.isRequired
     };
   }
   render() {
-    const {text, side, graphProps, classes} = this.props;
+    const {disabledLabel, placeholder, 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 +5768,44 @@ class RawLabel extends React$C.Component {
     const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
     const height = 36;
     const y = getY(side, height);
+    const finalHeight = side === 'bottom' ? height + 22 : height + 18;
+    const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
     return React$C.createElement('foreignObject', {
       x: -(width / 2),
       y: y,
       width: width,
-      height: height,
+      height: finalHeight,
       transform: transform,
       textAnchor: "middle",
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 64
+        lineNumber: 78
       }
     }, React$C.createElement(Readable$1, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 72
-      }
-    }, React$C.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: text
+        lineNumber: 86
+      }
+    }, React$C.createElement(EditableHtml, {
+      className: cn$2({
+        [classes.bottomLabel]: side === 'bottom',
+        [classes.disabledAxisLabel]: disabledLabel
+      }, classes.axisLabel),
+      markup: text || '',
+      onChange: onChange,
+      placeholder: !disabledLabel && placeholder,
+      toolbarOpts: {
+        position: side === 'bottom' ? 'top' : 'bottom',
+        noBorder: true
       },
-      className: classes.axisLabel,
+      activePlugins: activePlugins,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 73
+        lineNumber: 87
       }
     })));
   }
@@ -5692,8 +5816,15 @@ const Label = withStyles$k(theme => ({
     fill: color$g.secondary()
   },
   axisLabel: {
-    fontSize: theme.typography.fontSize,
-    textAlign: 'center'
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    padding: '0 4px'
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none'
+  },
+  bottomLabel: {
+    marginTop: '44px'
   }
 }))(RawLabel);
 const LabelType = {
@@ -5703,10 +5834,16 @@ 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,
+      placeholders: PropTypes$A.object,
       value: PropTypes$A.shape(LabelType),
       graphProps: PropTypes$A.object
     };
@@ -5714,53 +5851,75 @@ 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, placeholders = {}, value = {}, graphProps} = this.props;
     return React$C.createElement(React$C.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 111
+        lineNumber: 160
       }
-    }, value && value.left && React$C.createElement(Label, {
+    }, React$C.createElement(Label, {
       key: "left",
       side: "left",
       text: value.left,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.left,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'left'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 113
+        lineNumber: 161
       }
-    }), value && value.top && React$C.createElement(Label, {
+    }), React$C.createElement(Label, {
       key: "top",
       side: "top",
       text: value.top,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.top,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'top'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 116
+        lineNumber: 170
       }
-    }), value && value.bottom && React$C.createElement(Label, {
+    }), React$C.createElement(Label, {
       key: "bottom",
       side: "bottom",
       text: value.bottom,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.bottom,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'bottom'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 119
+        lineNumber: 179
       }
-    }), value && value.right && React$C.createElement(Label, {
+    }), React$C.createElement(Label, {
       key: "right",
       side: "right",
       text: value.right,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.right,
       graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'right'),
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 122
+        lineNumber: 188
       }
     }));
   }
@@ -8623,7 +8782,7 @@ class RawXAxis extends React$w.Component {
     };
     const necessaryRows = countWords(domain.axisLabel);
     const longestWord = findLongestWord(domain.axisLabel);
-    const necessaryWidth = amountToIncreaseWidth(longestWord);
+    const necessaryWidth = amountToIncreaseWidth(longestWord) + 2;
     return React$w.createElement(React$w.Fragment, {
       __self: this,
       __source: {
@@ -8669,8 +8828,8 @@ class RawXAxis extends React$w.Component {
         lineNumber: 146
       }
     }), domain.axisLabel && React$w.createElement('foreignObject', {
-      x: size.width + 15,
-      y: scale.y(0) - 10,
+      x: size.width + 17,
+      y: scale.y(0) - 9,
       width: necessaryWidth,
       height: 20 * necessaryRows,
       __self: this,
@@ -8771,7 +8930,7 @@ class RawYAxis extends React$w.Component {
       }
     }), range.axisLabel && React$w.createElement('foreignObject', {
       x: scale.x(0) - necessaryWidth / 2,
-      y: -30,
+      y: -33,
       width: necessaryWidth,
       height: "20",
       __self: this,
@@ -9260,17 +9419,24 @@ 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,
+  showPixelGuides: PropTypes$q.bool,
+  showTitle: PropTypes$q.bool,
   title: PropTypes$q.string,
   tools: PropTypes$q.array
 };
@@ -9310,7 +9476,9 @@ class Graph extends React$s.Component {
   }
   static __initStatic2() {
     this.defaultProps = {
-      onChangeMarks: () => {}
+      onChangeMarks: () => {},
+      disabledLabels: false,
+      disabledTitle: false
     };
   }
   __init() {
@@ -9391,7 +9559,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, labelsPlaceholders, showLabels, showPixelGuides, showTitle, titlePlaceholder, onChangeLabels, onChangeTitle} = this.props;
     let {marks} = this.props;
     const graphProps = create(domain, range, size, () => this.rootNode);
     const maskSize = getMaskSize(size);
@@ -9405,34 +9573,32 @@ class Graph extends React$s.Component {
     });
     return React$s.createElement(Root$2, {
       rootRef: r => this.rootNode = r,
+      disabledTitle: disabledTitle,
+      showPixelGuides: showPixelGuides,
+      showLabels: showLabels,
+      showTitle: showTitle,
       title: title,
+      titlePlaceholder: titlePlaceholder,
+      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: 188
       }
-    }), React$s.createElement('g', {
+    }, React$s.createElement('g', {
       transform: `translate(${domain.padding}, ${range.padding})`,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 172
+        lineNumber: 199
       }
     }, React$s.createElement(Grid$1, {
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 173
+        lineNumber: 200
       }
     }), React$s.createElement(Axes, {
       ...axesSettings,
@@ -9440,7 +9606,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 174
+        lineNumber: 201
       }
     }), React$s.createElement(Bg, {
       ...size,
@@ -9449,14 +9615,14 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 175
+        lineNumber: 202
       }
     }), React$s.createElement('mask', {
       id: "myMask",
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 176
+        lineNumber: 203
       }
     }, React$s.createElement('rect', {
       ...maskSize,
@@ -9464,7 +9630,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 177
+        lineNumber: 204
       }
     }), " "), React$s.createElement('g', {
       id: "marks",
@@ -9472,7 +9638,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 180
+        lineNumber: 207
       }
     }, (backgroundMarks || []).map((m, index) => {
       const Component = this.getComponent(m);
@@ -9489,7 +9655,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 186
+          lineNumber: 213
         }
       });
     }), marks.map((m, index) => {
@@ -9510,7 +9676,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 200
+          lineNumber: 227
         }
       });
     }), React$s.createElement('foreignObject', {
@@ -9524,9 +9690,20 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 216
+        lineNumber: 243
       }
-    }))));
+    }))), showLabels && React$s.createElement(Labels, {
+      disabledLabels: disabledLabels,
+      placeholders: labelsPlaceholders,
+      value: labels,
+      onChange: onChangeLabels,
+      ...common,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 253
+      }
+    }));
   }
 }
 Graph.__initStatic();
@@ -14771,6 +14948,10 @@ class GraphWithControls extends React$2.Component {
     this.defaultProps = {
       collapsibleToolbar: false,
       collapsibleToolbarTitle: '',
+      disabledLabels: false,
+      disabledTitle: false,
+      showLabels: true,
+      showTitle: true,
       toolbarTools: []
     };
   }
@@ -14804,7 +14985,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, labelsPlaceholders, onChangeLabels, onChangeMarks, onChangeTitle, onChangeTools, onUndo, onRedo, onReset, range, size, showLabels, showPixelGuides, showTitle, title, titlePlaceholder} = this.props;
     let {backgroundMarks, marks, toolbarTools} = this.props;
     toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];
     backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
@@ -14817,7 +14998,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 143
+        lineNumber: 156
       }
     }, React$2.createElement(ToolMenu, {
       currentToolType: currentTool && currentTool.type,
@@ -14831,7 +15012,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 144
+        lineNumber: 157
       }
     }), !disabled && React$2.createElement(UndoRedo$1, {
       onUndo: onUndo,
@@ -14840,7 +15021,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 155
+        lineNumber: 168
       }
     }));
     return React$2.createElement('div', {
@@ -14848,14 +15029,14 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 160
+        lineNumber: 173
       }
     }, React$2.createElement('div', {
       className: classes.controls,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 161
+        lineNumber: 174
       }
     }, collapsibleToolbar ? React$2.createElement(Collapsible, {
       classes: classes,
@@ -14863,33 +15044,42 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 163
+        lineNumber: 176
       }
     }, graphActions) : graphActions), React$2.createElement('div', {
       ref: r => this.labelNode = r,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 171
+        lineNumber: 184
       }
     }), React$2.createElement(Graph, {
       axesSettings: axesSettings,
       backgroundMarks: backgroundMarks,
       coordinatesOnHover: coordinatesOnHover,
       currentTool: currentTool,
+      disabledLabels: disabledLabels,
+      disabledTitle: disabledTitle,
       domain: domain,
       labels: labels,
       labelModeEnabled: labelModeEnabled,
+      labelsPlaceholders: labelsPlaceholders,
       marks: marks,
       onChangeMarks: !disabled ? onChangeMarks : undefined,
+      onChangeLabels: onChangeLabels,
+      onChangeTitle: onChangeTitle,
       range: range,
       size: size,
+      showLabels: showLabels,
+      showPixelGuides: showPixelGuides,
+      showTitle: showTitle,
       title: title,
+      titlePlaceholder: titlePlaceholder,
       tools: tools,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 173
+        lineNumber: 186
       }
     }));
   }
@@ -14897,9 +15087,12 @@ class GraphWithControls extends React$2.Component {
 GraphWithControls.__initStatic();
 GraphWithControls.__initStatic2();
 const styles$1 = theme => ({
-  graphWithControls: {},
+  graphWithControls: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: 'min-content'
+  },
   controls: {
-    width: 'inherit',
     display: 'flex',
     justifyContent: 'space-between',
     padding: theme.spacing.unit,
@@ -14914,7 +15107,8 @@ const styles$1 = theme => ({
     }
   },
   expansionPanel: {
-    backgroundColor: color$1.primaryLight()
+    backgroundColor: color$1.primaryLight(),
+    width: '100%'
   },
   summaryRoot: {
     padding: `0 ${theme.spacing.unit}px`,
@@ -14925,7 +15119,9 @@ const styles$1 = theme => ({
   },
   details: {
     padding: 0,
-    marginTop: theme.spacing.unit
+    marginTop: theme.spacing.unit,
+    display: 'flex',
+    justifyContent: 'space-between'
   }
 });
 var GraphWithControls$1 = withStyles$1(styles$1)(GraphWithControls);
@@ -15053,6 +15249,16 @@ const GridConfig = props => {
     }
   }));
 };
+GridConfig.propTypes = {
+  classes: PropTypes.object,
+  disabled: PropTypes.bool,
+  displayedFields: PropTypes.object,
+  labelValue: PropTypes.number,
+  labelValues: PropTypes.array,
+  gridValue: PropTypes.number,
+  gridValues: PropTypes.array,
+  onChange: PropTypes.func
+};
 const AxisConfig = props => {
   const {classes, disabled, displayedFields, displayHeader, label, maxValue, minValue, onChange, type} = props;
   const {axisLabel = {}, min = {}, max = {}} = displayedFields;
@@ -15062,20 +15268,20 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 76
+      lineNumber: 87
     }
   }, displayHeader && React.createElement(Typography, {
     variant: "subtitle2",
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 78
+      lineNumber: 89
     }
   }, React.createElement('i', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 79
+      lineNumber: 90
     }
   }, type === 'domain' ? 'x' : 'y'), "-axis"), min && min.enabled && React.createElement(NumberTextFieldCustom, {
     className: classes.mediumTextField,
@@ -15089,7 +15295,7 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 84
+      lineNumber: 95
     }
   }), max && max.enabled && React.createElement(NumberTextFieldCustom, {
     className: classes.mediumTextField,
@@ -15103,7 +15309,7 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 96
+      lineNumber: 107
     }
   }), axisLabel && axisLabel.enabled && React.createElement(InputContainer, {
     label: axisLabel.label || '',
@@ -15111,7 +15317,7 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108
+      lineNumber: 119
     }
   }, React.createElement(EditableHTML, {
     className: classes.axisLabel,
@@ -15122,12 +15328,12 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109
+      lineNumber: 120
     }
   })));
 };
 const GridSetup = props => {
-  const {classes, domain, displayedFields = {}, gridValues = {}, includeAxes, labelValues = {}, onChange, range, size, sizeConstraints, standardGrid} = props;
+  const {classes, domain, displayedFields = {}, gridValues = {}, includeAxes, labelValues = {}, onChange, onChangeView, range, size, sizeConstraints, standardGrid} = props;
   const gridProps = {
     min: 2,
     max: 41
@@ -15216,14 +15422,14 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 217
+      lineNumber: 229
     }
   }, React.createElement('div', {
     className: classes.rowView,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 218
+      lineNumber: 230
     }
   }, React.createElement(AxisConfig, {
     classes: classes,
@@ -15238,7 +15444,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 219
+      lineNumber: 231
     }
   }), React.createElement(AxisConfig, {
     classes: classes,
@@ -15254,21 +15460,21 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 230
+      lineNumber: 242
     }
   })), (min.enabled || max.enabled) && React.createElement(Typography, {
     className: classes.text,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 244
+      lineNumber: 256
     }
   }, "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value"), (step.enabled || labelStep.enabled) && React.createElement('div', {
     className: classes.rowView,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 250
+      lineNumber: 262
     }
   }, React.createElement(GridConfig, {
     classes: classes,
@@ -15281,7 +15487,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 251
+      lineNumber: 263
     }
   }), React.createElement(GridConfig, {
     classes: classes,
@@ -15295,14 +15501,14 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 260
+      lineNumber: 272
     }
   })), labelStep.enabled && React.createElement(Typography, {
     className: classes.text,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 273
+      lineNumber: 285
     }
   }, "For unnumbered gridlines, enter a label interval of 0"));
   const gridlinesConfig = max.enabled ? React.createElement('div', {
@@ -15310,7 +15516,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 281
+      lineNumber: 293
     }
   }, React.createElement(NumberTextFieldCustom, {
     className: classes.largeTextField,
@@ -15323,7 +15529,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 282
+      lineNumber: 294
     }
   }), React.createElement(NumberTextFieldCustom, {
     className: classes.largeTextField,
@@ -15337,7 +15543,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 291
+      lineNumber: 303
     }
   })) : null;
   return React.createElement('div', {
@@ -15345,46 +15551,47 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 305
+      lineNumber: 317
     }
   }, React.createElement(ExpansionPanel, {
+    onChange: onChangeView,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 306
+      lineNumber: 318
     }
   }, React.createElement(ExpansionPanelSummary, {
     expandIcon: React.createElement(ExpandMoreIcon, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 307
+        lineNumber: 319
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 307
+      lineNumber: 319
     }
   }, React.createElement(Typography, {
     variant: "subtitle1",
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 308
+      lineNumber: 320
     }
   }, "Customize Grid Setup")), React.createElement(ExpansionPanelDetails, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 310
+      lineNumber: 322
     }
   }, React.createElement('div', {
     className: classes.content,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 311
+      lineNumber: 323
     }
   }, includeAxesEnabled && React.createElement(Toggle, {
     label: "Include axes and labels?",
@@ -15393,7 +15600,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 313
+      lineNumber: 325
     }
   }), standardGridEnabled && React.createElement(Toggle, {
     label: "Constrain to standard coordinate grid?",
@@ -15402,33 +15609,33 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 320
+      lineNumber: 332
     }
   }), includeAxes ? axesConfig : gridlinesConfig, dimensionsEnabled && React.createElement('div', {
     className: classes.dimensions,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 328
+      lineNumber: 340
     }
   }, React.createElement('div', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 329
+      lineNumber: 341
     }
   }, React.createElement(Typography, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 330
+      lineNumber: 342
     }
   }, "Dimensions(px)"), React.createElement(Typography, {
     className: classes.disabled,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 331
+      lineNumber: 343
     }
   }, "Min ", sizeConstraints.min, ", Max ", sizeConstraints.max)), React.createElement(NumberTextFieldCustom, {
     className: classes.textField,
@@ -15442,7 +15649,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 335
+      lineNumber: 347
     }
   }), React.createElement(NumberTextFieldCustom, {
     className: classes.textField,
@@ -15457,7 +15664,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 345
+      lineNumber: 357
     }
   }))))));
 };
@@ -15469,6 +15676,7 @@ GridSetup.propTypes = {
   includeAxes: PropTypes.bool,
   labelValues: PropTypes.object,
   onChange: PropTypes.function,
+  onChangeView: PropTypes.function,
   range: PropTypes.object,
   size: PropTypes.object,
   sizeConstraints: PropTypes.object,

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.6.4",
+  "version": "1.7.1",
   "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.1"
       },
       "d3-scale": {
         "version": "2.2.2"
@@ -22,24 +22,24 @@
         "version": "1.4.2"
       }
     },
-    "hash": "d17b883f879e8c15e62756f2846d890d14b10b30"
+    "hash": "0e9fe7d4674f15c0acda65cabc9dfa120a73d010"
   },
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.5.5"
+      "version": "^1.5.8"
     },
     {
-      "name": "@pie-lib/drag-module",
-      "version": "^1.0.57"
+      "name": "@pie-lib/editable-html-module",
+      "version": "^3.1.1"
     },
     {
-      "name": "@pie-lib/config-module",
-      "version": "^2.1.5"
+      "name": "@pie-lib/drag-module",
+      "version": "^1.0.60"
     },
     {
-      "name": "@pie-lib/editable-html-module",
-      "version": "^3.0.4"
+      "name": "@pie-lib/config-module",
+      "version": "^2.1.8"
     }
   ],
   "isLocal": true

package/package.json

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