@pie-lib/charting 4.5.11-next.413 → 4.5.11-next.423

package/lib/chart-setup.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _styles = require("@material-ui/core/styles");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _chartType = _interopRequireDefault(require("./chart-type"));
+
+var _configUi = require("@pie-lib/config-ui");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ConfigureChartPanel = function ConfigureChartPanel(props) {
+  var classes = props.classes,
+      model = props.model,
+      onChange = props.onChange;
+  var range = model.range;
+  var size = model.graph;
+
+  var onSizeChanged = function onSizeChanged(key, value) {
+    var graph = _objectSpread(_objectSpread({}, size), {}, _defineProperty({}, key, value));
+
+    onChange(_objectSpread(_objectSpread({}, model), {}, {
+      graph: graph
+    }));
+  };
+
+  var onRangeChanged = function onRangeChanged(key, value) {
+    var parsedValue = parseInt(value);
+    range[key] = parsedValue;
+    onChange(_objectSpread(_objectSpread({}, model), {}, {
+      range: range
+    }));
+  };
+
+  var onChartTypeChange = function onChartTypeChange(chartType) {
+    return onChange(_objectSpread(_objectSpread({}, model), {}, {
+      chartType: chartType
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.wrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: 'subtitle1'
+  }, "Configure Chart"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.content
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.rowView
+  }, /*#__PURE__*/_react["default"].createElement(_chartType["default"], {
+    value: model.chartType,
+    onChange: function onChange(e) {
+      return onChartTypeChange(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: "Max Value",
+    value: range.max,
+    min: 0,
+    max: 10000,
+    variant: "outlined",
+    onChange: function onChange(e, v) {
+      return onRangeChanged('max', v);
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.rowView
+  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: "Grid Interval",
+    value: range.step,
+    min: 0,
+    max: 10000,
+    variant: "outlined",
+    onChange: function onChange(e, v) {
+      return onRangeChanged('step', v);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: 'Label Interval',
+    value: range.labelStep,
+    min: 0,
+    max: 10000,
+    variant: 'outlined',
+    onChange: function onChange(e, v) {
+      return onRangeChanged('labelStep', v);
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.dimensions
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Dimensions(px)")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.columnView
+  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
+    className: classes.textField,
+    label: 'Width',
+    value: size.width,
+    min: 50,
+    max: 700,
+    variant: 'outlined',
+    onChange: function onChange(e, v) {
+      return onSizeChanged('width', v);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: classes.disabled
+  }, "Min 50, Max 700")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.columnView
+  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
+    className: classes.textField,
+    label: 'Height',
+    value: size.height,
+    min: 400,
+    max: 700,
+    variant: 'outlined',
+    onChange: function onChange(e, v) {
+      return onSizeChanged('height', v);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: classes.disabled
+  }, "Min 400, Max 700")))));
+};
+
+ConfigureChartPanel.propTypes = {
+  classes: _propTypes["default"].object,
+  sizeConstraints: _propTypes["default"].object,
+  domain: _propTypes["default"].object,
+  gridIntervalValues: _propTypes["default"].object,
+  includeAxes: _propTypes["default"].bool,
+  labelIntervalValues: _propTypes["default"].object,
+  onChange: _propTypes["default"]["function"],
+  range: _propTypes["default"].object,
+  size: _propTypes["default"].object
+};
+
+var styles = function styles(theme) {
+  return {
+    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: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
+    },
+    mediumTextField: {
+      width: '160px',
+      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
+    },
+    largeTextField: {
+      width: '230px',
+      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
+    },
+    text: {
+      fontStyle: 'italic',
+      margin: "".concat(theme.spacing.unit, "px 0")
+    },
+    dimensions: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      margin: '24px 0px'
+    },
+    disabled: {
+      color: _renderUi.color.disabled()
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(ConfigureChartPanel);
+
+exports["default"] = _default;
+//# sourceMappingURL=chart-setup.js.map

package/lib/chart-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-setup.js","names":["ConfigureChartPanel","props","classes","model","onChange","range","size","graph","onSizeChanged","key","value","onRangeChanged","parsedValue","parseInt","onChartTypeChange","chartType","wrapper","content","rowView","e","target","mediumTextField","max","v","step","labelStep","dimensions","columnView","textField","width","disabled","height","propTypes","PropTypes","object","sizeConstraints","domain","gridIntervalValues","includeAxes","bool","labelIntervalValues","styles","theme","display","flexDirection","marginTop","alignItems","justifyContent","margin","spacing","unit","largeTextField","text","fontStyle","color","withStyles"],"sources":["../src/chart-setup.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport ChartType from './chart-type';\nimport { NumberTextFieldCustom } from '@pie-lib/config-ui';\n\nconst ConfigureChartPanel = props => {\n  const { classes, model, onChange } = props;\n  const { range } = model;\n  const size = model.graph;\n\n  const onSizeChanged = (key, value) => {\n    const graph = { ...size, [key]: value };\n\n    onChange({ ...model, graph });\n  };\n\n  const onRangeChanged = (key, value) => {\n    const parsedValue = parseInt(value);\n\n    range[key] = parsedValue;\n\n    onChange({ ...model, range });\n  };\n\n  const onChartTypeChange = chartType => onChange({ ...model, chartType });\n\n  return (\n    <div className={classes.wrapper}>\n      <Typography variant={'subtitle1'}>Configure Chart</Typography>\n      <div className={classes.content}>\n        <div className={classes.rowView}>\n          <ChartType value={model.chartType} onChange={e => onChartTypeChange(e.target.value)} />\n          <NumberTextFieldCustom\n            className={classes.mediumTextField}\n            label=\"Max Value\"\n            value={range.max}\n            min={0}\n            max={10000}\n            variant=\"outlined\"\n            onChange={(e, v) => onRangeChanged('max', v)}\n          />\n        </div>\n        <div className={classes.rowView}>\n          <NumberTextFieldCustom\n            className={classes.mediumTextField}\n            label=\"Grid Interval\"\n            value={range.step}\n            min={0}\n            max={10000}\n            variant=\"outlined\"\n            onChange={(e, v) => onRangeChanged('step', v)}\n          />\n          <NumberTextFieldCustom\n            className={classes.mediumTextField}\n            label={'Label Interval'}\n            value={range.labelStep}\n            min={0}\n            max={10000}\n            variant={'outlined'}\n            onChange={(e, v) => onRangeChanged('labelStep', v)}\n          />\n        </div>\n        <div className={classes.dimensions}>\n          <div>\n            <Typography>Dimensions(px)</Typography>\n          </div>\n          <div className={classes.columnView}>\n            <NumberTextFieldCustom\n              className={classes.textField}\n              label={'Width'}\n              value={size.width}\n              min={50}\n              max={700}\n              variant={'outlined'}\n              onChange={(e, v) => onSizeChanged('width', v)}\n            />\n            <Typography className={classes.disabled}>Min 50, Max 700</Typography>\n          </div>\n          <div className={classes.columnView}>\n            <NumberTextFieldCustom\n              className={classes.textField}\n              label={'Height'}\n              value={size.height}\n              min={400}\n              max={700}\n              variant={'outlined'}\n              onChange={(e, v) => onSizeChanged('height', v)}\n            />\n            <Typography className={classes.disabled}>Min 400, Max 700</Typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nConfigureChartPanel.propTypes = {\n  classes: PropTypes.object,\n  sizeConstraints: PropTypes.object,\n  domain: PropTypes.object,\n  gridIntervalValues: PropTypes.object,\n  includeAxes: PropTypes.bool,\n  labelIntervalValues: PropTypes.object,\n  onChange: PropTypes.function,\n  range: PropTypes.object,\n  size: PropTypes.object\n};\n\nconst styles = theme => ({\n  wrapper: {\n    width: '450px'\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    marginTop: '24px'\n  },\n  columnView: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  rowView: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    alignItems: 'center'\n  },\n  textField: {\n    width: '130px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  mediumTextField: {\n    width: '160px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  largeTextField: {\n    width: '230px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  text: {\n    fontStyle: 'italic',\n    margin: `${theme.spacing.unit}px 0`\n  },\n  dimensions: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    margin: '24px 0px'\n  },\n  disabled: {\n    color: color.disabled()\n  }\n});\n\nexport default withStyles(styles)(ConfigureChartPanel);\n"],"mappings":"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"}

package/lib/chart-type.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+
+var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ChartType = (0, _styles.withStyles)(function (theme) {
+  return {
+    chartType: {
+      width: '160px'
+    },
+    chartTypeLabel: {
+      backgroundColor: 'transparent'
+    }
+  };
+})(function (_ref) {
+  var onChange = _ref.onChange,
+      value = _ref.value,
+      classes = _ref.classes;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.chartType
+  }, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+    variant: 'outlined',
+    className: classes.chartType
+  }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
+    htmlFor: "type-helper",
+    className: classes.chartTypeLabel
+  }, "ChartType"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    value: value,
+    onChange: onChange,
+    input: /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], {
+      name: "type",
+      id: "type-helper"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    value: 'histogram'
+  }, "Histogram"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    value: 'bar'
+  }, "Bar"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    value: 'lineDot'
+  }, "Line Dot"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    value: 'lineCross'
+  }, "Line Cross"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    value: 'dotPlot'
+  }, "Dot Plot"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    value: 'linePlot'
+  }, "Line Plot"))));
+});
+var _default = ChartType;
+exports["default"] = _default;
+//# sourceMappingURL=chart-type.js.map

package/lib/chart-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-type.js","names":["ChartType","withStyles","theme","chartType","width","chartTypeLabel","backgroundColor","onChange","value","classes"],"sources":["../src/chart-type.js"],"sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Select from '@material-ui/core/Select';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\n\nconst ChartType = withStyles(theme => ({\n  chartType: {\n    width: '160px'\n  },\n  chartTypeLabel: {\n    backgroundColor: 'transparent'\n  }\n}))(({ onChange, value, classes }) => {\n  return (\n    <div className={classes.chartType}>\n      <FormControl variant={'outlined'} className={classes.chartType}>\n        <InputLabel htmlFor=\"type-helper\" className={classes.chartTypeLabel}>\n          ChartType\n        </InputLabel>\n\n        <Select\n          value={value}\n          onChange={onChange}\n          input={<OutlinedInput name=\"type\" id=\"type-helper\" />}\n        >\n          <MenuItem value={'histogram'}>Histogram</MenuItem>\n          <MenuItem value={'bar'}>Bar</MenuItem>\n          <MenuItem value={'lineDot'}>Line Dot</MenuItem>\n          <MenuItem value={'lineCross'}>Line Cross</MenuItem>\n          <MenuItem value={'dotPlot'}>Dot Plot</MenuItem>\n          <MenuItem value={'linePlot'}>Line Plot</MenuItem>\n        </Select>\n      </FormControl>\n    </div>\n  );\n});\n\nexport default ChartType;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAW,UAAAC,KAAK;EAAA,OAAK;IACrCC,SAAS,EAAE;MACTC,KAAK,EAAE;IADE,CAD0B;IAIrCC,cAAc,EAAE;MACdC,eAAe,EAAE;IADH;EAJqB,CAAL;AAAA,CAAhB,EAOd,gBAAkC;EAAA,IAA/BC,QAA+B,QAA/BA,QAA+B;EAAA,IAArBC,KAAqB,QAArBA,KAAqB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EACpC,oBACE;IAAK,SAAS,EAAEA,OAAO,CAACN;EAAxB,gBACE,gCAAC,uBAAD;IAAa,OAAO,EAAE,UAAtB;IAAkC,SAAS,EAAEM,OAAO,CAACN;EAArD,gBACE,gCAAC,sBAAD;IAAY,OAAO,EAAC,aAApB;IAAkC,SAAS,EAAEM,OAAO,CAACJ;EAArD,eADF,eAKE,gCAAC,kBAAD;IACE,KAAK,EAAEG,KADT;IAEE,QAAQ,EAAED,QAFZ;IAGE,KAAK,eAAE,gCAAC,yBAAD;MAAe,IAAI,EAAC,MAApB;MAA2B,EAAE,EAAC;IAA9B;EAHT,gBAKE,gCAAC,oBAAD;IAAU,KAAK,EAAE;EAAjB,eALF,eAME,gCAAC,oBAAD;IAAU,KAAK,EAAE;EAAjB,SANF,eAOE,gCAAC,oBAAD;IAAU,KAAK,EAAE;EAAjB,cAPF,eAQE,gCAAC,oBAAD;IAAU,KAAK,EAAE;EAAjB,gBARF,eASE,gCAAC,oBAAD;IAAU,KAAK,EAAE;EAAjB,cATF,eAUE,gCAAC,oBAAD;IAAU,KAAK,EAAE;EAAjB,eAVF,CALF,CADF,CADF;AAsBD,CA9BiB,CAAlB;eAgCeP,S"}

package/lib/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "Chart", {
     return _chart["default"];
   }
 });
+Object.defineProperty(exports, "ChartType", {
+  enumerable: true,
+  get: function get() {
+    return _chartType["default"];
+  }
+});
+Object.defineProperty(exports, "ConfigureChartPanel", {
+  enumerable: true,
+  get: function get() {
+    return _chartSetup["default"];
+  }
+});
 Object.defineProperty(exports, "chartTypes", {
   enumerable: true,
   get: function get() {
@@ -20,5 +32,9 @@ var _chart = _interopRequireDefault(require("./chart"));
 
 var _chartTypes = _interopRequireDefault(require("./chart-types"));
 
+var _chartSetup = _interopRequireDefault(require("./chart-setup"));
+
+var _chartType = _interopRequireDefault(require("./chart-type"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["import Chart from './chart';\nimport chartTypes from './chart-types';\nexport { Chart, chartTypes };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["import Chart from './chart';\nimport chartTypes from './chart-types';\nimport ConfigureChartPanel from './chart-setup';\nimport ChartType from './chart-type';\n\nexport { Chart, chartTypes, ChartType, ConfigureChartPanel };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.5.11-next.413+ed0c2dca",
+  "version": "4.5.11-next.423+2ed23200",
   "description": "charting",
   "keywords": [
     "react",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "ed0c2dca8cb4426fa9c55e5f1dc33c351c78519e"
+  "gitHead": "2ed23200f4b01d32a902059e7f5ab81a45372254"
 }

package/src/chart-setup.jsx

@@ -0,0 +1,159 @@
+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 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 => 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={0}
+            max={10000}
+            variant="outlined"
+            onChange={(e, v) => onRangeChanged('max', v)}
+          />
+        </div>
+        <div className={classes.rowView}>
+          <NumberTextFieldCustom
+            className={classes.mediumTextField}
+            label="Grid Interval"
+            value={range.step}
+            min={0}
+            max={10000}
+            variant="outlined"
+            onChange={(e, v) => onRangeChanged('step', v)}
+          />
+          <NumberTextFieldCustom
+            className={classes.mediumTextField}
+            label={'Label Interval'}
+            value={range.labelStep}
+            min={0}
+            max={10000}
+            variant={'outlined'}
+            onChange={(e, v) => onRangeChanged('labelStep', v)}
+          />
+        </div>
+        <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,41 @@
+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 }) => {
+  return (
+    <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/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 };