@pie-lib/graphing 2.8.1 → 2.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.8.1...@pie-lib/graphing@2.9.0) (2022-08-01)
+
+
+### Features
+
+* **graphing, editable-html, plot:** Added the ability to edit/center title and lables PD-1605 PD-1690 ([dd18f92](https://github.com/pie-framework/pie-lib/commit/dd18f92e19d8be98917cd4f19eb7211122d2b7fb))
+
+
+
+
+
 ## [2.8.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.8.0...@pie-lib/graphing@2.8.1) (2022-07-18)
 
 **Note:** Version bump only for package @pie-lib/graphing

package/lib/graph-with-controls.js

@@ -202,16 +202,22 @@ var GraphWithControls = /*#__PURE__*/function (_React$Component) {
           collapsibleToolbar = _this$props.collapsibleToolbar,
           collapsibleToolbarTitle = _this$props.collapsibleToolbarTitle,
           disabled = _this$props.disabled,
+          disabledLabels = _this$props.disabledLabels,
+          disabledTitle = _this$props.disabledTitle,
           domain = _this$props.domain,
           draggableTools = _this$props.draggableTools,
           labels = _this$props.labels,
+          onChangeLabels = _this$props.onChangeLabels,
           onChangeMarks = _this$props.onChangeMarks,
+          onChangeTitle = _this$props.onChangeTitle,
           onChangeTools = _this$props.onChangeTools,
           onUndo = _this$props.onUndo,
           onRedo = _this$props.onRedo,
           onReset = _this$props.onReset,
           range = _this$props.range,
           size = _this$props.size,
+          showLabels = _this$props.showLabels,
+          showTitle = _this$props.showTitle,
           title = _this$props.title;
       var _this$props2 = this.props,
           backgroundMarks = _this$props2.backgroundMarks,
@@ -264,13 +270,19 @@ var GraphWithControls = /*#__PURE__*/function (_React$Component) {
         backgroundMarks: backgroundMarks,
         coordinatesOnHover: coordinatesOnHover,
         currentTool: currentTool,
+        disabledLabels: disabledLabels,
+        disabledTitle: disabledTitle,
         domain: domain,
         labels: labels,
         labelModeEnabled: labelModeEnabled,
         marks: marks,
         onChangeMarks: !disabled ? onChangeMarks : undefined,
+        onChangeLabels: onChangeLabels,
+        onChangeTitle: onChangeTitle,
         range: range,
         size: size,
+        showLabels: showLabels,
+        showTitle: showTitle,
         title: title,
         tools: tools
       }));
@@ -290,6 +302,10 @@ exports.GraphWithControls = GraphWithControls;
 (0, _defineProperty2["default"])(GraphWithControls, "defaultProps", {
   collapsibleToolbar: false,
   collapsibleToolbarTitle: '',
+  disabledLabels: false,
+  disabledTitle: false,
+  showLabels: true,
+  showTitle: true,
   toolbarTools: []
 });
 

package/lib/graph-with-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/graph-with-controls.jsx"],"names":["setToolbarAvailability","toolbarTools","toolsArr","map","tA","toolbar","find","t","type","toolIsAvailable","tools","currentTool","tool","getAvailableTool","filterByValidToolTypes","backgroundMarks","filter","bM","allTools","filterByVisibleToolTypes","marks","getDefaultCurrentTool","toolType","Collapsible","classes","children","title","expansionPanel","root","summaryRoot","content","summaryContent","details","propTypes","PropTypes","object","array","string","GraphWithControls","props","setState","state","labelModeEnabled","defaultTool","prevProps","axesSettings","className","coordinatesOnHover","collapsibleToolbar","collapsibleToolbarTitle","disabled","domain","draggableTools","labels","onChangeMarks","onChangeTools","onUndo","onRedo","onReset","range","size","tT","graphActions","changeCurrentTool","toggleLabelMode","graphWithControls","controls","r","labelNode","undefined","React","Component","graphPropTypes","func","arrayOf","styles","theme","width","display","justifyContent","padding","spacing","unit","color","text","backgroundColor","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","fontSize","typography","minHeight","margin","marginTop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport uniq from 'lodash/uniq';\nimport isString from 'lodash/isString';\nimport { color } from '@pie-lib/render-ui';\n\nimport ToolMenu from './tool-menu';\nimport Graph, { graphPropTypes } from './graph';\nimport UndoRedo from './undo-redo';\nimport { allTools, toolsArr } from './tools';\nimport {\n  ExpansionPanel,\n  ExpansionPanelDetails,\n  ExpansionPanelSummary,\n  Typography\n} from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nexport const setToolbarAvailability = toolbarTools =>\n  toolsArr.map(tA => ({ ...tA, toolbar: !!toolbarTools.find(t => t === tA.type) })) || [];\n\nexport const toolIsAvailable = (tools, currentTool) =>\n  currentTool && tools && (tools.find(tool => tool.type === currentTool.type) || {}).toolbar;\n\nexport const getAvailableTool = tools => tools.find(tool => tool.toolbar);\n\nexport const filterByValidToolTypes = backgroundMarks =>\n  backgroundMarks.filter(bM => !!allTools.find(tool => tool === bM.type));\n\nexport const filterByVisibleToolTypes = (toolbarTools, marks) =>\n  marks.filter(bM => !!toolbarTools.find(tool => tool === bM.type));\n\nconst getDefaultCurrentTool = toolType => toolsArr.find(tool => tool.type === toolType) || null;\n\nconst Collapsible = ({ classes, children, title }) => (\n  <ExpansionPanel\n    elevation={0}\n    className={classes.expansionPanel}\n    disabledGutters={true}\n    square={true}\n  >\n    <ExpansionPanelSummary\n      classes={{\n        root: classes.summaryRoot,\n        content: classes.summaryContent\n      }}\n      expandIcon={<ExpandMoreIcon />}\n    >\n      <Typography variant=\"subheading\">{title}</Typography>\n    </ExpansionPanelSummary>\n    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>\n  </ExpansionPanel>\n);\n\nCollapsible.propTypes = {\n  classes: PropTypes.object,\n  children: PropTypes.array,\n  title: PropTypes.string\n};\n\nexport class GraphWithControls extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    onUndo: PropTypes.func,\n    onRedo: PropTypes.func,\n    onReset: PropTypes.func,\n    toolbarTools: PropTypes.arrayOf(PropTypes.string) // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'\n  };\n\n  static defaultProps = {\n    collapsibleToolbar: false,\n    collapsibleToolbarTitle: '',\n    toolbarTools: []\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      currentTool: getDefaultCurrentTool(props.defaultTool),\n      labelModeEnabled: false\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    const { defaultTool } = this.props;\n\n    if (prevProps.defaultTool !== defaultTool) {\n      const currentTool = getDefaultCurrentTool(defaultTool);\n\n      this.setState({ currentTool });\n    }\n  }\n\n  changeCurrentTool = (tool, tools) =>\n    this.setState({ currentTool: tools.find(t => t.type === tool) });\n\n  toggleLabelMode = () => this.setState(state => ({ labelModeEnabled: !state.labelModeEnabled }));\n\n  render() {\n    let { currentTool, labelModeEnabled } = this.state;\n    const {\n      axesSettings,\n      classes,\n      className,\n      coordinatesOnHover,\n      collapsibleToolbar,\n      collapsibleToolbarTitle,\n      disabled,\n      domain,\n      draggableTools,\n      labels,\n      onChangeMarks,\n      onChangeTools,\n      onUndo,\n      onRedo,\n      onReset,\n      range,\n      size,\n      title\n    } = this.props;\n    let { backgroundMarks, marks, toolbarTools } = this.props;\n\n    // make sure only valid tool types are kept (string) and without duplicates\n    toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];\n\n    // keep only the backgroundMarks that have valid types\n    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);\n\n    // keep only the marks that have types which appear in toolbar\n    marks = filterByVisibleToolTypes(toolbarTools, marks || []);\n\n    const tools = setToolbarAvailability(toolbarTools);\n\n    // set current tool if there's no current tool or if the existing one is no longer available\n    if (!currentTool || !toolIsAvailable(tools, currentTool)) {\n      currentTool = getAvailableTool(tools);\n    }\n\n    const graphActions = (\n      <React.Fragment>\n        <ToolMenu\n          currentToolType={currentTool && currentTool.type}\n          disabled={!!disabled}\n          draggableTools={draggableTools}\n          labelModeEnabled={labelModeEnabled}\n          onChange={tool => this.changeCurrentTool(tool, tools)}\n          onToggleLabelMode={this.toggleLabelMode}\n          toolbarTools={toolbarTools}\n          onChangeTools={onChangeTools}\n        />\n\n        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} />}\n      </React.Fragment>\n    );\n\n    return (\n      <div className={classNames(classes.graphWithControls, className)}>\n        <div className={classes.controls}>\n          {collapsibleToolbar ? (\n            <Collapsible classes={classes} title={collapsibleToolbarTitle}>\n              {graphActions}\n            </Collapsible>\n          ) : (\n            graphActions\n          )}\n        </div>\n\n        <div ref={r => (this.labelNode = r)} />\n\n        <Graph\n          axesSettings={axesSettings}\n          backgroundMarks={backgroundMarks}\n          coordinatesOnHover={coordinatesOnHover}\n          currentTool={currentTool}\n          domain={domain}\n          labels={labels}\n          labelModeEnabled={labelModeEnabled}\n          marks={marks}\n          onChangeMarks={!disabled ? onChangeMarks : undefined}\n          range={range}\n          size={size}\n          title={title}\n          tools={tools}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphWithControls: {},\n  controls: {\n    width: 'inherit',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`,\n    '& button': {\n      fontSize: theme.typography.fontSize\n    }\n  },\n  expansionPanel: {\n    backgroundColor: color.primaryLight()\n  },\n  summaryRoot: {\n    padding: `0 ${theme.spacing.unit}px`,\n    minHeight: '32px !important'\n  },\n  summaryContent: {\n    margin: '4px 0 !important'\n  },\n  details: {\n    padding: 0,\n    marginTop: theme.spacing.unit\n  }\n});\n\nexport default withStyles(styles)(GraphWithControls);\n"],"file":"graph-with-controls.js"}
+{"version":3,"sources":["../src/graph-with-controls.jsx"],"names":["setToolbarAvailability","toolbarTools","toolsArr","map","tA","toolbar","find","t","type","toolIsAvailable","tools","currentTool","tool","getAvailableTool","filterByValidToolTypes","backgroundMarks","filter","bM","allTools","filterByVisibleToolTypes","marks","getDefaultCurrentTool","toolType","Collapsible","classes","children","title","expansionPanel","root","summaryRoot","content","summaryContent","details","propTypes","PropTypes","object","array","string","GraphWithControls","props","setState","state","labelModeEnabled","defaultTool","prevProps","axesSettings","className","coordinatesOnHover","collapsibleToolbar","collapsibleToolbarTitle","disabled","disabledLabels","disabledTitle","domain","draggableTools","labels","onChangeLabels","onChangeMarks","onChangeTitle","onChangeTools","onUndo","onRedo","onReset","range","size","showLabels","showTitle","tT","graphActions","changeCurrentTool","toggleLabelMode","graphWithControls","controls","r","labelNode","undefined","React","Component","graphPropTypes","func","arrayOf","styles","theme","width","display","justifyContent","padding","spacing","unit","color","text","backgroundColor","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","fontSize","typography","minHeight","margin","marginTop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport uniq from 'lodash/uniq';\nimport isString from 'lodash/isString';\nimport { color } from '@pie-lib/render-ui';\n\nimport ToolMenu from './tool-menu';\nimport Graph, { graphPropTypes } from './graph';\nimport UndoRedo from './undo-redo';\nimport { allTools, toolsArr } from './tools';\nimport {\n  ExpansionPanel,\n  ExpansionPanelDetails,\n  ExpansionPanelSummary,\n  Typography\n} from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nexport const setToolbarAvailability = toolbarTools =>\n  toolsArr.map(tA => ({ ...tA, toolbar: !!toolbarTools.find(t => t === tA.type) })) || [];\n\nexport const toolIsAvailable = (tools, currentTool) =>\n  currentTool && tools && (tools.find(tool => tool.type === currentTool.type) || {}).toolbar;\n\nexport const getAvailableTool = tools => tools.find(tool => tool.toolbar);\n\nexport const filterByValidToolTypes = backgroundMarks =>\n  backgroundMarks.filter(bM => !!allTools.find(tool => tool === bM.type));\n\nexport const filterByVisibleToolTypes = (toolbarTools, marks) =>\n  marks.filter(bM => !!toolbarTools.find(tool => tool === bM.type));\n\nconst getDefaultCurrentTool = toolType => toolsArr.find(tool => tool.type === toolType) || null;\n\nconst Collapsible = ({ classes, children, title }) => (\n  <ExpansionPanel\n    elevation={0}\n    className={classes.expansionPanel}\n    disabledGutters={true}\n    square={true}\n  >\n    <ExpansionPanelSummary\n      classes={{\n        root: classes.summaryRoot,\n        content: classes.summaryContent\n      }}\n      expandIcon={<ExpandMoreIcon />}\n    >\n      <Typography variant=\"subheading\">{title}</Typography>\n    </ExpansionPanelSummary>\n    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>\n  </ExpansionPanel>\n);\n\nCollapsible.propTypes = {\n  classes: PropTypes.object,\n  children: PropTypes.array,\n  title: PropTypes.string\n};\n\nexport class GraphWithControls extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    onUndo: PropTypes.func,\n    onRedo: PropTypes.func,\n    onReset: PropTypes.func,\n    toolbarTools: PropTypes.arrayOf(PropTypes.string) // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'\n  };\n\n  static defaultProps = {\n    collapsibleToolbar: false,\n    collapsibleToolbarTitle: '',\n    disabledLabels: false,\n    disabledTitle: false,\n    showLabels: true,\n    showTitle: true,\n    toolbarTools: []\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      currentTool: getDefaultCurrentTool(props.defaultTool),\n      labelModeEnabled: false\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    const { defaultTool } = this.props;\n\n    if (prevProps.defaultTool !== defaultTool) {\n      const currentTool = getDefaultCurrentTool(defaultTool);\n\n      this.setState({ currentTool });\n    }\n  }\n\n  changeCurrentTool = (tool, tools) =>\n    this.setState({ currentTool: tools.find(t => t.type === tool) });\n\n  toggleLabelMode = () => this.setState(state => ({ labelModeEnabled: !state.labelModeEnabled }));\n\n  render() {\n    let { currentTool, labelModeEnabled } = this.state;\n    const {\n      axesSettings,\n      classes,\n      className,\n      coordinatesOnHover,\n      collapsibleToolbar,\n      collapsibleToolbarTitle,\n      disabled,\n      disabledLabels,\n      disabledTitle,\n      domain,\n      draggableTools,\n      labels,\n      onChangeLabels,\n      onChangeMarks,\n      onChangeTitle,\n      onChangeTools,\n      onUndo,\n      onRedo,\n      onReset,\n      range,\n      size,\n      showLabels,\n      showTitle,\n      title\n    } = this.props;\n    let { backgroundMarks, marks, toolbarTools } = this.props;\n\n    // make sure only valid tool types are kept (string) and without duplicates\n    toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];\n\n    // keep only the backgroundMarks that have valid types\n    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);\n\n    // keep only the marks that have types which appear in toolbar\n    marks = filterByVisibleToolTypes(toolbarTools, marks || []);\n\n    const tools = setToolbarAvailability(toolbarTools);\n\n    // set current tool if there's no current tool or if the existing one is no longer available\n    if (!currentTool || !toolIsAvailable(tools, currentTool)) {\n      currentTool = getAvailableTool(tools);\n    }\n\n    const graphActions = (\n      <React.Fragment>\n        <ToolMenu\n          currentToolType={currentTool && currentTool.type}\n          disabled={!!disabled}\n          draggableTools={draggableTools}\n          labelModeEnabled={labelModeEnabled}\n          onChange={tool => this.changeCurrentTool(tool, tools)}\n          onToggleLabelMode={this.toggleLabelMode}\n          toolbarTools={toolbarTools}\n          onChangeTools={onChangeTools}\n        />\n\n        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} />}\n      </React.Fragment>\n    );\n\n    return (\n      <div className={classNames(classes.graphWithControls, className)}>\n        <div className={classes.controls}>\n          {collapsibleToolbar ? (\n            <Collapsible classes={classes} title={collapsibleToolbarTitle}>\n              {graphActions}\n            </Collapsible>\n          ) : (\n            graphActions\n          )}\n        </div>\n\n        <div ref={r => (this.labelNode = r)} />\n\n        <Graph\n          axesSettings={axesSettings}\n          backgroundMarks={backgroundMarks}\n          coordinatesOnHover={coordinatesOnHover}\n          currentTool={currentTool}\n          disabledLabels={disabledLabels}\n          disabledTitle={disabledTitle}\n          domain={domain}\n          labels={labels}\n          labelModeEnabled={labelModeEnabled}\n          marks={marks}\n          onChangeMarks={!disabled ? onChangeMarks : undefined}\n          onChangeLabels={onChangeLabels}\n          onChangeTitle={onChangeTitle}\n          range={range}\n          size={size}\n          showLabels={showLabels}\n          showTitle={showTitle}\n          title={title}\n          tools={tools}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphWithControls: {},\n  controls: {\n    width: 'inherit',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`,\n    '& button': {\n      fontSize: theme.typography.fontSize\n    }\n  },\n  expansionPanel: {\n    backgroundColor: color.primaryLight()\n  },\n  summaryRoot: {\n    padding: `0 ${theme.spacing.unit}px`,\n    minHeight: '32px !important'\n  },\n  summaryContent: {\n    margin: '4px 0 !important'\n  },\n  details: {\n    padding: 0,\n    marginTop: theme.spacing.unit\n  }\n});\n\nexport default withStyles(styles)(GraphWithControls);\n"],"file":"graph-with-controls.js"}

package/lib/graph.js

@@ -68,17 +68,23 @@ var graphPropTypes = {
   className: _propTypes["default"].string,
   collapsibleToolbar: _propTypes["default"].bool,
   collapsibleToolbarTitle: _propTypes["default"].string,
+  disabledLabels: _propTypes["default"].bool,
+  disabledTitle: _propTypes["default"].bool,
   domain: _plot.types.DomainType,
   labels: _propTypes["default"].shape(_labels.LabelType),
   labelModeEnabled: _propTypes["default"].bool,
   coordinatesOnHover: _propTypes["default"].bool,
   marks: _propTypes["default"].array,
+  onChangeLabels: _propTypes["default"].func,
   onChangeMarks: _propTypes["default"].func,
+  onChangeTitle: _propTypes["default"].func,
   range: _plot.types.DomainType,
   size: _propTypes["default"].shape({
     width: _propTypes["default"].number.isRequired,
     height: _propTypes["default"].number.isRequired
   }),
+  showLabels: _propTypes["default"].bool,
+  showTitle: _propTypes["default"].bool,
   title: _propTypes["default"].string,
   tools: _propTypes["default"].array
 };
@@ -237,12 +243,18 @@ var Graph = /*#__PURE__*/function (_React$Component) {
           currentTool = _this$props5.currentTool,
           coordinatesOnHover = _this$props5.coordinatesOnHover,
           size = _this$props5.size,
+          disabledLabels = _this$props5.disabledLabels,
+          disabledTitle = _this$props5.disabledTitle,
           domain = _this$props5.domain,
           backgroundMarks = _this$props5.backgroundMarks,
           range = _this$props5.range,
           title = _this$props5.title,
           labels = _this$props5.labels,
-          labelModeEnabled = _this$props5.labelModeEnabled;
+          labelModeEnabled = _this$props5.labelModeEnabled,
+          showLabels = _this$props5.showLabels,
+          showTitle = _this$props5.showTitle,
+          onChangeLabels = _this$props5.onChangeLabels,
+          onChangeTitle = _this$props5.onChangeTitle;
       var marks = this.props.marks;
       var graphProps = (0, _plot.createGraphProps)(domain, range, size, function () {
         return _this2.rootNode;
@@ -260,10 +272,11 @@ var Graph = /*#__PURE__*/function (_React$Component) {
         rootRef: function rootRef(r) {
           return _this2.rootNode = r;
         },
-        title: title
-      }, common), /*#__PURE__*/_react["default"].createElement(_labels["default"], (0, _extends2["default"])({
-        value: labels
-      }, common)), /*#__PURE__*/_react["default"].createElement("g", {
+        disabledTitle: disabledTitle,
+        showTitle: showTitle,
+        title: title,
+        onChangeTitle: onChangeTitle
+      }, common), /*#__PURE__*/_react["default"].createElement("g", {
         transform: "translate(".concat(domain.padding, ", ").concat(range.padding, ")")
       }, /*#__PURE__*/_react["default"].createElement(_grid["default"], common), /*#__PURE__*/_react["default"].createElement(_axis.Axes, (0, _extends2["default"])({}, axesSettings, common)), /*#__PURE__*/_react["default"].createElement(_bg["default"], (0, _extends2["default"])({}, size, {
         onClick: this.onBgClick
@@ -312,7 +325,11 @@ var Graph = /*#__PURE__*/function (_React$Component) {
         style: {
           pointerEvents: 'none'
         }
-      })))));
+      })))), showLabels && /*#__PURE__*/_react["default"].createElement(_labels["default"], (0, _extends2["default"])({
+        disabledLabels: disabledLabels,
+        value: labels,
+        onChange: onChangeLabels
+      }, common)));
     }
   }]);
   return Graph;
@@ -323,7 +340,9 @@ exports.Graph = Graph;
   currentTool: _propTypes["default"].object
 }));
 (0, _defineProperty2["default"])(Graph, "defaultProps", {
-  onChangeMarks: function onChangeMarks() {}
+  onChangeMarks: function onChangeMarks() {},
+  disabledLabels: false,
+  disabledTitle: false
 });
 var _default = Graph;
 exports["default"] = _default;

package/lib/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/graph.jsx"],"names":["log","graphPropTypes","axesSettings","PropTypes","shape","AxisPropTypes","backgroundMarks","array","className","string","collapsibleToolbar","bool","collapsibleToolbarTitle","domain","types","DomainType","labels","LabelType","labelModeEnabled","coordinatesOnHover","marks","onChangeMarks","func","range","size","width","number","isRequired","height","title","tools","getMaskSize","x","y","removeBuildingToolIfCurrentToolDiffers","currentTool","buildingMark","filter","m","building","newMarks","type","index","findIndex","splice","Graph","setState","labelNode","oldMark","newMark","props","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","graphProps","rootNode","maskSize","common","r","padding","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { Root, types, createGraphProps } from '@pie-lib/plot';\nimport debug from 'debug';\n\nimport Labels from './labels';\nimport { Axes, AxisPropTypes } from './axis';\nimport Grid from './grid';\nimport { LabelType } from './labels';\nimport Bg from './bg';\nimport { isDuplicatedMark } from './utils';\n\nconst log = debug('pie-lib:graphing:graph');\n\nexport const graphPropTypes = {\n  axesSettings: PropTypes.shape(AxisPropTypes),\n  backgroundMarks: PropTypes.array,\n  className: PropTypes.string,\n  collapsibleToolbar: PropTypes.bool,\n  collapsibleToolbarTitle: PropTypes.string,\n  domain: types.DomainType,\n  labels: PropTypes.shape(LabelType),\n  labelModeEnabled: PropTypes.bool,\n  coordinatesOnHover: PropTypes.bool,\n  marks: PropTypes.array,\n  onChangeMarks: PropTypes.func,\n  range: types.DomainType,\n  size: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired\n  }),\n  title: PropTypes.string,\n  tools: PropTypes.array\n};\n\nconst getMaskSize = size => ({\n  x: -23,\n  y: -23,\n  width: size.width + 46,\n  height: size.height + 46\n});\n\nexport const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {\n  const buildingMark = marks.filter(m => m.building)[0];\n  let newMarks = cloneDeep(marks);\n\n  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {\n    const index = newMarks.findIndex(m => isEqual(m, buildingMark));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1);\n    }\n  }\n\n  return newMarks;\n};\n\nexport class Graph extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    currentTool: PropTypes.object\n  };\n\n  static defaultProps = {\n    onChangeMarks: () => {}\n  };\n\n  state = {};\n\n  componentDidMount = () => this.setState({ labelNode: this.labelNode });\n\n  changeMark = (oldMark, newMark) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    const index = newMarks.findIndex(m => isEqual(m, oldMark));\n\n    if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {\n      newMarks.splice(index, 1, newMark);\n\n      onChangeMarks(newMarks);\n    }\n  };\n\n  completeMark = markData => {\n    const { currentTool, marks } = this.props;\n    const buildingMark = marks.filter(m => m.building)[0];\n\n    if (!buildingMark || !currentTool) return;\n\n    const updatedMark = currentTool.complete(buildingMark, markData);\n\n    this.updateMarks(buildingMark, updatedMark);\n  };\n\n  updateMarks = (existing, update, addIfMissing = false) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    if (!update.building && isDuplicatedMark(update, marks)) {\n      return;\n    }\n\n    const index = newMarks.findIndex(m => isEqual(m, existing));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1, update);\n\n      onChangeMarks(newMarks);\n    } else if (addIfMissing) {\n      onChangeMarks([...newMarks, update]);\n    }\n  };\n\n  getComponent = mark => {\n    if (!mark) return null;\n\n    const tool = (this.props.tools || []).find(t => t.type === mark.type);\n\n    return (tool && tool.Component) || null;\n  };\n\n  onBgClick = point => {\n    const { x, y } = point;\n    const { labelModeEnabled, currentTool, marks } = this.props;\n\n    log('[onBgClick] x,y: ', x, y);\n\n    if (labelModeEnabled || !currentTool) {\n      return;\n    }\n\n    const buildingMark = marks.filter(m => m.building)[0];\n    let updatedMark;\n\n    // if the building mark has a different type, we just replace it\n    if (buildingMark && currentTool && buildingMark.type === currentTool.type) {\n      updatedMark = currentTool.addPoint({ x, y }, { ...buildingMark });\n    } else {\n      updatedMark = currentTool.addPoint({ x, y }, undefined);\n    }\n\n    this.updateMarks(buildingMark, updatedMark, true);\n  };\n\n  render() {\n    const {\n      axesSettings,\n      currentTool,\n      coordinatesOnHover,\n      size,\n      domain,\n      backgroundMarks,\n      range,\n      title,\n      labels,\n      labelModeEnabled\n    } = this.props;\n    let { marks } = this.props;\n\n    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);\n    const maskSize = getMaskSize(size);\n    const common = { graphProps, labelModeEnabled };\n\n    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });\n\n    return (\n      <Root rootRef={r => (this.rootNode = r)} title={title} {...common}>\n        <Labels value={labels} {...common} />\n        <g transform={`translate(${domain.padding}, ${range.padding})`}>\n          <Grid {...common} />\n          <Axes {...axesSettings} {...common} />\n          <Bg {...size} onClick={this.onBgClick} {...common} />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" /> {/* TODO hardcoded color */}\n          </mask>\n\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            {(backgroundMarks || []).map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}-bg`}\n                  mark={{ ...m, disabled: true, isBackground: true }}\n                  labelNode={this.state.labelNode}\n                  {...common}\n                />\n              );\n            })}\n\n            {marks.map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}`}\n                  mark={m}\n                  coordinatesOnHover={coordinatesOnHover}\n                  onChange={this.changeMark}\n                  onComplete={this.completeMark}\n                  onClick={this.onBgClick}\n                  onDragStart={this.startDrag}\n                  onDragStop={this.stopDrag}\n                  labelNode={this.state.labelNode}\n                  isToolActive={currentTool && markType === currentTool.type}\n                  {...common}\n                />\n              );\n            })}\n\n            <foreignObject\n              ref={labelNode => (this.labelNode = labelNode)}\n              x=\"0\"\n              y=\"0\"\n              {...size}\n              style={{ pointerEvents: 'none' }}\n            />\n          </g>\n        </g>\n      </Root>\n    );\n  }\n}\n\nexport default Graph;\n"],"file":"graph.js"}
+{"version":3,"sources":["../src/graph.jsx"],"names":["log","graphPropTypes","axesSettings","PropTypes","shape","AxisPropTypes","backgroundMarks","array","className","string","collapsibleToolbar","bool","collapsibleToolbarTitle","disabledLabels","disabledTitle","domain","types","DomainType","labels","LabelType","labelModeEnabled","coordinatesOnHover","marks","onChangeLabels","func","onChangeMarks","onChangeTitle","range","size","width","number","isRequired","height","showLabels","showTitle","title","tools","getMaskSize","x","y","removeBuildingToolIfCurrentToolDiffers","currentTool","buildingMark","filter","m","building","newMarks","type","index","findIndex","splice","Graph","setState","labelNode","oldMark","newMark","props","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","graphProps","rootNode","maskSize","common","r","padding","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { Root, types, createGraphProps } from '@pie-lib/plot';\nimport debug from 'debug';\n\nimport Labels from './labels';\nimport { Axes, AxisPropTypes } from './axis';\nimport Grid from './grid';\nimport { LabelType } from './labels';\nimport Bg from './bg';\nimport { isDuplicatedMark } from './utils';\n\nconst log = debug('pie-lib:graphing:graph');\n\nexport const graphPropTypes = {\n  axesSettings: PropTypes.shape(AxisPropTypes),\n  backgroundMarks: PropTypes.array,\n  className: PropTypes.string,\n  collapsibleToolbar: PropTypes.bool,\n  collapsibleToolbarTitle: PropTypes.string,\n  disabledLabels: PropTypes.bool,\n  disabledTitle: PropTypes.bool,\n  domain: types.DomainType,\n  labels: PropTypes.shape(LabelType),\n  labelModeEnabled: PropTypes.bool,\n  coordinatesOnHover: PropTypes.bool,\n  marks: PropTypes.array,\n  onChangeLabels: PropTypes.func,\n  onChangeMarks: PropTypes.func,\n  onChangeTitle: PropTypes.func,\n  range: types.DomainType,\n  size: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired\n  }),\n  showLabels: PropTypes.bool,\n  showTitle: PropTypes.bool,\n  title: PropTypes.string,\n  tools: PropTypes.array\n};\n\nconst getMaskSize = size => ({\n  x: -23,\n  y: -23,\n  width: size.width + 46,\n  height: size.height + 46\n});\n\nexport const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {\n  const buildingMark = marks.filter(m => m.building)[0];\n  let newMarks = cloneDeep(marks);\n\n  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {\n    const index = newMarks.findIndex(m => isEqual(m, buildingMark));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1);\n    }\n  }\n\n  return newMarks;\n};\n\nexport class Graph extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    currentTool: PropTypes.object\n  };\n\n  static defaultProps = {\n    onChangeMarks: () => {},\n    disabledLabels: false,\n    disabledTitle: false\n  };\n\n  state = {};\n\n  componentDidMount = () => this.setState({ labelNode: this.labelNode });\n\n  changeMark = (oldMark, newMark) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    const index = newMarks.findIndex(m => isEqual(m, oldMark));\n\n    if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {\n      newMarks.splice(index, 1, newMark);\n\n      onChangeMarks(newMarks);\n    }\n  };\n\n  completeMark = markData => {\n    const { currentTool, marks } = this.props;\n    const buildingMark = marks.filter(m => m.building)[0];\n\n    if (!buildingMark || !currentTool) return;\n\n    const updatedMark = currentTool.complete(buildingMark, markData);\n\n    this.updateMarks(buildingMark, updatedMark);\n  };\n\n  updateMarks = (existing, update, addIfMissing = false) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    if (!update.building && isDuplicatedMark(update, marks)) {\n      return;\n    }\n\n    const index = newMarks.findIndex(m => isEqual(m, existing));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1, update);\n\n      onChangeMarks(newMarks);\n    } else if (addIfMissing) {\n      onChangeMarks([...newMarks, update]);\n    }\n  };\n\n  getComponent = mark => {\n    if (!mark) return null;\n\n    const tool = (this.props.tools || []).find(t => t.type === mark.type);\n\n    return (tool && tool.Component) || null;\n  };\n\n  onBgClick = point => {\n    const { x, y } = point;\n    const { labelModeEnabled, currentTool, marks } = this.props;\n\n    log('[onBgClick] x,y: ', x, y);\n\n    if (labelModeEnabled || !currentTool) {\n      return;\n    }\n\n    const buildingMark = marks.filter(m => m.building)[0];\n    let updatedMark;\n\n    // if the building mark has a different type, we just replace it\n    if (buildingMark && currentTool && buildingMark.type === currentTool.type) {\n      updatedMark = currentTool.addPoint({ x, y }, { ...buildingMark });\n    } else {\n      updatedMark = currentTool.addPoint({ x, y }, undefined);\n    }\n\n    this.updateMarks(buildingMark, updatedMark, true);\n  };\n\n  render() {\n    const {\n      axesSettings,\n      currentTool,\n      coordinatesOnHover,\n      size,\n      disabledLabels,\n      disabledTitle,\n      domain,\n      backgroundMarks,\n      range,\n      title,\n      labels,\n      labelModeEnabled,\n      showLabels,\n      showTitle,\n      onChangeLabels,\n      onChangeTitle\n    } = this.props;\n    let { marks } = this.props;\n\n    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);\n    const maskSize = getMaskSize(size);\n    const common = { graphProps, labelModeEnabled };\n\n    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });\n\n    return (\n      <Root\n        rootRef={r => (this.rootNode = r)}\n        disabledTitle={disabledTitle}\n        showTitle={showTitle}\n        title={title}\n        onChangeTitle={onChangeTitle}\n        {...common}\n      >\n        <g transform={`translate(${domain.padding}, ${range.padding})`}>\n          <Grid {...common} />\n          <Axes {...axesSettings} {...common} />\n          <Bg {...size} onClick={this.onBgClick} {...common} />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" /> {/* TODO hardcoded color */}\n          </mask>\n\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            {(backgroundMarks || []).map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}-bg`}\n                  mark={{ ...m, disabled: true, isBackground: true }}\n                  labelNode={this.state.labelNode}\n                  {...common}\n                />\n              );\n            })}\n\n            {marks.map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}`}\n                  mark={m}\n                  coordinatesOnHover={coordinatesOnHover}\n                  onChange={this.changeMark}\n                  onComplete={this.completeMark}\n                  onClick={this.onBgClick}\n                  onDragStart={this.startDrag}\n                  onDragStop={this.stopDrag}\n                  labelNode={this.state.labelNode}\n                  isToolActive={currentTool && markType === currentTool.type}\n                  {...common}\n                />\n              );\n            })}\n\n            <foreignObject\n              ref={labelNode => (this.labelNode = labelNode)}\n              x=\"0\"\n              y=\"0\"\n              {...size}\n              style={{ pointerEvents: 'none' }}\n            />\n          </g>\n        </g>\n        {showLabels && (\n          <Labels\n            disabledLabels={disabledLabels}\n            value={labels}\n            onChange={onChangeLabels}\n            {...common}\n          />\n        )}\n      </Root>\n    );\n  }\n}\n\nexport default Graph;\n"],"file":"graph.js"}

package/lib/labels.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTransform = exports["default"] = exports.Labels = exports.LabelType = void 0;
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -29,6 +31,14 @@ var _plot = require("@pie-lib/plot");
 
 var _renderUi = require("@pie-lib/render-ui");
 
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -67,16 +77,16 @@ exports.getTransform = getTransform;
 var getY = function getY(side, height) {
   switch (side) {
     case 'left':
-      return -height;
+      return -height + 6;
 
     case 'top':
-      return -height + 10;
+      return -height + 6;
 
     case 'right':
-      return -height + 10;
+      return -height;
 
     default:
-      return 0;
+      return -height - 15;
   }
 };
 
@@ -93,11 +103,15 @@ var RawLabel = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(RawLabel, [{
     key: "render",
     value: function render() {
+      var _cn;
+
       var _this$props = this.props,
+          disabledLabel = _this$props.disabledLabel,
           text = _this$props.text,
           side = _this$props.side,
           graphProps = _this$props.graphProps,
-          classes = _this$props.classes;
+          classes = _this$props.classes,
+          onChange = _this$props.onChange;
       var size = graphProps.size,
           domain = graphProps.domain,
           range = graphProps.range;
@@ -107,20 +121,27 @@ var RawLabel = /*#__PURE__*/function (_React$Component) {
       var width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
       var height = 36;
       var y = getY(side, height);
+      var activePlugins = ['bold', 'italic', 'underline', 'strikethrough' // 'languageCharacters'
+      ];
       return /*#__PURE__*/_react["default"].createElement("foreignObject", {
         x: -(width / 2),
         y: y,
         width: width,
-        height: height,
+        height: height * 2,
         transform: transform,
         textAnchor: "middle"
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
         "false": true
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: text
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        className: (0, _classnames["default"])((_cn = {}, (0, _defineProperty2["default"])(_cn, classes.bottomLabel, side === 'bottom'), (0, _defineProperty2["default"])(_cn, classes.disabledAxisLabel, disabledLabel), _cn), classes.axisLabel),
+        markup: text || '',
+        onChange: onChange,
+        placeholder: !disabledLabel && "Click here to add a ".concat(side, " label"),
+        toolbarOpts: {
+          position: side === 'bottom' ? 'top' : 'bottom',
+          noBorder: true
         },
-        className: classes.axisLabel
+        activePlugins: activePlugins
       })));
     }
   }]);
@@ -131,6 +152,7 @@ var RawLabel = /*#__PURE__*/function (_React$Component) {
   text: _propTypes["default"].string,
   side: _propTypes["default"].string,
   classes: _propTypes["default"].object,
+  disabledLabel: _propTypes["default"].bool,
   graphProps: _plot.types.GraphPropsType.isRequired
 });
 var Label = (0, _styles.withStyles)(function (theme) {
@@ -139,8 +161,14 @@ var Label = (0, _styles.withStyles)(function (theme) {
       fill: _renderUi.color.secondary()
     },
     axisLabel: {
-      fontSize: theme.typography.fontSize,
+      fontSize: theme.typography.fontSize - 2,
       textAlign: 'center'
+    },
+    disabledAxisLabel: {
+      pointerEvents: 'none'
+    },
+    bottomLabel: {
+      marginTop: '44px'
     }
   };
 })(RawLabel);
@@ -158,36 +186,73 @@ var Labels = /*#__PURE__*/function (_React$Component2) {
   var _super2 = _createSuper(Labels);
 
   function Labels() {
+    var _this;
+
     (0, _classCallCheck2["default"])(this, Labels);
-    return _super2.apply(this, arguments);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeLabel", function (newValue, side) {
+      var _this$props2 = _this.props,
+          value = _this$props2.value,
+          onChange = _this$props2.onChange;
+
+      var labels = _objectSpread(_objectSpread({}, value), {}, (0, _defineProperty2["default"])({}, side, newValue));
+
+      onChange(labels);
+    });
+    return _this;
   }
 
   (0, _createClass2["default"])(Labels, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          graphProps = _this$props2.graphProps;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value && value.left && /*#__PURE__*/_react["default"].createElement(Label, {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          disabledLabels = _this$props3.disabledLabels,
+          _this$props3$value = _this$props3.value,
+          value = _this$props3$value === void 0 ? {} : _this$props3$value,
+          graphProps = _this$props3.graphProps;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Label, {
         key: "left",
         side: "left",
         text: value.left,
-        graphProps: graphProps
-      }), value && value.top && /*#__PURE__*/_react["default"].createElement(Label, {
+        disabledLabel: disabledLabels,
+        graphProps: graphProps,
+        onChange: function onChange(value) {
+          return _this2.onChangeLabel(value, 'left');
+        }
+      }), /*#__PURE__*/_react["default"].createElement(Label, {
         key: "top",
         side: "top",
         text: value.top,
-        graphProps: graphProps
-      }), value && value.bottom && /*#__PURE__*/_react["default"].createElement(Label, {
+        disabledLabel: disabledLabels,
+        graphProps: graphProps,
+        onChange: function onChange(value) {
+          return _this2.onChangeLabel(value, 'top');
+        }
+      }), /*#__PURE__*/_react["default"].createElement(Label, {
         key: "bottom",
         side: "bottom",
         text: value.bottom,
-        graphProps: graphProps
-      }), value && value.right && /*#__PURE__*/_react["default"].createElement(Label, {
+        disabledLabel: disabledLabels,
+        graphProps: graphProps,
+        onChange: function onChange(value) {
+          return _this2.onChangeLabel(value, 'bottom');
+        }
+      }), /*#__PURE__*/_react["default"].createElement(Label, {
         key: "right",
         side: "right",
         text: value.right,
-        graphProps: graphProps
+        disabledLabel: disabledLabels,
+        graphProps: graphProps,
+        onChange: function onChange(value) {
+          return _this2.onChangeLabel(value, 'right');
+        }
       }));
     }
   }]);
@@ -198,6 +263,7 @@ exports.Labels = Labels;
 (0, _defineProperty2["default"])(Labels, "propTypes", {
   classes: _propTypes["default"].object,
   className: _propTypes["default"].string,
+  disabledLabels: _propTypes["default"].bool,
   value: _propTypes["default"].shape(LabelType),
   graphProps: _propTypes["default"].object
 });

package/lib/labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/labels.jsx"],"names":["rotations","left","top","bottom","right","getTransform","side","width","height","t","x","y","rotate","getY","RawLabel","props","text","graphProps","classes","size","domain","range","totalHeight","padding","totalWidth","transform","__html","axisLabel","React","Component","PropTypes","string","object","types","GraphPropsType","isRequired","Label","theme","label","fill","color","secondary","fontSize","typography","textAlign","LabelType","Labels","value","className","shape"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAG;AAChBC,EAAAA,IAAI,EAAE,CAAC,EADS;AAEhBC,EAAAA,GAAG,EAAE,CAFW;AAGhBC,EAAAA,MAAM,EAAE,CAHQ;AAIhBC,EAAAA,KAAK,EAAE;AAJS,CAAlB;;AAOO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAOC,KAAP,EAAcC,MAAd,EAAyB;AACnD,MAAMC,CAAC,GAAG,SAAJA,CAAI,CAACC,CAAD,EAAIC,CAAJ,EAAOC,MAAP;AAAA,+BAA+BF,CAA/B,eAAqCC,CAArC,uBAAmDC,MAAnD;AAAA,GAAV;;AAEA,MAAIN,IAAI,KAAK,MAAb,EAAqB;AACnB,WAAOG,CAAC,CAAC,CAAC,EAAF,EAAMD,MAAM,GAAG,CAAf,EAAkBR,SAAS,CAACM,IAAD,CAA3B,CAAR;AACD;;AACD,MAAIA,IAAI,KAAK,OAAb,EAAsB;AACpB,WAAOG,CAAC,CAACF,KAAK,GAAG,EAAT,EAAaC,MAAM,GAAG,CAAtB,EAAyBR,SAAS,CAACM,IAAD,CAAlC,CAAR;AACD;;AACD,MAAIA,IAAI,KAAK,KAAb,EAAoB;AAClB,WAAOG,CAAC,CAACF,KAAK,GAAG,CAAT,EAAY,CAAC,EAAb,EAAiBP,SAAS,CAACM,IAAD,CAA1B,CAAR;AACD;;AACD,MAAIA,IAAI,KAAK,QAAb,EAAuB;AACrB,WAAOG,CAAC,CAACF,KAAK,GAAG,CAAT,EAAYC,MAAM,GAAG,EAArB,EAAyBR,SAAS,CAACM,IAAD,CAAlC,CAAR;AACD;AACF,CAfM;;;;AAiBP,IAAMO,IAAI,GAAG,SAAPA,IAAO,CAACP,IAAD,EAAOE,MAAP,EAAkB;AAC7B,UAAQF,IAAR;AACE,SAAK,MAAL;AACE,aAAO,CAACE,MAAR;;AACF,SAAK,KAAL;AACE,aAAO,CAACA,MAAD,GAAU,EAAjB;;AACF,SAAK,OAAL;AACE,aAAO,CAACA,MAAD,GAAU,EAAjB;;AACF;AACE,aAAO,CAAP;AARJ;AAUD,CAXD;;IAaMM,Q;;;;;;;;;;;;WAQJ,kBAAS;AACP,wBAA4C,KAAKC,KAAjD;AAAA,UAAQC,IAAR,eAAQA,IAAR;AAAA,UAAcV,IAAd,eAAcA,IAAd;AAAA,UAAoBW,UAApB,eAAoBA,UAApB;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AACA,UAAQC,IAAR,GAAgCF,UAAhC,CAAQE,IAAR;AAAA,UAAcC,MAAd,GAAgCH,UAAhC,CAAcG,MAAd;AAAA,UAAsBC,KAAtB,GAAgCJ,UAAhC,CAAsBI,KAAtB;AACA,UAAMC,WAAW,GAAG,CAACH,IAAI,CAACX,MAAL,IAAe,GAAhB,IAAuB,CAACa,KAAK,CAACE,OAAN,IAAiB,CAAlB,IAAuB,CAAlE;AACA,UAAMC,UAAU,GAAG,CAACL,IAAI,CAACZ,KAAL,IAAc,GAAf,IAAsB,CAACa,MAAM,CAACG,OAAP,IAAkB,CAAnB,IAAwB,CAAjE;AAEA,UAAME,SAAS,GAAGpB,YAAY,CAACC,IAAD,EAAOkB,UAAP,EAAmBF,WAAnB,CAA9B;AACA,UAAMf,KAAK,GAAGD,IAAI,KAAK,MAAT,IAAmBA,IAAI,KAAK,OAA5B,GAAsCgB,WAAtC,GAAoDE,UAAlE;AACA,UAAMhB,MAAM,GAAG,EAAf;AACA,UAAMG,CAAC,GAAGE,IAAI,CAACP,IAAD,EAAOE,MAAP,CAAd;AAEA,0BACE;AACE,QAAA,CAAC,EAAE,EAAED,KAAK,GAAG,CAAV,CADL;AAEE,QAAA,CAAC,EAAEI,CAFL;AAGE,QAAA,KAAK,EAAEJ,KAHT;AAIE,QAAA,MAAM,EAAEC,MAJV;AAKE,QAAA,SAAS,EAAEiB,SALb;AAME,QAAA,UAAU,EAAC;AANb,sBAQE,gCAAC,kBAAD;AAAU;AAAV,sBACE;AAAK,QAAA,uBAAuB,EAAE;AAAEC,UAAAA,MAAM,EAAEV;AAAV,SAA9B;AAAgD,QAAA,SAAS,EAAEE,OAAO,CAACS;AAAnE,QADF,CARF,CADF;AAcD;;;EAjCoBC,kBAAMC,S;;iCAAvBf,Q,eACe;AACjBE,EAAAA,IAAI,EAAEc,sBAAUC,MADC;AAEjBzB,EAAAA,IAAI,EAAEwB,sBAAUC,MAFC;AAGjBb,EAAAA,OAAO,EAAEY,sBAAUE,MAHF;AAIjBf,EAAAA,UAAU,EAAEgB,YAAMC,cAAN,CAAqBC;AAJhB,C;AAmCrB,IAAMC,KAAK,GAAG,wBAAW,UAAAC,KAAK;AAAA,SAAK;AACjCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,gBAAMC,SAAN;AADD,KAD0B;AAIjCd,IAAAA,SAAS,EAAE;AACTe,MAAAA,QAAQ,EAAEL,KAAK,CAACM,UAAN,CAAiBD,QADlB;AAETE,MAAAA,SAAS,EAAE;AAFF;AAJsB,GAAL;AAAA,CAAhB,EAQV9B,QARU,CAAd;AAUO,IAAM+B,SAAS,GAAG;AACvB5C,EAAAA,IAAI,EAAE6B,sBAAUC,MADO;AAEvB7B,EAAAA,GAAG,EAAE4B,sBAAUC,MAFQ;AAGvB5B,EAAAA,MAAM,EAAE2B,sBAAUC,MAHK;AAIvB3B,EAAAA,KAAK,EAAE0B,sBAAUC;AAJM,CAAlB;;;IAOMe,M;;;;;;;;;;;;WAUX,kBAAS;AACP,yBAA8B,KAAK/B,KAAnC;AAAA,UAAQgC,KAAR,gBAAQA,KAAR;AAAA,UAAe9B,UAAf,gBAAeA,UAAf;AAEA,0BACE,gCAAC,iBAAD,CAAO,QAAP,QACG8B,KAAK,IAAIA,KAAK,CAAC9C,IAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,MAAX;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,IAAI,EAAE8C,KAAK,CAAC9C,IAA1C;AAAgD,QAAA,UAAU,EAAEgB;AAA5D,QAFJ,EAIG8B,KAAK,IAAIA,KAAK,CAAC7C,GAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,KAAX;AAAiB,QAAA,IAAI,EAAC,KAAtB;AAA4B,QAAA,IAAI,EAAE6C,KAAK,CAAC7C,GAAxC;AAA6C,QAAA,UAAU,EAAEe;AAAzD,QALJ,EAOG8B,KAAK,IAAIA,KAAK,CAAC5C,MAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,QAAX;AAAoB,QAAA,IAAI,EAAC,QAAzB;AAAkC,QAAA,IAAI,EAAE4C,KAAK,CAAC5C,MAA9C;AAAsD,QAAA,UAAU,EAAEc;AAAlE,QARJ,EAUG8B,KAAK,IAAIA,KAAK,CAAC3C,KAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,OAAX;AAAmB,QAAA,IAAI,EAAC,OAAxB;AAAgC,QAAA,IAAI,EAAE2C,KAAK,CAAC3C,KAA5C;AAAmD,QAAA,UAAU,EAAEa;AAA/D,QAXJ,CADF;AAgBD;;;EA7ByBW,kBAAMC,S;;;iCAArBiB,M,eACQ;AACjB5B,EAAAA,OAAO,EAAEY,sBAAUE,MADF;AAEjBgB,EAAAA,SAAS,EAAElB,sBAAUC,MAFJ;AAGjBgB,EAAAA,KAAK,EAAEjB,sBAAUmB,KAAV,CAAgBJ,SAAhB,CAHU;AAIjB5B,EAAAA,UAAU,EAAEa,sBAAUE;AAJL,C;iCADRc,M,kBAQW,E;eAwBTA,M","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color, Readable } from '@pie-lib/render-ui';\n\nconst rotations = {\n  left: -90,\n  top: 0,\n  bottom: 0,\n  right: 90\n};\n\nexport const getTransform = (side, width, height) => {\n  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;\n\n  if (side === 'left') {\n    return t(-20, height / 2, rotations[side]);\n  }\n  if (side === 'right') {\n    return t(width + 30, height / 2, rotations[side]);\n  }\n  if (side === 'top') {\n    return t(width / 2, -20, rotations[side]);\n  }\n  if (side === 'bottom') {\n    return t(width / 2, height + 30, rotations[side]);\n  }\n};\n\nconst getY = (side, height) => {\n  switch (side) {\n    case 'left':\n      return -height;\n    case 'top':\n      return -height + 10;\n    case 'right':\n      return -height + 10;\n    default:\n      return 0;\n  }\n};\n\nclass RawLabel extends React.Component {\n  static propTypes = {\n    text: PropTypes.string,\n    side: PropTypes.string,\n    classes: PropTypes.object,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  render() {\n    const { text, side, graphProps, classes } = this.props;\n    const { size, domain, range } = graphProps;\n    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;\n    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;\n\n    const transform = getTransform(side, totalWidth, totalHeight);\n    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;\n    const height = 36;\n    const y = getY(side, height);\n\n    return (\n      <foreignObject\n        x={-(width / 2)}\n        y={y}\n        width={width}\n        height={height}\n        transform={transform}\n        textAnchor=\"middle\"\n      >\n        <Readable false>\n          <div dangerouslySetInnerHTML={{ __html: text }} className={classes.axisLabel} />\n        </Readable>\n      </foreignObject>\n    );\n  }\n}\n\nconst Label = withStyles(theme => ({\n  label: {\n    fill: color.secondary()\n  },\n  axisLabel: {\n    fontSize: theme.typography.fontSize,\n    textAlign: 'center'\n  }\n}))(RawLabel);\n\nexport const LabelType = {\n  left: PropTypes.string,\n  top: PropTypes.string,\n  bottom: PropTypes.string,\n  right: PropTypes.string\n};\n\nexport class Labels extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    value: PropTypes.shape(LabelType),\n    graphProps: PropTypes.object\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { value, graphProps } = this.props;\n\n    return (\n      <React.Fragment>\n        {value && value.left && (\n          <Label key=\"left\" side=\"left\" text={value.left} graphProps={graphProps} />\n        )}\n        {value && value.top && (\n          <Label key=\"top\" side=\"top\" text={value.top} graphProps={graphProps} />\n        )}\n        {value && value.bottom && (\n          <Label key=\"bottom\" side=\"bottom\" text={value.bottom} graphProps={graphProps} />\n        )}\n        {value && value.right && (\n          <Label key=\"right\" side=\"right\" text={value.right} graphProps={graphProps} />\n        )}\n      </React.Fragment>\n    );\n  }\n}\n\nexport default Labels;\n"],"file":"labels.js"}
+{"version":3,"sources":["../src/labels.jsx"],"names":["rotations","left","top","bottom","right","getTransform","side","width","height","t","x","y","rotate","getY","RawLabel","props","disabledLabel","text","graphProps","classes","onChange","size","domain","range","totalHeight","padding","totalWidth","transform","activePlugins","bottomLabel","disabledAxisLabel","axisLabel","position","noBorder","React","Component","PropTypes","string","object","bool","types","GraphPropsType","isRequired","Label","theme","label","fill","color","secondary","fontSize","typography","textAlign","pointerEvents","marginTop","LabelType","Labels","newValue","value","labels","disabledLabels","onChangeLabel","className","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color, Readable } from '@pie-lib/render-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport cn from 'classnames';\n\nconst rotations = {\n  left: -90,\n  top: 0,\n  bottom: 0,\n  right: 90\n};\n\nexport const getTransform = (side, width, height) => {\n  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;\n\n  if (side === 'left') {\n    return t(-20, height / 2, rotations[side]);\n  }\n  if (side === 'right') {\n    return t(width + 30, height / 2, rotations[side]);\n  }\n  if (side === 'top') {\n    return t(width / 2, -20, rotations[side]);\n  }\n  if (side === 'bottom') {\n    return t(width / 2, height + 30, rotations[side]);\n  }\n};\n\nconst getY = (side, height) => {\n  switch (side) {\n    case 'left':\n      return -height + 6;\n    case 'top':\n      return -height + 6;\n    case 'right':\n      return -height;\n    default:\n      return -height - 15;\n  }\n};\n\nclass RawLabel extends React.Component {\n  static propTypes = {\n    text: PropTypes.string,\n    side: PropTypes.string,\n    classes: PropTypes.object,\n    disabledLabel: PropTypes.bool,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  render() {\n    const { disabledLabel, text, side, graphProps, classes, onChange } = this.props;\n    const { size, domain, range } = graphProps;\n    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;\n    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;\n\n    const transform = getTransform(side, totalWidth, totalHeight);\n    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;\n    const height = 36;\n    const y = getY(side, height);\n\n    const activePlugins = [\n      'bold',\n      'italic',\n      'underline',\n      'strikethrough'\n      // 'languageCharacters'\n    ];\n\n    return (\n      <foreignObject\n        x={-(width / 2)}\n        y={y}\n        width={width}\n        height={height * 2}\n        transform={transform}\n        textAnchor=\"middle\"\n      >\n        <Readable false>\n          <EditableHtml\n            className={cn(\n              {\n                [classes.bottomLabel]: side === 'bottom',\n                [classes.disabledAxisLabel]: disabledLabel\n              },\n              classes.axisLabel\n            )}\n            markup={text || ''}\n            onChange={onChange}\n            placeholder={!disabledLabel && `Click here to add a ${side} label`}\n            toolbarOpts={{\n              position: side === 'bottom' ? 'top' : 'bottom',\n              noBorder: true\n            }}\n            activePlugins={activePlugins}\n          />\n        </Readable>\n      </foreignObject>\n    );\n  }\n}\n\nconst Label = withStyles(theme => ({\n  label: {\n    fill: color.secondary()\n  },\n  axisLabel: {\n    fontSize: theme.typography.fontSize - 2,\n    textAlign: 'center'\n  },\n  disabledAxisLabel: {\n    pointerEvents: 'none'\n  },\n  bottomLabel: {\n    marginTop: '44px'\n  }\n}))(RawLabel);\n\nexport const LabelType = {\n  left: PropTypes.string,\n  top: PropTypes.string,\n  bottom: PropTypes.string,\n  right: PropTypes.string\n};\n\nexport class Labels extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    disabledLabels: PropTypes.bool,\n    value: PropTypes.shape(LabelType),\n    graphProps: PropTypes.object\n  };\n\n  static defaultProps = {};\n\n  onChangeLabel = (newValue, side) => {\n    const { value, onChange } = this.props;\n    const labels = {\n      ...value,\n      [side]: newValue\n    };\n\n    onChange(labels);\n  };\n\n  render() {\n    const { disabledLabels, value = {}, graphProps } = this.props;\n\n    return (\n      <React.Fragment>\n        <Label\n          key=\"left\"\n          side=\"left\"\n          text={value.left}\n          disabledLabel={disabledLabels}\n          graphProps={graphProps}\n          onChange={value => this.onChangeLabel(value, 'left')}\n        />\n        <Label\n          key=\"top\"\n          side=\"top\"\n          text={value.top}\n          disabledLabel={disabledLabels}\n          graphProps={graphProps}\n          onChange={value => this.onChangeLabel(value, 'top')}\n        />\n        <Label\n          key=\"bottom\"\n          side=\"bottom\"\n          text={value.bottom}\n          disabledLabel={disabledLabels}\n          graphProps={graphProps}\n          onChange={value => this.onChangeLabel(value, 'bottom')}\n        />\n        <Label\n          key=\"right\"\n          side=\"right\"\n          text={value.right}\n          disabledLabel={disabledLabels}\n          graphProps={graphProps}\n          onChange={value => this.onChangeLabel(value, 'right')}\n        />\n      </React.Fragment>\n    );\n  }\n}\n\nexport default Labels;\n"],"file":"labels.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -20,7 +20,7 @@
     "@material-ui/core": "^3.8.3",
     "@pie-lib/drag": "^1.1.52",
     "@pie-lib/graphing-utils": "^1.1.20",
-    "@pie-lib/plot": "^2.2.0",
+    "@pie-lib/plot": "^2.3.0",
     "@pie-lib/render-ui": "^4.13.1",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
@@ -44,6 +44,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "856c051f8dcb735d955408ffcfe49f22f96729c9",
+  "gitHead": "5f0932d39d7f01be0f96665b8fbe45ee745c2868",
   "scripts": {}
 }

package/src/graph-with-controls.jsx

@@ -72,6 +72,10 @@ export class GraphWithControls extends React.Component {
   static defaultProps = {
     collapsibleToolbar: false,
     collapsibleToolbarTitle: '',
+    disabledLabels: false,
+    disabledTitle: false,
+    showLabels: true,
+    showTitle: true,
     toolbarTools: []
   };
 
@@ -109,16 +113,22 @@ export class GraphWithControls extends React.Component {
       collapsibleToolbar,
       collapsibleToolbarTitle,
       disabled,
+      disabledLabels,
+      disabledTitle,
       domain,
       draggableTools,
       labels,
+      onChangeLabels,
       onChangeMarks,
+      onChangeTitle,
       onChangeTools,
       onUndo,
       onRedo,
       onReset,
       range,
       size,
+      showLabels,
+      showTitle,
       title
     } = this.props;
     let { backgroundMarks, marks, toolbarTools } = this.props;
@@ -175,13 +185,19 @@ export class GraphWithControls extends React.Component {
           backgroundMarks={backgroundMarks}
           coordinatesOnHover={coordinatesOnHover}
           currentTool={currentTool}
+          disabledLabels={disabledLabels}
+          disabledTitle={disabledTitle}
           domain={domain}
           labels={labels}
           labelModeEnabled={labelModeEnabled}
           marks={marks}
           onChangeMarks={!disabled ? onChangeMarks : undefined}
+          onChangeLabels={onChangeLabels}
+          onChangeTitle={onChangeTitle}
           range={range}
           size={size}
+          showLabels={showLabels}
+          showTitle={showTitle}
           title={title}
           tools={tools}
         />

package/src/graph.jsx

@@ -20,17 +20,23 @@ export const graphPropTypes = {
   className: PropTypes.string,
   collapsibleToolbar: PropTypes.bool,
   collapsibleToolbarTitle: PropTypes.string,
+  disabledLabels: PropTypes.bool,
+  disabledTitle: PropTypes.bool,
   domain: types.DomainType,
   labels: PropTypes.shape(LabelType),
   labelModeEnabled: PropTypes.bool,
   coordinatesOnHover: PropTypes.bool,
   marks: PropTypes.array,
+  onChangeLabels: PropTypes.func,
   onChangeMarks: PropTypes.func,
+  onChangeTitle: PropTypes.func,
   range: types.DomainType,
   size: PropTypes.shape({
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired
   }),
+  showLabels: PropTypes.bool,
+  showTitle: PropTypes.bool,
   title: PropTypes.string,
   tools: PropTypes.array
 };
@@ -64,7 +70,9 @@ export class Graph extends React.Component {
   };
 
   static defaultProps = {
-    onChangeMarks: () => {}
+    onChangeMarks: () => {},
+    disabledLabels: false,
+    disabledTitle: false
   };
 
   state = {};
@@ -151,12 +159,18 @@ export class Graph extends React.Component {
       currentTool,
       coordinatesOnHover,
       size,
+      disabledLabels,
+      disabledTitle,
       domain,
       backgroundMarks,
       range,
       title,
       labels,
-      labelModeEnabled
+      labelModeEnabled,
+      showLabels,
+      showTitle,
+      onChangeLabels,
+      onChangeTitle
     } = this.props;
     let { marks } = this.props;
 
@@ -167,8 +181,14 @@ export class Graph extends React.Component {
     marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });
 
     return (
-      <Root rootRef={r => (this.rootNode = r)} title={title} {...common}>
-        <Labels value={labels} {...common} />
+      <Root
+        rootRef={r => (this.rootNode = r)}
+        disabledTitle={disabledTitle}
+        showTitle={showTitle}
+        title={title}
+        onChangeTitle={onChangeTitle}
+        {...common}
+      >
         <g transform={`translate(${domain.padding}, ${range.padding})`}>
           <Grid {...common} />
           <Axes {...axesSettings} {...common} />
@@ -222,6 +242,14 @@ export class Graph extends React.Component {
             />
           </g>
         </g>
+        {showLabels && (
+          <Labels
+            disabledLabels={disabledLabels}
+            value={labels}
+            onChange={onChangeLabels}
+            {...common}
+          />
+        )}
       </Root>
     );
   }

package/src/labels.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { types } from '@pie-lib/plot';
 import { color, Readable } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html';
+import cn from 'classnames';
 
 const rotations = {
   left: -90,
@@ -31,13 +33,13 @@ export const getTransform = (side, width, height) => {
 const getY = (side, height) => {
   switch (side) {
     case 'left':
-      return -height;
+      return -height + 6;
     case 'top':
-      return -height + 10;
+      return -height + 6;
     case 'right':
-      return -height + 10;
+      return -height;
     default:
-      return 0;
+      return -height - 15;
   }
 };
 
@@ -46,11 +48,12 @@ class RawLabel extends React.Component {
     text: PropTypes.string,
     side: PropTypes.string,
     classes: PropTypes.object,
+    disabledLabel: PropTypes.bool,
     graphProps: types.GraphPropsType.isRequired
   };
 
   render() {
-    const { text, side, graphProps, classes } = this.props;
+    const { disabledLabel, text, side, graphProps, classes, onChange } = this.props;
     const { size, domain, range } = graphProps;
     const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
     const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
@@ -60,17 +63,41 @@ class RawLabel extends React.Component {
     const height = 36;
     const y = getY(side, height);
 
+    const activePlugins = [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough'
+      // 'languageCharacters'
+    ];
+
     return (
       <foreignObject
         x={-(width / 2)}
         y={y}
         width={width}
-        height={height}
+        height={height * 2}
         transform={transform}
         textAnchor="middle"
       >
         <Readable false>
-          <div dangerouslySetInnerHTML={{ __html: text }} className={classes.axisLabel} />
+          <EditableHtml
+            className={cn(
+              {
+                [classes.bottomLabel]: side === 'bottom',
+                [classes.disabledAxisLabel]: disabledLabel
+              },
+              classes.axisLabel
+            )}
+            markup={text || ''}
+            onChange={onChange}
+            placeholder={!disabledLabel && `Click here to add a ${side} label`}
+            toolbarOpts={{
+              position: side === 'bottom' ? 'top' : 'bottom',
+              noBorder: true
+            }}
+            activePlugins={activePlugins}
+          />
         </Readable>
       </foreignObject>
     );
@@ -82,8 +109,14 @@ const Label = withStyles(theme => ({
     fill: color.secondary()
   },
   axisLabel: {
-    fontSize: theme.typography.fontSize,
+    fontSize: theme.typography.fontSize - 2,
     textAlign: 'center'
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none'
+  },
+  bottomLabel: {
+    marginTop: '44px'
   }
 }))(RawLabel);
 
@@ -98,29 +131,60 @@ export class Labels extends React.Component {
   static propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
+    disabledLabels: PropTypes.bool,
     value: PropTypes.shape(LabelType),
     graphProps: PropTypes.object
   };
 
   static defaultProps = {};
 
+  onChangeLabel = (newValue, side) => {
+    const { value, onChange } = this.props;
+    const labels = {
+      ...value,
+      [side]: newValue
+    };
+
+    onChange(labels);
+  };
+
   render() {
-    const { value, graphProps } = this.props;
+    const { disabledLabels, value = {}, graphProps } = this.props;
 
     return (
       <React.Fragment>
-        {value && value.left && (
-          <Label key="left" side="left" text={value.left} graphProps={graphProps} />
-        )}
-        {value && value.top && (
-          <Label key="top" side="top" text={value.top} graphProps={graphProps} />
-        )}
-        {value && value.bottom && (
-          <Label key="bottom" side="bottom" text={value.bottom} graphProps={graphProps} />
-        )}
-        {value && value.right && (
-          <Label key="right" side="right" text={value.right} graphProps={graphProps} />
-        )}
+        <Label
+          key="left"
+          side="left"
+          text={value.left}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'left')}
+        />
+        <Label
+          key="top"
+          side="top"
+          text={value.top}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'top')}
+        />
+        <Label
+          key="bottom"
+          side="bottom"
+          text={value.bottom}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'bottom')}
+        />
+        <Label
+          key="right"
+          side="right"
+          text={value.right}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'right')}
+        />
       </React.Fragment>
     );
   }