@easyv/charts 1.3.35 → 1.3.37

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 (7) hide show
  1. package/lib/components/Axis.js +8 -4
  2. package/lib/components/CartesianChart.js +15 -5
  3. package/lib/hooks/useAxes.js +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Axis.tsx +8 -4
  6. package/src/components/CartesianChart.js +18 -10
  7. package/src/hooks/useAxes.js +4 -5
package/lib/components/Axis.js CHANGED
@@ -245,7 +245,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
245
245
  gridLine = _ref6$config.gridLine,
246
246
  unit = _ref6$config.unit,
247
247
  positions = _ref6.positions,
248
- xLineRange = _ref6.xLineRange;
248
+ xLineRange = _ref6.xLineRange,
249
+ yLineRange = _ref6.yLineRange;
249
250
  if (!(on && ticks.length > 0)) return null;
250
251
 
251
252
  var _useContext = (0, _react.useContext)(_context.chartContext),
@@ -275,7 +276,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
275
276
  end: orientation == 'left' || orientation == 'right' ? width : height
276
277
  });
277
278
  var x1 = gridCoord.x1;
278
- return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
279
+ var y1 = gridCoord.y1;
280
+ return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
279
281
  className: "__easyv-tickLine",
280
282
  key: index,
281
283
  config: tickLine
@@ -302,7 +304,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
302
304
  end: orientation == 'left' || orientation == 'right' ? width : height
303
305
  });
304
306
  var x1 = gridCoord.x1;
305
- return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
307
+ var y1 = gridCoord.y1;
308
+ return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
306
309
  className: "__easyv-tickLine",
307
310
  key: index,
308
311
  config: tickLine
@@ -325,7 +328,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
325
328
  end: orientation == 'left' || orientation == 'right' ? width : height
326
329
  });
327
330
  var x1 = gridCoord.x1;
328
- return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) && /*#__PURE__*/_react["default"].createElement("g", {
331
+ var y1 = gridCoord.y1;
332
+ return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement("g", {
329
333
  key: index
330
334
  }, label && /*#__PURE__*/_react["default"].createElement(Label, {
331
335
  className: "__easyv-label",
package/lib/components/CartesianChart.js CHANGED
@@ -91,6 +91,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
91
91
  });
92
92
  var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation, isHover);
93
93
  var xLineRange = width - marginLeft - marginRight;
94
+ var yLineRange = height - marginTop - marginBottom;
94
95
 
95
96
  var _useTooltip = (0, _hooks.useTooltip)({
96
97
  svg: svg,
@@ -147,23 +148,32 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
147
148
  setIndex(e);
148
149
  },
149
150
  ref: svg
150
- }, background && /*#__PURE__*/_react["default"].createElement(_.Background, {
151
+ }, background && /*#__PURE__*/_react["default"].createElement("foreignObject", {
152
+ style: {
153
+ width: xLineRange,
154
+ height: yLineRange
155
+ }
156
+ }, /*#__PURE__*/_react["default"].createElement("svg", {
157
+ width: "100%",
158
+ height: "100%"
159
+ }, /*#__PURE__*/_react["default"].createElement(_.Background, {
151
160
  length: isVertical ? chartWidth : chartHeight,
152
161
  axis: axisX,
153
162
  config: background,
154
163
  bandLength: bandLength
155
- }), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
164
+ }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
156
165
  var config = item.axisType == 'x' ? axisX : item;
157
166
  return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
158
167
  triggerClick: onInteraction,
159
- xLineRange: xLineRange
168
+ xLineRange: xLineRange,
169
+ yLineRange: yLineRange
160
170
  }, config, {
161
171
  key: index
162
172
  }));
163
173
  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
164
174
  style: {
165
- width: width - marginLeft - marginRight,
166
- height: height - marginTop - marginBottom
175
+ width: xLineRange,
176
+ height: yLineRange
167
177
  }
168
178
  }, /*#__PURE__*/_react["default"].createElement("svg", {
169
179
  width: "100%",
package/lib/hooks/useAxes.js CHANGED
@@ -110,7 +110,7 @@ var _default = function _default(_ref) {
110
110
  var range = direction === 'horizontal' ? [start, end] : direction === 'vertical' ? [end, start] : [0, 0];
111
111
  var newDomain = domain;
112
112
 
113
- if (mode == "count" && type !== 'ordinal' && !isNaN(domain[1])) {
113
+ if (type !== 'ordinal' && !isNaN(domain[1])) {
114
114
  newDomain = getNewDomain(domain, mode, step);
115
115
  }
116
116
 
@@ -128,7 +128,7 @@ var _default = function _default(_ref) {
128
128
  if (auto === false) {
129
129
  switch (mode) {
130
130
  case 'count':
131
- _ticks = (0, _utils2.getYTicks)(domain[1], domain[0], +tickCount);
131
+ _ticks = (0, _utils2.getYTicks)(newDomain[1], newDomain[0], +tickCount);
132
132
  break;
133
133
 
134
134
  case 'step':
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easyv/charts",
3
- "version": "1.3.35",
3
+ "version": "1.3.37",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/Axis.tsx CHANGED
@@ -229,7 +229,8 @@ export default memo(
229
229
  triggerClick,
230
230
  config: { on, label, axisLine, tickLine, gridLine, unit },
231
231
  positions,
232
- xLineRange
232
+ xLineRange,
233
+ yLineRange
233
234
  }: any) => {
234
235
  if (!(on && ticks.length > 0)) return null;
235
236
  const { width, height } = useContext(chartContext);
@@ -259,8 +260,9 @@ export default memo(
259
260
  : height,
260
261
  });
261
262
  const x1 = gridCoord.x1;
263
+ const y1 = gridCoord.y1;
262
264
  return (
263
- !(orientation=="bottom" && (x1<0 || x1>xLineRange)) && <Line
265
+ !(orientation=="bottom" && (x1<0 || x1>xLineRange) || (y1<0 || y1>yLineRange) ) && <Line
264
266
  className='__easyv-tickLine'
265
267
  key={index}
266
268
  config={tickLine}
@@ -291,8 +293,9 @@ export default memo(
291
293
  : height,
292
294
  });
293
295
  const x1 = gridCoord.x1;
296
+ const y1 = gridCoord.y1;
294
297
  return (
295
- !(orientation=="bottom" && (x1<0 || x1>xLineRange)) && <Line
298
+ !(orientation=="bottom" && (x1<0 || x1>xLineRange) || (y1<0 || y1>yLineRange)) && <Line
296
299
  className='__easyv-tickLine'
297
300
  key={index}
298
301
  config={tickLine}
@@ -324,8 +327,9 @@ export default memo(
324
327
  : height,
325
328
  });
326
329
  const x1 = gridCoord.x1;
330
+ const y1 = gridCoord.y1;
327
331
  return (
328
- !(orientation=="bottom" && (x1<0 || x1>xLineRange)) && <g key={index}>
332
+ !(orientation=="bottom" && (x1<0 || x1>xLineRange) || (y1<0 || y1>yLineRange)) && <g key={index}>
329
333
  {label && (
330
334
  <Label
331
335
  className='__easyv-label'
package/src/components/CartesianChart.js CHANGED
@@ -72,6 +72,7 @@ const Chart = memo(
72
72
  const axes = useAxes({ axes: axesConfig, context });
73
73
  const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
74
74
  const xLineRange = width-marginLeft-marginRight;
75
+ const yLineRange = height-marginTop-marginBottom;
75
76
 
76
77
  const {
77
78
  x: tooltipX,
@@ -134,24 +135,31 @@ const Chart = memo(
134
135
  ref={svg}
135
136
  >
136
137
  {background && (
137
- <Background
138
- length={isVertical ? chartWidth : chartHeight}
139
- axis={axisX}
140
- config={background}
141
- bandLength={bandLength}
142
- />
138
+ <foreignObject style={{
139
+ width:xLineRange,
140
+ height:yLineRange
141
+ }}>
142
+ <svg width="100%" height="100%">
143
+ <Background
144
+ length={isVertical ? chartWidth : chartHeight}
145
+ axis={axisX}
146
+ config={background}
147
+ bandLength={bandLength}
148
+ />
149
+ </svg>
150
+ </foreignObject>
143
151
  )}
144
- {[...axes.values()].reverse().map((item, index) => {
152
+ {[...axes.values()].reverse().map((item, index) => {
145
153
  const config = item.axisType == 'x' ? axisX : item;
146
154
  return (
147
- <Axis triggerClick={onInteraction} xLineRange={xLineRange} {...config} key={index} />
155
+ <Axis triggerClick={onInteraction} xLineRange={xLineRange} yLineRange={yLineRange} {...config} key={index} />
148
156
  );
149
157
  })}
150
158
 
151
159
  {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
152
160
  <foreignObject style={{
153
- width:width-marginLeft-marginRight,
154
- height:height-marginTop-marginBottom
161
+ width:xLineRange,
162
+ height:yLineRange
155
163
  }}>
156
164
  <svg width="100%" height="100%">
157
165
  {series.map(({ Component, yOrZ, ...config }, index) => {
package/src/hooks/useAxes.js CHANGED
@@ -71,14 +71,13 @@ export default ({ axes, context: { width, height } }) => {
71
71
  carousel,
72
72
  config,
73
73
  } = item;
74
-
74
+
75
75
  const direction =
76
76
  orientation === 'top' || orientation === 'bottom'
77
77
  ? 'horizontal'
78
78
  : orientation === 'left' || orientation === 'right'
79
79
  ? 'vertical'
80
80
  : '';
81
-
82
81
  const length =
83
82
  direction === 'horizontal'
84
83
  ? width
@@ -97,7 +96,7 @@ export default ({ axes, context: { width, height } }) => {
97
96
  ? [end, start]
98
97
  : [0, 0];
99
98
  let newDomain = domain;
100
- if(mode == "count" && type !== 'ordinal' && !isNaN(domain[1])){
99
+ if(type !== 'ordinal' && !isNaN(domain[1])){
101
100
  newDomain = getNewDomain(domain, mode, step);
102
101
  }
103
102
 
@@ -119,8 +118,8 @@ export default ({ axes, context: { width, height } }) => {
119
118
  switch (mode) {
120
119
  case 'count':
121
120
  _ticks = getYTicks(
122
- domain[1],
123
- domain[0],
121
+ newDomain[1],
122
+ newDomain[0],
124
123
  +tickCount
125
124
  );
126
125
  break;