@semcore/d3-chart 17.0.0-prerelease.36 → 17.0.0-prerelease.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.
- package/CHANGELOG.md +1 -1
- package/lib/esm/AnimatedClipPath.mjs +1 -1
- package/lib/esm/Area.mjs +1 -2
- package/lib/esm/Axis.mjs +4 -7
- package/lib/esm/Bar.mjs +1 -2
- package/lib/esm/Bubble.mjs +3 -5
- package/lib/esm/CompactHorizontalBar.mjs +4 -4
- package/lib/esm/Donut.mjs +5 -4
- package/lib/esm/Dots.mjs +1 -2
- package/lib/esm/HorizontalBar.mjs +1 -2
- package/lib/esm/Hover.mjs +2 -3
- package/lib/esm/Line.mjs +2 -3
- package/lib/esm/Pattern.mjs +6 -7
- package/lib/esm/Plot.mjs +3 -5
- package/lib/esm/Radar.mjs +7 -10
- package/lib/esm/RadialTree.mjs +17 -63
- package/lib/esm/Reference.mjs +0 -1
- package/lib/esm/ResponsiveContainer.mjs +3 -5
- package/lib/esm/ScatterPlot.mjs +2 -2
- package/lib/esm/StackBar.mjs +2 -2
- package/lib/esm/StackedArea.mjs +2 -2
- package/lib/esm/Tooltip.mjs +5 -8
- package/lib/esm/Venn.mjs +3 -3
- package/lib/esm/a11y/DataAccessibilityTable.mjs +2 -4
- package/lib/esm/a11y/PlotA11yModule.mjs +2 -2
- package/lib/esm/a11y/PlotA11yView.mjs +8 -16
- package/lib/esm/a11y/focus.mjs +2 -2
- package/lib/esm/a11y/hints.mjs +3 -3
- package/lib/esm/a11y/insights.mjs +15 -20
- package/lib/esm/a11y/intl.mjs +1 -1
- package/lib/esm/a11y/locale.mjs +1 -2
- package/lib/esm/a11y/serialize.mjs +17 -17
- package/lib/esm/component/Chart/AbstractChart.mjs +15 -17
- package/lib/esm/component/Chart/AreaChart.mjs +5 -4
- package/lib/esm/component/Chart/BarChart.mjs +4 -3
- package/lib/esm/component/Chart/BubbleChart.mjs +8 -8
- package/lib/esm/component/Chart/CigaretteChart.mjs +6 -6
- package/lib/esm/component/Chart/CompactHorizontalBarChart.mjs +2 -1
- package/lib/esm/component/Chart/DonutChart.mjs +3 -2
- package/lib/esm/component/Chart/HistogramChart.mjs +5 -4
- package/lib/esm/component/Chart/LineChart.mjs +5 -4
- package/lib/esm/component/Chart/RadarChart.mjs +4 -5
- package/lib/esm/component/Chart/ScatterPlotChart.mjs +3 -2
- package/lib/esm/component/Chart/VennChart.mjs +3 -3
- package/lib/esm/component/ChartLegend/BaseLegend.mjs +9 -14
- package/lib/esm/component/ChartLegend/LegendFlex/LegendFlex.mjs +1 -2
- package/lib/esm/component/ChartLegend/LegendItem/LegendItem.mjs +1 -2
- package/lib/esm/component/ChartLegend/LegendTable/LegendTable.mjs +2 -4
- package/lib/esm/component/ChartLegend/index.mjs +2 -0
- package/lib/esm/component/Cigarette/Cigarette.mjs +1 -2
- package/lib/esm/component/StackGroupBar/StackGroupBar.mjs +2 -3
- package/lib/esm/createElement.mjs +1 -1
- package/lib/esm/index.mjs +1 -0
- package/lib/esm/utils.mjs +2 -2
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
3
|
-
import {
|
|
3
|
+
import { Component, createComponent } from "@semcore/core";
|
|
4
4
|
import propsForElement from "@semcore/core/lib/utils/propsForElement";
|
|
5
5
|
import React from "react";
|
|
6
6
|
class AnimatedClipPath extends Component {
|
package/lib/esm/Area.mjs
CHANGED
|
@@ -10,8 +10,7 @@ import { SvgElement } from "./component/SvgElement.mjs";
|
|
|
10
10
|
import createElement from "./createElement.mjs";
|
|
11
11
|
import Dots from "./Dots.mjs";
|
|
12
12
|
import { PatternFill } from "./Pattern.mjs";
|
|
13
|
-
import {
|
|
14
|
-
/*!__reshadow-styles__:"./style/area.shadow.css"*/
|
|
13
|
+
import { interpolateValue, getNullData, definedNullData, eventToPoint, invert, definedData, scaleOfBandwidth } from "./utils.mjs";
|
|
15
14
|
const style = (
|
|
16
15
|
/*__reshadow_css_start__*/
|
|
17
16
|
(sstyled.insert(
|
package/lib/esm/Axis.mjs
CHANGED
|
@@ -4,7 +4,6 @@ import { sstyled, Component } from "@semcore/core";
|
|
|
4
4
|
import React, { useState, useEffect } from "react";
|
|
5
5
|
import createElement from "./createElement.mjs";
|
|
6
6
|
import { scaleOfBandwidth } from "./utils.mjs";
|
|
7
|
-
/*!__reshadow-styles__:"./style/axis.shadow.css"*/
|
|
8
7
|
const style = (
|
|
9
8
|
/*__reshadow_css_start__*/
|
|
10
9
|
(sstyled.insert(
|
|
@@ -31,8 +30,8 @@ const style = (
|
|
|
31
30
|
"_position_custom_1": "_position_custom_1_yb2p1_gg_"
|
|
32
31
|
})
|
|
33
32
|
);
|
|
34
|
-
const CUSTOM_0 = Symbol("custom_0");
|
|
35
|
-
const CUSTOM_1 = Symbol("custom_1");
|
|
33
|
+
const CUSTOM_0 = /* @__PURE__ */ Symbol("custom_0");
|
|
34
|
+
const CUSTOM_1 = /* @__PURE__ */ Symbol("custom_1");
|
|
36
35
|
const MAP_INDEX_SCALE_SYMBOL = {
|
|
37
36
|
0: CUSTOM_0,
|
|
38
37
|
1: CUSTOM_1
|
|
@@ -243,14 +242,13 @@ function measureTextWidth(rootRef, text, fontSize = 12) {
|
|
|
243
242
|
}
|
|
244
243
|
class AxisRoot extends Component {
|
|
245
244
|
get ticks() {
|
|
246
|
-
var _a, _b;
|
|
247
245
|
const {
|
|
248
246
|
ticks,
|
|
249
247
|
indexScale,
|
|
250
248
|
scale
|
|
251
249
|
} = this.asProps;
|
|
252
250
|
const scl = scale[indexScale];
|
|
253
|
-
return ticks ||
|
|
251
|
+
return ticks || scl.ticks?.() || scl.domain?.() || [];
|
|
254
252
|
}
|
|
255
253
|
getTitleProps() {
|
|
256
254
|
const {
|
|
@@ -304,7 +302,6 @@ _defineProperty(AxisRoot, "displayName", "Axis");
|
|
|
304
302
|
_defineProperty(AxisRoot, "style", style);
|
|
305
303
|
_defineProperty(AxisRoot, "defaultProps", {});
|
|
306
304
|
function Ticks(props) {
|
|
307
|
-
var _a, _b;
|
|
308
305
|
const {
|
|
309
306
|
Element: STick,
|
|
310
307
|
styles,
|
|
@@ -323,7 +320,7 @@ function Ticks(props) {
|
|
|
323
320
|
useEffect(() => {
|
|
324
321
|
if (rootRef.current) setRootRefElement(rootRef.current);
|
|
325
322
|
}, []);
|
|
326
|
-
const tickBandwidth =
|
|
323
|
+
const tickBandwidth = scale[indexScale]?.bandwidth?.();
|
|
327
324
|
const ticksWithLines = ticks.map((tick) => ({
|
|
328
325
|
tick,
|
|
329
326
|
lines: typeof tick === "string" && multiline && rootRefElement ? splitTextByWidth(rootRefElement, tick, tickBandwidth) : []
|
package/lib/esm/Bar.mjs
CHANGED
|
@@ -7,7 +7,6 @@ import AnimatedClipPath from "./AnimatedClipPath.mjs";
|
|
|
7
7
|
import createElement from "./createElement.mjs";
|
|
8
8
|
import { PatternFill } from "./Pattern.mjs";
|
|
9
9
|
import { scaleToBand, roundedPath } from "./utils.mjs";
|
|
10
|
-
/*!__reshadow-styles__:"./style/bar.shadow.css"*/
|
|
11
10
|
const style = (
|
|
12
11
|
/*__reshadow_css_start__*/
|
|
13
12
|
(sstyled.insert(
|
|
@@ -102,7 +101,7 @@ class BarRoot extends Component {
|
|
|
102
101
|
const width = Math.min(bandWidth, maxBarSize);
|
|
103
102
|
const barX = xScale(d[x]) + bandWidth / 2 - width / 2 + offset[0];
|
|
104
103
|
const barY = yScale(Math.max(d[y0] ?? 0, height <= hMin && d[y] > 0 ? 0 : d[y])) + offset[1] - calcPartBarY(d[y], hMin, height);
|
|
105
|
-
const handleClick = (event) => onClick
|
|
104
|
+
const handleClick = (event) => onClick?.(d, event, i, y);
|
|
106
105
|
const dSvg = getRect({
|
|
107
106
|
x: barX,
|
|
108
107
|
y: barY,
|
package/lib/esm/Bubble.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { sstyled,
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
4
4
|
import findComponent from "@semcore/core/lib/utils/findComponent";
|
|
5
5
|
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
@@ -10,7 +10,6 @@ import createElement from "./createElement.mjs";
|
|
|
10
10
|
import { PatternFill } from "./Pattern.mjs";
|
|
11
11
|
import Tooltip from "./Tooltip.mjs";
|
|
12
12
|
import { getBubbleChartValueScale, measureText } from "./utils.mjs";
|
|
13
|
-
/*!__reshadow-styles__:"./style/bubble.shadow.css"*/
|
|
14
13
|
const style = (
|
|
15
14
|
/*__reshadow_css_start__*/
|
|
16
15
|
(sstyled.insert(
|
|
@@ -73,8 +72,7 @@ class BubbleRoot extends Component {
|
|
|
73
72
|
const selectRectNode = selectRect.node();
|
|
74
73
|
if (selectRectNode) {
|
|
75
74
|
selectRect.transition().duration(duration).attr("r", function(_, ind) {
|
|
76
|
-
|
|
77
|
-
return z((_a = data[ind]) == null ? void 0 : _a[value]);
|
|
75
|
+
return z(data[ind]?.[value]);
|
|
78
76
|
});
|
|
79
77
|
}
|
|
80
78
|
}
|
|
@@ -104,7 +102,7 @@ class BubbleRoot extends Component {
|
|
|
104
102
|
const {
|
|
105
103
|
onClick
|
|
106
104
|
} = this.asProps;
|
|
107
|
-
onClick
|
|
105
|
+
onClick?.(index, e);
|
|
108
106
|
};
|
|
109
107
|
}
|
|
110
108
|
getCircleProps() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { sstyled,
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import { Box } from "@semcore/base-components";
|
|
4
4
|
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
5
5
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
@@ -10,8 +10,7 @@ import AnimatedClipPath from "./AnimatedClipPath.mjs";
|
|
|
10
10
|
import createElement from "./createElement.mjs";
|
|
11
11
|
import { PatternFill } from "./Pattern.mjs";
|
|
12
12
|
import Tooltip from "./Tooltip.mjs";
|
|
13
|
-
import {
|
|
14
|
-
/*!__reshadow-styles__:"./style/bar.shadow.css"*/
|
|
13
|
+
import { scaleToBand, roundedPath, eventToPoint } from "./utils.mjs";
|
|
15
14
|
const style = (
|
|
16
15
|
/*__reshadow_css_start__*/
|
|
17
16
|
(sstyled.insert(
|
|
@@ -334,7 +333,7 @@ function Bar(props) {
|
|
|
334
333
|
hide
|
|
335
334
|
} = props;
|
|
336
335
|
const onClickHandler = React.useCallback((event) => {
|
|
337
|
-
onClick
|
|
336
|
+
onClick?.(index, event);
|
|
338
337
|
}, [onClick, index]);
|
|
339
338
|
const contextValue = React.useMemo(() => ({
|
|
340
339
|
onClick: onClickHandler,
|
|
@@ -552,6 +551,7 @@ function CompactHorizontalBarTooltip(props) {
|
|
|
552
551
|
}, _ref4)
|
|
553
552
|
}));
|
|
554
553
|
}
|
|
554
|
+
;
|
|
555
555
|
const CompactHorizontalBar = createElement(CompactHorizontalBarRoot, {
|
|
556
556
|
Annotation,
|
|
557
557
|
Label,
|
package/lib/esm/Donut.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { sstyled,
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
4
4
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
5
5
|
import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
|
|
@@ -12,7 +12,6 @@ import createElement from "./createElement.mjs";
|
|
|
12
12
|
import { PatternFill } from "./Pattern.mjs";
|
|
13
13
|
import Tooltip from "./Tooltip.mjs";
|
|
14
14
|
import { getChartDefaultColorName } from "./utils.mjs";
|
|
15
|
-
/*!__reshadow-styles__:"./style/donut.shadow.css"*/
|
|
16
15
|
const style = (
|
|
17
16
|
/*__reshadow_css_start__*/
|
|
18
17
|
(sstyled.insert(
|
|
@@ -32,7 +31,7 @@ const style = (
|
|
|
32
31
|
"__SLabel": "___SLabel_1s4vb_gg_"
|
|
33
32
|
})
|
|
34
33
|
);
|
|
35
|
-
const DEFAULT_INSTANCE = Symbol("DEFAULT_INSTANCE");
|
|
34
|
+
const DEFAULT_INSTANCE = /* @__PURE__ */ Symbol("DEFAULT_INSTANCE");
|
|
36
35
|
function transitionAnglePie({
|
|
37
36
|
selector,
|
|
38
37
|
duration,
|
|
@@ -334,7 +333,8 @@ _defineProperty(DonutRoot, "defaultProps", ({
|
|
|
334
333
|
}) => {
|
|
335
334
|
const d3Arc = arc().outerRadius(outerRadius || getOuterRadius({
|
|
336
335
|
size,
|
|
337
|
-
halfsize
|
|
336
|
+
halfsize,
|
|
337
|
+
outerRadius
|
|
338
338
|
})).innerRadius(innerRadius).padAngle(paddingAngle);
|
|
339
339
|
const d3ArcOut = arc().outerRadius((outerRadius || getOuterRadius({
|
|
340
340
|
size,
|
|
@@ -463,6 +463,7 @@ function DonutTooltip(props) {
|
|
|
463
463
|
}, _ref)
|
|
464
464
|
}));
|
|
465
465
|
}
|
|
466
|
+
;
|
|
466
467
|
const Donut = createElement(DonutRoot, {
|
|
467
468
|
Pie,
|
|
468
469
|
Label,
|
package/lib/esm/Dots.mjs
CHANGED
|
@@ -4,8 +4,7 @@ import { bisector } from "d3-array";
|
|
|
4
4
|
import React from "react";
|
|
5
5
|
import createElement from "./createElement.mjs";
|
|
6
6
|
import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
|
|
7
|
-
import { interpolateValue, eventToPoint, invert
|
|
8
|
-
/*!__reshadow-styles__:"./style/dot.shadow.css"*/
|
|
7
|
+
import { getChartDefaultColorName, interpolateValue, eventToPoint, invert } from "./utils.mjs";
|
|
9
8
|
const style = (
|
|
10
9
|
/*__reshadow_css_start__*/
|
|
11
10
|
(sstyled.insert(
|
|
@@ -6,7 +6,6 @@ import AnimatedClipPath from "./AnimatedClipPath.mjs";
|
|
|
6
6
|
import createElement from "./createElement.mjs";
|
|
7
7
|
import { PatternFill } from "./Pattern.mjs";
|
|
8
8
|
import { scaleToBand, roundedPath } from "./utils.mjs";
|
|
9
|
-
/*!__reshadow-styles__:"./style/bar.shadow.css"*/
|
|
10
9
|
const style = (
|
|
11
10
|
/*__reshadow_css_start__*/
|
|
12
11
|
(sstyled.insert(
|
|
@@ -85,7 +84,7 @@ class HorizontalBarRoot extends Component {
|
|
|
85
84
|
const width = Number(d[x] - (d[x0] ?? 0)) === 0 ? 0 : Math.max(absWidth, wMin);
|
|
86
85
|
const barY = yScale(d[y]) + bandHeight / 2 - height / 2 + offset[1];
|
|
87
86
|
const barX = xScale(Math.min(d[x0] ?? 0, width <= wMin && d[x] < 0 ? 0 : d[x])) + offset[0] - calcPartBarX(d[x], wMin, width);
|
|
88
|
-
const handleClick = (event) => onClick
|
|
87
|
+
const handleClick = (event) => onClick?.(d, event, i, x);
|
|
89
88
|
const dSvg = getHorizontalRect({
|
|
90
89
|
x: barX,
|
|
91
90
|
y: barY,
|
package/lib/esm/Hover.mjs
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { sstyled,
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
4
4
|
import { hasParent } from "@semcore/core/lib/utils/hasParent";
|
|
5
5
|
import trottle from "@semcore/core/lib/utils/rafTrottle";
|
|
6
6
|
import React from "react";
|
|
7
7
|
import createElement from "./createElement.mjs";
|
|
8
8
|
import Tooltip from "./Tooltip.mjs";
|
|
9
|
-
import {
|
|
10
|
-
/*!__reshadow-styles__:"./style/hover.shadow.css"*/
|
|
9
|
+
import { eventToPoint, invert, getIndexFromData, scaleOfBandwidth, scaleToBand } from "./utils.mjs";
|
|
11
10
|
const style = (
|
|
12
11
|
/*__reshadow_css_start__*/
|
|
13
12
|
(sstyled.insert(
|
package/lib/esm/Line.mjs
CHANGED
|
@@ -2,14 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import { sstyled, Component } from "@semcore/core";
|
|
3
3
|
import uniqueIDEnhancement, { useUID } from "@semcore/core/lib/utils/uniqueID";
|
|
4
4
|
import { bisector } from "d3-array";
|
|
5
|
-
import {
|
|
5
|
+
import { line, curveLinear, curveCardinal, area } from "d3-shape";
|
|
6
6
|
import React from "react";
|
|
7
7
|
import AnimatedClipPath from "./AnimatedClipPath.mjs";
|
|
8
8
|
import createElement from "./createElement.mjs";
|
|
9
9
|
import Dots from "./Dots.mjs";
|
|
10
10
|
import { resolvePatternDasharray } from "./Pattern.mjs";
|
|
11
|
-
import { interpolateValue,
|
|
12
|
-
/*!__reshadow-styles__:"./style/line.shadow.css"*/
|
|
11
|
+
import { interpolateValue, getNullData, definedNullData, eventToPoint, invert, getChartDefaultColorName, definedData, scaleOfBandwidth } from "./utils.mjs";
|
|
13
12
|
const style = (
|
|
14
13
|
/*__reshadow_css_start__*/
|
|
15
14
|
(sstyled.insert(
|
package/lib/esm/Pattern.mjs
CHANGED
|
@@ -483,9 +483,8 @@ const getPatternSymbolSize = ({
|
|
|
483
483
|
patternKey,
|
|
484
484
|
patterns
|
|
485
485
|
}) => {
|
|
486
|
-
var _a;
|
|
487
486
|
const patternData = resolvePattern(patternKey, patterns);
|
|
488
|
-
if (!
|
|
487
|
+
if (!patternData?.symbol?.size) return [10, 10];
|
|
489
488
|
return patternData.symbol.size;
|
|
490
489
|
};
|
|
491
490
|
const PatternSymbol = ({
|
|
@@ -496,10 +495,10 @@ const PatternSymbol = ({
|
|
|
496
495
|
}) => {
|
|
497
496
|
const DefaultSymbol = React.useMemo(() => {
|
|
498
497
|
const patternData = resolvePattern(patternKey, patterns);
|
|
499
|
-
const children = patternData
|
|
500
|
-
const viewBox = patternData
|
|
501
|
-
const width = patternData
|
|
502
|
-
const height = patternData
|
|
498
|
+
const children = patternData?.symbol.children;
|
|
499
|
+
const viewBox = patternData?.symbol.viewBox;
|
|
500
|
+
const width = patternData?.symbol.size[0];
|
|
501
|
+
const height = patternData?.symbol.size[1];
|
|
503
502
|
return (props2) => /* @__PURE__ */ React.createElement("svg", _extends({
|
|
504
503
|
fill: color,
|
|
505
504
|
x: "0",
|
|
@@ -516,7 +515,7 @@ const PatternSymbol = ({
|
|
|
516
515
|
};
|
|
517
516
|
const resolvePatternDasharray = (patternKey, patterns) => {
|
|
518
517
|
const pattern = resolvePattern(patternKey, patterns);
|
|
519
|
-
return pattern
|
|
518
|
+
return pattern?.dasharray;
|
|
520
519
|
};
|
|
521
520
|
export {
|
|
522
521
|
PatternFill,
|
package/lib/esm/Plot.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import {
|
|
2
|
+
import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
|
|
3
3
|
import { Box } from "@semcore/base-components";
|
|
4
4
|
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
5
5
|
import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
|
|
@@ -9,7 +9,6 @@ import { makeDataHintsContainer, makeDataHintsHandlers } from "./a11y/hints.mjs"
|
|
|
9
9
|
import { PlotA11yModule } from "./a11y/PlotA11yModule.mjs";
|
|
10
10
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
11
11
|
import { uniqueId, eventToPoint } from "./utils.mjs";
|
|
12
|
-
/*!__reshadow-styles__:"./style/plot.shadow.css"*/
|
|
13
12
|
const style = (
|
|
14
13
|
/*__reshadow_css_start__*/
|
|
15
14
|
(sstyled.insert(
|
|
@@ -53,7 +52,6 @@ class PlotRoot extends Component {
|
|
|
53
52
|
this.eventEmitter = props.eventEmitter || new EventEmitter();
|
|
54
53
|
}
|
|
55
54
|
setContext() {
|
|
56
|
-
var _a, _b;
|
|
57
55
|
const {
|
|
58
56
|
scale,
|
|
59
57
|
data,
|
|
@@ -64,8 +62,8 @@ class PlotRoot extends Component {
|
|
|
64
62
|
patterns,
|
|
65
63
|
duration
|
|
66
64
|
} = this.asProps;
|
|
67
|
-
const yScaleDomain =
|
|
68
|
-
if (
|
|
65
|
+
const yScaleDomain = scale?.[1]?.domain?.();
|
|
66
|
+
if (yScaleDomain?.length && data?.length) {
|
|
69
67
|
this.dataHintsHandler.setPointsDensity(data.length / width, Math.abs(yScaleDomain[1] - yScaleDomain[0]) / height);
|
|
70
68
|
}
|
|
71
69
|
return {
|
package/lib/esm/Radar.mjs
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { sstyled,
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
4
4
|
import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
|
|
5
5
|
import trottle from "@semcore/core/lib/utils/rafTrottle";
|
|
6
6
|
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
7
7
|
import { polygonContains } from "d3-polygon";
|
|
8
|
-
import {
|
|
8
|
+
import { lineRadial, curveLinearClosed, arc, line } from "d3-shape";
|
|
9
9
|
import React, { cloneElement } from "react";
|
|
10
10
|
import createElement from "./createElement.mjs";
|
|
11
|
-
import { getPatternSymbolSize, PatternSymbol
|
|
11
|
+
import { PatternFill, getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
|
|
12
12
|
import Tooltip from "./Tooltip.mjs";
|
|
13
|
-
import {
|
|
14
|
-
/*!__reshadow-styles__:"./style/radar.shadow.css"*/
|
|
13
|
+
import { measureText, getChartDefaultColorName, eventToPoint } from "./utils.mjs";
|
|
15
14
|
const style = (
|
|
16
15
|
/*__reshadow_css_start__*/
|
|
17
16
|
(sstyled.insert(
|
|
@@ -71,12 +70,11 @@ function getLabelPlacement(i, total, angleOffset) {
|
|
|
71
70
|
}
|
|
72
71
|
function computeTextWidth(texts, textSize, defaultWidth = 50, defaultHeight = 20) {
|
|
73
72
|
const widths = texts.map((text) => {
|
|
74
|
-
var _a, _b;
|
|
75
73
|
if (typeof text === "string") {
|
|
76
74
|
return measureText(text, textSize);
|
|
77
75
|
}
|
|
78
76
|
if (/* @__PURE__ */ React.isValidElement(text)) {
|
|
79
|
-
return Math.max(
|
|
77
|
+
return Math.max(text.props?.width || defaultWidth, text.props?.height || defaultHeight);
|
|
80
78
|
}
|
|
81
79
|
return defaultWidth;
|
|
82
80
|
});
|
|
@@ -506,8 +504,7 @@ class AxisRoot extends Component {
|
|
|
506
504
|
this.unsubscribeTooltipVisible = eventEmitter.subscribe("setTooltipRenderingProps", this.handleTooltipRenderingProps);
|
|
507
505
|
}
|
|
508
506
|
componentWillUnmount() {
|
|
509
|
-
|
|
510
|
-
(_a = this.unsubscribeTooltipVisible) == null ? void 0 : _a.call(this);
|
|
507
|
+
this.unsubscribeTooltipVisible?.();
|
|
511
508
|
}
|
|
512
509
|
render() {
|
|
513
510
|
var _ref7;
|
|
@@ -626,7 +623,7 @@ function AxisLabels(props) {
|
|
|
626
623
|
const {
|
|
627
624
|
width = 0,
|
|
628
625
|
height = 0
|
|
629
|
-
} =
|
|
626
|
+
} = category?.props ?? {};
|
|
630
627
|
const [xOffset, yOffset] = getLabelOffsetPosition(xDirection, yDirection, width, height);
|
|
631
628
|
return /* @__PURE__ */ cloneElement(category, {
|
|
632
629
|
key: i,
|
package/lib/esm/RadialTree.mjs
CHANGED
|
@@ -9,7 +9,6 @@ import React from "react";
|
|
|
9
9
|
import createElement from "./createElement.mjs";
|
|
10
10
|
import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
|
|
11
11
|
import { measureText, getChartDefaultColorName } from "./utils.mjs";
|
|
12
|
-
/*!__reshadow-styles__:"./style/radial-tree.shadow.css"*/
|
|
13
12
|
const style = (
|
|
14
13
|
/*__reshadow_css_start__*/
|
|
15
14
|
(sstyled.insert(
|
|
@@ -45,13 +44,12 @@ class RadialTreeBase extends Component {
|
|
|
45
44
|
};
|
|
46
45
|
}
|
|
47
46
|
runAppearAnimation() {
|
|
48
|
-
var _a;
|
|
49
47
|
const {
|
|
50
48
|
duration,
|
|
51
49
|
uid
|
|
52
50
|
} = this.asProps;
|
|
53
51
|
if (!canUseDOM()) return;
|
|
54
|
-
const preferReduceMotion =
|
|
52
|
+
const preferReduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)")?.matches;
|
|
55
53
|
if (!(duration > 0)) return;
|
|
56
54
|
if (preferReduceMotion) return;
|
|
57
55
|
const circlesAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-cap-circle]`).interrupt();
|
|
@@ -64,13 +62,12 @@ class RadialTreeBase extends Component {
|
|
|
64
62
|
const labelsNodes = linesAnimation.nodes();
|
|
65
63
|
if (circlesNodes.length > 0) {
|
|
66
64
|
const attrs = circlesNodes.map((node) => {
|
|
67
|
-
var _a2, _b, _c, _d;
|
|
68
65
|
const radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
|
|
69
66
|
const lineNode = linesNodes[radianIndex];
|
|
70
67
|
return {
|
|
71
68
|
from: {
|
|
72
|
-
cx:
|
|
73
|
-
cy:
|
|
69
|
+
cx: lineNode.x1?.baseVal?.value,
|
|
70
|
+
cy: lineNode.y1?.baseVal?.value
|
|
74
71
|
},
|
|
75
72
|
to: {
|
|
76
73
|
cx: node.dataset["cx"],
|
|
@@ -78,31 +75,18 @@ class RadialTreeBase extends Component {
|
|
|
78
75
|
}
|
|
79
76
|
};
|
|
80
77
|
});
|
|
81
|
-
circlesAnimation.attr("opacity", 0).attr("cx", (_, index) =>
|
|
82
|
-
var _a2;
|
|
83
|
-
return (_a2 = attrs[index].from) == null ? void 0 : _a2.cx;
|
|
84
|
-
}).attr("cy", (_, index) => {
|
|
85
|
-
var _a2;
|
|
86
|
-
return (_a2 = attrs[index].from) == null ? void 0 : _a2.cy;
|
|
87
|
-
}).transition().duration(duration).attr("opacity", 1).attr("cx", (_, index) => {
|
|
88
|
-
var _a2;
|
|
89
|
-
return (_a2 = attrs[index].to) == null ? void 0 : _a2.cx;
|
|
90
|
-
}).attr("cy", (_, index) => {
|
|
91
|
-
var _a2;
|
|
92
|
-
return (_a2 = attrs[index].to) == null ? void 0 : _a2.cy;
|
|
93
|
-
});
|
|
78
|
+
circlesAnimation.attr("opacity", 0).attr("cx", (_, index) => attrs[index].from?.cx).attr("cy", (_, index) => attrs[index].from?.cy).transition().duration(duration).attr("opacity", 1).attr("cx", (_, index) => attrs[index].to?.cx).attr("cy", (_, index) => attrs[index].to?.cy);
|
|
94
79
|
}
|
|
95
80
|
if (iconsNodes.length > 0) {
|
|
96
81
|
const attrs = iconsNodes.map((node) => {
|
|
97
|
-
|
|
98
|
-
const
|
|
99
|
-
const height = (_d = (_c = node.height) == null ? void 0 : _c.baseVal) == null ? void 0 : _d.value;
|
|
82
|
+
const width = node.width?.baseVal?.value;
|
|
83
|
+
const height = node.height?.baseVal?.value;
|
|
100
84
|
const radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
|
|
101
85
|
const lineNode = linesNodes[radianIndex];
|
|
102
86
|
return {
|
|
103
87
|
from: {
|
|
104
|
-
x:
|
|
105
|
-
y:
|
|
88
|
+
x: lineNode.x1?.baseVal?.value - width / 2,
|
|
89
|
+
y: lineNode.y1?.baseVal?.value - height / 2
|
|
106
90
|
},
|
|
107
91
|
to: {
|
|
108
92
|
x: node.dataset["x"],
|
|
@@ -110,27 +94,14 @@ class RadialTreeBase extends Component {
|
|
|
110
94
|
}
|
|
111
95
|
};
|
|
112
96
|
});
|
|
113
|
-
iconsAnimation.attr("opacity", 0).attr("x", (_, index) =>
|
|
114
|
-
var _a2;
|
|
115
|
-
return (_a2 = attrs[index].from) == null ? void 0 : _a2.x;
|
|
116
|
-
}).attr("y", (_, index) => {
|
|
117
|
-
var _a2;
|
|
118
|
-
return (_a2 = attrs[index].from) == null ? void 0 : _a2.y;
|
|
119
|
-
}).transition().duration(duration).attr("opacity", 1).attr("x", (_, index) => {
|
|
120
|
-
var _a2;
|
|
121
|
-
return (_a2 = attrs[index].to) == null ? void 0 : _a2.x;
|
|
122
|
-
}).attr("y", (_, index) => {
|
|
123
|
-
var _a2;
|
|
124
|
-
return (_a2 = attrs[index].to) == null ? void 0 : _a2.y;
|
|
125
|
-
});
|
|
97
|
+
iconsAnimation.attr("opacity", 0).attr("x", (_, index) => attrs[index].from?.x).attr("y", (_, index) => attrs[index].from?.y).transition().duration(duration).attr("opacity", 1).attr("x", (_, index) => attrs[index].to?.x).attr("y", (_, index) => attrs[index].to?.y);
|
|
126
98
|
}
|
|
127
99
|
if (linesNodes.length > 0) {
|
|
128
100
|
const attrs = linesNodes.map((node) => {
|
|
129
|
-
var _a2, _b, _c, _d;
|
|
130
101
|
return {
|
|
131
102
|
from: {
|
|
132
|
-
x2:
|
|
133
|
-
y2:
|
|
103
|
+
x2: node.x1?.baseVal?.value,
|
|
104
|
+
y2: node.y1?.baseVal?.value
|
|
134
105
|
},
|
|
135
106
|
to: {
|
|
136
107
|
x2: node.dataset["x2"],
|
|
@@ -138,19 +109,7 @@ class RadialTreeBase extends Component {
|
|
|
138
109
|
}
|
|
139
110
|
};
|
|
140
111
|
});
|
|
141
|
-
linesAnimation.attr("opacity", 0).attr("x2", (_, index) =>
|
|
142
|
-
var _a2;
|
|
143
|
-
return (_a2 = attrs[index].from) == null ? void 0 : _a2.x2;
|
|
144
|
-
}).attr("y2", (_, index) => {
|
|
145
|
-
var _a2;
|
|
146
|
-
return (_a2 = attrs[index].from) == null ? void 0 : _a2.y2;
|
|
147
|
-
}).transition().duration(duration).attr("opacity", 1).attr("x2", (_, index) => {
|
|
148
|
-
var _a2;
|
|
149
|
-
return (_a2 = attrs[index].to) == null ? void 0 : _a2.x2;
|
|
150
|
-
}).attr("y2", (_, index) => {
|
|
151
|
-
var _a2;
|
|
152
|
-
return (_a2 = attrs[index].to) == null ? void 0 : _a2.y2;
|
|
153
|
-
});
|
|
112
|
+
linesAnimation.attr("opacity", 0).attr("x2", (_, index) => attrs[index].from?.x2).attr("y2", (_, index) => attrs[index].from?.y2).transition().duration(duration).attr("opacity", 1).attr("x2", (_, index) => attrs[index].to?.x2).attr("y2", (_, index) => attrs[index].to?.y2);
|
|
154
113
|
}
|
|
155
114
|
if (labelsNodes.length > 0) {
|
|
156
115
|
labelsAnimation.attr("opacity", 0);
|
|
@@ -246,8 +205,7 @@ class RadialTreeRadian extends Component {
|
|
|
246
205
|
getInteractiveAreaProps({
|
|
247
206
|
$rootProps
|
|
248
207
|
}, index) {
|
|
249
|
-
|
|
250
|
-
const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
|
|
208
|
+
const data = $rootProps.data?.[index];
|
|
251
209
|
const {
|
|
252
210
|
xStart,
|
|
253
211
|
yStart,
|
|
@@ -266,8 +224,7 @@ class RadialTreeRadian extends Component {
|
|
|
266
224
|
getLineProps({
|
|
267
225
|
$rootProps
|
|
268
226
|
}, index) {
|
|
269
|
-
|
|
270
|
-
const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
|
|
227
|
+
const data = $rootProps.data?.[index];
|
|
271
228
|
const {
|
|
272
229
|
xStart,
|
|
273
230
|
yStart,
|
|
@@ -299,8 +256,7 @@ class RadialTreeRadian extends Component {
|
|
|
299
256
|
getCapProps({
|
|
300
257
|
$rootProps
|
|
301
258
|
}, index) {
|
|
302
|
-
|
|
303
|
-
const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
|
|
259
|
+
const data = $rootProps.data?.[index];
|
|
304
260
|
const {
|
|
305
261
|
xEnd,
|
|
306
262
|
yEnd,
|
|
@@ -331,8 +287,7 @@ class RadialTreeRadian extends Component {
|
|
|
331
287
|
getIconProps({
|
|
332
288
|
$rootProps
|
|
333
289
|
}, index) {
|
|
334
|
-
|
|
335
|
-
const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
|
|
290
|
+
const data = $rootProps.data?.[index];
|
|
336
291
|
const {
|
|
337
292
|
xEnd,
|
|
338
293
|
yEnd,
|
|
@@ -365,8 +320,7 @@ class RadialTreeRadian extends Component {
|
|
|
365
320
|
getLabelProps({
|
|
366
321
|
$rootProps
|
|
367
322
|
}, index) {
|
|
368
|
-
|
|
369
|
-
const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
|
|
323
|
+
const data = $rootProps.data?.[index];
|
|
370
324
|
const {
|
|
371
325
|
xLabelCenter,
|
|
372
326
|
yLabelCenter,
|
package/lib/esm/Reference.mjs
CHANGED
|
@@ -4,7 +4,6 @@ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
|
4
4
|
import React from "react";
|
|
5
5
|
import createElement from "./createElement.mjs";
|
|
6
6
|
import { scaleOfBandwidth } from "./utils.mjs";
|
|
7
|
-
/*!__reshadow-styles__:"./style/reference.shadow.css"*/
|
|
8
7
|
const style = (
|
|
9
8
|
/*__reshadow_css_start__*/
|
|
10
9
|
(sstyled.insert(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import {
|
|
2
|
+
import { Component, sstyled, assignProps, createComponent } from "@semcore/core";
|
|
3
3
|
import { Box } from "@semcore/base-components";
|
|
4
4
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
5
5
|
import fire from "@semcore/core/lib/utils/fire";
|
|
@@ -55,15 +55,13 @@ class ResponsiveContainerRoot extends Component {
|
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
57
|
componentDidMount() {
|
|
58
|
-
var _a;
|
|
59
58
|
if (this.$container) {
|
|
60
|
-
|
|
59
|
+
this.observer?.observe(this.$container);
|
|
61
60
|
}
|
|
62
61
|
}
|
|
63
62
|
// TODO component did update ref?
|
|
64
63
|
componentWillUnmount() {
|
|
65
|
-
|
|
66
|
-
(_a = this.observer) == null ? void 0 : _a.disconnect();
|
|
64
|
+
this.observer?.disconnect();
|
|
67
65
|
}
|
|
68
66
|
render() {
|
|
69
67
|
var _ref = this.asProps, _ref2;
|
package/lib/esm/ScatterPlot.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { sstyled,
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
4
4
|
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
5
5
|
import { transition } from "d3-transition";
|
|
@@ -8,7 +8,6 @@ import createElement from "./createElement.mjs";
|
|
|
8
8
|
import { PatternFill } from "./Pattern.mjs";
|
|
9
9
|
import Tooltip from "./Tooltip.mjs";
|
|
10
10
|
import { getScatterPlotRadius } from "./utils.mjs";
|
|
11
|
-
/*!__reshadow-styles__:"./style/scatterplot.shadow.css"*/
|
|
12
11
|
const style = (
|
|
13
12
|
/*__reshadow_css_start__*/
|
|
14
13
|
(sstyled.insert(
|
|
@@ -195,6 +194,7 @@ function ScatterPlotTooltip(props) {
|
|
|
195
194
|
}, _ref)
|
|
196
195
|
}));
|
|
197
196
|
}
|
|
197
|
+
;
|
|
198
198
|
const ScatterPlot = createElement(ScatterPlotRoot, {
|
|
199
199
|
Tooltip: [ScatterPlotTooltip, Tooltip._______childrenComponents]
|
|
200
200
|
});
|
package/lib/esm/StackBar.mjs
CHANGED
|
@@ -7,8 +7,8 @@ import Bar, { MIN_HEIGHT } from "./Bar.mjs";
|
|
|
7
7
|
import createElement from "./createElement.mjs";
|
|
8
8
|
import HorizontalBar, { MIN_WIDTH } from "./HorizontalBar.mjs";
|
|
9
9
|
import { getChartDefaultColorName } from "./utils.mjs";
|
|
10
|
-
const DEFAULT_INSTANCE = Symbol("DEFAULT_INSTANCE");
|
|
11
|
-
const XY0 = Symbol("XY0");
|
|
10
|
+
const DEFAULT_INSTANCE = /* @__PURE__ */ Symbol("DEFAULT_INSTANCE");
|
|
11
|
+
const XY0 = /* @__PURE__ */ Symbol("XY0");
|
|
12
12
|
class StackBarRoot extends Component {
|
|
13
13
|
constructor(...args) {
|
|
14
14
|
super(...args);
|
package/lib/esm/StackedArea.mjs
CHANGED
|
@@ -6,8 +6,8 @@ import React from "react";
|
|
|
6
6
|
import Area from "./Area.mjs";
|
|
7
7
|
import createElement from "./createElement.mjs";
|
|
8
8
|
import { getChartDefaultColorName } from "./utils.mjs";
|
|
9
|
-
const DEFAULT_INSTANCE = Symbol("DEFAULT_INSTANCE");
|
|
10
|
-
const Y0 = Symbol("Y0");
|
|
9
|
+
const DEFAULT_INSTANCE = /* @__PURE__ */ Symbol("DEFAULT_INSTANCE");
|
|
10
|
+
const Y0 = /* @__PURE__ */ Symbol("Y0");
|
|
11
11
|
class StackedAreaRoot extends Component {
|
|
12
12
|
getSeries() {
|
|
13
13
|
const {
|