@pie-lib/plot 2.1.10 → 2.4.0

package/src/root.jsx

@@ -1,38 +1,26 @@
 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 { 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,
-    rootRef: PropTypes.func,
-    paddingLeft: PropTypes.number
+    showLabels: PropTypes.bool,
+    showTitle: PropTypes.bool,
+    showPixelGuides: PropTypes.bool,
+    rootRef: PropTypes.func
   };
 
   mouseMove = g => {
@@ -66,46 +54,155 @@ 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,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      rootRef
+    } = this.props;
+    const {
+      size: { width = 500, height = 500 },
+      domain,
+      range
+    } = graphProps;
+
+    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 finalWidth = size.width + padding * 2 + increaseWidth;
-    const finalHeight = size.height + padding * 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(${paddingLeft || padding}, ${padding})`}
-          >
-            {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 }}>
+              {[...Array(nbOfHorizontalLines + 1).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',
+    marginTop: '40px',
+    marginRight: '6px'
+  },
+  sidePixelIndicator: {
+    color: color.primaryLight(),
+    textAlign: 'right',
+    height: '20px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+
+    '&:not(:last-child)': {
+      marginBottom: '80px'
+    }
   }
 });
 

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;