@pie-lib/charting 4.5.11-next.624 → 4.5.11-next.661

package/lib/axes.js

@@ -238,7 +238,7 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
       }), deletable && !correctness && /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         x: x - 8,
-        y: y + 10 + top,
+        y: y + 60 + top,
         width: 16,
         height: 16,
         viewBox: "0 0 512 512",
@@ -247,16 +247,19 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement("path", {
         d: "M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z"
-      })), defineChart && index === 0 && /*#__PURE__*/_react["default"].createElement("text", {
-        x: x - 80,
-        y: y + 40 + top,
+      })), defineChart && index === 0 && /*#__PURE__*/_react["default"].createElement("svg", {
+        x: -55,
+        style: {
+          overflow: 'visible'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("text", {
+        y: y + 90 + top,
         width: barWidth,
         height: 4,
         style: {
           position: 'absolute',
           pointerEvents: 'none',
           wordBreak: 'break-word',
-          overflow: 'visible',
           maxWidth: barWidth,
           display: 'inline-block'
         }
@@ -266,16 +269,14 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
       }, ' ', "Student can", ' '), /*#__PURE__*/_react["default"].createElement("tspan", {
         x: "0",
         dy: "1.2em"
-      }, ' ', "set value")), defineChart && index === 0 && /*#__PURE__*/_react["default"].createElement("text", {
-        x: x - 80,
-        y: y + 80 + top,
+      }, ' ', "set value")), /*#__PURE__*/_react["default"].createElement("text", {
+        y: y + 145 + top,
         width: barWidth,
         height: 4,
         style: {
           position: 'absolute',
           pointerEvents: 'none',
           wordBreak: 'break-word',
-          overflow: 'visible',
           maxWidth: barWidth,
           display: 'inline-block'
         }
@@ -285,9 +286,9 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
       }, ' ', "Student can", ' '), /*#__PURE__*/_react["default"].createElement("tspan", {
         x: "0",
         dy: "1.2em"
-      }, ' ', "edit name")), defineChart && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+      }, ' ', "edit name"))), defineChart && /*#__PURE__*/_react["default"].createElement("foreignObject", {
         x: x - 24,
-        y: y + 20 + top,
+        y: y + 80 + top,
         width: barWidth,
         height: 4,
         style: {
@@ -304,7 +305,7 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
         }
       })), defineChart && /*#__PURE__*/_react["default"].createElement("foreignObject", {
         x: x - 24,
-        y: y + 70 + top,
+        y: y + 130 + top,
         width: barWidth,
         height: 4,
         style: {
@@ -403,8 +404,7 @@ var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
           theme = _this$props6.theme;
       var axis = classes.axis,
           axisLine = classes.axisLine,
-          tick = classes.tick,
-          axisLabel = classes.axisLabel;
+          tick = classes.tick;
 
       var _ref2 = graphProps || {},
           _ref2$scale = _ref2.scale,
@@ -463,16 +463,12 @@ var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
         tickFormat: function tickFormat(value) {
           return value;
         },
-        label: range.label,
-        labelClassName: axisLabel,
         tickValues: rowTickValues,
         tickLabelProps: getTickLabelProps
       }), /*#__PURE__*/_react["default"].createElement(_axis.AxisBottom, {
         axisLineClassName: axisLine,
-        labelClassName: axisLabel,
         tickClassName: tick,
         scale: bottomScale,
-        label: domain.label,
         labelProps: {
           y: 60 + top
         },
@@ -507,11 +503,6 @@ exports.RawChartAxes = RawChartAxes;
 });
 var ChartAxes = (0, _styles.withStyles)(function (theme) {
   return {
-    axisLabel: {
-      fontFamily: theme.typography.body1.fontFamily,
-      fontSize: theme.typography.fontSize,
-      fill: _renderUi.color.secondary()
-    },
     axis: {
       stroke: _renderUi.color.primaryDark(),
       strokeWidth: 2

package/lib/axes.js.map

@@ -1 +1 @@
-{"version":3,"file":"axes.js","names":["TickComponent","props","open","callback","setState","dialog","index","newLabel","categories","onChangeCategory","category","label","onChange","slice","value","title","text","onConfirm","handleAlertDialog","interactive","onClose","editable","state","classes","xBand","bandWidth","barWidth","rotate","top","graphProps","defineChart","x","y","formattedValue","parseInt","split","deletable","correctness","autoFocus","inDefineChart","barX","bandKey","longestCategory","reduce","a","b","lengthA","length","lengthB","longestLabel","pointerEvents","overflow","position","visibility","wordBreak","maxWidth","display","r","input","changeCategory","dottedLine","deleteCategory","e","changeInteractive","target","checked","changeEditable","React","Component","propTypes","PropTypes","array","func","number","object","string","RawChartAxes","height","document","getElementById","offsetHeight","leftAxis","theme","axis","axisLine","tick","axisLabel","scale","range","domain","size","bottomScale","rangeRound","width","bandwidth","max","rowTickValues","getTickValues","step","labelStep","fontSize","typography","getRotateAngle","getTickLabelProps","dy","dx","toLocaleString","getTickComponent","properties","min","textAnchor","count","isRequired","types","GraphPropsType","bool","ChartAxes","withStyles","fontFamily","body1","fill","color","secondary","stroke","primaryDark","strokeWidth","primaryLight","opacity","withTheme"],"sources":["../src/axes.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport { AxisLeft, AxisBottom } from '@vx/axis';\nimport { bandKey, getTickValues, getRotateAngle } from './utils';\nimport MarkLabel from './mark-label';\nimport Checkbox from '@material-ui/core/Checkbox';\n\nexport class TickComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dialog: {\n        open: false\n      }\n    };\n  }\n\n  handleAlertDialog = (open, callback) =>\n    this.setState(\n      {\n        dialog: { open }\n      },\n      callback\n    );\n\n  changeCategory = (index, newLabel) => {\n    const { categories, onChangeCategory } = this.props;\n    const category = categories[index];\n\n    onChangeCategory(index, { ...category, label: newLabel });\n  };\n\n  deleteCategory = index => {\n    const { categories, onChange } = this.props;\n\n    if (index >= 0 && categories[index]) {\n      onChange([...categories.slice(0, index), ...categories.slice(index + 1)]);\n    }\n  };\n\n  changeInteractive = (index, value) => {\n    const { categories, onChangeCategory } = this.props;\n    const category = categories[index];\n\n    if (!value) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: 'Warning',\n          text:\n            'This will remove the correct answer value that has been defined for this category.',\n          onConfirm: () =>\n            this.handleAlertDialog(\n              false,\n              onChangeCategory(index, { ...category, interactive: !category.interactive })\n            ),\n          onClose: () => this.handleAlertDialog(false)\n        }\n      });\n    } else {\n      onChangeCategory(index, { ...category, interactive: !category.interactive });\n    }\n  };\n\n  changeEditable = (index, value) => {\n    const { categories, onChangeCategory } = this.props;\n    const category = categories[index];\n\n    if (!value) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: 'Warning',\n          text:\n            'This will remove the correct answer category name that has been defined for this category.',\n          onConfirm: () =>\n            this.handleAlertDialog(\n              false,\n              onChangeCategory(index, { ...category, editable: !category.editable || false })\n            ),\n          onClose: () => this.handleAlertDialog(false)\n        }\n      });\n    } else {\n      onChangeCategory(index, { ...category, editable: !category.editable || false });\n    }\n  };\n\n  render() {\n    const {\n      classes,\n      categories,\n      xBand,\n      bandWidth,\n      barWidth,\n      rotate,\n      top,\n      graphProps,\n      defineChart,\n      x,\n      y,\n      formattedValue\n    } = this.props;\n\n    if (!formattedValue) {\n      return null;\n    }\n\n    const { dialog } = this.state;\n    const index = parseInt(formattedValue.split('-')[0], 10);\n    const category = categories[index];\n    const { deletable, editable, interactive, label, correctness, autoFocus, inDefineChart } =\n      category || {};\n    const barX = xBand(bandKey({ label }, index));\n    const longestCategory = (categories || []).reduce((a, b) => {\n      const lengthA = a && a.label ? a.label.length : 0;\n      const lengthB = b && b.label ? b.label.length : 0;\n\n      return lengthA > lengthB ? a : b;\n    });\n\n    const longestLabel = (longestCategory && longestCategory.label) || '';\n\n    return (\n      <g>\n        <foreignObject\n          x={bandWidth ? barX : x - barWidth / 2}\n          y={6}\n          width={barWidth}\n          height={4}\n          style={{ pointerEvents: 'none', overflow: 'visible' }}\n        >\n          {index === 0 && (\n            <div\n              id=\"hiddenLabel\"\n              style={{\n                position: 'absolute',\n                visibility: 'hidden',\n                wordBreak: 'break-word',\n                overflow: 'visible',\n                maxWidth: barWidth,\n                display: 'block'\n              }}\n            >\n              {longestLabel}\n            </div>\n          )}\n          <MarkLabel\n            autoFocus={inDefineChart ? defineChart && autoFocus : autoFocus}\n            inputRef={r => (this.input = r)}\n            disabled={!defineChart && !editable}\n            mark={category}\n            graphProps={graphProps}\n            onChange={newLabel => this.changeCategory(index, newLabel)}\n            barWidth={barWidth}\n            rotate={rotate}\n            correctness={correctness}\n          />\n        </foreignObject>\n        {deletable && !correctness && (\n          <line\n            x1={x}\n            y1={0}\n            x2={x}\n            y2={y + 4 + top}\n            className={classes.dottedLine}\n            strokeDasharray=\"4 2\"\n          />\n        )}\n        {deletable && !correctness && (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            x={x - 8}\n            y={y + 10 + top}\n            width={16}\n            height={16}\n            viewBox=\"0 0 512 512\"\n            onClick={() => this.deleteCategory(index)}\n          >\n            <path d=\"M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z\" />\n          </svg>\n        )}\n        {defineChart && index === 0 && (\n          <text\n            x={x - 80}\n            y={y + 40 + top}\n            width={barWidth}\n            height={4}\n            style={{\n              position: 'absolute',\n              pointerEvents: 'none',\n              wordBreak: 'break-word',\n              overflow: 'visible',\n              maxWidth: barWidth,\n              display: 'inline-block'\n            }}\n          >\n            <tspan x=\"0\" dy=\".6em\">\n              {' '}\n              Student can{' '}\n            </tspan>\n            <tspan x=\"0\" dy=\"1.2em\">\n              {' '}\n              set value\n            </tspan>\n          </text>\n        )}\n        {defineChart && index === 0 && (\n          <text\n            x={x - 80}\n            y={y + 80 + top}\n            width={barWidth}\n            height={4}\n            style={{\n              position: 'absolute',\n              pointerEvents: 'none',\n              wordBreak: 'break-word',\n              overflow: 'visible',\n              maxWidth: barWidth,\n              display: 'inline-block'\n            }}\n          >\n            <tspan x=\"0\" dy=\".6em\">\n              {' '}\n              Student can{' '}\n            </tspan>\n            <tspan x=\"0\" dy=\"1.2em\">\n              {' '}\n              edit name\n            </tspan>\n          </text>\n        )}\n        {defineChart && (\n          <foreignObject\n            x={x - 24}\n            y={y + 20 + top}\n            width={barWidth}\n            height={4}\n            style={{ pointerEvents: 'visible', overflow: 'visible' }}\n          >\n            <Checkbox\n              style={{ position: 'fixed' }}\n              checked={interactive}\n              onChange={e => this.changeInteractive(index, e.target.checked)}\n            />\n          </foreignObject>\n        )}\n        {defineChart && (\n          <foreignObject\n            x={x - 24}\n            y={y + 70 + top}\n            width={barWidth}\n            height={4}\n            style={{ pointerEvents: 'visible', overflow: 'visible' }}\n          >\n            <Checkbox\n              style={{ position: 'fixed' }}\n              checked={editable}\n              onChange={e => this.changeEditable(index, e.target.checked)}\n            />\n          </foreignObject>\n        )}\n        <foreignObject\n          x={x - 24}\n          y={y + 100 + top}\n          width={barWidth}\n          height={4}\n          style={{ pointerEvents: 'visible', overflow: 'visible' }}\n        >\n          <AlertDialog\n            open={dialog.open}\n            title={dialog.title}\n            text={dialog.text}\n            onClose={dialog.onClose}\n            onConfirm={dialog.onConfirm}\n          />\n        </foreignObject>\n      </g>\n    );\n  }\n}\n\nTickComponent.propTypes = {\n  categories: PropTypes.array,\n  xBand: PropTypes.func,\n  bandWidth: PropTypes.number,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  top: PropTypes.number,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  graphProps: PropTypes.object,\n  formattedValue: PropTypes.string,\n  onChangeCategory: PropTypes.func,\n  onChange: PropTypes.func,\n  classes: PropTypes.object\n};\n\nexport class RawChartAxes extends React.Component {\n  static propTypes = {\n    bottomScale: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n    categories: PropTypes.array,\n    graphProps: types.GraphPropsType.isRequired,\n    xBand: PropTypes.func,\n    leftAxis: PropTypes.bool,\n    onChange: PropTypes.func,\n    onChangeCategory: PropTypes.func,\n    top: PropTypes.number,\n    theme: PropTypes.object\n  };\n\n  state = { height: 0 };\n\n  componentDidMount() {\n    const height = document.getElementById('hiddenLabel')\n      ? document.getElementById('hiddenLabel').offsetHeight\n      : 0;\n\n    this.setState({ height });\n  }\n\n  render() {\n    const {\n      classes,\n      graphProps,\n      xBand,\n      leftAxis,\n      onChange,\n      onChangeCategory,\n      categories = [],\n      top,\n      defineChart,\n      theme\n    } = this.props;\n\n    const { axis, axisLine, tick, axisLabel } = classes;\n    const { scale = {}, range = {}, domain = {}, size = {} } = graphProps || {};\n    const { height } = this.state;\n\n    const bottomScale =\n      xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);\n\n    const bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth();\n    // for chartType \"line\", bandWidth will be 0, so we have to calculate it\n    const barWidth = bandWidth || (scale.x && scale.x(domain.max) / categories.length);\n\n    const rowTickValues = getTickValues({ ...range, step: range.labelStep });\n    const fontSize = theme && theme.typography ? theme.typography.fontSize : 14;\n    const rotate = getRotateAngle(fontSize, height);\n\n    const getTickLabelProps = value => ({\n      dy: 4,\n      dx: -10 - (value.toLocaleString().length || 1) * 5\n    });\n\n    const getTickComponent = props => {\n      const properties = {\n        classes,\n        categories,\n        xBand,\n        bandWidth,\n        barWidth,\n        rotate,\n        top,\n        defineChart,\n        onChangeCategory,\n        onChange,\n        graphProps,\n        x: props.x,\n        y: props.y,\n        formattedValue: props.formattedValue\n      };\n\n      return <TickComponent {...properties} />;\n    };\n\n    return (\n      <React.Fragment>\n        {leftAxis && (\n          <AxisLeft\n            scale={scale.y}\n            className={axis}\n            axisLineClassName={axisLine}\n            tickLength={10}\n            tickClassName={tick}\n            tickFormat={value => value}\n            label={range.label}\n            labelClassName={axisLabel}\n            tickValues={rowTickValues}\n            tickLabelProps={getTickLabelProps}\n          />\n        )}\n        <AxisBottom\n          axisLineClassName={axisLine}\n          labelClassName={axisLabel}\n          tickClassName={tick}\n          scale={bottomScale}\n          label={domain.label}\n          labelProps={{ y: 60 + top }}\n          top={scale.y && scale.y(range.min)}\n          textLabelProps={() => ({ textAnchor: 'middle' })}\n          tickFormat={count => count}\n          tickComponent={getTickComponent}\n        />\n      </React.Fragment>\n    );\n  }\n}\n\nconst ChartAxes = withStyles(\n  theme => ({\n    axisLabel: {\n      fontFamily: theme.typography.body1.fontFamily,\n      fontSize: theme.typography.fontSize,\n      fill: color.secondary()\n    },\n    axis: {\n      stroke: color.primaryDark(),\n      strokeWidth: 2\n    },\n    axisLine: {\n      stroke: color.primaryDark(),\n      strokeWidth: 2\n    },\n    tick: {\n      '& > line': {\n        stroke: color.primaryDark(),\n        strokeWidth: 2\n      },\n      fill: color.primaryDark(),\n      fontFamily: theme.typography.body1.fontFamily,\n      fontSize: theme.typography.fontSize,\n      textAnchor: 'middle'\n    },\n    dottedLine: {\n      stroke: color.primaryLight(),\n      opacity: 0.2\n    }\n  }),\n  { withTheme: true }\n)(RawChartAxes);\n\nexport default ChartAxes;\n"],"mappings":"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"}
+{"version":3,"file":"axes.js","names":["TickComponent","props","open","callback","setState","dialog","index","newLabel","categories","onChangeCategory","category","label","onChange","slice","value","title","text","onConfirm","handleAlertDialog","interactive","onClose","editable","state","classes","xBand","bandWidth","barWidth","rotate","top","graphProps","defineChart","x","y","formattedValue","parseInt","split","deletable","correctness","autoFocus","inDefineChart","barX","bandKey","longestCategory","reduce","a","b","lengthA","length","lengthB","longestLabel","pointerEvents","overflow","position","visibility","wordBreak","maxWidth","display","r","input","changeCategory","dottedLine","deleteCategory","e","changeInteractive","target","checked","changeEditable","React","Component","propTypes","PropTypes","array","func","number","object","string","RawChartAxes","height","document","getElementById","offsetHeight","leftAxis","theme","axis","axisLine","tick","scale","range","domain","size","bottomScale","rangeRound","width","bandwidth","max","rowTickValues","getTickValues","step","labelStep","fontSize","typography","getRotateAngle","getTickLabelProps","dy","dx","toLocaleString","getTickComponent","properties","min","textAnchor","count","isRequired","types","GraphPropsType","bool","ChartAxes","withStyles","stroke","color","primaryDark","strokeWidth","fill","fontFamily","body1","primaryLight","opacity","withTheme"],"sources":["../src/axes.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport { AxisLeft, AxisBottom } from '@vx/axis';\nimport { bandKey, getTickValues, getRotateAngle } from './utils';\nimport MarkLabel from './mark-label';\nimport Checkbox from '@material-ui/core/Checkbox';\n\nexport class TickComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dialog: {\n        open: false\n      }\n    };\n  }\n\n  handleAlertDialog = (open, callback) =>\n    this.setState(\n      {\n        dialog: { open }\n      },\n      callback\n    );\n\n  changeCategory = (index, newLabel) => {\n    const { categories, onChangeCategory } = this.props;\n    const category = categories[index];\n\n    onChangeCategory(index, { ...category, label: newLabel });\n  };\n\n  deleteCategory = index => {\n    const { categories, onChange } = this.props;\n\n    if (index >= 0 && categories[index]) {\n      onChange([...categories.slice(0, index), ...categories.slice(index + 1)]);\n    }\n  };\n\n  changeInteractive = (index, value) => {\n    const { categories, onChangeCategory } = this.props;\n    const category = categories[index];\n\n    if (!value) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: 'Warning',\n          text:\n            'This will remove the correct answer value that has been defined for this category.',\n          onConfirm: () =>\n            this.handleAlertDialog(\n              false,\n              onChangeCategory(index, { ...category, interactive: !category.interactive })\n            ),\n          onClose: () => this.handleAlertDialog(false)\n        }\n      });\n    } else {\n      onChangeCategory(index, { ...category, interactive: !category.interactive });\n    }\n  };\n\n  changeEditable = (index, value) => {\n    const { categories, onChangeCategory } = this.props;\n    const category = categories[index];\n\n    if (!value) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: 'Warning',\n          text:\n            'This will remove the correct answer category name that has been defined for this category.',\n          onConfirm: () =>\n            this.handleAlertDialog(\n              false,\n              onChangeCategory(index, { ...category, editable: !category.editable || false })\n            ),\n          onClose: () => this.handleAlertDialog(false)\n        }\n      });\n    } else {\n      onChangeCategory(index, { ...category, editable: !category.editable || false });\n    }\n  };\n\n  render() {\n    const {\n      classes,\n      categories,\n      xBand,\n      bandWidth,\n      barWidth,\n      rotate,\n      top,\n      graphProps,\n      defineChart,\n      x,\n      y,\n      formattedValue\n    } = this.props;\n\n    if (!formattedValue) {\n      return null;\n    }\n\n    const { dialog } = this.state;\n    const index = parseInt(formattedValue.split('-')[0], 10);\n    const category = categories[index];\n    const { deletable, editable, interactive, label, correctness, autoFocus, inDefineChart } =\n      category || {};\n    const barX = xBand(bandKey({ label }, index));\n    const longestCategory = (categories || []).reduce((a, b) => {\n      const lengthA = a && a.label ? a.label.length : 0;\n      const lengthB = b && b.label ? b.label.length : 0;\n\n      return lengthA > lengthB ? a : b;\n    });\n\n    const longestLabel = (longestCategory && longestCategory.label) || '';\n\n    return (\n      <g>\n        <foreignObject\n          x={bandWidth ? barX : x - barWidth / 2}\n          y={6}\n          width={barWidth}\n          height={4}\n          style={{ pointerEvents: 'none', overflow: 'visible' }}\n        >\n          {index === 0 && (\n            <div\n              id=\"hiddenLabel\"\n              style={{\n                position: 'absolute',\n                visibility: 'hidden',\n                wordBreak: 'break-word',\n                overflow: 'visible',\n                maxWidth: barWidth,\n                display: 'block'\n              }}\n            >\n              {longestLabel}\n            </div>\n          )}\n          <MarkLabel\n            autoFocus={inDefineChart ? defineChart && autoFocus : autoFocus}\n            inputRef={r => (this.input = r)}\n            disabled={!defineChart && !editable}\n            mark={category}\n            graphProps={graphProps}\n            onChange={newLabel => this.changeCategory(index, newLabel)}\n            barWidth={barWidth}\n            rotate={rotate}\n            correctness={correctness}\n          />\n        </foreignObject>\n        {deletable && !correctness && (\n          <line\n            x1={x}\n            y1={0}\n            x2={x}\n            y2={y + 4 + top}\n            className={classes.dottedLine}\n            strokeDasharray=\"4 2\"\n          />\n        )}\n        {deletable && !correctness && (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            x={x - 8}\n            y={y + 60 + top}\n            width={16}\n            height={16}\n            viewBox=\"0 0 512 512\"\n            onClick={() => this.deleteCategory(index)}\n          >\n            <path d=\"M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z\" />\n          </svg>\n        )}\n        {defineChart && index === 0 && (\n          <svg\n            x={-55}\n            style={{\n              overflow: 'visible'\n            }}\n          >\n            <text\n              y={y + 90 + top}\n              width={barWidth}\n              height={4}\n              style={{\n                position: 'absolute',\n                pointerEvents: 'none',\n                wordBreak: 'break-word',\n                maxWidth: barWidth,\n                display: 'inline-block'\n              }}\n            >\n              <tspan x=\"0\" dy=\".6em\">\n                {' '}\n                Student can{' '}\n              </tspan>\n              <tspan x=\"0\" dy=\"1.2em\">\n                {' '}\n                set value\n              </tspan>\n            </text>\n            <text\n              y={y + 145 + top}\n              width={barWidth}\n              height={4}\n              style={{\n                position: 'absolute',\n                pointerEvents: 'none',\n                wordBreak: 'break-word',\n                maxWidth: barWidth,\n                display: 'inline-block'\n              }}\n            >\n              <tspan x=\"0\" dy=\".6em\">\n                {' '}\n                Student can{' '}\n              </tspan>\n              <tspan x=\"0\" dy=\"1.2em\">\n                {' '}\n                edit name\n              </tspan>\n            </text>\n          </svg>\n        )}\n        {defineChart && (\n          <foreignObject\n            x={x - 24}\n            y={y + 80 + top}\n            width={barWidth}\n            height={4}\n            style={{ pointerEvents: 'visible', overflow: 'visible' }}\n          >\n            <Checkbox\n              style={{ position: 'fixed' }}\n              checked={interactive}\n              onChange={e => this.changeInteractive(index, e.target.checked)}\n            />\n          </foreignObject>\n        )}\n        {defineChart && (\n          <foreignObject\n            x={x - 24}\n            y={y + 130 + top}\n            width={barWidth}\n            height={4}\n            style={{ pointerEvents: 'visible', overflow: 'visible' }}\n          >\n            <Checkbox\n              style={{ position: 'fixed' }}\n              checked={editable}\n              onChange={e => this.changeEditable(index, e.target.checked)}\n            />\n          </foreignObject>\n        )}\n        <foreignObject\n          x={x - 24}\n          y={y + 100 + top}\n          width={barWidth}\n          height={4}\n          style={{ pointerEvents: 'visible', overflow: 'visible' }}\n        >\n          <AlertDialog\n            open={dialog.open}\n            title={dialog.title}\n            text={dialog.text}\n            onClose={dialog.onClose}\n            onConfirm={dialog.onConfirm}\n          />\n        </foreignObject>\n      </g>\n    );\n  }\n}\n\nTickComponent.propTypes = {\n  categories: PropTypes.array,\n  xBand: PropTypes.func,\n  bandWidth: PropTypes.number,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  top: PropTypes.number,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  graphProps: PropTypes.object,\n  formattedValue: PropTypes.string,\n  onChangeCategory: PropTypes.func,\n  onChange: PropTypes.func,\n  classes: PropTypes.object\n};\n\nexport class RawChartAxes extends React.Component {\n  static propTypes = {\n    bottomScale: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n    categories: PropTypes.array,\n    graphProps: types.GraphPropsType.isRequired,\n    xBand: PropTypes.func,\n    leftAxis: PropTypes.bool,\n    onChange: PropTypes.func,\n    onChangeCategory: PropTypes.func,\n    top: PropTypes.number,\n    theme: PropTypes.object\n  };\n\n  state = { height: 0 };\n\n  componentDidMount() {\n    const height = document.getElementById('hiddenLabel')\n      ? document.getElementById('hiddenLabel').offsetHeight\n      : 0;\n\n    this.setState({ height });\n  }\n\n  render() {\n    const {\n      classes,\n      graphProps,\n      xBand,\n      leftAxis,\n      onChange,\n      onChangeCategory,\n      categories = [],\n      top,\n      defineChart,\n      theme\n    } = this.props;\n\n    const { axis, axisLine, tick } = classes;\n    const { scale = {}, range = {}, domain = {}, size = {} } = graphProps || {};\n    const { height } = this.state;\n\n    const bottomScale =\n      xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);\n\n    const bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth();\n    // for chartType \"line\", bandWidth will be 0, so we have to calculate it\n    const barWidth = bandWidth || (scale.x && scale.x(domain.max) / categories.length);\n\n    const rowTickValues = getTickValues({ ...range, step: range.labelStep });\n    const fontSize = theme && theme.typography ? theme.typography.fontSize : 14;\n    const rotate = getRotateAngle(fontSize, height);\n\n    const getTickLabelProps = value => ({\n      dy: 4,\n      dx: -10 - (value.toLocaleString().length || 1) * 5\n    });\n\n    const getTickComponent = props => {\n      const properties = {\n        classes,\n        categories,\n        xBand,\n        bandWidth,\n        barWidth,\n        rotate,\n        top,\n        defineChart,\n        onChangeCategory,\n        onChange,\n        graphProps,\n        x: props.x,\n        y: props.y,\n        formattedValue: props.formattedValue\n      };\n\n      return <TickComponent {...properties} />;\n    };\n\n    return (\n      <React.Fragment>\n        {leftAxis && (\n          <AxisLeft\n            scale={scale.y}\n            className={axis}\n            axisLineClassName={axisLine}\n            tickLength={10}\n            tickClassName={tick}\n            tickFormat={value => value}\n            tickValues={rowTickValues}\n            tickLabelProps={getTickLabelProps}\n          />\n        )}\n        <AxisBottom\n          axisLineClassName={axisLine}\n          tickClassName={tick}\n          scale={bottomScale}\n          labelProps={{ y: 60 + top }}\n          top={scale.y && scale.y(range.min)}\n          textLabelProps={() => ({ textAnchor: 'middle' })}\n          tickFormat={count => count}\n          tickComponent={getTickComponent}\n        />\n      </React.Fragment>\n    );\n  }\n}\n\nconst ChartAxes = withStyles(\n  theme => ({\n    axis: {\n      stroke: color.primaryDark(),\n      strokeWidth: 2\n    },\n    axisLine: {\n      stroke: color.primaryDark(),\n      strokeWidth: 2\n    },\n    tick: {\n      '& > line': {\n        stroke: color.primaryDark(),\n        strokeWidth: 2\n      },\n      fill: color.primaryDark(),\n      fontFamily: theme.typography.body1.fontFamily,\n      fontSize: theme.typography.fontSize,\n      textAnchor: 'middle'\n    },\n    dottedLine: {\n      stroke: color.primaryLight(),\n      opacity: 0.2\n    }\n  }),\n  { withTheme: true }\n)(RawChartAxes);\n\nexport default ChartAxes;\n"],"mappings":"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"}

package/lib/chart.js

@@ -157,6 +157,10 @@ var Chart = /*#__PURE__*/function (_React$Component) {
           range = _this$props4.range,
           size = _this$props4.size,
           title = _this$props4.title,
+          onChangeTitle = _this$props4.onChangeTitle,
+          onChangeLabels = _this$props4.onChangeLabels,
+          labelsPlaceholders = _this$props4.labelsPlaceholders,
+          titlePlaceholder = _this$props4.titlePlaceholder,
           addCategoryEnabled = _this$props4.addCategoryEnabled,
           showPixelGuides = _this$props4.showPixelGuides;
       var chartType = this.props.chartType;
@@ -166,6 +170,11 @@ var Chart = /*#__PURE__*/function (_React$Component) {
           width = _ref.width,
           height = _ref.height;
 
+      var labels = {
+        left: (range === null || range === void 0 ? void 0 : range.label) || '',
+        bottom: domain.label || ''
+      };
+
       var _this$getChart = this.getChart(),
           ChartComponent = _this$getChart.ChartComponent;
 
@@ -199,7 +208,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
       var bandWidth = xBand.bandwidth(); // for chartType "line", bandWidth will be 0, so we have to calculate it
 
       var barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
-      var increaseHeight = defineChart ? 80 : 0; // if there are many categories, we have to rotate their names in order to fit
+      var increaseHeight = defineChart ? 150 : 0; // if there are many categories, we have to rotate their names in order to fit
       // and we have to add extra value on top of some items
 
       var top = (0, _utils.getTopPadding)(barWidth);
@@ -217,7 +226,17 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         }
       })), /*#__PURE__*/_react["default"].createElement(_plot.Root, (0, _extends2["default"])({
         title: title,
-        thisIsChart: defineChart,
+        onChangeTitle: onChangeTitle,
+        disabledTitle: !defineChart,
+        showTitle: true,
+        showLabels: true,
+        labels: labels,
+        onChangeLabels: onChangeLabels,
+        labelsPlaceholders: labelsPlaceholders,
+        titlePlaceholder: titlePlaceholder,
+        defineChart: defineChart,
+        disabledLabels: !defineChart,
+        isChart: true,
         showPixelGuides: showPixelGuides,
         classes: classes,
         rootRef: function rootRef(r) {

package/lib/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":["log","debug","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","getDomainAndRangeByChartType","getGridLinesAndAxisByChartType","verticalLines","horizontalLines","leftAxis","common","graphProps","createGraphProps","rootNode","maskSize","x","y","scale","xBand","dataToXBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","getTopPadding","rootCommon","cloneDeep","classNames","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","withStyles","withTheme"],"sources":["../src/chart.jsx"],"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  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"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":["log","debug","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","onChangeTitle","onChangeLabels","labelsPlaceholders","titlePlaceholder","addCategoryEnabled","showPixelGuides","width","height","labels","left","bottom","getChart","categories","getFilteredCategories","correctValues","getDomainAndRangeByChartType","getGridLinesAndAxisByChartType","verticalLines","horizontalLines","leftAxis","common","graphProps","createGraphProps","rootNode","maskSize","x","y","scale","xBand","dataToXBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","getTopPadding","rootCommon","cloneDeep","classNames","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","withStyles","withTheme"],"sources":["../src/chart.jsx"],"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      onChangeTitle,\n      onChangeLabels,\n      labelsPlaceholders,\n      titlePlaceholder,\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    const labels = { left: range?.label || '', bottom: domain.label || '' };\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 ? 150 : 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          onChangeTitle={onChangeTitle}\n          disabledTitle={!defineChart}\n          showTitle={true}\n          showLabels={true}\n          labels={labels}\n          onChangeLabels={onChangeLabels}\n          labelsPlaceholders={labelsPlaceholders}\n          titlePlaceholder={titlePlaceholder}\n          defineChart={defineChart}\n          disabledLabels={!defineChart}\n          isChart={true}\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  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"],"mappings":"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"}

package/lib/common/drag-handle.js

@@ -115,7 +115,7 @@ var DragHandle = (0, _index.withStyles)(function (theme) {
       '&.non-interactive': (0, _styles.disabled)('fill')
     },
     transparentHandle: {
-      height: '10px',
+      height: '20px',
       fill: 'transparent'
     },
     handleContainer: {

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

@@ -1 +1 @@
-{"version":3,"file":"drag-handle.js","names":["RawDragHandle","props","x","y","width","graphProps","classes","className","interactive","correctness","rest","scale","classNames","handleContainer","value","transparentHandle","handle","React","Component","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","withStyles","theme","height","fill","color","secondary","transition","correct","incorrect","disabled","secondaryDark","D","gridDraggable","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"sources":["../../src/common/drag-handle.jsx"],"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"],"mappings":"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"}
+{"version":3,"file":"drag-handle.js","names":["RawDragHandle","props","x","y","width","graphProps","classes","className","interactive","correctness","rest","scale","classNames","handleContainer","value","transparentHandle","handle","React","Component","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","withStyles","theme","height","fill","color","secondary","transition","correct","incorrect","disabled","secondaryDark","D","gridDraggable","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"sources":["../../src/common/drag-handle.jsx"],"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: '20px',\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"],"mappings":"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"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.5.11-next.624+902972ab",
+  "version": "4.5.11-next.661+24b1f730",
   "description": "charting",
   "keywords": [
     "react",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "902972ab86b0fcd40ddd0e7c809efe9922605668"
+  "gitHead": "24b1f73049d7c2f386cc7d3d198c036ab6c7dadf"
 }

package/src/axes.jsx

@@ -175,7 +175,7 @@ export class TickComponent extends React.Component {
           <svg
             xmlns="http://www.w3.org/2000/svg"
             x={x - 8}
-            y={y + 10 + top}
+            y={y + 60 + top}
             width={16}
             height={16}
             viewBox="0 0 512 512"
@@ -185,59 +185,60 @@ export class TickComponent extends React.Component {
           </svg>
         )}
         {defineChart && index === 0 && (
-          <text
-            x={x - 80}
-            y={y + 40 + top}
-            width={barWidth}
-            height={4}
-            style={{
-              position: 'absolute',
-              pointerEvents: 'none',
-              wordBreak: 'break-word',
-              overflow: 'visible',
-              maxWidth: barWidth,
-              display: 'inline-block'
-            }}
-          >
-            <tspan x="0" dy=".6em">
-              {' '}
-              Student can{' '}
-            </tspan>
-            <tspan x="0" dy="1.2em">
-              {' '}
-              set value
-            </tspan>
-          </text>
-        )}
-        {defineChart && index === 0 && (
-          <text
-            x={x - 80}
-            y={y + 80 + top}
-            width={barWidth}
-            height={4}
+          <svg
+            x={-55}
             style={{
-              position: 'absolute',
-              pointerEvents: 'none',
-              wordBreak: 'break-word',
-              overflow: 'visible',
-              maxWidth: barWidth,
-              display: 'inline-block'
+              overflow: 'visible'
             }}
           >
-            <tspan x="0" dy=".6em">
-              {' '}
-              Student can{' '}
-            </tspan>
-            <tspan x="0" dy="1.2em">
-              {' '}
-              edit name
-            </tspan>
-          </text>
+            <text
+              y={y + 90 + top}
+              width={barWidth}
+              height={4}
+              style={{
+                position: 'absolute',
+                pointerEvents: 'none',
+                wordBreak: 'break-word',
+                maxWidth: barWidth,
+                display: 'inline-block'
+              }}
+            >
+              <tspan x="0" dy=".6em">
+                {' '}
+                Student can{' '}
+              </tspan>
+              <tspan x="0" dy="1.2em">
+                {' '}
+                set value
+              </tspan>
+            </text>
+            <text
+              y={y + 145 + top}
+              width={barWidth}
+              height={4}
+              style={{
+                position: 'absolute',
+                pointerEvents: 'none',
+                wordBreak: 'break-word',
+                maxWidth: barWidth,
+                display: 'inline-block'
+              }}
+            >
+              <tspan x="0" dy=".6em">
+                {' '}
+                Student can{' '}
+              </tspan>
+              <tspan x="0" dy="1.2em">
+                {' '}
+                edit name
+              </tspan>
+            </text>
+          </svg>
         )}
         {defineChart && (
           <foreignObject
             x={x - 24}
-            y={y + 20 + top}
+            y={y + 80 + top}
             width={barWidth}
             height={4}
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
@@ -252,7 +253,7 @@ export class TickComponent extends React.Component {
         {defineChart && (
           <foreignObject
             x={x - 24}
-            y={y + 70 + top}
+            y={y + 130 + top}
             width={barWidth}
             height={4}
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
@@ -338,7 +339,7 @@ export class RawChartAxes extends React.Component {
       theme
     } = this.props;
 
-    const { axis, axisLine, tick, axisLabel } = classes;
+    const { axis, axisLine, tick } = classes;
     const { scale = {}, range = {}, domain = {}, size = {} } = graphProps || {};
     const { height } = this.state;
 
@@ -389,18 +390,14 @@ export class RawChartAxes extends React.Component {
             tickLength={10}
             tickClassName={tick}
             tickFormat={value => value}
-            label={range.label}
-            labelClassName={axisLabel}
             tickValues={rowTickValues}
             tickLabelProps={getTickLabelProps}
           />
         )}
         <AxisBottom
           axisLineClassName={axisLine}
-          labelClassName={axisLabel}
           tickClassName={tick}
           scale={bottomScale}
-          label={domain.label}
           labelProps={{ y: 60 + top }}
           top={scale.y && scale.y(range.min)}
           textLabelProps={() => ({ textAnchor: 'middle' })}
@@ -414,11 +411,6 @@ export class RawChartAxes extends React.Component {
 
 const ChartAxes = withStyles(
   theme => ({
-    axisLabel: {
-      fontFamily: theme.typography.body1.fontFamily,
-      fontSize: theme.typography.fontSize,
-      fill: color.secondary()
-    },
     axis: {
       stroke: color.primaryDark(),
       strokeWidth: 2

package/src/chart.jsx

@@ -148,6 +148,10 @@ export class Chart extends React.Component {
       range,
       size,
       title,
+      onChangeTitle,
+      onChangeLabels,
+      labelsPlaceholders,
+      titlePlaceholder,
       addCategoryEnabled,
       showPixelGuides
     } = this.props;
@@ -155,6 +159,7 @@ export class Chart extends React.Component {
 
     const defineChart = this.props.defineChart || false;
     const { width, height } = size || {};
+    const labels = { left: range?.label || '', bottom: domain.label || '' };
 
     const { ChartComponent } = this.getChart();
     const categories = this.getFilteredCategories();
@@ -187,7 +192,7 @@ export class Chart extends React.Component {
     const bandWidth = xBand.bandwidth();
     // for chartType "line", bandWidth will be 0, so we have to calculate it
     const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
-    const increaseHeight = defineChart ? 80 : 0;
+    const increaseHeight = defineChart ? 150 : 0;
 
     // if there are many categories, we have to rotate their names in order to fit
     // and we have to add extra value on top of some items
@@ -206,7 +211,17 @@ export class Chart extends React.Component {
         </div>
         <Root
           title={title}
-          thisIsChart={defineChart}
+          onChangeTitle={onChangeTitle}
+          disabledTitle={!defineChart}
+          showTitle={true}
+          showLabels={true}
+          labels={labels}
+          onChangeLabels={onChangeLabels}
+          labelsPlaceholders={labelsPlaceholders}
+          titlePlaceholder={titlePlaceholder}
+          defineChart={defineChart}
+          disabledLabels={!defineChart}
+          isChart={true}
           showPixelGuides={showPixelGuides}
           classes={classes}
           rootRef={r => (this.rootNode = r)}

package/src/common/drag-handle.jsx

@@ -85,7 +85,7 @@ export const DragHandle = withStyles(theme => ({
     '&.non-interactive': disabled('fill')
   },
   transparentHandle: {
-    height: '10px',
+    height: '20px',
     fill: 'transparent'
   },
   handleContainer: {