@pie-lib/graphing 4.0.5-next.31 → 4.0.5-next.36

package/src/grid-setup.jsx

@@ -0,0 +1,432 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { color, InputContainer } from '@pie-lib/render-ui';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
+import EditableHTML from '@pie-lib/editable-html-tip-tap';
+import { styled } from '@mui/material/styles';
+
+const Wrapper = styled('div')(() => ({
+  width: '450px',
+}));
+
+const Content = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+}));
+
+const ColumnView = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+}));
+
+const RowView = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignItems: 'center',
+}));
+
+const TextFieldSmall = styled('div')(({ theme }) => ({
+  width: '130px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+}));
+
+const TextFieldMedium = styled('div')(({ theme }) => ({
+  width: '160px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+  '& .MuiFormControl-root': {
+    width: '100%',
+  },
+}));
+
+const TextFieldLarge = styled('div')(({ theme }) => ({
+  width: '230px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+  '& .MuiFormControl-root': {
+    width: '100%',
+  },
+}));
+
+const ItalicText = styled(Typography)(({ theme }) => ({
+  fontStyle: 'italic',
+  margin: `${theme.spacing(1)} 0`,
+}));
+
+const Dimensions = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}));
+
+const DisabledText = styled(Typography)(() => ({
+  color: color.disabled(),
+}));
+
+const AxisLabel = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+}));
+
+const GridConfig = (props) => {
+  const { disabled, displayedFields, labelValue, labelValues, gridValue, gridValues, onChange } = props;
+  const { labelStep = {}, step = {} } = displayedFields;
+
+  return (
+    <ColumnView>
+      {step && step.enabled && (
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={step.label || ''}
+            value={gridValue}
+            customValues={gridValues}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('step', v)}
+          />
+        </TextFieldMedium>
+      )}
+      {labelStep && labelStep.enabled && (
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={labelStep.label || ''}
+            value={labelValue}
+            customValues={labelValues}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('labelStep', v)}
+          />
+        </TextFieldMedium>
+      )}
+    </ColumnView>
+  );
+};
+
+GridConfig.propTypes = {
+  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 { disabled, displayedFields, displayHeader, label, maxValue, minValue, onChange, type } = props;
+  const { axisLabel = {}, min = {}, max = {} } = displayedFields;
+  const activePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
+
+  const onKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      // prevent adding new lines - cancelling event
+      return true;
+    }
+
+    return false;
+  };
+
+  return (
+    <ColumnView>
+      {displayHeader && (
+        <Typography variant="subtitle2">
+          <i>{type === 'domain' ? 'x' : 'y'}</i>-axis
+        </Typography>
+      )}
+      {min && min.enabled && (
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={min.label || ''}
+            value={minValue}
+            min={-10000}
+            max={maxValue - 0.05}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('min', v)}
+          />
+        </TextFieldMedium>
+      )}
+      {max && max.enabled && (
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={max.label || ''}
+            value={maxValue}
+            min={minValue + 0.05}
+            max={10000}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('max', v)}
+          />
+        </TextFieldMedium>
+      )}
+      {axisLabel && axisLabel.enabled && (
+        <TextFieldMedium>
+          <InputContainer label={axisLabel.label || ''}>
+            <AxisLabel>
+              <EditableHTML
+                onChange={(value) => onChange('axisLabel', value)}
+                markup={label || ''}
+                charactersLimit={5}
+                onKeyDown={onKeyDown}
+                activePlugins={activePlugins}
+              />
+            </AxisLabel>
+          </InputContainer>
+        </TextFieldMedium>
+      )}
+    </ColumnView>
+  );
+};
+
+AxisConfig.propTypes = {
+  disabled: PropTypes.bool,
+  displayedFields: PropTypes.object,
+  displayHeader: PropTypes.bool,
+  label: PropTypes.string,
+  maxValue: PropTypes.number,
+  minValue: PropTypes.number,
+  type: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+const GridSetup = (props) => {
+  const {
+    domain,
+    displayedFields = {},
+    gridValues = {},
+    includeAxes,
+    labelValues = {},
+    onChange,
+    onChangeView,
+    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) => {
+      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 = (
+    <>
+      <RowView>
+        <AxisConfig
+          displayedFields={axisConfigFields}
+          displayHeader={displayAxisType}
+          type="domain"
+          minValue={domain.min}
+          maxValue={domain.max}
+          label={domain.axisLabel}
+          includeAxes={includeAxes}
+          onChange={onDomainChanged}
+        />
+        <AxisConfig
+          displayedFields={axisConfigFields}
+          displayHeader={displayAxisType}
+          type="range"
+          minValue={range.min}
+          maxValue={range.max}
+          label={range.axisLabel}
+          disabled={standardGrid}
+          includeAxes={includeAxes}
+          onChange={onRangeChanged}
+        />
+      </RowView>
+      {(min.enabled || max.enabled) && (
+        <ItalicText>
+          If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value
+        </ItalicText>
+      )}
+      {(step.enabled || labelStep.enabled) && (
+        <RowView>
+          <GridConfig
+            displayedFields={gridConfigFields}
+            gridValue={domain.step}
+            labelValue={domain.labelStep}
+            gridValues={gridValues.domain || []}
+            labelValues={labelValues.domain || []}
+            onChange={onDomainChanged}
+          />
+          <GridConfig
+            disabled={standardGrid}
+            displayedFields={gridConfigFields}
+            gridValue={range.step}
+            labelValue={range.labelStep}
+            gridValues={gridValues.range || []}
+            labelValues={labelValues.range || []}
+            onChange={onRangeChanged}
+          />
+        </RowView>
+      )}
+      {labelStep.enabled && <ItalicText>For unnumbered gridlines, enter a label interval of 0</ItalicText>}
+    </>
+  );
+
+  const gridlinesConfig = max.enabled ? (
+    <ColumnView>
+      <TextFieldLarge>
+        <NumberTextFieldCustom
+          label="Number of Vertical Gridlines"
+          value={domain.max}
+          min={!includeAxes && gridProps.min}
+          max={!includeAxes && gridProps.max}
+          variant="outlined"
+          onChange={(e, v) => onDomainChanged('max', v)}
+        />
+      </TextFieldLarge>
+      <TextFieldLarge>
+        <NumberTextFieldCustom
+          label="Number of Horizontal Gridlines"
+          value={range.max}
+          min={!includeAxes && gridProps.min}
+          max={!includeAxes && gridProps.max}
+          variant="outlined"
+          disabled={standardGrid}
+          onChange={(e, v) => onRangeChanged('max', v)}
+        />
+      </TextFieldLarge>
+    </ColumnView>
+  ) : null;
+
+  return (
+    <Wrapper>
+      <Accordion onChange={onChangeView} TransitionProps={{ timeout: { enter: 225, exit: 195 } }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography variant="subtitle1">Customize Grid Setup</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Content>
+            {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 && (
+              <Dimensions>
+                <div>
+                  <Typography>Dimensions(px)</Typography>
+                  <DisabledText>
+                    Min {sizeConstraints.min}, Max {sizeConstraints.max}
+                  </DisabledText>
+                </div>
+                <TextFieldSmall>
+                  <NumberTextFieldCustom
+                    label="Width"
+                    value={size.width}
+                    min={sizeConstraints.min}
+                    max={sizeConstraints.max}
+                    step={sizeConstraints.step}
+                    variant="outlined"
+                    onChange={(e, v) => onSizeChanged('width', v)}
+                  />
+                </TextFieldSmall>
+                <TextFieldSmall>
+                  <NumberTextFieldCustom
+                    label="Height"
+                    value={size.height}
+                    min={sizeConstraints.min}
+                    max={sizeConstraints.max}
+                    step={sizeConstraints.step}
+                    variant="outlined"
+                    disabled={standardGrid}
+                    onChange={(e, v) => onSizeChanged('height', v)}
+                  />
+                </TextFieldSmall>
+              </Dimensions>
+            )}
+          </Content>
+        </AccordionDetails>
+      </Accordion>
+    </Wrapper>
+  );
+};
+
+GridSetup.propTypes = {
+  domain: PropTypes.object,
+  displayedFields: PropTypes.object,
+  gridValues: PropTypes.object,
+  includeAxes: PropTypes.bool,
+  labelValues: PropTypes.object,
+  onChange: PropTypes.func,
+  onChangeView: PropTypes.func,
+  range: PropTypes.object,
+  size: PropTypes.object,
+  sizeConstraints: PropTypes.object,
+  standardGrid: PropTypes.bool,
+};
+
+export default GridSetup;

package/src/grid.jsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as vx from '@visx/grid';
+import { types } from '@pie-lib/plot';
+import { getTickValues } from './utils';
+
+export class Grid extends React.Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    disabledAdditionalGrid: PropTypes.bool,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  getAdditionalGridProps = (rowTickValues, columnTickValues) => {
+    const {
+      graphProps: {
+        scale,
+        size: { width, height },
+        domain,
+        range,
+      },
+    } = this.props;
+    const rowTickLabelValues = getTickValues({
+      ...range,
+      step: range.labelStep,
+    }).filter((value) => rowTickValues.includes(value));
+    const columnTickLabelValues = getTickValues({
+      ...domain,
+      step: domain.labelStep,
+    }).filter((value) => columnTickValues.includes(value));
+
+    const minValueLength =
+      (rowTickLabelValues.length &&
+        Math.min(...rowTickLabelValues)
+          .toString()
+          .replace(/[.-]/g, '').length) ||
+      1;
+    const maxValueLength =
+      (rowTickLabelValues.length &&
+        Math.max(...rowTickLabelValues)
+          .toString()
+          .replace(/[.-]/g, '').length) ||
+      1;
+
+    const rowLabelLength = Math.max(minValueLength, maxValueLength) * 9 + 22;
+    const horizontalDistanceToZero = scale.x(0);
+    const verticalDistanceToZero = scale.y(0);
+    const columnLabelLength = 28;
+    const rowStrokeDasharray = `${horizontalDistanceToZero - rowLabelLength} ${rowLabelLength} ${width}`;
+    const columnStrokeDasharray = `${verticalDistanceToZero} ${columnLabelLength} ${height}`;
+
+    const displayAdditionalGrid =
+      domain.labelStep > 0 &&
+      range.labelStep > 0 &&
+      rowTickLabelValues &&
+      columnTickLabelValues &&
+      rowTickLabelValues.length > 1 &&
+      columnTickLabelValues.length > 1 &&
+      (rowTickLabelValues.length !== rowTickValues.length || columnTickLabelValues.length !== columnTickValues.length);
+
+    const filteredColumnValues = columnTickLabelValues.filter(
+      (value) => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength,
+    );
+    const filteredRowValues = rowTickLabelValues.filter(
+      (value) => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength,
+    );
+
+    return {
+      rowTickLabelValues: filteredRowValues,
+      columnTickLabelValues: filteredColumnValues,
+      rowStrokeDasharray,
+      columnStrokeDasharray,
+      displayAdditionalGrid,
+    };
+  };
+
+  render() {
+    const { graphProps } = this.props;
+    const {
+      scale,
+      size: { height, width },
+      domain,
+      range,
+    } = graphProps;
+    const rowTickValues = getTickValues(range);
+    const columnTickValues = getTickValues(domain);
+    const {
+      rowTickLabelValues,
+      columnTickLabelValues,
+      rowStrokeDasharray,
+      columnStrokeDasharray,
+      displayAdditionalGrid,
+    } = this.getAdditionalGridProps(rowTickValues, columnTickValues);
+
+    const additionalGridStroke =
+      domain.labelStep * 2 === domain.step || range.labelStep * 2 === range.step ? '#9FA8DA' : '#7985CB';
+
+    return (
+      <>
+        <vx.Grid
+          innerRef={(r) => (this.grid = r)}
+          xScale={scale.x}
+          yScale={scale.y}
+          width={width}
+          height={height}
+          stroke="#E1E6EC"
+          rowTickValues={rowTickValues}
+          columnTickValues={columnTickValues}
+        />
+        {displayAdditionalGrid && (
+          <>
+            <vx.GridRows
+              scale={scale.y}
+              width={width}
+              tickValues={rowTickLabelValues}
+              stroke={additionalGridStroke}
+              strokeDasharray={rowStrokeDasharray}
+            />
+            <vx.GridColumns
+              scale={scale.x}
+              height={height}
+              tickValues={columnTickLabelValues}
+              stroke={additionalGridStroke}
+              strokeDasharray={columnStrokeDasharray}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+}
+
+export default Grid;

package/src/index.js

@@ -0,0 +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';
+import KeyLegend from './key-legend';
+export { Graph, GraphContainer, GridSetup, ToolMenu, tools, KeyLegend };