@pie-lib/graphing 2.8.1 → 2.10.0

package/src/grid-setup.jsx

@@ -51,6 +51,17 @@ const GridConfig = props => {
   );
 };
 
+GridConfig.propTypes = {
+  classes: PropTypes.object,
+  disabled: PropTypes.bool,
+  displayedFields: PropTypes.object,
+  labelValue: PropTypes.number,
+  labelValues: PropTypes.array,
+  gridValue: PropTypes.number,
+  gridValues: PropTypes.array,
+  onChange: PropTypes.func
+};
+
 const AxisConfig = props => {
   const {
     classes,
@@ -128,6 +139,7 @@ const GridSetup = props => {
     includeAxes,
     labelValues = {},
     onChange,
+    onChangeView,
     range,
     size,
     sizeConstraints,
@@ -303,7 +315,7 @@ const GridSetup = props => {
 
   return (
     <div className={classes.wrapper}>
-      <ExpansionPanel>
+      <ExpansionPanel onChange={onChangeView}>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography variant="subtitle1">Customize Grid Setup</Typography>
         </ExpansionPanelSummary>
@@ -370,6 +382,7 @@ GridSetup.propTypes = {
   includeAxes: PropTypes.bool,
   labelValues: PropTypes.object,
   onChange: PropTypes.function,
+  onChangeView: PropTypes.function,
   range: PropTypes.object,
   size: PropTypes.object,
   sizeConstraints: PropTypes.object,

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,
@@ -33,11 +35,11 @@ const getY = (side, height) => {
     case 'left':
       return -height;
     case 'top':
-      return -height + 10;
+      return -height;
     case 'right':
-      return -height + 10;
+      return -height - 10;
     default:
-      return 0;
+      return -height + 10;
   }
 };
 
@@ -46,11 +48,13 @@ class RawLabel extends React.Component {
     text: PropTypes.string,
     side: PropTypes.string,
     classes: PropTypes.object,
+    disabledLabel: PropTypes.bool,
+    placeholder: PropTypes.string,
     graphProps: types.GraphPropsType.isRequired
   };
 
   render() {
-    const { text, side, graphProps, classes } = this.props;
+    const { disabledLabel, placeholder, 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;
@@ -59,18 +63,44 @@ class RawLabel extends React.Component {
     const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
     const height = 36;
     const y = getY(side, height);
+    const finalHeight = side === 'bottom' ? height + 22 : height + 18;
+
+    const activePlugins = [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      'math'
+      // 'languageCharacters'
+    ];
 
     return (
       <foreignObject
         x={-(width / 2)}
         y={y}
         width={width}
-        height={height}
+        height={finalHeight}
         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 && placeholder}
+            toolbarOpts={{
+              position: side === 'bottom' ? 'top' : 'bottom',
+              noBorder: true
+            }}
+            activePlugins={activePlugins}
+          />
         </Readable>
       </foreignObject>
     );
@@ -82,8 +112,15 @@ const Label = withStyles(theme => ({
     fill: color.secondary()
   },
   axisLabel: {
-    fontSize: theme.typography.fontSize,
-    textAlign: 'center'
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    padding: '0 4px'
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none'
+  },
+  bottomLabel: {
+    marginTop: '44px'
   }
 }))(RawLabel);
 
@@ -98,29 +135,65 @@ export class Labels extends React.Component {
   static propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
+    disabledLabels: PropTypes.bool,
+    placeholders: PropTypes.object,
     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, placeholders = {}, 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}
+          placeholder={placeholders.left}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'left')}
+        />
+        <Label
+          key="top"
+          side="top"
+          text={value.top}
+          disabledLabel={disabledLabels}
+          placeholder={placeholders.top}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'top')}
+        />
+        <Label
+          key="bottom"
+          side="bottom"
+          text={value.bottom}
+          disabledLabel={disabledLabels}
+          placeholder={placeholders.bottom}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'bottom')}
+        />
+        <Label
+          key="right"
+          side="right"
+          text={value.right}
+          disabledLabel={disabledLabels}
+          placeholder={placeholders.right}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'right')}
+        />
       </React.Fragment>
     );
   }