@pie-lib/charting 4.5.11-next.537 → 4.5.11-next.553

package/lib/chart-setup.js

@@ -33,12 +33,29 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
   var classes = props.classes,
       model = props.model,
       onChange = props.onChange,
+      chartDimensions = props.chartDimensions,
       _props$gridValues = props.gridValues,
       gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
       _props$labelValues = props.labelValues,
       labelValues = _props$labelValues === void 0 ? {} : _props$labelValues;
   var range = model.range;
   var size = model.graph;
+
+  var _ref = chartDimensions || {},
+      showInConfigPanel = _ref.showInConfigPanel,
+      width = _ref.width,
+      height = _ref.height;
+
+  var widthConstraints = {
+    min: width !== null && width !== void 0 && width.min ? Math.max(50, width.min) : 50,
+    max: width !== null && width !== void 0 && width.max ? Math.min(700, width.max) : 700,
+    step: (width === null || width === void 0 ? void 0 : width.step) >= 1 ? Math.min(200, width.step) : 20
+  };
+  var heightConstraints = {
+    min: height !== null && height !== void 0 && height.min ? Math.max(400, height.min) : 400,
+    max: height !== null && height !== void 0 && height.max ? Math.min(700, height.max) : 700,
+    step: (height === null || height === void 0 ? void 0 : height.step) >= 1 ? Math.min(200, height.step) : 20
+  };
   var gridOptions = gridValues && gridValues.range ? {
     customValues: gridValues.range
   } : {
@@ -143,7 +160,7 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     onChange: function onChange(e, v) {
       return onRangeChanged('max', v);
     }
-  })), !model.chartType.includes('Plot') && stepConfig, /*#__PURE__*/_react["default"].createElement("div", {
+  })), !model.chartType.includes('Plot') && stepConfig, showInConfigPanel && /*#__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
@@ -151,8 +168,9 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     className: classes.textField,
     label: 'Width',
     value: size.width,
-    min: 50,
-    max: 700,
+    min: widthConstraints.min,
+    max: widthConstraints.max,
+    step: widthConstraints.step,
     variant: 'outlined',
     onChange: function onChange(e, v) {
       return onSizeChanged('width', v);
@@ -165,8 +183,9 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     className: classes.textField,
     label: 'Height',
     value: size.height,
-    min: 400,
-    max: 700,
+    min: heightConstraints.min,
+    max: heightConstraints.max,
+    step: heightConstraints.step,
     variant: 'outlined',
     onChange: function onChange(e, v) {
       return onSizeChanged('height', v);
@@ -178,13 +197,10 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
 
 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,
+  chartDimension: _propTypes["default"].object,
   size: _propTypes["default"].object
 };
 

package/lib/chart-setup.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-setup.js","names":["ConfigureChartPanel","props","classes","model","onChange","gridValues","labelValues","range","size","graph","gridOptions","customValues","min","max","labelOptions","stepConfig","rowView","mediumTextField","step","e","v","onRangeChanged","labelStep","rangeProps","chartType","includes","onSizeChanged","key","value","onChartTypeChange","wrapper","content","target","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, gridValues = {}, labelValues = {} } = props;\n  const { range } = model;\n  const size = model.graph;\n\n  const gridOptions =\n    gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };\n  const labelOptions =\n    labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };\n\n  const stepConfig = (\n    <div className={classes.rowView}>\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Grid Interval\"\n        value={range.step}\n        variant=\"outlined\"\n        onChange={(e, v) => onRangeChanged('step', v)}\n        {...gridOptions}\n      />\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label={'Label Interval'}\n        value={range.labelStep}\n        variant={'outlined'}\n        onChange={(e, v) => onRangeChanged('labelStep', v)}\n        {...labelOptions}\n      />\n    </div>\n  );\n\n  const rangeProps = chartType => {\n    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };\n  };\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    range[key] = value;\n\n    onChange({ ...model, range });\n  };\n\n  const onChartTypeChange = chartType => {\n    if (chartType.includes('Plot')) {\n      rangeProps.min = 3;\n      rangeProps.max = 10;\n\n      if (range.max > 10 || range.max < 3) {\n        range.max = 10;\n      }\n\n      range.step = 1;\n      range.labelStep = 1;\n\n      onChange({ ...model, range, chartType });\n\n      return;\n    }\n\n    onChange({ ...model, chartType });\n  };\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={rangeProps(model.chartType).min}\n            max={rangeProps(model.chartType).max}\n            variant=\"outlined\"\n            onChange={(e, v) => onRangeChanged('max', v)}\n          />\n        </div>\n        {!model.chartType.includes('Plot') && stepConfig}\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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"}
+{"version":3,"file":"chart-setup.js","names":["ConfigureChartPanel","props","classes","model","onChange","chartDimensions","gridValues","labelValues","range","size","graph","showInConfigPanel","width","height","widthConstraints","min","Math","max","step","heightConstraints","gridOptions","customValues","labelOptions","stepConfig","rowView","mediumTextField","e","v","onRangeChanged","labelStep","rangeProps","chartType","includes","onSizeChanged","key","value","onChartTypeChange","wrapper","content","target","dimensions","columnView","textField","disabled","propTypes","PropTypes","object","domain","chartDimension","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, chartDimensions, gridValues = {}, labelValues = {} } = props;\n  const { range } = model;\n  const size = model.graph;\n  const { showInConfigPanel, width, height } = chartDimensions || {};\n\n  const widthConstraints = {\n    min: width?.min ? Math.max(50, width.min) : 50,\n    max: width?.max ? Math.min(700, width.max) : 700,\n    step: width?.step >= 1 ? Math.min(200, width.step) : 20\n  };\n  const heightConstraints = {\n    min: height?.min ? Math.max(400, height.min) : 400,\n    max: height?.max ? Math.min(700, height.max) : 700,\n    step: height?.step >= 1 ? Math.min(200, height.step) : 20\n  };\n\n  const gridOptions =\n    gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };\n  const labelOptions =\n    labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };\n\n  const stepConfig = (\n    <div className={classes.rowView}>\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Grid Interval\"\n        value={range.step}\n        variant=\"outlined\"\n        onChange={(e, v) => onRangeChanged('step', v)}\n        {...gridOptions}\n      />\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label={'Label Interval'}\n        value={range.labelStep}\n        variant={'outlined'}\n        onChange={(e, v) => onRangeChanged('labelStep', v)}\n        {...labelOptions}\n      />\n    </div>\n  );\n\n  const rangeProps = chartType => {\n    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };\n  };\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    range[key] = value;\n\n    onChange({ ...model, range });\n  };\n\n  const onChartTypeChange = chartType => {\n    if (chartType.includes('Plot')) {\n      rangeProps.min = 3;\n      rangeProps.max = 10;\n\n      if (range.max > 10 || range.max < 3) {\n        range.max = 10;\n      }\n\n      range.step = 1;\n      range.labelStep = 1;\n\n      onChange({ ...model, range, chartType });\n\n      return;\n    }\n\n    onChange({ ...model, chartType });\n  };\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={rangeProps(model.chartType).min}\n            max={rangeProps(model.chartType).max}\n            variant=\"outlined\"\n            onChange={(e, v) => onRangeChanged('max', v)}\n          />\n        </div>\n        {!model.chartType.includes('Plot') && stepConfig}\n        {showInConfigPanel && (\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={widthConstraints.min}\n                max={widthConstraints.max}\n                step={widthConstraints.step}\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={heightConstraints.min}\n                max={heightConstraints.max}\n                step={heightConstraints.step}\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        )}\n      </div>\n    </div>\n  );\n};\n\nConfigureChartPanel.propTypes = {\n  classes: PropTypes.object,\n  domain: PropTypes.object,\n  onChange: PropTypes.function,\n  range: PropTypes.object,\n  chartDimension: 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/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.5.11-next.537+88f0fb88",
+  "version": "4.5.11-next.553+8f88f2fc",
   "description": "charting",
   "keywords": [
     "react",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "88f0fb88c7a98ceaa2336add0301b176c59355b7"
+  "gitHead": "8f88f2fc821f58e65295c43bfafee137594be499"
 }

package/src/chart-setup.jsx

@@ -7,9 +7,21 @@ import ChartType from './chart-type';
 import { NumberTextFieldCustom } from '@pie-lib/config-ui';
 
 const ConfigureChartPanel = props => {
-  const { classes, model, onChange, gridValues = {}, labelValues = {} } = props;
+  const { classes, model, onChange, chartDimensions, gridValues = {}, labelValues = {} } = props;
   const { range } = model;
   const size = model.graph;
+  const { showInConfigPanel, width, height } = chartDimensions || {};
+
+  const widthConstraints = {
+    min: width?.min ? Math.max(50, width.min) : 50,
+    max: width?.max ? Math.min(700, width.max) : 700,
+    step: width?.step >= 1 ? Math.min(200, width.step) : 20
+  };
+  const heightConstraints = {
+    min: height?.min ? Math.max(400, height.min) : 400,
+    max: height?.max ? Math.min(700, height.max) : 700,
+    step: height?.step >= 1 ? Math.min(200, height.step) : 20
+  };
 
   const gridOptions =
     gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };
@@ -90,35 +102,39 @@ const ConfigureChartPanel = props => {
           />
         </div>
         {!model.chartType.includes('Plot') && stepConfig}
-        <div className={classes.dimensions}>
-          <div>
-            <Typography>Dimensions(px)</Typography>
+        {showInConfigPanel && (
+          <div className={classes.dimensions}>
+            <div>
+              <Typography>Dimensions(px)</Typography>
+            </div>
+            <div className={classes.columnView}>
+              <NumberTextFieldCustom
+                className={classes.textField}
+                label={'Width'}
+                value={size.width}
+                min={widthConstraints.min}
+                max={widthConstraints.max}
+                step={widthConstraints.step}
+                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={heightConstraints.min}
+                max={heightConstraints.max}
+                step={heightConstraints.step}
+                variant={'outlined'}
+                onChange={(e, v) => onSizeChanged('height', v)}
+              />
+              <Typography className={classes.disabled}>Min 400, Max 700</Typography>
+            </div>
           </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>
   );
@@ -126,13 +142,10 @@ const ConfigureChartPanel = props => {
 
 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,
+  chartDimension: PropTypes.object,
   size: PropTypes.object
 };