@pie-lib/charting 4.5.11-next.411 → 4.5.11-next.432
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.
- package/lib/axes.js +70 -40
- package/lib/axes.js.map +1 -1
- package/lib/bars/common/bars.js +4 -2
- package/lib/bars/common/bars.js.map +1 -1
- package/lib/chart-setup.js +201 -0
- package/lib/chart-setup.js.map +1 -0
- package/lib/chart-type.js +68 -0
- package/lib/chart-type.js.map +1 -0
- package/lib/chart.js +6 -7
- package/lib/chart.js.map +1 -1
- package/lib/index.js +16 -0
- package/lib/index.js.map +1 -1
- package/lib/line/common/drag-handle.js +1 -1
- package/lib/line/common/drag-handle.js.map +1 -1
- package/lib/line/common/line.js +6 -3
- package/lib/line/common/line.js.map +1 -1
- package/lib/plot/common/plot.js +4 -2
- package/lib/plot/common/plot.js.map +1 -1
- package/package.json +2 -2
- package/src/axes.jsx +47 -11
- package/src/bars/common/bars.jsx +5 -2
- package/src/chart-setup.jsx +159 -0
- package/src/chart-type.js +41 -0
- package/src/chart.jsx +8 -6
- package/src/index.js +4 -1
- package/src/line/common/drag-handle.jsx +2 -1
- package/src/line/common/line.jsx +5 -3
- package/src/plot/common/plot.jsx +4 -2
package/lib/chart.js
CHANGED
|
@@ -154,12 +154,10 @@ var Chart = /*#__PURE__*/function (_React$Component) {
|
|
|
154
154
|
_defineProperty(_assertThisInitialized(_this), "getFilteredCategories", function () {
|
|
155
155
|
var _this$props3 = _this.props,
|
|
156
156
|
data = _this$props3.data,
|
|
157
|
-
|
|
158
|
-
addCategoryEnabled = _this$props3.addCategoryEnabled;
|
|
157
|
+
defineChart = _this$props3.defineChart;
|
|
159
158
|
return data ? data.map(function (d) {
|
|
160
159
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
161
|
-
|
|
162
|
-
deletable: !d.initial || d.initial && addCategoryEnabled
|
|
160
|
+
deletable: defineChart || d.deletable
|
|
163
161
|
});
|
|
164
162
|
}) : [];
|
|
165
163
|
});
|
|
@@ -210,7 +208,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
|
|
|
210
208
|
x: -10,
|
|
211
209
|
y: -10,
|
|
212
210
|
width: width + 20,
|
|
213
|
-
height: height +
|
|
211
|
+
height: height + 80
|
|
214
212
|
};
|
|
215
213
|
var scale = common.graphProps.scale;
|
|
216
214
|
var xBand = (0, _utils.dataToXBand)(scale.x, categories, width, chartType);
|
|
@@ -222,7 +220,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
|
|
|
222
220
|
var bandWidth = xBand.bandwidth(); // for chartType "line", bandWidth will be 0, so we have to calculate it
|
|
223
221
|
|
|
224
222
|
var barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
|
|
225
|
-
var increaseHeight = defineChart ?
|
|
223
|
+
var increaseHeight = defineChart ? 80 : 0; // if there are many categories, we have to rotate their names in order to fit
|
|
226
224
|
// and we have to add extra value on top of some items
|
|
227
225
|
|
|
228
226
|
var top = (0, _utils.getTopPadding)(barWidth);
|
|
@@ -265,6 +263,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
|
|
|
265
263
|
mask: "url('#myMask')"
|
|
266
264
|
}, /*#__PURE__*/_react["default"].createElement(ChartComponent, _extends({}, common, {
|
|
267
265
|
data: categories,
|
|
266
|
+
defineChart: defineChart,
|
|
268
267
|
onChange: this.changeData,
|
|
269
268
|
onChangeCategory: this.changeCategory
|
|
270
269
|
})))));
|
|
@@ -306,8 +305,8 @@ _defineProperty(Chart, "propTypes", {
|
|
|
306
305
|
title: _propTypes["default"].string,
|
|
307
306
|
onDataChange: _propTypes["default"].func,
|
|
308
307
|
addCategoryEnabled: _propTypes["default"].bool,
|
|
309
|
-
editCategoryEnabled: _propTypes["default"].bool,
|
|
310
308
|
categoryDefaultLabel: _propTypes["default"].string,
|
|
309
|
+
defineChart: _propTypes["default"].bool,
|
|
311
310
|
theme: _propTypes["default"].object
|
|
312
311
|
});
|
|
313
312
|
|
package/lib/chart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.js","names":["log","debug","Chart","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","props","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","range","categoryDefaultLabel","label","value","step","deletable","editable","interactive","editCategoryEnabled","addCategoryEnabled","map","d","initial","classes","className","domain","size","title","theme","defineChart","width","height","getChart","categories","getFilteredCategories","labelFontSize","typography","fontSize","correctValues","getDomainAndRangeByChartType","getGridLinesAndAxisByChartType","verticalLines","horizontalLines","leftAxis","common","graphProps","createGraphProps","rootNode","maskSize","x","y","scale","xBand","dataToXBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","getTopPadding","rootCommon","cloneDeep","classNames","controls","toolMenu","addCategory","r","changeData","changeCategory","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","labelStep","array","func","bool","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","root","overflow","svg","minHeight","withStyles","withTheme"],"sources":["../src/chart.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Root, createGraphProps } from '@pie-lib/plot';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ChartGrid from './grid';\nimport ChartAxes from './axes';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport {\n dataToXBand,\n getDomainAndRangeByChartType,\n getGridLinesAndAxisByChartType,\n getTopPadding\n} from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n chartType: PropTypes.string.isRequired,\n size: PropTypes.shape({\n width: PropTypes.number,\n height: PropTypes.number\n }),\n domain: PropTypes.shape({\n label: PropTypes.string,\n min: PropTypes.number,\n max: PropTypes.number,\n axisLabel: PropTypes.string\n }),\n data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),\n range: PropTypes.shape({\n label: PropTypes.string,\n min: PropTypes.number,\n max: PropTypes.number,\n step: PropTypes.number,\n labelStep: PropTypes.number,\n axisLabel: PropTypes.string\n }),\n charts: PropTypes.array,\n title: PropTypes.string,\n onDataChange: PropTypes.func,\n addCategoryEnabled: PropTypes.bool,\n editCategoryEnabled: PropTypes.bool,\n categoryDefaultLabel: PropTypes.string,\n theme: PropTypes.object\n };\n\n static defaultProps = {\n size: {\n width: 480,\n height: 480\n }\n };\n\n state = {\n charts: [\n chartTypes.Bar(),\n chartTypes.Histogram(),\n chartTypes.LineDot(),\n chartTypes.LineCross(),\n chartTypes.DotPlot(),\n chartTypes.LinePlot()\n ]\n };\n\n getChart = () => {\n const charts = this.props.charts || this.state.charts;\n let { chartType } = this.props;\n let ChartComponent = null;\n let chart = null;\n\n if (chartType) {\n chart = charts && charts.find(chart => chart.type === chartType);\n ChartComponent = chart && chart.Component;\n } else {\n chart = charts && charts[0];\n ChartComponent = chart && chart.Component;\n chartType = chart && chart.type;\n }\n\n return {\n type: chartType,\n ChartComponent\n };\n };\n\n changeData = data => {\n const { onDataChange } = this.props;\n\n onDataChange(data);\n };\n\n changeCategory = (index, newCategory) => {\n const integerIndex = parseInt(index, 10);\n\n if (integerIndex >= 0) {\n const { data, onDataChange } = this.props;\n data[integerIndex] = {\n ...data[integerIndex],\n ...newCategory\n };\n\n onDataChange(data);\n }\n };\n\n addCategory = (chartType, range) => {\n const { onDataChange, data, categoryDefaultLabel } = this.props;\n\n onDataChange([\n ...data,\n {\n label: categoryDefaultLabel || 'New Bar',\n value: range.step,\n deletable: true,\n editable: true,\n interactive: true\n }\n ]);\n };\n\n getFilteredCategories = () => {\n const { data, editCategoryEnabled, addCategoryEnabled } = this.props;\n\n return data\n ? data.map(d => ({\n ...d,\n editable: !d.initial || (d.initial && editCategoryEnabled),\n deletable: !d.initial || (d.initial && addCategoryEnabled)\n }))\n : [];\n };\n\n render() {\n const {\n classes,\n className,\n domain,\n range,\n size,\n title,\n addCategoryEnabled,\n theme\n } = this.props;\n let { chartType } = this.props;\n const defineChart = this.props.defineChart || false;\n const { width, height } = size || {};\n\n const { ChartComponent } = this.getChart();\n const categories = this.getFilteredCategories();\n\n const labelFontSize = (theme && theme.typography && theme.typography.fontSize) || 14;\n const correctValues = getDomainAndRangeByChartType(\n domain,\n range,\n size,\n chartType,\n labelFontSize\n );\n\n const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(\n correctValues.range,\n chartType\n );\n const common = {\n graphProps: createGraphProps(\n correctValues.domain,\n correctValues.range,\n size,\n () => this.rootNode\n )\n };\n log('[render] common:', common);\n\n const maskSize = { x: -10, y: -10, width: width + 20, height: height + 50 };\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 ? 50 : 0;\n\n // if there are many categories, we have to rotate their names in order to fit\n // and we have to add extra value on top of some items\n const top = getTopPadding(barWidth);\n const rootCommon = cloneDeep(common);\n rootCommon.graphProps.size.height += top + increaseHeight;\n\n return (\n <div className={classNames(classes.class, className)}>\n <div className={classes.controls}>\n <ToolMenu\n className={classes.toolMenu}\n disabled={!addCategoryEnabled}\n addCategory={() => this.addCategory(chartType, correctValues.range)}\n />\n </div>\n <Root title={title} classes={classes} rootRef={r => (this.rootNode = r)} {...rootCommon}>\n <ChartGrid\n {...common}\n xBand={xBand}\n rowTickValues={horizontalLines}\n columnTickValues={verticalLines}\n />\n <ChartAxes\n {...common}\n defineChart={defineChart}\n categories={categories}\n xBand={xBand}\n leftAxis={leftAxis}\n onChange={this.changeData}\n onChangeCategory={this.changeCategory}\n top={top}\n />\n <mask id=\"myMask\">\n <rect {...maskSize} fill=\"white\" />\n </mask>\n <g id=\"marks\" mask=\"url('#myMask')\">\n <ChartComponent\n {...common}\n data={categories}\n onChange={this.changeData}\n onChangeCategory={this.changeCategory}\n />\n </g>\n </Root>\n </div>\n );\n }\n}\n\nconst styles = theme => ({\n graphBox: {\n transform: 'translate(60px, 35px)'\n },\n controls: {\n width: 'inherit',\n display: 'flex',\n justifyContent: 'space-between',\n padding: theme.spacing.unit,\n backgroundColor: color.primaryLight(),\n borderTop: `solid 1px ${color.primaryDark()}`,\n borderBottom: `solid 0px ${color.primaryDark()}`,\n borderLeft: `solid 1px ${color.primaryDark()}`,\n borderRight: `solid 1px ${color.primaryDark()}`\n },\n root: {\n overflow: 'hidden'\n },\n svg: {\n overflow: 'visible'\n },\n toolMenu: {\n minHeight: '36px'\n }\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"chart.js","names":["log","debug","Chart","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","props","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","range","categoryDefaultLabel","label","value","step","deletable","editable","interactive","defineChart","map","d","classes","className","domain","size","title","addCategoryEnabled","theme","width","height","getChart","categories","getFilteredCategories","labelFontSize","typography","fontSize","correctValues","getDomainAndRangeByChartType","getGridLinesAndAxisByChartType","verticalLines","horizontalLines","leftAxis","common","graphProps","createGraphProps","rootNode","maskSize","x","y","scale","xBand","dataToXBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","getTopPadding","rootCommon","cloneDeep","classNames","controls","toolMenu","addCategory","r","changeData","changeCategory","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","labelStep","array","func","bool","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","root","overflow","svg","minHeight","withStyles","withTheme"],"sources":["../src/chart.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Root, createGraphProps } from '@pie-lib/plot';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ChartGrid from './grid';\nimport ChartAxes from './axes';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport {\n dataToXBand,\n getDomainAndRangeByChartType,\n getGridLinesAndAxisByChartType,\n getTopPadding\n} from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n chartType: PropTypes.string.isRequired,\n size: PropTypes.shape({\n width: PropTypes.number,\n height: PropTypes.number\n }),\n domain: PropTypes.shape({\n label: PropTypes.string,\n min: PropTypes.number,\n max: PropTypes.number,\n axisLabel: PropTypes.string\n }),\n data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),\n range: PropTypes.shape({\n label: PropTypes.string,\n min: PropTypes.number,\n max: PropTypes.number,\n step: PropTypes.number,\n labelStep: PropTypes.number,\n axisLabel: PropTypes.string\n }),\n charts: PropTypes.array,\n title: PropTypes.string,\n onDataChange: PropTypes.func,\n addCategoryEnabled: PropTypes.bool,\n categoryDefaultLabel: PropTypes.string,\n defineChart: PropTypes.bool,\n theme: PropTypes.object\n };\n\n static defaultProps = {\n size: {\n width: 480,\n height: 480\n }\n };\n\n state = {\n charts: [\n chartTypes.Bar(),\n chartTypes.Histogram(),\n chartTypes.LineDot(),\n chartTypes.LineCross(),\n chartTypes.DotPlot(),\n chartTypes.LinePlot()\n ]\n };\n\n getChart = () => {\n const charts = this.props.charts || this.state.charts;\n let { chartType } = this.props;\n let ChartComponent = null;\n let chart = null;\n\n if (chartType) {\n chart = charts && charts.find(chart => chart.type === chartType);\n ChartComponent = chart && chart.Component;\n } else {\n chart = charts && charts[0];\n ChartComponent = chart && chart.Component;\n chartType = chart && chart.type;\n }\n\n return {\n type: chartType,\n ChartComponent\n };\n };\n\n changeData = data => {\n const { onDataChange } = this.props;\n\n onDataChange(data);\n };\n\n changeCategory = (index, newCategory) => {\n const integerIndex = parseInt(index, 10);\n\n if (integerIndex >= 0) {\n const { data, onDataChange } = this.props;\n data[integerIndex] = {\n ...data[integerIndex],\n ...newCategory\n };\n\n onDataChange(data);\n }\n };\n\n addCategory = (chartType, range) => {\n const { onDataChange, data, categoryDefaultLabel } = this.props;\n\n onDataChange([\n ...data,\n {\n label: categoryDefaultLabel || 'New Bar',\n value: range.step,\n deletable: true,\n editable: true,\n interactive: true\n }\n ]);\n };\n\n getFilteredCategories = () => {\n const { data, defineChart } = this.props;\n\n return data\n ? data.map(d => ({\n ...d,\n deletable: defineChart || d.deletable\n }))\n : [];\n };\n\n render() {\n const {\n classes,\n className,\n domain,\n range,\n size,\n title,\n addCategoryEnabled,\n theme\n } = this.props;\n let { chartType } = this.props;\n\n const defineChart = this.props.defineChart || false;\n const { width, height } = size || {};\n\n const { ChartComponent } = this.getChart();\n const categories = this.getFilteredCategories();\n\n const labelFontSize = (theme && theme.typography && theme.typography.fontSize) || 14;\n const correctValues = getDomainAndRangeByChartType(\n domain,\n range,\n size,\n chartType,\n labelFontSize\n );\n\n const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(\n correctValues.range,\n chartType\n );\n const common = {\n graphProps: createGraphProps(\n correctValues.domain,\n correctValues.range,\n size,\n () => this.rootNode\n )\n };\n\n log('[render] common:', common);\n\n const maskSize = { x: -10, y: -10, width: width + 20, height: height + 80 };\n const { scale } = common.graphProps;\n const xBand = dataToXBand(scale.x, categories, width, chartType);\n\n if (!ChartComponent) {\n return null;\n }\n\n const bandWidth = xBand.bandwidth();\n // for chartType \"line\", bandWidth will be 0, so we have to calculate it\n const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;\n const increaseHeight = defineChart ? 80 : 0;\n\n // if there are many categories, we have to rotate their names in order to fit\n // and we have to add extra value on top of some items\n const top = getTopPadding(barWidth);\n const rootCommon = cloneDeep(common);\n rootCommon.graphProps.size.height += top + increaseHeight;\n\n return (\n <div className={classNames(classes.class, className)}>\n <div className={classes.controls}>\n <ToolMenu\n className={classes.toolMenu}\n disabled={!addCategoryEnabled}\n addCategory={() => this.addCategory(chartType, correctValues.range)}\n />\n </div>\n <Root title={title} classes={classes} rootRef={r => (this.rootNode = r)} {...rootCommon}>\n <ChartGrid\n {...common}\n xBand={xBand}\n rowTickValues={horizontalLines}\n columnTickValues={verticalLines}\n />\n <ChartAxes\n {...common}\n defineChart={defineChart}\n categories={categories}\n xBand={xBand}\n leftAxis={leftAxis}\n onChange={this.changeData}\n onChangeCategory={this.changeCategory}\n top={top}\n />\n <mask id=\"myMask\">\n <rect {...maskSize} fill=\"white\" />\n </mask>\n <g id=\"marks\" mask=\"url('#myMask')\">\n <ChartComponent\n {...common}\n data={categories}\n defineChart={defineChart}\n onChange={this.changeData}\n onChangeCategory={this.changeCategory}\n />\n </g>\n </Root>\n </div>\n );\n }\n}\n\nconst styles = theme => ({\n graphBox: {\n transform: 'translate(60px, 35px)'\n },\n controls: {\n width: 'inherit',\n display: 'flex',\n justifyContent: 'space-between',\n padding: theme.spacing.unit,\n backgroundColor: color.primaryLight(),\n borderTop: `solid 1px ${color.primaryDark()}`,\n borderBottom: `solid 0px ${color.primaryDark()}`,\n borderLeft: `solid 1px ${color.primaryDark()}`,\n borderRight: `solid 1px ${color.primaryDark()}`\n },\n root: {\n overflow: 'hidden'\n },\n svg: {\n overflow: 'visible'\n },\n toolMenu: {\n minHeight: '36px'\n }\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"mappings":"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"}
|
package/lib/index.js
CHANGED
|
@@ -9,6 +9,18 @@ Object.defineProperty(exports, "Chart", {
|
|
|
9
9
|
return _chart["default"];
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
+
Object.defineProperty(exports, "ChartType", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _chartType["default"];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "ConfigureChartPanel", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _chartSetup["default"];
|
|
22
|
+
}
|
|
23
|
+
});
|
|
12
24
|
Object.defineProperty(exports, "chartTypes", {
|
|
13
25
|
enumerable: true,
|
|
14
26
|
get: function get() {
|
|
@@ -20,5 +32,9 @@ var _chart = _interopRequireDefault(require("./chart"));
|
|
|
20
32
|
|
|
21
33
|
var _chartTypes = _interopRequireDefault(require("./chart-types"));
|
|
22
34
|
|
|
35
|
+
var _chartSetup = _interopRequireDefault(require("./chart-setup"));
|
|
36
|
+
|
|
37
|
+
var _chartType = _interopRequireDefault(require("./chart-type"));
|
|
38
|
+
|
|
23
39
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
24
40
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["import Chart from './chart';\nimport chartTypes from './chart-types';\nexport { Chart, chartTypes };\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["import Chart from './chart';\nimport chartTypes from './chart-types';\nimport ConfigureChartPanel from './chart-setup';\nimport ChartType from './chart-type';\n\nexport { Chart, chartTypes, ChartType, ConfigureChartPanel };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
|
|
@@ -85,7 +85,7 @@ var RawDragHandle = /*#__PURE__*/function (_React$Component) {
|
|
|
85
85
|
y: y,
|
|
86
86
|
classes: classes,
|
|
87
87
|
className: (0, _classnames["default"])(className, !interactive && 'non-interactive'),
|
|
88
|
-
correctness:
|
|
88
|
+
correctness: correctness
|
|
89
89
|
}, rest));
|
|
90
90
|
}
|
|
91
91
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-handle.js","names":["RawDragHandle","props","x","y","graphProps","classes","className","interactive","CustomDraggableComponent","correctness","rest","scale","classNames","React","Component","PropTypes","number","isRequired","width","types","GraphPropsType","object","string","bool","func","shape","value","label","DragHandle","withStyles","theme","handle","fill","color","secondary","transition","secondaryDark","correct","incorrect","disabled","line","stroke","DraggableHandle","gridDraggable","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"sources":["../../../src/line/common/drag-handle.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { color } from '@pie-lib/render-ui';\nimport PropTypes from 'prop-types';\nimport { correct, incorrect, disabled } from '../../common/styles';\n\nclass RawDragHandle extends React.Component {\n static propTypes = {\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n width: PropTypes.number,\n graphProps: types.GraphPropsType.isRequired,\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n interactive: PropTypes.bool,\n CustomDraggableComponent: PropTypes.func,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string\n })\n };\n\n render() {\n const {\n x,\n y,\n graphProps,\n classes,\n className,\n interactive,\n CustomDraggableComponent,\n correctness,\n ...rest\n } = this.props;\n const { scale } = graphProps;\n return (\n <CustomDraggableComponent\n scale={scale}\n x={x}\n y={y}\n classes={classes}\n className={classNames(className, !interactive && 'non-interactive')}\n correctness={
|
|
1
|
+
{"version":3,"file":"drag-handle.js","names":["RawDragHandle","props","x","y","graphProps","classes","className","interactive","CustomDraggableComponent","correctness","rest","scale","classNames","React","Component","PropTypes","number","isRequired","width","types","GraphPropsType","object","string","bool","func","shape","value","label","DragHandle","withStyles","theme","handle","fill","color","secondary","transition","secondaryDark","correct","incorrect","disabled","line","stroke","DraggableHandle","gridDraggable","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"sources":["../../../src/line/common/drag-handle.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { color } from '@pie-lib/render-ui';\nimport PropTypes from 'prop-types';\nimport { correct, incorrect, disabled } from '../../common/styles';\n\nclass RawDragHandle extends React.Component {\n static propTypes = {\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n width: PropTypes.number,\n graphProps: types.GraphPropsType.isRequired,\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n interactive: PropTypes.bool,\n CustomDraggableComponent: PropTypes.func,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string\n })\n };\n\n render() {\n const {\n x,\n y,\n graphProps,\n classes,\n className,\n interactive,\n CustomDraggableComponent,\n correctness,\n ...rest\n } = this.props;\n\n const { scale } = graphProps;\n return (\n <CustomDraggableComponent\n scale={scale}\n x={x}\n y={y}\n classes={classes}\n className={classNames(className, !interactive && 'non-interactive')}\n correctness={correctness}\n {...rest}\n />\n );\n }\n}\n\nexport const DragHandle = withStyles(theme => ({\n handle: {\n fill: color.secondary(),\n transition: 'fill 200ms linear, height 200ms linear',\n '&:hover': {\n fill: color.secondaryDark()\n },\n '&.correct': correct('fill'),\n '&.incorrect': incorrect('fill'),\n '&.non-interactive': disabled('fill')\n },\n line: {\n stroke: color.secondary(),\n transition: 'fill 200ms linear, height 200ms linear',\n '&:hover': {\n stroke: color.secondaryDark()\n },\n '&.non-interactive': disabled('stroke'),\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke')\n }\n}))(RawDragHandle);\n\nconst DraggableHandle = gridDraggable({\n axis: 'y',\n fromDelta: (props, delta) => {\n //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n delta.x = 0;\n const newPoint = utils.point(props).add(utils.point(delta));\n return newPoint.y;\n },\n bounds: (props, { domain, range }) => {\n const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n return utils.bounds(area, domain, range);\n },\n anchorPoint: props => {\n return { x: props.x, y: props.y };\n }\n})(DragHandle);\n\nexport default DraggableHandle;\n"],"mappings":"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"}
|
package/lib/line/common/line.js
CHANGED
|
@@ -150,7 +150,8 @@ var RawLine = /*#__PURE__*/function (_React$Component) {
|
|
|
150
150
|
graphProps = _this$props.graphProps,
|
|
151
151
|
data = _this$props.data,
|
|
152
152
|
classes = _this$props.classes,
|
|
153
|
-
CustomDraggableComponent = _this$props.CustomDraggableComponent
|
|
153
|
+
CustomDraggableComponent = _this$props.CustomDraggableComponent,
|
|
154
|
+
defineChart = _this$props.defineChart;
|
|
154
155
|
var _this$state = this.state,
|
|
155
156
|
lineState = _this$state.line,
|
|
156
157
|
dragging = _this$state.dragging;
|
|
@@ -167,12 +168,13 @@ var RawLine = /*#__PURE__*/function (_React$Component) {
|
|
|
167
168
|
className: classes.line
|
|
168
169
|
}), lineToUse && lineToUse.map(function (point, i) {
|
|
169
170
|
var r = 6;
|
|
170
|
-
var
|
|
171
|
+
var enableDraggable = defineChart ? true : point.interactive;
|
|
172
|
+
var Component = enableDraggable ? _dragHandle["default"] : _dragHandle.DragHandle;
|
|
171
173
|
return /*#__PURE__*/_react["default"].createElement(Component, {
|
|
172
174
|
key: "point-".concat(point.x, "-").concat(i),
|
|
173
175
|
x: point.x,
|
|
174
176
|
y: point.dragValue !== undefined ? point.dragValue : point.y,
|
|
175
|
-
interactive:
|
|
177
|
+
interactive: enableDraggable,
|
|
176
178
|
r: r,
|
|
177
179
|
onDragStart: function onDragStart() {
|
|
178
180
|
return _this2.setState({
|
|
@@ -206,6 +208,7 @@ _defineProperty(RawLine, "propTypes", {
|
|
|
206
208
|
xBand: _propTypes["default"].func,
|
|
207
209
|
index: _propTypes["default"].number.isRequired,
|
|
208
210
|
graphProps: _plot.types.GraphPropsType.isRequired,
|
|
211
|
+
defineChart: _propTypes["default"].bool,
|
|
209
212
|
data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
210
213
|
label: _propTypes["default"].string,
|
|
211
214
|
value: _propTypes["default"].number
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line.js","names":["getData","data","domain","max","length","map","el","i","x","y","value","RawLine","props","line","setState","index","onChange","dragging","state","existing","next","newLine","dragValue","setDragValue","undefined","graphProps","nextProps","isEqual","classes","CustomDraggableComponent","lineState","scale","lineToUse","d","point","r","Component","interactive","DraggableHandle","DragHandle","v","dragStop","correctness","React","PropTypes","func","number","object","label","string","xBand","isRequired","types","GraphPropsType","arrayOf","shape","StyledLine","withStyles","theme","fill","stroke","color","primaryLight","strokeWidth","transition","primaryDark","Line","category","changeLine","array"],"sources":["../../../src/line/common/line.jsx"],"sourcesContent":["import React from 'react';\nimport { Group } from '@vx/group';\nimport { LinePath } from '@vx/shape';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from './drag-handle';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport isEqual from 'lodash/isEqual';\nimport { color } from '@pie-lib/render-ui';\n\nconst getData = (data, domain) => {\n const { max } = domain || {};\n const length = data.length;\n\n if (!max || !length) {\n return [];\n }\n\n return data.map((el, i) => ({\n ...el,\n x: length > 1 ? i * (max / (length - 1)) : 0.5,\n y: el.value\n }));\n};\n\nexport class RawLine extends React.Component {\n static propTypes = {\n onChange: PropTypes.func,\n value: PropTypes.number,\n classes: PropTypes.object,\n label: PropTypes.string,\n xBand: PropTypes.func,\n index: PropTypes.number.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number\n })\n ),\n CustomDraggableComponent: PropTypes.func\n };\n\n static defaultProps = {\n index: 0\n };\n\n constructor(props) {\n super(props);\n this.state = {\n dragValue: undefined,\n line: getData(props.data, props.graphProps.domain)\n };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!isEqual(this.props.data, nextProps.data)) {\n this.setState({\n line: getData(nextProps.data, nextProps.graphProps.domain)\n });\n }\n }\n\n setDragValue = line => this.setState({ line });\n\n dragStop = index => {\n const { onChange } = this.props;\n this.setState({ dragging: false }, () => {\n onChange(index, this.state.line[index]);\n });\n };\n\n dragValue = (index, existing, next) => {\n const newLine = [...this.state.line];\n newLine[index].dragValue = next;\n this.setDragValue(newLine);\n };\n\n render() {\n const { graphProps, data, classes, CustomDraggableComponent } = this.props;\n const { line: lineState, dragging } = this.state;\n const { scale } = graphProps;\n const lineToUse = dragging ? lineState : getData(data, graphProps.domain);\n\n return (\n <React.Fragment>\n <LinePath\n data={lineToUse}\n x={d => scale.x(d.x)}\n y={d => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}\n className={classes.line}\n />\n {lineToUse &&\n lineToUse.map((point, i) => {\n const r = 6;\n const Component = point.interactive ? DraggableHandle : DragHandle;\n\n return (\n <Component\n key={`point-${point.x}-${i}`}\n x={point.x}\n y={point.dragValue !== undefined ? point.dragValue : point.y}\n interactive={point.interactive}\n r={r}\n onDragStart={() => this.setState({ dragging: true })}\n onDrag={v =>\n this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)\n }\n onDragStop={() => this.dragStop(i)}\n graphProps={graphProps}\n CustomDraggableComponent={CustomDraggableComponent}\n correctness={point.correctness}\n />\n );\n })}\n </React.Fragment>\n );\n }\n}\n\nconst StyledLine = withStyles(theme => ({\n line: {\n fill: 'transparent',\n stroke: color.primaryLight(),\n strokeWidth: 3,\n transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n '&:hover': {\n strokeWidth: 6,\n stroke: color.primaryDark()\n }\n }\n}))(RawLine);\n\nexport class Line extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChange: PropTypes.func,\n xBand: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired\n };\n\n changeLine = (index, category) => {\n const { onChange } = this.props;\n const newLine = [...this.props.data];\n const { dragValue, value } = category;\n\n newLine[index].value = dragValue >= 0 ? dragValue : value;\n\n onChange(newLine);\n };\n\n render() {\n const props = this.props;\n\n return (\n <Group>\n <StyledLine {...props} onChange={this.changeLine} />\n </Group>\n );\n }\n}\n\nexport default Line;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"line.js","names":["getData","data","domain","max","length","map","el","i","x","y","value","RawLine","props","line","setState","index","onChange","dragging","state","existing","next","newLine","dragValue","setDragValue","undefined","graphProps","nextProps","isEqual","classes","CustomDraggableComponent","defineChart","lineState","scale","lineToUse","d","point","r","enableDraggable","interactive","Component","DraggableHandle","DragHandle","v","dragStop","correctness","React","PropTypes","func","number","object","label","string","xBand","isRequired","types","GraphPropsType","bool","arrayOf","shape","StyledLine","withStyles","theme","fill","stroke","color","primaryLight","strokeWidth","transition","primaryDark","Line","category","changeLine","array"],"sources":["../../../src/line/common/line.jsx"],"sourcesContent":["import React from 'react';\nimport { Group } from '@vx/group';\nimport { LinePath } from '@vx/shape';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from './drag-handle';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport isEqual from 'lodash/isEqual';\nimport { color } from '@pie-lib/render-ui';\n\nconst getData = (data, domain) => {\n const { max } = domain || {};\n const length = data.length;\n\n if (!max || !length) {\n return [];\n }\n\n return data.map((el, i) => ({\n ...el,\n x: length > 1 ? i * (max / (length - 1)) : 0.5,\n y: el.value\n }));\n};\n\nexport class RawLine extends React.Component {\n static propTypes = {\n onChange: PropTypes.func,\n value: PropTypes.number,\n classes: PropTypes.object,\n label: PropTypes.string,\n xBand: PropTypes.func,\n index: PropTypes.number.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n defineChart: PropTypes.bool,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number\n })\n ),\n CustomDraggableComponent: PropTypes.func\n };\n\n static defaultProps = {\n index: 0\n };\n\n constructor(props) {\n super(props);\n this.state = {\n dragValue: undefined,\n line: getData(props.data, props.graphProps.domain)\n };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!isEqual(this.props.data, nextProps.data)) {\n this.setState({\n line: getData(nextProps.data, nextProps.graphProps.domain)\n });\n }\n }\n\n setDragValue = line => this.setState({ line });\n\n dragStop = index => {\n const { onChange } = this.props;\n this.setState({ dragging: false }, () => {\n onChange(index, this.state.line[index]);\n });\n };\n\n dragValue = (index, existing, next) => {\n const newLine = [...this.state.line];\n newLine[index].dragValue = next;\n this.setDragValue(newLine);\n };\n\n render() {\n const { graphProps, data, classes, CustomDraggableComponent, defineChart } = this.props;\n const { line: lineState, dragging } = this.state;\n const { scale } = graphProps;\n const lineToUse = dragging ? lineState : getData(data, graphProps.domain);\n\n return (\n <React.Fragment>\n <LinePath\n data={lineToUse}\n x={d => scale.x(d.x)}\n y={d => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}\n className={classes.line}\n />\n {lineToUse &&\n lineToUse.map((point, i) => {\n const r = 6;\n const enableDraggable = defineChart ? true : point.interactive;\n const Component = enableDraggable ? DraggableHandle : DragHandle;\n\n return (\n <Component\n key={`point-${point.x}-${i}`}\n x={point.x}\n y={point.dragValue !== undefined ? point.dragValue : point.y}\n interactive={enableDraggable}\n r={r}\n onDragStart={() => this.setState({ dragging: true })}\n onDrag={v =>\n this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)\n }\n onDragStop={() => this.dragStop(i)}\n graphProps={graphProps}\n CustomDraggableComponent={CustomDraggableComponent}\n correctness={point.correctness}\n />\n );\n })}\n </React.Fragment>\n );\n }\n}\n\nconst StyledLine = withStyles(theme => ({\n line: {\n fill: 'transparent',\n stroke: color.primaryLight(),\n strokeWidth: 3,\n transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n '&:hover': {\n strokeWidth: 6,\n stroke: color.primaryDark()\n }\n }\n}))(RawLine);\n\nexport class Line extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChange: PropTypes.func,\n xBand: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired\n };\n\n changeLine = (index, category) => {\n const { onChange } = this.props;\n const newLine = [...this.props.data];\n const { dragValue, value } = category;\n\n newLine[index].value = dragValue >= 0 ? dragValue : value;\n\n onChange(newLine);\n };\n\n render() {\n const props = this.props;\n\n return (\n <Group>\n <StyledLine {...props} onChange={this.changeLine} />\n </Group>\n );\n }\n}\n\nexport default Line;\n"],"mappings":"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"}
|
package/lib/plot/common/plot.js
CHANGED
|
@@ -225,12 +225,13 @@ var Plot = /*#__PURE__*/function (_React$Component2) {
|
|
|
225
225
|
graphProps = _this$props3.graphProps,
|
|
226
226
|
xBand = _this$props3.xBand,
|
|
227
227
|
CustomBarElement = _this$props3.CustomBarElement,
|
|
228
|
-
_onChangeCategory = _this$props3.onChangeCategory
|
|
228
|
+
_onChangeCategory = _this$props3.onChangeCategory,
|
|
229
|
+
defineChart = _this$props3.defineChart;
|
|
229
230
|
return /*#__PURE__*/_react["default"].createElement(_group.Group, null, (data || []).map(function (d, index) {
|
|
230
231
|
return /*#__PURE__*/_react["default"].createElement(Bar, {
|
|
231
232
|
value: d.value,
|
|
232
233
|
label: d.label,
|
|
233
|
-
interactive: d.interactive,
|
|
234
|
+
interactive: defineChart ? true : d.interactive,
|
|
234
235
|
xBand: xBand,
|
|
235
236
|
index: index,
|
|
236
237
|
key: "bar-".concat(d.label, "-").concat(d.value, "-").concat(index),
|
|
@@ -255,6 +256,7 @@ _defineProperty(Plot, "propTypes", {
|
|
|
255
256
|
onChangeCategory: _propTypes["default"].func,
|
|
256
257
|
xBand: _propTypes["default"].func,
|
|
257
258
|
graphProps: _plot.types.GraphPropsType.isRequired,
|
|
259
|
+
defineChart: _propTypes["default"].bool,
|
|
258
260
|
CustomBarElement: _propTypes["default"].func
|
|
259
261
|
});
|
|
260
262
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plot.js","names":["log","debug","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","bandKey","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","map","dragStop","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","withStyles","theme","dot","fill","color","primaryLight","correct","incorrect","line","stroke","Plot","data","d","category","array"],"sources":["../../../src/plot/common/plot.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\n\nexport class RawPlot extends React.Component {\n static propTypes = {\n onChangeCategory: PropTypes.func,\n value: PropTypes.number,\n classes: PropTypes.object,\n label: PropTypes.string,\n xBand: PropTypes.func,\n index: PropTypes.number.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n CustomBarElement: PropTypes.func,\n interactive: PropTypes.bool,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string\n })\n };\n\n constructor(props) {\n super(props);\n this.state = {\n dragValue: undefined\n };\n }\n\n setDragValue = dragValue => this.setState({ dragValue });\n\n dragStop = () => {\n const { label, onChangeCategory } = this.props;\n const { dragValue } = this.state;\n log('[dragStop]', dragValue);\n\n if (dragValue !== undefined) {\n onChangeCategory({ label, value: dragValue });\n }\n\n this.setDragValue(undefined);\n };\n\n dragValue = (existing, next) => {\n log('[dragValue] next:', next);\n\n this.setDragValue(next);\n };\n\n render() {\n const {\n graphProps,\n value,\n label,\n classes,\n xBand,\n index,\n CustomBarElement,\n interactive,\n correctness\n } = this.props;\n const { scale, range, size } = graphProps;\n const { max } = range || {};\n const { dragValue } = this.state;\n\n const v = Number.isFinite(dragValue) ? dragValue : value;\n const barWidth = xBand.bandwidth();\n const barHeight = scale.y(range.max - v);\n const barX = xBand(bandKey({ label }, index));\n\n log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n const values = [];\n\n for (let i = 0; i < v; i++) {\n values.push(i);\n }\n\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n const Component = interactive ? DraggableHandle : DragHandle;\n\n return (\n <React.Fragment>\n {values.map(index =>\n CustomBarElement({\n index,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n classes,\n scale\n })\n )}\n <Component\n x={barX}\n y={v}\n interactive={interactive}\n width={barWidth}\n onDrag={v => this.dragValue(value, v)}\n onDragStop={this.dragStop}\n graphProps={graphProps}\n correctness={correctness}\n />\n </React.Fragment>\n );\n }\n}\n\nconst Bar = withStyles(theme => ({\n dot: {\n fill: color.primaryLight(),\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke')\n },\n line: {\n stroke: color.primaryLight(),\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke')\n }\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChangeCategory: PropTypes.func,\n xBand: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired,\n CustomBarElement: PropTypes.func\n };\n\n render() {\n const { data, graphProps, xBand, CustomBarElement, onChangeCategory } = this.props;\n\n return (\n <Group>\n {(data || []).map((d, index) => (\n <Bar\n value={d.value}\n label={d.label}\n interactive={d.interactive}\n xBand={xBand}\n index={index}\n key={`bar-${d.label}-${d.value}-${index}`}\n onChangeCategory={category => onChangeCategory(index, category)}\n graphProps={graphProps}\n CustomBarElement={CustomBarElement}\n correctness={d.correctness}\n />\n ))}\n </Group>\n );\n }\n}\n\nexport default Plot;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"plot.js","names":["log","debug","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","bandKey","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","map","dragStop","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","withStyles","theme","dot","fill","color","primaryLight","correct","incorrect","line","stroke","Plot","data","defineChart","d","category","array"],"sources":["../../../src/plot/common/plot.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\n\nexport class RawPlot extends React.Component {\n static propTypes = {\n onChangeCategory: PropTypes.func,\n value: PropTypes.number,\n classes: PropTypes.object,\n label: PropTypes.string,\n xBand: PropTypes.func,\n index: PropTypes.number.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n CustomBarElement: PropTypes.func,\n interactive: PropTypes.bool,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string\n })\n };\n\n constructor(props) {\n super(props);\n this.state = {\n dragValue: undefined\n };\n }\n\n setDragValue = dragValue => this.setState({ dragValue });\n\n dragStop = () => {\n const { label, onChangeCategory } = this.props;\n const { dragValue } = this.state;\n log('[dragStop]', dragValue);\n\n if (dragValue !== undefined) {\n onChangeCategory({ label, value: dragValue });\n }\n\n this.setDragValue(undefined);\n };\n\n dragValue = (existing, next) => {\n log('[dragValue] next:', next);\n\n this.setDragValue(next);\n };\n\n render() {\n const {\n graphProps,\n value,\n label,\n classes,\n xBand,\n index,\n CustomBarElement,\n interactive,\n correctness\n } = this.props;\n\n const { scale, range, size } = graphProps;\n const { max } = range || {};\n const { dragValue } = this.state;\n\n const v = Number.isFinite(dragValue) ? dragValue : value;\n const barWidth = xBand.bandwidth();\n const barHeight = scale.y(range.max - v);\n const barX = xBand(bandKey({ label }, index));\n\n log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n const values = [];\n\n for (let i = 0; i < v; i++) {\n values.push(i);\n }\n\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n const Component = interactive ? DraggableHandle : DragHandle;\n\n return (\n <React.Fragment>\n {values.map(index =>\n CustomBarElement({\n index,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n classes,\n scale\n })\n )}\n <Component\n x={barX}\n y={v}\n interactive={interactive}\n width={barWidth}\n onDrag={v => this.dragValue(value, v)}\n onDragStop={this.dragStop}\n graphProps={graphProps}\n correctness={correctness}\n />\n </React.Fragment>\n );\n }\n}\n\nconst Bar = withStyles(theme => ({\n dot: {\n fill: color.primaryLight(),\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke')\n },\n line: {\n stroke: color.primaryLight(),\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke')\n }\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChangeCategory: PropTypes.func,\n xBand: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired,\n defineChart: PropTypes.bool,\n CustomBarElement: PropTypes.func\n };\n\n render() {\n const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart } = this.props;\n\n return (\n <Group>\n {(data || []).map((d, index) => (\n <Bar\n value={d.value}\n label={d.label}\n interactive={defineChart ? true : d.interactive}\n xBand={xBand}\n index={index}\n key={`bar-${d.label}-${d.value}-${index}`}\n onChangeCategory={category => onChangeCategory(index, category)}\n graphProps={graphProps}\n CustomBarElement={CustomBarElement}\n correctness={d.correctness}\n />\n ))}\n </Group>\n );\n }\n}\n\nexport default Plot;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "4.5.11-next.
|
|
6
|
+
"version": "4.5.11-next.432+d074c224",
|
|
7
7
|
"description": "charting",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"react",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^16.8.1"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "d074c224de0923ad58118a3150d7fc6275f72c15"
|
|
47
47
|
}
|
package/src/axes.jsx
CHANGED
|
@@ -31,6 +31,13 @@ export class TickComponent extends React.Component {
|
|
|
31
31
|
onChangeCategory(index, { ...category, interactive: !category.interactive });
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
+
changeEditable = (index, value) => {
|
|
35
|
+
const { categories, onChangeCategory } = this.props;
|
|
36
|
+
const category = categories[index];
|
|
37
|
+
|
|
38
|
+
onChangeCategory(index, { ...category, editable: !category.editable || false });
|
|
39
|
+
};
|
|
40
|
+
|
|
34
41
|
render() {
|
|
35
42
|
const {
|
|
36
43
|
classes,
|
|
@@ -90,17 +97,7 @@ export class TickComponent extends React.Component {
|
|
|
90
97
|
)}
|
|
91
98
|
<MarkLabel
|
|
92
99
|
inputRef={r => (this.input = r)}
|
|
93
|
-
disabled={!
|
|
94
|
-
mark={category}
|
|
95
|
-
graphProps={graphProps}
|
|
96
|
-
onChange={newLabel => this.changeCategory(index, newLabel)}
|
|
97
|
-
barWidth={barWidth}
|
|
98
|
-
rotate={rotate}
|
|
99
|
-
correctness={correctness}
|
|
100
|
-
/>
|
|
101
|
-
<MarkLabel
|
|
102
|
-
inputRef={r => (this.input = r)}
|
|
103
|
-
disabled={!(editable && interactive)}
|
|
100
|
+
disabled={defineChart ? false : !editable}
|
|
104
101
|
mark={category}
|
|
105
102
|
graphProps={graphProps}
|
|
106
103
|
onChange={newLabel => this.changeCategory(index, newLabel)}
|
|
@@ -157,6 +154,31 @@ export class TickComponent extends React.Component {
|
|
|
157
154
|
</tspan>
|
|
158
155
|
</text>
|
|
159
156
|
)}
|
|
157
|
+
{defineChart && index === 0 && (
|
|
158
|
+
<text
|
|
159
|
+
x={x - 80}
|
|
160
|
+
y={y + 80 + top}
|
|
161
|
+
width={barWidth}
|
|
162
|
+
height={4}
|
|
163
|
+
style={{
|
|
164
|
+
position: 'absolute',
|
|
165
|
+
pointerEvents: 'none',
|
|
166
|
+
wordBreak: 'break-word',
|
|
167
|
+
overflow: 'visible',
|
|
168
|
+
maxWidth: barWidth,
|
|
169
|
+
display: 'inline-block'
|
|
170
|
+
}}
|
|
171
|
+
>
|
|
172
|
+
<tspan x="0" dy=".6em">
|
|
173
|
+
{' '}
|
|
174
|
+
Student can{' '}
|
|
175
|
+
</tspan>
|
|
176
|
+
<tspan x="0" dy="1.2em">
|
|
177
|
+
{' '}
|
|
178
|
+
edit name
|
|
179
|
+
</tspan>
|
|
180
|
+
</text>
|
|
181
|
+
)}
|
|
160
182
|
{defineChart && (
|
|
161
183
|
<foreignObject
|
|
162
184
|
x={x - 24}
|
|
@@ -171,6 +193,20 @@ export class TickComponent extends React.Component {
|
|
|
171
193
|
/>
|
|
172
194
|
</foreignObject>
|
|
173
195
|
)}
|
|
196
|
+
{defineChart && (
|
|
197
|
+
<foreignObject
|
|
198
|
+
x={x - 24}
|
|
199
|
+
y={y + 70 + top}
|
|
200
|
+
width={barWidth}
|
|
201
|
+
height={4}
|
|
202
|
+
style={{ pointerEvents: 'visible', overflow: 'visible' }}
|
|
203
|
+
>
|
|
204
|
+
<Checkbox
|
|
205
|
+
checked={editable}
|
|
206
|
+
onChange={e => this.changeEditable(index, e.target.checked)}
|
|
207
|
+
/>
|
|
208
|
+
</foreignObject>
|
|
209
|
+
)}
|
|
174
210
|
</g>
|
|
175
211
|
);
|
|
176
212
|
}
|
package/src/bars/common/bars.jsx
CHANGED
|
@@ -65,6 +65,7 @@ export class RawBar extends React.Component {
|
|
|
65
65
|
interactive,
|
|
66
66
|
correctness
|
|
67
67
|
} = this.props;
|
|
68
|
+
|
|
68
69
|
const { scale, range } = graphProps;
|
|
69
70
|
const { dragValue } = this.state;
|
|
70
71
|
|
|
@@ -112,18 +113,20 @@ export class Bars extends React.Component {
|
|
|
112
113
|
static propTypes = {
|
|
113
114
|
data: PropTypes.array,
|
|
114
115
|
onChangeCategory: PropTypes.func,
|
|
116
|
+
defineChart: PropTypes.bool,
|
|
115
117
|
xBand: PropTypes.func,
|
|
116
118
|
graphProps: types.GraphPropsType.isRequired
|
|
117
119
|
};
|
|
118
120
|
|
|
119
121
|
render() {
|
|
120
|
-
const { data, graphProps, xBand, onChangeCategory } = this.props;
|
|
122
|
+
const { data, graphProps, xBand, onChangeCategory, defineChart } = this.props;
|
|
123
|
+
|
|
121
124
|
return (
|
|
122
125
|
<Group>
|
|
123
126
|
{(data || []).map((d, index) => (
|
|
124
127
|
<Bar
|
|
125
128
|
value={d.value}
|
|
126
|
-
interactive={d.interactive}
|
|
129
|
+
interactive={defineChart ? true : d.interactive}
|
|
127
130
|
label={d.label}
|
|
128
131
|
xBand={xBand}
|
|
129
132
|
index={index}
|