@pie-lib/plot 2.1.10-next.266 → 2.1.10-next.540

package/src/root.jsx

@@ -1,28 +1,12 @@
 import React from 'react';
 import { ChildrenType } from './types';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import { select, mouse } from 'd3-selection';
 import PropTypes from 'prop-types';
 import { GraphPropsType } from './types';
 import { color } from '@pie-lib/render-ui';
-import { findLongestWord, amountToIncreaseWidth } from './utils';
-
-export const GraphTitle = withStyles(theme => ({
-  title: {
-    color: color.text(),
-    textAlign: 'center',
-    paddingTop: theme.spacing.unit * 2,
-    fontSize: theme.typography.fontSize + 6
-  }
-}))(({ value, classes }) => (
-  <Typography
-    className={classes.title}
-    color="primary"
-    variant="h5"
-    dangerouslySetInnerHTML={{ __html: value }}
-  />
-));
+import EditableHtml from '@pie-lib/editable-html';
+import cn from 'classnames';
 
 export class Root extends React.Component {
   static propTypes = {
@@ -31,8 +15,8 @@ export class Root extends React.Component {
     graphProps: GraphPropsType.isRequired,
     onMouseMove: PropTypes.func,
     classes: PropTypes.object.isRequired,
-    rootRef: PropTypes.func,
-    paddingLeft: PropTypes.number
+    showTitle: PropTypes.bool,
+    rootRef: PropTypes.func
   };
 
   mouseMove = g => {
@@ -66,18 +50,52 @@ export class Root extends React.Component {
   }
 
   render() {
-    const { graphProps, children, classes, title, rootRef, paddingLeft } = this.props;
-    const { size, domain } = graphProps;
-    const padding = 50;
-    const longestWord = findLongestWord(domain.axisLabel);
-    const increaseWidth = amountToIncreaseWidth(longestWord);
+    const {
+      disabledTitle,
+      graphProps,
+      children,
+      classes,
+      onChangeTitle,
+      showTitle,
+      title,
+      rootRef
+    } = this.props;
+    const {
+      size: { width = 500, height = 500 },
+      domain,
+      range
+    } = graphProps;
+    const topPadding = 50;
+    const leftPadding = topPadding + 10; // left side requires an extra padding of 10
+    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
+    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
 
-    const finalWidth = size.width + padding * 2 + increaseWidth;
-    const finalHeight = size.height + padding * 2;
+    const activeTitlePlugins = [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough'
+      // 'languageCharacters'
+    ];
 
     return (
       <div className={classes.root}>
-        {title && <GraphTitle value={title} />}
+        {showTitle && (
+          <EditableHtml
+            className={cn(
+              {
+                [classes.disabledTitle]: disabledTitle
+              },
+              classes.graphTitle
+            )}
+            markup={title || ''}
+            width={finalWidth}
+            onChange={onChangeTitle}
+            placeholder={!disabledTitle && 'Click here to add a title for this graph'}
+            toolbarOpts={{ noBorder: true }}
+            activePlugins={activeTitlePlugins}
+          />
+        )}
         <svg width={finalWidth} height={finalHeight} className={classes.svg}>
           <g
             ref={r => {
@@ -87,7 +105,7 @@ export class Root extends React.Component {
               }
             }}
             className={classes.graphBox}
-            transform={`translate(${paddingLeft || padding}, ${padding})`}
+            transform={`translate(${leftPadding}, ${topPadding})`}
           >
             {children}
           </g>
@@ -96,7 +114,7 @@ export class Root extends React.Component {
     );
   }
 }
-const styles = () => ({
+const styles = theme => ({
   root: {
     border: `solid 1px ${color.primaryLight()}`,
     color: color.text(),
@@ -106,6 +124,15 @@ const styles = () => ({
   graphBox: {
     cursor: 'pointer',
     userSelect: 'none'
+  },
+  graphTitle: {
+    color: color.text(),
+    fontSize: theme.typography.fontSize + 2,
+    padding: '8px 50px 0',
+    textAlign: 'center'
+  },
+  disabledTitle: {
+    pointerEvents: 'none'
   }
 });
 

package/src/utils.js

@@ -139,7 +139,7 @@ export const isDomainRangeEqual = (graphProps, nextGraphProps) => {
   );
 };
 
-// findLongestWord is also used in grapghing
+// findLongestWord is also used in graphing
 export const findLongestWord = label => {
   let longestWord = (label || '')
     .replace(/<[^>]+>/g, '')
@@ -149,7 +149,7 @@ export const findLongestWord = label => {
   return longestWord[0].length;
 };
 
-// amountToIncreaseWidth is also used in grapghing
+// amountToIncreaseWidth is also used in graphing
 export const amountToIncreaseWidth = longestWord => {
   if (!longestWord) {
     return 0;