@semcore/d3-chart 17.0.0-prerelease.36 → 17.0.0-prerelease.39
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 +15 -15
package/lib/esm/Tooltip.mjs
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { sstyled,
|
|
3
|
-
import {
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
|
+
import { Popper, Box } from "@semcore/base-components";
|
|
4
4
|
import findComponent from "@semcore/core/lib/utils/findComponent";
|
|
5
5
|
import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
|
|
6
6
|
import React from "react";
|
|
7
7
|
import createElement from "./createElement.mjs";
|
|
8
8
|
import { PatternSymbol } from "./Pattern.mjs";
|
|
9
9
|
import { getChartDefaultColorName } from "./utils.mjs";
|
|
10
|
-
/*!__reshadow-styles__:"./style/tooltip.shadow.css"*/
|
|
11
10
|
const style = (
|
|
12
11
|
/*__reshadow_css_start__*/
|
|
13
12
|
(sstyled.insert(
|
|
@@ -59,7 +58,7 @@ class TooltipRoot extends Component {
|
|
|
59
58
|
yIndex
|
|
60
59
|
} = this.state.tooltipProps;
|
|
61
60
|
const index = xIndex ?? yIndex;
|
|
62
|
-
onClick
|
|
61
|
+
onClick?.(index, e);
|
|
63
62
|
});
|
|
64
63
|
}
|
|
65
64
|
getTriggerProps() {
|
|
@@ -100,7 +99,6 @@ class TooltipRoot extends Component {
|
|
|
100
99
|
}), eventEmitter.subscribe(`setTooltipVisible_${plotId}`, (visible) => this.setState({
|
|
101
100
|
$visible: visible
|
|
102
101
|
})), eventEmitter.subscribe(`setTooltipPosition_${plotId}`, (x, y) => {
|
|
103
|
-
var _a;
|
|
104
102
|
this.virtualElementPosition.x = x;
|
|
105
103
|
this.virtualElementPosition.y = y;
|
|
106
104
|
if (this.virtualTriggerElement === null) {
|
|
@@ -123,7 +121,7 @@ class TooltipRoot extends Component {
|
|
|
123
121
|
left: x2
|
|
124
122
|
};
|
|
125
123
|
};
|
|
126
|
-
|
|
124
|
+
this.popper.current?.update();
|
|
127
125
|
}));
|
|
128
126
|
}
|
|
129
127
|
componentWillUnmount() {
|
|
@@ -159,10 +157,9 @@ class TooltipRoot extends Component {
|
|
|
159
157
|
popper,
|
|
160
158
|
setTrigger
|
|
161
159
|
}) => {
|
|
162
|
-
var _a;
|
|
163
160
|
this.setPopperTrigger = setTrigger;
|
|
164
161
|
this.popper = popper;
|
|
165
|
-
|
|
162
|
+
this.popper.current?.update();
|
|
166
163
|
return advancedMode ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, tag && /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
167
164
|
tag,
|
|
168
165
|
onClick: this.handleTriggerClick
|
package/lib/esm/Venn.mjs
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
3
|
-
import { sstyled,
|
|
3
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
4
4
|
import { FadeInOut } from "@semcore/base-components";
|
|
5
5
|
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
6
6
|
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
7
7
|
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
8
|
-
import {
|
|
8
|
+
import { scaleSolution, normalizeSolution, venn, intersectionAreaPath } from "@upsetjs/venn.js";
|
|
9
9
|
import React from "react";
|
|
10
10
|
import createElement from "./createElement.mjs";
|
|
11
11
|
import { PatternFill } from "./Pattern.mjs";
|
|
12
12
|
import Tooltip from "./Tooltip.mjs";
|
|
13
13
|
import { getChartDefaultColorName } from "./utils.mjs";
|
|
14
|
-
/*!__reshadow-styles__:"./style/venn.shadow.css"*/
|
|
15
14
|
const style = (
|
|
16
15
|
/*__reshadow_css_start__*/
|
|
17
16
|
(sstyled.insert(
|
|
@@ -243,6 +242,7 @@ function VennTooltip(props) {
|
|
|
243
242
|
}, _ref)
|
|
244
243
|
}));
|
|
245
244
|
}
|
|
245
|
+
;
|
|
246
246
|
const Venn = createElement(VennRoot, {
|
|
247
247
|
Circle,
|
|
248
248
|
Intersection,
|
|
@@ -38,8 +38,7 @@ const DataAccessibilityTable = ({
|
|
|
38
38
|
return doublicated;
|
|
39
39
|
}, [keys, hints]);
|
|
40
40
|
const renderTitle = React.useCallback((dataKey) => {
|
|
41
|
-
|
|
42
|
-
const formatted = (_a = config.titlesFormatter) == null ? void 0 : _a.call(config, dataKey);
|
|
41
|
+
const formatted = config.titlesFormatter?.(dataKey);
|
|
43
42
|
if (formatted !== void 0) return formatted;
|
|
44
43
|
if (hints.titles.valuesAxes[dataKey]) return hints.titles.valuesAxes[dataKey];
|
|
45
44
|
if (!duplicatedBaseKeys[dataKey]) {
|
|
@@ -49,8 +48,7 @@ const DataAccessibilityTable = ({
|
|
|
49
48
|
return dataKey;
|
|
50
49
|
}, [data, hints, duplicatedBaseKeys, config]);
|
|
51
50
|
const formatValue = React.useCallback((value, row) => {
|
|
52
|
-
|
|
53
|
-
return ((_a = config.valuesFormatter) == null ? void 0 : _a.call(config, value, row)) ?? defaultValueFormatter(intl, value);
|
|
51
|
+
return config.valuesFormatter?.(value, row) ?? defaultValueFormatter(intl, value);
|
|
54
52
|
}, [intl, config]);
|
|
55
53
|
return /* @__PURE__ */ React.createElement("table", {
|
|
56
54
|
id: `${id}-data-table`,
|
|
@@ -5,7 +5,6 @@ import { Context, useI18n } from "@semcore/core/lib/utils/enhances/WithI18n";
|
|
|
5
5
|
import React from "react";
|
|
6
6
|
import { normalizeLocale } from "./locale.mjs";
|
|
7
7
|
import { localizedMessages } from "./translations/module/__intergalactic-dynamic-locales.mjs";
|
|
8
|
-
/*!__reshadow-styles__:"../style/plotA11yModule.shadow.css"*/
|
|
9
8
|
const styles = (
|
|
10
9
|
/*__reshadow_css_start__*/
|
|
11
10
|
(sstyled.insert(
|
|
@@ -49,7 +48,8 @@ function PlotA11yModule(props) {
|
|
|
49
48
|
});
|
|
50
49
|
}, [plotA11yView, isOpened, loading, setLoading]);
|
|
51
50
|
if (plotA11yView) {
|
|
52
|
-
|
|
51
|
+
var _ref2;
|
|
52
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(plotA11yView.Component, _extends({}, props, {
|
|
53
53
|
onCloseHandler: () => {
|
|
54
54
|
setIsOpened(false);
|
|
55
55
|
setPlotA11yView(null);
|
|
@@ -8,7 +8,6 @@ import { makeDataSummarizationConfig } from "./hints.mjs";
|
|
|
8
8
|
import { getIntl } from "./intl.mjs";
|
|
9
9
|
import { summarize } from "./summarize.mjs";
|
|
10
10
|
import { localizedMessages } from "./translations/view/__intergalactic-dynamic-locales.mjs";
|
|
11
|
-
/*!__reshadow-styles__:"../style/plotA11yView.shadow.css"*/
|
|
12
11
|
const styles = (
|
|
13
12
|
/*__reshadow_css_start__*/
|
|
14
13
|
(sstyled.insert(
|
|
@@ -42,22 +41,17 @@ function PlotA11yView({
|
|
|
42
41
|
const [summary, setSummary] = React.useState(null);
|
|
43
42
|
const [generatingSummary, setGeneratingSummary] = React.useState(true);
|
|
44
43
|
React.useEffect(() => {
|
|
45
|
-
|
|
46
|
-
(_a = rootRef.current) == null ? void 0 : _a.focus();
|
|
44
|
+
rootRef.current?.focus();
|
|
47
45
|
function focusOutHandler(event) {
|
|
48
|
-
var _a2;
|
|
49
46
|
if (event.relatedTarget === null) {
|
|
50
47
|
return requestIdleCallback(onCloseHandler);
|
|
51
48
|
}
|
|
52
49
|
if (!(event.relatedTarget instanceof HTMLElement)) return;
|
|
53
|
-
if (
|
|
50
|
+
if (rootRef.current?.contains(event.relatedTarget)) return;
|
|
54
51
|
requestIdleCallback(onCloseHandler);
|
|
55
52
|
}
|
|
56
|
-
|
|
57
|
-
return () =>
|
|
58
|
-
var _a2;
|
|
59
|
-
return (_a2 = rootRef.current) == null ? void 0 : _a2.removeEventListener("focusout", focusOutHandler);
|
|
60
|
-
};
|
|
53
|
+
rootRef.current?.addEventListener("focusout", focusOutHandler);
|
|
54
|
+
return () => rootRef.current?.removeEventListener("focusout", focusOutHandler);
|
|
61
55
|
}, []);
|
|
62
56
|
React.useEffect(() => {
|
|
63
57
|
if (config.disable) {
|
|
@@ -78,15 +72,13 @@ function PlotA11yView({
|
|
|
78
72
|
const handleClose = React.useCallback(() => {
|
|
79
73
|
onCloseHandler();
|
|
80
74
|
requestIdleCallback(() => {
|
|
81
|
-
|
|
82
|
-
(_a = triggerRef.current) == null ? void 0 : _a.focus();
|
|
75
|
+
triggerRef.current?.focus();
|
|
83
76
|
});
|
|
84
77
|
}, []);
|
|
85
78
|
const handleSkip = React.useCallback((event) => {
|
|
86
|
-
var _a;
|
|
87
79
|
event.preventDefault();
|
|
88
80
|
if (!plotRef.current) return;
|
|
89
|
-
|
|
81
|
+
heavyFindNextFocusableElement(plotRef.current)?.focus();
|
|
90
82
|
onCloseHandler();
|
|
91
83
|
}, []);
|
|
92
84
|
const handleSkipKeyboard = React.useCallback((event) => {
|
|
@@ -94,9 +86,8 @@ function PlotA11yView({
|
|
|
94
86
|
handleSkip(event);
|
|
95
87
|
}, [handleSkip]);
|
|
96
88
|
const handleGoToTable = React.useCallback((event) => {
|
|
97
|
-
var _a;
|
|
98
89
|
event.preventDefault();
|
|
99
|
-
|
|
90
|
+
dataTableRef.current?.focus();
|
|
100
91
|
}, []);
|
|
101
92
|
const handleGoToTableKeyboard = React.useCallback((event) => {
|
|
102
93
|
if (!(event.key === "Enter" || event.key === " ")) return;
|
|
@@ -165,6 +156,7 @@ function PlotA11yView({
|
|
|
165
156
|
"intl": intl
|
|
166
157
|
})));
|
|
167
158
|
}
|
|
159
|
+
;
|
|
168
160
|
export {
|
|
169
161
|
PlotA11yView
|
|
170
162
|
};
|
package/lib/esm/a11y/focus.mjs
CHANGED
|
@@ -3,7 +3,7 @@ const findNextFocusableElementInChildren = (element) => {
|
|
|
3
3
|
if (element && isFocusable(element)) {
|
|
4
4
|
return element;
|
|
5
5
|
}
|
|
6
|
-
const children = element
|
|
6
|
+
const children = element?.children;
|
|
7
7
|
if (children) {
|
|
8
8
|
for (let i = 0; i < children.length; i++) {
|
|
9
9
|
const childChild = children.item(i);
|
|
@@ -27,7 +27,7 @@ const heavyFindNextFocusableElement = (base) => {
|
|
|
27
27
|
const parents = makeParentsChain(base);
|
|
28
28
|
for (let i = 0; i < parents.length; i++) {
|
|
29
29
|
const parent = parents[i];
|
|
30
|
-
let siblings = Array.from(
|
|
30
|
+
let siblings = Array.from(parent?.children ?? []);
|
|
31
31
|
if (siblings.indexOf(parents[i - 1] || base) !== -1) {
|
|
32
32
|
siblings = siblings.slice(siblings.indexOf(parents[i - 1] || base) + 1);
|
|
33
33
|
}
|
package/lib/esm/a11y/hints.mjs
CHANGED
|
@@ -99,15 +99,15 @@ const makeDataSummarizationConfig = (config) => ({
|
|
|
99
99
|
weak: 1 / 10,
|
|
100
100
|
medium: 1 / 5,
|
|
101
101
|
strong: Number.POSITIVE_INFINITY,
|
|
102
|
-
...
|
|
102
|
+
...config?.trendTangens ?? {}
|
|
103
103
|
},
|
|
104
104
|
movingAverage: {
|
|
105
105
|
longSize: void 0,
|
|
106
106
|
shortSize: void 0,
|
|
107
107
|
notableDiff: void 0,
|
|
108
|
-
...
|
|
108
|
+
...config?.movingAverage ?? {}
|
|
109
109
|
},
|
|
110
|
-
additionalFields: [...
|
|
110
|
+
additionalFields: [...config?.additionalFields ?? []]
|
|
111
111
|
});
|
|
112
112
|
export {
|
|
113
113
|
makeDataHintsContainer,
|
|
@@ -24,7 +24,6 @@ const movingAverage = (data, frame) => {
|
|
|
24
24
|
return result;
|
|
25
25
|
};
|
|
26
26
|
const extractDataInsights = (data, hints, config) => {
|
|
27
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
28
27
|
let insights = [];
|
|
29
28
|
let dataType = config.dataType ?? hints.dataType;
|
|
30
29
|
const dataRange = [];
|
|
@@ -66,8 +65,8 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
66
65
|
entitiesCount = Object.keys(valuesKeys).length;
|
|
67
66
|
const fromKey = firstRow[labelsKey];
|
|
68
67
|
const toKey = lastRow[labelsKey];
|
|
69
|
-
const from =
|
|
70
|
-
const to =
|
|
68
|
+
const from = hints.titles.getHorizontalAxesTitle?.(fromKey) ?? hints.titles.horizontalAxes[fromKey] ?? fromKey;
|
|
69
|
+
const to = hints.titles.getHorizontalAxesTitle?.(toKey) ?? hints.titles.horizontalAxes[toKey] ?? toKey;
|
|
71
70
|
if (entitiesCount > 0) {
|
|
72
71
|
dataRange.push({
|
|
73
72
|
from,
|
|
@@ -115,10 +114,9 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
115
114
|
label,
|
|
116
115
|
type
|
|
117
116
|
}) => {
|
|
118
|
-
var _a2, _b2;
|
|
119
117
|
for (let i = 0; i < trendStrengths.length; i++) {
|
|
120
|
-
const normalizedHeight = Math.abs(value.from - value.to) / (
|
|
121
|
-
const normalizedWidth = width / (
|
|
118
|
+
const normalizedHeight = Math.abs(value.from - value.to) / (hints.pointsDensity?.verticalAxes ?? 1);
|
|
119
|
+
const normalizedWidth = width / (hints.pointsDensity?.horizontalAxes ?? 1);
|
|
122
120
|
const tang = normalizedHeight / normalizedWidth;
|
|
123
121
|
const trendStrength = trendStrengths[i];
|
|
124
122
|
if (tang <= config.trendTangens[trendStrength] || i === trendStrengths.length - 1) {
|
|
@@ -169,8 +167,8 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
169
167
|
i = Math.min(i, data.length - 1);
|
|
170
168
|
const fromKey2 = data[lastSwitch][labelsKey];
|
|
171
169
|
const toKey2 = data[i][labelsKey];
|
|
172
|
-
const from2 =
|
|
173
|
-
const to2 =
|
|
170
|
+
const from2 = hints.titles.getHorizontalAxesTitle?.(fromKey2) ?? hints.titles.horizontalAxes[fromKey2] ?? fromKey2;
|
|
171
|
+
const to2 = hints.titles.getHorizontalAxesTitle?.(toKey2) ?? hints.titles.horizontalAxes[toKey2] ?? toKey2;
|
|
174
172
|
localTrends.push(recordTrend({
|
|
175
173
|
type: "trend",
|
|
176
174
|
value: {
|
|
@@ -284,7 +282,7 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
284
282
|
for (const yNeighbour of [y - 1, y, y + 1]) {
|
|
285
283
|
if (xNeighbour === void 0 || yNeighbour === void 0) continue;
|
|
286
284
|
if (xNeighbour === x && yNeighbour === y) continue;
|
|
287
|
-
if (!
|
|
285
|
+
if (!grid[xNeighbour]?.[yNeighbour]) continue;
|
|
288
286
|
pointHandled = true;
|
|
289
287
|
grid[x][y].clusterId = grid[xNeighbour][yNeighbour].clusterId;
|
|
290
288
|
break;
|
|
@@ -386,7 +384,8 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
386
384
|
x: 1,
|
|
387
385
|
y: 1
|
|
388
386
|
}], {
|
|
389
|
-
width: 1
|
|
387
|
+
width: 1,
|
|
388
|
+
height: 1
|
|
390
389
|
});
|
|
391
390
|
for (const clustersInsight of clustersInsights) {
|
|
392
391
|
const {
|
|
@@ -430,7 +429,7 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
430
429
|
const key = allRowsIds[i];
|
|
431
430
|
const groupKeyValue = getPropByPath(row, groupKeys[0]);
|
|
432
431
|
groupedValues[key] = groupedValues[key] ?? {
|
|
433
|
-
groupName:
|
|
432
|
+
groupName: hints.titles.getHorizontalAxesTitle?.(groupKeyValue) ?? groupKeyValue,
|
|
434
433
|
rows: []
|
|
435
434
|
};
|
|
436
435
|
groupedValues[key].rows.push(row);
|
|
@@ -442,12 +441,11 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
442
441
|
}
|
|
443
442
|
fields = fields.filter((key) => !grouppingKeys[key]);
|
|
444
443
|
const groups = Object.entries(groupedValues).map(([groupKey, group]) => {
|
|
445
|
-
var _a2, _b2;
|
|
446
444
|
const values = [];
|
|
447
445
|
for (const row of group.rows) {
|
|
448
446
|
for (const field of fields) {
|
|
449
447
|
values.push({
|
|
450
|
-
label: hints.titles.valuesAxes[field] ??
|
|
448
|
+
label: hints.titles.valuesAxes[field] ?? hints.titles.getVerticalAxesTitle?.(field) ?? field,
|
|
451
449
|
value: getPropByPath(row, field)
|
|
452
450
|
});
|
|
453
451
|
}
|
|
@@ -483,13 +481,10 @@ const extractDataInsights = (data, hints, config) => {
|
|
|
483
481
|
if (fields.length === 0) {
|
|
484
482
|
fields.push(...Object.keys(keysMap));
|
|
485
483
|
}
|
|
486
|
-
const values = fields.map((field) => {
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
value: getPropByPath(data, field)
|
|
491
|
-
};
|
|
492
|
-
});
|
|
484
|
+
const values = fields.map((field) => ({
|
|
485
|
+
label: hints.titles.valuesAxes[field] ?? hints.titles.getValueAxesTitle?.(field) ?? field,
|
|
486
|
+
value: getPropByPath(data, field)
|
|
487
|
+
}));
|
|
493
488
|
entitiesCount = values.length;
|
|
494
489
|
values.sort((a, b) => {
|
|
495
490
|
if (typeof a.value !== "number" || typeof b.value !== "number") return 0;
|
package/lib/esm/a11y/intl.mjs
CHANGED
package/lib/esm/a11y/locale.mjs
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
const normalizeLocale = (providedLocale, translations = {}) => {
|
|
2
|
-
var _a;
|
|
3
2
|
const translationNames = {};
|
|
4
3
|
for (const locale2 in translations) {
|
|
5
4
|
translationNames[locale2.toLowerCase()] = locale2;
|
|
6
5
|
}
|
|
7
|
-
providedLocale = providedLocale ?? isAvailableLocale(
|
|
6
|
+
providedLocale = providedLocale ?? isAvailableLocale(globalThis?.navigator?.language, translations) ?? "en";
|
|
8
7
|
let locale = providedLocale.toLowerCase();
|
|
9
8
|
if (locale.includes("-") && !translations[locale]) {
|
|
10
9
|
const [localeBase] = locale.split("-");
|
|
@@ -134,12 +134,12 @@ const serialize = ({
|
|
|
134
134
|
if (insights.length === 0) return null;
|
|
135
135
|
const intl = getIntl(locale, translations, availableLocales);
|
|
136
136
|
const dataRangeSummary = intl.formatList(dataRange.map((range) => {
|
|
137
|
-
const from =
|
|
137
|
+
const from = valuesFormatter?.(range.from, range.label) ?? defaultValueFormatter(intl, range.from, {
|
|
138
138
|
siblingsTimeMark: range.to,
|
|
139
139
|
datesWithTime,
|
|
140
140
|
maxListSymbols
|
|
141
141
|
});
|
|
142
|
-
const to =
|
|
142
|
+
const to = valuesFormatter?.(range.to, range.label) ?? defaultValueFormatter(intl, range.to, {
|
|
143
143
|
siblingsTimeMark: range.from,
|
|
144
144
|
datesWithTime,
|
|
145
145
|
maxListSymbols
|
|
@@ -149,7 +149,7 @@ const serialize = ({
|
|
|
149
149
|
}, {
|
|
150
150
|
from,
|
|
151
151
|
to,
|
|
152
|
-
label:
|
|
152
|
+
label: titlesFormatter?.(range.label) ?? range.label
|
|
153
153
|
});
|
|
154
154
|
}));
|
|
155
155
|
if (dataType === "time-series") {
|
|
@@ -173,12 +173,12 @@ const serialize = ({
|
|
|
173
173
|
const mainSummary = intl.formatMessage({
|
|
174
174
|
id: "time-series-general-trend"
|
|
175
175
|
}, {
|
|
176
|
-
dataKey:
|
|
176
|
+
dataKey: titlesFormatter?.(summaryDataKey) ?? summaryDataKey,
|
|
177
177
|
trend: intl.formatMessage({
|
|
178
178
|
id: `trend-${primaryTrend.change.strength}`
|
|
179
179
|
}),
|
|
180
|
-
from:
|
|
181
|
-
to:
|
|
180
|
+
from: valuesFormatter?.(primaryTrend.change.from, dataKey) ?? intl.formatNumber(primaryTrend.change.from),
|
|
181
|
+
to: valuesFormatter?.(primaryTrend.change.to, dataKey) ?? intl.formatNumber(primaryTrend.change.to)
|
|
182
182
|
});
|
|
183
183
|
const secondarySummaries = secondaryTrends.map((trend) => intl.formatMessage({
|
|
184
184
|
id: "time-series-local-trend"
|
|
@@ -186,12 +186,12 @@ const serialize = ({
|
|
|
186
186
|
trend: intl.formatMessage({
|
|
187
187
|
id: `trend-${trend.change.strength}`
|
|
188
188
|
}),
|
|
189
|
-
from:
|
|
189
|
+
from: valuesFormatter?.(trend.from, trend.dataKey) ?? defaultValueFormatter(intl, trend.from, {
|
|
190
190
|
siblingsTimeMark: trend.to,
|
|
191
191
|
datesWithTime,
|
|
192
192
|
maxListSymbols
|
|
193
193
|
}),
|
|
194
|
-
to:
|
|
194
|
+
to: valuesFormatter?.(trend.to, trend.dataKey) ?? defaultValueFormatter(intl, trend.to, {
|
|
195
195
|
siblingsTimeMark: trend.from,
|
|
196
196
|
datesWithTime,
|
|
197
197
|
maxListSymbols
|
|
@@ -212,7 +212,7 @@ const serialize = ({
|
|
|
212
212
|
}, {
|
|
213
213
|
entities,
|
|
214
214
|
entitiesList: intl.formatList(entitiesList),
|
|
215
|
-
label:
|
|
215
|
+
label: titlesFormatter?.(dataTitle) ?? dataTitle
|
|
216
216
|
});
|
|
217
217
|
if (dataRangeSummary.length > 0) {
|
|
218
218
|
return `${summary}
|
|
@@ -237,7 +237,7 @@ ${dataRangeSummary}`;
|
|
|
237
237
|
minSize
|
|
238
238
|
});
|
|
239
239
|
const entitiesList = biggestClusters.map((clusterInsight) => {
|
|
240
|
-
const labels = formatLimitedSizeList(clusterInsight.labels.map((label) =>
|
|
240
|
+
const labels = formatLimitedSizeList(clusterInsight.labels.map((label) => titlesFormatter?.(label) ?? label), intl, maxListSymbols);
|
|
241
241
|
const anonymous = clusterInsight.labels.length === 0 || labels === String(clusterInsight.size);
|
|
242
242
|
return intl.formatMessage({
|
|
243
243
|
id: anonymous ? "entity-type-clusters-label-anonymous" : "entity-type-clusters-label"
|
|
@@ -247,10 +247,10 @@ ${dataRangeSummary}`;
|
|
|
247
247
|
}),
|
|
248
248
|
labels,
|
|
249
249
|
size: clusterInsight.size,
|
|
250
|
-
x:
|
|
251
|
-
xLabel:
|
|
252
|
-
y:
|
|
253
|
-
yLabel:
|
|
250
|
+
x: valuesFormatter?.(clusterInsight.center.x, clusterInsight.labels) ?? intl.formatNumber(clusterInsight.center.x),
|
|
251
|
+
xLabel: titlesFormatter?.(clusterInsight.center.xLabel) ?? clusterInsight.center.xLabel,
|
|
252
|
+
y: valuesFormatter?.(clusterInsight.center.y, clusterInsight.labels) ?? intl.formatNumber(clusterInsight.center.y),
|
|
253
|
+
yLabel: titlesFormatter?.(clusterInsight.center.yLabel) ?? clusterInsight.center.yLabel
|
|
254
254
|
});
|
|
255
255
|
});
|
|
256
256
|
if (insights.length > clustersLimit) {
|
|
@@ -265,7 +265,7 @@ ${dataRangeSummary}`;
|
|
|
265
265
|
}, {
|
|
266
266
|
entities,
|
|
267
267
|
entitiesList: intl.formatList(entitiesList),
|
|
268
|
-
label:
|
|
268
|
+
label: titlesFormatter?.(dataTitle) ?? dataTitle
|
|
269
269
|
});
|
|
270
270
|
if (dataRangeSummary.length > 0) {
|
|
271
271
|
return `${summary}
|
|
@@ -290,7 +290,7 @@ ${dataRangeSummary}`;
|
|
|
290
290
|
}, {
|
|
291
291
|
entities,
|
|
292
292
|
entitiesList,
|
|
293
|
-
label:
|
|
293
|
+
label: titlesFormatter?.(dataTitle) ?? dataTitle
|
|
294
294
|
});
|
|
295
295
|
} else if (dataType === "grouped-values" || dataType === "indexed-groups") {
|
|
296
296
|
const groupInsights = insights;
|
|
@@ -338,7 +338,7 @@ ${dataRangeSummary}`;
|
|
|
338
338
|
}, {
|
|
339
339
|
entities,
|
|
340
340
|
entitiesList: intl.formatList(entitiesList),
|
|
341
|
-
label:
|
|
341
|
+
label: titlesFormatter?.(dataTitle) ?? dataTitle
|
|
342
342
|
});
|
|
343
343
|
return summary;
|
|
344
344
|
}
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { sstyled, Component, assignProps } from "@semcore/core";
|
|
3
|
+
import { Box, Flex } from "@semcore/base-components";
|
|
4
4
|
import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
|
|
5
5
|
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
6
6
|
import { Text } from "@semcore/typography";
|
|
7
7
|
import React, { Fragment } from "react";
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
8
|
+
import "../../index.mjs";
|
|
9
|
+
import { makeDataHintsContainer } from "../../a11y/hints.mjs";
|
|
10
|
+
import { interpolateValue } from "../../utils.mjs";
|
|
11
|
+
import "../ChartLegend/index.mjs";
|
|
10
12
|
import { LegendTable } from "../ChartLegend/LegendTable/LegendTable.mjs";
|
|
13
|
+
import { LegendFlex } from "../ChartLegend/LegendFlex/LegendFlex.mjs";
|
|
11
14
|
import { YAxis, XAxis } from "../../Axis.mjs";
|
|
12
|
-
import
|
|
13
|
-
import { makeDataHintsContainer } from "../../a11y/hints.mjs";
|
|
14
|
-
/*!__reshadow-styles__:"../../style/abstract-chart.shadow.css"*/
|
|
15
|
+
import Plot from "../../Plot.mjs";
|
|
15
16
|
const style = (
|
|
16
17
|
/*__reshadow_css_start__*/
|
|
17
18
|
(sstyled.insert(
|
|
@@ -58,17 +59,16 @@ class AbstractChart extends Component {
|
|
|
58
59
|
legendProps
|
|
59
60
|
} = this.props;
|
|
60
61
|
return this.dataKeys.map((key, index) => {
|
|
61
|
-
|
|
62
|
-
const legendData = (_a = legendProps == null ? void 0 : legendProps.legendMap) == null ? void 0 : _a[key];
|
|
62
|
+
const legendData = legendProps?.legendMap?.[key];
|
|
63
63
|
const dataDefinition = {
|
|
64
64
|
id: key,
|
|
65
|
-
label:
|
|
66
|
-
icon:
|
|
67
|
-
checked:
|
|
65
|
+
label: legendData?.label ?? key,
|
|
66
|
+
icon: legendData?.icon ?? void 0,
|
|
67
|
+
checked: legendData?.defaultChecked ?? true,
|
|
68
68
|
color: this.resolveColor(key, index),
|
|
69
69
|
columns: []
|
|
70
70
|
};
|
|
71
|
-
if (
|
|
71
|
+
if (legendData?.additionalInfo || legendData?.count) {
|
|
72
72
|
dataDefinition.additionalInfo = legendData.additionalInfo ? {
|
|
73
73
|
label: legendData.additionalInfo
|
|
74
74
|
} : legendData.count ? {
|
|
@@ -271,8 +271,7 @@ class AbstractChart extends Component {
|
|
|
271
271
|
this.setHighlightedLine(-1);
|
|
272
272
|
}
|
|
273
273
|
resolveColor(id, index) {
|
|
274
|
-
|
|
275
|
-
return ((_a = this.props.colorMap) == null ? void 0 : _a[id]) ?? `chart-palette-order-${index + 1}`;
|
|
274
|
+
return this.props.colorMap?.[id] ?? `chart-palette-order-${index + 1}`;
|
|
276
275
|
}
|
|
277
276
|
tooltipValueFormatter(value) {
|
|
278
277
|
const {
|
|
@@ -390,7 +389,6 @@ class AbstractChart extends Component {
|
|
|
390
389
|
}) : /* @__PURE__ */ React.createElement(XAxis.Grid, null))));
|
|
391
390
|
}
|
|
392
391
|
getTooltipChildren(options) {
|
|
393
|
-
var _a;
|
|
394
392
|
var _ref = this.asProps, _ref3;
|
|
395
393
|
const STooltipChildrenWrapper = Box;
|
|
396
394
|
const {
|
|
@@ -404,7 +402,7 @@ class AbstractChart extends Component {
|
|
|
404
402
|
const {
|
|
405
403
|
dataDefinitions
|
|
406
404
|
} = this.state;
|
|
407
|
-
const title =
|
|
405
|
+
const title = dataItem[groupKey]?.toString();
|
|
408
406
|
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(Flex, _ref3.cn("Flex", {
|
|
409
407
|
"direction": "column"
|
|
410
408
|
}), title && /* @__PURE__ */ React.createElement(Tooltip.Title, null, title), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", {
|
|
@@ -3,12 +3,13 @@ import { createComponent } from "@semcore/core";
|
|
|
3
3
|
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
4
4
|
import { scaleTime, scaleLinear } from "d3-scale";
|
|
5
5
|
import React from "react";
|
|
6
|
-
import
|
|
7
|
-
import StackedArea from "../../StackedArea.mjs";
|
|
8
|
-
import { HoverLine } from "../../Hover.mjs";
|
|
9
|
-
import { minMax } from "../../utils.mjs";
|
|
6
|
+
import "../../index.mjs";
|
|
10
7
|
import { AbstractChart } from "./AbstractChart.mjs";
|
|
11
8
|
import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
|
|
9
|
+
import { minMax } from "../../utils.mjs";
|
|
10
|
+
import StackedArea from "../../StackedArea.mjs";
|
|
11
|
+
import Area from "../../Area.mjs";
|
|
12
|
+
import { HoverLine } from "../../Hover.mjs";
|
|
12
13
|
class AreaChartComponent extends AbstractChart {
|
|
13
14
|
get xScale() {
|
|
14
15
|
const {
|
|
@@ -5,13 +5,14 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
|
5
5
|
import { scaleTime, scaleBand, scaleLinear } from "d3-scale";
|
|
6
6
|
import React from "react";
|
|
7
7
|
import { AbstractChart } from "./AbstractChart.mjs";
|
|
8
|
-
import
|
|
8
|
+
import "../../index.mjs";
|
|
9
|
+
import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
|
|
9
10
|
import Line from "../../Line.mjs";
|
|
10
11
|
import GroupBar from "../../GroupBar.mjs";
|
|
11
12
|
import StackBar from "../../StackBar.mjs";
|
|
12
13
|
import { HoverRect } from "../../Hover.mjs";
|
|
14
|
+
import { YAxis, XAxis } from "../../Axis.mjs";
|
|
13
15
|
import { minMax } from "../../utils.mjs";
|
|
14
|
-
import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
|
|
15
16
|
class BarChartComponent extends AbstractChart {
|
|
16
17
|
constructor(...args) {
|
|
17
18
|
super(...args);
|
|
@@ -61,7 +62,7 @@ class BarChartComponent extends AbstractChart {
|
|
|
61
62
|
const {
|
|
62
63
|
withTrend
|
|
63
64
|
} = this.state;
|
|
64
|
-
const trendItem = trend
|
|
65
|
+
const trendItem = trend?.[key];
|
|
65
66
|
if (withTrend && trendItem) {
|
|
66
67
|
return /* @__PURE__ */ React.createElement(Line, {
|
|
67
68
|
data: trendItem,
|
|
@@ -4,10 +4,11 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
|
4
4
|
import { Text } from "@semcore/typography";
|
|
5
5
|
import { scaleLinear } from "d3-scale";
|
|
6
6
|
import React from "react";
|
|
7
|
-
import
|
|
8
|
-
import { calculateBubbleDomain } from "../../utils.mjs";
|
|
7
|
+
import "../../index.mjs";
|
|
9
8
|
import { AbstractChart } from "./AbstractChart.mjs";
|
|
10
9
|
import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
|
|
10
|
+
import { calculateBubbleDomain } from "../../utils.mjs";
|
|
11
|
+
import Bubble from "../../Bubble.mjs";
|
|
11
12
|
class BubbleChartComponent extends AbstractChart {
|
|
12
13
|
get dataKeys() {
|
|
13
14
|
const {
|
|
@@ -21,21 +22,20 @@ class BubbleChartComponent extends AbstractChart {
|
|
|
21
22
|
data
|
|
22
23
|
} = this.props;
|
|
23
24
|
return data.map((item, index) => {
|
|
24
|
-
var _a;
|
|
25
25
|
const key = index.toString();
|
|
26
|
-
const legendData =
|
|
26
|
+
const legendData = legendProps?.legendMap?.[key];
|
|
27
27
|
if (item.color === void 0) {
|
|
28
28
|
item.color = this.resolveColor(key, index);
|
|
29
29
|
}
|
|
30
30
|
const dataDefinition = {
|
|
31
31
|
id: key,
|
|
32
|
-
label:
|
|
33
|
-
icon:
|
|
34
|
-
checked:
|
|
32
|
+
label: legendData?.label ?? item.label ?? key,
|
|
33
|
+
icon: legendData?.icon ?? void 0,
|
|
34
|
+
checked: legendData?.defaultChecked ?? true,
|
|
35
35
|
color: item.color,
|
|
36
36
|
columns: []
|
|
37
37
|
};
|
|
38
|
-
if (
|
|
38
|
+
if (legendData?.additionalInfo || legendData?.count) {
|
|
39
39
|
dataDefinition.additionalInfo = legendData.additionalInfo ? {
|
|
40
40
|
label: legendData.additionalInfo
|
|
41
41
|
} : legendData.count ? {
|