npm - @pie-lib/charting - Versions diffs - 5.14.3 → 5.14.4-next.10 - Mend

@pie-lib/charting 5.14.3 → 5.14.4-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/lib/bars/common/bars.js +46 -8
package/lib/bars/common/bars.js.map +1 -1
package/lib/chart.js +2 -1
package/lib/chart.js.map +1 -1
package/lib/common/drag-handle.js +62 -85
package/lib/common/drag-handle.js.map +1 -1
package/lib/plot/common/plot.js +35 -6
package/lib/plot/common/plot.js.map +1 -1
package/package.json +2 -2
package/src/bars/common/bars.jsx +57 -5
package/src/chart.jsx +2 -1
package/src/common/drag-handle.jsx +53 -39
package/src/plot/common/plot.jsx +60 -25

package/lib/bars/common/bars.js CHANGED Viewed

@@ -53,6 +53,19 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var log = (0, _debug["default"])('pie-lib:chart:bars');
 var histogramColors = ['#006699', '#F59B00', '#08916D', '#529EE0', '#52B7D8', '#D9A6C2', '#FFB03B', '#54A77B', '#E16032', '#4FD2D2', '#F0E442', '#E287B2'];
+var hoverHistogramColors = ['#003754', '#975616', '#00503B', '#225982', '#1F687D', '#825E6F', '#996428', '#255E44', '#8A331F', '#167A7A', '#91862D', '#894A65'];
+var calculateFillColor = function calculateFillColor(isHovered, barColor, index, hoverHistogramColors) {
+  if (isHovered && barColor) {
+    return hoverHistogramColors[index % hoverHistogramColors.length];
+  }
+  if (isHovered) {
+    return _renderUi.color.primaryDark();
+  }
+  return barColor || null;
+};
 var RawBar = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(RawBar, _React$Component);
@@ -64,6 +77,16 @@ var RawBar = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, RawBar);
     _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      _this.setState({
+        isHovered: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        isHovered: false
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDragValue", function (dragValue) {
       return _this.setState({
         dragValue: dragValue
@@ -91,7 +114,8 @@ var RawBar = /*#__PURE__*/function (_React$Component) {
       _this.setDragValue(next);
     });
     _this.state = {
-      dragValue: undefined
+      dragValue: undefined,
+      isHovered: false
     };
     return _this;
   }
@@ -110,10 +134,14 @@ var RawBar = /*#__PURE__*/function (_React$Component) {
           index = _this$props2.index,
           interactive = _this$props2.interactive,
           correctness = _this$props2.correctness,
-          barColor = _this$props2.barColor;
+          barColor = _this$props2.barColor,
+          defineChart = _this$props2.defineChart;
       var scale = graphProps.scale,
           range = graphProps.range;
-      var dragValue = this.state.dragValue;
+      var _this$state = this.state,
+          dragValue = _this$state.dragValue,
+          isHovered = _this$state.isHovered;
+      var fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors);
       var v = Number.isFinite(dragValue) ? dragValue : value;
       var barWidth = xBand.bandwidth();
       var barHeight = scale.y(range.max - v);
@@ -124,18 +152,22 @@ var RawBar = /*#__PURE__*/function (_React$Component) {
       var yy = range.max - rawY;
       log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
       var Component = interactive ? _dragHandle["default"] : _dragHandle.DragHandle;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_shape.Bar, {
+      return /*#__PURE__*/_react["default"].createElement("g", {
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }, /*#__PURE__*/_react["default"].createElement(_shape.Bar, {
         x: barX,
         y: scale.y(yy),
         width: barWidth,
         height: barHeight,
         className: classes.bar,
-        style: barColor && {
-          fill: barColor
+        style: {
+          fill: fillColor
         }
       }), /*#__PURE__*/_react["default"].createElement(Component, {
         x: barX,
         y: v,
+        defineChart: defineChart,
         interactive: interactive,
         width: barWidth,
         onDrag: function onDrag(v) {
@@ -143,7 +175,9 @@ var RawBar = /*#__PURE__*/function (_React$Component) {
         },
         onDragStop: this.dragStop,
         graphProps: graphProps,
-        correctness: correctness
+        correctness: correctness,
+        isHovered: isHovered,
+        color: fillColor
       }));
     }
   }]);
@@ -169,7 +203,10 @@ exports.RawBar = RawBar;
 var Bar = (0, _index.withStyles)(function () {
   return {
     bar: {
-      fill: _renderUi.color.primaryLight()
+      fill: _renderUi.color.primaryLight(),
+      '&:hover': {
+        fill: _renderUi.color.primaryDark()
+      }
     }
   };
 })(RawBar);
@@ -198,6 +235,7 @@ var Bars = /*#__PURE__*/function (_React$Component2) {
         return /*#__PURE__*/_react["default"].createElement(Bar, {
           value: d.value,
           interactive: defineChart || d.interactive,
+          defineChart: defineChart,
           label: d.label,
           xBand: xBand,
           index: index,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/bars/common/bars.jsx"],"names":["log","histogramColors","RawBar","props","dragValue","setState","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","graphProps","classes","xBand","index","interactive","correctness","barColor","scale","range","v","Number","isFinite","barWidth","bandwidth","barHeight","y","max","barX","rawY","yy","Component","DraggableHandle","DragHandle","bar","fill","dragStop","React","PropTypes","string","func","number","object","isRequired","types","GraphPropsType","bool","shape","Bar","color","primaryLight","Bars","data","defineChart","histogram","map","d","category","length","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];\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 };\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 { graphProps, value, label, classes, xBand, index, interactive, correctness, barColor } = this.props;\n const { scale, range } = graphProps;\n const { dragValue } = this.state;\n\n const v = Number.isFinite(dragValue) ? dragValue : value;\n const barWidth = xBand.bandwidth();\n const barHeight = scale.y(range.max - v);\n const barX = xBand(bandKey({ label }, index));\n 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 <React.Fragment>\n <VxBar\n x={barX}\n y={scale.y(yy)}\n width={barWidth}\n height={barHeight}\n className={classes.bar}\n style={barColor && { fill: barColor }}\n />\n <Component\n x={barX}\n y={v}\n interactive={interactive}\n width={barWidth}\n onDrag={(v) => this.dragValue(value, v)}\n onDragStop={this.dragStop}\n graphProps={graphProps}\n correctness={correctness}\n />\n </React.Fragment>\n );\n }\n}\n\nconst Bar = withStyles(() => ({\n bar: {\n fill: color.primaryLight(),\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 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"}
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"}

package/lib/chart.js CHANGED Viewed

@@ -245,7 +245,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
       log('[render] common:', common);
       var maskSize = {
         x: -10,
-        y: -10,
+        y: -55,
         width: width + 20,
         height: height + 80
       };
@@ -319,6 +319,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         mask: "url('#".concat(this.maskUid, "')")
       }, /*#__PURE__*/_react["default"].createElement(ChartComponent, (0, _extends2["default"])({}, common, {
         data: categories,
+        height: rootCommon.graphProps.size.height,
         defineChart: defineChart,
         onChange: this.changeData,
         onChangeCategory: this.changeCategory

package/lib/chart.js.map CHANGED Viewed

	@@ -1 +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 (!defineChart && 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: -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 ? 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 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"}
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 (!defineChart && 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: -55, 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"}

package/lib/common/drag-handle.js CHANGED Viewed

@@ -5,93 +5,69 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.RawDragHandle = exports.DragHandle = exports.D = void 0;
+exports["default"] = exports.DragHandle = exports.D = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _plot = require("@pie-lib/plot");
-var _index = require("@material-ui/core/styles/index");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _renderUi = require("@pie-lib/render-ui");
-var _styles = require("./styles");
-var _excluded = ["x", "y", "width", "graphProps", "classes", "className", "interactive", "correctness"];
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var _classnames = _interopRequireDefault(require("classnames"));
-var RawDragHandle = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(RawDragHandle, _React$Component);
+var _styles = require("@material-ui/core/styles");
-  var _super = _createSuper(RawDragHandle);
+var _plot = require("@pie-lib/plot");
-  function RawDragHandle() {
-    (0, _classCallCheck2["default"])(this, RawDragHandle);
-    return _super.apply(this, arguments);
-  }
+var _renderUi = require("@pie-lib/render-ui");
-  (0, _createClass2["default"])(RawDragHandle, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          x = _this$props.x,
-          y = _this$props.y,
-          width = _this$props.width,
-          graphProps = _this$props.graphProps,
-          classes = _this$props.classes,
-          className = _this$props.className,
-          interactive = _this$props.interactive,
-          correctness = _this$props.correctness,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
-      var scale = graphProps.scale;
-      return /*#__PURE__*/_react["default"].createElement("svg", {
-        x: x,
-        y: scale.y(y) - 10,
-        width: width,
-        overflow: "visible",
-        className: (0, _classnames["default"])(classes.handleContainer, className, !interactive && 'non-interactive', interactive && correctness && correctness.value)
-      }, /*#__PURE__*/_react["default"].createElement("rect", (0, _extends2["default"])({
-        y: -10,
-        width: width,
-        className: (0, _classnames["default"])(classes.transparentHandle, className)
-      }, rest)), /*#__PURE__*/_react["default"].createElement("rect", (0, _extends2["default"])({
-        width: width,
-        className: (0, _classnames["default"])(classes.handle, 'handle', className, !interactive && 'non-interactive', interactive && correctness && correctness.value)
-      }, rest)), /*#__PURE__*/_react["default"].createElement("rect", (0, _extends2["default"])({
-        y: 10,
-        width: width,
-        className: (0, _classnames["default"])(classes.transparentHandle, className)
-      }, rest)));
+var _styles2 = require("./styles");
+var _SwapVerticalCircleOutlined = _interopRequireDefault(require("@mui/icons-material/SwapVerticalCircleOutlined"));
+var _excluded = ["x", "y", "width", "graphProps", "classes", "className", "interactive", "defineChart", "isHovered", "correctness", "color"];
+var ICON_Y_OFFSET = -377;
+var RawDragHandle = function RawDragHandle(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      graphProps = _ref.graphProps,
+      classes = _ref.classes,
+      className = _ref.className,
+      interactive = _ref.interactive,
+      defineChart = _ref.defineChart,
+      isHovered = _ref.isHovered,
+      correctness = _ref.correctness,
+      color = _ref.color,
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var scale = graphProps.scale;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    x: x,
+    y: scale.y(y) - 10,
+    width: width,
+    overflow: "visible"
+  }, isHovered && !correctness && interactive && /*#__PURE__*/_react["default"].createElement(_SwapVerticalCircleOutlined["default"], {
+    x: width / 4,
+    y: defineChart ? ICON_Y_OFFSET : ICON_Y_OFFSET + 47,
+    width: width / 2,
+    sx: {
+      color: color
     }
-  }]);
-  return RawDragHandle;
-}(_react["default"].Component);
-exports.RawDragHandle = RawDragHandle;
-(0, _defineProperty2["default"])(RawDragHandle, "propTypes", {
+  }), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    cx: width / 2,
+    r: width / 2,
+    className: (0, _classnames["default"])(classes.transparentHandle, className)
+  }, rest)), correctness && /*#__PURE__*/_react["default"].createElement("rect", (0, _extends2["default"])({
+    y: 10,
+    width: width,
+    className: (0, _classnames["default"])(classes.handle, 'handle', className, !interactive && 'non-interactive', interactive && correctness && correctness.value)
+  }, rest)));
+};
+RawDragHandle.propTypes = {
   x: _propTypes["default"].number.isRequired,
   y: _propTypes["default"].number.isRequired,
   width: _propTypes["default"].number,
@@ -99,20 +75,21 @@ exports.RawDragHandle = RawDragHandle;
   classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   interactive: _propTypes["default"].bool,
+  isHovered: _propTypes["default"].bool,
   correctness: _propTypes["default"].shape({
     value: _propTypes["default"].string,
     label: _propTypes["default"].string
   })
-});
-var DragHandle = (0, _index.withStyles)(function () {
+};
+var DragHandle = (0, _styles.withStyles)(function () {
   return {
     handle: {
       height: '10px',
-      fill: _renderUi.color.secondary(),
+      fill: 'transparent',
       transition: 'fill 200ms linear, height 200ms linear',
-      '&.correct': (0, _styles.correct)('fill'),
-      '&.incorrect': (0, _styles.incorrect)('fill'),
-      '&.non-interactive': (0, _styles.disabled)('fill')
+      '&.correct': (0, _styles2.correct)('fill'),
+      '&.incorrect': (0, _styles2.incorrect)('fill'),
+      '&.non-interactive': (0, _styles2.disabled)('fill')
     },
     transparentHandle: {
       height: '20px',
@@ -126,9 +103,9 @@ var DragHandle = (0, _index.withStyles)(function () {
           height: '16px'
         }
       },
-      '&.non-interactive': (0, _styles.disabled)('fill'),
-      '&.incorrect': (0, _styles.incorrect)('fill'),
-      '&.correct': (0, _styles.correct)('fill')
+      '&.non-interactive': (0, _styles2.disabled)('fill'),
+      '&.incorrect': (0, _styles2.incorrect)('fill'),
+      '&.correct': (0, _styles2.correct)('fill')
     }
   };
 })(RawDragHandle);
@@ -143,9 +120,9 @@ var D = (0, _plot.gridDraggable)({
     return newPoint.y;
   },
-  bounds: function bounds(props, _ref) {
-    var domain = _ref.domain,
-        range = _ref.range;
+  bounds: function bounds(props, _ref2) {
+    var domain = _ref2.domain,
+        range = _ref2.range;
     var area = {
       left: 0,
       top: props.y,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["~~RawDragHandle~~","~~props~~","x","y","width","graphProps","classes","className","interactive","~~correctness~~","~~rest~~","~~scale~~","~~handleContainer~~","~~value~~","transparentHandle","handle","~~React~~","~~Component~~","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","height","fill","~~color~~","~~secondary~~","~~transition","~~secondaryDark","D","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA~~;;;;;;;;IAEaA~~,~~a;;;;;;;;;;;;WAeX~~,~~kBAAS~~;~~AACP~~,~~wBAA2F~~,~~KAAKC~~,~~KAAhG~~;AAAA,~~UAAQC~~,~~CAAR~~,~~eAAQA~~,~~CAAR~~;AAAA,~~UAAWC~~,~~CAAX~~,~~eAAWA~~,~~CAAX~~;AAAA,~~UAAcC~~,~~KAAd~~,~~eAAcA~~,~~KAAd~~;AAAA,~~UAAqBC~~,~~UAArB~~,~~eAAqBA~~,~~UAArB~~;AAAA,~~UAAiCC~~,~~OAAjC~~,~~eAAiCA~~,~~OAAjC~~;AAAA,~~UAA0CC~~,~~SAA1C~~,~~eAA0CA~~,~~SAA1C~~;AAAA,~~UAAqDC~~,~~WAArD~~,~~eAAqDA~~,~~WAArD~~;AAAA,~~UAAkEC~~,~~WAAlE~~,~~eAAkEA~~,~~WAAlE~~;AAAA,~~UAAkFC~~,~~IAAlF~~;~~AACA~~,~~UAAQC~~,KAAR,~~GAAkBN~~,UAAlB,~~CAAQM~~,KAAR;AAEA,~~0BACE~~;~~AACE~~,~~QAAA~~,CAAC,~~EAAET~~,~~CADL~~;~~AAEE~~,~~QAAA~~,CAAC,~~EAAES~~,KAAK,~~CAACR~~,CAAN,CAAQA,CAAR,IAAa,~~EAFlB~~;~~AAGE~~,~~QAAA~~,KAAK,EAAEC,~~KAHT~~;~~AAIE~~,~~QAAA~~,QAAQ,EAAC~~,SAJX~~;~~AAKE~~,~~QAAA~~,SAAS,~~EAAE~~,~~4BACTE~~,~~OAAO~~,~~CAACM~~,~~eADC~~,~~EAETL~~,~~SAFS~~,~~EAGT~~,~~CAACC~~,~~WAAD~~,~~IAAgB~~,~~iBAHP~~,~~EAITA~~,~~WAAW~~,~~IAAIC~~,~~WAAf~~,~~IAA8BA~~,WAAW,~~CAACI~~,~~KAJjC~~;~~AALb~~,~~sBAYE~~;~~AAAM~~,~~QAAA~~,~~CAAC~~,EAAE,~~CAAC~~,~~EAAV~~;~~AAAc~~,~~QAAA~~,KAAK,~~EAAET~~,~~KAArB~~;~~AAA4B~~,~~QAAA~~,SAAS,EAAE,4BAAWE,OAAO,~~CAACQ~~,iBAAnB,~~EAAsCP~~,SAAtC;~~AAAvC~~,~~SAA6FG~~,~~IAA7F~~,~~EAZF~~,~~eAaE~~;AACE,~~QAAA~~,~~KAAK~~,~~EAAEN~~,~~KADT~~;AAEE,~~QAAA~~,SAAS,EAAE,4BACTE,OAAO,~~CAACS~~,MADC,EAET,QAFS,~~EAGTR~~,SAHS,EAIT,CAACC,WAAD,IAAgB,iBAJP,EAKTA,WAAW,~~IAAIC~~,WAAf,IAA8BA,WAAW,~~CAACI~~,KALjC;~~AAFb~~,~~SASMH~~,~~IATN~~,~~EAbF~~,~~eAwBE;AAAM,QAAA,CAAC,EAAE,EAAT;AAAa,QAAA,KAAK,EAAEN,KAApB;AAA2B,QAAA,SAAS,EAAE,4BAAWE,OAAO,CAACQ,iBAAnB,EAAsCP,SAAtC;AAAtC,SAA4FG,IAA5F,EAxBF,~~CADF;AA4BD~~;;;EA/CgCM~~,~~kBAAMC~~,~~S;;;iCAA5BjB~~,a,~~eACQ~~;~~AACjBE~~,EAAAA,CAAC,~~EAAEgB~~,sBAAUC,MAAV,CAAiBC,~~UADH~~;~~AAEjBjB~~,EAAAA,CAAC,~~EAAEe~~,sBAAUC,MAAV,CAAiBC,~~UAFH~~;~~AAGjBhB~~,EAAAA,KAAK,~~EAAEc~~,sBAAUC,~~MAHA~~;~~AAIjBd~~,EAAAA,UAAU,~~EAAEgB~~,YAAMC,cAAN,CAAqBF,~~UAJhB~~;~~AAKjBd~~,EAAAA,OAAO,~~EAAEY~~,sBAAUK,MAAV,CAAiBH,~~UALT~~;~~AAMjBb~~,EAAAA,SAAS,~~EAAEW~~,sBAAUM,~~MANJ~~;~~AAOjBhB~~,EAAAA,WAAW,~~EAAEU~~,sBAAUO,~~IAPN~~;~~AAQjBhB~~,EAAAA,~~WAAW~~,EAAES,sBAAUQ,KAAV,CAAgB;~~AAC3Bb~~,IAAAA,KAAK,~~EAAEK~~,sBAAUM,MADU;AAE3BG,IAAAA,KAAK,EAAET,sBAAUM;AAFU,GAAhB;~~AARI~~,C;~~AAiDd~~,IAAMI,UAAU,GAAG,~~uBAAW~~;AAAA,SAAO;AAC1Cb,IAAAA,MAAM,EAAE;AACNc,MAAAA,MAAM,EAAE,MADF;AAENC,MAAAA,IAAI,~~EAAEC~~,~~gBAAMC,SAAN,EAFA~~;AAGNC,MAAAA,UAAU,EAAE,wCAHN;AAIN,mBAAa,~~qBAAQ~~,MAAR,CAJP;AAKN,qBAAe,~~uBAAU~~,MAAV,CALT;AAMN,2BAAqB,~~sBAAS~~,MAAT;AANf,KADkC;~~AAS1CnB~~,IAAAA,iBAAiB,EAAE;AACjBe,MAAAA,MAAM,EAAE,MADS;AAEjBC,MAAAA,IAAI,EAAE;AAFW,KATuB;~~AAa1ClB~~,IAAAA,eAAe,EAAE;~~AACfiB~~,MAAAA,MAAM,EAAE,EADO;AAEf,iBAAW;AACT,qBAAa;AACXC,UAAAA,IAAI,~~EAAEC~~,~~gBAAMG~~,aAAN,EADK;~~AAEXL~~,UAAAA,MAAM,EAAE;AAFG;AADJ,OAFI;AAQf,2BAAqB,~~sBAAS~~,MAAT,CARN;AASf,qBAAe,~~uBAAU~~,MAAV,CATA;AAUf,mBAAa,~~qBAAQ~~,MAAR;AAVE;AAbyB,GAAP;AAAA,CAAX,EAyBtB7B,aAzBsB,CAAnB;;AA2BA,~~IAAMmC~~,CAAC,GAAG,yBAAc;AAC7BC,EAAAA,IAAI,EAAE,GADuB;AAE7BC,EAAAA,SAAS,EAAE,~~mBAACpC~~,KAAD,~~EAAQqC~~,KAAR,EAAkB;AAC3B;AACAA,IAAAA,KAAK,~~CAACpC~~,CAAN,GAAU,CAAV;;AACA,~~QAAMqC~~,QAAQ,GAAGC,YAAMC,KAAN,~~CAAYxC~~,KAAZ,~~EAAmByC~~,GAAnB,CAAuBF,YAAMC,KAAN,CAAYH,KAAZ,CAAvB,CAAjB;;AAEA,WAAOC,QAAQ,~~CAACpC~~,CAAhB;AACD,GAR4B;~~AAS7BwC~~,EAAAA,MAAM,EAAE,~~gBAAC1C~~,KAAD,~~QAA8B~~;AAAA,~~QAApB2C~~,MAAoB,~~QAApBA~~,MAAoB;AAAA,QAAZC,KAAY,~~QAAZA~~,KAAY;AACpC,QAAMC,IAAI,GAAG;AAAEC,MAAAA,IAAI,EAAE,CAAR;AAAWC,MAAAA,GAAG,~~EAAE/C~~,KAAK,~~CAACE~~,CAAtB;~~AAAyB8C~~,MAAAA,MAAM,~~EAAEhD~~,KAAK,~~CAACE~~,CAAvC;~~AAA0C+C~~,MAAAA,KAAK,EAAE;AAAjD,KAAb;AACA,WAAOV,YAAMG,MAAN,CAAaG,IAAb,EAAmBF,MAAnB,EAA2BC,KAA3B,CAAP;AACD,GAZ4B;AAa7BM,EAAAA,WAAW,EAAE,~~qBAAClD~~,KAAD,EAAW;AACtB,WAAO;~~AAAEC~~,MAAAA,CAAC,~~EAAED~~,KAAK,~~CAACC~~,CAAX;AAAcC,MAAAA,CAAC,~~EAAEF~~,KAAK,~~CAACE~~;AAAvB,KAAP;AACD;AAf4B,CAAd,~~EAgBdyB~~,UAhBc,CAAV;;~~eAkBQO~~,C","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~~\n ~~render(~~) {\n const { ~~x, y, width, graphProps, classes, className, interactive, correctness, ...rest } = 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~~ y={~~-10~~} ~~width~~={width} className={classNames(classes.transparentHandle, className)} {...rest} />\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~~ y={~~10}~~ width~~={width}~~ ~~className={classNames(~~classes.~~transparentHandle,~~ className)} ~~{...rest}~~ ~~/>\~~n ~~</svg>\~~n ~~);\~~n }\n}\n\nexport const DragHandle = withStyles(() => ({\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"],"file":"drag-handle.js"}
1	+ {"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["ICON_Y_OFFSET","RawDragHandle","x","y","width","graphProps","classes","className","interactive","defineChart","isHovered","correctness","color","rest","scale","transparentHandle","handle","value","propTypes","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","height","fill","transition","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 SwapVerticalCircleOutlinedIcon from '@mui/icons-material/SwapVerticalCircleOutlined';\n\nconst ICON_Y_OFFSET = -377;\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\n return (\n <svg x={x} y={scale.y(y) - 10} width={width} overflow=\"visible\">\n {isHovered && !correctness && interactive && (\n <SwapVerticalCircleOutlinedIcon\n x={width / 4}\n y={defineChart ? ICON_Y_OFFSET : ICON_Y_OFFSET + 47}\n width={width / 2}\n sx={{ color: color }}\n />\n )}\n <circle cx={width / 2} r={width / 2} className={classNames(classes.transparentHandle, className)} {...rest} />\n\n {correctness && (\n <rect\n y={10}\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 )}\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};\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 },\n handleContainer: {\n height: 30,\n '&:hover': {\n '& .handle': {\n fill: color.secondaryDark(),\n height: '16px',\n },\n },\n '&.non-interactive': disabled('fill'),\n '&.incorrect': incorrect('fill'),\n '&.correct': correct('fill'),\n },\n}))(RawDragHandle);\n\nexport const D = gridDraggable({\n axis: 'y',\n fromDelta: (props, delta) => {\n //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n delta.x = 0;\n const newPoint = utils.point(props).add(utils.point(delta));\n\n return newPoint.y;\n },\n bounds: (props, { domain, range }) => {\n const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n return utils.bounds(area, domain, range);\n },\n anchorPoint: (props) => {\n return { x: props.x, y: props.y };\n },\n})(DragHandle);\n\nexport default D;\n"],"file":"drag-handle.js"}

package/lib/plot/common/plot.js CHANGED Viewed

@@ -63,6 +63,16 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, RawPlot);
     _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      _this.setState({
+        isHovered: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        isHovered: false
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDragValue", function (dragValue) {
       return _this.setState({
         dragValue: dragValue
@@ -90,7 +100,8 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
       _this.setDragValue(next);
     });
     _this.state = {
-      dragValue: undefined
+      dragValue: undefined,
+      isHovered: false
     };
     return _this;
   }
@@ -109,7 +120,8 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
           index = _this$props2.index,
           CustomBarElement = _this$props2.CustomBarElement,
           interactive = _this$props2.interactive,
-          correctness = _this$props2.correctness;
+          correctness = _this$props2.correctness,
+          defineChart = _this$props2.defineChart;
       var scale = graphProps.scale,
           range = graphProps.range,
           size = graphProps.size;
@@ -117,7 +129,9 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
       var _ref = range || {},
           max = _ref.max;
-      var dragValue = this.state.dragValue;
+      var _this$state = this.state,
+          dragValue = _this$state.dragValue,
+          isHovered = _this$state.isHovered;
       var v = Number.isFinite(dragValue) ? dragValue : value;
       var barWidth = xBand.bandwidth();
       var barHeight = scale.y(range.max - v);
@@ -134,7 +148,18 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
       var pointHeight = size.height / max;
       var pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
       var Component = interactive ? _dragHandle["default"] : _dragHandle.DragHandle;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, values.map(function (index) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }, isHovered && /*#__PURE__*/_react["default"].createElement("rect", {
+        x: barX,
+        y: scale.y(v),
+        width: barWidth,
+        height: values !== null && values !== void 0 && values.length ? pointHeight * values.length : 0,
+        style: {
+          fill: '#E5E8F5'
+        }
+      }), values.map(function (index) {
         return CustomBarElement({
           index: index,
           pointDiameter: pointDiameter,
@@ -156,8 +181,11 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
         },
         onDragStop: this.dragStop,
         graphProps: graphProps,
-        correctness: correctness
-      }));
+        correctness: correctness,
+        isHovered: isHovered,
+        defineChart: defineChart,
+        color: _renderUi.color.primaryDark()
+      })));
     }
   }]);
   return RawPlot;
@@ -219,6 +247,7 @@ var Plot = /*#__PURE__*/function (_React$Component2) {
           value: d.value,
           label: d.label,
           interactive: defineChart || d.interactive,
+          defineChart: defineChart,
           xBand: xBand,
           index: index,
           key: "bar-".concat(d.label, "-").concat(d.value, "-").concat(index),

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

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

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.14.3",
+  "version": "5.14.4-next.10+db0d8ddc",
   "description": "charting",
   "keywords": [
     "react",
@@ -44,5 +44,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "cfece677af97481eb28f18a152dfe80ad471b63f"
+  "gitHead": "db0d8ddccb308bdd3680e3814ec9f014440512fc"
 }

package/src/bars/common/bars.jsx CHANGED Viewed

@@ -24,6 +24,30 @@ const histogramColors = [
   '#F0E442',
   '#E287B2',
 ];
+const hoverHistogramColors = [
+  '#003754',
+  '#975616',
+  '#00503B',
+  '#225982',
+  '#1F687D',
+  '#825E6F',
+  '#996428',
+  '#255E44',
+  '#8A331F',
+  '#167A7A',
+  '#91862D',
+  '#894A65',
+];
+const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors) => {
+  if (isHovered && barColor) {
+    return hoverHistogramColors[index % hoverHistogramColors.length];
+  }
+  if (isHovered) {
+    return color.primaryDark();
+  }
+  return barColor || null;
+};
 export class RawBar extends React.Component {
   static propTypes = {
@@ -46,9 +70,18 @@ export class RawBar extends React.Component {
     super(props);
     this.state = {
       dragValue: undefined,
+      isHovered: false,
     };
   }
+  handleMouseEnter = () => {
+    this.setState({ isHovered: true });
+  };
+  handleMouseLeave = () => {
+    this.setState({ isHovered: false });
+  };
   setDragValue = (dragValue) => this.setState({ dragValue });
   dragStop = () => {
@@ -70,10 +103,22 @@ export class RawBar extends React.Component {
   };
   render() {
-    const { graphProps, value, label, classes, xBand, index, interactive, correctness, barColor } = this.props;
+    const {
+      graphProps,
+      value,
+      label,
+      classes,
+      xBand,
+      index,
+      interactive,
+      correctness,
+      barColor,
+      defineChart,
+    } = this.props;
     const { scale, range } = graphProps;
-    const { dragValue } = this.state;
+    const { dragValue, isHovered } = this.state;
+    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors);
     const v = Number.isFinite(dragValue) ? dragValue : value;
     const barWidth = xBand.bandwidth();
     const barHeight = scale.y(range.max - v);
@@ -85,26 +130,29 @@ export class RawBar extends React.Component {
     const Component = interactive ? DraggableHandle : DragHandle;
     return (
-      <React.Fragment>
+      <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
         <VxBar
           x={barX}
           y={scale.y(yy)}
           width={barWidth}
           height={barHeight}
           className={classes.bar}
-          style={barColor && { fill: barColor }}
+          style={{ fill: fillColor }}
         />
         <Component
           x={barX}
           y={v}
+          defineChart={defineChart}
           interactive={interactive}
           width={barWidth}
           onDrag={(v) => this.dragValue(value, v)}
           onDragStop={this.dragStop}
           graphProps={graphProps}
           correctness={correctness}
+          isHovered={isHovered}
+          color={fillColor}
         />
-      </React.Fragment>
+      </g>
     );
   }
 }
@@ -112,6 +160,9 @@ export class RawBar extends React.Component {
 const Bar = withStyles(() => ({
   bar: {
     fill: color.primaryLight(),
+    '&:hover': {
+      fill: color.primaryDark(),
+    },
   },
 }))(RawBar);
@@ -134,6 +185,7 @@ export class Bars extends React.Component {
           <Bar
             value={d.value}
             interactive={defineChart || d.interactive}
+            defineChart={defineChart}
             label={d.label}
             xBand={xBand}
             index={index}

package/src/chart.jsx CHANGED Viewed

@@ -223,7 +223,7 @@ export class Chart extends React.Component {
     log('[render] common:', common);
-    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 80 };
+    const maskSize = { x: -10, y: -55, width: width + 20, height: height + 80 };
     const { scale } = common.graphProps;
     const xBand = dataToXBand(scale.x, categories, width, chartType);
@@ -293,6 +293,7 @@ export class Chart extends React.Component {
             <ChartComponent
               {...common}
               data={categories}
+              height={rootCommon.graphProps.size.height}
               defineChart={defineChart}
               onChange={this.changeData}
               onChangeCategory={this.changeCategory}

package/src/common/drag-handle.jsx CHANGED Viewed

@@ -1,45 +1,45 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
 import { gridDraggable, utils, types } from '@pie-lib/plot';
-import { withStyles } from '@material-ui/core/styles/index';
-import PropTypes from 'prop-types';
 import { color } from '@pie-lib/render-ui';
 import { correct, incorrect, disabled } from './styles';
+import SwapVerticalCircleOutlinedIcon from '@mui/icons-material/SwapVerticalCircleOutlined';
+const ICON_Y_OFFSET = -377;
-export class RawDragHandle extends React.Component {
-  static propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    width: PropTypes.number,
-    graphProps: types.GraphPropsType.isRequired,
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    interactive: PropTypes.bool,
-    correctness: PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string,
-    }),
-  };
+const RawDragHandle = ({
+  x,
+  y,
+  width,
+  graphProps,
+  classes,
+  className,
+  interactive,
+  defineChart,
+  isHovered,
+  correctness,
+  color,
+  ...rest
+}) => {
+  const { scale } = graphProps;
-  render() {
-    const { x, y, width, graphProps, classes, className, interactive, correctness, ...rest } = this.props;
-    const { scale } = graphProps;
+  return (
+    <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible">
+      {isHovered && !correctness && interactive && (
+        <SwapVerticalCircleOutlinedIcon
+          x={width / 4}
+          y={defineChart ? ICON_Y_OFFSET : ICON_Y_OFFSET + 47}
+          width={width / 2}
+          sx={{ color: color }}
+        />
+      )}
+      <circle cx={width / 2} r={width / 2} className={classNames(classes.transparentHandle, className)} {...rest} />
-    return (
-      <svg
-        x={x}
-        y={scale.y(y) - 10}
-        width={width}
-        overflow="visible"
-        className={classNames(
-          classes.handleContainer,
-          className,
-          !interactive && 'non-interactive',
-          interactive && correctness && correctness.value,
-        )}
-      >
-        <rect y={-10} width={width} className={classNames(classes.transparentHandle, className)} {...rest} />
+      {correctness && (
         <rect
+          y={10}
           width={width}
           className={classNames(
             classes.handle,
@@ -50,16 +50,30 @@ export class RawDragHandle extends React.Component {
           )}
           {...rest}
         />
-        <rect y={10} width={width} className={classNames(classes.transparentHandle, className)} {...rest} />
-      </svg>
-    );
-  }
-}
+      )}
+    </svg>
+  );
+};
+RawDragHandle.propTypes = {
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  width: PropTypes.number,
+  graphProps: types.GraphPropsType.isRequired,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  interactive: PropTypes.bool,
+  isHovered: PropTypes.bool,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  }),
+};
 export const DragHandle = withStyles(() => ({
   handle: {
     height: '10px',
-    fill: color.secondary(),
+    fill: 'transparent',
     transition: 'fill 200ms linear, height 200ms linear',
     '&.correct': correct('fill'),
     '&.incorrect': incorrect('fill'),

package/src/plot/common/plot.jsx CHANGED Viewed

@@ -32,9 +32,18 @@ export class RawPlot extends React.Component {
     super(props);
     this.state = {
       dragValue: undefined,
+      isHovered: false,
     };
   }
+  handleMouseEnter = () => {
+    this.setState({ isHovered: true });
+  };
+  handleMouseLeave = () => {
+    this.setState({ isHovered: false });
+  };
   setDragValue = (dragValue) => this.setState({ dragValue });
   dragStop = () => {
@@ -56,11 +65,22 @@ export class RawPlot extends React.Component {
   };
   render() {
-    const { graphProps, value, label, classes, xBand, index, CustomBarElement, interactive, correctness } = this.props;
+    const {
+      graphProps,
+      value,
+      label,
+      classes,
+      xBand,
+      index,
+      CustomBarElement,
+      interactive,
+      correctness,
+      defineChart,
+    } = this.props;
     const { scale, range, size } = graphProps;
     const { max } = range || {};
-    const { dragValue } = this.state;
+    const { dragValue, isHovered } = this.state;
     const v = Number.isFinite(dragValue) ? dragValue : value;
     const barWidth = xBand.bandwidth();
@@ -81,29 +101,43 @@ export class RawPlot extends React.Component {
     return (
       <React.Fragment>
-        {values.map((index) =>
-          CustomBarElement({
-            index,
-            pointDiameter,
-            barX,
-            barWidth,
-            pointHeight,
-            label,
-            value,
-            classes,
-            scale,
-          }),
-        )}
-        <Component
-          x={barX}
-          y={v}
-          interactive={interactive}
-          width={barWidth}
-          onDrag={(v) => this.dragValue(value, v)}
-          onDragStop={this.dragStop}
-          graphProps={graphProps}
-          correctness={correctness}
-        />
+        <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          {isHovered && (
+            <rect
+              x={barX}
+              y={scale.y(v)}
+              width={barWidth}
+              height={values?.length ? pointHeight * values.length : 0}
+              style={{ fill: '#E5E8F5' }}
+            />
+          )}
+          {values.map((index) =>
+            CustomBarElement({
+              index,
+              pointDiameter,
+              barX,
+              barWidth,
+              pointHeight,
+              label,
+              value,
+              classes,
+              scale,
+            }),
+          )}
+          <Component
+            x={barX}
+            y={v}
+            interactive={interactive}
+            width={barWidth}
+            onDrag={(v) => this.dragValue(value, v)}
+            onDragStop={this.dragStop}
+            graphProps={graphProps}
+            correctness={correctness}
+            isHovered={isHovered}
+            defineChart={defineChart}
+            color={color.primaryDark()}
+          />
+        </g>
       </React.Fragment>
     );
   }
@@ -142,6 +176,7 @@ export class Plot extends React.Component {
             value={d.value}
             label={d.label}
             interactive={defineChart || d.interactive}
+            defineChart={defineChart}
             xBand={xBand}
             index={index}
             key={`bar-${d.label}-${d.value}-${index}`}