@pie-lib/charting 5.1.4 → 5.1.7

package/lib/chart.js

@@ -157,7 +157,8 @@ var Chart = /*#__PURE__*/function (_React$Component) {
           range = _this$props4.range,
           size = _this$props4.size,
           title = _this$props4.title,
-          addCategoryEnabled = _this$props4.addCategoryEnabled;
+          addCategoryEnabled = _this$props4.addCategoryEnabled,
+          showPixelGuides = _this$props4.showPixelGuides;
       var chartType = this.props.chartType;
       var defineChart = this.props.defineChart || false;
 
@@ -205,7 +206,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
       var rootCommon = (0, _cloneDeep["default"])(common);
       rootCommon.graphProps.size.height += top + increaseHeight;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes["class"], className)
+        className: (0, _classnames["default"])(classes.chart, className)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.controls
       }, /*#__PURE__*/_react["default"].createElement(_toolMenu["default"], {
@@ -216,6 +217,8 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         }
       })), /*#__PURE__*/_react["default"].createElement(_plot.Root, (0, _extends2["default"])({
         title: title,
+        thisIsChart: defineChart,
+        showPixelGuides: showPixelGuides,
         classes: classes,
         rootRef: function rootRef(r) {
           return _this2.rootNode = r;
@@ -281,6 +284,7 @@ exports.Chart = Chart;
   title: _propTypes["default"].string,
   onDataChange: _propTypes["default"].func,
   addCategoryEnabled: _propTypes["default"].bool,
+  showPixelGuides: _propTypes["default"].bool,
   categoryDefaultLabel: _propTypes["default"].string,
   defineChart: _propTypes["default"].bool,
   theme: _propTypes["default"].object
@@ -297,8 +301,12 @@ var styles = function styles(theme) {
     graphBox: {
       transform: 'translate(60px, 35px)'
     },
+    chart: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'min-content'
+    },
     controls: {
-      width: 'inherit',
       display: 'flex',
       justifyContent: 'space-between',
       padding: theme.spacing.unit,
@@ -308,12 +316,6 @@ var styles = function styles(theme) {
       borderLeft: "solid 1px ".concat(_renderUi.color.primaryDark()),
       borderRight: "solid 1px ".concat(_renderUi.color.primaryDark())
     },
-    root: {
-      overflow: 'hidden'
-    },
-    svg: {
-      overflow: 'visible'
-    },
     toolMenu: {
       minHeight: '36px'
     }

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","defineChart","inDefineChart","autoFocus","label","value","step","deletable","editable","interactive","map","d","classes","className","domain","size","title","addCategoryEnabled","width","height","getChart","categories","getFilteredCategories","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","theme","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 = range => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart } = this.props;\n\n    onDataChange([\n      ...data,\n      {\n        inDefineChart: defineChart,\n        autoFocus: true,\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 { classes, className, domain, range, size, title, addCategoryEnabled } = 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 correctValues = getDomainAndRangeByChartType(domain, range, chartType);\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(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"}
+{"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","defineChart","inDefineChart","autoFocus","label","value","step","deletable","editable","interactive","map","d","classes","className","domain","size","title","addCategoryEnabled","showPixelGuides","width","height","getChart","categories","getFilteredCategories","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","theme","styles","graphBox","transform","display","flexDirection","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","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    showPixelGuides: 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 = range => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart } = this.props;\n\n    onDataChange([\n      ...data,\n      {\n        inDefineChart: defineChart,\n        autoFocus: true,\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      showPixelGuides\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 correctValues = getDomainAndRangeByChartType(domain, range, chartType);\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.chart, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory(correctValues.range)}\n          />\n        </div>\n        <Root\n          title={title}\n          thisIsChart={defineChart}\n          showPixelGuides={showPixelGuides}\n          classes={classes}\n          rootRef={r => (this.rootNode = r)}\n          {...rootCommon}\n        >\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  chart: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'min-content'\n  },\n  controls: {\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  toolMenu: {\n    minHeight: '36px'\n  }\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"file":"chart.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["RawDragHandle","props","x","y","width","graphProps","classes","className","interactive","correctness","rest","scale","handleContainer","value","transparentHandle","handle","React","Component","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","theme","height","fill","color","secondary","transition","secondaryDark","D","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 PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\n\nexport class 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    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n  render() {\n    const {\n      x,\n      y,\n      width,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      correctness,\n      ...rest\n    } = this.props;\n    const { scale } = graphProps;\n    return (\n      <svg\n        x={x}\n        y={scale.y(y) - 10}\n        width={width}\n        overflow=\"visible\"\n        className={classNames(\n          classes.handleContainer,\n          className,\n          !interactive && 'non-interactive',\n          interactive && correctness && correctness.value\n        )}\n      >\n        <rect\n          y={-10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n        <rect\n          width={width}\n          className={classNames(\n            classes.handle,\n            'handle',\n            className,\n            !interactive && 'non-interactive',\n            interactive && correctness && correctness.value\n          )}\n          {...rest}\n        />\n        <rect\n          y={10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n      </svg>\n    );\n  }\n}\n\nexport const DragHandle = withStyles(theme => ({\n  handle: {\n    height: '10px',\n    fill: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill')\n  },\n  transparentHandle: {\n    height: '10px',\n    fill: 'transparent'\n  },\n  handleContainer: {\n    height: 30,\n    '&:hover': {\n      '& .handle': {\n        fill: color.secondaryDark(),\n        height: '16px'\n      }\n    },\n    '&.non-interactive': disabled('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.correct': correct('fill')\n  }\n}))(RawDragHandle);\n\nexport const D = 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 D;\n"],"file":"drag-handle.js"}
+{"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["RawDragHandle","props","x","y","width","graphProps","classes","className","interactive","correctness","rest","scale","handleContainer","value","transparentHandle","handle","React","Component","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","theme","height","fill","color","secondary","transition","secondaryDark","D","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 PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\n\nexport class 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    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n  render() {\n    const {\n      x,\n      y,\n      width,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      correctness,\n      ...rest\n    } = this.props;\n    const { scale } = graphProps;\n\n    return (\n      <svg\n        x={x}\n        y={scale.y(y) - 10}\n        width={width}\n        overflow=\"visible\"\n        className={classNames(\n          classes.handleContainer,\n          className,\n          !interactive && 'non-interactive',\n          interactive && correctness && correctness.value\n        )}\n      >\n        <rect\n          y={-10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n        <rect\n          width={width}\n          className={classNames(\n            classes.handle,\n            'handle',\n            className,\n            !interactive && 'non-interactive',\n            interactive && correctness && correctness.value\n          )}\n          {...rest}\n        />\n        <rect\n          y={10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n      </svg>\n    );\n  }\n}\n\nexport const DragHandle = withStyles(theme => ({\n  handle: {\n    height: '10px',\n    fill: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill')\n  },\n  transparentHandle: {\n    height: '10px',\n    fill: 'transparent'\n  },\n  handleContainer: {\n    height: 30,\n    '&:hover': {\n      '& .handle': {\n        fill: color.secondaryDark(),\n        height: '16px'\n      }\n    },\n    '&.non-interactive': disabled('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.correct': correct('fill')\n  }\n}))(RawDragHandle);\n\nexport const D = 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\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 D;\n"],"file":"drag-handle.js"}

package/lib/mark-label.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.MarkLabel = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -47,8 +47,9 @@ var styles = function styles(theme) {
       color: _renderUi.color.primaryDark(),
       '&.correct': (0, _styles2.correct)('color'),
       '&.incorrect': (0, _styles2.incorrect)('color'),
-      '&.disabled': (0, _styles2.disabled)('color'),
-      backgroundColor: 'transparent !important'
+      '&.disabled': _objectSpread(_objectSpread({}, (0, _styles2.disabled)('color')), {}, {
+        backgroundColor: 'transparent !important'
+      })
     }
   };
 };

package/lib/mark-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","color","primaryDark","backgroundColor","MarkLabel","props","setInput","_ref","node","mark","classes","disabled","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","label","setLabel","onChange","e","target","value","onChangeProp","extraStyle","width","textAlign","r","minWidth","background","boxSizing","paddingLeft","paddingRight","position","pointerEvents","top","left","transformOrigin","transform","propTypes","PropTypes","bool","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport cn from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = theme => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    color: color.primaryDark(),\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': disabled('color'),\n    backgroundColor: 'transparent !important'\n  }\n});\n\nexport const MarkLabel = props => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback(node => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus\n  } = props;\n  const [label, setLabel] = useState(mark.label);\n  const onChange = e => setLabel(e.target.value);\n  const onChangeProp = e => props.onChange(e.target.value);\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left'\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  return (\n    <AutosizeInput\n      autoFocus={autoFocus}\n      inputRef={r => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      disabled={disabled}\n      inputClassName={cn(classes.input, correctness && correctness.label, disabled && 'disabled')}\n      inputStyle={{\n        minWidth: barWidth,\n        textAlign: 'center',\n        background: 'transparent',\n        boxSizing: 'border-box',\n        paddingLeft: 0,\n        paddingRight: 0,\n        ...extraStyle\n      }}\n      value={label}\n      style={{\n        position: 'absolute',\n        pointerEvents: 'auto',\n        top: 0,\n        left: 0,\n        minWidth: barWidth,\n        transformOrigin: 'left',\n        transform: `rotate(${rotate}deg)`\n      }}\n      onChange={onChange}\n      onBlur={onChangeProp}\n    />\n  );\n};\n\nMarkLabel.propTypes = {\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string\n  })\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
+{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","color","primaryDark","backgroundColor","MarkLabel","props","setInput","_ref","node","mark","classes","disabled","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","label","setLabel","onChange","e","target","value","onChangeProp","extraStyle","width","textAlign","r","minWidth","background","boxSizing","paddingLeft","paddingRight","position","pointerEvents","top","left","transformOrigin","transform","propTypes","PropTypes","bool","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport cn from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = theme => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    color: color.primaryDark(),\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': { ...disabled('color'), backgroundColor: 'transparent !important' }\n  }\n});\n\nexport const MarkLabel = props => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback(node => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus\n  } = props;\n  const [label, setLabel] = useState(mark.label);\n  const onChange = e => setLabel(e.target.value);\n  const onChangeProp = e => props.onChange(e.target.value);\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left'\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  return (\n    <AutosizeInput\n      autoFocus={autoFocus}\n      inputRef={r => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      disabled={disabled}\n      inputClassName={cn(classes.input, correctness && correctness.label, disabled && 'disabled')}\n      inputStyle={{\n        minWidth: barWidth,\n        textAlign: 'center',\n        background: 'transparent',\n        boxSizing: 'border-box',\n        paddingLeft: 0,\n        paddingRight: 0,\n        ...extraStyle\n      }}\n      value={label}\n      style={{\n        position: 'absolute',\n        pointerEvents: 'auto',\n        top: 0,\n        left: 0,\n        minWidth: barWidth,\n        transformOrigin: 'left',\n        transform: `rotate(${rotate}deg)`\n      }}\n      onChange={onChange}\n      onBlur={onChangeProp}\n    />\n  );\n};\n\nMarkLabel.propTypes = {\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string\n  })\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.1.4",
+  "version": "5.1.7",
   "description": "charting",
   "keywords": [
     "react",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/plot": "^2.3.0",
+    "@pie-lib/plot": "^2.4.2",
     "@vx/axis": "^0.0.183",
     "@vx/event": "^0.0.182",
     "@vx/grid": "^0.0.183",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "5f0932d39d7f01be0f96665b8fbe45ee745c2868"
+  "gitHead": "0963c3d69d1b57497c4366de26056ca82a3a7aa2"
 }

package/src/axes.jsx

@@ -3,12 +3,30 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
+import { AlertDialog } from '@pie-lib/config-ui';
 import { AxisLeft, AxisBottom } from '@vx/axis';
 import { bandKey, getTickValues, getRotateAngle } from './utils';
 import MarkLabel from './mark-label';
 import Checkbox from '@material-ui/core/Checkbox';
 
 export class TickComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dialog: {
+        open: false
+      }
+    };
+  }
+
+  handleAlertDialog = (open, callback) =>
+    this.setState(
+      {
+        dialog: { open }
+      },
+      callback
+    );
+
   changeCategory = (index, newLabel) => {
     const { categories, onChangeCategory } = this.props;
     const category = categories[index];
@@ -28,14 +46,48 @@ export class TickComponent extends React.Component {
     const { categories, onChangeCategory } = this.props;
     const category = categories[index];
 
-    onChangeCategory(index, { ...category, interactive: !category.interactive });
+    if (!value) {
+      this.setState({
+        dialog: {
+          open: true,
+          title: 'Warning',
+          text:
+            'This will remove the correct answer value that has been defined for this category.',
+          onConfirm: () =>
+            this.handleAlertDialog(
+              false,
+              onChangeCategory(index, { ...category, interactive: !category.interactive })
+            ),
+          onClose: () => this.handleAlertDialog(false)
+        }
+      });
+    } else {
+      onChangeCategory(index, { ...category, interactive: !category.interactive });
+    }
   };
 
   changeEditable = (index, value) => {
     const { categories, onChangeCategory } = this.props;
     const category = categories[index];
 
-    onChangeCategory(index, { ...category, editable: !category.editable || false });
+    if (!value) {
+      this.setState({
+        dialog: {
+          open: true,
+          title: 'Warning',
+          text:
+            'This will remove the correct answer category name that has been defined for this category.',
+          onConfirm: () =>
+            this.handleAlertDialog(
+              false,
+              onChangeCategory(index, { ...category, editable: !category.editable || false })
+            ),
+          onClose: () => this.handleAlertDialog(false)
+        }
+      });
+    } else {
+      onChangeCategory(index, { ...category, editable: !category.editable || false });
+    }
   };
 
   render() {
@@ -58,6 +110,7 @@ export class TickComponent extends React.Component {
       return null;
     }
 
+    const { dialog } = this.state;
     const index = parseInt(formattedValue.split('-')[0], 10);
     const category = categories[index];
     const { deletable, editable, interactive, label, correctness, autoFocus, inDefineChart } =
@@ -209,6 +262,21 @@ export class TickComponent extends React.Component {
             />
           </foreignObject>
         )}
+        <foreignObject
+          x={x - 24}
+          y={y + 100 + top}
+          width={barWidth}
+          height={4}
+          style={{ pointerEvents: 'visible', overflow: 'visible' }}
+        >
+          <AlertDialog
+            open={dialog.open}
+            title={dialog.title}
+            text={dialog.text}
+            onClose={dialog.onClose}
+            onConfirm={dialog.onConfirm}
+          />
+        </foreignObject>
       </g>
     );
   }

package/src/chart-setup.jsx

@@ -1,15 +1,34 @@
-import React from 'react';
+import React, { useState, useEffect } 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';
+import { AlertDialog } from '@pie-lib/config-ui';
 
 const ConfigureChartPanel = props => {
-  const { classes, model, onChange, gridValues = {}, labelValues = {} } = props;
-  const { range } = model;
+  const { classes, model, onChange, chartDimensions, gridValues = {}, labelValues = {} } = props;
+  const [alertDialog, setAlertDialog] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [rangeKey, setRangeKey] = useState('');
+  const [resetValue, setResetValue] = useState(0);
+
+  const { range, correctAnswer } = 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 };
@@ -37,6 +56,32 @@ const ConfigureChartPanel = props => {
     </div>
   );
 
+  const handleAlertDialog = (open, callback) => {
+    setAlertDialog(
+      {
+        alertDialog: open
+      },
+      callback
+    );
+    setOpen(open);
+  };
+
+  const resetValues = data =>
+    data.forEach(d => {
+      const remainder = d.value - range.step * Math.floor(d.value / range.step);
+
+      if (d.value > range.max || remainder !== 0) {
+        d.value = 0;
+      }
+    });
+
+  const removeOutOfRangeValues = () => {
+    const { correctAnswer, data } = model;
+
+    resetValues(data);
+    resetValues(correctAnswer.data);
+  };
+
   const rangeProps = chartType => {
     return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
   };
@@ -48,11 +93,50 @@ const ConfigureChartPanel = props => {
   };
 
   const onRangeChanged = (key, value) => {
+    // use reset values to restore range to initial values
+    setResetValue(range[key]);
+    setRangeKey(key);
+
     range[key] = value;
 
-    onChange({ ...model, range });
+    if (key === 'max' || key === 'step') {
+      // check if current chart values are invalid for given range step/max
+      const outOfRange =
+        model.data.find(
+          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0
+        ) ||
+        model.correctAnswer.data.find(
+          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0
+        );
+
+      if (outOfRange) {
+        setOpen(true);
+      } else {
+        onChange({ ...model, range });
+      }
+    } else {
+      onChange({ ...model, range });
+    }
   };
 
+  useEffect(() => {
+    if (open) {
+      setAlertDialog({
+        open: true,
+        title: 'Warning',
+        text: 'This change will remove values defined for one or more categories',
+        onConfirm: () => {
+          removeOutOfRangeValues();
+          handleAlertDialog(false, onChange({ ...model, range, correctAnswer }));
+        },
+        onClose: () => {
+          range[rangeKey] = resetValue;
+          handleAlertDialog(false);
+        }
+      });
+    }
+  }, [open]);
+
   const onChartTypeChange = chartType => {
     if (chartType.includes('Plot')) {
       rangeProps.min = 3;
@@ -90,49 +174,57 @@ const ConfigureChartPanel = props => {
           />
         </div>
         {!model.chartType.includes('Plot') && stepConfig}
-        <div className={classes.dimensions}>
-          <div>
-            <Typography>Dimensions(px)</Typography>
-          </div>
-          <div className={classes.columnView}>
-            <NumberTextFieldCustom
-              className={classes.textField}
-              label={'Width'}
-              value={size.width}
-              min={50}
-              max={700}
-              variant={'outlined'}
-              onChange={(e, v) => onSizeChanged('width', v)}
-            />
-            <Typography className={classes.disabled}>Min 50, Max 700</Typography>
-          </div>
-          <div className={classes.columnView}>
-            <NumberTextFieldCustom
-              className={classes.textField}
-              label={'Height'}
-              value={size.height}
-              min={400}
-              max={700}
-              variant={'outlined'}
-              onChange={(e, v) => onSizeChanged('height', v)}
-            />
-            <Typography className={classes.disabled}>Min 400, Max 700</Typography>
+        {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>
+        )}
       </div>
+      <AlertDialog
+        open={alertDialog.open}
+        title={alertDialog.title}
+        text={alertDialog.text}
+        onClose={alertDialog.onClose}
+        onConfirm={alertDialog.onConfirm}
+      />
     </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,
+  chartDimension: PropTypes.object,
   size: PropTypes.object
 };