@pie-lib/graphing 2.4.3-next.271 → 2.4.3-next.303

package/src/graph.jsx

@@ -165,64 +165,60 @@ export class Graph extends React.Component {
     marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });
 
     return (
-      <Root
-        // left side requires an extra padding of 10, in order to fit next to tick labels like 1.5, 1.55...
-        paddingLeft={60}
-        rootRef={r => (this.rootNode = r)}
-        title={title}
-        {...common}
-      >
-        <Grid {...common} />
-        <Axes {...axesSettings} {...common} />
-        <Bg {...size} onClick={this.onBgClick} {...common} />
+      <Root rootRef={r => (this.rootNode = r)} title={title} {...common}>
         <Labels value={labels} {...common} />
-        <mask id="myMask">
-          <rect {...maskSize} fill="white" /> {/* TODO hardcoded color */}
-        </mask>
-
-        <g id="marks" mask="url('#myMask')">
-          {(backgroundMarks || []).map((m, index) => {
-            const Component = this.getComponent(m);
-            const markType = m.type;
-
-            return (
-              <Component
-                key={`${markType}-${index}-bg`}
-                mark={{ ...m, disabled: true, isBackground: true }}
-                labelNode={this.state.labelNode}
-                {...common}
-              />
-            );
-          })}
-
-          {marks.map((m, index) => {
-            const Component = this.getComponent(m);
-            const markType = m.type;
-
-            return (
-              <Component
-                key={`${markType}-${index}`}
-                mark={m}
-                coordinatesOnHover={coordinatesOnHover}
-                onChange={this.changeMark}
-                onComplete={this.completeMark}
-                onClick={this.onBgClick}
-                onDragStart={this.startDrag}
-                onDragStop={this.stopDrag}
-                labelNode={this.state.labelNode}
-                isToolActive={currentTool && markType === currentTool.type}
-                {...common}
-              />
-            );
-          })}
-
-          <foreignObject
-            ref={labelNode => (this.labelNode = labelNode)}
-            x="0"
-            y="0"
-            {...size}
-            style={{ pointerEvents: 'none' }}
-          />
+        <g transform={`translate(${domain.padding}, ${range.padding})`}>
+          <Grid {...common} />
+          <Axes {...axesSettings} {...common} />
+          <Bg {...size} onClick={this.onBgClick} {...common} />
+          <mask id="myMask">
+            <rect {...maskSize} fill="white" /> {/* TODO hardcoded color */}
+          </mask>
+
+          <g id="marks" mask="url('#myMask')">
+            {(backgroundMarks || []).map((m, index) => {
+              const Component = this.getComponent(m);
+              const markType = m.type;
+
+              return (
+                <Component
+                  key={`${markType}-${index}-bg`}
+                  mark={{ ...m, disabled: true, isBackground: true }}
+                  labelNode={this.state.labelNode}
+                  {...common}
+                />
+              );
+            })}
+
+            {marks.map((m, index) => {
+              const Component = this.getComponent(m);
+              const markType = m.type;
+
+              return (
+                <Component
+                  key={`${markType}-${index}`}
+                  mark={m}
+                  coordinatesOnHover={coordinatesOnHover}
+                  onChange={this.changeMark}
+                  onComplete={this.completeMark}
+                  onClick={this.onBgClick}
+                  onDragStart={this.startDrag}
+                  onDragStop={this.stopDrag}
+                  labelNode={this.state.labelNode}
+                  isToolActive={currentTool && markType === currentTool.type}
+                  {...common}
+                />
+              );
+            })}
+
+            <foreignObject
+              ref={labelNode => (this.labelNode = labelNode)}
+              x="0"
+              y="0"
+              {...size}
+              style={{ pointerEvents: 'none' }}
+            />
+          </g>
         </g>
       </Root>
     );

package/src/grid-setup.jsx

@@ -0,0 +1,340 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { color } 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';
+
+const GridConfig = props => {
+  const { classes, disabled, labelValue, labelValues, gridValue, gridValues, onChange } = props;
+
+  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)}
+      />
+    </div>
+  );
+};
+
+const AxisConfig = props => {
+  const { classes, disabled, label, maxValue, minValue, onChange, type } = props;
+
+  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)}
+      />
+    </div>
+  );
+};
+
+const GridSetup = props => {
+  const {
+    classes,
+    sizeConstraints,
+    domain,
+    dimensionsEnabled,
+    gridValues,
+    includeAxes,
+    labelValues,
+    onChange,
+    range,
+    size,
+    standardGrid
+  } = props;
+  const gridProps = { min: 2, max: 41 };
+
+  const onIncludeAxes = includeAxes => {
+    const noAxesConfig = type => {
+      const axis = type === 'domain' ? domain : range;
+
+      return {
+        min: 1,
+        max: axis.max < gridProps.min || axis.max > gridProps.max ? 16 : axis.max,
+        step: 1,
+        labelStep: 0
+      };
+    };
+
+    const updatedRange = {
+      ...range,
+      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('range'))
+    };
+    const updatedDomain = {
+      ...domain,
+      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('domain'))
+    };
+
+    onChange({ includeAxes, range: updatedRange, domain: updatedDomain });
+  };
+
+  const onStandardGridChanged = value => {
+    onChange({
+      standardGrid: value,
+      range: {
+        ...domain,
+        axisLabel: range.axisLabel
+      },
+      graph: {
+        ...size,
+        height: size.width
+      }
+    });
+  };
+
+  const onSizeChanged = (key, value) => {
+    const graph = { ...size, [key]: value };
+
+    if (standardGrid) {
+      graph.height = value;
+    }
+
+    onChange({ graph });
+  };
+
+  const onDomainChanged = (key, value) => {
+    domain[key] = value;
+
+    if (standardGrid && key !== 'axisLabel') {
+      range[key] = value;
+    }
+
+    onChange({ domain, range });
+  };
+
+  const onRangeChanged = (key, value) => {
+    range[key] = value;
+
+    onChange({ range });
+  };
+
+  const axesConfig = (
+    <React.Fragment>
+      <div className={classes.rowView}>
+        <AxisConfig
+          classes={classes}
+          type="domain"
+          minValue={domain.min}
+          maxValue={domain.max}
+          label={domain.axisLabel}
+          includeAxes={includeAxes}
+          onChange={onDomainChanged}
+        />
+        <AxisConfig
+          classes={classes}
+          type="range"
+          minValue={range.min}
+          maxValue={range.max}
+          label={range.axisLabel}
+          disabled={standardGrid}
+          includeAxes={includeAxes}
+          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>
+    </React.Fragment>
+  );
+
+  const gridlinesConfig = (
+    <div className={classes.columnView}>
+      <NumberTextFieldCustom
+        className={classes.largeTextField}
+        label="Number of Horizontal Gridlines"
+        value={domain.max}
+        min={!includeAxes && gridProps.min}
+        max={!includeAxes && gridProps.max}
+        variant="outlined"
+        onChange={(e, v) => onDomainChanged('max', v)}
+      />
+      <NumberTextFieldCustom
+        className={classes.largeTextField}
+        label="Number of Vertical Gridlines"
+        value={range.max}
+        min={!includeAxes && gridProps.min}
+        max={!includeAxes && gridProps.max}
+        variant="outlined"
+        disabled={standardGrid}
+        onChange={(e, v) => onRangeChanged('max', v)}
+      />
+    </div>
+  );
+
+  return (
+    <div className={classes.wrapper}>
+      <ExpansionPanel>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography variant="subtitle1">Customize Grid Setup</Typography>
+        </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}
+            />
+            {includeAxes ? axesConfig : gridlinesConfig}
+            {dimensionsEnabled && (
+              <div className={classes.dimensions}>
+                <div>
+                  <Typography>Dimensions(px)</Typography>
+                  <Typography className={classes.disabled}>Min 150, Max 700</Typography>
+                </div>
+                <NumberTextFieldCustom
+                  className={classes.textField}
+                  label="Width"
+                  value={size.width}
+                  min={sizeConstraints.min}
+                  max={sizeConstraints.max}
+                  step={sizeConstraints.step}
+                  variant="outlined"
+                  onChange={(e, v) => onSizeChanged('width', v)}
+                />
+                <NumberTextFieldCustom
+                  className={classes.textField}
+                  label="Height"
+                  value={size.height}
+                  min={sizeConstraints.min}
+                  max={sizeConstraints.max}
+                  step={sizeConstraints.step}
+                  variant="outlined"
+                  disabled={standardGrid}
+                  onChange={(e, v) => onSizeChanged('height', v)}
+                />
+              </div>
+            )}
+          </div>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </div>
+  );
+};
+
+GridSetup.propTypes = {
+  classes: PropTypes.object,
+  domain: PropTypes.object,
+  dimensionsEnabled: PropTypes.object,
+  gridValues: PropTypes.object,
+  includeAxes: PropTypes.bool,
+  labelValues: PropTypes.object,
+  onChange: PropTypes.function,
+  range: PropTypes.object,
+  size: PropTypes.object,
+  sizeConstraints: PropTypes.object,
+  standardGrid: PropTypes.bool
+};
+
+const styles = theme => ({
+  wrapper: {
+    width: '450px'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%'
+  },
+  columnView: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  rowView: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center'
+  },
+  textField: {
+    width: '130px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  largeTextField: {
+    width: '230px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  text: {
+    fontStyle: 'italic',
+    margin: `${theme.spacing.unit}px 0`
+  },
+  dimensions: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  disabled: {
+    color: color.disabled()
+  }
+});
+
+export default withStyles(styles)(GridSetup);

package/src/index.js

@@ -1,6 +1,7 @@
 import Graph from './graph';
 import GraphContainer from './container';
+import GridSetup from './grid-setup';
 import * as tools from './tools';
 import ToolMenu from './tool-menu';
 
-export { Graph, GraphContainer, ToolMenu, tools };
+export { Graph, GraphContainer, GridSetup, ToolMenu, tools };

package/src/labels.jsx

@@ -51,11 +51,12 @@ class RawLabel extends React.Component {
 
   render() {
     const { text, side, graphProps, classes } = 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;
 
-    const { size } = graphProps;
-
-    const transform = getTransform(side, size.width, size.height);
-    const width = side === 'left' || side === 'right' ? size.height : size.width;
+    const transform = getTransform(side, totalWidth, totalHeight);
+    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
     const height = 36;
     const y = getY(side, height);
 
@@ -102,8 +103,10 @@ export class Labels extends React.Component {
   };
 
   static defaultProps = {};
+
   render() {
     const { value, graphProps } = this.props;
+
     return (
       <React.Fragment>
         {value && value.left && (