@pie-lib/graphing-module 1.7.0 → 1.8.1

package/module/index.js

@@ -1,7 +1,7 @@
-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";
+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.10/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.1.3/module/index.js";
+import {_dll_pie_lib__drag} from "../../drag-module@^1.0.62/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../config-module@^2.1.10/module/index.js";
 const PropTypes$D = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$D.number.isRequired,
@@ -823,6 +823,7 @@ const React$E = _dll_react;
 const {withStyles: withStyles$l} = _dll_material_ui__core_styles;
 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";
@@ -835,10 +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
     };
   }
@@ -868,21 +873,59 @@ class Root$1 extends React$E.Component {
     g.on('mousemove', null);
   }
   render() {
-    const {disabledTitle, graphProps, children, classes, onChangeTitle, showTitle, title, rootRef} = this.props;
+    const {disabledTitle, graphProps, children, classes, onChangeTitle, thisIsChart, 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 activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
+    const chartPadding = thisIsChart ? 45 : 0;
+    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: 82
+        lineNumber: 96
+      }
+    }, showPixelGuides && React$E.createElement('div', {
+      className: classes.topPixelGuides,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 98
+      }
+    }, [...Array(nbOfVerticalLines + 1).keys()].map(value => React$E.createElement(Readable$2, {
+      false: true,
+      key: `top-guide-${value}`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 100
       }
-    }, showTitle && React$E.createElement(EditableHtml$1, {
+    }, React$E.createElement('div', {
+      className: classes.topPixelIndicator,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 101
+      }
+    }, React$E.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 102
+      }
+    }, value * 100, "px"), React$E.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 103
+      }
+    }, "|"))))), showTitle && React$E.createElement(EditableHtml$1, {
       className: cn$3({
         [classes.disabledTitle]: disabledTitle
       }, classes.graphTitle),
@@ -897,16 +940,23 @@ class Root$1 extends React$E.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 84
+        lineNumber: 110
+      }
+    }), React$E.createElement('div', {
+      className: classes.wrapper,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 125
       }
-    }), React$E.createElement('svg', {
+    }, React$E.createElement('svg', {
       width: finalWidth,
       height: finalHeight,
       className: classes.svg,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 99
+        lineNumber: 126
       }
     }, React$E.createElement('g', {
       ref: r => {
@@ -916,13 +966,38 @@ 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: 100
+        lineNumber: 127
       }
-    }, children)));
+    }, children)), showPixelGuides && React$E.createElement('div', {
+      className: classes.sidePixelGuides,
+      style: {
+        paddingTop: sideGridlinesPadding + chartPadding
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 141
+      }
+    }, [...Array(nbOfHorizontalLines + 1 - thisIsChart).keys()].reverse().map(value => React$E.createElement(Readable$2, {
+      false: true,
+      key: `top-guide-${value}`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 146
+      }
+    }, React$E.createElement('div', {
+      className: classes.sidePixelIndicator,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 147
+      }
+    }, "━ ", value * 100, "px"))))));
   }
 }
 Root$1.__initStatic();
@@ -932,6 +1007,9 @@ const styles$9 = theme => ({
     color: color$i.text(),
     backgroundColor: color$i.background()
   },
+  wrapper: {
+    display: 'flex'
+  },
   svg: {},
   graphBox: {
     cursor: 'pointer',
@@ -940,11 +1018,41 @@ const styles$9 = theme => ({
   graphTitle: {
     color: color$i.text(),
     fontSize: theme.typography.fontSize + 2,
-    padding: '8px 50px 0',
+    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',
+    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);
@@ -2628,7 +2736,8 @@ const log$a = debug$9('pie-lib:plot:grid-draggable');
 const deltaFn = (scale, snap, val) => delta => {
   const normalized = delta + scale(0);
   const inverted = scale.invert(normalized);
-  return snap(val + inverted);
+  const fixDecimalsArithmetic = snap(val + inverted).toFixed(4) * 1000 / 1000;
+  return fixDecimalsArithmetic;
 };
 const gridDraggable = opts => Comp => {
   browser(!!opts && isFunction$1(opts.fromDelta) && isFunction$1(opts.bounds) && isFunction$1(opts.anchorPoint), 'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }');
@@ -2835,7 +2944,7 @@ const gridDraggable = opts => Comp => {
         __self: this,
         __source: {
           fileName: _jsxFileName$v,
-          lineNumber: 207
+          lineNumber: 214
         }
       }, React$D.createElement(Comp, {
         ...rest,
@@ -2844,7 +2953,7 @@ const gridDraggable = opts => Comp => {
         __self: this,
         __source: {
           fileName: _jsxFileName$v,
-          lineNumber: 216
+          lineNumber: 223
         }
       }));
     }
@@ -5631,13 +5740,13 @@ const getTransform = (side, width, height) => {
 const getY = (side, height) => {
   switch (side) {
     case 'left':
-      return -height + 6;
+      return -height;
     case 'top':
-      return -height + 6;
-    case 'right':
       return -height;
+    case 'right':
+      return -height - 10;
     default:
-      return -height - 15;
+      return -height + 10;
   }
 };
 class RawLabel extends React$C.Component {
@@ -5647,11 +5756,17 @@ class RawLabel extends React$C.Component {
       side: PropTypes$A.string,
       classes: PropTypes$A.object,
       disabledLabel: PropTypes$A.bool,
+      placeholder: PropTypes$A.string,
       graphProps: GraphPropsType.isRequired
     };
   }
+  static __initStatic2() {
+    this.defaultProps = {
+      onChange: () => {}
+    };
+  }
   render() {
-    const {disabledLabel, text, side, graphProps, classes, onChange} = 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;
@@ -5659,25 +5774,26 @@ 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'];
+    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 * 2,
+      height: finalHeight,
       transform: transform,
       textAnchor: "middle",
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 75
+        lineNumber: 82
       }
     }, React$C.createElement(Readable$1, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 83
+        lineNumber: 90
       }
     }, React$C.createElement(EditableHtml, {
       className: cn$2({
@@ -5686,7 +5802,7 @@ class RawLabel extends React$C.Component {
       }, classes.axisLabel),
       markup: text || '',
       onChange: onChange,
-      placeholder: !disabledLabel && `Click here to add a ${side} label`,
+      placeholder: !disabledLabel && placeholder,
       toolbarOpts: {
         position: side === 'bottom' ? 'top' : 'bottom',
         noBorder: true
@@ -5695,19 +5811,21 @@ class RawLabel extends React$C.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 84
+        lineNumber: 91
       }
     })));
   }
 }
 RawLabel.__initStatic();
+RawLabel.__initStatic2();
 const Label = withStyles$k(theme => ({
   label: {
     fill: color$g.secondary()
   },
   axisLabel: {
     fontSize: theme.typography.fontSize - 2,
-    textAlign: 'center'
+    textAlign: 'center',
+    padding: '0 4px'
   },
   disabledAxisLabel: {
     pointerEvents: 'none'
@@ -5727,16 +5845,17 @@ class Labels extends React$C.Component {
     super(...args);
     Labels.prototype.__init.call(this);
   }
-  static __initStatic2() {
+  static __initStatic3() {
     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
     };
   }
-  static __initStatic3() {
+  static __initStatic4() {
     this.defaultProps = {};
   }
   __init() {
@@ -5750,66 +5869,70 @@ class Labels extends React$C.Component {
     };
   }
   render() {
-    const {disabledLabels, 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: 155
+        lineNumber: 164
       }
     }, 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: 156
+        lineNumber: 165
       }
     }), 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: 164
+        lineNumber: 174
       }
     }), 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: 172
+        lineNumber: 183
       }
     }), 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: 180
+        lineNumber: 192
       }
     }));
   }
 }
-Labels.__initStatic2();
 Labels.__initStatic3();
+Labels.__initStatic4();
 const React$B = _dll_react;
 const cx$3 = _dll_classnames;
 const PropTypes$z = _dll_prop_types;
@@ -8666,7 +8789,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: {
@@ -8712,8 +8835,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,
@@ -8814,7 +8937,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,
@@ -9319,6 +9442,7 @@ const graphPropTypes = {
     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
@@ -9442,7 +9566,7 @@ class Graph extends React$s.Component {
     };
   }
   render() {
-    const {axesSettings, currentTool, coordinatesOnHover, size, disabledLabels, disabledTitle, domain, backgroundMarks, range, title, labels, labelModeEnabled, showLabels, showTitle, onChangeLabels, onChangeTitle} = 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);
@@ -9457,28 +9581,31 @@ 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: 184
+        lineNumber: 188
       }
     }, React$s.createElement('g', {
-      transform: `translate(${domain.padding}, ${range.padding})`,
+      transform: domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 192
+        lineNumber: 199
       }
     }, React$s.createElement(Grid$1, {
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 193
+        lineNumber: 206
       }
     }), React$s.createElement(Axes, {
       ...axesSettings,
@@ -9486,7 +9613,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 194
+        lineNumber: 207
       }
     }), React$s.createElement(Bg, {
       ...size,
@@ -9495,14 +9622,14 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 195
+        lineNumber: 208
       }
     }), React$s.createElement('mask', {
       id: "myMask",
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 196
+        lineNumber: 209
       }
     }, React$s.createElement('rect', {
       ...maskSize,
@@ -9510,7 +9637,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 197
+        lineNumber: 210
       }
     }), " "), React$s.createElement('g', {
       id: "marks",
@@ -9518,7 +9645,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 200
+        lineNumber: 213
       }
     }, (backgroundMarks || []).map((m, index) => {
       const Component = this.getComponent(m);
@@ -9535,7 +9662,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 206
+          lineNumber: 219
         }
       });
     }), marks.map((m, index) => {
@@ -9556,7 +9683,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 220
+          lineNumber: 233
         }
       });
     }), React$s.createElement('foreignObject', {
@@ -9570,17 +9697,18 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 236
+        lineNumber: 249
       }
     }))), showLabels && React$s.createElement(Labels, {
       disabledLabels: disabledLabels,
+      placeholders: labelsPlaceholders,
       value: labels,
       onChange: onChangeLabels,
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 246
+        lineNumber: 259
       }
     }));
   }
@@ -14864,7 +14992,7 @@ class GraphWithControls extends React$2.Component {
   }
   render() {
     let {currentTool, labelModeEnabled} = this.state;
-    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;
+    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 || []);
@@ -14877,7 +15005,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 153
+        lineNumber: 156
       }
     }, React$2.createElement(ToolMenu, {
       currentToolType: currentTool && currentTool.type,
@@ -14891,7 +15019,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 154
+        lineNumber: 157
       }
     }), !disabled && React$2.createElement(UndoRedo$1, {
       onUndo: onUndo,
@@ -14900,7 +15028,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 165
+        lineNumber: 168
       }
     }));
     return React$2.createElement('div', {
@@ -14908,14 +15036,14 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 170
+        lineNumber: 173
       }
     }, React$2.createElement('div', {
       className: classes.controls,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 171
+        lineNumber: 174
       }
     }, collapsibleToolbar ? React$2.createElement(Collapsible, {
       classes: classes,
@@ -14923,14 +15051,14 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 173
+        lineNumber: 176
       }
     }, graphActions) : graphActions), React$2.createElement('div', {
       ref: r => this.labelNode = r,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 181
+        lineNumber: 184
       }
     }), React$2.createElement(Graph, {
       axesSettings: axesSettings,
@@ -14942,6 +15070,7 @@ class GraphWithControls extends React$2.Component {
       domain: domain,
       labels: labels,
       labelModeEnabled: labelModeEnabled,
+      labelsPlaceholders: labelsPlaceholders,
       marks: marks,
       onChangeMarks: !disabled ? onChangeMarks : undefined,
       onChangeLabels: onChangeLabels,
@@ -14949,13 +15078,15 @@ class GraphWithControls extends React$2.Component {
       range: range,
       size: size,
       showLabels: showLabels,
+      showPixelGuides: showPixelGuides,
       showTitle: showTitle,
       title: title,
+      titlePlaceholder: titlePlaceholder,
       tools: tools,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 183
+        lineNumber: 186
       }
     }));
   }
@@ -14963,9 +15094,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,
@@ -14980,7 +15114,8 @@ const styles$1 = theme => ({
     }
   },
   expansionPanel: {
-    backgroundColor: color$1.primaryLight()
+    backgroundColor: color$1.primaryLight(),
+    width: '100%'
   },
   summaryRoot: {
     padding: `0 ${theme.spacing.unit}px`,
@@ -14991,7 +15126,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);
@@ -15119,6 +15256,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;
@@ -15128,20 +15275,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,
@@ -15155,7 +15302,7 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 84
+      lineNumber: 95
     }
   }), max && max.enabled && React.createElement(NumberTextFieldCustom, {
     className: classes.mediumTextField,
@@ -15169,7 +15316,7 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 96
+      lineNumber: 107
     }
   }), axisLabel && axisLabel.enabled && React.createElement(InputContainer, {
     label: axisLabel.label || '',
@@ -15177,7 +15324,7 @@ const AxisConfig = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108
+      lineNumber: 119
     }
   }, React.createElement(EditableHTML, {
     className: classes.axisLabel,
@@ -15188,12 +15335,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
@@ -15282,14 +15429,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,
@@ -15304,7 +15451,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 219
+      lineNumber: 231
     }
   }), React.createElement(AxisConfig, {
     classes: classes,
@@ -15320,21 +15467,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,
@@ -15347,7 +15494,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 251
+      lineNumber: 263
     }
   }), React.createElement(GridConfig, {
     classes: classes,
@@ -15361,14 +15508,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', {
@@ -15376,7 +15523,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 281
+      lineNumber: 293
     }
   }, React.createElement(NumberTextFieldCustom, {
     className: classes.largeTextField,
@@ -15389,7 +15536,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 282
+      lineNumber: 294
     }
   }), React.createElement(NumberTextFieldCustom, {
     className: classes.largeTextField,
@@ -15403,7 +15550,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 291
+      lineNumber: 303
     }
   })) : null;
   return React.createElement('div', {
@@ -15411,46 +15558,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?",
@@ -15459,7 +15607,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 313
+      lineNumber: 325
     }
   }), standardGridEnabled && React.createElement(Toggle, {
     label: "Constrain to standard coordinate grid?",
@@ -15468,33 +15616,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,
@@ -15508,7 +15656,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 335
+      lineNumber: 347
     }
   }), React.createElement(NumberTextFieldCustom, {
     className: classes.textField,
@@ -15523,7 +15671,7 @@ const GridSetup = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 345
+      lineNumber: 357
     }
   }))))));
 };
@@ -15535,6 +15683,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.7.0",
+  "version": "1.8.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.3.0"
+        "version": "2.4.1"
       },
       "@pie-lib/graphing": {
-        "version": "2.9.0"
+        "version": "2.10.1"
       },
       "d3-scale": {
         "version": "2.2.2"
@@ -22,24 +22,24 @@
         "version": "1.4.2"
       }
     },
-    "hash": "e57b7cc6974ecb5a2cd24865ee305d043798f37e"
+    "hash": "cda39f3e0c3948415eaf100dddd762de983dbf03"
   },
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.5.7"
+      "version": "^1.5.10"
     },
     {
       "name": "@pie-lib/editable-html-module",
-      "version": "^3.1.0"
+      "version": "^3.1.3"
     },
     {
       "name": "@pie-lib/drag-module",
-      "version": "^1.0.59"
+      "version": "^1.0.62"
     },
     {
       "name": "@pie-lib/config-module",
-      "version": "^2.1.7"
+      "version": "^2.1.10"
     }
   ],
   "isLocal": true

package/package.json

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