@pie-lib/charting 5.15.7 → 5.16.0-beta.1

package/lib/bars/common/bars.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/bars/common/bars.jsx"],"names":["log","histogramColors","hoverHistogramColors","calculateFillColor","isHovered","barColor","index","length","color","primaryDark","RawBar","props","setState","dragValue","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","graphProps","classes","xBand","interactive","correctness","defineChart","scale","range","fillColor","v","Number","isFinite","barWidth","bandwidth","barHeight","y","max","barX","rawY","yy","Component","DraggableHandle","DragHandle","handleMouseEnter","handleMouseLeave","bar","fill","dragStop","React","PropTypes","string","func","number","object","isRequired","types","GraphPropsType","bool","shape","Bar","primaryLight","Bars","data","histogram","map","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { color } from '@pie-lib/render-ui';\nimport { Bar as VxBar } from '@vx/shape';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport debug from 'debug';\nimport { bandKey } from '../../utils';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\n\nconst log = debug('pie-lib:chart:bars');\nconst histogramColors = [\n  '#006699',\n  '#F59B00',\n  '#08916D',\n  '#529EE0',\n  '#52B7D8',\n  '#D9A6C2',\n  '#FFB03B',\n  '#54A77B',\n  '#E16032',\n  '#4FD2D2',\n  '#F0E442',\n  '#E287B2',\n];\nconst hoverHistogramColors = [\n  '#003754',\n  '#975616',\n  '#00503B',\n  '#225982',\n  '#1F687D',\n  '#825E6F',\n  '#996428',\n  '#255E44',\n  '#8A331F',\n  '#167A7A',\n  '#91862D',\n  '#894A65',\n];\n\nconst calculateFillColor = (isHovered, barColor, index, hoverHistogramColors) => {\n  if (isHovered && barColor) {\n    return hoverHistogramColors[index % hoverHistogramColors.length];\n  }\n  if (isHovered) {\n    return color.primaryDark();\n  }\n  return barColor || null;\n};\n\nexport class RawBar extends React.Component {\n  static propTypes = {\n    barColor: PropTypes.string,\n    onChangeCategory: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      isHovered: false,\n    };\n  }\n\n  handleMouseEnter = () => {\n    this.setState({ isHovered: true });\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ isHovered: false });\n  };\n\n  setDragValue = (dragValue) => this.setState({ dragValue });\n\n  dragStop = () => {\n    const { label, onChangeCategory } = this.props;\n    const { dragValue } = this.state;\n    log('[dragStop]', dragValue);\n\n    if (dragValue !== undefined) {\n      onChangeCategory({ label, value: dragValue });\n    }\n\n    this.setDragValue(undefined);\n  };\n\n  dragValue = (existing, next) => {\n    log('[dragValue] next:', next);\n\n    this.setDragValue(next);\n  };\n\n  render() {\n    const {\n      graphProps,\n      value,\n      label,\n      classes,\n      xBand,\n      index,\n      interactive,\n      correctness,\n      barColor,\n      defineChart,\n    } = this.props;\n    const { scale, range } = graphProps;\n    const { dragValue, isHovered } = this.state;\n\n    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors);\n    const v = Number.isFinite(dragValue) ? dragValue : value;\n    const barWidth = xBand.bandwidth();\n    const barHeight = scale.y(range.max - v);\n    const barX = xBand(bandKey({ label }, index));\n    const rawY = range.max - v;\n    const yy = range.max - rawY;\n    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n    const Component = interactive ? DraggableHandle : DragHandle;\n\n    return (\n      <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\n        <VxBar\n          x={barX}\n          y={scale.y(yy)}\n          width={barWidth}\n          height={barHeight}\n          className={classes.bar}\n          style={{ fill: fillColor }}\n        />\n        <Component\n          x={barX}\n          y={v}\n          defineChart={defineChart}\n          interactive={interactive}\n          width={barWidth}\n          onDrag={(v) => this.dragValue(value, v)}\n          onDragStop={this.dragStop}\n          graphProps={graphProps}\n          correctness={correctness}\n          isHovered={isHovered}\n          color={fillColor}\n        />\n      </g>\n    );\n  }\n}\n\nconst Bar = withStyles(() => ({\n  bar: {\n    fill: color.primaryLight(),\n    '&:hover': {\n      fill: color.primaryDark(),\n    },\n  },\n}))(RawBar);\n\nexport class Bars extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChangeCategory: PropTypes.func,\n    defineChart: PropTypes.bool,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n    histogram: PropTypes.bool,\n  };\n\n  render() {\n    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram } = this.props;\n\n    return (\n      <Group>\n        {(data || []).map((d, index) => (\n          <Bar\n            value={d.value}\n            interactive={defineChart || d.interactive}\n            defineChart={defineChart}\n            label={d.label}\n            xBand={xBand}\n            index={index}\n            key={`bar-${d.label}-${d.value}-${index}`}\n            onChangeCategory={(category) => onChangeCategory(index, category)}\n            graphProps={graphProps}\n            correctness={d.correctness}\n            barColor={\n              histogram &&\n              (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])\n            }\n          />\n        ))}\n      </Group>\n    );\n  }\n}\n\nexport default Bars;\n"],"file":"bars.js"}
+{"version":3,"sources":["../../../src/bars/common/bars.jsx"],"names":["log","histogramColors","hoverHistogramColors","calculateFillColor","isHovered","barColor","index","length","color","primaryDark","RawBar","props","e","mouseX","clientX","mouseY","clientY","isMouseInside","isMouseInsideSvgElement","setState","gBoundingBox","gRef","getBoundingClientRect","left","right","top","bottom","dragValue","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","window","addEventListener","handleMouseMove","removeEventListener","graphProps","classes","xBand","interactive","correctness","defineChart","scale","range","fillColor","v","Number","isFinite","barWidth","bandwidth","barHeight","y","max","barX","rawY","yy","Component","DraggableHandle","DragHandle","ref","handleMouseEnter","handleMouseLeave","bar","fill","dragStop","React","PropTypes","string","func","number","object","isRequired","types","GraphPropsType","bool","shape","Bar","primaryLight","Bars","data","histogram","map","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { color } from '@pie-lib/render-ui';\nimport { Bar as VxBar } from '@vx/shape';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport debug from 'debug';\nimport { bandKey } from '../../utils';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\n\nconst log = debug('pie-lib:chart:bars');\nconst histogramColors = [\n  '#006699',\n  '#F59B00',\n  '#08916D',\n  '#529EE0',\n  '#52B7D8',\n  '#D9A6C2',\n  '#FFB03B',\n  '#54A77B',\n  '#E16032',\n  '#4FD2D2',\n  '#F0E442',\n  '#E287B2',\n];\nconst hoverHistogramColors = [\n  '#003754',\n  '#975616',\n  '#00503B',\n  '#225982',\n  '#1F687D',\n  '#825E6F',\n  '#996428',\n  '#255E44',\n  '#8A331F',\n  '#167A7A',\n  '#91862D',\n  '#894A65',\n];\n\nconst calculateFillColor = (isHovered, barColor, index, hoverHistogramColors) => {\n  if (isHovered && barColor) {\n    return hoverHistogramColors[index % hoverHistogramColors.length];\n  }\n  if (isHovered) {\n    return color.primaryDark();\n  }\n  return barColor || null;\n};\n\nexport class RawBar extends React.Component {\n  static propTypes = {\n    barColor: PropTypes.string,\n    onChangeCategory: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      isHovered: false,\n    };\n    this.mouseX = 0;\n    this.mouseY = 0;\n  }\n\n  componentDidMount() {\n    window.addEventListener('mousemove', this.handleMouseMove);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('mousemove', this.handleMouseMove);\n  }\n\n  handleMouseMove = (e) => {\n    // Update mouse position\n    this.mouseX = e.clientX;\n    this.mouseY = e.clientY;\n    // Check if the mouse is inside the <g> element\n    const isMouseInside = this.isMouseInsideSvgElement();\n    this.setState({ isHovered: isMouseInside });\n  };\n\n  isMouseInsideSvgElement = () => {\n    const gBoundingBox = this.gRef.getBoundingClientRect();\n    // Check if the mouse position is within the bounding box\n    return (\n      this.mouseX >= gBoundingBox.left &&\n      this.mouseX <= gBoundingBox.right &&\n      this.mouseY >= gBoundingBox.top &&\n      this.mouseY <= gBoundingBox.bottom\n    );\n  };\n\n  handleMouseEnter = () => {\n    this.setState({ isHovered: true });\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ isHovered: false });\n  };\n\n  setDragValue = (dragValue) => this.setState({ dragValue });\n\n  dragStop = () => {\n    const { label, onChangeCategory } = this.props;\n    const { dragValue } = this.state;\n    log('[dragStop]', dragValue);\n\n    if (dragValue !== undefined) {\n      onChangeCategory({ label, value: dragValue });\n    }\n\n    this.setDragValue(undefined);\n  };\n\n  dragValue = (existing, next) => {\n    log('[dragValue] next:', next);\n\n    this.setDragValue(next);\n  };\n\n  render() {\n    const {\n      graphProps,\n      value,\n      label,\n      classes,\n      xBand,\n      index,\n      interactive,\n      correctness,\n      barColor,\n      defineChart,\n    } = this.props;\n    const { scale, range } = graphProps;\n    const { dragValue, isHovered } = this.state;\n\n    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors);\n    const v = Number.isFinite(dragValue) ? dragValue : value;\n    const barWidth = xBand.bandwidth();\n    const barHeight = scale.y(range.max - v);\n    const barX = xBand(bandKey({ label }, index));\n    const rawY = range.max - v;\n    const yy = range.max - rawY;\n    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n    const Component = interactive ? DraggableHandle : DragHandle;\n\n    return (\n      <g\n        ref={(ref) => (this.gRef = ref)}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onTouchStart={this.handleMouseEnter}\n        onTouchEnd={this.handleMouseLeave}\n      >\n        <VxBar\n          x={barX}\n          y={scale.y(yy)}\n          width={barWidth}\n          height={barHeight}\n          className={classes.bar}\n          style={{ fill: fillColor }}\n        />\n        <Component\n          x={barX}\n          y={v}\n          defineChart={defineChart}\n          interactive={interactive}\n          width={barWidth}\n          onDrag={(v) => this.dragValue(value, v)}\n          onDragStop={this.dragStop}\n          graphProps={graphProps}\n          correctness={correctness}\n          isHovered={isHovered}\n          color={fillColor}\n        />\n      </g>\n    );\n  }\n}\n\nconst Bar = withStyles(() => ({\n  bar: {\n    fill: color.primaryLight(),\n    '&:hover': {\n      fill: color.primaryDark(),\n    },\n  },\n}))(RawBar);\n\nexport class Bars extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChangeCategory: PropTypes.func,\n    defineChart: PropTypes.bool,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n    histogram: PropTypes.bool,\n  };\n\n  render() {\n    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram } = this.props;\n\n    return (\n      <Group>\n        {(data || []).map((d, index) => (\n          <Bar\n            value={d.value}\n            interactive={defineChart || d.interactive}\n            defineChart={defineChart}\n            label={d.label}\n            xBand={xBand}\n            index={index}\n            key={`bar-${d.label}-${d.value}-${index}`}\n            onChangeCategory={(category) => onChangeCategory(index, category)}\n            graphProps={graphProps}\n            correctness={d.correctness}\n            barColor={\n              histogram &&\n              (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])\n            }\n          />\n        ))}\n      </Group>\n    );\n  }\n}\n\nexport default Bars;\n"],"file":"bars.js"}

package/lib/chart-type.js

@@ -42,15 +42,15 @@ var ChartType = (0, _styles.withStyles)(function () {
     variant: 'outlined',
     className: classes.chartType
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
-    htmlFor: "type-helper",
+    id: "type-helper-label",
     className: classes.chartTypeLabel
   }, chartTypeLabel), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    labelId: "type-helper-label",
     value: value,
     onChange: onChange,
-    labelWidth: 75,
     input: /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], {
-      name: "type",
-      id: "type-helper"
+      labelWidth: 75,
+      name: "type"
     })
   }, (availableChartTypes === null || availableChartTypes === void 0 ? void 0 : availableChartTypes.histogram) && /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
     value: 'histogram'

package/lib/chart-type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart-type.js"],"names":["ChartType","chartType","width","chartTypeLabel","backgroundColor","onChange","value","classes","availableChartTypes","histogram","bar","lineDot","lineCross","dotPlot","linePlot"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,wBAAW;AAAA,SAAO;AAClCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,KAAK,EAAE;AADE,KADuB;AAIlCC,IAAAA,cAAc,EAAE;AACdC,MAAAA,eAAe,EAAE;AADH;AAJkB,GAAP;AAAA,CAAX,EAOd;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,KAAb,QAAaA,KAAb;AAAA,MAAoBC,OAApB,QAAoBA,OAApB;AAAA,MAA6BC,mBAA7B,QAA6BA,mBAA7B;AAAA,MAAkDL,cAAlD,QAAkDA,cAAlD;AAAA,sBACF;AAAK,IAAA,SAAS,EAAEI,OAAO,CAACN;AAAxB,kBACE,gCAAC,uBAAD;AAAa,IAAA,OAAO,EAAE,UAAtB;AAAkC,IAAA,SAAS,EAAEM,OAAO,CAACN;AAArD,kBACE,gCAAC,sBAAD;AAAY,IAAA,OAAO,EAAC,aAApB;AAAkC,IAAA,SAAS,EAAEM,OAAO,CAACJ;AAArD,KACGA,cADH,CADF,eAKE,gCAAC,kBAAD;AAAQ,IAAA,KAAK,EAAEG,KAAf;AAAsB,IAAA,QAAQ,EAAED,QAAhC;AAA0C,IAAA,UAAU,EAAE,EAAtD;AAA0D,IAAA,KAAK,eAAE,gCAAC,yBAAD;AAAe,MAAA,IAAI,EAAC,MAApB;AAA2B,MAAA,EAAE,EAAC;AAA9B;AAAjE,KACG,CAAAG,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEC,SAArB,kBAAkC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA+BD,mBAAmB,CAACC,SAAnD,CADrC,EAEG,CAAAD,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEE,GAArB,kBAA4B,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAAyBF,mBAAmB,CAACE,GAA7C,CAF/B,EAGG,CAAAF,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEG,OAArB,kBAAgC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA6BH,mBAAmB,CAACG,OAAjD,CAHnC,EAIG,CAAAH,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEI,SAArB,kBAAkC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA+BJ,mBAAmB,CAACI,SAAnD,CAJrC,EAKG,CAAAJ,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEK,OAArB,kBAAgC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA6BL,mBAAmB,CAACK,OAAjD,CALnC,EAMG,CAAAL,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEM,QAArB,kBAAiC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA8BN,mBAAmB,CAACM,QAAlD,CANpC,CALF,CADF,CADE;AAAA,CAPc,CAAlB;eA0Bed,S","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Select from '@material-ui/core/Select';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\n\nconst ChartType = withStyles(() => ({\n  chartType: {\n    width: '160px',\n  },\n  chartTypeLabel: {\n    backgroundColor: 'transparent',\n  },\n}))(({ onChange, value, classes, availableChartTypes, chartTypeLabel }) => (\n  <div className={classes.chartType}>\n    <FormControl variant={'outlined'} className={classes.chartType}>\n      <InputLabel htmlFor=\"type-helper\" className={classes.chartTypeLabel}>\n        {chartTypeLabel}\n      </InputLabel>\n\n      <Select value={value} onChange={onChange} labelWidth={75} input={<OutlinedInput name=\"type\" id=\"type-helper\" />}>\n        {availableChartTypes?.histogram && <MenuItem value={'histogram'}>{availableChartTypes.histogram}</MenuItem>}\n        {availableChartTypes?.bar && <MenuItem value={'bar'}>{availableChartTypes.bar}</MenuItem>}\n        {availableChartTypes?.lineDot && <MenuItem value={'lineDot'}>{availableChartTypes.lineDot}</MenuItem>}\n        {availableChartTypes?.lineCross && <MenuItem value={'lineCross'}>{availableChartTypes.lineCross}</MenuItem>}\n        {availableChartTypes?.dotPlot && <MenuItem value={'dotPlot'}>{availableChartTypes.dotPlot}</MenuItem>}\n        {availableChartTypes?.linePlot && <MenuItem value={'linePlot'}>{availableChartTypes.linePlot}</MenuItem>}\n      </Select>\n    </FormControl>\n  </div>\n));\n\nexport default ChartType;\n"],"file":"chart-type.js"}
+{"version":3,"sources":["../src/chart-type.js"],"names":["ChartType","chartType","width","chartTypeLabel","backgroundColor","onChange","value","classes","availableChartTypes","histogram","bar","lineDot","lineCross","dotPlot","linePlot"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,wBAAW;AAAA,SAAO;AAClCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,KAAK,EAAE;AADE,KADuB;AAIlCC,IAAAA,cAAc,EAAE;AACdC,MAAAA,eAAe,EAAE;AADH;AAJkB,GAAP;AAAA,CAAX,EAOd;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,KAAb,QAAaA,KAAb;AAAA,MAAoBC,OAApB,QAAoBA,OAApB;AAAA,MAA6BC,mBAA7B,QAA6BA,mBAA7B;AAAA,MAAkDL,cAAlD,QAAkDA,cAAlD;AAAA,sBACF;AAAK,IAAA,SAAS,EAAEI,OAAO,CAACN;AAAxB,kBACE,gCAAC,uBAAD;AAAa,IAAA,OAAO,EAAE,UAAtB;AAAkC,IAAA,SAAS,EAAEM,OAAO,CAACN;AAArD,kBACE,gCAAC,sBAAD;AAAY,IAAA,EAAE,EAAC,mBAAf;AAAmC,IAAA,SAAS,EAAEM,OAAO,CAACJ;AAAtD,KACGA,cADH,CADF,eAIE,gCAAC,kBAAD;AACE,IAAA,OAAO,EAAC,mBADV;AAEE,IAAA,KAAK,EAAEG,KAFT;AAGE,IAAA,QAAQ,EAAED,QAHZ;AAIE,IAAA,KAAK,eAAE,gCAAC,yBAAD;AAAe,MAAA,UAAU,EAAE,EAA3B;AAA+B,MAAA,IAAI,EAAC;AAApC;AAJT,KAMG,CAAAG,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEC,SAArB,kBAAkC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA+BD,mBAAmB,CAACC,SAAnD,CANrC,EAOG,CAAAD,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEE,GAArB,kBAA4B,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAAyBF,mBAAmB,CAACE,GAA7C,CAP/B,EAQG,CAAAF,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEG,OAArB,kBAAgC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA6BH,mBAAmB,CAACG,OAAjD,CARnC,EASG,CAAAH,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEI,SAArB,kBAAkC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA+BJ,mBAAmB,CAACI,SAAnD,CATrC,EAUG,CAAAJ,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEK,OAArB,kBAAgC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA6BL,mBAAmB,CAACK,OAAjD,CAVnC,EAWG,CAAAL,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEM,QAArB,kBAAiC,gCAAC,oBAAD;AAAU,IAAA,KAAK,EAAE;AAAjB,KAA8BN,mBAAmB,CAACM,QAAlD,CAXpC,CAJF,CADF,CADE;AAAA,CAPc,CAAlB;eA8Bed,S","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Select from '@material-ui/core/Select';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\n\nconst ChartType = withStyles(() => ({\n  chartType: {\n    width: '160px',\n  },\n  chartTypeLabel: {\n    backgroundColor: 'transparent',\n  },\n}))(({ onChange, value, classes, availableChartTypes, chartTypeLabel }) => (\n  <div className={classes.chartType}>\n    <FormControl variant={'outlined'} className={classes.chartType}>\n      <InputLabel id=\"type-helper-label\" className={classes.chartTypeLabel}>\n        {chartTypeLabel}\n      </InputLabel>\n      <Select\n        labelId=\"type-helper-label\"\n        value={value}\n        onChange={onChange}\n        input={<OutlinedInput labelWidth={75} name=\"type\" />}\n      >\n        {availableChartTypes?.histogram && <MenuItem value={'histogram'}>{availableChartTypes.histogram}</MenuItem>}\n        {availableChartTypes?.bar && <MenuItem value={'bar'}>{availableChartTypes.bar}</MenuItem>}\n        {availableChartTypes?.lineDot && <MenuItem value={'lineDot'}>{availableChartTypes.lineDot}</MenuItem>}\n        {availableChartTypes?.lineCross && <MenuItem value={'lineCross'}>{availableChartTypes.lineCross}</MenuItem>}\n        {availableChartTypes?.dotPlot && <MenuItem value={'dotPlot'}>{availableChartTypes.dotPlot}</MenuItem>}\n        {availableChartTypes?.linePlot && <MenuItem value={'linePlot'}>{availableChartTypes.linePlot}</MenuItem>}\n      </Select>\n    </FormControl>\n  </div>\n));\n\nexport default ChartType;\n"],"file":"chart-type.js"}

package/lib/chart-types.js

@@ -15,9 +15,9 @@ var _lineDot = _interopRequireDefault(require("./line/line-dot"));
 
 var _lineCross = _interopRequireDefault(require("./line/line-cross"));
 
-var _dot = _interopRequireDefault(require("./plot/dot"));
+var _dot = _interopRequireDefault(require("@pie-lib/plot/dot"));
 
-var _line = _interopRequireDefault(require("./plot/line"));
+var _line = _interopRequireDefault(require("@pie-lib/plot/line"));
 
 var _default = {
   Bar: _bar["default"],

package/lib/chart-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart-types.js"],"names":["Bar","Histogram","LineDot","DotPlot","LinePlot","LineCross"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;eAEe;AAAEA,EAAAA,GAAG,EAAHA,eAAF;AAAOC,EAAAA,SAAS,EAATA,qBAAP;AAAkBC,EAAAA,OAAO,EAAPA,mBAAlB;AAA2BC,EAAAA,OAAO,EAAPA,eAA3B;AAAoCC,EAAAA,QAAQ,EAARA,gBAApC;AAA8CC,EAAAA,SAAS,EAATA;AAA9C,C","sourcesContent":["import Bar from './bars/bar';\nimport Histogram from './bars/histogram';\nimport LineDot from './line/line-dot';\nimport LineCross from './line/line-cross';\nimport DotPlot from './plot/dot';\nimport LinePlot from './plot/line';\n\nexport default { Bar, Histogram, LineDot, DotPlot, LinePlot, LineCross };\n"],"file":"chart-types.js"}
+{"version":3,"sources":["../src/chart-types.js"],"names":["Bar","Histogram","LineDot","DotPlot","LinePlot","LineCross"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;eAEe;AAAEA,EAAAA,GAAG,EAAHA,eAAF;AAAOC,EAAAA,SAAS,EAATA,qBAAP;AAAkBC,EAAAA,OAAO,EAAPA,mBAAlB;AAA2BC,EAAAA,OAAO,EAAPA,eAA3B;AAAoCC,EAAAA,QAAQ,EAARA,gBAApC;AAA8CC,EAAAA,SAAS,EAATA;AAA9C,C","sourcesContent":["import Bar from './bars/bar';\nimport Histogram from './bars/histogram';\nimport LineDot from './line/line-dot';\nimport LineCross from './line/line-cross';\nimport DotPlot from '@pie-lib/plot/dot';\nimport LinePlot from '@pie-lib/plot/line';\n\nexport default { Bar, Histogram, LineDot, DotPlot, LinePlot, LineCross };\n"],"file":"chart-types.js"}

package/lib/chart.js

@@ -77,7 +77,8 @@ var Chart = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, Chart);
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      charts: [_chartTypes["default"].Bar(), _chartTypes["default"].Histogram(), _chartTypes["default"].LineDot(), _chartTypes["default"].LineCross(), _chartTypes["default"].DotPlot(), _chartTypes["default"].LinePlot()]
+      charts: [_chartTypes["default"].Bar(), _chartTypes["default"].Histogram(), _chartTypes["default"].LineDot(), _chartTypes["default"].LineCross(), _chartTypes["default"].DotPlot(), _chartTypes["default"].LinePlot()],
+      autoFocus: false
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAlertDialog", function (open, callback) {
       return _this.setState({
@@ -149,9 +150,12 @@ var Chart = /*#__PURE__*/function (_React$Component) {
           }
         });
       } else {
+        _this.setState({
+          autoFocus: true
+        });
+
         onDataChange([].concat((0, _toConsumableArray2["default"])(data), [{
           inDefineChart: defineChart,
-          autoFocus: true,
           label: categoryDefaultLabel || translator.t('charting.newLabel', {
             lng: language
           }),
@@ -172,6 +176,11 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         });
       }) : [];
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetAutoFocus", function () {
+      _this.setState({
+        autoFocus: false
+      });
+    });
     _this.state = {
       dialog: {
         open: false
@@ -212,7 +221,8 @@ var Chart = /*#__PURE__*/function (_React$Component) {
           error = _this$props4.error,
           _this$props4$mathMlOp = _this$props4.mathMlOptions,
           mathMlOptions = _this$props4$mathMlOp === void 0 ? {} : _this$props4$mathMlOp,
-          language = _this$props4.language;
+          language = _this$props4.language,
+          labelsCharactersLimit = _this$props4.labelsCharactersLimit;
       var chartType = this.props.chartType;
       var dialog = this.state.dialog;
       var defineChart = this.props.defineChart || false;
@@ -293,12 +303,16 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         rootRef: function rootRef(r) {
           return _this2.rootNode = r;
         },
-        mathMlOptions: mathMlOptions
+        mathMlOptions: mathMlOptions,
+        labelsCharactersLimit: labelsCharactersLimit
       }, rootCommon), /*#__PURE__*/_react["default"].createElement(_grid["default"], (0, _extends2["default"])({}, common, {
         xBand: xBand,
         rowTickValues: horizontalLines,
         columnTickValues: verticalLines
-      })), /*#__PURE__*/_react["default"].createElement(_axes["default"], (0, _extends2["default"])({}, common, {
+      })), /*#__PURE__*/_react["default"].createElement(_axes["default"], (0, _extends2["default"])({
+        autoFocus: this.state.autoFocus,
+        onAutoFocusUsed: this.resetAutoFocus
+      }, common, {
         defineChart: defineChart,
         categories: categories,
         xBand: xBand,
@@ -379,7 +393,9 @@ exports.Chart = Chart;
   chartingOptions: _propTypes["default"].object,
   changeInteractiveEnabled: _propTypes["default"].bool,
   changeEditableEnabled: _propTypes["default"].bool,
-  language: _propTypes["default"].string
+  language: _propTypes["default"].string,
+  mathMlOptions: _propTypes["default"].object,
+  labelsCharactersLimit: _propTypes["default"].number
 });
 (0, _defineProperty2["default"])(Chart, "defaultProps", {
   size: {
@@ -398,10 +414,9 @@ var styles = function styles(theme) {
       justifyContent: 'space-between',
       padding: theme.spacing.unit,
       backgroundColor: _renderUi.color.primaryLight(),
-      borderTop: "solid 1px ".concat(_renderUi.color.primaryDark()),
-      borderBottom: "solid 0px ".concat(_renderUi.color.primaryDark()),
-      borderLeft: "solid 1px ".concat(_renderUi.color.primaryDark()),
-      borderRight: "solid 1px ".concat(_renderUi.color.primaryDark())
+      '& button': {
+        fontSize: theme.typography.fontSize
+      }
     },
     svg: {
       overflow: 'visible'

package/lib/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart.jsx"],"names":["translator","Translator","log","Chart","props","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","open","callback","setState","dialog","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","categoryDefaultLabel","defineChart","categoryDefaults","language","length","title","t","lng","text","count","onConfirm","handleAlertDialog","inDefineChart","autoFocus","label","value","deletable","editable","interactive","map","d","maskUid","generateMaskId","Math","random","toFixed","classes","className","domain","range","chartingOptions","size","onChangeTitle","onChangeLabels","labelsPlaceholders","titlePlaceholder","addCategoryEnabled","changeInteractiveEnabled","changeEditableEnabled","showPixelGuides","error","mathMlOptions","width","height","labels","left","bottom","getChart","categories","getFilteredCategories","correctValues","verticalLines","horizontalLines","leftAxis","common","graphProps","rootNode","maskSize","x","y","scale","xBand","bandWidth","bandwidth","barWidth","max","increaseHeight","top","rootCommon","chartBox","controls","toolMenu","addCategory","r","changeData","changeCategory","onClose","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","step","labelStep","array","func","any","bool","theme","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","svg","overflow","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 { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dialog: {\n        open: false,\n      },\n    };\n    this.maskUid = this.generateMaskId();\n  }\n\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    labelsPlaceholders: PropTypes.object,\n    title: PropTypes.string,\n    titlePlaceholder: PropTypes.string,\n    onDataChange: PropTypes.func,\n    onChangeLabels: PropTypes.func,\n    onChangeTitle: PropTypes.func,\n    error: PropTypes.any,\n    addCategoryEnabled: PropTypes.bool,\n    showPixelGuides: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    categoryDefaults: PropTypes.object,\n    defineChart: PropTypes.bool,\n    theme: PropTypes.object,\n    chartingOptions: PropTypes.object,\n    changeInteractiveEnabled: PropTypes.bool,\n    changeEditableEnabled: PropTypes.bool,\n    language: PropTypes.string,\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  generateMaskId() {\n    return 'chart-' + (Math.random() * 10000).toFixed();\n  }\n\n  handleAlertDialog = (open, callback) =>\n    this.setState(\n      {\n        dialog: { open },\n      },\n      callback,\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 = () => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart, categoryDefaults, language } = this.props;\n\n    if ((data || []).length > 19) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: translator.t('common:warning', { lng: language }),\n          text: translator.t('charting.reachedLimit_other', { count: 20, lng: language }),\n          onConfirm: () => this.handleAlertDialog(false),\n        },\n      });\n    } else {\n      onDataChange([\n        ...data,\n        {\n          inDefineChart: defineChart,\n          autoFocus: true,\n          label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),\n          value: 0,\n          deletable: true,\n          editable: categoryDefaults ? categoryDefaults?.editable : true,\n          interactive: categoryDefaults ? categoryDefaults?.interactive : true,\n        },\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      chartingOptions,\n      size,\n      title,\n      onChangeTitle,\n      onChangeLabels,\n      labelsPlaceholders,\n      titlePlaceholder,\n      addCategoryEnabled,\n      changeInteractiveEnabled,\n      changeEditableEnabled,\n      showPixelGuides,\n      error,\n      mathMlOptions = {},\n      language,\n    } = this.props;\n    let { chartType } = this.props;\n\n    const { dialog } = this.state;\n    const defineChart = this.props.defineChart || false;\n\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(correctValues.range, chartType);\n    const common = {\n      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -75, 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 ? 160 : 60;\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, classes.chartBox, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory()}\n            language={language}\n          />\n        </div>\n\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          rootRef={(r) => (this.rootNode = r)}\n          mathMlOptions={mathMlOptions}\n          {...rootCommon}\n        >\n          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />\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            chartingOptions={chartingOptions}\n            changeInteractiveEnabled={changeInteractiveEnabled}\n            changeEditableEnabled={changeEditableEnabled}\n            top={top}\n            error={error}\n          />\n          <mask id={`${this.maskUid}`}>\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask={`url('#${this.maskUid}')`}>\n            <ChartComponent\n              {...common}\n              data={categories}\n              height={rootCommon.graphProps.size.height}\n              defineChart={defineChart}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n            />\n          </g>\n        </Root>\n        <AlertDialog\n          open={dialog.open}\n          title={dialog.title}\n          text={dialog.text}\n          onClose={dialog.onClose}\n          onConfirm={dialog.onConfirm}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)',\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  svg: {\n    overflow: 'visible',\n  },\n  toolMenu: {\n    minHeight: '36px',\n  },\n  chartBox: {\n    width: 'min-content',\n  },\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"file":"chart.js"}
+{"version":3,"sources":["../src/chart.jsx"],"names":["translator","Translator","log","Chart","props","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","autoFocus","open","callback","setState","dialog","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","categoryDefaultLabel","defineChart","categoryDefaults","language","length","title","t","lng","text","count","onConfirm","handleAlertDialog","inDefineChart","label","value","deletable","editable","interactive","map","d","maskUid","generateMaskId","Math","random","toFixed","classes","className","domain","range","chartingOptions","size","onChangeTitle","onChangeLabels","labelsPlaceholders","titlePlaceholder","addCategoryEnabled","changeInteractiveEnabled","changeEditableEnabled","showPixelGuides","error","mathMlOptions","labelsCharactersLimit","width","height","labels","left","bottom","getChart","categories","getFilteredCategories","correctValues","verticalLines","horizontalLines","leftAxis","common","graphProps","rootNode","maskSize","x","y","scale","xBand","bandWidth","bandwidth","barWidth","max","increaseHeight","top","rootCommon","chartBox","controls","toolMenu","addCategory","r","resetAutoFocus","changeData","changeCategory","onClose","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","step","labelStep","array","func","any","bool","theme","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","fontSize","typography","svg","overflow","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 { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dialog: {\n        open: false,\n      },\n    };\n    this.maskUid = this.generateMaskId();\n  }\n\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    labelsPlaceholders: PropTypes.object,\n    title: PropTypes.string,\n    titlePlaceholder: PropTypes.string,\n    onDataChange: PropTypes.func,\n    onChangeLabels: PropTypes.func,\n    onChangeTitle: PropTypes.func,\n    error: PropTypes.any,\n    addCategoryEnabled: PropTypes.bool,\n    showPixelGuides: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    categoryDefaults: PropTypes.object,\n    defineChart: PropTypes.bool,\n    theme: PropTypes.object,\n    chartingOptions: PropTypes.object,\n    changeInteractiveEnabled: PropTypes.bool,\n    changeEditableEnabled: PropTypes.bool,\n    language: PropTypes.string,\n    mathMlOptions: PropTypes.object,\n    labelsCharactersLimit: PropTypes.number,\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    autoFocus: false,\n  };\n\n  generateMaskId() {\n    return 'chart-' + (Math.random() * 10000).toFixed();\n  }\n\n  handleAlertDialog = (open, callback) =>\n    this.setState(\n      {\n        dialog: { open },\n      },\n      callback,\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 = () => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart, categoryDefaults, language } = this.props;\n\n    if ((data || []).length > 19) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: translator.t('common:warning', { lng: language }),\n          text: translator.t('charting.reachedLimit_other', { count: 20, lng: language }),\n          onConfirm: () => this.handleAlertDialog(false),\n        },\n      });\n    } else {\n      this.setState({ autoFocus: true });\n      onDataChange([\n        ...data,\n        {\n          inDefineChart: defineChart,\n          label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),\n          value: 0,\n          deletable: true,\n          editable: categoryDefaults ? categoryDefaults?.editable : true,\n          interactive: categoryDefaults ? categoryDefaults?.interactive : true,\n        },\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  resetAutoFocus = () => {\n    this.setState({ autoFocus: false });\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      domain = {},\n      range = {},\n      chartingOptions,\n      size,\n      title,\n      onChangeTitle,\n      onChangeLabels,\n      labelsPlaceholders,\n      titlePlaceholder,\n      addCategoryEnabled,\n      changeInteractiveEnabled,\n      changeEditableEnabled,\n      showPixelGuides,\n      error,\n      mathMlOptions = {},\n      language,\n      labelsCharactersLimit,\n    } = this.props;\n    let { chartType } = this.props;\n\n    const { dialog } = this.state;\n    const defineChart = this.props.defineChart || false;\n\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(correctValues.range, chartType);\n    const common = {\n      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -75, 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 ? 160 : 60;\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, classes.chartBox, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory()}\n            language={language}\n          />\n        </div>\n\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          rootRef={(r) => (this.rootNode = r)}\n          mathMlOptions={mathMlOptions}\n          labelsCharactersLimit={labelsCharactersLimit}\n          {...rootCommon}\n        >\n          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />\n          <ChartAxes\n            autoFocus={this.state.autoFocus}\n            onAutoFocusUsed={this.resetAutoFocus}\n            {...common}\n            defineChart={defineChart}\n            categories={categories}\n            xBand={xBand}\n            leftAxis={leftAxis}\n            onChange={this.changeData}\n            onChangeCategory={this.changeCategory}\n            chartingOptions={chartingOptions}\n            changeInteractiveEnabled={changeInteractiveEnabled}\n            changeEditableEnabled={changeEditableEnabled}\n            top={top}\n            error={error}\n          />\n          <mask id={`${this.maskUid}`}>\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask={`url('#${this.maskUid}')`}>\n            <ChartComponent\n              {...common}\n              data={categories}\n              height={rootCommon.graphProps.size.height}\n              defineChart={defineChart}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n            />\n          </g>\n        </Root>\n        <AlertDialog\n          open={dialog.open}\n          title={dialog.title}\n          text={dialog.text}\n          onClose={dialog.onClose}\n          onConfirm={dialog.onConfirm}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)',\n  },\n  controls: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    backgroundColor: color.primaryLight(),\n    '& button': {\n      fontSize: theme.typography.fontSize,\n    },\n  },\n  svg: {\n    overflow: 'visible',\n  },\n  toolMenu: {\n    minHeight: '36px',\n  },\n  chartBox: {\n    width: 'min-content',\n  },\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"file":"chart.js"}

package/lib/common/drag-handle.js

@@ -52,15 +52,19 @@ var RawDragHandle = function RawDragHandle(_ref) {
     x: x,
     y: scale.y(y) - 10,
     width: width,
-    overflow: "visible"
+    overflow: "visible",
+    className: classes.svgOverflowVisible
   }, isHovered && !correctness && interactive && /*#__PURE__*/_react["default"].createElement(_dragIcon["default"], {
     width: width,
     scaleValue: scaleValue,
-    color: color
-  }), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    color: color,
+    classes: classes
+  }), interactive && !correctness && /*#__PURE__*/_react["default"].createElement("ellipse", (0, _extends2["default"])({
     cx: width / 2,
     cy: 10,
-    r: width / 2,
+    rx: width / 2 // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
+    ,
+    ry: 66,
     className: (0, _classnames["default"])(classes.transparentHandle, className)
   }, rest)), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
     id: "bottomShadow",
@@ -116,7 +120,6 @@ var DragHandle = (0, _styles.withStyles)(function () {
       '&.non-interactive': (0, _styles2.disabled)('fill')
     },
     transparentHandle: {
-      height: '20px',
       fill: 'transparent',
       clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)'
     },
@@ -131,6 +134,9 @@ var DragHandle = (0, _styles.withStyles)(function () {
       '&.non-interactive': (0, _styles2.disabled)('fill'),
       '&.incorrect': (0, _styles2.incorrect)('fill'),
       '&.correct': (0, _styles2.correct)('fill')
+    },
+    svgOverflowVisible: {
+      overflow: 'visible !important'
     }
   };
 })(RawDragHandle);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["RawDragHandle","x","y","width","graphProps","classes","className","interactive","defineChart","isHovered","correctness","color","rest","scale","scaleValue","transparentHandle","handle","value","propTypes","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","height","fill","transition","clipPath","handleContainer","secondaryDark","D","axis","fromDelta","props","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 PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\nimport { getScale } from '../utils';\nimport DragIcon from './drag-icon';\n\nconst RawDragHandle = ({\n  x,\n  y,\n  width,\n  graphProps,\n  classes,\n  className,\n  interactive,\n  defineChart,\n  isHovered,\n  correctness,\n  color,\n  ...rest\n}) => {\n  const { scale } = graphProps;\n  const scaleValue = getScale(width)?.scale;\n\n  return (\n    <svg x={x} y={scale.y(y) - 10} width={width} overflow=\"visible\">\n      {isHovered && !correctness && interactive && <DragIcon width={width} scaleValue={scaleValue} color={color} />}\n      <circle\n        cx={width / 2}\n        cy={10}\n        r={width / 2}\n        className={classNames(classes.transparentHandle, className)}\n        {...rest}\n      />\n\n      <defs>\n        <filter id=\"bottomShadow\" x=\"0\" y=\"0\" width=\"140%\" height=\"140%\">\n          <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n          <feOffset dx=\"0\" dy=\"5\" result=\"offsetblur\" />\n          <feFlood floodColor=\"#00000033\" />\n          <feComposite in2=\"offsetblur\" operator=\"in\" />\n          <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n          </feMerge>\n        </filter>\n      </defs>\n\n      {correctness && (\n        <rect\n          y={10}\n          width={width}\n          filter=\"url(#bottomShadow)\"\n          className={classNames(\n            classes.handle,\n            'handle',\n            className,\n            !interactive && 'non-interactive',\n            interactive && correctness && correctness.value,\n          )}\n          {...rest}\n        />\n      )}\n    </svg>\n  );\n};\n\nRawDragHandle.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  isHovered: PropTypes.bool,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  color: PropTypes.string,\n};\n\nexport const DragHandle = withStyles(() => ({\n  handle: {\n    height: '10px',\n    fill: 'transparent',\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    clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',\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"}
+{"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["RawDragHandle","x","y","width","graphProps","classes","className","interactive","defineChart","isHovered","correctness","color","rest","scale","scaleValue","svgOverflowVisible","transparentHandle","handle","value","propTypes","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","height","fill","transition","clipPath","handleContainer","secondaryDark","overflow","D","axis","fromDelta","props","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 PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\nimport { getScale } from '../utils';\nimport DragIcon from './drag-icon';\n\nconst RawDragHandle = ({\n  x,\n  y,\n  width,\n  graphProps,\n  classes,\n  className,\n  interactive,\n  defineChart,\n  isHovered,\n  correctness,\n  color,\n  ...rest\n}) => {\n  const { scale } = graphProps;\n  const scaleValue = getScale(width)?.scale;\n\n  return (\n    <svg x={x} y={scale.y(y) - 10} width={width} overflow=\"visible\" className={classes.svgOverflowVisible}>\n      {isHovered && !correctness && interactive && (\n        <DragIcon width={width} scaleValue={scaleValue} color={color} classes={classes} />\n      )}\n      {interactive && !correctness && (\n        <ellipse\n          cx={width / 2}\n          cy={10}\n          rx={width / 2}\n          // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area\n          ry={66}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n      )}\n\n      <defs>\n        <filter id=\"bottomShadow\" x=\"0\" y=\"0\" width=\"140%\" height=\"140%\">\n          <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n          <feOffset dx=\"0\" dy=\"5\" result=\"offsetblur\" />\n          <feFlood floodColor=\"#00000033\" />\n          <feComposite in2=\"offsetblur\" operator=\"in\" />\n          <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n          </feMerge>\n        </filter>\n      </defs>\n\n      {correctness && (\n        <rect\n          y={10}\n          width={width}\n          filter=\"url(#bottomShadow)\"\n          className={classNames(\n            classes.handle,\n            'handle',\n            className,\n            !interactive && 'non-interactive',\n            interactive && correctness && correctness.value,\n          )}\n          {...rest}\n        />\n      )}\n    </svg>\n  );\n};\n\nRawDragHandle.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  isHovered: PropTypes.bool,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  color: PropTypes.string,\n};\n\nexport const DragHandle = withStyles(() => ({\n  handle: {\n    height: '10px',\n    fill: 'transparent',\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    fill: 'transparent',\n    clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',\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  svgOverflowVisible: {\n    overflow: 'visible !important',\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/common/drag-icon.js

@@ -16,36 +16,19 @@ var DragIcon = function DragIcon(_ref) {
 
   var width = _ref.width,
       scaleValue = _ref.scaleValue,
-      color = _ref.color;
+      color = _ref.color,
+      classes = _ref.classes;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     x: (0, _utils.getAdjustedX)(width, scaleValue),
     y: (_getScale = (0, _utils.getScale)(width)) === null || _getScale === void 0 ? void 0 : _getScale.deltay,
     color: color,
+    width: width,
+    height: width,
     overflow: "visible",
-    filter: "url(#svgDropShadow)"
-  }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
-    id: "svgDropShadow",
-    x: "-20%",
-    y: "-20%",
-    width: "140%",
-    height: "140%"
-  }, /*#__PURE__*/_react["default"].createElement("feGaussianBlur", {
-    "in": "SourceAlpha",
-    stdDeviation: "3"
-  }), /*#__PURE__*/_react["default"].createElement("feOffset", {
-    dx: "0",
-    dy: "5",
-    result: "offsetblur"
-  }), /*#__PURE__*/_react["default"].createElement("feFlood", {
-    floodColor: "#00000033"
-  }), /*#__PURE__*/_react["default"].createElement("feComposite", {
-    in2: "offsetblur",
-    operator: "in"
-  }), /*#__PURE__*/_react["default"].createElement("feMerge", null, /*#__PURE__*/_react["default"].createElement("feMergeNode", null), /*#__PURE__*/_react["default"].createElement("feMergeNode", {
-    "in": "SourceGraphic"
-  })))), /*#__PURE__*/_react["default"].createElement("g", {
+    viewBox: "0 0 ".concat(width, " ").concat(width),
+    className: classes.svgOverflowVisible
+  }, /*#__PURE__*/_react["default"].createElement("g", {
     xmlns: "http://www.w3.org/2000/svg",
-    filter: "url(#filter0_d_2312_1804)",
     fill: "currentColor",
     stroke: "currentColor",
     transform: "scale(".concat(scaleValue, ")")

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/drag-icon.jsx"],"names":["DragIcon","width","scaleValue","color","deltay"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW;AAAA;;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,MAAsBC,KAAtB,QAAsBA,KAAtB;AAAA,sBACf;AACE,IAAA,CAAC,EAAE,yBAAaF,KAAb,EAAoBC,UAApB,CADL;AAEE,IAAA,CAAC,eAAE,qBAASD,KAAT,CAAF,8CAAE,UAAiBG,MAFtB;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,QAAQ,EAAC,SAJX;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,2DACE;AAAQ,IAAA,EAAE,EAAC,eAAX;AAA2B,IAAA,CAAC,EAAC,MAA7B;AAAoC,IAAA,CAAC,EAAC,MAAtC;AAA6C,IAAA,KAAK,EAAC,MAAnD;AAA0D,IAAA,MAAM,EAAC;AAAjE,kBACE;AAAgB,UAAG,aAAnB;AAAiC,IAAA,YAAY,EAAC;AAA9C,IADF,eAEE;AAAU,IAAA,EAAE,EAAC,GAAb;AAAiB,IAAA,EAAE,EAAC,GAApB;AAAwB,IAAA,MAAM,EAAC;AAA/B,IAFF,eAGE;AAAS,IAAA,UAAU,EAAC;AAApB,IAHF,eAIE;AAAa,IAAA,GAAG,EAAC,YAAjB;AAA8B,IAAA,QAAQ,EAAC;AAAvC,IAJF,eAKE,8DACE,oDADF,eAEE;AAAa,UAAG;AAAhB,IAFF,CALF,CADF,CAPF,eAmBE;AACE,IAAA,KAAK,EAAC,4BADR;AAEE,IAAA,MAAM,EAAC,2BAFT;AAGE,IAAA,IAAI,EAAC,cAHP;AAIE,IAAA,MAAM,EAAC,cAJT;AAKE,IAAA,SAAS,kBAAWD,UAAX;AALX,kBAOE;AAAQ,IAAA,EAAE,EAAC,MAAX;AAAkB,IAAA,EAAE,EAAC,MAArB;AAA4B,IAAA,CAAC,EAAC,IAA9B;AAAmC,IAAA,IAAI,EAAC,OAAxC;AAAgD,IAAA,MAAM,EAAC;AAAvD,IAPF,eAQE;AACE,IAAA,CAAC,EAAC,6LADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IARF,eAYE;AACE,IAAA,CAAC,EAAC,mMADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IAZF,CAnBF,CADe;AAAA,CAAjB;;eAwCeF,Q","sourcesContent":["import React from 'react';\nimport { getAdjustedX, getScale } from '../utils';\n\nconst DragIcon = ({ width, scaleValue, color }) => (\n  <svg\n    x={getAdjustedX(width, scaleValue)}\n    y={getScale(width)?.deltay}\n    color={color}\n    overflow=\"visible\"\n    filter=\"url(#svgDropShadow)\"\n  >\n    <defs>\n      <filter id=\"svgDropShadow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n        <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n        <feOffset dx=\"0\" dy=\"5\" result=\"offsetblur\" />\n        <feFlood floodColor=\"#00000033\" />\n        <feComposite in2=\"offsetblur\" operator=\"in\" />\n        <feMerge>\n          <feMergeNode />\n          <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n      </filter>\n    </defs>\n    <g\n      xmlns=\"http://www.w3.org/2000/svg\"\n      filter=\"url(#filter0_d_2312_1804)\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n      transform={`scale(${scaleValue})`}\n    >\n      <circle cx=\"28.5\" cy=\"23.5\" r=\"22\" fill=\"white\" stroke=\"currentColor\" />\n      <path\n        d=\"M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M23.5 25.75L33.5391 25.75C34.2422 25.75 34.5938 26.5703 34.0859 27.0781L29.0859 32.0781C28.7734 32.3906 28.2656 32.3906 27.9531 32.0781L22.9531 27.0781C22.4453 26.5703 22.7969 25.75 23.5 25.75Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n  </svg>\n);\n\nexport default DragIcon;\n"],"file":"drag-icon.js"}
+{"version":3,"sources":["../../src/common/drag-icon.jsx"],"names":["DragIcon","width","scaleValue","color","classes","deltay","svgOverflowVisible"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW;AAAA;;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,MAAsBC,KAAtB,QAAsBA,KAAtB;AAAA,MAA6BC,OAA7B,QAA6BA,OAA7B;AAAA,sBACf;AACE,IAAA,CAAC,EAAE,yBAAaH,KAAb,EAAoBC,UAApB,CADL;AAEE,IAAA,CAAC,eAAE,qBAASD,KAAT,CAAF,8CAAE,UAAiBI,MAFtB;AAGE,IAAA,KAAK,EAAEF,KAHT;AAIE,IAAA,KAAK,EAAEF,KAJT;AAKE,IAAA,MAAM,EAAEA,KALV;AAME,IAAA,QAAQ,EAAC,SANX;AAOE,IAAA,OAAO,gBAASA,KAAT,cAAkBA,KAAlB,CAPT;AAQE,IAAA,SAAS,EAAEG,OAAO,CAACE;AARrB,kBAUE;AAAG,IAAA,KAAK,EAAC,4BAAT;AAAsC,IAAA,IAAI,EAAC,cAA3C;AAA0D,IAAA,MAAM,EAAC,cAAjE;AAAgF,IAAA,SAAS,kBAAWJ,UAAX;AAAzF,kBACE;AAAQ,IAAA,EAAE,EAAC,MAAX;AAAkB,IAAA,EAAE,EAAC,MAArB;AAA4B,IAAA,CAAC,EAAC,IAA9B;AAAmC,IAAA,IAAI,EAAC,OAAxC;AAAgD,IAAA,MAAM,EAAC;AAAvD,IADF,eAEE;AACE,IAAA,CAAC,EAAC,6LADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IAFF,eAME;AACE,IAAA,CAAC,EAAC,mMADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IANF,CAVF,CADe;AAAA,CAAjB;;eAyBeF,Q","sourcesContent":["import React from 'react';\nimport { getAdjustedX, getScale } from '../utils';\n\nconst DragIcon = ({ width, scaleValue, color, classes }) => (\n  <svg\n    x={getAdjustedX(width, scaleValue)}\n    y={getScale(width)?.deltay}\n    color={color}\n    width={width}\n    height={width}\n    overflow=\"visible\"\n    viewBox={`0 0 ${width} ${width}`}\n    className={classes.svgOverflowVisible}\n  >\n    <g xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" stroke=\"currentColor\" transform={`scale(${scaleValue})`}>\n      <circle cx=\"28.5\" cy=\"23.5\" r=\"22\" fill=\"white\" stroke=\"currentColor\" />\n      <path\n        d=\"M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M23.5 25.75L33.5391 25.75C34.2422 25.75 34.5938 26.5703 34.0859 27.0781L29.0859 32.0781C28.7734 32.3906 28.2656 32.3906 27.9531 32.0781L22.9531 27.0781C22.4453 26.5703 22.7969 25.75 23.5 25.75Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n  </svg>\n);\n\nexport default DragIcon;\n"],"file":"drag-icon.js"}

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

@@ -97,20 +97,25 @@ var RawDragHandle = /*#__PURE__*/function (_React$Component) {
 var DragHandle = (0, _index.withStyles)(function () {
   return {
     handle: {
-      fill: _renderUi.color.secondary(),
+      fill: _renderUi.color.defaults.SECONDARY,
       transition: 'fill 200ms linear, height 200ms linear',
       '&:hover': {
-        fill: _renderUi.color.secondaryDark()
+        fill: _renderUi.color.defaults.SECONDARY_DARK
       },
       '&.correct': (0, _styles.correct)('fill'),
       '&.incorrect': (0, _styles.incorrect)('fill'),
       '&.non-interactive': (0, _styles.disabled)('fill')
     },
+    transparentHandle: {
+      height: '20px',
+      fill: 'transparent',
+      stroke: 'transparent'
+    },
     line: {
-      stroke: _renderUi.color.secondary(),
+      stroke: _renderUi.color.defaults.SECONDARY,
       transition: 'fill 200ms linear, height 200ms linear',
       '&:hover': {
-        stroke: _renderUi.color.secondaryDark()
+        stroke: _renderUi.color.defaults.SECONDARY_DARK
       },
       '&.non-interactive': (0, _styles.disabled)('stroke'),
       '&.correct': (0, _styles.correct)('stroke'),

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

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

package/lib/line/line-cross.js

@@ -55,9 +55,9 @@ var DraggableComponent = function DraggableComponent(props) {
       r = props.r,
       correctness = props.correctness,
       rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_group.Group, (0, _extends2["default"])({}, rest, {
+  return /*#__PURE__*/_react["default"].createElement(_group.Group, {
     className: (0, _classnames["default"])(className, classes.line, correctness && correctness.value)
-  }), /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
+  }, /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
     data: [{
       x: scale.x(x) - r,
       y: scale.y(y) + r
@@ -72,7 +72,10 @@ var DraggableComponent = function DraggableComponent(props) {
     y: function y(d) {
       return d.y;
     },
-    strokeWidth: 5
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
   }), /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
     data: [{
       x: scale.x(x) - r,
@@ -88,8 +91,16 @@ var DraggableComponent = function DraggableComponent(props) {
     y: function y(d) {
       return d.y;
     },
-    strokeWidth: 5
-  }));
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    cx: scale.x(x),
+    cy: scale.y(y),
+    r: r * 2,
+    className: (0, _classnames["default"])(classes.transparentHandle)
+  }, rest)));
 };
 
 DraggableComponent.propTypes = {