@pie-lib/charting 5.0.0 → 5.1.0

package/lib/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart.jsx"],"names":["log","Chart","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","props","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","range","categoryDefaultLabel","label","value","step","deletable","editable","interactive","defineChart","map","d","classes","className","domain","size","title","addCategoryEnabled","theme","width","height","getChart","categories","getFilteredCategories","labelFontSize","typography","fontSize","correctValues","verticalLines","horizontalLines","leftAxis","common","graphProps","rootNode","maskSize","x","y","scale","xBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","rootCommon","controls","toolMenu","addCategory","r","changeData","changeCategory","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","labelStep","array","func","bool","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","root","overflow","svg","minHeight","withTheme"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Root, createGraphProps } from '@pie-lib/plot';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ChartGrid from './grid';\nimport ChartAxes from './axes';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport {\n  dataToXBand,\n  getDomainAndRangeByChartType,\n  getGridLinesAndAxisByChartType,\n  getTopPadding\n} from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    chartType: PropTypes.string.isRequired,\n    size: PropTypes.shape({\n      width: PropTypes.number,\n      height: PropTypes.number\n    }),\n    domain: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),\n    range: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      step: PropTypes.number,\n      labelStep: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    charts: PropTypes.array,\n    title: PropTypes.string,\n    onDataChange: PropTypes.func,\n    addCategoryEnabled: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    theme: PropTypes.object\n  };\n\n  static defaultProps = {\n    size: {\n      width: 480,\n      height: 480\n    }\n  };\n\n  state = {\n    charts: [\n      chartTypes.Bar(),\n      chartTypes.Histogram(),\n      chartTypes.LineDot(),\n      chartTypes.LineCross(),\n      chartTypes.DotPlot(),\n      chartTypes.LinePlot()\n    ]\n  };\n\n  getChart = () => {\n    const charts = this.props.charts || this.state.charts;\n    let { chartType } = this.props;\n    let ChartComponent = null;\n    let chart = null;\n\n    if (chartType) {\n      chart = charts && charts.find(chart => chart.type === chartType);\n      ChartComponent = chart && chart.Component;\n    } else {\n      chart = charts && charts[0];\n      ChartComponent = chart && chart.Component;\n      chartType = chart && chart.type;\n    }\n\n    return {\n      type: chartType,\n      ChartComponent\n    };\n  };\n\n  changeData = data => {\n    const { onDataChange } = this.props;\n\n    onDataChange(data);\n  };\n\n  changeCategory = (index, newCategory) => {\n    const integerIndex = parseInt(index, 10);\n\n    if (integerIndex >= 0) {\n      const { data, onDataChange } = this.props;\n      data[integerIndex] = {\n        ...data[integerIndex],\n        ...newCategory\n      };\n\n      onDataChange(data);\n    }\n  };\n\n  addCategory = (chartType, range) => {\n    const { onDataChange, data, categoryDefaultLabel } = this.props;\n\n    onDataChange([\n      ...data,\n      {\n        label: categoryDefaultLabel || 'New Bar',\n        value: range.step,\n        deletable: true,\n        editable: true,\n        interactive: true\n      }\n    ]);\n  };\n\n  getFilteredCategories = () => {\n    const { data, defineChart } = this.props;\n\n    return data\n      ? data.map(d => ({\n          ...d,\n          deletable: defineChart || d.deletable\n        }))\n      : [];\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      domain,\n      range,\n      size,\n      title,\n      addCategoryEnabled,\n      theme\n    } = this.props;\n    let { chartType } = this.props;\n\n    const defineChart = this.props.defineChart || false;\n    const { width, height } = size || {};\n\n    const { ChartComponent } = this.getChart();\n    const categories = this.getFilteredCategories();\n\n    const labelFontSize = (theme && theme.typography && theme.typography.fontSize) || 14;\n    const correctValues = getDomainAndRangeByChartType(\n      domain,\n      range,\n      size,\n      chartType,\n      labelFontSize\n    );\n\n    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(\n      correctValues.range,\n      chartType\n    );\n    const common = {\n      graphProps: createGraphProps(\n        correctValues.domain,\n        correctValues.range,\n        size,\n        () => this.rootNode\n      )\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 80 };\n    const { scale } = common.graphProps;\n    const xBand = dataToXBand(scale.x, categories, width, chartType);\n\n    if (!ChartComponent) {\n      return null;\n    }\n\n    const bandWidth = xBand.bandwidth();\n    // for chartType \"line\", bandWidth will be 0, so we have to calculate it\n    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;\n    const increaseHeight = defineChart ? 80 : 0;\n\n    // if there are many categories, we have to rotate their names in order to fit\n    // and we have to add extra value on top of some items\n    const top = getTopPadding(barWidth);\n    const rootCommon = cloneDeep(common);\n    rootCommon.graphProps.size.height += top + increaseHeight;\n\n    return (\n      <div className={classNames(classes.class, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory(chartType, correctValues.range)}\n          />\n        </div>\n        <Root title={title} classes={classes} rootRef={r => (this.rootNode = r)} {...rootCommon}>\n          <ChartGrid\n            {...common}\n            xBand={xBand}\n            rowTickValues={horizontalLines}\n            columnTickValues={verticalLines}\n          />\n          <ChartAxes\n            {...common}\n            defineChart={defineChart}\n            categories={categories}\n            xBand={xBand}\n            leftAxis={leftAxis}\n            onChange={this.changeData}\n            onChangeCategory={this.changeCategory}\n            top={top}\n          />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            <ChartComponent\n              {...common}\n              data={categories}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n            />\n          </g>\n        </Root>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)'\n  },\n  controls: {\n    width: 'inherit',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`\n  },\n  root: {\n    overflow: 'hidden'\n  },\n  svg: {\n    overflow: 'visible'\n  },\n  toolMenu: {\n    minHeight: '36px'\n  }\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"file":"chart.js"}
+{"version":3,"sources":["../src/chart.jsx"],"names":["log","Chart","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","props","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","range","categoryDefaultLabel","label","value","step","deletable","editable","interactive","defineChart","map","d","classes","className","domain","size","title","addCategoryEnabled","theme","width","height","getChart","categories","getFilteredCategories","labelFontSize","typography","fontSize","correctValues","verticalLines","horizontalLines","leftAxis","common","graphProps","rootNode","maskSize","x","y","scale","xBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","rootCommon","controls","toolMenu","addCategory","r","changeData","changeCategory","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","labelStep","array","func","bool","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","root","overflow","svg","minHeight","withTheme"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Root, createGraphProps } from '@pie-lib/plot';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ChartGrid from './grid';\nimport ChartAxes from './axes';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport {\n  dataToXBand,\n  getDomainAndRangeByChartType,\n  getGridLinesAndAxisByChartType,\n  getTopPadding\n} from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    chartType: PropTypes.string.isRequired,\n    size: PropTypes.shape({\n      width: PropTypes.number,\n      height: PropTypes.number\n    }),\n    domain: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),\n    range: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      step: PropTypes.number,\n      labelStep: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    charts: PropTypes.array,\n    title: PropTypes.string,\n    onDataChange: PropTypes.func,\n    addCategoryEnabled: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    defineChart: PropTypes.bool,\n    theme: PropTypes.object\n  };\n\n  static defaultProps = {\n    size: {\n      width: 480,\n      height: 480\n    }\n  };\n\n  state = {\n    charts: [\n      chartTypes.Bar(),\n      chartTypes.Histogram(),\n      chartTypes.LineDot(),\n      chartTypes.LineCross(),\n      chartTypes.DotPlot(),\n      chartTypes.LinePlot()\n    ]\n  };\n\n  getChart = () => {\n    const charts = this.props.charts || this.state.charts;\n    let { chartType } = this.props;\n    let ChartComponent = null;\n    let chart = null;\n\n    if (chartType) {\n      chart = charts && charts.find(chart => chart.type === chartType);\n      ChartComponent = chart && chart.Component;\n    } else {\n      chart = charts && charts[0];\n      ChartComponent = chart && chart.Component;\n      chartType = chart && chart.type;\n    }\n\n    return {\n      type: chartType,\n      ChartComponent\n    };\n  };\n\n  changeData = data => {\n    const { onDataChange } = this.props;\n\n    onDataChange(data);\n  };\n\n  changeCategory = (index, newCategory) => {\n    const integerIndex = parseInt(index, 10);\n\n    if (integerIndex >= 0) {\n      const { data, onDataChange } = this.props;\n      data[integerIndex] = {\n        ...data[integerIndex],\n        ...newCategory\n      };\n\n      onDataChange(data);\n    }\n  };\n\n  addCategory = (chartType, range) => {\n    const { onDataChange, data, categoryDefaultLabel } = this.props;\n\n    onDataChange([\n      ...data,\n      {\n        label: categoryDefaultLabel || 'New Bar',\n        value: range.step,\n        deletable: true,\n        editable: true,\n        interactive: true\n      }\n    ]);\n  };\n\n  getFilteredCategories = () => {\n    const { data, defineChart } = this.props;\n\n    return data\n      ? data.map(d => ({\n          ...d,\n          deletable: defineChart || d.deletable\n        }))\n      : [];\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      domain,\n      range,\n      size,\n      title,\n      addCategoryEnabled,\n      theme\n    } = this.props;\n    let { chartType } = this.props;\n\n    const defineChart = this.props.defineChart || false;\n    const { width, height } = size || {};\n\n    const { ChartComponent } = this.getChart();\n    const categories = this.getFilteredCategories();\n\n    const labelFontSize = (theme && theme.typography && theme.typography.fontSize) || 14;\n    const correctValues = getDomainAndRangeByChartType(\n      domain,\n      range,\n      size,\n      chartType,\n      labelFontSize\n    );\n\n    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(\n      correctValues.range,\n      chartType\n    );\n    const common = {\n      graphProps: createGraphProps(\n        correctValues.domain,\n        correctValues.range,\n        size,\n        () => this.rootNode\n      )\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 80 };\n    const { scale } = common.graphProps;\n    const xBand = dataToXBand(scale.x, categories, width, chartType);\n\n    if (!ChartComponent) {\n      return null;\n    }\n\n    const bandWidth = xBand.bandwidth();\n    // for chartType \"line\", bandWidth will be 0, so we have to calculate it\n    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;\n    const increaseHeight = defineChart ? 80 : 0;\n\n    // if there are many categories, we have to rotate their names in order to fit\n    // and we have to add extra value on top of some items\n    const top = getTopPadding(barWidth);\n    const rootCommon = cloneDeep(common);\n    rootCommon.graphProps.size.height += top + increaseHeight;\n\n    return (\n      <div className={classNames(classes.class, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory(chartType, correctValues.range)}\n          />\n        </div>\n        <Root title={title} classes={classes} rootRef={r => (this.rootNode = r)} {...rootCommon}>\n          <ChartGrid\n            {...common}\n            xBand={xBand}\n            rowTickValues={horizontalLines}\n            columnTickValues={verticalLines}\n          />\n          <ChartAxes\n            {...common}\n            defineChart={defineChart}\n            categories={categories}\n            xBand={xBand}\n            leftAxis={leftAxis}\n            onChange={this.changeData}\n            onChangeCategory={this.changeCategory}\n            top={top}\n          />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            <ChartComponent\n              {...common}\n              data={categories}\n              defineChart={defineChart}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n            />\n          </g>\n        </Root>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)'\n  },\n  controls: {\n    width: 'inherit',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`\n  },\n  root: {\n    overflow: 'hidden'\n  },\n  svg: {\n    overflow: 'visible'\n  },\n  toolMenu: {\n    minHeight: '36px'\n  }\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"file":"chart.js"}

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,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import Chart from './chart';\nimport chartTypes from './chart-types';\nexport { Chart, chartTypes };\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","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"],"file":"index.js"}

package/lib/line/common/drag-handle.js

@@ -85,7 +85,7 @@ var RawDragHandle = /*#__PURE__*/function (_React$Component) {
         y: y,
         classes: classes,
         className: (0, _classnames["default"])(className, !interactive && 'non-interactive'),
-        correctness: interactive && correctness
+        correctness: correctness
       }, rest));
     }
   }]);

package/lib/line/common/drag-handle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/line/common/drag-handle.jsx"],"names":["RawDragHandle","props","x","y","graphProps","classes","className","interactive","CustomDraggableComponent","correctness","rest","scale","React","Component","PropTypes","number","isRequired","width","types","GraphPropsType","object","string","bool","func","shape","value","label","DragHandle","theme","handle","fill","color","secondary","transition","secondaryDark","line","stroke","DraggableHandle","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { color } from '@pie-lib/render-ui';\nimport PropTypes from 'prop-types';\nimport { correct, incorrect, disabled } from '../../common/styles';\n\nclass RawDragHandle extends React.Component {\n  static propTypes = {\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n    width: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    interactive: PropTypes.bool,\n    CustomDraggableComponent: PropTypes.func,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n\n  render() {\n    const {\n      x,\n      y,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      CustomDraggableComponent,\n      correctness,\n      ...rest\n    } = this.props;\n    const { scale } = graphProps;\n    return (\n      <CustomDraggableComponent\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        className={classNames(className, !interactive && 'non-interactive')}\n        correctness={interactive && correctness}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport const DragHandle = withStyles(theme => ({\n  handle: {\n    fill: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&:hover': {\n      fill: color.secondaryDark()\n    },\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill')\n  },\n  line: {\n    stroke: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&:hover': {\n      stroke: color.secondaryDark()\n    },\n    '&.non-interactive': disabled('stroke'),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke')\n  }\n}))(RawDragHandle);\n\nconst DraggableHandle = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: props => {\n    return { x: props.x, y: props.y };\n  }\n})(DragHandle);\n\nexport default DraggableHandle;\n"],"file":"drag-handle.js"}
+{"version":3,"sources":["../../../src/line/common/drag-handle.jsx"],"names":["RawDragHandle","props","x","y","graphProps","classes","className","interactive","CustomDraggableComponent","correctness","rest","scale","React","Component","PropTypes","number","isRequired","width","types","GraphPropsType","object","string","bool","func","shape","value","label","DragHandle","theme","handle","fill","color","secondary","transition","secondaryDark","line","stroke","DraggableHandle","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { color } from '@pie-lib/render-ui';\nimport PropTypes from 'prop-types';\nimport { correct, incorrect, disabled } from '../../common/styles';\n\nclass RawDragHandle extends React.Component {\n  static propTypes = {\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n    width: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    interactive: PropTypes.bool,\n    CustomDraggableComponent: PropTypes.func,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n\n  render() {\n    const {\n      x,\n      y,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      CustomDraggableComponent,\n      correctness,\n      ...rest\n    } = this.props;\n\n    const { scale } = graphProps;\n    return (\n      <CustomDraggableComponent\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        className={classNames(className, !interactive && 'non-interactive')}\n        correctness={correctness}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport const DragHandle = withStyles(theme => ({\n  handle: {\n    fill: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&:hover': {\n      fill: color.secondaryDark()\n    },\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill')\n  },\n  line: {\n    stroke: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&:hover': {\n      stroke: color.secondaryDark()\n    },\n    '&.non-interactive': disabled('stroke'),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke')\n  }\n}))(RawDragHandle);\n\nconst DraggableHandle = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: props => {\n    return { x: props.x, y: props.y };\n  }\n})(DragHandle);\n\nexport default DraggableHandle;\n"],"file":"drag-handle.js"}

package/lib/line/common/line.js

@@ -150,7 +150,8 @@ var RawLine = /*#__PURE__*/function (_React$Component) {
           graphProps = _this$props.graphProps,
           data = _this$props.data,
           classes = _this$props.classes,
-          CustomDraggableComponent = _this$props.CustomDraggableComponent;
+          CustomDraggableComponent = _this$props.CustomDraggableComponent,
+          defineChart = _this$props.defineChart;
       var _this$state = this.state,
           lineState = _this$state.line,
           dragging = _this$state.dragging;
@@ -167,12 +168,13 @@ var RawLine = /*#__PURE__*/function (_React$Component) {
         className: classes.line
       }), lineToUse && lineToUse.map(function (point, i) {
         var r = 6;
-        var Component = point.interactive ? _dragHandle["default"] : _dragHandle.DragHandle;
+        var enableDraggable = defineChart ? true : point.interactive;
+        var Component = enableDraggable ? _dragHandle["default"] : _dragHandle.DragHandle;
         return /*#__PURE__*/_react["default"].createElement(Component, {
           key: "point-".concat(point.x, "-").concat(i),
           x: point.x,
           y: point.dragValue !== undefined ? point.dragValue : point.y,
-          interactive: point.interactive,
+          interactive: enableDraggable,
           r: r,
           onDragStart: function onDragStart() {
             return _this2.setState({
@@ -206,6 +208,7 @@ _defineProperty(RawLine, "propTypes", {
   xBand: _propTypes["default"].func,
   index: _propTypes["default"].number.isRequired,
   graphProps: _plot.types.GraphPropsType.isRequired,
+  defineChart: _propTypes["default"].bool,
   data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     label: _propTypes["default"].string,
     value: _propTypes["default"].number

package/lib/line/common/line.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/line/common/line.jsx"],"names":["getData","data","domain","max","length","map","el","i","x","y","value","RawLine","props","line","setState","index","onChange","dragging","state","existing","next","newLine","dragValue","setDragValue","undefined","graphProps","nextProps","classes","CustomDraggableComponent","lineState","scale","lineToUse","d","point","r","Component","interactive","DraggableHandle","DragHandle","v","dragStop","correctness","React","PropTypes","func","number","object","label","string","xBand","isRequired","types","GraphPropsType","arrayOf","shape","StyledLine","theme","fill","stroke","color","primaryLight","strokeWidth","transition","primaryDark","Line","category","changeLine","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Group } from '@vx/group';\nimport { LinePath } from '@vx/shape';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from './drag-handle';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport isEqual from 'lodash/isEqual';\nimport { color } from '@pie-lib/render-ui';\n\nconst getData = (data, domain) => {\n  const { max } = domain || {};\n  const length = data.length;\n\n  if (!max || !length) {\n    return [];\n  }\n\n  return data.map((el, i) => ({\n    ...el,\n    x: length > 1 ? i * (max / (length - 1)) : 0.5,\n    y: el.value\n  }));\n};\n\nexport class RawLine extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    data: PropTypes.arrayOf(\n      PropTypes.shape({\n        label: PropTypes.string,\n        value: PropTypes.number\n      })\n    ),\n    CustomDraggableComponent: PropTypes.func\n  };\n\n  static defaultProps = {\n    index: 0\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      line: getData(props.data, props.graphProps.domain)\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!isEqual(this.props.data, nextProps.data)) {\n      this.setState({\n        line: getData(nextProps.data, nextProps.graphProps.domain)\n      });\n    }\n  }\n\n  setDragValue = line => this.setState({ line });\n\n  dragStop = index => {\n    const { onChange } = this.props;\n    this.setState({ dragging: false }, () => {\n      onChange(index, this.state.line[index]);\n    });\n  };\n\n  dragValue = (index, existing, next) => {\n    const newLine = [...this.state.line];\n    newLine[index].dragValue = next;\n    this.setDragValue(newLine);\n  };\n\n  render() {\n    const { graphProps, data, classes, CustomDraggableComponent } = this.props;\n    const { line: lineState, dragging } = this.state;\n    const { scale } = graphProps;\n    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);\n\n    return (\n      <React.Fragment>\n        <LinePath\n          data={lineToUse}\n          x={d => scale.x(d.x)}\n          y={d => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}\n          className={classes.line}\n        />\n        {lineToUse &&\n          lineToUse.map((point, i) => {\n            const r = 6;\n            const Component = point.interactive ? DraggableHandle : DragHandle;\n\n            return (\n              <Component\n                key={`point-${point.x}-${i}`}\n                x={point.x}\n                y={point.dragValue !== undefined ? point.dragValue : point.y}\n                interactive={point.interactive}\n                r={r}\n                onDragStart={() => this.setState({ dragging: true })}\n                onDrag={v =>\n                  this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)\n                }\n                onDragStop={() => this.dragStop(i)}\n                graphProps={graphProps}\n                CustomDraggableComponent={CustomDraggableComponent}\n                correctness={point.correctness}\n              />\n            );\n          })}\n      </React.Fragment>\n    );\n  }\n}\n\nconst StyledLine = withStyles(theme => ({\n  line: {\n    fill: 'transparent',\n    stroke: color.primaryLight(),\n    strokeWidth: 3,\n    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n    '&:hover': {\n      strokeWidth: 6,\n      stroke: color.primaryDark()\n    }\n  }\n}))(RawLine);\n\nexport class Line extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  changeLine = (index, category) => {\n    const { onChange } = this.props;\n    const newLine = [...this.props.data];\n    const { dragValue, value } = category;\n\n    newLine[index].value = dragValue >= 0 ? dragValue : value;\n\n    onChange(newLine);\n  };\n\n  render() {\n    const props = this.props;\n\n    return (\n      <Group>\n        <StyledLine {...props} onChange={this.changeLine} />\n      </Group>\n    );\n  }\n}\n\nexport default Line;\n"],"file":"line.js"}
+{"version":3,"sources":["../../../src/line/common/line.jsx"],"names":["getData","data","domain","max","length","map","el","i","x","y","value","RawLine","props","line","setState","index","onChange","dragging","state","existing","next","newLine","dragValue","setDragValue","undefined","graphProps","nextProps","classes","CustomDraggableComponent","defineChart","lineState","scale","lineToUse","d","point","r","enableDraggable","interactive","Component","DraggableHandle","DragHandle","v","dragStop","correctness","React","PropTypes","func","number","object","label","string","xBand","isRequired","types","GraphPropsType","bool","arrayOf","shape","StyledLine","theme","fill","stroke","color","primaryLight","strokeWidth","transition","primaryDark","Line","category","changeLine","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Group } from '@vx/group';\nimport { LinePath } from '@vx/shape';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from './drag-handle';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport isEqual from 'lodash/isEqual';\nimport { color } from '@pie-lib/render-ui';\n\nconst getData = (data, domain) => {\n  const { max } = domain || {};\n  const length = data.length;\n\n  if (!max || !length) {\n    return [];\n  }\n\n  return data.map((el, i) => ({\n    ...el,\n    x: length > 1 ? i * (max / (length - 1)) : 0.5,\n    y: el.value\n  }));\n};\n\nexport class RawLine extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    defineChart: PropTypes.bool,\n    data: PropTypes.arrayOf(\n      PropTypes.shape({\n        label: PropTypes.string,\n        value: PropTypes.number\n      })\n    ),\n    CustomDraggableComponent: PropTypes.func\n  };\n\n  static defaultProps = {\n    index: 0\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      line: getData(props.data, props.graphProps.domain)\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!isEqual(this.props.data, nextProps.data)) {\n      this.setState({\n        line: getData(nextProps.data, nextProps.graphProps.domain)\n      });\n    }\n  }\n\n  setDragValue = line => this.setState({ line });\n\n  dragStop = index => {\n    const { onChange } = this.props;\n    this.setState({ dragging: false }, () => {\n      onChange(index, this.state.line[index]);\n    });\n  };\n\n  dragValue = (index, existing, next) => {\n    const newLine = [...this.state.line];\n    newLine[index].dragValue = next;\n    this.setDragValue(newLine);\n  };\n\n  render() {\n    const { graphProps, data, classes, CustomDraggableComponent, defineChart } = this.props;\n    const { line: lineState, dragging } = this.state;\n    const { scale } = graphProps;\n    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);\n\n    return (\n      <React.Fragment>\n        <LinePath\n          data={lineToUse}\n          x={d => scale.x(d.x)}\n          y={d => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}\n          className={classes.line}\n        />\n        {lineToUse &&\n          lineToUse.map((point, i) => {\n            const r = 6;\n            const enableDraggable = defineChart ? true : point.interactive;\n            const Component = enableDraggable ? DraggableHandle : DragHandle;\n\n            return (\n              <Component\n                key={`point-${point.x}-${i}`}\n                x={point.x}\n                y={point.dragValue !== undefined ? point.dragValue : point.y}\n                interactive={enableDraggable}\n                r={r}\n                onDragStart={() => this.setState({ dragging: true })}\n                onDrag={v =>\n                  this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)\n                }\n                onDragStop={() => this.dragStop(i)}\n                graphProps={graphProps}\n                CustomDraggableComponent={CustomDraggableComponent}\n                correctness={point.correctness}\n              />\n            );\n          })}\n      </React.Fragment>\n    );\n  }\n}\n\nconst StyledLine = withStyles(theme => ({\n  line: {\n    fill: 'transparent',\n    stroke: color.primaryLight(),\n    strokeWidth: 3,\n    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n    '&:hover': {\n      strokeWidth: 6,\n      stroke: color.primaryDark()\n    }\n  }\n}))(RawLine);\n\nexport class Line extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  changeLine = (index, category) => {\n    const { onChange } = this.props;\n    const newLine = [...this.props.data];\n    const { dragValue, value } = category;\n\n    newLine[index].value = dragValue >= 0 ? dragValue : value;\n\n    onChange(newLine);\n  };\n\n  render() {\n    const props = this.props;\n\n    return (\n      <Group>\n        <StyledLine {...props} onChange={this.changeLine} />\n      </Group>\n    );\n  }\n}\n\nexport default Line;\n"],"file":"line.js"}

package/lib/plot/common/plot.js

@@ -225,12 +225,13 @@ var Plot = /*#__PURE__*/function (_React$Component2) {
           graphProps = _this$props3.graphProps,
           xBand = _this$props3.xBand,
           CustomBarElement = _this$props3.CustomBarElement,
-          _onChangeCategory = _this$props3.onChangeCategory;
+          _onChangeCategory = _this$props3.onChangeCategory,
+          defineChart = _this$props3.defineChart;
       return /*#__PURE__*/_react["default"].createElement(_group.Group, null, (data || []).map(function (d, index) {
         return /*#__PURE__*/_react["default"].createElement(Bar, {
           value: d.value,
           label: d.label,
-          interactive: d.interactive,
+          interactive: defineChart ? true : d.interactive,
           xBand: xBand,
           index: index,
           key: "bar-".concat(d.label, "-").concat(d.value, "-").concat(index),
@@ -255,6 +256,7 @@ _defineProperty(Plot, "propTypes", {
   onChangeCategory: _propTypes["default"].func,
   xBand: _propTypes["default"].func,
   graphProps: _plot.types.GraphPropsType.isRequired,
+  defineChart: _propTypes["default"].bool,
   CustomBarElement: _propTypes["default"].func
 });
 

package/lib/plot/common/plot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plot/common/plot.jsx"],"names":["log","RawPlot","props","dragValue","setState","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","graphProps","classes","xBand","index","CustomBarElement","interactive","correctness","scale","range","size","max","v","Number","isFinite","barWidth","bandwidth","barHeight","y","barX","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","map","dragStop","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","theme","dot","fill","color","primaryLight","line","stroke","Plot","data","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\n\nexport class RawPlot extends React.Component {\n  static propTypes = {\n    onChangeCategory: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    CustomBarElement: PropTypes.func,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined\n    };\n  }\n\n  setDragValue = dragValue => this.setState({ dragValue });\n\n  dragStop = () => {\n    const { label, onChangeCategory } = this.props;\n    const { dragValue } = this.state;\n    log('[dragStop]', dragValue);\n\n    if (dragValue !== undefined) {\n      onChangeCategory({ label, value: dragValue });\n    }\n\n    this.setDragValue(undefined);\n  };\n\n  dragValue = (existing, next) => {\n    log('[dragValue] next:', next);\n\n    this.setDragValue(next);\n  };\n\n  render() {\n    const {\n      graphProps,\n      value,\n      label,\n      classes,\n      xBand,\n      index,\n      CustomBarElement,\n      interactive,\n      correctness\n    } = this.props;\n    const { scale, range, size } = graphProps;\n    const { max } = range || {};\n    const { dragValue } = this.state;\n\n    const v = Number.isFinite(dragValue) ? dragValue : value;\n    const barWidth = xBand.bandwidth();\n    const barHeight = scale.y(range.max - v);\n    const barX = xBand(bandKey({ label }, index));\n\n    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n    const values = [];\n\n    for (let i = 0; i < v; i++) {\n      values.push(i);\n    }\n\n    const pointHeight = size.height / max;\n    const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n    const Component = interactive ? DraggableHandle : DragHandle;\n\n    return (\n      <React.Fragment>\n        {values.map(index =>\n          CustomBarElement({\n            index,\n            pointDiameter,\n            barX,\n            barWidth,\n            pointHeight,\n            label,\n            value,\n            classes,\n            scale\n          })\n        )}\n        <Component\n          x={barX}\n          y={v}\n          interactive={interactive}\n          width={barWidth}\n          onDrag={v => this.dragValue(value, v)}\n          onDragStop={this.dragStop}\n          graphProps={graphProps}\n          correctness={correctness}\n        />\n      </React.Fragment>\n    );\n  }\n}\n\nconst Bar = withStyles(theme => ({\n  dot: {\n    fill: color.primaryLight(),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke')\n  },\n  line: {\n    stroke: color.primaryLight(),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke')\n  }\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChangeCategory: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n    CustomBarElement: PropTypes.func\n  };\n\n  render() {\n    const { data, graphProps, xBand, CustomBarElement, onChangeCategory } = this.props;\n\n    return (\n      <Group>\n        {(data || []).map((d, index) => (\n          <Bar\n            value={d.value}\n            label={d.label}\n            interactive={d.interactive}\n            xBand={xBand}\n            index={index}\n            key={`bar-${d.label}-${d.value}-${index}`}\n            onChangeCategory={category => onChangeCategory(index, category)}\n            graphProps={graphProps}\n            CustomBarElement={CustomBarElement}\n            correctness={d.correctness}\n          />\n        ))}\n      </Group>\n    );\n  }\n}\n\nexport default Plot;\n"],"file":"plot.js"}
+{"version":3,"sources":["../../../src/plot/common/plot.jsx"],"names":["log","RawPlot","props","dragValue","setState","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","graphProps","classes","xBand","index","CustomBarElement","interactive","correctness","scale","range","size","max","v","Number","isFinite","barWidth","bandwidth","barHeight","y","barX","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","map","dragStop","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","theme","dot","fill","color","primaryLight","line","stroke","Plot","data","defineChart","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\n\nexport class RawPlot extends React.Component {\n  static propTypes = {\n    onChangeCategory: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    CustomBarElement: PropTypes.func,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined\n    };\n  }\n\n  setDragValue = dragValue => this.setState({ dragValue });\n\n  dragStop = () => {\n    const { label, onChangeCategory } = this.props;\n    const { dragValue } = this.state;\n    log('[dragStop]', dragValue);\n\n    if (dragValue !== undefined) {\n      onChangeCategory({ label, value: dragValue });\n    }\n\n    this.setDragValue(undefined);\n  };\n\n  dragValue = (existing, next) => {\n    log('[dragValue] next:', next);\n\n    this.setDragValue(next);\n  };\n\n  render() {\n    const {\n      graphProps,\n      value,\n      label,\n      classes,\n      xBand,\n      index,\n      CustomBarElement,\n      interactive,\n      correctness\n    } = this.props;\n\n    const { scale, range, size } = graphProps;\n    const { max } = range || {};\n    const { dragValue } = this.state;\n\n    const v = Number.isFinite(dragValue) ? dragValue : value;\n    const barWidth = xBand.bandwidth();\n    const barHeight = scale.y(range.max - v);\n    const barX = xBand(bandKey({ label }, index));\n\n    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n    const values = [];\n\n    for (let i = 0; i < v; i++) {\n      values.push(i);\n    }\n\n    const pointHeight = size.height / max;\n    const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n    const Component = interactive ? DraggableHandle : DragHandle;\n\n    return (\n      <React.Fragment>\n        {values.map(index =>\n          CustomBarElement({\n            index,\n            pointDiameter,\n            barX,\n            barWidth,\n            pointHeight,\n            label,\n            value,\n            classes,\n            scale\n          })\n        )}\n        <Component\n          x={barX}\n          y={v}\n          interactive={interactive}\n          width={barWidth}\n          onDrag={v => this.dragValue(value, v)}\n          onDragStop={this.dragStop}\n          graphProps={graphProps}\n          correctness={correctness}\n        />\n      </React.Fragment>\n    );\n  }\n}\n\nconst Bar = withStyles(theme => ({\n  dot: {\n    fill: color.primaryLight(),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke')\n  },\n  line: {\n    stroke: color.primaryLight(),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke')\n  }\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChangeCategory: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n    defineChart: PropTypes.bool,\n    CustomBarElement: PropTypes.func\n  };\n\n  render() {\n    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart } = this.props;\n\n    return (\n      <Group>\n        {(data || []).map((d, index) => (\n          <Bar\n            value={d.value}\n            label={d.label}\n            interactive={defineChart ? true : d.interactive}\n            xBand={xBand}\n            index={index}\n            key={`bar-${d.label}-${d.value}-${index}`}\n            onChangeCategory={category => onChangeCategory(index, category)}\n            graphProps={graphProps}\n            CustomBarElement={CustomBarElement}\n            correctness={d.correctness}\n          />\n        ))}\n      </Group>\n    );\n  }\n}\n\nexport default Plot;\n"],"file":"plot.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "charting",
   "keywords": [
     "react",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "bbd7351bcde5346df8b8fa6091253e5d5e95c50f"
+  "gitHead": "2f841d92dcda7472f18cbce517eb664dec2f6442"
 }

package/src/axes.jsx

@@ -97,7 +97,7 @@ export class TickComponent extends React.Component {
           )}
           <MarkLabel
             inputRef={r => (this.input = r)}
-            disabled={!editable}
+            disabled={defineChart ? false : !editable}
             mark={category}
             graphProps={graphProps}
             onChange={newLabel => this.changeCategory(index, newLabel)}

package/src/bars/common/bars.jsx

@@ -65,6 +65,7 @@ export class RawBar extends React.Component {
       interactive,
       correctness
     } = this.props;
+
     const { scale, range } = graphProps;
     const { dragValue } = this.state;
 
@@ -112,18 +113,20 @@ export class Bars extends React.Component {
   static propTypes = {
     data: PropTypes.array,
     onChangeCategory: PropTypes.func,
+    defineChart: PropTypes.bool,
     xBand: PropTypes.func,
     graphProps: types.GraphPropsType.isRequired
   };
 
   render() {
-    const { data, graphProps, xBand, onChangeCategory } = this.props;
+    const { data, graphProps, xBand, onChangeCategory, defineChart } = this.props;
+
     return (
       <Group>
         {(data || []).map((d, index) => (
           <Bar
             value={d.value}
-            interactive={d.interactive}
+            interactive={defineChart ? true : d.interactive}
             label={d.label}
             xBand={xBand}
             index={index}

package/src/chart-setup.jsx

@@ -0,0 +1,163 @@
+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 => {
+    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) => {
+    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={rangeProps(model.chartType).min}
+            max={rangeProps(model.chartType).max}
+            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/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
   };
 
@@ -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}
       />
     );