@yoka-ui/ui 1.0.6 → 1.0.7
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/@Docs-yoka/exports.generated.md +3 -3
- package/README.md +6 -6
- package/dist/es/assets/image/skills.zip +0 -0
- package/dist/es/business/Empty/index.js.map +1 -1
- package/dist/es/business/YkCharts/Area.d.ts +18 -0
- package/dist/es/business/YkCharts/Area.js +336 -0
- package/dist/es/business/YkCharts/Area.js.map +7 -0
- package/dist/es/business/YkCharts/Bar.d.ts +21 -0
- package/dist/es/business/YkCharts/Bar.js +316 -0
- package/dist/es/business/YkCharts/Bar.js.map +7 -0
- package/dist/es/business/YkCharts/BarProperty.d.ts +21 -0
- package/dist/es/business/YkCharts/BarProperty.js +357 -0
- package/dist/es/business/YkCharts/BarProperty.js.map +7 -0
- package/dist/es/business/YkCharts/BarTotal.d.ts +21 -0
- package/dist/es/business/YkCharts/BarTotal.js +288 -0
- package/dist/es/business/YkCharts/BarTotal.js.map +7 -0
- package/dist/es/business/YkCharts/Line.d.ts +21 -0
- package/dist/es/business/YkCharts/Line.js +342 -0
- package/dist/es/business/YkCharts/Line.js.map +7 -0
- package/dist/es/business/YkCharts/Pie.d.ts +19 -0
- package/dist/es/business/YkCharts/Pie.js +107 -0
- package/dist/es/business/YkCharts/Pie.js.map +7 -0
- package/dist/es/business/YkCharts/PieProperty.d.ts +18 -0
- package/dist/es/business/YkCharts/PieProperty.js +180 -0
- package/dist/es/business/YkCharts/PieProperty.js.map +7 -0
- package/dist/es/business/YkCharts/Pies.d.ts +26 -0
- package/dist/es/business/YkCharts/Pies.js +348 -0
- package/dist/es/business/YkCharts/Pies.js.map +7 -0
- package/dist/es/business/YkCharts/constants.d.ts +1 -0
- package/dist/es/business/YkCharts/constants.js +47 -0
- package/dist/es/business/YkCharts/constants.js.map +7 -0
- package/dist/es/business/YkCharts/hooks.d.ts +4 -0
- package/dist/es/business/YkCharts/hooks.js +37 -0
- package/dist/es/business/YkCharts/hooks.js.map +7 -0
- package/dist/es/business/YkCharts/index.d.ts +9 -0
- package/dist/es/business/YkCharts/index.js +20 -0
- package/dist/es/business/YkCharts/index.js.map +7 -0
- package/dist/es/business/YkCharts/index.module.less +164 -0
- package/dist/es/business/YkCharts/tooltip.less +92 -0
- package/dist/es/business/YkCharts/transformData.js +16 -0
- package/dist/es/business/YkCharts/transformData.js.map +7 -0
- package/dist/es/business/YkCharts/typing.d.ts +74 -0
- package/dist/es/business/YkCharts/typing.js +1 -0
- package/dist/es/business/YkCharts/typing.js.map +7 -0
- package/dist/es/business/YkCharts/utils.d.ts +4 -0
- package/dist/es/business/YkCharts/utils.js +109 -0
- package/dist/es/business/YkCharts/utils.js.map +7 -0
- package/dist/es/business/YkCharts/variables.less +13 -0
- package/dist/es/components/YKMarkdown/index.d.ts +11 -0
- package/dist/es/components/YKMarkdown/index.js +236 -0
- package/dist/es/components/YKMarkdown/index.js.map +7 -0
- package/dist/es/components/YKMarkdown/index.module.less +83 -0
- package/dist/es/components/YkDateRangePicker/YkDateRangePicker.mdx +3 -3
- package/dist/es/creative/GlassSegmentedRadio/index.d.ts +1 -1
- package/dist/es/creative/SkillsWriter/index.d.ts +3 -0
- package/dist/es/creative/SkillsWriter/index.js +191 -0
- package/dist/es/creative/SkillsWriter/index.js.map +7 -0
- package/dist/es/creative/SkillsWriter/index.module.less +21 -0
- package/dist/es/index.less +6 -1
- package/dist/es/utils/ykStorybookDoc.d.ts +15 -0
- package/dist/es/utils/ykStorybookDoc.js +24 -2
- package/dist/es/utils/ykStorybookDoc.js.map +2 -2
- package/dist/lib/assets/image/skills.zip +0 -0
- package/dist/lib/business/Empty/index.js.map +1 -1
- package/dist/lib/business/YkCharts/Area.d.ts +18 -0
- package/dist/lib/business/YkCharts/Area.js +346 -0
- package/dist/lib/business/YkCharts/Area.js.map +7 -0
- package/dist/lib/business/YkCharts/Bar.d.ts +21 -0
- package/dist/lib/business/YkCharts/Bar.js +323 -0
- package/dist/lib/business/YkCharts/Bar.js.map +7 -0
- package/dist/lib/business/YkCharts/BarProperty.d.ts +21 -0
- package/dist/lib/business/YkCharts/BarProperty.js +370 -0
- package/dist/lib/business/YkCharts/BarProperty.js.map +7 -0
- package/dist/lib/business/YkCharts/BarTotal.d.ts +21 -0
- package/dist/lib/business/YkCharts/BarTotal.js +295 -0
- package/dist/lib/business/YkCharts/BarTotal.js.map +7 -0
- package/dist/lib/business/YkCharts/Line.d.ts +21 -0
- package/dist/lib/business/YkCharts/Line.js +349 -0
- package/dist/lib/business/YkCharts/Line.js.map +7 -0
- package/dist/lib/business/YkCharts/Pie.d.ts +19 -0
- package/dist/lib/business/YkCharts/Pie.js +117 -0
- package/dist/lib/business/YkCharts/Pie.js.map +7 -0
- package/dist/lib/business/YkCharts/PieProperty.d.ts +18 -0
- package/dist/lib/business/YkCharts/PieProperty.js +193 -0
- package/dist/lib/business/YkCharts/PieProperty.js.map +7 -0
- package/dist/lib/business/YkCharts/Pies.d.ts +26 -0
- package/dist/lib/business/YkCharts/Pies.js +337 -0
- package/dist/lib/business/YkCharts/Pies.js.map +7 -0
- package/dist/lib/business/YkCharts/constants.d.ts +1 -0
- package/dist/lib/business/YkCharts/constants.js +71 -0
- package/dist/lib/business/YkCharts/constants.js.map +7 -0
- package/dist/lib/business/YkCharts/hooks.d.ts +4 -0
- package/dist/lib/business/YkCharts/hooks.js +62 -0
- package/dist/lib/business/YkCharts/hooks.js.map +7 -0
- package/dist/lib/business/YkCharts/index.d.ts +9 -0
- package/dist/lib/business/YkCharts/index.js +61 -0
- package/dist/lib/business/YkCharts/index.js.map +7 -0
- package/dist/lib/business/YkCharts/index.module.less +164 -0
- package/dist/lib/business/YkCharts/tooltip.less +92 -0
- package/dist/lib/business/YkCharts/transformData.js +40 -0
- package/dist/lib/business/YkCharts/transformData.js.map +7 -0
- package/dist/lib/business/YkCharts/typing.d.ts +74 -0
- package/dist/lib/business/YkCharts/typing.js +18 -0
- package/dist/lib/business/YkCharts/typing.js.map +7 -0
- package/dist/lib/business/YkCharts/utils.d.ts +4 -0
- package/dist/lib/business/YkCharts/utils.js +143 -0
- package/dist/lib/business/YkCharts/utils.js.map +7 -0
- package/dist/lib/business/YkCharts/variables.less +13 -0
- package/dist/lib/components/YKMarkdown/index.d.ts +11 -0
- package/dist/lib/components/YKMarkdown/index.js +188 -0
- package/dist/lib/components/YKMarkdown/index.js.map +7 -0
- package/dist/lib/components/YKMarkdown/index.module.less +83 -0
- package/dist/lib/components/YkDateRangePicker/YkDateRangePicker.mdx +3 -3
- package/dist/lib/creative/GlassSegmentedRadio/index.d.ts +1 -1
- package/dist/lib/creative/SkillsWriter/index.d.ts +3 -0
- package/dist/lib/creative/SkillsWriter/index.js +200 -0
- package/dist/lib/creative/SkillsWriter/index.js.map +7 -0
- package/dist/lib/creative/SkillsWriter/index.module.less +21 -0
- package/dist/lib/index.less +6 -1
- package/dist/lib/utils/ykStorybookDoc.d.ts +15 -0
- package/dist/lib/utils/ykStorybookDoc.js +23 -1
- package/dist/lib/utils/ykStorybookDoc.js.map +2 -2
- package/package.json +152 -143
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
|
|
21
|
+
// src/business/YkCharts/Bar.tsx
|
|
22
|
+
import { Empty, message } from "antd";
|
|
23
|
+
import classNames from "classnames";
|
|
24
|
+
import Decimal from "decimal.js";
|
|
25
|
+
import * as echarts from "echarts";
|
|
26
|
+
import { isEmpty } from "lodash";
|
|
27
|
+
import React, { memo, useEffect, useMemo, useRef } from "react";
|
|
28
|
+
import ReactDOMServer from "react-dom/server";
|
|
29
|
+
import { chartColors } from "./constants";
|
|
30
|
+
import styles from "./index.module.less";
|
|
31
|
+
import { formatNumber, formatValue, sqlFormat } from "./utils";
|
|
32
|
+
var MAX_SECTORS = 500;
|
|
33
|
+
var Bar = ({
|
|
34
|
+
count,
|
|
35
|
+
// 指标显示数量
|
|
36
|
+
metric,
|
|
37
|
+
// 指标
|
|
38
|
+
groupBys,
|
|
39
|
+
// 维度
|
|
40
|
+
tableData,
|
|
41
|
+
// 表格数据
|
|
42
|
+
baseData,
|
|
43
|
+
// 基础数据
|
|
44
|
+
columnConfigMap,
|
|
45
|
+
// 列配置
|
|
46
|
+
sqlFormatMap,
|
|
47
|
+
// 列配置(用于SQL可视化中的格式化处理,SQL中的格式化走了另一套逻辑)
|
|
48
|
+
height
|
|
49
|
+
}) => {
|
|
50
|
+
const { x = [], x_field, group_by } = tableData;
|
|
51
|
+
const chartContainerRef = useRef(null);
|
|
52
|
+
const chartInstanceRef = useRef(null);
|
|
53
|
+
const onlyOneMetric = useMemo(() => {
|
|
54
|
+
return metric.length === 1;
|
|
55
|
+
}, [metric]);
|
|
56
|
+
const seriesData = useMemo(() => {
|
|
57
|
+
if (Array.isArray(groupBys) && groupBys.some((g) => Array.isArray(g.selected) && g.selected.length === 0)) {
|
|
58
|
+
return [];
|
|
59
|
+
}
|
|
60
|
+
const validGroupBys = groupBys.filter((g) => Array.isArray(g.selected) && g.selected.length > 0);
|
|
61
|
+
const validGroupByKeys = validGroupBys.map((g) => g.key);
|
|
62
|
+
if (!baseData || baseData.length === 0) {
|
|
63
|
+
return [];
|
|
64
|
+
}
|
|
65
|
+
const filteredBaseData = baseData.filter((item) => {
|
|
66
|
+
return validGroupBys.every((g) => {
|
|
67
|
+
var _a;
|
|
68
|
+
const itemValue = String((_a = item[g.key]) != null ? _a : "");
|
|
69
|
+
return g.selected.includes(itemValue);
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
const dataIndexMap = /* @__PURE__ */ new Map();
|
|
73
|
+
const existingCombinations = /* @__PURE__ */ new Map();
|
|
74
|
+
const getName = (category, groupByObj) => {
|
|
75
|
+
if (group_by && group_by.length > 0) {
|
|
76
|
+
if (onlyOneMetric) {
|
|
77
|
+
return group_by.map((g) => groupByObj[g]).join(",");
|
|
78
|
+
}
|
|
79
|
+
return [category, ...group_by.map((g) => groupByObj[g])].join(",");
|
|
80
|
+
}
|
|
81
|
+
return category;
|
|
82
|
+
};
|
|
83
|
+
filteredBaseData.forEach((item) => {
|
|
84
|
+
const groupByValues = validGroupByKeys.map((key) => {
|
|
85
|
+
var _a;
|
|
86
|
+
return String((_a = item[key]) != null ? _a : "");
|
|
87
|
+
}).join("|");
|
|
88
|
+
metric.forEach((cat) => {
|
|
89
|
+
const key = `${item[x_field]}|${groupByValues}|${cat}`;
|
|
90
|
+
dataIndexMap.set(key, item);
|
|
91
|
+
const combinationKey = `${groupByValues}|${cat}`;
|
|
92
|
+
if (!existingCombinations.has(combinationKey)) {
|
|
93
|
+
const groupByObj = { category: cat };
|
|
94
|
+
validGroupByKeys.forEach((gKey) => {
|
|
95
|
+
groupByObj[gKey] = item[gKey];
|
|
96
|
+
});
|
|
97
|
+
const name = getName(cat, groupByObj);
|
|
98
|
+
existingCombinations.set(combinationKey, {
|
|
99
|
+
groupByValues,
|
|
100
|
+
category: cat,
|
|
101
|
+
groupByObj,
|
|
102
|
+
name
|
|
103
|
+
// 预先计算好的 name
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
const result = Array.from(existingCombinations.values()).map(({ groupByValues, category, name }) => {
|
|
109
|
+
const data = new Array(x.length);
|
|
110
|
+
for (let i = 0; i < x.length; i++) {
|
|
111
|
+
const item = x[i];
|
|
112
|
+
const key = `${item}|${groupByValues}|${category}`;
|
|
113
|
+
const itemData = dataIndexMap.get(key);
|
|
114
|
+
data[i] = itemData == null ? void 0 : itemData[category];
|
|
115
|
+
}
|
|
116
|
+
return {
|
|
117
|
+
name,
|
|
118
|
+
type: "bar",
|
|
119
|
+
barMaxWidth: 20,
|
|
120
|
+
stack: name.split(",")[0],
|
|
121
|
+
smooth: true,
|
|
122
|
+
showSymbol: false,
|
|
123
|
+
data,
|
|
124
|
+
dataSum: data.reduce((sum, val) => {
|
|
125
|
+
const num = typeof val === "number" ? val : 0;
|
|
126
|
+
return sum + (isNaN(num) ? 0 : num);
|
|
127
|
+
}, 0)
|
|
128
|
+
};
|
|
129
|
+
});
|
|
130
|
+
const sortedResult = result.sort((a, b) => {
|
|
131
|
+
const sumA = a.dataSum;
|
|
132
|
+
const sumB = b.dataSum;
|
|
133
|
+
return sumB - sumA;
|
|
134
|
+
});
|
|
135
|
+
return sortedResult;
|
|
136
|
+
}, [baseData, metric, groupBys, x, x_field, group_by, onlyOneMetric]);
|
|
137
|
+
const yAxisFormatter = useMemo(() => {
|
|
138
|
+
var _a, _b;
|
|
139
|
+
if (!isEmpty(sqlFormatMap) && metric.length > 0) {
|
|
140
|
+
const format = (_a = sqlFormatMap[metric[0]]) == null ? void 0 : _a.format;
|
|
141
|
+
if ((format == null ? void 0 : format.type) === "currency") {
|
|
142
|
+
return "number";
|
|
143
|
+
}
|
|
144
|
+
if ((format == null ? void 0 : format.type) === "percent") {
|
|
145
|
+
return "percent";
|
|
146
|
+
}
|
|
147
|
+
if ((format == null ? void 0 : format.decimals) > 0) {
|
|
148
|
+
return "decimal";
|
|
149
|
+
}
|
|
150
|
+
return "number";
|
|
151
|
+
}
|
|
152
|
+
if (metric.length === 1) {
|
|
153
|
+
return (_b = columnConfigMap[metric[0]]) == null ? void 0 : _b.format;
|
|
154
|
+
}
|
|
155
|
+
return null;
|
|
156
|
+
}, [metric, columnConfigMap, sqlFormatMap]);
|
|
157
|
+
const grid = {
|
|
158
|
+
top: 10,
|
|
159
|
+
left: 0,
|
|
160
|
+
right: 10,
|
|
161
|
+
bottom: 40,
|
|
162
|
+
containLabel: true
|
|
163
|
+
};
|
|
164
|
+
const legend = {
|
|
165
|
+
bottom: 0,
|
|
166
|
+
type: "scroll"
|
|
167
|
+
};
|
|
168
|
+
const xAxis = {
|
|
169
|
+
type: "category",
|
|
170
|
+
data: x,
|
|
171
|
+
axisLine: {
|
|
172
|
+
lineStyle: {
|
|
173
|
+
color: "#EBEEF4"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
axisLabel: {
|
|
177
|
+
color: "#9CA4B3",
|
|
178
|
+
fontSize: 12
|
|
179
|
+
},
|
|
180
|
+
axisTick: {
|
|
181
|
+
alignWithLabel: true
|
|
182
|
+
},
|
|
183
|
+
boundaryGap: true
|
|
184
|
+
};
|
|
185
|
+
const yAxis = {
|
|
186
|
+
type: "value",
|
|
187
|
+
splitNumber: 4,
|
|
188
|
+
// 设置Y轴坐标点数量
|
|
189
|
+
axisLine: {
|
|
190
|
+
show: true,
|
|
191
|
+
lineStyle: {
|
|
192
|
+
color: "#EBEEF4",
|
|
193
|
+
shadowOffsetY: -10,
|
|
194
|
+
shadowColor: "#EBEEF4"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
axisLabel: {
|
|
198
|
+
color: "#999999",
|
|
199
|
+
fontSize: 12,
|
|
200
|
+
formatter: (value) => {
|
|
201
|
+
if (yAxisFormatter === "percent") {
|
|
202
|
+
return new Decimal(value).mul(100) + "%";
|
|
203
|
+
}
|
|
204
|
+
if (yAxisFormatter === "decimal") {
|
|
205
|
+
return formatValue(value, yAxisFormatter);
|
|
206
|
+
}
|
|
207
|
+
const [result, unit] = formatNumber(value, true);
|
|
208
|
+
return result + unit;
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
splitLine: {
|
|
212
|
+
lineStyle: {
|
|
213
|
+
type: [2, 3],
|
|
214
|
+
// 虚线
|
|
215
|
+
color: "#E7E7E7"
|
|
216
|
+
// 背景线颜色
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
axisTick: {
|
|
220
|
+
show: true
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
const tooltipFormatter = (params) => {
|
|
224
|
+
var _a, _b;
|
|
225
|
+
const title = (_b = (_a = params[0]) == null ? void 0 : _a.axisValue) != null ? _b : "";
|
|
226
|
+
const tooltipDom = /* @__PURE__ */ React.createElement("div", { className: styles.tooltip }, /* @__PURE__ */ React.createElement("div", { className: styles.title }, /* @__PURE__ */ React.createElement("span", null, title), /* @__PURE__ */ React.createElement("span", { style: { float: "right", paddingRight: 10 } }, onlyOneMetric && metric.length === 1 ? " " + metric[0] : "")), /* @__PURE__ */ React.createElement("div", { className: styles.content }, params.map((m) => {
|
|
227
|
+
var _a2, _b2;
|
|
228
|
+
const metricName = onlyOneMetric && metric.length === 1 ? metric[0] : m.seriesName.split(",")[0];
|
|
229
|
+
const columnConfig = columnConfigMap[metricName];
|
|
230
|
+
const format = (_a2 = columnConfig == null ? void 0 : columnConfig.format) != null ? _a2 : "string";
|
|
231
|
+
let showValue = format === "currency" ? formatNumber(m.value, true) : formatValue(m.value, format);
|
|
232
|
+
if (!isEmpty(sqlFormatMap) && metric.length > 0) {
|
|
233
|
+
const format2 = (_b2 = sqlFormatMap[metricName]) == null ? void 0 : _b2.format;
|
|
234
|
+
showValue = sqlFormat(m.value, format2);
|
|
235
|
+
}
|
|
236
|
+
const showValueText = showValue === "" || showValue[0] === "" ? "-" : showValue;
|
|
237
|
+
return /* @__PURE__ */ React.createElement("div", { className: styles.item, key: m.seriesName }, /* @__PURE__ */ React.createElement("div", { className: classNames(styles.point, styles.pointBar), style: { background: m.color } }), /* @__PURE__ */ React.createElement("div", { className: styles.category }, m.seriesName), /* @__PURE__ */ React.createElement("div", { className: styles.value }, showValueText));
|
|
238
|
+
})));
|
|
239
|
+
return ReactDOMServer.renderToStaticMarkup(tooltipDom);
|
|
240
|
+
};
|
|
241
|
+
const tooltip = {
|
|
242
|
+
trigger: "axis",
|
|
243
|
+
padding: 0,
|
|
244
|
+
confine: true,
|
|
245
|
+
enterable: true,
|
|
246
|
+
axisPointer: {
|
|
247
|
+
type: "shadow"
|
|
248
|
+
},
|
|
249
|
+
formatter: tooltipFormatter
|
|
250
|
+
};
|
|
251
|
+
const chartOptions = useMemo(() => {
|
|
252
|
+
if (seriesData.length > MAX_SECTORS) {
|
|
253
|
+
message.warning(`数据量过大,仅绘制前 ${MAX_SECTORS} 条数据`);
|
|
254
|
+
}
|
|
255
|
+
const result = {
|
|
256
|
+
color: chartColors,
|
|
257
|
+
grid,
|
|
258
|
+
legend: __spreadProps(__spreadValues({}, legend), {
|
|
259
|
+
itemWidth: 10,
|
|
260
|
+
itemHeight: 10
|
|
261
|
+
}),
|
|
262
|
+
xAxis,
|
|
263
|
+
yAxis,
|
|
264
|
+
// 前端这里做个限制,防止数据量过大导致性能问题
|
|
265
|
+
series: seriesData.length > MAX_SECTORS ? seriesData.slice(0, MAX_SECTORS) : seriesData,
|
|
266
|
+
tooltip,
|
|
267
|
+
barGap: "0%"
|
|
268
|
+
};
|
|
269
|
+
return result;
|
|
270
|
+
}, [seriesData]);
|
|
271
|
+
useEffect(() => {
|
|
272
|
+
if (!chartContainerRef.current)
|
|
273
|
+
return;
|
|
274
|
+
let chart = chartInstanceRef.current;
|
|
275
|
+
if (!chart) {
|
|
276
|
+
chart = echarts.init(chartContainerRef.current);
|
|
277
|
+
chartInstanceRef.current = chart;
|
|
278
|
+
}
|
|
279
|
+
chart == null ? void 0 : chart.setOption(chartOptions, true);
|
|
280
|
+
return () => {
|
|
281
|
+
if (chartInstanceRef.current) {
|
|
282
|
+
chartInstanceRef.current.dispose();
|
|
283
|
+
chartInstanceRef.current = null;
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
}, [chartOptions]);
|
|
287
|
+
useEffect(() => {
|
|
288
|
+
const chartElement = chartContainerRef.current;
|
|
289
|
+
if (!chartElement)
|
|
290
|
+
return;
|
|
291
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
292
|
+
const chart = chartInstanceRef.current;
|
|
293
|
+
if (chart) {
|
|
294
|
+
chart.resize();
|
|
295
|
+
}
|
|
296
|
+
});
|
|
297
|
+
resizeObserver.observe(chartElement);
|
|
298
|
+
return () => {
|
|
299
|
+
resizeObserver.unobserve(chartElement);
|
|
300
|
+
resizeObserver.disconnect();
|
|
301
|
+
};
|
|
302
|
+
}, [seriesData]);
|
|
303
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, seriesData.length > 0 ? /* @__PURE__ */ React.createElement(
|
|
304
|
+
"div",
|
|
305
|
+
{
|
|
306
|
+
ref: chartContainerRef,
|
|
307
|
+
className: styles.echarts,
|
|
308
|
+
style: { width: "100%", height: height || "100%", minHeight: 220 }
|
|
309
|
+
}
|
|
310
|
+
) : /* @__PURE__ */ React.createElement(Empty, { className: styles.empty, description: "暂无数据", image: Empty.PRESENTED_IMAGE_SIMPLE }));
|
|
311
|
+
};
|
|
312
|
+
var Bar_default = memo(Bar);
|
|
313
|
+
export {
|
|
314
|
+
Bar_default as default
|
|
315
|
+
};
|
|
316
|
+
//# sourceMappingURL=Bar.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/business/YkCharts/Bar.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Empty, message } from 'antd';\nimport classNames from 'classnames';\nimport Decimal from 'decimal.js';\nimport * as echarts from 'echarts';\nimport { isEmpty } from 'lodash';\nimport React, { type FC, memo, useEffect, useMemo, useRef } from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport { chartColors } from './constants';\nimport styles from './index.module.less';\nimport type { ColumnConfig, GroupByItem, SqlMetaConfig, TableData } from './typing';\nimport { formatNumber, formatValue, sqlFormat } from './utils';\n\ntype RowItem = {\n [key: string]: number | string;\n};\n\ntype PageTypes = {\n count?: number;\n metric: string[];\n groupBys: GroupByItem[];\n tableData: TableData;\n baseData: RowItem[];\n columnConfigMap: { [key: string]: ColumnConfig };\n sqlFormatMap?: { [key: string]: SqlMetaConfig };\n height?: number;\n};\n\nconst MAX_SECTORS = 500;\n\nconst Bar: FC<PageTypes> = ({\n count, // 指标显示数量\n metric, // 指标\n groupBys, // 维度\n tableData, // 表格数据\n baseData, // 基础数据\n columnConfigMap, // 列配置\n sqlFormatMap, // 列配置(用于SQL可视化中的格式化处理,SQL中的格式化走了另一套逻辑)\n height,\n}) => {\n const { x = [], x_field, group_by } = tableData;\n const chartContainerRef = useRef<HTMLDivElement | null>(null);\n const chartInstanceRef = useRef<echarts.ECharts | null>(null);\n\n // 是否只有一个指标\n const onlyOneMetric = useMemo(() => {\n return metric.length === 1;\n }, [metric]);\n\n // 获取series数据\n const seriesData = useMemo(() => {\n if (Array.isArray(groupBys) && groupBys.some((g) => Array.isArray(g.selected) && g.selected.length === 0)) {\n return [];\n }\n // 提前计算 validGroupBys 和 validGroupByKeys\n const validGroupBys = groupBys.filter((g) => Array.isArray(g.selected) && g.selected.length > 0);\n const validGroupByKeys = validGroupBys.map((g) => g.key);\n // 如果没有 baseData,直接返回空数组\n if (!baseData || baseData.length === 0) {\n return [];\n }\n // 根据 groupBys 的 selected 过滤 baseData\n // 只保留符合所有 groupBy selected 条件的数据\n const filteredBaseData = baseData.filter((item) => {\n return validGroupBys.every((g) => {\n const itemValue = String(item[g.key] ?? '');\n return g.selected.includes(itemValue);\n });\n });\n // 建立 baseData 索引 Map,使用复合键 (x_field + validGroupByKeys + category) 作为 key\n // 格式: `${x_field}|${groupByKey1}|${groupByKey2}|...|${category}`\n const dataIndexMap = new Map<string, RowItem>();\n // 从 baseData 中提取实际存在的 groupBy 组合(而不是生成所有可能的组合)\n // 使用 Set 存储唯一的组合标识符,格式: `${groupByValue1}|${groupByValue2}|...|${metric}`\n const existingCombinations = new Map<\n string,\n {\n groupByValues: string;\n category: string;\n groupByObj: any;\n name: string;\n }\n >();\n\n // 预计算 name 的生成函数(提取到循环外,避免重复创建函数)\n const getName = (category: string, groupByObj: any) => {\n if (group_by && group_by.length > 0) {\n if (onlyOneMetric) {\n return group_by.map((g) => groupByObj[g]).join(',');\n }\n return [category, ...group_by.map((g) => groupByObj[g])].join(',');\n }\n return category;\n };\n\n filteredBaseData.forEach((item) => {\n const groupByValues = validGroupByKeys.map((key) => String(item[key] ?? '')).join('|');\n // 为每个 metric 建立索引和记录组合\n metric.forEach((cat) => {\n const key = `${item[x_field]}|${groupByValues}|${cat}`;\n dataIndexMap.set(key, item);\n // 记录实际存在的组合(每个 metric + groupBy 组合只记录一次)\n const combinationKey = `${groupByValues}|${cat}`;\n if (!existingCombinations.has(combinationKey)) {\n // 构建 groupBy 对象,用于后续生成 name\n const groupByObj: any = { category: cat };\n validGroupByKeys.forEach((gKey) => {\n groupByObj[gKey] = item[gKey];\n });\n // 预先计算 name,避免在 map 时重复计算\n const name = getName(cat, groupByObj);\n existingCombinations.set(combinationKey, {\n groupByValues,\n category: cat,\n groupByObj,\n name, // 预先计算好的 name\n });\n }\n });\n });\n\n // 直接从实际存在的组合生成 series,避免生成数百万个无效组合\n const result = Array.from(existingCombinations.values()).map(({ groupByValues, category, name }) => {\n // 预分配数组,避免动态扩容\n const data = new Array(x.length);\n for (let i = 0; i < x.length; i++) {\n const item = x[i];\n const key = `${item}|${groupByValues}|${category}`;\n const itemData = dataIndexMap.get(key);\n data[i] = itemData?.[category];\n }\n return {\n name,\n type: 'bar',\n barMaxWidth: 20,\n stack: (name as string).split(',')[0],\n smooth: true,\n showSymbol: false,\n data,\n dataSum: data.reduce((sum, val) => {\n const num = typeof val === 'number' ? val : 0;\n return sum + (isNaN(num) ? 0 : num);\n }, 0),\n };\n });\n\n // 按照 data 中数值合计从大到小排序\n const sortedResult = result.sort((a, b) => {\n const sumA = a.dataSum;\n const sumB = b.dataSum;\n return sumB - sumA; // 从大到小排序\n });\n return sortedResult;\n }, [baseData, metric, groupBys, x, x_field, group_by, onlyOneMetric]);\n\n // 获取y轴的格式化方式\n const yAxisFormatter = useMemo(() => {\n // SQL可视化中的特殊格式化处理\n if (!isEmpty(sqlFormatMap) && metric.length > 0) {\n const format = sqlFormatMap[metric[0]]?.format;\n if (format?.type === 'currency') {\n return 'number';\n }\n if (format?.type === 'percent') {\n return 'percent';\n }\n if (format?.decimals > 0) {\n return 'decimal';\n }\n return 'number';\n }\n if (metric.length === 1) {\n return columnConfigMap[metric[0]]?.format;\n }\n return null;\n }, [metric, columnConfigMap, sqlFormatMap]);\n\n const grid = {\n top: 10,\n left: 0,\n right: 10,\n bottom: 40,\n containLabel: true,\n };\n const legend = {\n bottom: 0,\n type: 'scroll',\n };\n const xAxis = {\n type: 'category',\n data: x,\n axisLine: {\n lineStyle: {\n color: '#EBEEF4',\n },\n },\n axisLabel: {\n color: '#9CA4B3',\n fontSize: 12,\n },\n axisTick: {\n alignWithLabel: true,\n },\n boundaryGap: true,\n };\n const yAxis = {\n type: 'value',\n splitNumber: 4, // 设置Y轴坐标点数量\n axisLine: {\n show: true,\n lineStyle: {\n color: '#EBEEF4',\n shadowOffsetY: -10,\n shadowColor: '#EBEEF4',\n },\n },\n axisLabel: {\n color: '#999999',\n fontSize: 12,\n formatter: (value: number) => {\n if (yAxisFormatter === 'percent') {\n return new Decimal(value).mul(100) + '%';\n }\n if (yAxisFormatter === 'decimal') {\n return formatValue(value, yAxisFormatter);\n }\n const [result, unit] = formatNumber(value, true);\n return result + unit;\n },\n },\n splitLine: {\n lineStyle: {\n type: [2, 3], // 虚线\n color: '#E7E7E7', // 背景线颜色\n },\n },\n axisTick: {\n show: true,\n },\n };\n const tooltipFormatter = (params: any) => {\n const title = params[0]?.axisValue ?? '';\n const tooltipDom = (\n <div className={styles.tooltip}>\n <div className={styles.title}>\n <span>{title}</span>\n <span style={{ float: 'right', paddingRight: 10 }}>\n {onlyOneMetric && metric.length === 1 ? ' ' + metric[0] : ''}\n </span>\n </div>\n <div className={styles.content}>\n {params.map((m: any) => {\n const metricName = onlyOneMetric && metric.length === 1 ? metric[0] : m.seriesName.split(',')[0];\n const columnConfig = columnConfigMap[metricName];\n const format = columnConfig?.format ?? 'string'; // 使用可选链和默认值\n let showValue = format === 'currency' ? formatNumber(m.value, true) : formatValue(m.value, format);\n // SQL可视化中的特殊格式化处理\n if (!isEmpty(sqlFormatMap) && metric.length > 0) {\n const format = sqlFormatMap[metricName]?.format;\n showValue = sqlFormat(m.value, format);\n }\n const showValueText = showValue === '' || showValue[0] === '' ? '-' : showValue;\n return (\n <div className={styles.item} key={m.seriesName}>\n <div className={classNames(styles.point, styles.pointBar)} style={{ background: m.color }}></div>\n <div className={styles.category}>{m.seriesName}</div>\n <div className={styles.value}>{showValueText}</div>\n </div>\n );\n })}\n </div>\n </div>\n );\n return ReactDOMServer.renderToStaticMarkup(tooltipDom);\n };\n\n const tooltip = {\n trigger: 'axis',\n padding: 0,\n confine: true,\n enterable: true,\n axisPointer: {\n type: 'shadow',\n },\n formatter: tooltipFormatter,\n };\n\n // 图表配置\n const chartOptions = useMemo(() => {\n if (seriesData.length > MAX_SECTORS) {\n message.warning(`数据量过大,仅绘制前 ${MAX_SECTORS} 条数据`);\n }\n const result = {\n color: chartColors,\n grid,\n legend: {\n ...legend,\n itemWidth: 10,\n itemHeight: 10,\n },\n xAxis,\n yAxis,\n // 前端这里做个限制,防止数据量过大导致性能问题\n series: seriesData.length > MAX_SECTORS ? seriesData.slice(0, MAX_SECTORS) : seriesData,\n tooltip,\n barGap: '0%',\n };\n return result;\n }, [seriesData]);\n\n // 初始化图表\n useEffect(() => {\n if (!chartContainerRef.current) return;\n let chart = chartInstanceRef.current;\n if (!chart) {\n chart = echarts.init(chartContainerRef.current);\n chartInstanceRef.current = chart;\n }\n chart?.setOption(chartOptions, true);\n return () => {\n if (chartInstanceRef.current) {\n chartInstanceRef.current.dispose();\n chartInstanceRef.current = null;\n }\n };\n }, [chartOptions]);\n\n // 监听图表容器大小变化\n useEffect(() => {\n const chartElement = chartContainerRef.current;\n if (!chartElement) return;\n const resizeObserver = new ResizeObserver(() => {\n const chart = chartInstanceRef.current;\n if (chart) {\n chart.resize();\n }\n });\n resizeObserver.observe(chartElement);\n return () => {\n resizeObserver.unobserve(chartElement);\n resizeObserver.disconnect();\n };\n }, [seriesData]);\n\n return (\n <>\n {seriesData.length > 0 ? (\n <div\n ref={chartContainerRef}\n className={styles.echarts}\n style={{ width: '100%', height: height || '100%', minHeight: 220 }}\n ></div>\n ) : (\n <Empty className={styles.empty} description='暂无数据' image={Empty.PRESENTED_IMAGE_SIMPLE} />\n )}\n </>\n );\n};\n\nexport default memo(Bar);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["_a", "_b", "format"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 用户分析-柱状图
|
|
3
|
+
*/
|
|
4
|
+
import { type FC } from 'react';
|
|
5
|
+
import type { ColumnConfig, GroupByItem, TableData } from './typing';
|
|
6
|
+
type RowItem = {
|
|
7
|
+
[key: string]: number | string;
|
|
8
|
+
};
|
|
9
|
+
type PageTypes = {
|
|
10
|
+
count?: number;
|
|
11
|
+
metric: string[];
|
|
12
|
+
groupBys: GroupByItem[];
|
|
13
|
+
tableData: TableData;
|
|
14
|
+
baseData: RowItem[];
|
|
15
|
+
columnConfigMap: {
|
|
16
|
+
[key: string]: ColumnConfig;
|
|
17
|
+
};
|
|
18
|
+
height?: number;
|
|
19
|
+
};
|
|
20
|
+
declare const BarProperty: FC<PageTypes>;
|
|
21
|
+
export default BarProperty;
|