@pie-lib/plot 2.2.0 → 2.4.1

package/src/root.jsx

@@ -1,35 +1,25 @@
 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';
-
-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 { color, Readable } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html';
+import cn from 'classnames';
 
 export class Root extends React.Component {
   static propTypes = {
     title: PropTypes.string,
     children: ChildrenType,
+    disabledTitle: PropTypes.bool,
     graphProps: GraphPropsType.isRequired,
+    onChangeTitle: PropTypes.func,
     onMouseMove: PropTypes.func,
     classes: PropTypes.object.isRequired,
+    showLabels: PropTypes.bool,
+    showTitle: PropTypes.bool,
+    showPixelGuides: PropTypes.bool,
     rootRef: PropTypes.func
   };
 
@@ -64,48 +54,160 @@ export class Root extends React.Component {
   }
 
   render() {
-    const { graphProps, children, classes, title, rootRef } = this.props;
+    const {
+      disabledTitle,
+      graphProps,
+      children,
+      classes,
+      onChangeTitle,
+      thisIsChart,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      rootRef
+    } = this.props;
     const {
       size: { width = 500, height = 500 },
       domain,
       range
     } = graphProps;
-    const topPadding = 50;
-    const leftPadding = topPadding + 10; // 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 chartPadding = thisIsChart ? 45 : 0;
+    const padding = showLabels ? 70 : 40;
+    const extraPadding = showLabels ? 16 : 40;
+    const finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
+    const finalHeight = height + padding * 2 + (range.padding || 0) * 2;
+
+    const activeTitlePlugins = [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      'math'
+      // 'languageCharacters'
+    ];
+
+    const nbOfVerticalLines = parseInt(width / 100);
+    const nbOfHorizontalLines = parseInt(height / 100);
+    const sideGridlinesPadding = parseInt(height % 100);
 
     return (
       <div className={classes.root}>
-        {title && <GraphTitle value={title} />}
-        <svg width={finalWidth} height={finalHeight} className={classes.svg}>
-          <g
-            ref={r => {
-              this.g = r;
-              if (rootRef) {
-                rootRef(r);
-              }
-            }}
-            className={classes.graphBox}
-            transform={`translate(${leftPadding}, ${topPadding})`}
-          >
-            {children}
-          </g>
-        </svg>
+        {showPixelGuides && (
+          <div className={classes.topPixelGuides}>
+            {[...Array(nbOfVerticalLines + 1).keys()].map(value => (
+              <Readable false key={`top-guide-${value}`}>
+                <div className={classes.topPixelIndicator}>
+                  <div>{value * 100}px</div>
+                  <div>|</div>
+                </div>
+              </Readable>
+            ))}
+          </div>
+        )}
+        {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}
+          />
+        )}
+        <div className={classes.wrapper}>
+          <svg width={finalWidth} height={finalHeight} className={classes.svg}>
+            <g
+              ref={r => {
+                this.g = r;
+                if (rootRef) {
+                  rootRef(r);
+                }
+              }}
+              className={classes.graphBox}
+              transform={`translate(${padding}, ${padding})`}
+            >
+              {children}
+            </g>
+          </svg>
+          {showPixelGuides && (
+            <div
+              className={classes.sidePixelGuides}
+              style={{ paddingTop: sideGridlinesPadding + chartPadding }}
+            >
+              {[...Array(nbOfHorizontalLines + 1 - thisIsChart).keys()].reverse().map(value => (
+                <Readable false key={`top-guide-${value}`}>
+                  <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>
+                </Readable>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     );
   }
 }
-const styles = () => ({
+const styles = theme => ({
   root: {
     border: `solid 1px ${color.primaryLight()}`,
     color: color.text(),
     backgroundColor: color.background()
   },
+  wrapper: {
+    display: 'flex'
+  },
   svg: {},
   graphBox: {
     cursor: 'pointer',
     userSelect: 'none'
+  },
+  graphTitle: {
+    color: color.text(),
+    fontSize: theme.typography.fontSize + 2,
+    padding: '12px 4px 0',
+    textAlign: 'center'
+  },
+  disabledTitle: {
+    pointerEvents: 'none'
+  },
+  topPixelGuides: {
+    display: 'flex',
+    paddingTop: '6px',
+    marginLeft: '10px'
+  },
+  topPixelIndicator: {
+    color: color.primaryLight(),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100px',
+    pointerEvents: 'none',
+    userSelect: 'none'
+  },
+  sidePixelGuides: {
+    width: '70px',
+    display: 'flex',
+    flexDirection: 'column',
+
+    marginRight: '6px'
+  },
+  sidePixelIndicator: {
+    color: color.primaryLight(),
+    textAlign: 'right',
+    height: '20px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+
+    '&:not(:last-child)': {
+      marginBottom: '80px'
+    }
   }
 });