@pie-lib/graphing 2.11.3-next.50 → 2.11.4

package/src/coordinates-label.jsx

@@ -6,17 +6,17 @@ import { withStyles } from '@material-ui/core/styles';
 import InputBase from '@material-ui/core/InputBase';
 import { roundNumber } from './utils';
 
-const styles = theme => ({
+const styles = (theme) => ({
   input: {
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.fontSize,
     borderRadius: '8px',
     background: '#FFFFFF',
-    color: color.primaryDark()
+    color: color.primaryDark(),
   },
   inputLabel: {
-    padding: 0
-  }
+    padding: 0,
+  },
 });
 
 export const getLabelPosition = (graphProps, x, y, labelLength) => {
@@ -28,13 +28,13 @@ export const getLabelPosition = (graphProps, x, y, labelLength) => {
   if (rightEdge >= scale.x(domain.max)) {
     return {
       left: scale.x(x) - leftShift - labelLength,
-      top: scale.y(y) - topShift
+      top: scale.y(y) - topShift,
     };
   }
 
   return {
     left: scale.x(x) + leftShift,
-    top: scale.y(y) - topShift
+    top: scale.y(y) - topShift,
   };
 };
 
@@ -48,7 +48,7 @@ export const CoordinatesLabel = ({ x, y, graphProps, classes }) => {
     pointerEvents: 'auto',
     width: labelLength,
     padding: 0,
-    ...labelPosition
+    ...labelPosition,
   };
 
   return (
@@ -66,7 +66,7 @@ CoordinatesLabel.propTypes = {
   graphProps: types.GraphPropsType,
   classes: PropTypes.object,
   x: PropTypes.number,
-  y: PropTypes.number
+  y: PropTypes.number,
 };
 
 export default withStyles(styles)(CoordinatesLabel);

package/src/graph-with-controls.jsx

@@ -10,41 +10,31 @@ 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 { 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) })) || [];
+export const setToolbarAvailability = (toolbarTools) =>
+  toolsArr.map((tA) => ({ ...tA, toolbar: !!toolbarTools.find((t) => t === tA.type) })) || [];
 
 export const toolIsAvailable = (tools, currentTool) =>
-  currentTool && tools && (tools.find(tool => tool.type === currentTool.type) || {}).toolbar;
+  currentTool && tools && (tools.find((tool) => tool.type === currentTool.type) || {}).toolbar;
 
-export const getAvailableTool = tools => tools.find(tool => tool.toolbar);
+export const getAvailableTool = (tools) => tools.find((tool) => tool.toolbar);
 
-export const filterByValidToolTypes = backgroundMarks =>
-  backgroundMarks.filter(bM => !!allTools.find(tool => tool === bM.type));
+export const filterByValidToolTypes = (backgroundMarks) =>
+  backgroundMarks.filter((bM) => !!allTools.find((tool) => tool === bM.type));
 
 export const filterByVisibleToolTypes = (toolbarTools, marks) =>
-  marks.filter(bM => !!toolbarTools.find(tool => tool === bM.type));
+  marks.filter((bM) => !!toolbarTools.find((tool) => tool === bM.type));
 
-const getDefaultCurrentTool = toolType => toolsArr.find(tool => tool.type === toolType) || null;
+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}
-  >
+  <ExpansionPanel elevation={0} className={classes.expansionPanel} disabledGutters={true} square={true}>
     <ExpansionPanelSummary
       classes={{
         root: classes.summaryRoot,
-        content: classes.summaryContent
+        content: classes.summaryContent,
       }}
       expandIcon={<ExpandMoreIcon />}
     >
@@ -57,7 +47,7 @@ const Collapsible = ({ classes, children, title }) => (
 Collapsible.propTypes = {
   classes: PropTypes.object,
   children: PropTypes.array,
-  title: PropTypes.string
+  title: PropTypes.string,
 };
 
 export class GraphWithControls extends React.Component {
@@ -66,7 +56,7 @@ export class GraphWithControls extends React.Component {
     onUndo: PropTypes.func,
     onRedo: PropTypes.func,
     onReset: PropTypes.func,
-    toolbarTools: PropTypes.arrayOf(PropTypes.string) // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'
+    toolbarTools: PropTypes.arrayOf(PropTypes.string), // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'
   };
 
   static defaultProps = {
@@ -76,7 +66,7 @@ export class GraphWithControls extends React.Component {
     disabledTitle: false,
     showLabels: true,
     showTitle: true,
-    toolbarTools: []
+    toolbarTools: [],
   };
 
   constructor(props) {
@@ -84,7 +74,7 @@ export class GraphWithControls extends React.Component {
 
     this.state = {
       currentTool: getDefaultCurrentTool(props.defaultTool),
-      labelModeEnabled: false
+      labelModeEnabled: false,
     };
   }
 
@@ -98,10 +88,9 @@ export class GraphWithControls extends React.Component {
     }
   }
 
-  changeCurrentTool = (tool, tools) =>
-    this.setState({ currentTool: tools.find(t => t.type === tool) });
+  changeCurrentTool = (tool, tools) => this.setState({ currentTool: tools.find((t) => t.type === tool) });
 
-  toggleLabelMode = () => this.setState(state => ({ labelModeEnabled: !state.labelModeEnabled }));
+  toggleLabelMode = () => this.setState((state) => ({ labelModeEnabled: !state.labelModeEnabled }));
 
   render() {
     let { currentTool, labelModeEnabled } = this.state;
@@ -132,12 +121,12 @@ export class GraphWithControls extends React.Component {
       showPixelGuides,
       showTitle,
       title,
-      titlePlaceholder
+      titlePlaceholder,
     } = this.props;
     let { backgroundMarks, marks, toolbarTools } = this.props;
 
     // make sure only valid tool types are kept (string) and without duplicates
-    toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];
+    toolbarTools = uniq(toolbarTools || []).filter((tT) => !!isString(tT)) || [];
 
     // keep only the backgroundMarks that have valid types
     backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
@@ -159,7 +148,7 @@ export class GraphWithControls extends React.Component {
           disabled={!!disabled}
           draggableTools={draggableTools}
           labelModeEnabled={labelModeEnabled}
-          onChange={tool => this.changeCurrentTool(tool, tools)}
+          onChange={(tool) => this.changeCurrentTool(tool, tools)}
           onToggleLabelMode={this.toggleLabelMode}
           toolbarTools={toolbarTools}
           onChangeTools={onChangeTools}
@@ -181,7 +170,7 @@ export class GraphWithControls extends React.Component {
           )}
         </div>
 
-        <div ref={r => (this.labelNode = r)} />
+        <div ref={(r) => (this.labelNode = r)} />
 
         <Graph
           axesSettings={axesSettings}
@@ -212,11 +201,11 @@ export class GraphWithControls extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   graphWithControls: {
     display: 'flex',
     flexDirection: 'column',
-    width: 'min-content'
+    width: 'min-content',
   },
   controls: {
     display: 'flex',
@@ -229,26 +218,26 @@ const styles = theme => ({
     borderLeft: `solid 1px ${color.primaryDark()}`,
     borderRight: `solid 1px ${color.primaryDark()}`,
     '& button': {
-      fontSize: theme.typography.fontSize
-    }
+      fontSize: theme.typography.fontSize,
+    },
   },
   expansionPanel: {
     backgroundColor: color.primaryLight(),
-    width: '100%'
+    width: '100%',
   },
   summaryRoot: {
     padding: `0 ${theme.spacing.unit}px`,
-    minHeight: '32px !important'
+    minHeight: '32px !important',
   },
   summaryContent: {
-    margin: '4px 0 !important'
+    margin: '4px 0 !important',
   },
   details: {
     padding: 0,
     marginTop: theme.spacing.unit,
     display: 'flex',
-    justifyContent: 'space-between'
-  }
+    justifyContent: 'space-between',
+  },
 });
 
 export default withStyles(styles)(GraphWithControls);

package/src/graph.jsx

@@ -32,28 +32,28 @@ export const graphPropTypes = {
   range: types.DomainType,
   size: PropTypes.shape({
     width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+    height: PropTypes.number.isRequired,
   }),
   showLabels: PropTypes.bool,
   showPixelGuides: PropTypes.bool,
   showTitle: PropTypes.bool,
   title: PropTypes.string,
-  tools: PropTypes.array
+  tools: PropTypes.array,
 };
 
-const getMaskSize = size => ({
+const getMaskSize = (size) => ({
   x: -23,
   y: -23,
   width: size.width + 46,
-  height: size.height + 46
+  height: size.height + 46,
 });
 
 export const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {
-  const buildingMark = marks.filter(m => m.building)[0];
+  const buildingMark = marks.filter((m) => m.building)[0];
   let newMarks = cloneDeep(marks);
 
   if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {
-    const index = newMarks.findIndex(m => isEqual(m, buildingMark));
+    const index = newMarks.findIndex((m) => isEqual(m, buildingMark));
 
     if (index >= 0) {
       newMarks.splice(index, 1);
@@ -66,13 +66,13 @@ export const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) =
 export class Graph extends React.Component {
   static propTypes = {
     ...graphPropTypes,
-    currentTool: PropTypes.object
+    currentTool: PropTypes.object,
   };
 
   static defaultProps = {
     onChangeMarks: () => {},
     disabledLabels: false,
-    disabledTitle: false
+    disabledTitle: false,
   };
 
   state = {};
@@ -83,7 +83,7 @@ export class Graph extends React.Component {
     const { onChangeMarks, marks } = this.props;
     let newMarks = cloneDeep(marks);
 
-    const index = newMarks.findIndex(m => isEqual(m, oldMark));
+    const index = newMarks.findIndex((m) => isEqual(m, oldMark));
 
     if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {
       newMarks.splice(index, 1, newMark);
@@ -92,9 +92,9 @@ export class Graph extends React.Component {
     }
   };
 
-  completeMark = markData => {
+  completeMark = (markData) => {
     const { currentTool, marks } = this.props;
-    const buildingMark = marks.filter(m => m.building)[0];
+    const buildingMark = marks.filter((m) => m.building)[0];
 
     if (!buildingMark || !currentTool) return;
 
@@ -111,7 +111,7 @@ export class Graph extends React.Component {
       return;
     }
 
-    const index = newMarks.findIndex(m => isEqual(m, existing));
+    const index = newMarks.findIndex((m) => isEqual(m, existing));
 
     if (index >= 0) {
       newMarks.splice(index, 1, update);
@@ -122,15 +122,15 @@ export class Graph extends React.Component {
     }
   };
 
-  getComponent = mark => {
+  getComponent = (mark) => {
     if (!mark) return null;
 
-    const tool = (this.props.tools || []).find(t => t.type === mark.type);
+    const tool = (this.props.tools || []).find((t) => t.type === mark.type);
 
     return (tool && tool.Component) || null;
   };
 
-  onBgClick = point => {
+  onBgClick = (point) => {
     const { x, y } = point;
     const { labelModeEnabled, currentTool, marks } = this.props;
 
@@ -140,7 +140,7 @@ export class Graph extends React.Component {
       return;
     }
 
-    const buildingMark = marks.filter(m => m.building)[0];
+    const buildingMark = marks.filter((m) => m.building)[0];
     let updatedMark;
 
     // if the building mark has a different type, we just replace it
@@ -173,7 +173,7 @@ export class Graph extends React.Component {
       showTitle,
       titlePlaceholder,
       onChangeLabels,
-      onChangeTitle
+      onChangeTitle,
     } = this.props;
     let { marks } = this.props;
 
@@ -185,7 +185,7 @@ export class Graph extends React.Component {
 
     return (
       <Root
-        rootRef={r => (this.rootNode = r)}
+        rootRef={(r) => (this.rootNode = r)}
         disabledTitle={disabledTitle}
         disabledLabels={disabledLabels}
         labels={labels}
@@ -201,9 +201,7 @@ export class Graph extends React.Component {
       >
         <g
           transform={
-            domain && domain.padding && domain.range
-              ? `translate(${domain.padding}, ${range.padding})`
-              : undefined
+            domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined
           }
         >
           <Grid {...common} />
@@ -250,7 +248,7 @@ export class Graph extends React.Component {
             })}
 
             <foreignObject
-              ref={labelNode => (this.labelNode = labelNode)}
+              ref={(labelNode) => (this.labelNode = labelNode)}
               x="0"
               y="0"
               {...size}

package/src/grid-setup.jsx

@@ -10,17 +10,8 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
 import EditableHTML from '@pie-lib/editable-html';
 
-const GridConfig = props => {
-  const {
-    classes,
-    disabled,
-    displayedFields,
-    labelValue,
-    labelValues,
-    gridValue,
-    gridValues,
-    onChange
-  } = props;
+const GridConfig = (props) => {
+  const { classes, disabled, displayedFields, labelValue, labelValues, gridValue, gridValues, onChange } = props;
   const { labelStep = {}, step = {} } = displayedFields;
 
   return (
@@ -59,27 +50,17 @@ GridConfig.propTypes = {
   labelValues: PropTypes.array,
   gridValue: PropTypes.number,
   gridValues: PropTypes.array,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
-const AxisConfig = props => {
-  const {
-    classes,
-    disabled,
-    displayedFields,
-    displayHeader,
-    label,
-    maxValue,
-    minValue,
-    onChange,
-    type
-  } = props;
+const AxisConfig = (props) => {
+  const { classes, disabled, displayedFields, displayHeader, label, maxValue, minValue, onChange, type } = props;
   const { axisLabel = {}, min = {}, max = {} } = displayedFields;
   const activePlugins = [
     'bold',
     'italic',
     'underline',
-    'strikethrough'
+    'strikethrough',
     // 'languageCharacters'
   ];
 
@@ -119,7 +100,7 @@ const AxisConfig = props => {
         <InputContainer label={axisLabel.label || ''} className={classes.mediumTextField}>
           <EditableHTML
             className={classes.axisLabel}
-            onChange={value => onChange('axisLabel', value)}
+            onChange={(value) => onChange('axisLabel', value)}
             markup={label || ''}
             charactersLimit={5}
             activePlugins={activePlugins}
@@ -130,7 +111,7 @@ const AxisConfig = props => {
   );
 };
 
-const GridSetup = props => {
+const GridSetup = (props) => {
   const {
     classes,
     domain,
@@ -143,7 +124,7 @@ const GridSetup = props => {
     range,
     size,
     sizeConstraints,
-    standardGrid
+    standardGrid,
   } = props;
   const gridProps = { min: 2, max: 41 };
   const {
@@ -154,48 +135,47 @@ const GridSetup = props => {
     min = {},
     max = {},
     standardGridEnabled,
-    step = {}
+    step = {},
   } = displayedFields || {};
-  const displayAxisType =
-    min.enabled || max.enabled || axisLabel.enabled || step.enabled || labelStep.enabled;
+  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 => {
+  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
+        labelStep: 0,
       };
     };
 
     const updatedRange = {
       ...range,
-      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('range'))
+      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('range')),
     };
     const updatedDomain = {
       ...domain,
-      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('domain'))
+      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('domain')),
     };
 
     onChange({ includeAxes, range: updatedRange, domain: updatedDomain });
   };
 
-  const onStandardGridChanged = value => {
+  const onStandardGridChanged = (value) => {
     onChange({
       standardGrid: value,
       range: {
         ...domain,
-        axisLabel: range.axisLabel
+        axisLabel: range.axisLabel,
       },
       graph: {
         ...size,
-        height: size.width
-      }
+        height: size.width,
+      },
     });
   };
 
@@ -254,8 +234,7 @@ const GridSetup = props => {
       </div>
       {(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
+          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) && (
@@ -282,9 +261,7 @@ const GridSetup = props => {
         </div>
       )}
       {labelStep.enabled && (
-        <Typography className={classes.text}>
-          For unnumbered gridlines, enter a label interval of 0
-        </Typography>
+        <Typography className={classes.text}>For unnumbered gridlines, enter a label interval of 0</Typography>
       )}
     </React.Fragment>
   );
@@ -322,11 +299,7 @@ const GridSetup = props => {
         <ExpansionPanelDetails>
           <div className={classes.content}>
             {includeAxesEnabled && (
-              <Toggle
-                label="Include axes and labels?"
-                toggle={onIncludeAxes}
-                checked={includeAxes}
-              />
+              <Toggle label="Include axes and labels?" toggle={onIncludeAxes} checked={includeAxes} />
             )}
             {standardGridEnabled && (
               <Toggle
@@ -386,55 +359,55 @@ GridSetup.propTypes = {
   range: PropTypes.object,
   size: PropTypes.object,
   sizeConstraints: PropTypes.object,
-  standardGrid: PropTypes.bool
+  standardGrid: PropTypes.bool,
 };
 
-const styles = theme => ({
+const styles = (theme) => ({
   wrapper: {
-    width: '450px'
+    width: '450px',
   },
   content: {
     display: 'flex',
     flexDirection: 'column',
-    width: '100%'
+    width: '100%',
   },
   columnView: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   rowView: {
     display: 'flex',
     justifyContent: 'space-around',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   textField: {
     width: '130px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
   },
   mediumTextField: {
     width: '160px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
   },
   largeTextField: {
     width: '230px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
   },
   text: {
     fontStyle: 'italic',
-    margin: `${theme.spacing.unit}px 0`
+    margin: `${theme.spacing.unit}px 0`,
   },
   dimensions: {
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   disabled: {
-    color: color.disabled()
+    color: color.disabled(),
   },
   axisLabel: {
-    paddingTop: theme.spacing.unit * 2
-  }
+    paddingTop: theme.spacing.unit * 2,
+  },
 });
 
 export default withStyles(styles)(GridSetup);