@pie-lib/graphing 2.4.3-next.308 → 2.4.3-next.322

package/lib/grid-setup.js

@@ -23,10 +23,10 @@ var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/Expansio
 
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
 var _configUi = require("@pie-lib/config-ui");
 
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -46,7 +46,7 @@ var GridConfig = function GridConfig(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.columnView
   }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+    className: classes.mediumTextField,
     label: "Grid Interval",
     value: gridValue,
     customValues: gridValues,
@@ -56,7 +56,7 @@ var GridConfig = function GridConfig(props) {
       return _onChange('step', v);
     }
   }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+    className: classes.mediumTextField,
     label: "Label Interval",
     value: labelValue,
     customValues: labelValues,
@@ -76,56 +76,61 @@ var AxisConfig = function AxisConfig(props) {
       minValue = props.minValue,
       _onChange2 = props.onChange,
       type = props.type;
+  var activePlugins = ['bold', 'italic', 'underline', 'strikethrough' // 'languageCharacters'
+  ];
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.columnView
   }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     variant: "subtitle2"
   }, /*#__PURE__*/_react["default"].createElement("i", null, type === 'domain' ? 'x' : 'y'), "-axis"), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+    className: classes.mediumTextField,
     label: "Min Value",
     value: minValue,
+    min: -10000,
+    max: maxValue - 0.01,
     variant: "outlined",
     disabled: disabled,
     onChange: function onChange(e, v) {
       return _onChange2('min', v);
     }
   }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+    className: classes.mediumTextField,
     label: "Max Value",
     value: maxValue,
+    min: minValue + 0.01,
+    max: 10000,
     variant: "outlined",
     disabled: disabled,
     onChange: function onChange(e, v) {
       return _onChange2('max', v);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
     label: "Label",
-    value: label,
-    inputProps: {
-      maxLength: 5,
-      style: {
-        textAlign: 'center'
-      }
+    className: classes.mediumTextField
+  }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+    className: classes.axisLabel,
+    onChange: function onChange(value) {
+      return _onChange2('axisLabel', value);
     },
-    variant: "outlined",
-    className: classes.textField,
-    onChange: function onChange(e) {
-      return _onChange2('axisLabel', e.target.value);
-    }
-  }));
+    markup: label || '',
+    charactersLimit: 5,
+    activePlugins: activePlugins
+  })));
 };
 
 var GridSetup = function GridSetup(props) {
   var classes = props.classes,
-      sizeConstraints = props.sizeConstraints,
       domain = props.domain,
       dimensionsEnabled = props.dimensionsEnabled,
-      gridValues = props.gridValues,
+      _props$gridValues = props.gridValues,
+      gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
       includeAxes = props.includeAxes,
-      labelValues = props.labelValues,
+      _props$labelValues = props.labelValues,
+      labelValues = _props$labelValues === void 0 ? {} : _props$labelValues,
       onChange = props.onChange,
       range = props.range,
       size = props.size,
+      sizeConstraints = props.sizeConstraints,
       standardGrid = props.standardGrid;
   var gridProps = {
     min: 2,
@@ -229,14 +234,16 @@ var GridSetup = function GridSetup(props) {
     classes: classes,
     gridValue: domain.step,
     labelValue: domain.labelStep,
-    gridValues: gridValues,
-    labelValues: labelValues,
+    gridValues: gridValues.domain || [],
+    labelValues: labelValues.domain || [],
     onChange: onDomainChanged
   }), /*#__PURE__*/_react["default"].createElement(GridConfig, {
     classes: classes,
     disabled: standardGrid,
     gridValue: range.step,
     labelValue: range.labelStep,
+    gridValues: gridValues.range || [],
+    labelValues: labelValues.range || [],
     onChange: onRangeChanged
   })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: classes.text
@@ -287,7 +294,7 @@ var GridSetup = function GridSetup(props) {
     className: classes.dimensions
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Dimensions(px)"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: classes.disabled
-  }, "Min 150, Max 700")), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
+  }, "Min ", sizeConstraints.min, ", Max ", sizeConstraints.max)), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     className: classes.textField,
     label: "Width",
     value: size.width,
@@ -351,6 +358,10 @@ var styles = function styles(theme) {
       width: '130px',
       margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
     },
+    mediumTextField: {
+      width: '160px',
+      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
+    },
     largeTextField: {
       width: '230px',
       margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
@@ -366,6 +377,9 @@ var styles = function styles(theme) {
     },
     disabled: {
       color: _renderUi.color.disabled()
+    },
+    axisLabel: {
+      paddingTop: theme.spacing.unit * 2
     }
   };
 };

package/lib/grid-setup.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-setup.js","names":["GridConfig","props","classes","disabled","labelValue","labelValues","gridValue","gridValues","onChange","columnView","textField","e","v","AxisConfig","label","maxValue","minValue","type","maxLength","style","textAlign","target","value","GridSetup","sizeConstraints","domain","dimensionsEnabled","includeAxes","range","size","standardGrid","gridProps","min","max","onIncludeAxes","noAxesConfig","axis","step","labelStep","updatedRange","updatedDomain","onStandardGridChanged","axisLabel","graph","height","width","onSizeChanged","key","onDomainChanged","onRangeChanged","axesConfig","rowView","text","gridlinesConfig","largeTextField","wrapper","content","dimensions","propTypes","PropTypes","object","bool","styles","theme","display","flexDirection","alignItems","justifyContent","margin","spacing","unit","fontStyle","color","withStyles"],"sources":["../src/grid-setup.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport TextField from '@material-ui/core/TextField';\nimport { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';\n\nconst GridConfig = props => {\n  const { classes, disabled, labelValue, labelValues, gridValue, gridValues, onChange } = props;\n\n  return (\n    <div className={classes.columnView}>\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Grid Interval\"\n        value={gridValue}\n        customValues={gridValues}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('step', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Label Interval\"\n        value={labelValue}\n        customValues={labelValues}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('labelStep', v)}\n      />\n    </div>\n  );\n};\n\nconst AxisConfig = props => {\n  const { classes, disabled, label, maxValue, minValue, onChange, type } = props;\n\n  return (\n    <div className={classes.columnView}>\n      <Typography variant=\"subtitle2\">\n        <i>{type === 'domain' ? 'x' : 'y'}</i>\n        -axis\n      </Typography>\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Min Value\"\n        value={minValue}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('min', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Max Value\"\n        value={maxValue}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('max', v)}\n      />\n      <TextField\n        label=\"Label\"\n        value={label}\n        inputProps={{\n          maxLength: 5,\n          style: { textAlign: 'center' }\n        }}\n        variant=\"outlined\"\n        className={classes.textField}\n        onChange={e => onChange('axisLabel', e.target.value)}\n      />\n    </div>\n  );\n};\n\nconst GridSetup = props => {\n  const {\n    classes,\n    sizeConstraints,\n    domain,\n    dimensionsEnabled,\n    gridValues,\n    includeAxes,\n    labelValues,\n    onChange,\n    range,\n    size,\n    standardGrid\n  } = props;\n  const gridProps = { min: 2, max: 41 };\n\n  const onIncludeAxes = includeAxes => {\n    const noAxesConfig = type => {\n      const axis = type === 'domain' ? domain : range;\n\n      return {\n        min: 1,\n        max: axis.max < gridProps.min || axis.max > gridProps.max ? 16 : axis.max,\n        step: 1,\n        labelStep: 0\n      };\n    };\n\n    const updatedRange = {\n      ...range,\n      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('range'))\n    };\n    const updatedDomain = {\n      ...domain,\n      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('domain'))\n    };\n\n    onChange({ includeAxes, range: updatedRange, domain: updatedDomain });\n  };\n\n  const onStandardGridChanged = value => {\n    onChange({\n      standardGrid: value,\n      range: {\n        ...domain,\n        axisLabel: range.axisLabel\n      },\n      graph: {\n        ...size,\n        height: size.width\n      }\n    });\n  };\n\n  const onSizeChanged = (key, value) => {\n    const graph = { ...size, [key]: value };\n\n    if (standardGrid) {\n      graph.height = value;\n    }\n\n    onChange({ graph });\n  };\n\n  const onDomainChanged = (key, value) => {\n    domain[key] = value;\n\n    if (standardGrid && key !== 'axisLabel') {\n      range[key] = value;\n    }\n\n    onChange({ domain, range });\n  };\n\n  const onRangeChanged = (key, value) => {\n    range[key] = value;\n\n    onChange({ range });\n  };\n\n  const axesConfig = (\n    <React.Fragment>\n      <div className={classes.rowView}>\n        <AxisConfig\n          classes={classes}\n          type=\"domain\"\n          minValue={domain.min}\n          maxValue={domain.max}\n          label={domain.axisLabel}\n          includeAxes={includeAxes}\n          onChange={onDomainChanged}\n        />\n        <AxisConfig\n          classes={classes}\n          type=\"range\"\n          minValue={range.min}\n          maxValue={range.max}\n          label={range.axisLabel}\n          disabled={standardGrid}\n          includeAxes={includeAxes}\n          onChange={onRangeChanged}\n        />\n      </div>\n      <Typography className={classes.text}>\n        If you want the axis to be visible, use a zero or negative Min Value, and a positive Max\n        Value\n      </Typography>\n      <div className={classes.rowView}>\n        <GridConfig\n          classes={classes}\n          gridValue={domain.step}\n          labelValue={domain.labelStep}\n          gridValues={gridValues}\n          labelValues={labelValues}\n          onChange={onDomainChanged}\n        />\n        <GridConfig\n          classes={classes}\n          disabled={standardGrid}\n          gridValue={range.step}\n          labelValue={range.labelStep}\n          onChange={onRangeChanged}\n        />\n      </div>\n      <Typography className={classes.text}>\n        For unnumbered gridlines, enter a label interval of 0\n      </Typography>\n    </React.Fragment>\n  );\n\n  const gridlinesConfig = (\n    <div className={classes.columnView}>\n      <NumberTextFieldCustom\n        className={classes.largeTextField}\n        label=\"Number of Horizontal Gridlines\"\n        value={domain.max}\n        min={!includeAxes && gridProps.min}\n        max={!includeAxes && gridProps.max}\n        variant=\"outlined\"\n        onChange={(e, v) => onDomainChanged('max', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.largeTextField}\n        label=\"Number of Vertical Gridlines\"\n        value={range.max}\n        min={!includeAxes && gridProps.min}\n        max={!includeAxes && gridProps.max}\n        variant=\"outlined\"\n        disabled={standardGrid}\n        onChange={(e, v) => onRangeChanged('max', v)}\n      />\n    </div>\n  );\n\n  return (\n    <div className={classes.wrapper}>\n      <ExpansionPanel>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant=\"subtitle1\">Customize Grid Setup</Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <div className={classes.content}>\n            <Toggle label=\"Include axes and labels?\" toggle={onIncludeAxes} checked={includeAxes} />\n            <Toggle\n              label=\"Constrain to standard coordinate grid?\"\n              toggle={onStandardGridChanged}\n              checked={standardGrid}\n            />\n            {includeAxes ? axesConfig : gridlinesConfig}\n            {dimensionsEnabled && (\n              <div className={classes.dimensions}>\n                <div>\n                  <Typography>Dimensions(px)</Typography>\n                  <Typography className={classes.disabled}>Min 150, Max 700</Typography>\n                </div>\n                <NumberTextFieldCustom\n                  className={classes.textField}\n                  label=\"Width\"\n                  value={size.width}\n                  min={sizeConstraints.min}\n                  max={sizeConstraints.max}\n                  step={sizeConstraints.step}\n                  variant=\"outlined\"\n                  onChange={(e, v) => onSizeChanged('width', v)}\n                />\n                <NumberTextFieldCustom\n                  className={classes.textField}\n                  label=\"Height\"\n                  value={size.height}\n                  min={sizeConstraints.min}\n                  max={sizeConstraints.max}\n                  step={sizeConstraints.step}\n                  variant=\"outlined\"\n                  disabled={standardGrid}\n                  onChange={(e, v) => onSizeChanged('height', v)}\n                />\n              </div>\n            )}\n          </div>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n    </div>\n  );\n};\n\nGridSetup.propTypes = {\n  classes: PropTypes.object,\n  domain: PropTypes.object,\n  dimensionsEnabled: PropTypes.object,\n  gridValues: PropTypes.object,\n  includeAxes: PropTypes.bool,\n  labelValues: PropTypes.object,\n  onChange: PropTypes.function,\n  range: PropTypes.object,\n  size: PropTypes.object,\n  sizeConstraints: PropTypes.object,\n  standardGrid: PropTypes.bool\n};\n\nconst styles = theme => ({\n  wrapper: {\n    width: '450px'\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%'\n  },\n  columnView: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  rowView: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    alignItems: 'center'\n  },\n  textField: {\n    width: '130px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  largeTextField: {\n    width: '230px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  text: {\n    fontStyle: 'italic',\n    margin: `${theme.spacing.unit}px 0`\n  },\n  dimensions: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  },\n  disabled: {\n    color: color.disabled()\n  }\n});\n\nexport default withStyles(styles)(GridSetup);\n"],"mappings":"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"}
+{"version":3,"file":"grid-setup.js","names":["GridConfig","props","classes","disabled","labelValue","labelValues","gridValue","gridValues","onChange","columnView","mediumTextField","e","v","AxisConfig","label","maxValue","minValue","type","activePlugins","axisLabel","value","GridSetup","domain","dimensionsEnabled","includeAxes","range","size","sizeConstraints","standardGrid","gridProps","min","max","onIncludeAxes","noAxesConfig","axis","step","labelStep","updatedRange","updatedDomain","onStandardGridChanged","graph","height","width","onSizeChanged","key","onDomainChanged","onRangeChanged","axesConfig","rowView","text","gridlinesConfig","largeTextField","wrapper","content","dimensions","textField","propTypes","PropTypes","object","bool","styles","theme","display","flexDirection","alignItems","justifyContent","margin","spacing","unit","fontStyle","color","paddingTop","withStyles"],"sources":["../src/grid-setup.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color, InputContainer } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';\nimport EditableHTML from '@pie-lib/editable-html';\n\nconst GridConfig = props => {\n  const { classes, disabled, labelValue, labelValues, gridValue, gridValues, onChange } = props;\n\n  return (\n    <div className={classes.columnView}>\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Grid Interval\"\n        value={gridValue}\n        customValues={gridValues}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('step', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Label Interval\"\n        value={labelValue}\n        customValues={labelValues}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('labelStep', v)}\n      />\n    </div>\n  );\n};\n\nconst AxisConfig = props => {\n  const { classes, disabled, label, maxValue, minValue, onChange, type } = props;\n  const activePlugins = [\n    'bold',\n    'italic',\n    'underline',\n    'strikethrough'\n    // 'languageCharacters'\n  ];\n\n  return (\n    <div className={classes.columnView}>\n      <Typography variant=\"subtitle2\">\n        <i>{type === 'domain' ? 'x' : 'y'}</i>\n        -axis\n      </Typography>\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Min Value\"\n        value={minValue}\n        min={-10000}\n        max={maxValue - 0.01}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('min', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Max Value\"\n        value={maxValue}\n        min={minValue + 0.01}\n        max={10000}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('max', v)}\n      />\n      <InputContainer label=\"Label\" className={classes.mediumTextField}>\n        <EditableHTML\n          className={classes.axisLabel}\n          onChange={value => onChange('axisLabel', value)}\n          markup={label || ''}\n          charactersLimit={5}\n          activePlugins={activePlugins}\n        />\n      </InputContainer>\n    </div>\n  );\n};\n\nconst GridSetup = props => {\n  const {\n    classes,\n    domain,\n    dimensionsEnabled,\n    gridValues = {},\n    includeAxes,\n    labelValues = {},\n    onChange,\n    range,\n    size,\n    sizeConstraints,\n    standardGrid\n  } = props;\n  const gridProps = { min: 2, max: 41 };\n\n  const onIncludeAxes = includeAxes => {\n    const noAxesConfig = type => {\n      const axis = type === 'domain' ? domain : range;\n\n      return {\n        min: 1,\n        max: axis.max < gridProps.min || axis.max > gridProps.max ? 16 : axis.max,\n        step: 1,\n        labelStep: 0\n      };\n    };\n\n    const updatedRange = {\n      ...range,\n      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('range'))\n    };\n    const updatedDomain = {\n      ...domain,\n      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('domain'))\n    };\n\n    onChange({ includeAxes, range: updatedRange, domain: updatedDomain });\n  };\n\n  const onStandardGridChanged = value => {\n    onChange({\n      standardGrid: value,\n      range: {\n        ...domain,\n        axisLabel: range.axisLabel\n      },\n      graph: {\n        ...size,\n        height: size.width\n      }\n    });\n  };\n\n  const onSizeChanged = (key, value) => {\n    const graph = { ...size, [key]: value };\n\n    if (standardGrid) {\n      graph.height = value;\n    }\n\n    onChange({ graph });\n  };\n\n  const onDomainChanged = (key, value) => {\n    domain[key] = value;\n\n    if (standardGrid && key !== 'axisLabel') {\n      range[key] = value;\n    }\n\n    onChange({ domain, range });\n  };\n\n  const onRangeChanged = (key, value) => {\n    range[key] = value;\n\n    onChange({ range });\n  };\n\n  const axesConfig = (\n    <React.Fragment>\n      <div className={classes.rowView}>\n        <AxisConfig\n          classes={classes}\n          type=\"domain\"\n          minValue={domain.min}\n          maxValue={domain.max}\n          label={domain.axisLabel}\n          includeAxes={includeAxes}\n          onChange={onDomainChanged}\n        />\n        <AxisConfig\n          classes={classes}\n          type=\"range\"\n          minValue={range.min}\n          maxValue={range.max}\n          label={range.axisLabel}\n          disabled={standardGrid}\n          includeAxes={includeAxes}\n          onChange={onRangeChanged}\n        />\n      </div>\n      <Typography className={classes.text}>\n        If you want the axis to be visible, use a zero or negative Min Value, and a positive Max\n        Value\n      </Typography>\n      <div className={classes.rowView}>\n        <GridConfig\n          classes={classes}\n          gridValue={domain.step}\n          labelValue={domain.labelStep}\n          gridValues={gridValues.domain || []}\n          labelValues={labelValues.domain || []}\n          onChange={onDomainChanged}\n        />\n        <GridConfig\n          classes={classes}\n          disabled={standardGrid}\n          gridValue={range.step}\n          labelValue={range.labelStep}\n          gridValues={gridValues.range || []}\n          labelValues={labelValues.range || []}\n          onChange={onRangeChanged}\n        />\n      </div>\n      <Typography className={classes.text}>\n        For unnumbered gridlines, enter a label interval of 0\n      </Typography>\n    </React.Fragment>\n  );\n\n  const gridlinesConfig = (\n    <div className={classes.columnView}>\n      <NumberTextFieldCustom\n        className={classes.largeTextField}\n        label=\"Number of Horizontal Gridlines\"\n        value={domain.max}\n        min={!includeAxes && gridProps.min}\n        max={!includeAxes && gridProps.max}\n        variant=\"outlined\"\n        onChange={(e, v) => onDomainChanged('max', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.largeTextField}\n        label=\"Number of Vertical Gridlines\"\n        value={range.max}\n        min={!includeAxes && gridProps.min}\n        max={!includeAxes && gridProps.max}\n        variant=\"outlined\"\n        disabled={standardGrid}\n        onChange={(e, v) => onRangeChanged('max', v)}\n      />\n    </div>\n  );\n\n  return (\n    <div className={classes.wrapper}>\n      <ExpansionPanel>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant=\"subtitle1\">Customize Grid Setup</Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <div className={classes.content}>\n            <Toggle label=\"Include axes and labels?\" toggle={onIncludeAxes} checked={includeAxes} />\n            <Toggle\n              label=\"Constrain to standard coordinate grid?\"\n              toggle={onStandardGridChanged}\n              checked={standardGrid}\n            />\n            {includeAxes ? axesConfig : gridlinesConfig}\n            {dimensionsEnabled && (\n              <div className={classes.dimensions}>\n                <div>\n                  <Typography>Dimensions(px)</Typography>\n                  <Typography className={classes.disabled}>\n                    Min {sizeConstraints.min}, Max {sizeConstraints.max}\n                  </Typography>\n                </div>\n                <NumberTextFieldCustom\n                  className={classes.textField}\n                  label=\"Width\"\n                  value={size.width}\n                  min={sizeConstraints.min}\n                  max={sizeConstraints.max}\n                  step={sizeConstraints.step}\n                  variant=\"outlined\"\n                  onChange={(e, v) => onSizeChanged('width', v)}\n                />\n                <NumberTextFieldCustom\n                  className={classes.textField}\n                  label=\"Height\"\n                  value={size.height}\n                  min={sizeConstraints.min}\n                  max={sizeConstraints.max}\n                  step={sizeConstraints.step}\n                  variant=\"outlined\"\n                  disabled={standardGrid}\n                  onChange={(e, v) => onSizeChanged('height', v)}\n                />\n              </div>\n            )}\n          </div>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n    </div>\n  );\n};\n\nGridSetup.propTypes = {\n  classes: PropTypes.object,\n  domain: PropTypes.object,\n  dimensionsEnabled: PropTypes.object,\n  gridValues: PropTypes.object,\n  includeAxes: PropTypes.bool,\n  labelValues: PropTypes.object,\n  onChange: PropTypes.function,\n  range: PropTypes.object,\n  size: PropTypes.object,\n  sizeConstraints: PropTypes.object,\n  standardGrid: PropTypes.bool\n};\n\nconst styles = theme => ({\n  wrapper: {\n    width: '450px'\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%'\n  },\n  columnView: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  rowView: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    alignItems: 'center'\n  },\n  textField: {\n    width: '130px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  mediumTextField: {\n    width: '160px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  largeTextField: {\n    width: '230px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  text: {\n    fontStyle: 'italic',\n    margin: `${theme.spacing.unit}px 0`\n  },\n  dimensions: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  },\n  disabled: {\n    color: color.disabled()\n  },\n  axisLabel: {\n    paddingTop: theme.spacing.unit * 2\n  }\n});\n\nexport default withStyles(styles)(GridSetup);\n"],"mappings":"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"}

package/lib/grid.js

@@ -127,13 +127,6 @@ var Grid = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(Grid, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      var graphProps = this.props.graphProps;
-      var nextGraphProps = nextProps.graphProps;
-      return !_plot.utils.isDomainRangeEqual(graphProps, nextGraphProps);
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;

package/lib/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":["Grid","rowTickValues","columnTickValues","props","graphProps","scale","size","width","height","domain","range","rowTickLabelValues","getTickValues","step","labelStep","filter","value","includes","columnTickLabelValues","minValueLength","length","Math","min","toString","replace","maxValueLength","max","rowLabelLength","horizontalDistanceToZero","x","verticalDistanceToZero","y","columnLabelLength","rowStrokeDasharray","columnStrokeDasharray","displayAdditionalGrid","filteredColumnValues","filteredRowValues","nextProps","nextGraphProps","utils","isDomainRangeEqual","classes","getAdditionalGridProps","r","grid","color","primary","React","Component","disabled","PropTypes","bool","disabledAdditionalGrid","object","isRequired","types","GraphPropsType","withStyles","stroke"],"sources":["../src/grid.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as vx from '@vx/grid';\nimport { types, utils } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport { getTickValues } from './utils';\n\nexport class Grid extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    disabledAdditionalGrid: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  shouldComponentUpdate(nextProps) {\n    const { graphProps } = this.props;\n    const { graphProps: nextGraphProps } = nextProps;\n\n    return !utils.isDomainRangeEqual(graphProps, nextGraphProps);\n  }\n\n  getAdditionalGridProps = (rowTickValues, columnTickValues) => {\n    const {\n      graphProps: {\n        scale,\n        size: { width, height },\n        domain,\n        range\n      }\n    } = this.props;\n    const rowTickLabelValues = getTickValues({\n      ...range,\n      step: range.labelStep\n    }).filter(value => rowTickValues.includes(value));\n    const columnTickLabelValues = getTickValues({\n      ...domain,\n      step: domain.labelStep\n    }).filter(value => columnTickValues.includes(value));\n\n    const minValueLength =\n      (rowTickLabelValues.length &&\n        Math.min(...rowTickLabelValues)\n          .toString()\n          .replace(/[.-]/g, '').length) ||\n      1;\n    const maxValueLength =\n      (rowTickLabelValues.length &&\n        Math.max(...rowTickLabelValues)\n          .toString()\n          .replace(/[.-]/g, '').length) ||\n      1;\n\n    const rowLabelLength = Math.max(minValueLength, maxValueLength) * 9 + 22;\n    const horizontalDistanceToZero = scale.x(0);\n    const verticalDistanceToZero = scale.y(0);\n    const columnLabelLength = 28;\n    const rowStrokeDasharray = `${horizontalDistanceToZero -\n      rowLabelLength} ${rowLabelLength} ${width}`;\n    const columnStrokeDasharray = `${verticalDistanceToZero} ${columnLabelLength} ${height}`;\n\n    const displayAdditionalGrid =\n      domain.labelStep > 0 &&\n      range.labelStep > 0 &&\n      rowTickLabelValues &&\n      columnTickLabelValues &&\n      rowTickLabelValues.length > 1 &&\n      columnTickLabelValues.length > 1 &&\n      (rowTickLabelValues.length !== rowTickValues.length ||\n        columnTickLabelValues.length !== columnTickValues.length);\n\n    const filteredColumnValues = columnTickLabelValues.filter(\n      value => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength\n    );\n    const filteredRowValues = rowTickLabelValues.filter(\n      value => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength\n    );\n\n    return {\n      rowTickLabelValues: filteredRowValues,\n      columnTickLabelValues: filteredColumnValues,\n      rowStrokeDasharray,\n      columnStrokeDasharray,\n      displayAdditionalGrid\n    };\n  };\n\n  render() {\n    const { classes, graphProps } = this.props;\n    const {\n      scale,\n      size: { height, width },\n      domain,\n      range\n    } = graphProps;\n    const rowTickValues = getTickValues(range);\n    const columnTickValues = getTickValues(domain);\n    const {\n      rowTickLabelValues,\n      columnTickLabelValues,\n      rowStrokeDasharray,\n      columnStrokeDasharray,\n      displayAdditionalGrid\n    } = this.getAdditionalGridProps(rowTickValues, columnTickValues);\n\n    return (\n      <>\n        <vx.Grid\n          innerRef={r => (this.grid = r)}\n          xScale={scale.x}\n          yScale={scale.y}\n          width={width}\n          height={height}\n          className={classes.grid}\n          rowTickValues={rowTickValues}\n          columnTickValues={columnTickValues}\n        />\n        {displayAdditionalGrid && (\n          <>\n            <vx.GridRows\n              scale={scale.y}\n              width={width}\n              tickValues={rowTickLabelValues}\n              stroke={color.primary()}\n              strokeDasharray={rowStrokeDasharray}\n            />\n            <vx.GridColumns\n              scale={scale.x}\n              height={height}\n              tickValues={columnTickLabelValues}\n              stroke={color.primary()}\n              strokeDasharray={columnStrokeDasharray}\n            />\n          </>\n        )}\n      </>\n    );\n  }\n}\n\nexport default withStyles(() => ({\n  grid: {\n    stroke: 'purple' // TODO hardcoded color\n  }\n}))(Grid);\n"],"mappings":"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"}
+{"version":3,"file":"grid.js","names":["Grid","rowTickValues","columnTickValues","props","graphProps","scale","size","width","height","domain","range","rowTickLabelValues","getTickValues","step","labelStep","filter","value","includes","columnTickLabelValues","minValueLength","length","Math","min","toString","replace","maxValueLength","max","rowLabelLength","horizontalDistanceToZero","x","verticalDistanceToZero","y","columnLabelLength","rowStrokeDasharray","columnStrokeDasharray","displayAdditionalGrid","filteredColumnValues","filteredRowValues","classes","getAdditionalGridProps","r","grid","color","primary","React","Component","disabled","PropTypes","bool","disabledAdditionalGrid","object","isRequired","types","GraphPropsType","withStyles","stroke"],"sources":["../src/grid.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as vx from '@vx/grid';\nimport { types, utils } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport { getTickValues } from './utils';\n\nexport class Grid extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    disabledAdditionalGrid: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  getAdditionalGridProps = (rowTickValues, columnTickValues) => {\n    const {\n      graphProps: {\n        scale,\n        size: { width, height },\n        domain,\n        range\n      }\n    } = this.props;\n    const rowTickLabelValues = getTickValues({\n      ...range,\n      step: range.labelStep\n    }).filter(value => rowTickValues.includes(value));\n    const columnTickLabelValues = getTickValues({\n      ...domain,\n      step: domain.labelStep\n    }).filter(value => columnTickValues.includes(value));\n\n    const minValueLength =\n      (rowTickLabelValues.length &&\n        Math.min(...rowTickLabelValues)\n          .toString()\n          .replace(/[.-]/g, '').length) ||\n      1;\n    const maxValueLength =\n      (rowTickLabelValues.length &&\n        Math.max(...rowTickLabelValues)\n          .toString()\n          .replace(/[.-]/g, '').length) ||\n      1;\n\n    const rowLabelLength = Math.max(minValueLength, maxValueLength) * 9 + 22;\n    const horizontalDistanceToZero = scale.x(0);\n    const verticalDistanceToZero = scale.y(0);\n    const columnLabelLength = 28;\n    const rowStrokeDasharray = `${horizontalDistanceToZero -\n      rowLabelLength} ${rowLabelLength} ${width}`;\n    const columnStrokeDasharray = `${verticalDistanceToZero} ${columnLabelLength} ${height}`;\n\n    const displayAdditionalGrid =\n      domain.labelStep > 0 &&\n      range.labelStep > 0 &&\n      rowTickLabelValues &&\n      columnTickLabelValues &&\n      rowTickLabelValues.length > 1 &&\n      columnTickLabelValues.length > 1 &&\n      (rowTickLabelValues.length !== rowTickValues.length ||\n        columnTickLabelValues.length !== columnTickValues.length);\n\n    const filteredColumnValues = columnTickLabelValues.filter(\n      value => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength\n    );\n    const filteredRowValues = rowTickLabelValues.filter(\n      value => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength\n    );\n\n    return {\n      rowTickLabelValues: filteredRowValues,\n      columnTickLabelValues: filteredColumnValues,\n      rowStrokeDasharray,\n      columnStrokeDasharray,\n      displayAdditionalGrid\n    };\n  };\n\n  render() {\n    const { classes, graphProps } = this.props;\n    const {\n      scale,\n      size: { height, width },\n      domain,\n      range\n    } = graphProps;\n    const rowTickValues = getTickValues(range);\n    const columnTickValues = getTickValues(domain);\n    const {\n      rowTickLabelValues,\n      columnTickLabelValues,\n      rowStrokeDasharray,\n      columnStrokeDasharray,\n      displayAdditionalGrid\n    } = this.getAdditionalGridProps(rowTickValues, columnTickValues);\n\n    return (\n      <>\n        <vx.Grid\n          innerRef={r => (this.grid = r)}\n          xScale={scale.x}\n          yScale={scale.y}\n          width={width}\n          height={height}\n          className={classes.grid}\n          rowTickValues={rowTickValues}\n          columnTickValues={columnTickValues}\n        />\n        {displayAdditionalGrid && (\n          <>\n            <vx.GridRows\n              scale={scale.y}\n              width={width}\n              tickValues={rowTickLabelValues}\n              stroke={color.primary()}\n              strokeDasharray={rowStrokeDasharray}\n            />\n            <vx.GridColumns\n              scale={scale.x}\n              height={height}\n              tickValues={columnTickLabelValues}\n              stroke={color.primary()}\n              strokeDasharray={columnStrokeDasharray}\n            />\n          </>\n        )}\n      </>\n    );\n  }\n}\n\nexport default withStyles(() => ({\n  grid: {\n    stroke: 'purple' // TODO hardcoded color\n  }\n}))(Grid);\n"],"mappings":"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"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.4.3-next.308+40b281fe",
+  "version": "2.4.3-next.322+b63751da",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -20,7 +20,7 @@
     "@material-ui/core": "^3.8.3",
     "@pie-lib/graphing-utils": "^1.1.20",
     "@pie-lib/plot": "^2.1.9",
-    "@pie-lib/render-ui": "^4.12.1-next.308+40b281fe",
+    "@pie-lib/render-ui": "^4.12.0",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
     "@vx/event": "^0.0.189",
@@ -43,6 +43,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "40b281fe21d11c0fab3842c8bd271efcfbbe5214",
+  "gitHead": "b63751da9a0a46186b139e849a560ad3d7fd5866",
   "scripts": {}
 }

package/src/grid-setup.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
+import { color, InputContainer } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import Typography from '@material-ui/core/Typography';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import TextField from '@material-ui/core/TextField';
 import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
+import EditableHTML from '@pie-lib/editable-html';
 
 const GridConfig = props => {
   const { classes, disabled, labelValue, labelValues, gridValue, gridValues, onChange } = props;
@@ -16,7 +16,7 @@ const GridConfig = props => {
   return (
     <div className={classes.columnView}>
       <NumberTextFieldCustom
-        className={classes.textField}
+        className={classes.mediumTextField}
         label="Grid Interval"
         value={gridValue}
         customValues={gridValues}
@@ -25,7 +25,7 @@ const GridConfig = props => {
         onChange={(e, v) => onChange('step', v)}
       />
       <NumberTextFieldCustom
-        className={classes.textField}
+        className={classes.mediumTextField}
         label="Label Interval"
         value={labelValue}
         customValues={labelValues}
@@ -39,6 +39,13 @@ const GridConfig = props => {
 
 const AxisConfig = props => {
   const { classes, disabled, label, maxValue, minValue, onChange, type } = props;
+  const activePlugins = [
+    'bold',
+    'italic',
+    'underline',
+    'strikethrough'
+    // 'languageCharacters'
+  ];
 
   return (
     <div className={classes.columnView}>
@@ -47,32 +54,34 @@ const AxisConfig = props => {
         -axis
       </Typography>
       <NumberTextFieldCustom
-        className={classes.textField}
+        className={classes.mediumTextField}
         label="Min Value"
         value={minValue}
+        min={-10000}
+        max={maxValue - 0.01}
         variant="outlined"
         disabled={disabled}
         onChange={(e, v) => onChange('min', v)}
       />
       <NumberTextFieldCustom
-        className={classes.textField}
+        className={classes.mediumTextField}
         label="Max Value"
         value={maxValue}
+        min={minValue + 0.01}
+        max={10000}
         variant="outlined"
         disabled={disabled}
         onChange={(e, v) => onChange('max', v)}
       />
-      <TextField
-        label="Label"
-        value={label}
-        inputProps={{
-          maxLength: 5,
-          style: { textAlign: 'center' }
-        }}
-        variant="outlined"
-        className={classes.textField}
-        onChange={e => onChange('axisLabel', e.target.value)}
-      />
+      <InputContainer label="Label" className={classes.mediumTextField}>
+        <EditableHTML
+          className={classes.axisLabel}
+          onChange={value => onChange('axisLabel', value)}
+          markup={label || ''}
+          charactersLimit={5}
+          activePlugins={activePlugins}
+        />
+      </InputContainer>
     </div>
   );
 };
@@ -80,15 +89,15 @@ const AxisConfig = props => {
 const GridSetup = props => {
   const {
     classes,
-    sizeConstraints,
     domain,
     dimensionsEnabled,
-    gridValues,
+    gridValues = {},
     includeAxes,
-    labelValues,
+    labelValues = {},
     onChange,
     range,
     size,
+    sizeConstraints,
     standardGrid
   } = props;
   const gridProps = { min: 2, max: 41 };
@@ -189,8 +198,8 @@ const GridSetup = props => {
           classes={classes}
           gridValue={domain.step}
           labelValue={domain.labelStep}
-          gridValues={gridValues}
-          labelValues={labelValues}
+          gridValues={gridValues.domain || []}
+          labelValues={labelValues.domain || []}
           onChange={onDomainChanged}
         />
         <GridConfig
@@ -198,6 +207,8 @@ const GridSetup = props => {
           disabled={standardGrid}
           gridValue={range.step}
           labelValue={range.labelStep}
+          gridValues={gridValues.range || []}
+          labelValues={labelValues.range || []}
           onChange={onRangeChanged}
         />
       </div>
@@ -250,7 +261,9 @@ const GridSetup = props => {
               <div className={classes.dimensions}>
                 <div>
                   <Typography>Dimensions(px)</Typography>
-                  <Typography className={classes.disabled}>Min 150, Max 700</Typography>
+                  <Typography className={classes.disabled}>
+                    Min {sizeConstraints.min}, Max {sizeConstraints.max}
+                  </Typography>
                 </div>
                 <NumberTextFieldCustom
                   className={classes.textField}
@@ -319,6 +332,10 @@ const styles = theme => ({
     width: '130px',
     margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
   },
+  mediumTextField: {
+    width: '160px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
   largeTextField: {
     width: '230px',
     margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
@@ -334,6 +351,9 @@ const styles = theme => ({
   },
   disabled: {
     color: color.disabled()
+  },
+  axisLabel: {
+    paddingTop: theme.spacing.unit * 2
   }
 });
 

package/src/grid.jsx

@@ -14,13 +14,6 @@ export class Grid extends React.Component {
     graphProps: types.GraphPropsType.isRequired
   };
 
-  shouldComponentUpdate(nextProps) {
-    const { graphProps } = this.props;
-    const { graphProps: nextGraphProps } = nextProps;
-
-    return !utils.isDomainRangeEqual(graphProps, nextGraphProps);
-  }
-
   getAdditionalGridProps = (rowTickValues, columnTickValues) => {
     const {
       graphProps: {