@pie-lib/graphing 2.4.3-next.437 → 2.4.3-next.467

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
+# [2.8.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.7.0...@pie-lib/graphing@2.8.0) (2022-07-18)
+
+
+### Features
+
+* **graphing:** added drag and drop sorting for toolbar tools PD-1607 ([2463c86](https://github.com/pie-framework/pie-lib/commit/2463c86bf6ff42222e98e4344fc6c9fd040d9774))
+
+
+
+
+
+# [2.7.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.6.3...@pie-lib/graphing@2.7.0) (2022-06-27)
+
+
+### Features
+
+* **graphing:** added collapsible panel for graph toolbar PD-1693 ([4268bb0](https://github.com/pie-framework/pie-lib/commit/4268bb06093d1fabf82d9f5c2d8fd81f9788a4fe))
+* **graphing:** Added default value for current drawing tool PD-1689 ([bc9b1b0](https://github.com/pie-framework/pie-lib/commit/bc9b1b00d64d50d138f3ab0991957d9fecaed17b))
+* **graphing:** Added the ability to control the fields displayed into Grid Setup PD-1688 ([1f0f3eb](https://github.com/pie-framework/pie-lib/commit/1f0f3eb58c5dcd923e2452a0071bf1de40535bb2))
+* added support for graph configuration constraints PD-1683 PD-1684 PD-1686 ([8da7426](https://github.com/pie-framework/pie-lib/commit/8da74260b28332b976fa1c50796e74679fd46a13))
+* created setup panel and added basic functionalities PD-1679 ([183eda1](https://github.com/pie-framework/pie-lib/commit/183eda10b2f4128cd831c5b27f14ebccb6b3e7b2))
+
+
+
+
+
+## [2.6.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.6.2...@pie-lib/graphing@2.6.3) (2022-06-13)
+
+**Note:** Version bump only for package @pie-lib/graphing
+
+
+
+
+
 ## [2.6.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.6.1...@pie-lib/graphing@2.6.2) (2022-05-30)
 
 

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,"file":"graph-with-controls.js","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","uniq","tT","isString","graphActions","changeCurrentTool","toggleLabelMode","classNames","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","withStyles"],"sources":["../src/graph-with-controls.jsx"],"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"],"mappings":"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"}
+{"version":3,"file":"graph-with-controls.js","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","uniq","tT","isString","graphActions","changeCurrentTool","toggleLabelMode","classNames","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","withStyles"],"sources":["../src/graph-with-controls.jsx"],"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"],"mappings":"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"}

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,"file":"graph.js","names":["log","debug","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","cloneDeep","type","index","findIndex","isEqual","splice","Graph","setState","labelNode","oldMark","newMark","props","isDuplicatedMark","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","graphProps","createGraphProps","rootNode","maskSize","common","r","padding","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"sources":["../src/graph.jsx"],"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"],"mappings":"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"}
+{"version":3,"file":"graph.js","names":["log","debug","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","cloneDeep","type","index","findIndex","isEqual","splice","Graph","setState","labelNode","oldMark","newMark","props","isDuplicatedMark","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","graphProps","createGraphProps","rootNode","maskSize","common","r","padding","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"sources":["../src/graph.jsx"],"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"],"mappings":"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"}

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,"file":"labels.js","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","withStyles","theme","label","fill","color","secondary","fontSize","typography","textAlign","LabelType","Labels","value","className","shape"],"sources":["../src/labels.jsx"],"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"],"mappings":"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"}
+{"version":3,"file":"labels.js","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","cn","bottomLabel","disabledAxisLabel","axisLabel","position","noBorder","React","Component","PropTypes","string","object","bool","types","GraphPropsType","isRequired","Label","withStyles","theme","label","fill","color","secondary","fontSize","typography","textAlign","pointerEvents","marginTop","LabelType","Labels","newValue","value","labels","disabledLabels","onChangeLabel","className","shape"],"sources":["../src/labels.jsx"],"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"],"mappings":"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"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.4.3-next.437+7133506c",
+  "version": "2.4.3-next.467+6127f1e4",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -21,7 +21,7 @@
     "@pie-lib/drag": "^1.1.52",
     "@pie-lib/graphing-utils": "^1.1.20",
     "@pie-lib/plot": "^2.2.0",
-    "@pie-lib/render-ui": "^4.12.1-next.437+7133506c",
+    "@pie-lib/render-ui": "^4.12.1-next.467+6127f1e4",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
     "@vx/event": "^0.0.189",
@@ -44,6 +44,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "7133506c26c247c6be91245284e61ccd14789d4f",
+  "gitHead": "6127f1e483d7603030ffb815d8503e5e066dba3d",
   "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>
     );
   }