@pie-lib/charting 4.5.18 → 5.1.1

package/src/chart-setup.jsx

@@ -0,0 +1,160 @@
+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 } = props;
+  const { range } = model;
+  const size = model.graph;
+
+  const rangeProps = chartType =>
+    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) => {
+    const parsedValue = parseInt(value);
+
+    range[key] = parsedValue;
+
+    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

@@ -47,8 +47,8 @@ export class Chart extends React.Component {
     title: PropTypes.string,
     onDataChange: PropTypes.func,
     addCategoryEnabled: PropTypes.bool,
-    editCategoryEnabled: PropTypes.bool,
     categoryDefaultLabel: PropTypes.string,
+    defineChart: PropTypes.bool,
     theme: PropTypes.object
   };
 
@@ -127,13 +127,12 @@ export class Chart extends React.Component {
   };
 
   getFilteredCategories = () => {
-    const { data, editCategoryEnabled, addCategoryEnabled } = this.props;
+    const { data, defineChart } = this.props;
 
     return data
       ? data.map(d => ({
           ...d,
-          editable: !d.initial || (d.initial && editCategoryEnabled),
-          deletable: !d.initial || (d.initial && addCategoryEnabled)
+          deletable: defineChart || d.deletable
         }))
       : [];
   };
@@ -150,6 +149,7 @@ export class Chart extends React.Component {
       theme
     } = this.props;
     let { chartType } = this.props;
+
     const defineChart = this.props.defineChart || false;
     const { width, height } = size || {};
 
@@ -177,9 +177,10 @@ export class Chart extends React.Component {
         () => this.rootNode
       )
     };
+
     log('[render] common:', common);
 
-    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 50 };
+    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 80 };
     const { scale } = common.graphProps;
     const xBand = dataToXBand(scale.x, categories, width, chartType);
 
@@ -190,7 +191,7 @@ export class Chart extends React.Component {
     const bandWidth = xBand.bandwidth();
     // for chartType "line", bandWidth will be 0, so we have to calculate it
     const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
-    const increaseHeight = defineChart ? 50 : 0;
+    const increaseHeight = defineChart ? 80 : 0;
 
     // if there are many categories, we have to rotate their names in order to fit
     // and we have to add extra value on top of some items
@@ -231,6 +232,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}`}