@pie-lib/charting 5.4.3-next.0 → 5.5.1-next.0
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/CHANGELOG.md +13 -0
- package/lib/bars/common/bars.js +11 -4
- package/lib/bars/common/bars.js.map +1 -1
- package/lib/bars/histogram.js +2 -1
- package/lib/bars/histogram.js.map +1 -1
- package/package.json +2 -2
- package/src/bars/common/bars.jsx +28 -4
- package/src/bars/histogram.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [5.5.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.4.2...@pie-lib/charting@5.5.0) (2022-12-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **charting:** add color scheme for charting bars ([0e3cb02](https://github.com/pie-framework/pie-lib/commit/0e3cb021e646efebf84111ec9a1016495e6a4a39))
|
|
12
|
+
* **charting:** update snapshots ([1e61ad2](https://github.com/pie-framework/pie-lib/commit/1e61ad27b8b78842cd56b4bdb8ce1215760f2d35))
|
|
13
|
+
* **charting:** use colors for bars only in histogram chart type ([d7bef94](https://github.com/pie-framework/pie-lib/commit/d7bef947996282270f6343afd2d332f73ef64e31))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
6
19
|
## [5.4.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.4.1...@pie-lib/charting@5.4.2) (2022-12-06)
|
|
7
20
|
|
|
8
21
|
|
package/lib/bars/common/bars.js
CHANGED
|
@@ -52,6 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
52
52
|
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; } }
|
|
53
53
|
|
|
54
54
|
var log = (0, _debug["default"])('pie-lib:chart:bars');
|
|
55
|
+
var histogramColors = ['#006699', '#F59B00', '#08916D', '#529EE0', '#52B7D8', '#D9A6C2', '#FFB03B', '#54A77B', '#E16032', '#4FD2D2', '#F0E442', '#E287B2'];
|
|
55
56
|
|
|
56
57
|
var RawBar = /*#__PURE__*/function (_React$Component) {
|
|
57
58
|
(0, _inherits2["default"])(RawBar, _React$Component);
|
|
@@ -108,7 +109,8 @@ var RawBar = /*#__PURE__*/function (_React$Component) {
|
|
|
108
109
|
xBand = _this$props2.xBand,
|
|
109
110
|
index = _this$props2.index,
|
|
110
111
|
interactive = _this$props2.interactive,
|
|
111
|
-
correctness = _this$props2.correctness
|
|
112
|
+
correctness = _this$props2.correctness,
|
|
113
|
+
barColor = _this$props2.barColor;
|
|
112
114
|
var scale = graphProps.scale,
|
|
113
115
|
range = graphProps.range;
|
|
114
116
|
var dragValue = this.state.dragValue;
|
|
@@ -127,7 +129,10 @@ var RawBar = /*#__PURE__*/function (_React$Component) {
|
|
|
127
129
|
y: scale.y(yy),
|
|
128
130
|
width: barWidth,
|
|
129
131
|
height: barHeight,
|
|
130
|
-
className: classes.bar
|
|
132
|
+
className: classes.bar,
|
|
133
|
+
style: barColor && {
|
|
134
|
+
fill: barColor
|
|
135
|
+
}
|
|
131
136
|
}), /*#__PURE__*/_react["default"].createElement(Component, {
|
|
132
137
|
x: barX,
|
|
133
138
|
y: v,
|
|
@@ -186,7 +191,8 @@ var Bars = /*#__PURE__*/function (_React$Component2) {
|
|
|
186
191
|
graphProps = _this$props3.graphProps,
|
|
187
192
|
xBand = _this$props3.xBand,
|
|
188
193
|
_onChangeCategory = _this$props3.onChangeCategory,
|
|
189
|
-
defineChart = _this$props3.defineChart
|
|
194
|
+
defineChart = _this$props3.defineChart,
|
|
195
|
+
histogram = _this$props3.histogram;
|
|
190
196
|
return /*#__PURE__*/_react["default"].createElement(_group.Group, null, (data || []).map(function (d, index) {
|
|
191
197
|
return /*#__PURE__*/_react["default"].createElement(Bar, {
|
|
192
198
|
value: d.value,
|
|
@@ -199,7 +205,8 @@ var Bars = /*#__PURE__*/function (_React$Component2) {
|
|
|
199
205
|
return _onChangeCategory(index, category);
|
|
200
206
|
},
|
|
201
207
|
graphProps: graphProps,
|
|
202
|
-
correctness: d.correctness
|
|
208
|
+
correctness: d.correctness,
|
|
209
|
+
barColor: histogram && (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
|
|
203
210
|
});
|
|
204
211
|
}));
|
|
205
212
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/bars/common/bars.jsx"],"names":["log","RawBar","props","dragValue","setState","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","graphProps","classes","xBand","index","interactive","correctness","scale","range","v","Number","isFinite","barWidth","bandwidth","barHeight","y","max","barX","rawY","yy","Component","DraggableHandle","DragHandle","bar","dragStop","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","
|
|
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","func","number","object","string","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 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 };\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"}
|
package/lib/bars/histogram.js
CHANGED
|
@@ -60,7 +60,8 @@ var Histogram = /*#__PURE__*/function (_React$Component) {
|
|
|
60
60
|
|
|
61
61
|
var xBand = (0, _utils.dataToXBand)(scale.x, data, size.width, 'histogram');
|
|
62
62
|
return /*#__PURE__*/_react["default"].createElement(_bars["default"], (0, _extends2["default"])({}, props, {
|
|
63
|
-
xBand: xBand
|
|
63
|
+
xBand: xBand,
|
|
64
|
+
histogram: true
|
|
64
65
|
}));
|
|
65
66
|
}
|
|
66
67
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/bars/histogram.js"],"names":["Histogram","props","data","graphProps","scale","size","xBand","x","width","React","Component","PropTypes","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,S;;;;;;;;;;;;WAOX,kBAAS;AACP,UAAMC,KAAK,GAAG,KAAKA,KAAnB;AACA,UAAQC,IAAR,GAA6BD,KAA7B,CAAQC,IAAR;AAAA,UAAcC,UAAd,GAA6BF,KAA7B,CAAcE,UAAd;;AACA,iBAAkCA,UAAU,IAAI,EAAhD;AAAA,4BAAQC,KAAR;AAAA,UAAQA,KAAR,2BAAgB,EAAhB;AAAA,2BAAoBC,IAApB;AAAA,UAAoBA,IAApB,0BAA2B,EAA3B;;AACA,UAAMC,KAAK,GAAG,wBAAYF,KAAK,CAACG,CAAlB,EAAqBL,IAArB,EAA2BG,IAAI,CAACG,KAAhC,EAAuC,WAAvC,CAAd;AAEA,0BAAO,gCAAC,gBAAD,gCAAUP,KAAV;AAAiB,QAAA,KAAK,EAAEK;
|
|
1
|
+
{"version":3,"sources":["../../src/bars/histogram.js"],"names":["Histogram","props","data","graphProps","scale","size","xBand","x","width","React","Component","PropTypes","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,S;;;;;;;;;;;;WAOX,kBAAS;AACP,UAAMC,KAAK,GAAG,KAAKA,KAAnB;AACA,UAAQC,IAAR,GAA6BD,KAA7B,CAAQC,IAAR;AAAA,UAAcC,UAAd,GAA6BF,KAA7B,CAAcE,UAAd;;AACA,iBAAkCA,UAAU,IAAI,EAAhD;AAAA,4BAAQC,KAAR;AAAA,UAAQA,KAAR,2BAAgB,EAAhB;AAAA,2BAAoBC,IAApB;AAAA,UAAoBA,IAApB,0BAA2B,EAA3B;;AACA,UAAMC,KAAK,GAAG,wBAAYF,KAAK,CAACG,CAAlB,EAAqBL,IAArB,EAA2BG,IAAI,CAACG,KAAhC,EAAuC,WAAvC,CAAd;AAEA,0BAAO,gCAAC,gBAAD,gCAAUP,KAAV;AAAiB,QAAA,KAAK,EAAEK,KAAxB;AAA+B,QAAA,SAAS,EAAE;AAA1C,SAAP;AACD;;;EAd4BG,kBAAMC,S;;;iCAAxBV,S,eACQ;AACjBE,EAAAA,IAAI,EAAES,sBAAUC,KADC;AAEjBC,EAAAA,QAAQ,EAAEF,sBAAUG,IAFH;AAGjBX,EAAAA,UAAU,EAAEY,YAAMC,cAAN,CAAqBC;AAHhB,C;;eAgBN;AAAA,SAAO;AACpBC,IAAAA,IAAI,EAAE,WADc;AAEpBR,IAAAA,SAAS,EAAEV,SAFS;AAGpBmB,IAAAA,IAAI,EAAE;AAHc,GAAP;AAAA,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport Bars from './common/bars';\n\nexport class Histogram extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChange: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired,\n };\n\n render() {\n const props = this.props;\n const { data, graphProps } = props;\n const { scale = {}, size = {} } = graphProps || {};\n const xBand = dataToXBand(scale.x, data, size.width, 'histogram');\n\n return <Bars {...props} xBand={xBand} histogram={true} />;\n }\n}\n\nexport default () => ({\n type: 'histogram',\n Component: Histogram,\n name: 'Histogram',\n});\n"],"file":"histogram.js"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "5.
|
|
6
|
+
"version": "5.5.1-next.0+7f572075",
|
|
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": "7f5720751281e2019ec8ff9c513703d81bcb1aef"
|
|
47
47
|
}
|
package/src/bars/common/bars.jsx
CHANGED
|
@@ -10,6 +10,20 @@ import { bandKey } from '../../utils';
|
|
|
10
10
|
import DraggableHandle, { DragHandle } from '../../common/drag-handle';
|
|
11
11
|
|
|
12
12
|
const log = debug('pie-lib:chart:bars');
|
|
13
|
+
const histogramColors = [
|
|
14
|
+
'#006699',
|
|
15
|
+
'#F59B00',
|
|
16
|
+
'#08916D',
|
|
17
|
+
'#529EE0',
|
|
18
|
+
'#52B7D8',
|
|
19
|
+
'#D9A6C2',
|
|
20
|
+
'#FFB03B',
|
|
21
|
+
'#54A77B',
|
|
22
|
+
'#E16032',
|
|
23
|
+
'#4FD2D2',
|
|
24
|
+
'#F0E442',
|
|
25
|
+
'#E287B2',
|
|
26
|
+
];
|
|
13
27
|
|
|
14
28
|
export class RawBar extends React.Component {
|
|
15
29
|
static propTypes = {
|
|
@@ -55,8 +69,7 @@ export class RawBar extends React.Component {
|
|
|
55
69
|
};
|
|
56
70
|
|
|
57
71
|
render() {
|
|
58
|
-
const { graphProps, value, label, classes, xBand, index, interactive, correctness } = this.props;
|
|
59
|
-
|
|
72
|
+
const { graphProps, value, label, classes, xBand, index, interactive, correctness, barColor } = this.props;
|
|
60
73
|
const { scale, range } = graphProps;
|
|
61
74
|
const { dragValue } = this.state;
|
|
62
75
|
|
|
@@ -72,7 +85,14 @@ export class RawBar extends React.Component {
|
|
|
72
85
|
|
|
73
86
|
return (
|
|
74
87
|
<React.Fragment>
|
|
75
|
-
<VxBar
|
|
88
|
+
<VxBar
|
|
89
|
+
x={barX}
|
|
90
|
+
y={scale.y(yy)}
|
|
91
|
+
width={barWidth}
|
|
92
|
+
height={barHeight}
|
|
93
|
+
className={classes.bar}
|
|
94
|
+
style={barColor && { fill: barColor }}
|
|
95
|
+
/>
|
|
76
96
|
<Component
|
|
77
97
|
x={barX}
|
|
78
98
|
y={v}
|
|
@@ -104,7 +124,7 @@ export class Bars extends React.Component {
|
|
|
104
124
|
};
|
|
105
125
|
|
|
106
126
|
render() {
|
|
107
|
-
const { data, graphProps, xBand, onChangeCategory, defineChart } = this.props;
|
|
127
|
+
const { data, graphProps, xBand, onChangeCategory, defineChart, histogram } = this.props;
|
|
108
128
|
|
|
109
129
|
return (
|
|
110
130
|
<Group>
|
|
@@ -119,6 +139,10 @@ export class Bars extends React.Component {
|
|
|
119
139
|
onChangeCategory={(category) => onChangeCategory(index, category)}
|
|
120
140
|
graphProps={graphProps}
|
|
121
141
|
correctness={d.correctness}
|
|
142
|
+
barColor={
|
|
143
|
+
histogram &&
|
|
144
|
+
(histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
|
|
145
|
+
}
|
|
122
146
|
/>
|
|
123
147
|
))}
|
|
124
148
|
</Group>
|
package/src/bars/histogram.js
CHANGED
|
@@ -17,7 +17,7 @@ export class Histogram extends React.Component {
|
|
|
17
17
|
const { scale = {}, size = {} } = graphProps || {};
|
|
18
18
|
const xBand = dataToXBand(scale.x, data, size.width, 'histogram');
|
|
19
19
|
|
|
20
|
-
return <Bars {...props} xBand={xBand} />;
|
|
20
|
+
return <Bars {...props} xBand={xBand} histogram={true} />;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|