@pie-lib/charting 5.0.0 → 5.1.2

package/src/chart-setup.jsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { color } from '@pie-lib/render-ui';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import ChartType from './chart-type';
+import { NumberTextFieldCustom } from '@pie-lib/config-ui';
+
+const ConfigureChartPanel = props => {
+  const { classes, model, onChange, gridValues = {}, labelValues = {} } = props;
+  const { range } = model;
+  const size = model.graph;
+
+  const gridOptions =
+    gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };
+  const labelOptions =
+    labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };
+
+  const stepConfig = (
+    <div className={classes.rowView}>
+      <NumberTextFieldCustom
+        className={classes.mediumTextField}
+        label="Grid Interval"
+        value={range.step}
+        variant="outlined"
+        onChange={(e, v) => onRangeChanged('step', v)}
+        {...gridOptions}
+      />
+      <NumberTextFieldCustom
+        className={classes.mediumTextField}
+        label={'Label Interval'}
+        value={range.labelStep}
+        variant={'outlined'}
+        onChange={(e, v) => onRangeChanged('labelStep', v)}
+        {...labelOptions}
+      />
+    </div>
+  );
+
+  const rangeProps = chartType => {
+    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
+  };
+
+  const onSizeChanged = (key, value) => {
+    const graph = { ...size, [key]: value };
+
+    onChange({ ...model, graph });
+  };
+
+  const onRangeChanged = (key, value) => {
+    range[key] = value;
+
+    onChange({ ...model, range });
+  };
+
+  const onChartTypeChange = chartType => {
+    if (chartType.includes('Plot')) {
+      rangeProps.min = 3;
+      rangeProps.max = 10;
+
+      if (range.max > 10 || range.max < 3) {
+        range.max = 10;
+      }
+
+      range.step = 1;
+      range.labelStep = 1;
+
+      onChange({ ...model, range, chartType });
+
+      return;
+    }
+
+    onChange({ ...model, chartType });
+  };
+
+  return (
+    <div className={classes.wrapper}>
+      <Typography variant={'subtitle1'}>Configure Chart</Typography>
+      <div className={classes.content}>
+        <div className={classes.rowView}>
+          <ChartType value={model.chartType} onChange={e => onChartTypeChange(e.target.value)} />
+          <NumberTextFieldCustom
+            className={classes.mediumTextField}
+            label="Max Value"
+            value={range.max}
+            min={rangeProps(model.chartType).min}
+            max={rangeProps(model.chartType).max}
+            variant="outlined"
+            onChange={(e, v) => onRangeChanged('max', v)}
+          />
+        </div>
+        {!model.chartType.includes('Plot') && stepConfig}
+        <div className={classes.dimensions}>
+          <div>
+            <Typography>Dimensions(px)</Typography>
+          </div>
+          <div className={classes.columnView}>
+            <NumberTextFieldCustom
+              className={classes.textField}
+              label={'Width'}
+              value={size.width}
+              min={50}
+              max={700}
+              variant={'outlined'}
+              onChange={(e, v) => onSizeChanged('width', v)}
+            />
+            <Typography className={classes.disabled}>Min 50, Max 700</Typography>
+          </div>
+          <div className={classes.columnView}>
+            <NumberTextFieldCustom
+              className={classes.textField}
+              label={'Height'}
+              value={size.height}
+              min={400}
+              max={700}
+              variant={'outlined'}
+              onChange={(e, v) => onSizeChanged('height', v)}
+            />
+            <Typography className={classes.disabled}>Min 400, Max 700</Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ConfigureChartPanel.propTypes = {
+  classes: PropTypes.object,
+  sizeConstraints: PropTypes.object,
+  domain: PropTypes.object,
+  gridIntervalValues: PropTypes.object,
+  includeAxes: PropTypes.bool,
+  labelIntervalValues: PropTypes.object,
+  onChange: PropTypes.function,
+  range: PropTypes.object,
+  size: PropTypes.object
+};
+
+const styles = theme => ({
+  wrapper: {
+    width: '450px'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    marginTop: '24px'
+  },
+  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`
+  },
+  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`
+  },
+  text: {
+    fontStyle: 'italic',
+    margin: `${theme.spacing.unit}px 0`
+  },
+  dimensions: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: '24px 0px'
+  },
+  disabled: {
+    color: color.disabled()
+  }
+});
+
+export default withStyles(styles)(ConfigureChartPanel);

package/src/chart-type.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+
+const ChartType = withStyles(theme => ({
+  chartType: {
+    width: '160px'
+  },
+  chartTypeLabel: {
+    backgroundColor: 'transparent'
+  }
+}))(({ onChange, value, classes }) => (
+  <div className={classes.chartType}>
+    <FormControl variant={'outlined'} className={classes.chartType}>
+      <InputLabel htmlFor="type-helper" className={classes.chartTypeLabel}>
+        ChartType
+      </InputLabel>
+
+      <Select
+        value={value}
+        onChange={onChange}
+        input={<OutlinedInput name="type" id="type-helper" />}
+      >
+        <MenuItem value={'histogram'}>Histogram</MenuItem>
+        <MenuItem value={'bar'}>Bar</MenuItem>
+        <MenuItem value={'lineDot'}>Line Dot</MenuItem>
+        <MenuItem value={'lineCross'}>Line Cross</MenuItem>
+        <MenuItem value={'dotPlot'}>Dot Plot</MenuItem>
+        <MenuItem value={'linePlot'}>Line Plot</MenuItem>
+      </Select>
+    </FormControl>
+  </div>
+));
+
+export default ChartType;

package/src/chart.jsx

@@ -48,6 +48,7 @@ export class Chart extends React.Component {
     onDataChange: PropTypes.func,
     addCategoryEnabled: PropTypes.bool,
     categoryDefaultLabel: PropTypes.string,
+    defineChart: PropTypes.bool,
     theme: PropTypes.object
   };
 
@@ -155,14 +156,7 @@ export class Chart extends React.Component {
     const { ChartComponent } = this.getChart();
     const categories = this.getFilteredCategories();
 
-    const labelFontSize = (theme && theme.typography && theme.typography.fontSize) || 14;
-    const correctValues = getDomainAndRangeByChartType(
-      domain,
-      range,
-      size,
-      chartType,
-      labelFontSize
-    );
+    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);
 
     const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(
       correctValues.range,
@@ -231,6 +225,7 @@ export class Chart extends React.Component {
             <ChartComponent
               {...common}
               data={categories}
+              defineChart={defineChart}
               onChange={this.changeData}
               onChangeCategory={this.changeCategory}
             />

package/src/index.js

@@ -1,3 +1,6 @@
 import Chart from './chart';
 import chartTypes from './chart-types';
-export { Chart, chartTypes };
+import ConfigureChartPanel from './chart-setup';
+import ChartType from './chart-type';
+
+export { Chart, chartTypes, ChartType, ConfigureChartPanel };

package/src/line/common/drag-handle.jsx

@@ -34,6 +34,7 @@ class RawDragHandle extends React.Component {
       correctness,
       ...rest
     } = this.props;
+
     const { scale } = graphProps;
     return (
       <CustomDraggableComponent
@@ -42,7 +43,7 @@ class RawDragHandle extends React.Component {
         y={y}
         classes={classes}
         className={classNames(className, !interactive && 'non-interactive')}
-        correctness={interactive && correctness}
+        correctness={correctness}
         {...rest}
       />
     );

package/src/line/common/line.jsx

@@ -32,6 +32,7 @@ export class RawLine extends React.Component {
     xBand: PropTypes.func,
     index: PropTypes.number.isRequired,
     graphProps: types.GraphPropsType.isRequired,
+    defineChart: PropTypes.bool,
     data: PropTypes.arrayOf(
       PropTypes.shape({
         label: PropTypes.string,
@@ -77,7 +78,7 @@ export class RawLine extends React.Component {
   };
 
   render() {
-    const { graphProps, data, classes, CustomDraggableComponent } = this.props;
+    const { graphProps, data, classes, CustomDraggableComponent, defineChart } = this.props;
     const { line: lineState, dragging } = this.state;
     const { scale } = graphProps;
     const lineToUse = dragging ? lineState : getData(data, graphProps.domain);
@@ -93,14 +94,15 @@ export class RawLine extends React.Component {
         {lineToUse &&
           lineToUse.map((point, i) => {
             const r = 6;
-            const Component = point.interactive ? DraggableHandle : DragHandle;
+            const enableDraggable = defineChart || point.interactive;
+            const Component = enableDraggable ? DraggableHandle : DragHandle;
 
             return (
               <Component
                 key={`point-${point.x}-${i}`}
                 x={point.x}
                 y={point.dragValue !== undefined ? point.dragValue : point.y}
-                interactive={point.interactive}
+                interactive={enableDraggable}
                 r={r}
                 onDragStart={() => this.setState({ dragging: true })}
                 onDrag={v =>

package/src/plot/common/plot.jsx

@@ -67,6 +67,7 @@ export class RawPlot extends React.Component {
       interactive,
       correctness
     } = this.props;
+
     const { scale, range, size } = graphProps;
     const { max } = range || {};
     const { dragValue } = this.state;
@@ -137,11 +138,12 @@ export class Plot extends React.Component {
     onChangeCategory: PropTypes.func,
     xBand: PropTypes.func,
     graphProps: types.GraphPropsType.isRequired,
+    defineChart: PropTypes.bool,
     CustomBarElement: PropTypes.func
   };
 
   render() {
-    const { data, graphProps, xBand, CustomBarElement, onChangeCategory } = this.props;
+    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart } = this.props;
 
     return (
       <Group>
@@ -149,7 +151,7 @@ export class Plot extends React.Component {
           <Bar
             value={d.value}
             label={d.label}
-            interactive={d.interactive}
+            interactive={defineChart || d.interactive}
             xBand={xBand}
             index={index}
             key={`bar-${d.label}-${d.value}-${index}`}

package/src/utils.js

@@ -50,53 +50,7 @@ export const getTickValues = (prop = {}) => {
   return tickValues;
 };
 
-export const customLabelStep = (rangeMax, size, labelFontSize) => {
-  const ceilMax = Math.ceil(rangeMax);
-  const segmentLength = size.height / ceilMax;
-  const ticksToFitInOneSegment = 2;
-
-  // how many ticksWidth fit in a segment
-  const tickWidthPerSegment = segmentLength / labelFontSize;
-  const rawLabelStep = ticksToFitInOneSegment / tickWidthPerSegment;
-  const roundedStep = Math.ceil((rawLabelStep * 10) / 10);
-
-  let labelStep;
-
-  if (rawLabelStep > 0.15) {
-    labelStep = roundedStep;
-  } else if (rawLabelStep < 0.05) {
-    labelStep = 0.1;
-  } else {
-    labelStep = 0.5;
-  }
-
-  return labelStep;
-};
-
-export const crowdedTicks = (rangeMax, customLabelStep, size, labelFontSize) => {
-  const ceilMax = Math.ceil(rangeMax);
-
-  const numberOfSegments = ceilMax * customLabelStep;
-
-  return size.height / numberOfSegments < labelFontSize && size.height / numberOfSegments > 0.5;
-};
-
-// multiply values with 10^number_of_decimals if needed because modulo function(%) is only defined for integers
-const modulo = (a, b) => {
-  if (Number.isInteger(b)) {
-    return a % b;
-  }
-
-  const decimals = b
-    .toString()
-    .split('.')
-    .pop().length;
-  const aux = Math.pow(10, decimals);
-
-  return (a * aux) % (b * aux);
-};
-
-export const getDomainAndRangeByChartType = (domain, range, size, chartType, labelFontSize) => {
+export const getDomainAndRangeByChartType = (domain, range, chartType) => {
   let { step, labelStep, min, max } = range || {};
 
   if (!min) {
@@ -107,36 +61,11 @@ export const getDomainAndRangeByChartType = (domain, range, size, chartType, lab
     max = range.min + 1;
   }
 
-  if (labelStep && !step) {
-    step = labelStep;
+  if (!step) {
+    step = labelStep || 1;
   }
   if (!labelStep || (isNaN(labelStep) && step)) {
-    let customLabelStep = step;
-    let crowded = crowdedTicks(max, customLabelStep, size, labelFontSize);
-
-    if (crowded) {
-      customLabelStep = customLabelStep * 2;
-    }
-
-    labelStep = customLabelStep;
-  }
-
-  if (!step || (isNaN(step) && !labelStep) || isNaN(labelStep)) {
-    labelStep = customLabelStep(max, size, labelFontSize);
-
-    if (labelStep <= 1) {
-      step = labelStep;
-    } else if (labelStep <= 4) {
-      step = 1;
-    } else if (labelStep > 4 && labelStep < 10) {
-      step = labelStep / 2;
-    } else {
-      step = labelStep / 3;
-    }
-  }
-
-  if (modulo(max, step) !== 0) {
-    max = max + step;
+    labelStep = step || 1;
   }
 
   range.max = max;