@pie-lib/graphing 2.6.2 → 2.8.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.6.2",
+  "version": "2.8.0",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -18,9 +18,10 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
+    "@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.8",
+    "@pie-lib/render-ui": "^4.13.0",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
     "@vx/event": "^0.0.189",
@@ -43,6 +44,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "debcaf764c62d97a1401f2898b062183847ce33b",
+  "gitHead": "f766e0fdb9e51a9449324db51ccaa93904211710",
   "scripts": {}
 }

package/src/graph-with-controls.jsx

@@ -10,6 +10,13 @@ import ToolMenu from './tool-menu';
 import Graph, { graphPropTypes } from './graph';
 import UndoRedo from './undo-redo';
 import { allTools, toolsArr } from './tools';
+import {
+  ExpansionPanel,
+  ExpansionPanelDetails,
+  ExpansionPanelSummary,
+  Typography
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 export const setToolbarAvailability = toolbarTools =>
   toolsArr.map(tA => ({ ...tA, toolbar: !!toolbarTools.find(t => t === tA.type) })) || [];
@@ -25,6 +32,34 @@ export const filterByValidToolTypes = backgroundMarks =>
 export const filterByVisibleToolTypes = (toolbarTools, marks) =>
   marks.filter(bM => !!toolbarTools.find(tool => tool === bM.type));
 
+const getDefaultCurrentTool = toolType => toolsArr.find(tool => tool.type === toolType) || null;
+
+const Collapsible = ({ classes, children, title }) => (
+  <ExpansionPanel
+    elevation={0}
+    className={classes.expansionPanel}
+    disabledGutters={true}
+    square={true}
+  >
+    <ExpansionPanelSummary
+      classes={{
+        root: classes.summaryRoot,
+        content: classes.summaryContent
+      }}
+      expandIcon={<ExpandMoreIcon />}
+    >
+      <Typography variant="subheading">{title}</Typography>
+    </ExpansionPanelSummary>
+    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>
+  </ExpansionPanel>
+);
+
+Collapsible.propTypes = {
+  classes: PropTypes.object,
+  children: PropTypes.array,
+  title: PropTypes.string
+};
+
 export class GraphWithControls extends React.Component {
   static propTypes = {
     ...graphPropTypes,
@@ -34,9 +69,30 @@ export class GraphWithControls extends React.Component {
     toolbarTools: PropTypes.arrayOf(PropTypes.string) // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'
   };
 
-  static defaultProps = { toolbarTools: [] };
+  static defaultProps = {
+    collapsibleToolbar: false,
+    collapsibleToolbarTitle: '',
+    toolbarTools: []
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentTool: getDefaultCurrentTool(props.defaultTool),
+      labelModeEnabled: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { defaultTool } = this.props;
 
-  state = { currentTool: null, labelModeEnabled: false };
+    if (prevProps.defaultTool !== defaultTool) {
+      const currentTool = getDefaultCurrentTool(defaultTool);
+
+      this.setState({ currentTool });
+    }
+  }
 
   changeCurrentTool = (tool, tools) =>
     this.setState({ currentTool: tools.find(t => t.type === tool) });
@@ -45,16 +101,19 @@ export class GraphWithControls extends React.Component {
 
   render() {
     let { currentTool, labelModeEnabled } = this.state;
-
     const {
       axesSettings,
       classes,
       className,
       coordinatesOnHover,
+      collapsibleToolbar,
+      collapsibleToolbarTitle,
       disabled,
       domain,
+      draggableTools,
       labels,
       onChangeMarks,
+      onChangeTools,
       onUndo,
       onRedo,
       onReset,
@@ -62,7 +121,6 @@ export class GraphWithControls extends React.Component {
       size,
       title
     } = this.props;
-
     let { backgroundMarks, marks, toolbarTools } = this.props;
 
     // make sure only valid tool types are kept (string) and without duplicates
@@ -81,19 +139,33 @@ export class GraphWithControls extends React.Component {
       currentTool = getAvailableTool(tools);
     }
 
+    const graphActions = (
+      <React.Fragment>
+        <ToolMenu
+          currentToolType={currentTool && currentTool.type}
+          disabled={!!disabled}
+          draggableTools={draggableTools}
+          labelModeEnabled={labelModeEnabled}
+          onChange={tool => this.changeCurrentTool(tool, tools)}
+          onToggleLabelMode={this.toggleLabelMode}
+          toolbarTools={toolbarTools}
+          onChangeTools={onChangeTools}
+        />
+
+        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} />}
+      </React.Fragment>
+    );
+
     return (
       <div className={classNames(classes.graphWithControls, className)}>
         <div className={classes.controls}>
-          <ToolMenu
-            currentToolType={currentTool && currentTool.type}
-            disabled={!!disabled}
-            labelModeEnabled={labelModeEnabled}
-            onChange={tool => this.changeCurrentTool(tool, tools)}
-            onToggleLabelMode={this.toggleLabelMode}
-            toolbarTools={toolbarTools}
-          />
-
-          {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} />}
+          {collapsibleToolbar ? (
+            <Collapsible classes={classes} title={collapsibleToolbarTitle}>
+              {graphActions}
+            </Collapsible>
+          ) : (
+            graphActions
+          )}
         </div>
 
         <div ref={r => (this.labelNode = r)} />
@@ -134,6 +206,20 @@ const styles = theme => ({
     '& button': {
       fontSize: theme.typography.fontSize
     }
+  },
+  expansionPanel: {
+    backgroundColor: color.primaryLight()
+  },
+  summaryRoot: {
+    padding: `0 ${theme.spacing.unit}px`,
+    minHeight: '32px !important'
+  },
+  summaryContent: {
+    margin: '4px 0 !important'
+  },
+  details: {
+    padding: 0,
+    marginTop: theme.spacing.unit
   }
 });
 

package/src/graph.jsx

@@ -18,6 +18,8 @@ export const graphPropTypes = {
   axesSettings: PropTypes.shape(AxisPropTypes),
   backgroundMarks: PropTypes.array,
   className: PropTypes.string,
+  collapsibleToolbar: PropTypes.bool,
+  collapsibleToolbarTitle: PropTypes.string,
   domain: types.DomainType,
   labels: PropTypes.shape(LabelType),
   labelModeEnabled: PropTypes.bool,

package/src/grid-setup.jsx

@@ -1,78 +1,120 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
+import { color, InputContainer } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import Typography from '@material-ui/core/Typography';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import TextField from '@material-ui/core/TextField';
 import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
+import EditableHTML from '@pie-lib/editable-html';
 
 const GridConfig = props => {
-  const { classes, disabled, labelValue, labelValues, gridValue, gridValues, onChange } = props;
+  const {
+    classes,
+    disabled,
+    displayedFields,
+    labelValue,
+    labelValues,
+    gridValue,
+    gridValues,
+    onChange
+  } = props;
+  const { labelStep = {}, step = {} } = displayedFields;
 
   return (
     <div className={classes.columnView}>
-      <NumberTextFieldCustom
-        className={classes.textField}
-        label="Grid Interval"
-        value={gridValue}
-        customValues={gridValues}
-        variant="outlined"
-        disabled={disabled}
-        onChange={(e, v) => onChange('step', v)}
-      />
-      <NumberTextFieldCustom
-        className={classes.textField}
-        label="Label Interval"
-        value={labelValue}
-        customValues={labelValues}
-        variant="outlined"
-        disabled={disabled}
-        onChange={(e, v) => onChange('labelStep', v)}
-      />
+      {step && step.enabled && (
+        <NumberTextFieldCustom
+          className={classes.mediumTextField}
+          label={step.label || ''}
+          value={gridValue}
+          customValues={gridValues}
+          variant="outlined"
+          disabled={disabled}
+          onChange={(e, v) => onChange('step', v)}
+        />
+      )}
+      {labelStep && labelStep.enabled && (
+        <NumberTextFieldCustom
+          className={classes.mediumTextField}
+          label={labelStep.label || ''}
+          value={labelValue}
+          customValues={labelValues}
+          variant="outlined"
+          disabled={disabled}
+          onChange={(e, v) => onChange('labelStep', v)}
+        />
+      )}
     </div>
   );
 };
 
 const AxisConfig = props => {
-  const { classes, disabled, label, maxValue, minValue, onChange, type } = props;
+  const {
+    classes,
+    disabled,
+    displayedFields,
+    displayHeader,
+    label,
+    maxValue,
+    minValue,
+    onChange,
+    type
+  } = props;
+  const { axisLabel = {}, min = {}, max = {} } = displayedFields;
+  const activePlugins = [
+    'bold',
+    'italic',
+    'underline',
+    'strikethrough'
+    // 'languageCharacters'
+  ];
 
   return (
     <div className={classes.columnView}>
-      <Typography variant="subtitle2">
-        <i>{type === 'domain' ? 'x' : 'y'}</i>
-        -axis
-      </Typography>
-      <NumberTextFieldCustom
-        className={classes.textField}
-        label="Min Value"
-        value={minValue}
-        variant="outlined"
-        disabled={disabled}
-        onChange={(e, v) => onChange('min', v)}
-      />
-      <NumberTextFieldCustom
-        className={classes.textField}
-        label="Max Value"
-        value={maxValue}
-        variant="outlined"
-        disabled={disabled}
-        onChange={(e, v) => onChange('max', v)}
-      />
-      <TextField
-        label="Label"
-        value={label}
-        inputProps={{
-          maxLength: 5,
-          style: { textAlign: 'center' }
-        }}
-        variant="outlined"
-        className={classes.textField}
-        onChange={e => onChange('axisLabel', e.target.value)}
-      />
+      {displayHeader && (
+        <Typography variant="subtitle2">
+          <i>{type === 'domain' ? 'x' : 'y'}</i>
+          -axis
+        </Typography>
+      )}
+      {min && min.enabled && (
+        <NumberTextFieldCustom
+          className={classes.mediumTextField}
+          label={min.label || ''}
+          value={minValue}
+          min={-10000}
+          max={maxValue - 0.01}
+          variant="outlined"
+          disabled={disabled}
+          onChange={(e, v) => onChange('min', v)}
+        />
+      )}
+      {max && max.enabled && (
+        <NumberTextFieldCustom
+          className={classes.mediumTextField}
+          label={max.label || ''}
+          value={maxValue}
+          min={minValue + 0.01}
+          max={10000}
+          variant="outlined"
+          disabled={disabled}
+          onChange={(e, v) => onChange('max', v)}
+        />
+      )}
+      {axisLabel && axisLabel.enabled && (
+        <InputContainer label={axisLabel.label || ''} className={classes.mediumTextField}>
+          <EditableHTML
+            className={classes.axisLabel}
+            onChange={value => onChange('axisLabel', value)}
+            markup={label || ''}
+            charactersLimit={5}
+            activePlugins={activePlugins}
+          />
+        </InputContainer>
+      )}
     </div>
   );
 };
@@ -80,18 +122,32 @@ const AxisConfig = props => {
 const GridSetup = props => {
   const {
     classes,
-    sizeConstraints,
     domain,
-    dimensionsEnabled,
-    gridValues,
+    displayedFields = {},
+    gridValues = {},
     includeAxes,
-    labelValues,
+    labelValues = {},
     onChange,
     range,
     size,
+    sizeConstraints,
     standardGrid
   } = props;
   const gridProps = { min: 2, max: 41 };
+  const {
+    axisLabel = {},
+    dimensionsEnabled,
+    includeAxesEnabled,
+    labelStep = {},
+    min = {},
+    max = {},
+    standardGridEnabled,
+    step = {}
+  } = displayedFields || {};
+  const displayAxisType =
+    min.enabled || max.enabled || axisLabel.enabled || step.enabled || labelStep.enabled;
+  const gridConfigFields = { step, labelStep };
+  const axisConfigFields = { min, max, axisLabel };
 
   const onIncludeAxes = includeAxes => {
     const noAxesConfig = type => {
@@ -162,6 +218,8 @@ const GridSetup = props => {
       <div className={classes.rowView}>
         <AxisConfig
           classes={classes}
+          displayedFields={axisConfigFields}
+          displayHeader={displayAxisType}
           type="domain"
           minValue={domain.min}
           maxValue={domain.max}
@@ -171,6 +229,8 @@ const GridSetup = props => {
         />
         <AxisConfig
           classes={classes}
+          displayedFields={axisConfigFields}
+          displayHeader={displayAxisType}
           type="range"
           minValue={range.min}
           maxValue={range.max}
@@ -180,34 +240,44 @@ const GridSetup = props => {
           onChange={onRangeChanged}
         />
       </div>
-      <Typography className={classes.text}>
-        If you want the axis to be visible, use a zero or negative Min Value, and a positive Max
-        Value
-      </Typography>
-      <div className={classes.rowView}>
-        <GridConfig
-          classes={classes}
-          gridValue={domain.step}
-          labelValue={domain.labelStep}
-          gridValues={gridValues}
-          labelValues={labelValues}
-          onChange={onDomainChanged}
-        />
-        <GridConfig
-          classes={classes}
-          disabled={standardGrid}
-          gridValue={range.step}
-          labelValue={range.labelStep}
-          onChange={onRangeChanged}
-        />
-      </div>
-      <Typography className={classes.text}>
-        For unnumbered gridlines, enter a label interval of 0
-      </Typography>
+      {(min.enabled || max.enabled) && (
+        <Typography className={classes.text}>
+          If you want the axis to be visible, use a zero or negative Min Value, and a positive Max
+          Value
+        </Typography>
+      )}
+      {(step.enabled || labelStep.enabled) && (
+        <div className={classes.rowView}>
+          <GridConfig
+            classes={classes}
+            displayedFields={gridConfigFields}
+            gridValue={domain.step}
+            labelValue={domain.labelStep}
+            gridValues={gridValues.domain || []}
+            labelValues={labelValues.domain || []}
+            onChange={onDomainChanged}
+          />
+          <GridConfig
+            classes={classes}
+            disabled={standardGrid}
+            displayedFields={gridConfigFields}
+            gridValue={range.step}
+            labelValue={range.labelStep}
+            gridValues={gridValues.range || []}
+            labelValues={labelValues.range || []}
+            onChange={onRangeChanged}
+          />
+        </div>
+      )}
+      {labelStep.enabled && (
+        <Typography className={classes.text}>
+          For unnumbered gridlines, enter a label interval of 0
+        </Typography>
+      )}
     </React.Fragment>
   );
 
-  const gridlinesConfig = (
+  const gridlinesConfig = max.enabled ? (
     <div className={classes.columnView}>
       <NumberTextFieldCustom
         className={classes.largeTextField}
@@ -229,7 +299,7 @@ const GridSetup = props => {
         onChange={(e, v) => onRangeChanged('max', v)}
       />
     </div>
-  );
+  ) : null;
 
   return (
     <div className={classes.wrapper}>
@@ -239,18 +309,28 @@ const GridSetup = props => {
         </ExpansionPanelSummary>
         <ExpansionPanelDetails>
           <div className={classes.content}>
-            <Toggle label="Include axes and labels?" toggle={onIncludeAxes} checked={includeAxes} />
-            <Toggle
-              label="Constrain to standard coordinate grid?"
-              toggle={onStandardGridChanged}
-              checked={standardGrid}
-            />
+            {includeAxesEnabled && (
+              <Toggle
+                label="Include axes and labels?"
+                toggle={onIncludeAxes}
+                checked={includeAxes}
+              />
+            )}
+            {standardGridEnabled && (
+              <Toggle
+                label="Constrain to standard coordinate grid?"
+                toggle={onStandardGridChanged}
+                checked={standardGrid}
+              />
+            )}
             {includeAxes ? axesConfig : gridlinesConfig}
             {dimensionsEnabled && (
               <div className={classes.dimensions}>
                 <div>
                   <Typography>Dimensions(px)</Typography>
-                  <Typography className={classes.disabled}>Min 150, Max 700</Typography>
+                  <Typography className={classes.disabled}>
+                    Min {sizeConstraints.min}, Max {sizeConstraints.max}
+                  </Typography>
                 </div>
                 <NumberTextFieldCustom
                   className={classes.textField}
@@ -285,7 +365,7 @@ const GridSetup = props => {
 GridSetup.propTypes = {
   classes: PropTypes.object,
   domain: PropTypes.object,
-  dimensionsEnabled: PropTypes.object,
+  displayedFields: PropTypes.object,
   gridValues: PropTypes.object,
   includeAxes: PropTypes.bool,
   labelValues: PropTypes.object,
@@ -319,6 +399,10 @@ const styles = theme => ({
     width: '130px',
     margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
   },
+  mediumTextField: {
+    width: '160px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
   largeTextField: {
     width: '230px',
     margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
@@ -334,6 +418,9 @@ const styles = theme => ({
   },
   disabled: {
     color: color.disabled()
+  },
+  axisLabel: {
+    paddingTop: theme.spacing.unit * 2
   }
 });
 

package/src/grid.jsx

@@ -14,13 +14,6 @@ export class Grid extends React.Component {
     graphProps: types.GraphPropsType.isRequired
   };
 
-  shouldComponentUpdate(nextProps) {
-    const { graphProps } = this.props;
-    const { graphProps: nextGraphProps } = nextProps;
-
-    return !utils.isDomainRangeEqual(graphProps, nextGraphProps);
-  }
-
   getAdditionalGridProps = (rowTickValues, columnTickValues) => {
     const {
       graphProps: {