修改chart文件夹
This commit is contained in:
parent
e7904b667e
commit
b92971730f
@ -1,6 +1,6 @@
|
|||||||
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||||
import { deepCopy } from '@/data-visualization/utils/utils'
|
import { deepCopy } from '@/data-visualization/utils/utils'
|
||||||
import { formatterItem } from '@/data-visualization/chart/components/js/formatter'
|
import { formatterItem, isEnLocal } from '@/data-visualization/chart/components/js/formatter'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
export const DEFAULT_COLOR_CASE: DeepPartial<ChartAttr> = {
|
export const DEFAULT_COLOR_CASE: DeepPartial<ChartAttr> = {
|
||||||
|
|||||||
@ -1,673 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __extends = (this && this.__extends) || (function () {
|
|
||||||
var extendStatics = function (d, b) {
|
|
||||||
extendStatics = Object.setPrototypeOf ||
|
|
||||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
||||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
||||||
return extendStatics(d, b);
|
|
||||||
};
|
|
||||||
return function (d, b) {
|
|
||||||
extendStatics(d, b);
|
|
||||||
function __() { this.constructor = d; }
|
|
||||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
var __assign = (this && this.__assign) || function () {
|
|
||||||
__assign = Object.assign || function(t) {
|
|
||||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
||||||
s = arguments[i];
|
|
||||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
||||||
t[p] = s[p];
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
};
|
|
||||||
return __assign.apply(this, arguments);
|
|
||||||
};
|
|
||||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
||||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
||||||
return new (P || (P = Promise))(function (resolve, reject) {
|
|
||||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
||||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
||||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
||||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
||||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
||||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
||||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
||||||
function step(op) {
|
|
||||||
if (f) throw new TypeError("Generator is already executing.");
|
|
||||||
while (_) try {
|
|
||||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
||||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
||||||
switch (op[0]) {
|
|
||||||
case 0: case 1: t = op; break;
|
|
||||||
case 4: _.label++; return { value: op[1], done: false };
|
|
||||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
||||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
||||||
default:
|
|
||||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
||||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
||||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
||||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
||||||
if (t[2]) _.ops.pop();
|
|
||||||
_.trys.pop(); continue;
|
|
||||||
}
|
|
||||||
op = body.call(thisArg, _);
|
|
||||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
||||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
||||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
||||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
||||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
||||||
r[k] = a[j];
|
|
||||||
return r;
|
|
||||||
};
|
|
||||||
exports.__esModule = true;
|
|
||||||
exports.StockLine = void 0;
|
|
||||||
var g2plot_1 = require("@/views/chart/components/js/panel/types/impl/g2plot");
|
|
||||||
var util_1 = require("@/views/chart/components/js/util");
|
|
||||||
var common_1 = require("@/views/chart/components/js/panel/charts/line/common");
|
|
||||||
var useI18n_1 = require("@/hooks/web/useI18n");
|
|
||||||
var formatter_1 = require("@/views/chart/components/js/formatter");
|
|
||||||
var t = useI18n_1.useI18n().t;
|
|
||||||
var DEFAULT_DATA = [];
|
|
||||||
/**
|
|
||||||
* K线图
|
|
||||||
*/
|
|
||||||
var StockLine = /** @class */ (function (_super) {
|
|
||||||
__extends(StockLine, _super);
|
|
||||||
function StockLine(name) {
|
|
||||||
if (name === void 0) { name = 'stock-line'; }
|
|
||||||
var _this = _super.call(this, name, DEFAULT_DATA) || this;
|
|
||||||
_this.properties = [
|
|
||||||
'background-overall-component',
|
|
||||||
'border-style',
|
|
||||||
'basic-style-selector',
|
|
||||||
'legend-selector',
|
|
||||||
'x-axis-selector',
|
|
||||||
'y-axis-selector',
|
|
||||||
'title-selector',
|
|
||||||
'tooltip-selector',
|
|
||||||
'function-cfg',
|
|
||||||
'jump-set',
|
|
||||||
'linkage'
|
|
||||||
];
|
|
||||||
_this.propertyInner = __assign(__assign({}, common_1.LINE_EDITOR_PROPERTY_INNER), { 'function-cfg': ['emptyDataStrategy'], 'y-axis-selector': [
|
|
||||||
'name',
|
|
||||||
'color',
|
|
||||||
'fontSize',
|
|
||||||
'position',
|
|
||||||
'axisLabel',
|
|
||||||
'axisLine',
|
|
||||||
'splitLine',
|
|
||||||
'axisLabelFormatter'
|
|
||||||
], 'legend-selector': ['fontSize', 'color', 'show'] });
|
|
||||||
_this.axis = ['xAxis', 'yAxis', 'filter', 'extLabel', 'extTooltip'];
|
|
||||||
_this.axisConfig = {
|
|
||||||
xAxis: {
|
|
||||||
name: t('common.component.date') + " / " + t('chart.dimension'),
|
|
||||||
limit: 1,
|
|
||||||
type: 'd'
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: t('chart.k_line_yaxis_tip') + " / " + t('chart.quota'),
|
|
||||||
limit: 4,
|
|
||||||
type: 'q'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 计算收盘价平均值
|
|
||||||
* @param data
|
|
||||||
* @param dayCount
|
|
||||||
* @param chart
|
|
||||||
*/
|
|
||||||
_this.calculateMovingAverage = function (data, dayCount, chart) {
|
|
||||||
var _a, _b;
|
|
||||||
var xAxis = chart.xAxis;
|
|
||||||
var yAxis = chart.yAxis;
|
|
||||||
// 时间字段
|
|
||||||
var xAxisgisbiName = xAxis[0].gisbiName;
|
|
||||||
// 收盘价字段
|
|
||||||
var yAxisgisbiName = yAxis[1].gisbiName;
|
|
||||||
var result = [];
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
if (i < dayCount) {
|
|
||||||
result.push((_a = {},
|
|
||||||
_a[xAxisgisbiName] = data[i][xAxisgisbiName],
|
|
||||||
_a.value = null,
|
|
||||||
_a));
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var sum = data
|
|
||||||
.slice(i - dayCount + 1, i + 1)
|
|
||||||
.reduce(function (sum, item) { return sum + item[yAxisgisbiName]; }, 0);
|
|
||||||
result.push((_b = {},
|
|
||||||
_b[xAxisgisbiName] = data[i][xAxisgisbiName],
|
|
||||||
_b.value = parseFloat((sum / dayCount).toFixed(3)),
|
|
||||||
_b));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 获取数据集合中对象属性值的最大最小值
|
|
||||||
* @param data
|
|
||||||
*/
|
|
||||||
_this.calculateMinMax = function (data) {
|
|
||||||
return data.reduce(function (acc, current) {
|
|
||||||
// 获取 current 对象的所有属性值
|
|
||||||
var values = Object.values(current);
|
|
||||||
// 过滤出数字值
|
|
||||||
var numericValues = values.filter(function (value) { return typeof value === 'number'; });
|
|
||||||
// 找到 current 对象的数字属性值中的最大值和最小值
|
|
||||||
// 如果存在数字值，则计算当前对象的最大值和最小值
|
|
||||||
if (numericValues.length > 0) {
|
|
||||||
var currentMax = Math.max.apply(Math, numericValues);
|
|
||||||
var currentMin = Math.min.apply(Math, numericValues);
|
|
||||||
// 更新全局最大值和最小值
|
|
||||||
acc.maxValue = Math.max(acc.maxValue, currentMax);
|
|
||||||
acc.minValue = Math.min(acc.minValue, currentMin);
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, { maxValue: Number.NEGATIVE_INFINITY, minValue: Number.POSITIVE_INFINITY });
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 注册图表事件
|
|
||||||
* @param data
|
|
||||||
* @param plot
|
|
||||||
* @param averagesLineData
|
|
||||||
*/
|
|
||||||
_this.registerEvent = function (data, plot, averagesLineData) {
|
|
||||||
// 监听图例点击事件，显示隐藏
|
|
||||||
var risingVisible = true;
|
|
||||||
plot.on('legend-item:click', function (evt) {
|
|
||||||
var value = evt.target.get('delegateObject').item.value;
|
|
||||||
if (value === 'k') {
|
|
||||||
risingVisible = !risingVisible;
|
|
||||||
plot.chart.geometries.forEach(function (geom) {
|
|
||||||
if (geom.type === 'schema') {
|
|
||||||
geom.changeVisible(risingVisible);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var lines = plot.chart.geometries.filter(function (item) { return item.type === 'line'; });
|
|
||||||
var points = plot.chart.geometries.filter(function (item) { return item.type === 'point'; });
|
|
||||||
var lineIndex = 0;
|
|
||||||
for (var _i = 0, _a = averagesLineData.keys(); _i < _a.length; _i++) {
|
|
||||||
var key = _a[_i];
|
|
||||||
lineIndex++;
|
|
||||||
if (key === value) {
|
|
||||||
lines[lineIndex - 1].changeVisible(!lines[lineIndex - 1].visible);
|
|
||||||
points[lineIndex - 1].changeVisible(!points[lineIndex - 1].visible);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 监听图表渲染事件
|
|
||||||
plot.on('afterrender', function (e) {
|
|
||||||
var _a, _b;
|
|
||||||
var first = false;
|
|
||||||
if (plot.chart.options.slider.start === 0.5 && plot.chart.options.slider.end === 1) {
|
|
||||||
first = true;
|
|
||||||
}
|
|
||||||
if ((_b = (_a = e.view) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.scales) {
|
|
||||||
var startIndex = Math.floor(0.5 * data.length);
|
|
||||||
var endIndex = Math.ceil(1 * data.length);
|
|
||||||
var filteredData = data.slice(startIndex, endIndex);
|
|
||||||
var _c = _this.calculateMinMax(first ? filteredData : e.view.filteredData), maxValue_1 = _c.maxValue, minValue_1 = _c.minValue;
|
|
||||||
var a_1 = e.view.options.scales;
|
|
||||||
Object.keys(a_1).forEach(function (item) {
|
|
||||||
if (a_1[item].max) {
|
|
||||||
a_1[item].max = maxValue_1;
|
|
||||||
}
|
|
||||||
if (a_1[item].min) {
|
|
||||||
a_1[item].min = minValue_1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 监听图例组点击事件，设置缩放
|
|
||||||
plot.on('legend-item-group:click', function (e) {
|
|
||||||
var _a, _b;
|
|
||||||
if ((_b = (_a = e.view) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.scales) {
|
|
||||||
var _c = _this.calculateMinMax(e.view.filteredData), maxValue_2 = _c.maxValue, minValue_2 = _c.minValue;
|
|
||||||
var a_2 = e.view.options.scales;
|
|
||||||
Object.keys(a_2).forEach(function (item) {
|
|
||||||
if (a_2[item].max) {
|
|
||||||
a_2[item].max = maxValue_2;
|
|
||||||
}
|
|
||||||
if (a_2[item].min) {
|
|
||||||
a_2[item].min = minValue_2;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 监听滑块事件，设置缩放
|
|
||||||
plot.on('slider:valuechanged', function (e) {
|
|
||||||
var start = e.gEvent.currentTarget.cfg.component.cfg.start;
|
|
||||||
var end = e.gEvent.currentTarget.cfg.component.cfg.end;
|
|
||||||
plot.chart.options.slider.start = start;
|
|
||||||
plot.chart.options.slider.end = end;
|
|
||||||
var startIndex = Math.floor(start * data.length);
|
|
||||||
var endIndex = Math.ceil(end * data.length);
|
|
||||||
var filteredData = data.slice(startIndex, endIndex);
|
|
||||||
var _a = _this.calculateMinMax(filteredData), maxValue = _a.maxValue, minValue = _a.minValue;
|
|
||||||
var a = e.view.options.scales;
|
|
||||||
Object.keys(a).forEach(function (item) {
|
|
||||||
if (a[item].max) {
|
|
||||||
a[item].max = maxValue;
|
|
||||||
}
|
|
||||||
if (a[item].min) {
|
|
||||||
a[item].min = minValue;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
StockLine.prototype.drawChart = function (drawOptions) {
|
|
||||||
var _a, _b, _c, _d, _e, _f;
|
|
||||||
return __awaiter(this, void 0, Promise, function () {
|
|
||||||
var chart, action, container, xAxis, yAxis, basicStyle, colors, alpha, data, xAxisgisbiName, averages, legendItems, averagesLineData, averageLines, index, start, end, startIndex, endIndex, filteredData, _g, maxValue, minValue, _i, _h, key, axis, dateFormat, dateSplit, option, MixClass, plot;
|
|
||||||
var _j;
|
|
||||||
var _this = this;
|
|
||||||
return __generator(this, function (_k) {
|
|
||||||
switch (_k.label) {
|
|
||||||
case 0:
|
|
||||||
chart = drawOptions.chart, action = drawOptions.action, container = drawOptions.container;
|
|
||||||
if (!((_b = (_a = chart.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) {
|
|
||||||
return [2 /*return*/];
|
|
||||||
}
|
|
||||||
xAxis = chart.xAxis;
|
|
||||||
yAxis = chart.yAxis;
|
|
||||||
if (yAxis.length != 4) {
|
|
||||||
return [2 /*return*/];
|
|
||||||
}
|
|
||||||
basicStyle = util_1.parseJson(chart.customAttr).basicStyle;
|
|
||||||
colors = [];
|
|
||||||
alpha = basicStyle.alpha;
|
|
||||||
basicStyle.colors.forEach(function (ele) {
|
|
||||||
colors.push(util_1.hexColorToRGBA(ele, alpha));
|
|
||||||
});
|
|
||||||
data = util_1.parseJson((_c = chart.data) === null || _c === void 0 ? void 0 : _c.tableRow);
|
|
||||||
xAxisgisbiName = xAxis[0].gisbiName;
|
|
||||||
averages = [5, 10, 20, 60, 120, 180];
|
|
||||||
legendItems = [
|
|
||||||
{
|
|
||||||
name: '日K',
|
|
||||||
value: 'k',
|
|
||||||
marker: {
|
|
||||||
symbol: function (x, y, r) {
|
|
||||||
var width = r * 1;
|
|
||||||
var height = r;
|
|
||||||
return [
|
|
||||||
// 矩形框
|
|
||||||
['M', x - width - 1 / 2, y - height / 2],
|
|
||||||
['L', x + width + 1 / 2, y - height / 2],
|
|
||||||
['L', x + width + 1 / 2, y + height / 2],
|
|
||||||
['L', x - width - 1 / 2, y + height / 2],
|
|
||||||
['Z'],
|
|
||||||
// 中线
|
|
||||||
['M', x, y + 10 / 2],
|
|
||||||
['L', x, y - 10 / 2]
|
|
||||||
];
|
|
||||||
},
|
|
||||||
style: { fill: 'red', stroke: 'red', lineWidth: 2 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
averagesLineData = new Map();
|
|
||||||
averages.forEach(function (item) {
|
|
||||||
averagesLineData.set('ma' + item, _this.calculateMovingAverage(data, item, chart));
|
|
||||||
});
|
|
||||||
// 将均线数据设置到主数据中
|
|
||||||
data.forEach(function (item) {
|
|
||||||
var _a;
|
|
||||||
var date = item[xAxisgisbiName];
|
|
||||||
for (var _i = 0, averagesLineData_1 = averagesLineData; _i < averagesLineData_1.length; _i++) {
|
|
||||||
var _b = averagesLineData_1[_i], key = _b[0], value = _b[1];
|
|
||||||
item[key] = (_a = value.find(function (m) { return m[xAxisgisbiName] === date; })) === null || _a === void 0 ? void 0 : _a.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
averageLines = [];
|
|
||||||
index = 0;
|
|
||||||
start = 0.5;
|
|
||||||
end = 1;
|
|
||||||
startIndex = Math.floor(start * data.length);
|
|
||||||
endIndex = Math.ceil(end * data.length);
|
|
||||||
filteredData = data.slice(startIndex, endIndex);
|
|
||||||
_g = this.calculateMinMax(filteredData), maxValue = _g.maxValue, minValue = _g.minValue;
|
|
||||||
for (_i = 0, _h = averagesLineData.keys(); _i < _h.length; _i++) {
|
|
||||||
key = _h[_i];
|
|
||||||
index++;
|
|
||||||
averageLines.push({
|
|
||||||
type: 'line',
|
|
||||||
top: true,
|
|
||||||
options: {
|
|
||||||
smooth: false,
|
|
||||||
xField: xAxisgisbiName,
|
|
||||||
yField: key,
|
|
||||||
color: colors[index - 1],
|
|
||||||
xAxis: null,
|
|
||||||
yAxis: {
|
|
||||||
label: false,
|
|
||||||
min: minValue,
|
|
||||||
max: maxValue,
|
|
||||||
grid: null,
|
|
||||||
line: null
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
lineWidth: 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
legendItems.push({
|
|
||||||
name: key.toUpperCase(),
|
|
||||||
value: key,
|
|
||||||
marker: { symbol: 'hyphen', style: { stroke: colors[index - 1], lineWidth: 2 } }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
axis = (_d = chart.xAxis) !== null && _d !== void 0 ? _d : [];
|
|
||||||
dateSplit = ((_e = axis[0]) === null || _e === void 0 ? void 0 : _e.datePattern) === 'date_split' ? '/' : '-';
|
|
||||||
switch ((_f = axis[0]) === null || _f === void 0 ? void 0 : _f.dateStyle) {
|
|
||||||
case 'y':
|
|
||||||
dateFormat = 'YYYY';
|
|
||||||
break;
|
|
||||||
case 'y_M':
|
|
||||||
dateFormat = 'YYYY' + dateSplit + 'MM';
|
|
||||||
break;
|
|
||||||
case 'y_M_d':
|
|
||||||
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD';
|
|
||||||
break;
|
|
||||||
// case 'H_m_s':
|
|
||||||
// dateFormat = 'HH:mm:ss'
|
|
||||||
// break
|
|
||||||
case 'y_M_d_H':
|
|
||||||
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH';
|
|
||||||
break;
|
|
||||||
case 'y_M_d_H_m':
|
|
||||||
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm';
|
|
||||||
break;
|
|
||||||
case 'y_M_d_H_m_s':
|
|
||||||
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm:ss';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
dateFormat = 'YYYY-MM-dd HH:mm:ss';
|
|
||||||
}
|
|
||||||
option = this.setupOptions(chart, {
|
|
||||||
data: data,
|
|
||||||
slider: {
|
|
||||||
start: 0.5,
|
|
||||||
end: 1,
|
|
||||||
textStyle: {
|
|
||||||
fontFamily: chart.fontFamily
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plots: __spreadArrays([
|
|
||||||
{
|
|
||||||
type: 'stock',
|
|
||||||
top: true,
|
|
||||||
options: {
|
|
||||||
meta: (_j = {},
|
|
||||||
_j[xAxisgisbiName] = {
|
|
||||||
mask: dateFormat
|
|
||||||
},
|
|
||||||
_j),
|
|
||||||
stockStyle: {
|
|
||||||
stroke: 'black',
|
|
||||||
lineWidth: 0.5
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
label: {},
|
|
||||||
position: 'left',
|
|
||||||
min: minValue,
|
|
||||||
max: maxValue
|
|
||||||
},
|
|
||||||
xField: xAxisgisbiName,
|
|
||||||
yField: [
|
|
||||||
yAxis[0].gisbiName,
|
|
||||||
yAxis[1].gisbiName,
|
|
||||||
yAxis[2].gisbiName,
|
|
||||||
yAxis[3].gisbiName
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
position: 'top',
|
|
||||||
custom: true,
|
|
||||||
items: legendItems
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
], averageLines)
|
|
||||||
});
|
|
||||||
return [4 /*yield*/, Promise.resolve().then(function () { return require('@antv/g2plot/esm/plots/mix'); })];
|
|
||||||
case 1:
|
|
||||||
MixClass = (_k.sent()).Mix;
|
|
||||||
plot = new MixClass(container, option);
|
|
||||||
this.registerEvent(data, plot, averagesLineData);
|
|
||||||
plot.on('schema:click', function (evt) {
|
|
||||||
var _a;
|
|
||||||
var selectSchema = evt.data.data[xAxisgisbiName];
|
|
||||||
var paramData = util_1.parseJson((_a = chart.data) === null || _a === void 0 ? void 0 : _a.data);
|
|
||||||
var selectData = paramData.filter(function (item) { return item.field === selectSchema; });
|
|
||||||
var quotaList = [];
|
|
||||||
selectData.forEach(function (item) {
|
|
||||||
quotaList.push(__assign(__assign({}, item.quotaList[0]), { value: item.value }));
|
|
||||||
});
|
|
||||||
if (selectData.length) {
|
|
||||||
var param = {
|
|
||||||
x: evt.x,
|
|
||||||
y: evt.y,
|
|
||||||
data: {
|
|
||||||
data: __assign(__assign({}, evt.data.data), { value: quotaList[0].value, name: selectSchema, dimensionList: selectData[0].dimensionList, quotaList: quotaList })
|
|
||||||
}
|
|
||||||
};
|
|
||||||
action(param);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return [2 /*return*/, plot];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
StockLine.prototype.configBasicStyle = function (chart, options) {
|
|
||||||
// size
|
|
||||||
var customAttr = util_1.parseJson(chart.customAttr);
|
|
||||||
var s = JSON.parse(JSON.stringify(customAttr.basicStyle));
|
|
||||||
var smooth = s.lineSmooth;
|
|
||||||
var point = {
|
|
||||||
size: s.lineSymbolSize,
|
|
||||||
shape: s.lineSymbol
|
|
||||||
};
|
|
||||||
var lineStyle = {
|
|
||||||
lineWidth: s.lineWidth
|
|
||||||
};
|
|
||||||
var plots = [];
|
|
||||||
options.plots.forEach(function (item) {
|
|
||||||
if (item.type === 'stock') {
|
|
||||||
plots.push(__assign({}, item));
|
|
||||||
}
|
|
||||||
if (item.type === 'line') {
|
|
||||||
plots.push(__assign(__assign({}, item), { options: __assign(__assign({}, item.options), { smooth: smooth, point: point, lineStyle: lineStyle }) }));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return __assign(__assign({}, options), { plots: plots });
|
|
||||||
};
|
|
||||||
StockLine.prototype.configTooltip = function (chart, options) {
|
|
||||||
var tooltipAttr = util_1.parseJson(chart.customAttr).tooltip;
|
|
||||||
var newPlots = [];
|
|
||||||
var linePlotList = options.plots.filter(function (item) { return item.type === 'line'; });
|
|
||||||
linePlotList.forEach(function (item) {
|
|
||||||
newPlots.push(item);
|
|
||||||
});
|
|
||||||
var stockPlot = options.plots.filter(function (item) { return item.type === 'stock'; })[0];
|
|
||||||
if (!tooltipAttr.show) {
|
|
||||||
var stockOption_1 = __assign(__assign({}, stockPlot.options), { tooltip: {
|
|
||||||
showContent: false
|
|
||||||
} });
|
|
||||||
newPlots.push(__assign(__assign({}, stockPlot), { options: stockOption_1 }));
|
|
||||||
return __assign(__assign({}, options), { plots: newPlots });
|
|
||||||
}
|
|
||||||
var showFiled = chart.data.fields;
|
|
||||||
var customTooltipItems = function (originalItems) {
|
|
||||||
var _a;
|
|
||||||
var formattedItems = originalItems.map(function (item) {
|
|
||||||
var fieldObj = showFiled.find(function (q) { return q.gisbiName === item.name; });
|
|
||||||
var displayName = (fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.chartShowName) || (fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.name) || item.name;
|
|
||||||
var formattedName = displayName.startsWith('ma') ? displayName.toUpperCase() : displayName;
|
|
||||||
tooltipAttr.tooltipFormatter.decimalCount = 3;
|
|
||||||
var formattedValue = formatter_1.valueFormatter(item.value, tooltipAttr.tooltipFormatter);
|
|
||||||
return __assign(__assign({}, item), { name: formattedName, value: formattedValue, color: item.color });
|
|
||||||
});
|
|
||||||
var hasKLine = formattedItems.some(function (item) { return !item.name.startsWith('MA'); });
|
|
||||||
var kLines = formattedItems.filter(function (item) { return !item.name.startsWith('MA'); });
|
|
||||||
return hasKLine
|
|
||||||
? __spreadArrays([
|
|
||||||
{ name: '日K', value: '', marker: true, color: (_a = kLines[0]) === null || _a === void 0 ? void 0 : _a.color }
|
|
||||||
], kLines, formattedItems.filter(function (item) { return item.name.startsWith('MA'); })) : formattedItems;
|
|
||||||
};
|
|
||||||
var formatTooltipItem = function (item) {
|
|
||||||
var size = item.name.startsWith('MA') || !item.value ? 10 : 5;
|
|
||||||
var markerMarginRight = item.name.startsWith('MA') || !item.value ? 5 : 9;
|
|
||||||
var markerMarginLeft = item.name.startsWith('MA') || !item.value ? 0 : 2;
|
|
||||||
return "\n <li style=\"display: flex; align-items: center; margin-bottom: 10px;\">\n <div>\n <span\n style=\"\n background-color: " + item.color + ";\n width: " + size + "px;\n height: " + size + "px;\n border-radius: 50%;\n display: inline-block;\n margin-right: " + markerMarginRight + "px;\n margin-left: " + markerMarginLeft + "px;\n \"></span>\n </div>\n <div style=\"display: flex; justify-content: space-between; width: 100%;\">\n <span style=\"margin-right: 15px;\">" + item.name + "</span>\n <span>" + (item.name.startsWith('MA') && item.value === '0' ? '-' : item.value) + "</span>\n </div>\n </li>\n ";
|
|
||||||
};
|
|
||||||
var generateCustomTooltipContent = function (title, items) {
|
|
||||||
return "\n <div style=\"padding: 10px 0;\">\n <div style=\"margin-bottom: 10px;\">" + title + "</div>\n <ul style=\"list-style: none; padding: 0;\">\n " + items.map(formatTooltipItem).join('') + "\n </ul>\n </div>\n ";
|
|
||||||
};
|
|
||||||
var stockOption = __assign(__assign({}, stockPlot.options), { tooltip: {
|
|
||||||
showMarkers: true,
|
|
||||||
showCrosshairs: true,
|
|
||||||
showNil: true,
|
|
||||||
crosshairs: {
|
|
||||||
follow: true,
|
|
||||||
text: function (axisType, value, data) {
|
|
||||||
if (axisType === 'y') {
|
|
||||||
return { content: value ? value.toFixed(0) : value };
|
|
||||||
}
|
|
||||||
return { content: data[0].title, position: 'end' };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showContent: true,
|
|
||||||
customItems: customTooltipItems,
|
|
||||||
customContent: generateCustomTooltipContent
|
|
||||||
} });
|
|
||||||
newPlots.push(__assign(__assign({}, stockPlot), { options: stockOption }));
|
|
||||||
return __assign(__assign({}, options), { plots: newPlots });
|
|
||||||
};
|
|
||||||
StockLine.prototype.configXAxis = function (chart, options) {
|
|
||||||
var xAxisOptions = _super.prototype.configXAxis.call(this, chart, options);
|
|
||||||
if (!xAxisOptions) {
|
|
||||||
return options;
|
|
||||||
}
|
|
||||||
var newPlots = [];
|
|
||||||
var linePlotList = options.plots.filter(function (item) { return item.type === 'line'; });
|
|
||||||
var stockPlot = options.plots.filter(function (item) { return item.type === 'stock'; })[0];
|
|
||||||
var newStockPlot = __assign(__assign({}, stockPlot), { options: __assign(__assign({}, stockPlot.options), { xAxis: xAxisOptions['xAxis']
|
|
||||||
? __assign(__assign({}, stockPlot.options['xAxis']), xAxisOptions['xAxis']) : {
|
|
||||||
label: false,
|
|
||||||
line: null
|
|
||||||
} }) });
|
|
||||||
newPlots.push(newStockPlot);
|
|
||||||
linePlotList.forEach(function (item) {
|
|
||||||
newPlots.push(item);
|
|
||||||
});
|
|
||||||
return __assign(__assign({}, options), { plots: newPlots });
|
|
||||||
};
|
|
||||||
StockLine.prototype.configYAxis = function (chart, options) {
|
|
||||||
var yAxisOptions = _super.prototype.configYAxis.call(this, chart, options);
|
|
||||||
if (!yAxisOptions) {
|
|
||||||
return options;
|
|
||||||
}
|
|
||||||
var yAxis = util_1.parseJson(chart.customStyle).yAxis;
|
|
||||||
var newPlots = [];
|
|
||||||
var linePlotList = options.plots.filter(function (item) { return item.type === 'line'; });
|
|
||||||
var stockPlot = options.plots.filter(function (item) { return item.type === 'stock'; })[0];
|
|
||||||
var label = false;
|
|
||||||
if (yAxisOptions['yAxis'].label) {
|
|
||||||
label = __assign(__assign({}, yAxisOptions['yAxis'].label), { formatter: function (value) {
|
|
||||||
return formatter_1.valueFormatter(value, yAxis.axisLabelFormatter);
|
|
||||||
} });
|
|
||||||
}
|
|
||||||
var newStockPlot = __assign(__assign({}, stockPlot), { options: __assign(__assign({}, stockPlot.options), { yAxis: label
|
|
||||||
? __assign(__assign(__assign({}, stockPlot.options['yAxis']), yAxisOptions['yAxis']), { label: label }) : __assign(__assign({}, yAxisOptions['yAxis']), { label: label, grid: null, line: null }) }) });
|
|
||||||
newPlots.push(newStockPlot);
|
|
||||||
linePlotList.forEach(function (item) {
|
|
||||||
newPlots.push(item);
|
|
||||||
});
|
|
||||||
return __assign(__assign({}, options), { plots: newPlots });
|
|
||||||
};
|
|
||||||
StockLine.prototype.customConfigEmptyDataStrategy = function (chart, options) {
|
|
||||||
var data = options.data;
|
|
||||||
if (!(data === null || data === void 0 ? void 0 : data.length)) {
|
|
||||||
return options;
|
|
||||||
}
|
|
||||||
var strategy = util_1.parseJson(chart.senior).functionCfg.emptyDataStrategy;
|
|
||||||
if (strategy === 'ignoreData') {
|
|
||||||
var _loop_1 = function (i) {
|
|
||||||
var item = data[i];
|
|
||||||
Object.keys(item).forEach(function (key) {
|
|
||||||
if (key.startsWith('f_') && item[key] === null) {
|
|
||||||
data.splice(i, 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
for (var i = data.length - 1; i >= 0; i--) {
|
|
||||||
_loop_1(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var updateValues = function (strategy, data) {
|
|
||||||
data.forEach(function (obj) {
|
|
||||||
Object.keys(obj).forEach(function (key) {
|
|
||||||
if (key.startsWith('f_') && obj[key] === null) {
|
|
||||||
obj[key] = strategy === 'breakLine' ? null : 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
if (strategy === 'breakLine' || strategy === 'setZero') {
|
|
||||||
updateValues(strategy, data);
|
|
||||||
}
|
|
||||||
return options;
|
|
||||||
};
|
|
||||||
StockLine.prototype.configLegend = function (chart, options) {
|
|
||||||
var legend = {};
|
|
||||||
var customStyle;
|
|
||||||
var stockPlot = options.plots.filter(function (item) { return item.type === 'stock'; })[0];
|
|
||||||
if (chart.customStyle) {
|
|
||||||
customStyle = util_1.parseJson(chart.customStyle);
|
|
||||||
// legend
|
|
||||||
if (customStyle.legend) {
|
|
||||||
var l = JSON.parse(JSON.stringify(customStyle.legend));
|
|
||||||
if (l.show) {
|
|
||||||
legend = __assign(__assign({}, stockPlot.options.legend), { itemName: {
|
|
||||||
style: {
|
|
||||||
fill: l.color,
|
|
||||||
fontSize: l.fontSize
|
|
||||||
}
|
|
||||||
} });
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
legend = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var newPlots = [];
|
|
||||||
var stockOption = __assign(__assign({}, stockPlot.options), { legend: legend });
|
|
||||||
var linePlotList = options.plots.filter(function (item) { return item.type === 'line'; });
|
|
||||||
linePlotList.forEach(function (item) {
|
|
||||||
newPlots.push(item);
|
|
||||||
});
|
|
||||||
newPlots.push(__assign(__assign({}, stockPlot), { options: stockOption }));
|
|
||||||
return __assign(__assign({}, options), { plots: newPlots });
|
|
||||||
};
|
|
||||||
StockLine.prototype.setupOptions = function (chart, options) {
|
|
||||||
return util_1.flow(this.configTheme, this.configBasicStyle, this.configXAxis, this.configYAxis, this.configTooltip, this.configLegend, this.customConfigEmptyDataStrategy)(chart, options);
|
|
||||||
};
|
|
||||||
return StockLine;
|
|
||||||
}(g2plot_1.G2PlotChartView));
|
|
||||||
exports.StockLine = StockLine;
|
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
export const MAP_EDITOR_PROPERTY: EditorProperty[] = [
|
export const MAP_EDITOR_PROPERTY: EditorProperty[] = [
|
||||||
'background-overall-component',
|
'background-overall-component',
|
||||||
'border-style',
|
'border-style',
|
||||||
|
|||||||
@ -1,391 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __extends = (this && this.__extends) || (function () {
|
|
||||||
var extendStatics = function (d, b) {
|
|
||||||
extendStatics = Object.setPrototypeOf ||
|
|
||||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
||||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
||||||
return extendStatics(d, b);
|
|
||||||
};
|
|
||||||
return function (d, b) {
|
|
||||||
extendStatics(d, b);
|
|
||||||
function __() { this.constructor = d; }
|
|
||||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
var __assign = (this && this.__assign) || function () {
|
|
||||||
__assign = Object.assign || function(t) {
|
|
||||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
||||||
s = arguments[i];
|
|
||||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
||||||
t[p] = s[p];
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
};
|
|
||||||
return __assign.apply(this, arguments);
|
|
||||||
};
|
|
||||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
||||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
||||||
return new (P || (P = Promise))(function (resolve, reject) {
|
|
||||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
||||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
||||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
||||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
||||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
||||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
||||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
||||||
function step(op) {
|
|
||||||
if (f) throw new TypeError("Generator is already executing.");
|
|
||||||
while (_) try {
|
|
||||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
||||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
||||||
switch (op[0]) {
|
|
||||||
case 0: case 1: t = op; break;
|
|
||||||
case 4: _.label++; return { value: op[1], done: false };
|
|
||||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
||||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
||||||
default:
|
|
||||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
||||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
||||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
||||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
||||||
if (t[2]) _.ops.pop();
|
|
||||||
_.trys.pop(); continue;
|
|
||||||
}
|
|
||||||
op = body.call(thisArg, _);
|
|
||||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
||||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
exports.__esModule = true;
|
|
||||||
exports.FlowMap = void 0;
|
|
||||||
var useI18n_1 = require("@/hooks/web/useI18n");
|
|
||||||
var l7_1 = require("@/views/chart/components/js/panel/types/impl/l7");
|
|
||||||
var common_1 = require("@/views/chart/components/js/panel/charts/map/common");
|
|
||||||
var util_1 = require("@/views/chart/components/js/util");
|
|
||||||
var utils_1 = require("@/utils/utils");
|
|
||||||
var l7_layers_1 = require("@antv/l7-layers");
|
|
||||||
var l7_layers_2 = require("@antv/l7-layers");
|
|
||||||
var common_antv_1 = require("@/views/chart/components/js/panel/common/common_antv");
|
|
||||||
var t = useI18n_1.useI18n().t;
|
|
||||||
/**
|
|
||||||
* 流向地图
|
|
||||||
*/
|
|
||||||
var FlowMap = /** @class */ (function (_super) {
|
|
||||||
__extends(FlowMap, _super);
|
|
||||||
function FlowMap() {
|
|
||||||
var _this = _super.call(this, 'flow-map', []) || this;
|
|
||||||
_this.properties = [
|
|
||||||
'background-overall-component',
|
|
||||||
'border-style',
|
|
||||||
'basic-style-selector',
|
|
||||||
'title-selector',
|
|
||||||
'flow-map-line-selector',
|
|
||||||
'flow-map-point-selector',
|
|
||||||
'bubble-animate'
|
|
||||||
];
|
|
||||||
_this.propertyInner = __assign(__assign({}, common_1.MAP_EDITOR_PROPERTY_INNER), { 'basic-style-selector': [
|
|
||||||
'mapBaseStyle',
|
|
||||||
'mapLineStyle',
|
|
||||||
'zoom',
|
|
||||||
'showLabel',
|
|
||||||
'autoFit',
|
|
||||||
'mapCenter',
|
|
||||||
'zoomLevel'
|
|
||||||
] });
|
|
||||||
_this.axis = ['xAxis', 'xAxisExt', 'filter', 'flowMapStartName', 'flowMapEndName', 'yAxis'];
|
|
||||||
_this.axisConfig = {
|
|
||||||
xAxis: {
|
|
||||||
name: t('chart.start_coordinates') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 2
|
|
||||||
},
|
|
||||||
xAxisExt: {
|
|
||||||
name: t('chart.end_coordinates') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 2
|
|
||||||
},
|
|
||||||
flowMapStartName: {
|
|
||||||
name: t('chart.start_name') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 1,
|
|
||||||
allowEmpty: true
|
|
||||||
},
|
|
||||||
flowMapEndName: {
|
|
||||||
name: t('chart.end_name') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 1,
|
|
||||||
allowEmpty: true
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: t('chart.flow_map_line_width') + " / " + t('chart.quota'),
|
|
||||||
type: 'q',
|
|
||||||
limit: 1,
|
|
||||||
tooltip: t('chart.flow_map_line_width_tip'),
|
|
||||||
allowEmpty: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
_this.lineConfig = function (chart, xAxis, xAxisExt, basicStyle, misc) {
|
|
||||||
var _a;
|
|
||||||
var flowLineStyle = {
|
|
||||||
type: misc.flowMapConfig.lineConfig.mapLineType,
|
|
||||||
size: misc.flowMapConfig.lineConfig.mapLineType === 'line'
|
|
||||||
? misc.flowMapConfig.lineConfig.mapLineWidth / 2
|
|
||||||
: misc.flowMapConfig.lineConfig.mapLineWidth,
|
|
||||||
animate: misc.flowMapConfig.lineConfig.mapLineAnimate,
|
|
||||||
animateDuration: misc.flowMapConfig.lineConfig.mapLineAnimateDuration,
|
|
||||||
gradient: misc.flowMapConfig.lineConfig.mapLineGradient,
|
|
||||||
sourceColor: misc.flowMapConfig.lineConfig.mapLineSourceColor,
|
|
||||||
targetColor: misc.flowMapConfig.lineConfig.mapLineTargetColor,
|
|
||||||
alpha: misc.flowMapConfig.lineConfig.alpha
|
|
||||||
};
|
|
||||||
var colorsWithAlpha = basicStyle.colors.map(function (color) {
|
|
||||||
return util_1.hexColorToRGBA(color, misc.flowMapConfig.lineConfig.alpha);
|
|
||||||
});
|
|
||||||
flowLineStyle.sourceColor = colorsWithAlpha[0];
|
|
||||||
flowLineStyle.targetColor = colorsWithAlpha[1];
|
|
||||||
// 线条粗细
|
|
||||||
var lineWidthField = null;
|
|
||||||
var yAxis = utils_1.deepCopy(chart.yAxis);
|
|
||||||
if (yAxis.length > 0) {
|
|
||||||
lineWidthField = yAxis[0].gisbiName;
|
|
||||||
}
|
|
||||||
// 线条颜色
|
|
||||||
var lineColorField = null;
|
|
||||||
var yAxisExt = utils_1.deepCopy(chart.yAxisExt);
|
|
||||||
if (yAxisExt.length > 0) {
|
|
||||||
lineColorField = yAxisExt[0].gisbiName;
|
|
||||||
}
|
|
||||||
var asteriskField = '*';
|
|
||||||
var data = [];
|
|
||||||
(_a = chart.data) === null || _a === void 0 ? void 0 : _a.tableRow.forEach(function (item) {
|
|
||||||
var newKey = 'f_record';
|
|
||||||
var newObj = Object.keys(item).reduce(function (acc, key) {
|
|
||||||
if (key === asteriskField) {
|
|
||||||
acc[newKey] = item[key];
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
acc[key] = item[key];
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
data.push(newObj);
|
|
||||||
});
|
|
||||||
var config = new l7_layers_1.LineLayer({
|
|
||||||
name: 'line',
|
|
||||||
blend: 'normal',
|
|
||||||
autoFit: !(basicStyle.autoFit === false)
|
|
||||||
})
|
|
||||||
.source(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: xAxis[0].gisbiName,
|
|
||||||
y: xAxis[1].gisbiName,
|
|
||||||
x1: xAxisExt[0].gisbiName,
|
|
||||||
y1: xAxisExt[1].gisbiName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.size(flowLineStyle.size)
|
|
||||||
.shape(flowLineStyle.type)
|
|
||||||
.animate({
|
|
||||||
enable: flowLineStyle.animate,
|
|
||||||
duration: flowLineStyle.animateDuration,
|
|
||||||
interval: 1,
|
|
||||||
trailLength: 1
|
|
||||||
});
|
|
||||||
if (lineWidthField) {
|
|
||||||
config.size(lineWidthField === asteriskField ? 'f_record' : lineWidthField, [1, 10]);
|
|
||||||
}
|
|
||||||
if (lineColorField) {
|
|
||||||
config.style({
|
|
||||||
opacity: flowLineStyle.alpha / 100
|
|
||||||
});
|
|
||||||
config.color(lineColorField);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (flowLineStyle.gradient) {
|
|
||||||
config.style({
|
|
||||||
sourceColor: flowLineStyle.sourceColor,
|
|
||||||
targetColor: flowLineStyle.targetColor,
|
|
||||||
opacity: flowLineStyle.alpha / 100
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
config
|
|
||||||
.style({
|
|
||||||
opacity: flowLineStyle.alpha / 100
|
|
||||||
})
|
|
||||||
.color(flowLineStyle.sourceColor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return config;
|
|
||||||
};
|
|
||||||
_this.startAndEndNameConfig = function (chart, xAxis, xAxisExt, misc, configList) {
|
|
||||||
var _a, _b;
|
|
||||||
var flowMapStartName = utils_1.deepCopy(chart.flowMapStartName);
|
|
||||||
var flowMapEndName = utils_1.deepCopy(chart.flowMapEndName);
|
|
||||||
var textColor = misc.flowMapConfig.pointConfig.text.color;
|
|
||||||
var textFontSize = misc.flowMapConfig.pointConfig.text.fontSize;
|
|
||||||
var has = new Map();
|
|
||||||
if ((flowMapStartName === null || flowMapStartName === void 0 ? void 0 : flowMapStartName.length) > 0) {
|
|
||||||
var startTextLayer = new l7_layers_2.PointLayer()
|
|
||||||
.source((_a = chart.data) === null || _a === void 0 ? void 0 : _a.tableRow, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: xAxis[0].gisbiName,
|
|
||||||
y: xAxis[1].gisbiName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.shape(flowMapStartName[0].gisbiName, function (args) {
|
|
||||||
if (has.has('from-' + args)) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
has.set('from-' + args, args);
|
|
||||||
return args;
|
|
||||||
})
|
|
||||||
.size(textFontSize)
|
|
||||||
.color(textColor)
|
|
||||||
.style({
|
|
||||||
textAnchor: 'top',
|
|
||||||
textOffset: [0, 0],
|
|
||||||
spacing: 2,
|
|
||||||
padding: [1, 1],
|
|
||||||
textAllowOverlap: true,
|
|
||||||
fontFamily: chart.fontFamily ? chart.fontFamily : undefined
|
|
||||||
});
|
|
||||||
configList.push(startTextLayer);
|
|
||||||
}
|
|
||||||
if ((flowMapEndName === null || flowMapEndName === void 0 ? void 0 : flowMapEndName.length) > 0) {
|
|
||||||
var endTextLayer = new l7_layers_2.PointLayer()
|
|
||||||
.source((_b = chart.data) === null || _b === void 0 ? void 0 : _b.tableRow, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: xAxisExt[0].gisbiName,
|
|
||||||
y: xAxisExt[1].gisbiName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.shape(flowMapEndName[0].gisbiName, function (args) {
|
|
||||||
if (has.has('from-' + args) || has.has('to-' + args)) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
has.set('to-' + args, args);
|
|
||||||
return args;
|
|
||||||
})
|
|
||||||
.size(textFontSize)
|
|
||||||
.color(textColor)
|
|
||||||
.style({
|
|
||||||
textAnchor: 'top',
|
|
||||||
textOffset: [0, 0],
|
|
||||||
spacing: 2,
|
|
||||||
padding: [1, 1],
|
|
||||||
textAllowOverlap: true,
|
|
||||||
fontFamily: chart.fontFamily ? chart.fontFamily : undefined
|
|
||||||
});
|
|
||||||
configList.push(endTextLayer);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
_this.pointConfig = function (chart, xAxis, xAxisExt, misc, configList) {
|
|
||||||
var _a, _b;
|
|
||||||
var color = misc.flowMapConfig.pointConfig.point.color;
|
|
||||||
var size = misc.flowMapConfig.pointConfig.point.size;
|
|
||||||
var bubbleCfg = util_1.parseJson(chart.senior).bubbleCfg;
|
|
||||||
var fromDefaultPointLayer = new l7_layers_2.PointLayer({ zIndex: -1 })
|
|
||||||
.source((_a = chart.data) === null || _a === void 0 ? void 0 : _a.tableRow, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: xAxis[0].gisbiName,
|
|
||||||
y: xAxis[1].gisbiName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.shape('circle')
|
|
||||||
.size(size)
|
|
||||||
.color(color)
|
|
||||||
.style({
|
|
||||||
blur: 0.6
|
|
||||||
});
|
|
||||||
var toDefaultPointLayer = new l7_layers_2.PointLayer({ zIndex: -1 })
|
|
||||||
.source((_b = chart.data) === null || _b === void 0 ? void 0 : _b.tableRow, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: xAxisExt[0].gisbiName,
|
|
||||||
y: xAxisExt[1].gisbiName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.shape('circle')
|
|
||||||
.size(size)
|
|
||||||
.color(color)
|
|
||||||
.style({
|
|
||||||
blur: 0.6
|
|
||||||
});
|
|
||||||
if (bubbleCfg && bubbleCfg.enable) {
|
|
||||||
var animate = {
|
|
||||||
enable: true,
|
|
||||||
speed: bubbleCfg.speed,
|
|
||||||
rings: bubbleCfg.rings
|
|
||||||
};
|
|
||||||
fromDefaultPointLayer.size(size * 2);
|
|
||||||
fromDefaultPointLayer.animate(animate);
|
|
||||||
toDefaultPointLayer.size(size * 2);
|
|
||||||
toDefaultPointLayer.animate(animate);
|
|
||||||
}
|
|
||||||
configList.push(fromDefaultPointLayer);
|
|
||||||
configList.push(toDefaultPointLayer);
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
FlowMap.prototype.drawChart = function (drawOption) {
|
|
||||||
var _a;
|
|
||||||
return __awaiter(this, void 0, void 0, function () {
|
|
||||||
var chart, container, containerDom, rect, xAxis, xAxisExt, _b, basicStyle, misc, mapKey, mapStyle, chartObj, scene, center, configList, i;
|
|
||||||
return __generator(this, function (_c) {
|
|
||||||
switch (_c.label) {
|
|
||||||
case 0:
|
|
||||||
chart = drawOption.chart, container = drawOption.container;
|
|
||||||
containerDom = document.getElementById(container);
|
|
||||||
rect = containerDom === null || containerDom === void 0 ? void 0 : containerDom.getBoundingClientRect();
|
|
||||||
if ((rect === null || rect === void 0 ? void 0 : rect.height) <= 0) {
|
|
||||||
return [2 /*return*/, new l7_1.L7Wrapper((_a = drawOption.chartObj) === null || _a === void 0 ? void 0 : _a.getScene(), [])];
|
|
||||||
}
|
|
||||||
xAxis = utils_1.deepCopy(chart.xAxis);
|
|
||||||
xAxisExt = utils_1.deepCopy(chart.xAxisExt);
|
|
||||||
_b = utils_1.deepCopy(util_1.parseJson(chart.customAttr)), basicStyle = _b.basicStyle, misc = _b.misc;
|
|
||||||
return [4 /*yield*/, this.getMapKey()];
|
|
||||||
case 1:
|
|
||||||
mapKey = _c.sent();
|
|
||||||
mapStyle = common_antv_1.getMapStyle(mapKey, basicStyle);
|
|
||||||
chartObj = drawOption.chartObj;
|
|
||||||
scene = chartObj === null || chartObj === void 0 ? void 0 : chartObj.getScene();
|
|
||||||
center = common_antv_1.getMapCenter(basicStyle);
|
|
||||||
return [4 /*yield*/, common_antv_1.getMapScene(chart, scene, container, mapKey, basicStyle, misc, mapStyle, center)];
|
|
||||||
case 2:
|
|
||||||
scene = _c.sent();
|
|
||||||
this.configZoomButton(chart, scene, mapKey);
|
|
||||||
if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.length) < 2 || (xAxisExt === null || xAxisExt === void 0 ? void 0 : xAxisExt.length) < 2) {
|
|
||||||
return [2 /*return*/, new l7_1.L7Wrapper(scene, undefined)];
|
|
||||||
}
|
|
||||||
configList = [];
|
|
||||||
configList.push(this.lineConfig(chart, xAxis, xAxisExt, basicStyle, misc));
|
|
||||||
this.startAndEndNameConfig(chart, xAxis, xAxisExt, misc, configList);
|
|
||||||
this.pointConfig(chart, xAxis, xAxisExt, misc, configList);
|
|
||||||
configList[0].once('inited', function () {
|
|
||||||
common_antv_1.mapRendered(container);
|
|
||||||
});
|
|
||||||
for (i = 0; i < configList.length; i++) {
|
|
||||||
configList[i].on('inited', function () {
|
|
||||||
common_antv_1.qqMapRendered(scene);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return [2 /*return*/, new l7_1.L7Wrapper(scene, configList)];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
FlowMap.prototype.setupDefaultOptions = function (chart) {
|
|
||||||
chart.customAttr.misc.flowMapConfig.lineConfig.mapLineAnimate = true;
|
|
||||||
return chart;
|
|
||||||
};
|
|
||||||
return FlowMap;
|
|
||||||
}(l7_1.L7ChartView));
|
|
||||||
exports.FlowMap = FlowMap;
|
|
||||||
@ -1,632 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __extends = (this && this.__extends) || (function () {
|
|
||||||
var extendStatics = function (d, b) {
|
|
||||||
extendStatics = Object.setPrototypeOf ||
|
|
||||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
||||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
||||||
return extendStatics(d, b);
|
|
||||||
};
|
|
||||||
return function (d, b) {
|
|
||||||
extendStatics(d, b);
|
|
||||||
function __() { this.constructor = d; }
|
|
||||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
var __assign = (this && this.__assign) || function () {
|
|
||||||
__assign = Object.assign || function(t) {
|
|
||||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
||||||
s = arguments[i];
|
|
||||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
||||||
t[p] = s[p];
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
};
|
|
||||||
return __assign.apply(this, arguments);
|
|
||||||
};
|
|
||||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
||||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
||||||
return new (P || (P = Promise))(function (resolve, reject) {
|
|
||||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
||||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
||||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
||||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
||||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
||||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
||||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
||||||
function step(op) {
|
|
||||||
if (f) throw new TypeError("Generator is already executing.");
|
|
||||||
while (_) try {
|
|
||||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
||||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
||||||
switch (op[0]) {
|
|
||||||
case 0: case 1: t = op; break;
|
|
||||||
case 4: _.label++; return { value: op[1], done: false };
|
|
||||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
||||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
||||||
default:
|
|
||||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
||||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
||||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
||||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
||||||
if (t[2]) _.ops.pop();
|
|
||||||
_.trys.pop(); continue;
|
|
||||||
}
|
|
||||||
op = body.call(thisArg, _);
|
|
||||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
||||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
||||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
||||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
||||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
||||||
r[k] = a[j];
|
|
||||||
return r;
|
|
||||||
};
|
|
||||||
exports.__esModule = true;
|
|
||||||
exports.SymbolicMap = void 0;
|
|
||||||
var useI18n_1 = require("@/hooks/web/useI18n");
|
|
||||||
var l7_1 = require("@/views/chart/components/js/panel/types/impl/l7");
|
|
||||||
var common_1 = require("@/views/chart/components/js/panel/charts/map/common");
|
|
||||||
var util_1 = require("@/views/chart/components/js/util");
|
|
||||||
var utils_1 = require("@/utils/utils");
|
|
||||||
var l7_layers_1 = require("@antv/l7-layers");
|
|
||||||
var l7_2 = require("@antv/l7");
|
|
||||||
var common_antv_1 = require("@/views/chart/components/js/panel/common/common_antv");
|
|
||||||
var tooltip_carousel_1 = require("@/views/chart/components/js/panel/charts/map/tooltip-carousel");
|
|
||||||
var lodash_es_1 = require("lodash-es");
|
|
||||||
var t = useI18n_1.useI18n().t;
|
|
||||||
/**
|
|
||||||
* 符号地图
|
|
||||||
*/
|
|
||||||
var SymbolicMap = /** @class */ (function (_super) {
|
|
||||||
__extends(SymbolicMap, _super);
|
|
||||||
function SymbolicMap() {
|
|
||||||
var _this = _super.call(this, 'symbolic-map', []) || this;
|
|
||||||
_this.properties = [
|
|
||||||
'background-overall-component',
|
|
||||||
'border-style',
|
|
||||||
'basic-style-selector',
|
|
||||||
'symbolic-style-selector',
|
|
||||||
'title-selector',
|
|
||||||
'label-selector',
|
|
||||||
'tooltip-selector',
|
|
||||||
'threshold'
|
|
||||||
];
|
|
||||||
_this.propertyInner = __assign(__assign({}, common_1.MAP_EDITOR_PROPERTY_INNER), { 'basic-style-selector': [
|
|
||||||
'colors',
|
|
||||||
'alpha',
|
|
||||||
'mapBaseStyle',
|
|
||||||
'zoom',
|
|
||||||
'showLabel',
|
|
||||||
'autoFit',
|
|
||||||
'mapCenter',
|
|
||||||
'zoomLevel'
|
|
||||||
], 'symbolic-style-selector': ['symbolicMapStyle'], 'label-selector': ['color', 'fontSize', 'showFields', 'customContent'], 'tooltip-selector': [
|
|
||||||
'color',
|
|
||||||
'fontSize',
|
|
||||||
'showFields',
|
|
||||||
'customContent',
|
|
||||||
'show',
|
|
||||||
'backgroundColor',
|
|
||||||
'carousel'
|
|
||||||
], threshold: ['lineThreshold'] });
|
|
||||||
_this.axis = ['xAxis', 'xAxisExt', 'extBubble', 'filter', 'extLabel', 'extTooltip'];
|
|
||||||
_this.axisConfig = {
|
|
||||||
xAxis: {
|
|
||||||
name: t('chart.symbolic_map_coordinates') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 2
|
|
||||||
},
|
|
||||||
xAxisExt: {
|
|
||||||
name: t('chart.color') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 1,
|
|
||||||
allowEmpty: true
|
|
||||||
},
|
|
||||||
extBubble: {
|
|
||||||
name: t('chart.bubble_size') + " / " + t('chart.quota'),
|
|
||||||
type: 'q',
|
|
||||||
limit: 1,
|
|
||||||
tooltip: t('chart.symbolic_map_bubble_size_tip'),
|
|
||||||
allowEmpty: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 构建符号图层
|
|
||||||
* @param chart
|
|
||||||
*/
|
|
||||||
_this.buildSymbolicLayer = function (chart, scene) { return __awaiter(_this, void 0, void 0, function () {
|
|
||||||
var basicStyle, xAxis, xAxisExt, extBubble, _a, mapSymbolOpacity, mapSymbolSize, mapSymbol, mapSymbolStrokeWidth, colors, alpha, mapSymbolSizeMin, mapSymbolSizeMax, colorsWithAlpha, colorIndex, colorAssignments, sizeKey, threshold, conditions, extBubbleIds, baseColor, baseColorList, data, pointLayer, parser, index, color, fillRegex, svgStr, doc, svgEle, parser, color, fillRegex, svgStr, doc, svgEle;
|
|
||||||
var _b, _c, _d;
|
|
||||||
return __generator(this, function (_e) {
|
|
||||||
switch (_e.label) {
|
|
||||||
case 0:
|
|
||||||
basicStyle = util_1.parseJson(chart.customAttr).basicStyle;
|
|
||||||
xAxis = utils_1.deepCopy(chart.xAxis);
|
|
||||||
xAxisExt = utils_1.deepCopy(chart.xAxisExt);
|
|
||||||
extBubble = utils_1.deepCopy(chart.extBubble);
|
|
||||||
_a = utils_1.deepCopy(basicStyle), mapSymbolOpacity = _a.mapSymbolOpacity, mapSymbolSize = _a.mapSymbolSize, mapSymbol = _a.mapSymbol, mapSymbolStrokeWidth = _a.mapSymbolStrokeWidth, colors = _a.colors, alpha = _a.alpha, mapSymbolSizeMin = _a.mapSymbolSizeMin, mapSymbolSizeMax = _a.mapSymbolSizeMax;
|
|
||||||
colorsWithAlpha = colors.map(function (color) { return util_1.hexColorToRGBA(color, alpha); });
|
|
||||||
colorIndex = 0;
|
|
||||||
colorAssignments = new Map();
|
|
||||||
sizeKey = extBubble.length > 0 ? extBubble[0].gisbiName : '';
|
|
||||||
threshold = util_1.parseJson(chart.senior).threshold;
|
|
||||||
conditions = [];
|
|
||||||
if (threshold.enable) {
|
|
||||||
conditions = (_b = threshold.lineThreshold) !== null && _b !== void 0 ? _b : [];
|
|
||||||
}
|
|
||||||
extBubbleIds = chart.extBubble.map(function (i) { return i.id; });
|
|
||||||
conditions = lodash_es_1.filter(conditions, function (c) { return extBubbleIds.includes(c.fieldId); });
|
|
||||||
baseColor = colorsWithAlpha[0];
|
|
||||||
baseColorList = [];
|
|
||||||
data = ((_c = chart.data) === null || _c === void 0 ? void 0 : _c.tableRow) ? chart.data.tableRow.map(function (item, index) {
|
|
||||||
var _a, _b;
|
|
||||||
item['_index'] = '_index' + index;
|
|
||||||
// 颜色标识
|
|
||||||
var identifier = item[(_a = xAxisExt[0]) === null || _a === void 0 ? void 0 : _a.gisbiName];
|
|
||||||
// 检查该标识是否已有颜色分配，如果没有则分配
|
|
||||||
var color = colorAssignments.get(identifier);
|
|
||||||
if (!color) {
|
|
||||||
color = colorsWithAlpha[colorIndex++ % colorsWithAlpha.length];
|
|
||||||
// 记录分配的颜色
|
|
||||||
colorAssignments.set(identifier, color);
|
|
||||||
}
|
|
||||||
baseColorList[index] = color;
|
|
||||||
if (conditions.length > 0) {
|
|
||||||
for (var i = 0; i < conditions.length; i++) {
|
|
||||||
var c = conditions[i];
|
|
||||||
var value = item[c.field.gisbiName];
|
|
||||||
for (var _i = 0, _c = c.conditions; _i < _c.length; _i++) {
|
|
||||||
var t_1 = _c[_i];
|
|
||||||
var v = t_1.value;
|
|
||||||
//保存一下颜色到map
|
|
||||||
var _color = util_1.getColorFormAlphaColor(t_1.color);
|
|
||||||
if (t_1.term === 'between') {
|
|
||||||
var start = parseFloat(t_1.min);
|
|
||||||
var end = parseFloat(t_1.max);
|
|
||||||
if (start <= value && value <= end) {
|
|
||||||
color = util_1.hexColorToRGBA(_color, alpha);
|
|
||||||
baseColorList[index] = color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if ('lt' === t_1.term) {
|
|
||||||
if (value < v) {
|
|
||||||
color = util_1.hexColorToRGBA(_color, alpha);
|
|
||||||
baseColorList[index] = color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if ('le' === t_1.term) {
|
|
||||||
if (value <= v) {
|
|
||||||
color = util_1.hexColorToRGBA(_color, alpha);
|
|
||||||
baseColorList[index] = color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if ('gt' === t_1.term) {
|
|
||||||
if (value > v) {
|
|
||||||
color = util_1.hexColorToRGBA(_color, alpha);
|
|
||||||
baseColorList[index] = color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if ('ge' === t_1.term) {
|
|
||||||
if (value >= v) {
|
|
||||||
color = util_1.hexColorToRGBA(_color, alpha);
|
|
||||||
baseColorList[index] = color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if ('eq' === t_1.term) {
|
|
||||||
if (value === v) {
|
|
||||||
color = util_1.hexColorToRGBA(_color, alpha);
|
|
||||||
baseColorList[index] = color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if ('not_eq' === t_1.term) {
|
|
||||||
if (value !== v) {
|
|
||||||
color = util_1.hexColorToRGBA(_color, alpha);
|
|
||||||
baseColorList[index] = color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return __assign(__assign({}, item), { color: color, size: (_b = parseInt(item[sizeKey])) !== null && _b !== void 0 ? _b : mapSymbolSize, name: identifier });
|
|
||||||
})
|
|
||||||
: [];
|
|
||||||
pointLayer = new l7_layers_1.PointLayer({ autoFit: !(basicStyle.autoFit === false) })
|
|
||||||
.source(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: xAxis[0].gisbiName,
|
|
||||||
y: xAxis[1].gisbiName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.active(true);
|
|
||||||
if (!((_d = xAxisExt[0]) === null || _d === void 0 ? void 0 : _d.gisbiName)) return [3 /*break*/, 10];
|
|
||||||
if (!(basicStyle.mapSymbol === 'custom' && basicStyle.customIcon)) return [3 /*break*/, 8];
|
|
||||||
if (!basicStyle.customIcon.startsWith('data')) return [3 /*break*/, 2];
|
|
||||||
scene.removeImage('customIcon');
|
|
||||||
return [4 /*yield*/, scene.addImage('customIcon', basicStyle.customIcon)];
|
|
||||||
case 1:
|
|
||||||
_e.sent();
|
|
||||||
pointLayer.shape('customIcon');
|
|
||||||
return [3 /*break*/, 7];
|
|
||||||
case 2:
|
|
||||||
parser = new DOMParser();
|
|
||||||
index = 0;
|
|
||||||
_e.label = 3;
|
|
||||||
case 3:
|
|
||||||
if (!(index < Math.min(baseColorList.length, colorIndex + 1))) return [3 /*break*/, 6];
|
|
||||||
color = baseColorList[index];
|
|
||||||
fillRegex = /(fill="[^"]*")/g;
|
|
||||||
svgStr = basicStyle.customIcon.replace(fillRegex, '');
|
|
||||||
doc = parser.parseFromString(svgStr, 'image/svg+xml');
|
|
||||||
svgEle = doc.documentElement;
|
|
||||||
svgEle.setAttribute('fill', color);
|
|
||||||
scene.removeImage("icon-" + color);
|
|
||||||
return [4 /*yield*/, scene.addImage("icon-" + color, util_1.svgStrToUrl(svgEle.outerHTML))];
|
|
||||||
case 4:
|
|
||||||
_e.sent();
|
|
||||||
_e.label = 5;
|
|
||||||
case 5:
|
|
||||||
index++;
|
|
||||||
return [3 /*break*/, 3];
|
|
||||||
case 6:
|
|
||||||
pointLayer.shape('color', function (c) {
|
|
||||||
return "icon-" + c;
|
|
||||||
});
|
|
||||||
_e.label = 7;
|
|
||||||
case 7: return [3 /*break*/, 9];
|
|
||||||
case 8:
|
|
||||||
pointLayer.shape(mapSymbol).color('_index', baseColorList);
|
|
||||||
pointLayer.style({
|
|
||||||
stroke: {
|
|
||||||
field: 'color'
|
|
||||||
},
|
|
||||||
strokeWidth: mapSymbolStrokeWidth,
|
|
||||||
opacity: mapSymbolOpacity / 10
|
|
||||||
});
|
|
||||||
_e.label = 9;
|
|
||||||
case 9: return [3 /*break*/, 16];
|
|
||||||
case 10:
|
|
||||||
if (!(basicStyle.mapSymbol === 'custom' && basicStyle.customIcon)) return [3 /*break*/, 15];
|
|
||||||
scene.removeImage('customIcon');
|
|
||||||
if (!basicStyle.customIcon.startsWith('data')) return [3 /*break*/, 12];
|
|
||||||
return [4 /*yield*/, scene.addImage('customIcon', basicStyle.customIcon)];
|
|
||||||
case 11:
|
|
||||||
_e.sent();
|
|
||||||
pointLayer.shape('customIcon');
|
|
||||||
return [3 /*break*/, 14];
|
|
||||||
case 12:
|
|
||||||
parser = new DOMParser();
|
|
||||||
color = baseColor;
|
|
||||||
fillRegex = /(fill="[^"]*")/g;
|
|
||||||
svgStr = basicStyle.customIcon.replace(fillRegex, '');
|
|
||||||
doc = parser.parseFromString(svgStr, 'image/svg+xml');
|
|
||||||
svgEle = doc.documentElement;
|
|
||||||
svgEle.setAttribute('fill', color);
|
|
||||||
return [4 /*yield*/, scene.addImage("customIcon", util_1.svgStrToUrl(svgEle.outerHTML))];
|
|
||||||
case 13:
|
|
||||||
_e.sent();
|
|
||||||
pointLayer.shape('customIcon');
|
|
||||||
_e.label = 14;
|
|
||||||
case 14: return [3 /*break*/, 16];
|
|
||||||
case 15:
|
|
||||||
pointLayer
|
|
||||||
.shape(mapSymbol)
|
|
||||||
.color('_index', baseColorList)
|
|
||||||
.style({
|
|
||||||
stroke: {
|
|
||||||
field: 'color'
|
|
||||||
},
|
|
||||||
strokeWidth: mapSymbolStrokeWidth,
|
|
||||||
opacity: mapSymbolOpacity / 10
|
|
||||||
});
|
|
||||||
_e.label = 16;
|
|
||||||
case 16:
|
|
||||||
if (sizeKey) {
|
|
||||||
pointLayer.size('size', [mapSymbolSizeMin, mapSymbolSizeMax]);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
pointLayer.size(mapSymbolSize);
|
|
||||||
}
|
|
||||||
return [2 /*return*/, pointLayer];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}); };
|
|
||||||
/**
|
|
||||||
* 合并详情到 map
|
|
||||||
* @param details
|
|
||||||
* @returns {Map<string, any>}
|
|
||||||
*/
|
|
||||||
_this.mergeDetailsToMap = function (details) {
|
|
||||||
var resultMap = new Map();
|
|
||||||
details.forEach(function (item) {
|
|
||||||
Object.entries(item).forEach(function (_a) {
|
|
||||||
var key = _a[0], value = _a[1];
|
|
||||||
if (resultMap.has(key)) {
|
|
||||||
var existingValue = resultMap.get(key);
|
|
||||||
if (existingValue !== value) {
|
|
||||||
resultMap.set(key, existingValue + ", " + value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
resultMap.set(key, value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return resultMap;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 清除 popup
|
|
||||||
* @param container
|
|
||||||
*/
|
|
||||||
_this.clearPopup = function (container) {
|
|
||||||
var containerElement = document.getElementById(container);
|
|
||||||
containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll('.l7-popup').forEach(function (element) { return element.remove(); });
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 构建 tooltip
|
|
||||||
* @param chart
|
|
||||||
* @param pointLayer
|
|
||||||
*/
|
|
||||||
_this.buildTooltip = function (chart, container, pointLayer, scene) {
|
|
||||||
var _a, _b;
|
|
||||||
var customAttr = chart.customAttr ? util_1.parseJson(chart.customAttr) : null;
|
|
||||||
_this.clearPopup(container);
|
|
||||||
if ((_a = customAttr === null || customAttr === void 0 ? void 0 : customAttr.tooltip) === null || _a === void 0 ? void 0 : _a.show) {
|
|
||||||
var tooltip_1 = utils_1.deepCopy(customAttr).tooltip;
|
|
||||||
var showFields_1 = tooltip_1.showFields || [];
|
|
||||||
if (!tooltip_1.showFields || tooltip_1.showFields.length === 0) {
|
|
||||||
showFields_1 = __spreadArrays(chart.xAxisExt.map(function (i) { return i.gisbiName + "@" + i.name; }), chart.xAxis.map(function (i) { return i.gisbiName + "@" + i.name; }));
|
|
||||||
}
|
|
||||||
// 修改背景色
|
|
||||||
var styleId = 'tooltip-' + container;
|
|
||||||
var styleElement = document.getElementById(styleId);
|
|
||||||
if (styleElement) {
|
|
||||||
styleElement.remove();
|
|
||||||
(_b = styleElement.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(styleElement);
|
|
||||||
}
|
|
||||||
var style = document.createElement('style');
|
|
||||||
style.id = styleId;
|
|
||||||
style.innerHTML = "\n #" + container + " .l7-popup-content {\n background-color: " + tooltip_1.backgroundColor + " !important;\n padding: 6px 10px 6px;\n line-height: 1.6;\n border-top-left-radius: 3px;\n }\n #" + container + " .l7-popup-tip {\n border-top-color: " + tooltip_1.backgroundColor + " !important;\n }\n ";
|
|
||||||
document.head.appendChild(style);
|
|
||||||
var htmlPrefix_1 = "<div style='font-size:" + tooltip_1.fontSize + "px;color:" + tooltip_1.color + ";font-family: " + chart.fontFamily + "'>";
|
|
||||||
var htmlSuffix_1 = '</div>';
|
|
||||||
var containerElement_1 = document.getElementById(container);
|
|
||||||
if (containerElement_1) {
|
|
||||||
containerElement_1.addEventListener('mousemove', function (event) {
|
|
||||||
var rect = containerElement_1.getBoundingClientRect();
|
|
||||||
var mouseX = event.clientX - rect.left;
|
|
||||||
var mouseY = event.clientY - rect.top;
|
|
||||||
var tooltipElement = containerElement_1.getElementsByClassName('l7-popup');
|
|
||||||
for (var i = 0; i < (tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.length); i++) {
|
|
||||||
var element = tooltipElement[i];
|
|
||||||
element.firstElementChild.style.display = 'none';
|
|
||||||
element.style.transform = 'translate(15px, 12px)';
|
|
||||||
var isNearRightEdge = containerElement_1.clientWidth - mouseX <= element.clientWidth + 10;
|
|
||||||
var isNearBottomEdge = containerElement_1.clientHeight - mouseY <= element.clientHeight;
|
|
||||||
var transform = '';
|
|
||||||
if (isNearRightEdge) {
|
|
||||||
transform += 'translateX(-120%) translateY(15%) ';
|
|
||||||
}
|
|
||||||
if (isNearBottomEdge) {
|
|
||||||
transform += 'translateX(15%) translateY(-80%) ';
|
|
||||||
}
|
|
||||||
if (transform) {
|
|
||||||
element.style.transform = transform.trim();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
pointLayer.on('touchend', function (e) {
|
|
||||||
var _a;
|
|
||||||
if (e.lngLat) {
|
|
||||||
var fieldData = __assign(__assign({}, e.feature), Object.fromEntries(_this.mergeDetailsToMap((_a = e.feature.details) !== null && _a !== void 0 ? _a : [])));
|
|
||||||
var content = _this.buildTooltipContent(tooltip_1, fieldData, showFields_1);
|
|
||||||
var popup = new l7_2.Popup({
|
|
||||||
lngLat: e.lngLat,
|
|
||||||
title: '',
|
|
||||||
closeButton: false,
|
|
||||||
closeOnClick: true,
|
|
||||||
html: "" + htmlPrefix_1 + content + htmlSuffix_1
|
|
||||||
});
|
|
||||||
scene.addPopup(popup);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return new l7_2.LayerPopup({
|
|
||||||
anchor: 'top-left',
|
|
||||||
className: 'l7-popup-' + container,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
layer: pointLayer,
|
|
||||||
customContent: function (item) {
|
|
||||||
var fieldData = __assign(__assign({}, item), Object.fromEntries(_this.mergeDetailsToMap(item.details)));
|
|
||||||
var content = _this.buildTooltipContent(tooltip_1, fieldData, showFields_1);
|
|
||||||
return "" + htmlPrefix_1 + content + htmlSuffix_1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
trigger: 'hover'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 构建 tooltip 内容
|
|
||||||
* @param tooltip
|
|
||||||
* @param fieldData
|
|
||||||
* @param showFields
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
_this.buildTooltipContent = function (tooltip, fieldData, showFields) {
|
|
||||||
var content = "";
|
|
||||||
if (tooltip.customContent) {
|
|
||||||
content = tooltip.customContent;
|
|
||||||
showFields.forEach(function (field) {
|
|
||||||
content = content.replace("${" + field.split('@')[1] + "}", fieldData[field.split('@')[0]]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
showFields.forEach(function (field) {
|
|
||||||
content += "<span style=\"margin-bottom: 4px\">" + field.split('@')[1] + ": " + fieldData[field.split('@')[0]] + "</span><br>";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return content.replace(/\n/g, '<br>');
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 构建 label
|
|
||||||
* @param chart
|
|
||||||
* @param configList
|
|
||||||
*/
|
|
||||||
_this.buildLabel = function (chart, configList) {
|
|
||||||
var _a, _b;
|
|
||||||
var xAxis = utils_1.deepCopy(chart.xAxis);
|
|
||||||
var customAttr = chart.customAttr ? util_1.parseJson(chart.customAttr) : null;
|
|
||||||
if ((_a = customAttr === null || customAttr === void 0 ? void 0 : customAttr.label) === null || _a === void 0 ? void 0 : _a.show) {
|
|
||||||
var label_1 = customAttr.label;
|
|
||||||
var data = ((_b = chart.data) === null || _b === void 0 ? void 0 : _b.tableRow) || [];
|
|
||||||
var showFields_2 = label_1.showFields || [];
|
|
||||||
if (!label_1.showFields || label_1.showFields.length === 0) {
|
|
||||||
showFields_2 = __spreadArrays(chart.xAxisExt.map(function (i) { return i.gisbiName + "@" + i.name; }), chart.xAxis.map(function (i) { return i.gisbiName + "@" + i.name; }));
|
|
||||||
}
|
|
||||||
data.forEach(function (item) {
|
|
||||||
var fieldData = __assign(__assign({}, item), Object.fromEntries(_this.mergeDetailsToMap(item.details)));
|
|
||||||
var content = label_1.customContent || '';
|
|
||||||
if (content) {
|
|
||||||
showFields_2.forEach(function (field) {
|
|
||||||
var _a = field.split('@'), fieldKey = _a[0], fieldName = _a[1];
|
|
||||||
content = content.replace("${" + fieldName + "}", fieldData[fieldKey]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
content = showFields_2.map(function (field) { return fieldData[field.split('@')[0]]; }).join(',');
|
|
||||||
}
|
|
||||||
content = content.replace(/\n/g, '');
|
|
||||||
item.textLayerContent = content;
|
|
||||||
});
|
|
||||||
configList.push(new l7_layers_1.PointLayer()
|
|
||||||
.source(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: xAxis[0].gisbiName,
|
|
||||||
y: xAxis[1].gisbiName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.shape('textLayerContent', 'text')
|
|
||||||
.color(label_1.color)
|
|
||||||
.size(label_1.fontSize)
|
|
||||||
.style({
|
|
||||||
textAllowOverlap: label_1.fullDisplay,
|
|
||||||
textAnchor: 'center',
|
|
||||||
textOffset: [0, 0],
|
|
||||||
fontFamily: chart.fontFamily ? chart.fontFamily : undefined
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
SymbolicMap.prototype.drawChart = function (drawOption) {
|
|
||||||
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
||||||
return __awaiter(this, void 0, void 0, function () {
|
|
||||||
var chart, container, action, containerDom, rect, xAxis, basicStyle, miscStyle, mapKey, mapStyle, center, lng, lat, chartObj, scene, configList, symbolicLayer, tooltipLayer;
|
|
||||||
return __generator(this, function (_j) {
|
|
||||||
switch (_j.label) {
|
|
||||||
case 0:
|
|
||||||
chart = drawOption.chart, container = drawOption.container, action = drawOption.action;
|
|
||||||
containerDom = document.getElementById(container);
|
|
||||||
rect = containerDom === null || containerDom === void 0 ? void 0 : containerDom.getBoundingClientRect();
|
|
||||||
if ((rect === null || rect === void 0 ? void 0 : rect.height) <= 0) {
|
|
||||||
return [2 /*return*/, new l7_1.L7Wrapper((_a = drawOption.chartObj) === null || _a === void 0 ? void 0 : _a.getScene(), [])];
|
|
||||||
}
|
|
||||||
xAxis = utils_1.deepCopy(chart.xAxis);
|
|
||||||
if (chart.customAttr) {
|
|
||||||
basicStyle = util_1.parseJson(chart.customAttr).basicStyle;
|
|
||||||
miscStyle = util_1.parseJson(chart.customAttr).misc;
|
|
||||||
}
|
|
||||||
return [4 /*yield*/, this.getMapKey()];
|
|
||||||
case 1:
|
|
||||||
mapKey = _j.sent();
|
|
||||||
mapStyle = common_antv_1.getMapStyle(mapKey, basicStyle);
|
|
||||||
center = common_antv_1.getMapCenter(basicStyle);
|
|
||||||
// 联动时，聚焦到数据点，多个取第一个
|
|
||||||
if (((_c = (_b = chart.chartExtRequest) === null || _b === void 0 ? void 0 : _b.linkageFilters) === null || _c === void 0 ? void 0 : _c.length) &&
|
|
||||||
(xAxis === null || xAxis === void 0 ? void 0 : xAxis.length) === 2 && ((_d = chart.data) === null || _d === void 0 ? void 0 : _d.tableRow.length)) {
|
|
||||||
lng = (_f = (_e = chart.data) === null || _e === void 0 ? void 0 : _e.tableRow) === null || _f === void 0 ? void 0 : _f[0][chart.xAxis[0].gisbiName];
|
|
||||||
lat = (_h = (_g = chart.data) === null || _g === void 0 ? void 0 : _g.tableRow) === null || _h === void 0 ? void 0 : _h[0][chart.xAxis[1].gisbiName];
|
|
||||||
center = [lng, lat];
|
|
||||||
}
|
|
||||||
chartObj = drawOption.chartObj;
|
|
||||||
scene = chartObj === null || chartObj === void 0 ? void 0 : chartObj.getScene();
|
|
||||||
return [4 /*yield*/, common_antv_1.getMapScene(chart, scene, container, mapKey, basicStyle, miscStyle, mapStyle, center)];
|
|
||||||
case 2:
|
|
||||||
scene = _j.sent();
|
|
||||||
this.configZoomButton(chart, scene, mapKey);
|
|
||||||
if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.length) < 2) {
|
|
||||||
return [2 /*return*/, new l7_1.L7Wrapper(scene, undefined)];
|
|
||||||
}
|
|
||||||
configList = [];
|
|
||||||
return [4 /*yield*/, this.buildSymbolicLayer(chart, scene)];
|
|
||||||
case 3:
|
|
||||||
symbolicLayer = _j.sent();
|
|
||||||
configList.push(symbolicLayer);
|
|
||||||
tooltipLayer = this.buildTooltip(chart, container, symbolicLayer, scene);
|
|
||||||
if (tooltipLayer) {
|
|
||||||
scene.addPopup(tooltipLayer);
|
|
||||||
}
|
|
||||||
this.buildLabel(chart, configList);
|
|
||||||
symbolicLayer.once('inited', function () {
|
|
||||||
common_antv_1.mapRendered(container);
|
|
||||||
});
|
|
||||||
symbolicLayer.on('inited', function () {
|
|
||||||
chart.container = container;
|
|
||||||
tooltip_carousel_1.configCarouselTooltip(chart, symbolicLayer, symbolicLayer.sourceOption.data, scene);
|
|
||||||
common_antv_1.qqMapRendered(scene);
|
|
||||||
});
|
|
||||||
symbolicLayer.on('click', function (ev) {
|
|
||||||
var data = ev.feature;
|
|
||||||
var dimensionList = [];
|
|
||||||
var quotaList = [];
|
|
||||||
chart.data.fields.forEach(function (item, index) {
|
|
||||||
Object.keys(data).forEach(function (key) {
|
|
||||||
if (key.startsWith('f_') && item.gisbiName === key) {
|
|
||||||
if (index === 0) {
|
|
||||||
dimensionList.push({
|
|
||||||
id: item.id,
|
|
||||||
gisbiName: item.gisbiName,
|
|
||||||
value: data[key]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
quotaList.push({
|
|
||||||
id: item.id,
|
|
||||||
gisbiName: item.gisbiName,
|
|
||||||
value: data[key]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
action({
|
|
||||||
x: ev.x,
|
|
||||||
y: ev.y,
|
|
||||||
data: {
|
|
||||||
data: __assign(__assign({}, data), { value: quotaList[0].value, name: dimensionList[0].id, dimensionList: dimensionList, quotaList: quotaList })
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return [2 /*return*/, new l7_1.L7Wrapper(scene, configList)];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
SymbolicMap.prototype.setupDefaultOptions = function (chart) {
|
|
||||||
chart.customAttr.label = __assign(__assign({}, chart.customAttr.label), { show: false });
|
|
||||||
chart.customAttr.basicStyle = __assign(__assign({}, chart.customAttr.basicStyle), { mapSymbolOpacity: 5, mapStyle: 'normal' });
|
|
||||||
return chart;
|
|
||||||
};
|
|
||||||
return SymbolicMap;
|
|
||||||
}(l7_1.L7ChartView));
|
|
||||||
exports.SymbolicMap = SymbolicMap;
|
|
||||||
@ -1,558 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __assign = (this && this.__assign) || function () {
|
|
||||||
__assign = Object.assign || function(t) {
|
|
||||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
||||||
s = arguments[i];
|
|
||||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
||||||
t[p] = s[p];
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
};
|
|
||||||
return __assign.apply(this, arguments);
|
|
||||||
};
|
|
||||||
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
||||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
||||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
||||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
||||||
r[k] = a[j];
|
|
||||||
return r;
|
|
||||||
};
|
|
||||||
exports.__esModule = true;
|
|
||||||
exports.CarouselManager = exports.carouselManagerInstances = exports.configCarouselTooltip = void 0;
|
|
||||||
var l7_1 = require("@antv/l7");
|
|
||||||
var isEmpty_1 = require("lodash-es/isEmpty");
|
|
||||||
var formatter_1 = require("@/views/chart/components/js/formatter");
|
|
||||||
var util_1 = require("@/views/chart/components/js/util");
|
|
||||||
var utils_1 = require("@/utils/utils");
|
|
||||||
exports.configCarouselTooltip = function (chart, view, data, scene, customSubArea, drawOption) {
|
|
||||||
var _a;
|
|
||||||
if (['bubble-map', 'map'].includes(chart.type)) {
|
|
||||||
data = (_a = view.source.data.dataArray) === null || _a === void 0 ? void 0 : _a.filter(function (i) { var _a; return ((_a = i.dimensionList) === null || _a === void 0 ? void 0 : _a.length) > 0; }).reduce(function (acc, current) {
|
|
||||||
var existingItem = acc.find(function (obj) {
|
|
||||||
var _a;
|
|
||||||
if ((_a = drawOption === null || drawOption === void 0 ? void 0 : drawOption.areaId) === null || _a === void 0 ? void 0 : _a.startsWith('custom_')) {
|
|
||||||
return obj.areaName === current.areaName;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return obj.name === current.name || (obj.adcode && obj.adcode === current.adcode);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!existingItem) {
|
|
||||||
acc.push(current);
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
}
|
|
||||||
if (exports.carouselManagerInstances[chart.container]) {
|
|
||||||
var instances = exports.carouselManagerInstances[chart.container];
|
|
||||||
instances.update(scene, chart, view, data, customSubArea, drawOption);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
new CarouselManager(scene, chart, view, data, customSubArea, drawOption);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
exports.carouselManagerInstances = {};
|
|
||||||
/**
|
|
||||||
* 轮播管理类
|
|
||||||
*/
|
|
||||||
var CarouselManager = /** @class */ (function () {
|
|
||||||
function CarouselManager(scene, chart, view, data, customSubArea, drawOption) {
|
|
||||||
var _this = this;
|
|
||||||
/**
|
|
||||||
* 停留时长定时器
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
this.popupTimeoutId = null;
|
|
||||||
/**
|
|
||||||
* 轮播间隔定时器
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
this.popupIntervalId = null;
|
|
||||||
/**
|
|
||||||
* 是否暂停轮播
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
this.isPaused = false;
|
|
||||||
/**
|
|
||||||
* 当前显示的数据索引
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
this.currentIndex = 0;
|
|
||||||
this.handleVisibilityChange = function () {
|
|
||||||
if (document.hidden) {
|
|
||||||
_this.clearPreviousInstance(_this.chart.container);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
_this.startCarouselPopups();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 鼠标移入暂停轮播
|
|
||||||
*/
|
|
||||||
this.pauseCarouselPopups = function () {
|
|
||||||
var _a;
|
|
||||||
if (_this.popup) {
|
|
||||||
(_a = _this.popup) === null || _a === void 0 ? void 0 : _a.remove();
|
|
||||||
}
|
|
||||||
_this.removeStyle();
|
|
||||||
_this.isPaused = true;
|
|
||||||
_this.clearExistingTimers();
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 鼠标移出开始轮播
|
|
||||||
*/
|
|
||||||
this.resumeCarouselPopups = function () {
|
|
||||||
if (_this.isPaused) {
|
|
||||||
_this.isPaused = false;
|
|
||||||
_this.startCarouselPopups();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 清除定时器
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
this.clearExistingTimers = function () {
|
|
||||||
if (_this.popupTimeoutId !== null) {
|
|
||||||
clearTimeout(_this.popupTimeoutId);
|
|
||||||
_this.popupTimeoutId = 0;
|
|
||||||
}
|
|
||||||
if (_this.popupIntervalId !== null) {
|
|
||||||
clearInterval(_this.popupIntervalId);
|
|
||||||
_this.popupIntervalId = 0;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 绑定事件处理函数
|
|
||||||
this.onMouseEnterHandler = this.pauseCarouselPopups.bind(this);
|
|
||||||
this.onMouseLeaveHandler = this.resumeCarouselPopups.bind(this);
|
|
||||||
this.onVisibilityChangeHandler = this.handleVisibilityChange.bind(this);
|
|
||||||
this.clearExistingTimers = this.clearExistingTimers.bind(this);
|
|
||||||
this.init(scene, chart, view, data, customSubArea, drawOption);
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 更新轮播弹窗对象内容
|
|
||||||
* @param scene
|
|
||||||
* @param chart
|
|
||||||
* @param view
|
|
||||||
* @param data
|
|
||||||
* @param customSubArea
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.update = function (scene, chart, view, data, customSubArea, drawOption) {
|
|
||||||
this.init(scene, chart, view, data, customSubArea, drawOption);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 初始化轮播弹窗
|
|
||||||
* @param scene
|
|
||||||
* @param chart
|
|
||||||
* @param view
|
|
||||||
* @param data
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.init = function (scene, chart, view, data, customSubArea, drawOption) {
|
|
||||||
var _this = this;
|
|
||||||
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
||||||
this.view = view;
|
|
||||||
this.chart = chart;
|
|
||||||
this.scene = scene;
|
|
||||||
this.data = data;
|
|
||||||
this.popup = null;
|
|
||||||
this.currentIndex = 0;
|
|
||||||
this.customSubArea = customSubArea;
|
|
||||||
this.drawOption = drawOption;
|
|
||||||
this.clearPreviousInstance(this.chart.container);
|
|
||||||
if (((_b = (_a = this.chart.customAttr) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.show) && ((_e = (_d = (_c = this.chart.customAttr) === null || _c === void 0 ? void 0 : _c.tooltip) === null || _d === void 0 ? void 0 : _d.carousel) === null || _e === void 0 ? void 0 : _e.enable) &&
|
|
||||||
this.data.length > 0) {
|
|
||||||
this.popup = new l7_1.Popup({ closeButton: false, maxWidth: 600 });
|
|
||||||
var carousel = (_g = (_f = this.chart.customAttr) === null || _f === void 0 ? void 0 : _f.tooltip) === null || _g === void 0 ? void 0 : _g.carousel;
|
|
||||||
this.stayTime = carousel.stayTime * 1000;
|
|
||||||
this.intervalTime = carousel.intervalTime * 1000;
|
|
||||||
this.startCarouselPopups();
|
|
||||||
var divElement = document.getElementById(this.chart.container);
|
|
||||||
divElement.addEventListener('mouseenter', this.pauseCarouselPopups);
|
|
||||||
divElement.addEventListener('mouseleave', this.resumeCarouselPopups);
|
|
||||||
// 移动端符号地图不支持mouseenter和mouseleave事件，这里特殊处理一下
|
|
||||||
if (this.chart.type === 'symbolic-map') {
|
|
||||||
// 监听符号触摸事件, 暂停轮播
|
|
||||||
(_j = (_h = scene === null || scene === void 0 ? void 0 : scene.getLayers()) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.addListener('touchend', function () {
|
|
||||||
_this.pauseCarouselPopups();
|
|
||||||
});
|
|
||||||
// 地图空白区域触摸事件, 启动轮播
|
|
||||||
(_k = scene === null || scene === void 0 ? void 0 : scene.getMapCanvasContainer()) === null || _k === void 0 ? void 0 : _k.addEventListener('touchend', function () {
|
|
||||||
_this.resumeCarouselPopups();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 监听页面可见性变化
|
|
||||||
document.addEventListener('visibilitychange', this.handleVisibilityChange);
|
|
||||||
exports.carouselManagerInstances[this.chart.container] = this;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 清除之前的实例数据
|
|
||||||
* @param containerId
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.clearPreviousInstance = function (containerId) {
|
|
||||||
var _a;
|
|
||||||
if (exports.carouselManagerInstances[containerId]) {
|
|
||||||
var instance = exports.carouselManagerInstances[containerId];
|
|
||||||
this.clearExistingTimers();
|
|
||||||
(_a = instance.popup) === null || _a === void 0 ? void 0 : _a.remove();
|
|
||||||
instance.removeStyle();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 开始轮播
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.startCarouselPopups = function () {
|
|
||||||
this.clearExistingTimers();
|
|
||||||
this.carouselPopups();
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 管理轮播弹窗的显示
|
|
||||||
*
|
|
||||||
* 此方法用于处理轮播弹窗的显示逻辑它会根据当前的索引显示对应的弹窗，
|
|
||||||
* 并在一定时间后自动移除当前弹窗并显示下一个弹窗
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.carouselPopups = function () {
|
|
||||||
var _this = this;
|
|
||||||
var showPopup = function (index) {
|
|
||||||
_this.removeStyle();
|
|
||||||
var containerElement = document.getElementById(_this.chart.container);
|
|
||||||
if (containerElement) {
|
|
||||||
if (_this.chart.type === 'symbolic-map') {
|
|
||||||
// 轮播进行时，隐藏隐藏鼠标悬浮的tooltip
|
|
||||||
var mouseTooltip = containerElement.getElementsByClassName('l7-popup-' + _this.chart.container);
|
|
||||||
for (var _i = 0, _a = Array.from(mouseTooltip); _i < _a.length; _i++) {
|
|
||||||
var tooltip = _a[_i];
|
|
||||||
var tooltipElement = tooltip;
|
|
||||||
tooltipElement.classList.add('l7-popup-hide');
|
|
||||||
}
|
|
||||||
_this.createSymbolicMapPopup(index);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (_this.chart.type === 'map') {
|
|
||||||
// 轮播进行时，隐藏隐藏鼠标悬浮的tooltip
|
|
||||||
var mouseTooltip = containerElement.getElementsByClassName('l7plot-tooltip-container');
|
|
||||||
for (var _b = 0, _c = Array.from(mouseTooltip); _b < _c.length; _b++) {
|
|
||||||
var tooltip = _c[_b];
|
|
||||||
var tooltipElement = tooltip;
|
|
||||||
tooltipElement.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
_this.createPopup(index);
|
|
||||||
}
|
|
||||||
_this.clearExistingTimers();
|
|
||||||
_this.popupTimeoutId = window.setTimeout(function () {
|
|
||||||
var _a;
|
|
||||||
_this.currentIndex++;
|
|
||||||
(_a = _this.popup) === null || _a === void 0 ? void 0 : _a.remove();
|
|
||||||
_this.cancelHighlightLayer(index);
|
|
||||||
if (_this.currentIndex >= _this.data.length) {
|
|
||||||
_this.currentIndex = 0;
|
|
||||||
}
|
|
||||||
_this.popupIntervalId = window.setTimeout(function () {
|
|
||||||
showPopup(_this.currentIndex);
|
|
||||||
}, _this.intervalTime);
|
|
||||||
}, _this.stayTime);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
_this.clearExistingTimers();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
showPopup(this.currentIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 移除样式
|
|
||||||
* 每次创建弹窗前移除之前的样式
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.removeStyle = function () {
|
|
||||||
var _a;
|
|
||||||
var styleToRemove = document.getElementById('style-' + this.chart.container);
|
|
||||||
if (styleToRemove) {
|
|
||||||
styleToRemove.remove();
|
|
||||||
(_a = styleToRemove.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(styleToRemove);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 创建弹窗信息
|
|
||||||
* @param index
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.createPopup = function (index) {
|
|
||||||
var _this = this;
|
|
||||||
var _a, _b, _c, _d, _e, _f;
|
|
||||||
var tooltipStyle = this.view.tooltip.options.domStyles;
|
|
||||||
var tooltipBackgroundColor = tooltipStyle['l7plot-tooltip']['background-color'];
|
|
||||||
var tooltipFontSize = tooltipStyle['l7plot-tooltip']['font-size'];
|
|
||||||
var style = document.createElement('style');
|
|
||||||
style.id = 'style-' + this.chart.container;
|
|
||||||
style.innerHTML = "\n #" + this.chart.container + " .l7-popup-content {\n background-color: " + tooltipBackgroundColor + " !important;\n font-size: " + tooltipFontSize + ";\n padding: 10px 10px 6px;\n line-height: 1.6;\n }\n #" + this.chart.container + " .l7-popup-tip {\n border-top-color: " + tooltipBackgroundColor + " !important;\n }\n ";
|
|
||||||
document.head.appendChild(style);
|
|
||||||
var popupData = this.getPopupData(index);
|
|
||||||
if (popupData.data) {
|
|
||||||
var tooltipItem_1 = '';
|
|
||||||
this.getTooltipItems(popupData.data).forEach(function (fieldData) {
|
|
||||||
tooltipItem_1 += "\n <li style=\"list-style-type: none; margin-bottom: 4px; white-space: nowrap; display: flex; justify-content: space-between;\">\n <span style=\"" + _this.objectToSemicolonSeparated(tooltipStyle['l7plot-tooltip__name']) + "\">" + fieldData.name + "</span>\n <span style=\"" + _this.objectToSemicolonSeparated(tooltipStyle['l7plot-tooltip__value']) + "\">" + fieldData.value + "</span>\n </li>";
|
|
||||||
});
|
|
||||||
var html = "\n <div>\n <div style=\"" + this.objectToSemicolonSeparated(tooltipStyle['l7plot-tooltip__title']) + "\">" + popupData.data.name + "</div>\n <ul style=\"" + this.objectToSemicolonSeparated(tooltipStyle['l7plot-tooltip__list']) + "\">\n " + tooltipItem_1 + "\n </ul>\n </div>\n ";
|
|
||||||
this.popup.setLngLat({ lng: popupData.centroid[0], lat: popupData.centroid[1] });
|
|
||||||
this.popup.setHTML(html);
|
|
||||||
this.popup.closeButton = false;
|
|
||||||
this.view.addLayer(this.popup);
|
|
||||||
// 地图层高亮
|
|
||||||
(_b = (_a = this.view.scene
|
|
||||||
.getLayers()) === null || _a === void 0 ? void 0 : _a.find(function (i) { return i.name === 'highlightLayer'; })) === null || _b === void 0 ? void 0 : _b.setData(this.getActiveData(index));
|
|
||||||
if (this.chart.type === 'bubble-map') {
|
|
||||||
// 气泡地图高亮
|
|
||||||
var _id = ((_d = (_c = this.view.scene
|
|
||||||
.getLayers()) === null || _c === void 0 ? void 0 : _c.find(function (i) { return i.name === 'bubbleLayer'; })) === null || _d === void 0 ? void 0 : _d.layerSource.data.dataArray.find(function (i) { return i.name === _this.data[index].name; }))._id;
|
|
||||||
(_f = (_e = this.view.scene
|
|
||||||
.getLayers()) === null || _e === void 0 ? void 0 : _e.find(function (i) { return i.name === 'bubbleLayer' && i.coordCenter; })) === null || _f === void 0 ? void 0 : _f.setActive(_id, { color: 'rgba(30,90,255,1)' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
CarouselManager.prototype.getActiveData = function (index) {
|
|
||||||
var _this = this;
|
|
||||||
var _a, _b, _c;
|
|
||||||
if ((_b = (_a = this.drawOption) === null || _a === void 0 ? void 0 : _a.areaId) === null || _b === void 0 ? void 0 : _b.startsWith('custom_')) {
|
|
||||||
var result_1 = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: []
|
|
||||||
};
|
|
||||||
var area = this.customSubArea.find(function (a) { return a.name === _this.data[index].areaName; });
|
|
||||||
var areaMap_1 = this.view.currentDistrictData.features.reduce(function (p, n) {
|
|
||||||
p['156' + n.properties.adcode] = n;
|
|
||||||
return p;
|
|
||||||
}, {});
|
|
||||||
(_c = area === null || area === void 0 ? void 0 : area.scopeArr) === null || _c === void 0 ? void 0 : _c.forEach(function (s) {
|
|
||||||
if (areaMap_1[s]) {
|
|
||||||
result_1.features.push(areaMap_1[s]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return result_1;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: [
|
|
||||||
this.view.currentDistrictData.features.find(function (i) { return i.properties.name === _this.data[index].name; })
|
|
||||||
]
|
|
||||||
};
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 获取弹窗信息，包括原始数据及位置信息
|
|
||||||
* @param index
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.getPopupData = function (index) {
|
|
||||||
var _this = this;
|
|
||||||
var _a, _b, _c, _d;
|
|
||||||
if ((_b = (_a = this.drawOption) === null || _a === void 0 ? void 0 : _a.areaId) === null || _b === void 0 ? void 0 : _b.startsWith('custom_')) {
|
|
||||||
var data_1 = this.data[index];
|
|
||||||
var area = (_c = this.customSubArea) === null || _c === void 0 ? void 0 : _c.find(function (a) { return a.name === data_1.areaName; });
|
|
||||||
data_1.name = data_1.areaName;
|
|
||||||
return {
|
|
||||||
data: data_1,
|
|
||||||
centroid: area.centroid
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return {
|
|
||||||
data: this.data[index],
|
|
||||||
centroid: (_d = this.view.currentDistrictData.features.find(function (i) { return i.properties.name === _this.data[index].name; })) === null || _d === void 0 ? void 0 : _d.properties.centroid
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 将对象转换为 CSS 属性
|
|
||||||
* @param obj
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.objectToSemicolonSeparated = function (obj) {
|
|
||||||
var result = '';
|
|
||||||
for (var key in obj) {
|
|
||||||
if (obj.hasOwnProperty(key)) {
|
|
||||||
result += this.convertToSnakeCase(key) + ":" + obj[key] + ";";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
CarouselManager.prototype.cancelHighlightLayer = function (index) {
|
|
||||||
var _this = this;
|
|
||||||
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
||||||
(_c = (_b = (_a = this.view.scene) === null || _a === void 0 ? void 0 : _a.getLayers()) === null || _b === void 0 ? void 0 : _b.find(function (i) { return i.name === 'highlightLayer'; })) === null || _c === void 0 ? void 0 : _c.setData({ type: 'FeatureCollection', features: [] });
|
|
||||||
if (this.chart.type === 'bubble-map') {
|
|
||||||
var _id = ((_f = (_e = (_d = this.view.scene) === null || _d === void 0 ? void 0 : _d.getLayers()) === null || _e === void 0 ? void 0 : _e.find(function (i) { return i.name === 'bubbleLayer'; })) === null || _f === void 0 ? void 0 : _f.layerSource.data.dataArray.find(function (i) { return i.name === _this.data[index].name; }))._id;
|
|
||||||
(_h = (_g = this.view.scene
|
|
||||||
.getLayers()) === null || _g === void 0 ? void 0 : _g.find(function (i) { return i.name === 'bubbleLayer' && i.coordCenter; })) === null || _h === void 0 ? void 0 : _h.setActive(_id, {
|
|
||||||
color: this.view.scene
|
|
||||||
.getLayers()
|
|
||||||
.find(function (i) { return i.name === 'bubbleLayer'; })
|
|
||||||
.styleAttributeService.getLayerStyleAttribute('color').scale.field
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (this.chart.type === 'symbolic-map') {
|
|
||||||
var lngField_1 = this.chart.xAxis[0].gisbiName;
|
|
||||||
var latField_1 = this.chart.xAxis[1].gisbiName;
|
|
||||||
var _id = ((_l = (_k = (_j = this.scene) === null || _j === void 0 ? void 0 : _j.getLayers()) === null || _k === void 0 ? void 0 : _k.find(function (i) { return i.type === 'PointLayer'; })) === null || _l === void 0 ? void 0 : _l.layerSource.data.dataArray.find(function (i) {
|
|
||||||
var targetLng = _this.data[index][lngField_1];
|
|
||||||
var targetLat = _this.data[index][latField_1];
|
|
||||||
return i[lngField_1] === targetLng && i[latField_1] === targetLat;
|
|
||||||
}))._id;
|
|
||||||
(_o = (_m = this.scene
|
|
||||||
.getLayers()) === null || _m === void 0 ? void 0 : _m.find(function (i) { return i.type === 'PointLayer' && i.coordCenter; })) === null || _o === void 0 ? void 0 : _o.setActive(_id, {
|
|
||||||
color: this.scene
|
|
||||||
.getLayers()
|
|
||||||
.find(function (i) { return i.type === 'PointLayer'; })
|
|
||||||
.styleAttributeService.getLayerStyleAttribute('color').scale.field
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 将驼峰式命名转换为蛇形命名
|
|
||||||
* @param str
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.convertToSnakeCase = function (str) {
|
|
||||||
return str.replace(/([A-Z])/g, function (match) { return '-' + match.toLowerCase(); });
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 获取弹窗字段信息
|
|
||||||
* 与tooltip要显示的内容一致
|
|
||||||
* @param data
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.getTooltipItems = function (data) {
|
|
||||||
var _a, _b, _c, _d;
|
|
||||||
var result = [];
|
|
||||||
var customAttr = util_1.parseJson(this.chart.customAttr);
|
|
||||||
var tooltip = customAttr.tooltip;
|
|
||||||
var formatterMap = (_a = tooltip.seriesTooltipFormatter) === null || _a === void 0 ? void 0 : _a.filter(function (i) { return i.show; }).reduce(function (pre, next) {
|
|
||||||
pre[next.id] = next;
|
|
||||||
return pre;
|
|
||||||
}, {});
|
|
||||||
if (isEmpty_1["default"](formatterMap)) {
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
var head = data;
|
|
||||||
var formatter = formatterMap[(_c = (_b = head.quotaList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id];
|
|
||||||
if (!isEmpty_1["default"](formatter)) {
|
|
||||||
var originValue = parseFloat(head.value);
|
|
||||||
var value = formatter_1.valueFormatter(originValue, formatter.formatterCfg);
|
|
||||||
var name = isEmpty_1["default"](formatter.chartShowName) ? formatter.name : formatter.chartShowName;
|
|
||||||
result.push(__assign(__assign({}, head), { name: name, value: "" + (value !== null && value !== void 0 ? value : '') }));
|
|
||||||
}
|
|
||||||
(_d = head.dynamicTooltipValue) === null || _d === void 0 ? void 0 : _d.forEach(function (item) {
|
|
||||||
var formatter = formatterMap[item.fieldId];
|
|
||||||
if (formatter) {
|
|
||||||
var value = formatter_1.valueFormatter(parseFloat(item.value), formatter.formatterCfg);
|
|
||||||
var name = isEmpty_1["default"](formatter.chartShowName) ? formatter.name : formatter.chartShowName;
|
|
||||||
result.push({ color: 'grey', name: name, value: "" + (value !== null && value !== void 0 ? value : '') });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 符号地图特殊处理，tooltip的配置可自定义显示内容
|
|
||||||
* @param index
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
CarouselManager.prototype.createSymbolicMapPopup = function (index) {
|
|
||||||
var _this = this;
|
|
||||||
var buildTooltip = function () {
|
|
||||||
var _a, _b, _c, _d, _e, _f;
|
|
||||||
var customAttr = _this.chart.customAttr ? util_1.parseJson(_this.chart.customAttr) : null;
|
|
||||||
if ((_a = customAttr === null || customAttr === void 0 ? void 0 : customAttr.tooltip) === null || _a === void 0 ? void 0 : _a.show) {
|
|
||||||
if (!_this.popup) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
var tooltip = utils_1.deepCopy(customAttr).tooltip;
|
|
||||||
var showFields = tooltip.showFields || [];
|
|
||||||
if (!tooltip.showFields || tooltip.showFields.length === 0) {
|
|
||||||
showFields = __spreadArrays(_this.chart.xAxisExt.map(function (i) { return i.gisbiName + "@" + i.name; }), _this.chart.xAxis.map(function (i) { return i.gisbiName + "@" + i.name; }));
|
|
||||||
}
|
|
||||||
var style = document.createElement('style');
|
|
||||||
style.id = 'style-' + _this.chart.container;
|
|
||||||
style.innerHTML = "\n #" + _this.chart.container + " .l7-popup-content {\n background-color: " + tooltip.backgroundColor + " !important;\n padding: 6px 10px 6px;\n line-height: 1.6;\n }\n #" + _this.chart.container + " .l7-popup-tip {\n border-top-color: " + tooltip.backgroundColor + " !important;\n }\n ";
|
|
||||||
document.head.appendChild(style);
|
|
||||||
var lngField_2 = _this.chart.xAxis[0].gisbiName;
|
|
||||||
var latField_2 = _this.chart.xAxis[1].gisbiName;
|
|
||||||
var htmlPrefix = "<div style='font-size:" + tooltip.fontSize + "px;color:" + tooltip.color + ";'>";
|
|
||||||
var htmlSuffix = '</div>';
|
|
||||||
var data = _this.view.sourceOption.data[index];
|
|
||||||
if (data && ((_b = data.details) === null || _b === void 0 ? void 0 : _b.length)) {
|
|
||||||
var fieldData = __assign(__assign({}, data), Object.fromEntries(mergeDetailsToMap(data.details)));
|
|
||||||
var content = buildTooltipContent(tooltip, fieldData, showFields);
|
|
||||||
var html = "" + htmlPrefix + content + htmlSuffix;
|
|
||||||
_this.popup.setLngLat({
|
|
||||||
lng: data[lngField_2],
|
|
||||||
lat: data[latField_2]
|
|
||||||
});
|
|
||||||
_this.popup.setHTML(html);
|
|
||||||
_this.popup.closeButton = false;
|
|
||||||
_this.scene.addPopup(_this.popup);
|
|
||||||
_this.popup.addTo(_this.scene);
|
|
||||||
var _id = ((_d = (_c = _this.scene
|
|
||||||
.getLayers()) === null || _c === void 0 ? void 0 : _c.find(function (i) { return i.type === 'PointLayer'; })) === null || _d === void 0 ? void 0 : _d.layerSource.data.dataArray.find(function (i) {
|
|
||||||
var targetLng = _this.data[index][lngField_2];
|
|
||||||
var targetLat = _this.data[index][latField_2];
|
|
||||||
return i[lngField_2] === targetLng && i[latField_2] === targetLat;
|
|
||||||
}))._id;
|
|
||||||
(_f = (_e = _this.scene
|
|
||||||
.getLayers()) === null || _e === void 0 ? void 0 : _e.find(function (i) { return i.type === 'PointLayer' && i.coordCenter; })) === null || _f === void 0 ? void 0 : _f.setActive(_id, { color: 'rgba(30,90,255,1)' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 构建 tooltip 内容
|
|
||||||
* @param tooltip
|
|
||||||
* @param fieldData
|
|
||||||
* @param showFields
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
var buildTooltipContent = function (tooltip, fieldData, showFields) {
|
|
||||||
var content = '';
|
|
||||||
if (tooltip.customContent) {
|
|
||||||
content = tooltip.customContent;
|
|
||||||
showFields.forEach(function (field) {
|
|
||||||
content = content.replace("${" + field.split('@')[1] + "}", fieldData[field.split('@')[0]]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
showFields.forEach(function (field) {
|
|
||||||
content += "<span style=\"margin-bottom: 4px\">" + field.split('@')[1] + ": " + fieldData[field.split('@')[0]] + "</span><br>";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return content.replace(/\n/g, '<br>');
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 合并详情到 map
|
|
||||||
* @param details
|
|
||||||
* @returns {Map<string, any>}
|
|
||||||
*/
|
|
||||||
var mergeDetailsToMap = function (details) {
|
|
||||||
var resultMap = new Map();
|
|
||||||
details.forEach(function (item) {
|
|
||||||
Object.entries(item).forEach(function (_a) {
|
|
||||||
var key = _a[0], value = _a[1];
|
|
||||||
if (resultMap.has(key)) {
|
|
||||||
var existingValue = resultMap.get(key);
|
|
||||||
if (existingValue !== value) {
|
|
||||||
resultMap.set(key, existingValue + ", " + value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
resultMap.set(key, value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return resultMap;
|
|
||||||
};
|
|
||||||
buildTooltip();
|
|
||||||
};
|
|
||||||
return CarouselManager;
|
|
||||||
}());
|
|
||||||
exports.CarouselManager = CarouselManager;
|
|
||||||
@ -1,18 +1,18 @@
|
|||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||||
import {
|
import {
|
||||||
L7ChartView,
|
L7ChartView,
|
||||||
L7Config,
|
L7Config,
|
||||||
L7DrawConfig,
|
L7DrawConfig,
|
||||||
L7Wrapper
|
L7Wrapper
|
||||||
} from '@/views/chart/components/js/panel/types/impl/l7'
|
} from '@/data-visualization/chart/components/js/panel/types/impl/l7'
|
||||||
import { MAP_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/map/common'
|
import { MAP_EDITOR_PROPERTY_INNER } from '@/data-visualization/chart/components/js/panel/charts/map/common'
|
||||||
import { flow, parseJson } from '@/views/chart/components/js/util'
|
import { flow, parseJson } from '@/data-visualization/chart/components/js/util'
|
||||||
import { deepCopy } from '@/utils/utils'
|
import { deepCopy } from '@/data-visualization/utils/utils'
|
||||||
import { GaodeMap } from '@antv/l7-maps'
|
import { GaodeMap } from '@antv/l7-maps'
|
||||||
import { Scene } from '@antv/l7-scene'
|
import { Scene } from '@antv/l7-scene'
|
||||||
import { HeatmapLayer } from '@antv/l7-layers'
|
import { HeatmapLayer } from '@antv/l7-layers'
|
||||||
import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
|
import { DEFAULT_BASIC_STYLE } from '@/data-visualization/chart/components/editor/util/chart'
|
||||||
import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv'
|
import { mapRendered, mapRendering } from '@/data-visualization/chart/components/js/panel/common/common_antv'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||||
import {
|
import {
|
||||||
L7ChartView,
|
L7ChartView,
|
||||||
L7Config,
|
L7Config,
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
import {
|
import {
|
||||||
G2PlotChartView,
|
G2PlotChartView,
|
||||||
G2PlotDrawOptions
|
G2PlotDrawOptions
|
||||||
} from '@/views/chart/components/js/panel/types/impl/g2plot'
|
} from
|
||||||
|
'@/data-visualization/chart/components/js/panel/types/impl/g2plot'
|
||||||
import type { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
|
import type { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
|
||||||
import {
|
import {
|
||||||
configRoundAngle,
|
configRoundAngle,
|
||||||
@ -15,7 +16,7 @@ import {
|
|||||||
setGradientColor,
|
setGradientColor,
|
||||||
TOOLTIP_TPL
|
TOOLTIP_TPL
|
||||||
} from '../../common/common_antv'
|
} from '../../common/common_antv'
|
||||||
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
|
import { flow, hexColorToRGBA, parseJson } from '@/data-visualization/chart/components/js/util'
|
||||||
import {
|
import {
|
||||||
cloneDeep,
|
cloneDeep,
|
||||||
isEmpty,
|
isEmpty,
|
||||||
@ -26,7 +27,9 @@ import {
|
|||||||
defaultsDeep,
|
defaultsDeep,
|
||||||
defaults
|
defaults
|
||||||
} from 'lodash-es'
|
} from 'lodash-es'
|
||||||
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { valueFormatter } from
|
||||||
|
'@/data-visualization/chart/components/js/formatter'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CHART_MIX_AXIS_TYPE,
|
CHART_MIX_AXIS_TYPE,
|
||||||
CHART_MIX_DEFAULT_BASIC_STYLE,
|
CHART_MIX_DEFAULT_BASIC_STYLE,
|
||||||
@ -35,15 +38,15 @@ import {
|
|||||||
MixChartBasicStyle
|
MixChartBasicStyle
|
||||||
} from './chart-mix-common'
|
} from './chart-mix-common'
|
||||||
import type { Datum } from '@antv/g2plot/esm/types/common'
|
import type { Datum } from '@antv/g2plot/esm/types/common'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||||
import {
|
import {
|
||||||
DEFAULT_BASIC_STYLE,
|
DEFAULT_BASIC_STYLE,
|
||||||
DEFAULT_LABEL,
|
DEFAULT_LABEL,
|
||||||
DEFAULT_LEGEND_STYLE
|
DEFAULT_LEGEND_STYLE
|
||||||
} from '@/views/chart/components/editor/util/chart'
|
} from '@/data-visualization/chart/components/editor/util/chart'
|
||||||
import type { Options } from '@antv/g2plot/esm'
|
import type { Options } from '@antv/g2plot/esm'
|
||||||
import { Group } from '@antv/g-canvas'
|
import { Group } from '@antv/g-canvas'
|
||||||
import { extremumEvt } from '@/views/chart/components/js/extremumUitl'
|
import { extremumEvt } from '@/data-visualization/chart/components/js/extremumUitl'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const DEFAULT_DATA = []
|
const DEFAULT_DATA = []
|
||||||
|
|||||||
@ -1,20 +1,21 @@
|
|||||||
import {
|
import {
|
||||||
G2PlotChartView,
|
G2PlotChartView,
|
||||||
G2PlotDrawOptions
|
G2PlotDrawOptions
|
||||||
} from '@/views/chart/components/js/panel/types/impl/g2plot'
|
} from
|
||||||
|
'@/data-visualization/chart/components/js/panel/types/impl/g2plot'
|
||||||
import type { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
|
import type { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
|
||||||
import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
|
import { getPadding, setGradientColor } from '@/data-visualization/chart/components/js/panel/common/common_antv'
|
||||||
import { cloneDeep, get } from 'lodash-es'
|
import { cloneDeep, get } from 'lodash-es'
|
||||||
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
|
import { flow, hexColorToRGBA, parseJson } from '@/data-visualization/chart/components/js/util'
|
||||||
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { valueFormatter } from
|
||||||
|
'@/data-visualization/chart/components/js/formatter'
|
||||||
import { Datum } from '@antv/g2plot/esm/types/common'
|
import { Datum } from '@antv/g2plot/esm/types/common'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||||
import {
|
import {
|
||||||
SANKEY_AXIS_TYPE,
|
SANKEY_AXIS_TYPE,
|
||||||
SANKEY_EDITOR_PROPERTY,
|
SANKEY_EDITOR_PROPERTY,
|
||||||
SANKEY_EDITOR_PROPERTY_INNER
|
SANKEY_EDITOR_PROPERTY_INNER
|
||||||
} from '@/views/chart/components/js/panel/charts/others/sankey-common'
|
} from '@/data-visualization/chart/components/js/panel/charts/others/sankey-common'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const DEFAULT_DATA = []
|
const DEFAULT_DATA = []
|
||||||
|
|||||||
@ -1,19 +1,20 @@
|
|||||||
import {
|
import {
|
||||||
G2PlotChartView,
|
G2PlotChartView,
|
||||||
G2PlotDrawOptions
|
G2PlotDrawOptions
|
||||||
} from '@/views/chart/components/js/panel/types/impl/g2plot'
|
} from
|
||||||
|
'@/data-visualization/chart/components/js/panel/types/impl/g2plot'
|
||||||
import type { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud'
|
import type { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud'
|
||||||
import {
|
import {
|
||||||
filterChartDataByRange,
|
filterChartDataByRange,
|
||||||
flow,
|
flow,
|
||||||
getMaxAndMinValueByData,
|
getMaxAndMinValueByData,
|
||||||
parseJson
|
parseJson
|
||||||
} from '@/views/chart/components/js/util'
|
} from '@/data-visualization/chart/components/js/util'
|
||||||
import { getPadding } from '@/views/chart/components/js/panel/common/common_antv'
|
import { getPadding } from '@/data-visualization/chart/components/js/panel/common/common_antv'
|
||||||
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { valueFormatter } from '@/data-visualization/chart/components/js/formatter'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/data-visualization/hooks/web/useI18n'
|
||||||
import { isEmpty } from 'lodash-es'
|
import { isEmpty } from 'lodash-es'
|
||||||
import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
|
import { DEFAULT_MISC } from '@/data-visualization/chart/components/editor/util/chart'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const DEFAULT_DATA = []
|
const DEFAULT_DATA = []
|
||||||
|
|||||||
@ -1,402 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __extends = (this && this.__extends) || (function () {
|
|
||||||
var extendStatics = function (d, b) {
|
|
||||||
extendStatics = Object.setPrototypeOf ||
|
|
||||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
||||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
||||||
return extendStatics(d, b);
|
|
||||||
};
|
|
||||||
return function (d, b) {
|
|
||||||
extendStatics(d, b);
|
|
||||||
function __() { this.constructor = d; }
|
|
||||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
var __assign = (this && this.__assign) || function () {
|
|
||||||
__assign = Object.assign || function(t) {
|
|
||||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
||||||
s = arguments[i];
|
|
||||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
||||||
t[p] = s[p];
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
};
|
|
||||||
return __assign.apply(this, arguments);
|
|
||||||
};
|
|
||||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
||||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
||||||
return new (P || (P = Promise))(function (resolve, reject) {
|
|
||||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
||||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
||||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
||||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
||||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
||||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
||||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
||||||
function step(op) {
|
|
||||||
if (f) throw new TypeError("Generator is already executing.");
|
|
||||||
while (_) try {
|
|
||||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
||||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
||||||
switch (op[0]) {
|
|
||||||
case 0: case 1: t = op; break;
|
|
||||||
case 4: _.label++; return { value: op[1], done: false };
|
|
||||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
||||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
||||||
default:
|
|
||||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
||||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
||||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
||||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
||||||
if (t[2]) _.ops.pop();
|
|
||||||
_.trys.pop(); continue;
|
|
||||||
}
|
|
||||||
op = body.call(thisArg, _);
|
|
||||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
||||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
||||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
||||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
||||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
||||||
r[k] = a[j];
|
|
||||||
return r;
|
|
||||||
};
|
|
||||||
exports.__esModule = true;
|
|
||||||
exports.TableHeatmap = void 0;
|
|
||||||
var g2plot_1 = require("@/views/chart/components/js/panel/types/impl/g2plot");
|
|
||||||
var util_1 = require("@/views/chart/components/js/util");
|
|
||||||
var useI18n_1 = require("@/hooks/web/useI18n");
|
|
||||||
var utils_1 = require("@/utils/utils");
|
|
||||||
var lodash_es_1 = require("lodash-es");
|
|
||||||
var common_antv_1 = require("@/views/chart/components/js/panel/common/common_antv");
|
|
||||||
var formatter_1 = require("@/views/chart/components/js/formatter");
|
|
||||||
var t = useI18n_1.useI18n().t;
|
|
||||||
var DEFAULT_DATA = [];
|
|
||||||
/**
|
|
||||||
* 热力图
|
|
||||||
*/
|
|
||||||
var TableHeatmap = /** @class */ (function (_super) {
|
|
||||||
__extends(TableHeatmap, _super);
|
|
||||||
function TableHeatmap() {
|
|
||||||
var _this = _super.call(this, 't-heatmap', DEFAULT_DATA) || this;
|
|
||||||
_this.properties = [
|
|
||||||
'basic-style-selector',
|
|
||||||
'background-overall-component',
|
|
||||||
'label-selector',
|
|
||||||
'legend-selector',
|
|
||||||
'x-axis-selector',
|
|
||||||
'y-axis-selector',
|
|
||||||
'title-selector',
|
|
||||||
'tooltip-selector',
|
|
||||||
'jump-set',
|
|
||||||
'linkage',
|
|
||||||
'border-style'
|
|
||||||
];
|
|
||||||
_this.propertyInner = {
|
|
||||||
'background-overall-component': ['all'],
|
|
||||||
'basic-style-selector': ['colors'],
|
|
||||||
'label-selector': ['fontSize', 'color'],
|
|
||||||
'x-axis-selector': ['name', 'color', 'fontSize', 'position', 'axisLabel', 'axisLine'],
|
|
||||||
'y-axis-selector': [
|
|
||||||
'name',
|
|
||||||
'color',
|
|
||||||
'fontSize',
|
|
||||||
'position',
|
|
||||||
'axisLabel',
|
|
||||||
'axisLine',
|
|
||||||
'showLengthLimit'
|
|
||||||
],
|
|
||||||
'title-selector': [
|
|
||||||
'title',
|
|
||||||
'fontSize',
|
|
||||||
'color',
|
|
||||||
'hPosition',
|
|
||||||
'isItalic',
|
|
||||||
'isBolder',
|
|
||||||
'remarkShow',
|
|
||||||
'fontFamily',
|
|
||||||
'letterSpace',
|
|
||||||
'fontShadow'
|
|
||||||
],
|
|
||||||
'legend-selector': ['orient', 'color', 'fontSize', 'hPosition', 'vPosition'],
|
|
||||||
'tooltip-selector': ['show', 'color', 'fontSize', 'backgroundColor'],
|
|
||||||
'border-style': ['all']
|
|
||||||
};
|
|
||||||
_this.axis = ['xAxis', 'xAxisExt', 'extColor', 'filter'];
|
|
||||||
_this.axisConfig = {
|
|
||||||
xAxis: {
|
|
||||||
name: t('chart.x_axis') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 1
|
|
||||||
},
|
|
||||||
xAxisExt: {
|
|
||||||
name: t('chart.y_axis') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd',
|
|
||||||
limit: 1
|
|
||||||
},
|
|
||||||
extColor: {
|
|
||||||
name: t('chart.color') + " / " + t('chart.dimension_or_quota'),
|
|
||||||
limit: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
_this.getDefaultLength = function (chart, l) {
|
|
||||||
var containerDom = document.getElementById(chart.container);
|
|
||||||
var containerHeight = (containerDom === null || containerDom === void 0 ? void 0 : containerDom.clientHeight) || 100;
|
|
||||||
var containerWidth = (containerDom === null || containerDom === void 0 ? void 0 : containerDom.clientWidth) || 100;
|
|
||||||
var defaultLength = containerHeight - containerHeight * 0.5;
|
|
||||||
if (l.orient !== 'vertical') {
|
|
||||||
defaultLength = containerWidth - containerWidth * 0.5;
|
|
||||||
}
|
|
||||||
return defaultLength;
|
|
||||||
};
|
|
||||||
_this.sortData = function (fieldObj, data) {
|
|
||||||
var deType = fieldObj.deType, sort = fieldObj.sort, customSort = fieldObj.customSort;
|
|
||||||
if (sort === 'desc') {
|
|
||||||
if (deType === 0) {
|
|
||||||
return data.sort().reverse();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return data.sort(function (a, b) { return b - a; });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (sort === 'asc') {
|
|
||||||
if (deType === 0) {
|
|
||||||
return data.sort();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return data.sort(function (a, b) { return a - b; });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 如果没有指定排序方式，直接返回原始数据或 customSort
|
|
||||||
return customSort && customSort.length > 0 ? customSort : data;
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
TableHeatmap.prototype.drawChart = function (drawOptions) {
|
|
||||||
return __awaiter(this, void 0, Promise, function () {
|
|
||||||
var chart, container, action, xAxis, xAxisExt, extColor, xField, xFieldExt, extColorField, tmpData, data, initOptions, options, Heatmap, newChart;
|
|
||||||
var _a;
|
|
||||||
var _this = this;
|
|
||||||
return __generator(this, function (_b) {
|
|
||||||
switch (_b.label) {
|
|
||||||
case 0:
|
|
||||||
chart = drawOptions.chart, container = drawOptions.container, action = drawOptions.action;
|
|
||||||
xAxis = utils_1.deepCopy(chart.xAxis);
|
|
||||||
xAxisExt = utils_1.deepCopy(chart.xAxisExt);
|
|
||||||
extColor = utils_1.deepCopy(chart.extColor);
|
|
||||||
if (!(xAxis === null || xAxis === void 0 ? void 0 : xAxis.length) || !(xAxisExt === null || xAxisExt === void 0 ? void 0 : xAxisExt.length) || !(extColor === null || extColor === void 0 ? void 0 : extColor.length)) {
|
|
||||||
return [2 /*return*/];
|
|
||||||
}
|
|
||||||
xField = xAxis[0].gisbiName;
|
|
||||||
xFieldExt = xAxisExt[0].gisbiName;
|
|
||||||
extColorField = extColor[0].gisbiName;
|
|
||||||
tmpData = lodash_es_1.cloneDeep(chart.data.tableRow);
|
|
||||||
data = tmpData.filter(function (cell) { return cell[xField] && cell[xFieldExt] && cell[extColorField]; });
|
|
||||||
data.forEach(function (i) {
|
|
||||||
Object.keys(i).forEach(function (key) {
|
|
||||||
if (key === '*') {
|
|
||||||
i['@'] = i[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
initOptions = {
|
|
||||||
data: data,
|
|
||||||
xField: xField,
|
|
||||||
yField: xFieldExt,
|
|
||||||
colorField: extColorField === '*' ? '@' : extColorField,
|
|
||||||
appendPadding: common_antv_1.getPadding(chart),
|
|
||||||
meta: (_a = {},
|
|
||||||
_a[xField] = {
|
|
||||||
type: 'cat',
|
|
||||||
values: this.sortData(xAxis[0], __spreadArrays(new Set(data.map(function (i) { return i[[xField]]; }))))
|
|
||||||
},
|
|
||||||
_a[xFieldExt] = {
|
|
||||||
type: 'cat',
|
|
||||||
values: this.sortData(xAxisExt[0], __spreadArrays(new Set(data.map(function (i) { return i[[xFieldExt]]; })))).reverse()
|
|
||||||
},
|
|
||||||
_a),
|
|
||||||
legend: {
|
|
||||||
layout: 'vertical',
|
|
||||||
position: 'right',
|
|
||||||
slidable: true,
|
|
||||||
label: {
|
|
||||||
align: 'left',
|
|
||||||
spacing: 10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
chart.container = container;
|
|
||||||
options = this.setupOptions(chart, initOptions);
|
|
||||||
return [4 /*yield*/, Promise.resolve().then(function () { return require('@antv/g2plot/esm/plots/heatmap'); })];
|
|
||||||
case 1:
|
|
||||||
Heatmap = (_b.sent()).Heatmap;
|
|
||||||
newChart = new Heatmap(container, options);
|
|
||||||
newChart.on('plot:click', function (param) {
|
|
||||||
var _a;
|
|
||||||
if (!((_a = param.data) === null || _a === void 0 ? void 0 : _a.data)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var pointData = param.data.data;
|
|
||||||
var dimensionList = [];
|
|
||||||
chart.data.fields.forEach(function (item) {
|
|
||||||
Object.keys(pointData).forEach(function (key) {
|
|
||||||
if (key.startsWith('f_') && item.gisbiName === key) {
|
|
||||||
dimensionList.push({
|
|
||||||
id: item.id,
|
|
||||||
gisbiName: item.gisbiName,
|
|
||||||
value: pointData[key]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
action({
|
|
||||||
x: param.data.x,
|
|
||||||
y: param.data.y,
|
|
||||||
data: {
|
|
||||||
data: __assign(__assign({}, param.data.data), { value: dimensionList[1].value, name: dimensionList[1].id, dimensionList: dimensionList, quotaList: [dimensionList[1]] })
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
newChart.on('afterrender', function (ev) {
|
|
||||||
var _a;
|
|
||||||
var l = JSON.parse(JSON.stringify(util_1.parseJson(chart.customStyle).legend));
|
|
||||||
if (l.show) {
|
|
||||||
var rail = (_a = ev.view.getController('legend').option[extColor[0].gisbiName]) === null || _a === void 0 ? void 0 : _a['rail'];
|
|
||||||
if (rail) {
|
|
||||||
rail.defaultLength = _this.getDefaultLength(chart, l);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
common_antv_1.configAxisLabelLengthLimit(chart, newChart);
|
|
||||||
return [2 /*return*/, newChart];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.configTheme = function (chart, options) {
|
|
||||||
var tmp = _super.prototype.configTheme.call(this, chart, options);
|
|
||||||
tmp.theme.innerLabels.offset = 0;
|
|
||||||
return tmp;
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.configBasicStyle = function (chart, options) {
|
|
||||||
var _a;
|
|
||||||
var basicStyle = util_1.parseJson(chart.customAttr).basicStyle;
|
|
||||||
var color = (_a = basicStyle.colors) === null || _a === void 0 ? void 0 : _a.map(function (ele) {
|
|
||||||
return util_1.hexColorToRGBA(ele, basicStyle.alpha);
|
|
||||||
});
|
|
||||||
return __assign(__assign({}, options), { color: color });
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.configTooltip = function (chart, options) {
|
|
||||||
var tooltip;
|
|
||||||
var customAttr;
|
|
||||||
if (chart.customAttr) {
|
|
||||||
customAttr = util_1.parseJson(chart.customAttr);
|
|
||||||
// tooltip
|
|
||||||
if (customAttr.tooltip) {
|
|
||||||
var extColor = utils_1.deepCopy(chart.extColor);
|
|
||||||
var xAxisExt = utils_1.deepCopy(chart.xAxisExt);
|
|
||||||
var tooltipFiledList_1 = [xAxisExt, extColor];
|
|
||||||
var t_1 = JSON.parse(JSON.stringify(customAttr.tooltip));
|
|
||||||
if (t_1.show) {
|
|
||||||
tooltip = {
|
|
||||||
showTitle: true,
|
|
||||||
customItems: function (originalItems) {
|
|
||||||
var items = [];
|
|
||||||
var createItem = function (fieldObj, items, originalItems) {
|
|
||||||
var name = (fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.chartShowName) ? fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.chartShowName : fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.name;
|
|
||||||
var value = originalItems[0].data[fieldObj.gisbiName];
|
|
||||||
if (!isNaN(Number(value))) {
|
|
||||||
value = formatter_1.valueFormatter(value, fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.formatterCfg);
|
|
||||||
}
|
|
||||||
items.push(__assign(__assign({}, originalItems[0]), { name: name, value: value }));
|
|
||||||
};
|
|
||||||
tooltipFiledList_1.forEach(function (field) {
|
|
||||||
createItem(field[0], items, originalItems);
|
|
||||||
});
|
|
||||||
return items;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
tooltip = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return __assign(__assign({}, options), { tooltip: tooltip });
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.configXAxis = function (chart, options) {
|
|
||||||
var xAxis = common_antv_1.getXAxis(chart);
|
|
||||||
return __assign(__assign({}, options), { xAxis: xAxis ? __assign(__assign({}, xAxis), { grid: null }) : false });
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.configYAxis = function (chart, options) {
|
|
||||||
var yAxis = common_antv_1.getYAxis(chart);
|
|
||||||
return __assign(__assign({}, options), { yAxis: yAxis ? __assign(__assign({}, yAxis), { grid: null }) : false });
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.configLegend = function (chart, options) {
|
|
||||||
var tmpOptions = _super.prototype.configLegend.call(this, chart, options);
|
|
||||||
if (tmpOptions.legend) {
|
|
||||||
var l = JSON.parse(JSON.stringify(util_1.parseJson(chart.customStyle).legend));
|
|
||||||
tmpOptions.legend.slidable = true;
|
|
||||||
tmpOptions.legend.minHeight = 10;
|
|
||||||
tmpOptions.legend.minWidth = 10;
|
|
||||||
tmpOptions.legend.maxHeight = 600;
|
|
||||||
tmpOptions.legend.maxWidth = 600;
|
|
||||||
var containerDom = document.getElementById(chart.container);
|
|
||||||
var containerHeight = (containerDom === null || containerDom === void 0 ? void 0 : containerDom.clientHeight) || 100;
|
|
||||||
var containerWidth = (containerDom === null || containerDom === void 0 ? void 0 : containerDom.clientWidth) || 100;
|
|
||||||
var defaultLength = containerHeight - containerHeight * 0.5;
|
|
||||||
if (l.orient === 'vertical') {
|
|
||||||
tmpOptions.legend.offsetY = -5;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
defaultLength = containerWidth - containerWidth * 0.5;
|
|
||||||
}
|
|
||||||
tmpOptions.legend.rail = { defaultLength: defaultLength };
|
|
||||||
tmpOptions.legend.label = {
|
|
||||||
spacing: 10,
|
|
||||||
style: {
|
|
||||||
fill: l.color,
|
|
||||||
fontSize: l.fontSize
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return tmpOptions;
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.setupDefaultOptions = function (chart) {
|
|
||||||
chart.customStyle.legend.orient = 'vertical';
|
|
||||||
chart.customStyle.legend.vPosition = 'center';
|
|
||||||
chart.customStyle.legend.hPosition = 'right';
|
|
||||||
chart.customStyle.legend['rail'] = { defaultLength: 100 };
|
|
||||||
return chart;
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.configLabel = function (chart, options) {
|
|
||||||
var tmpOptions = _super.prototype.configLabel.call(this, chart, options);
|
|
||||||
if (tmpOptions.label) {
|
|
||||||
var extColor_1 = utils_1.deepCopy(chart.extColor);
|
|
||||||
var layout = [];
|
|
||||||
if (!tmpOptions.label.fullDisplay) {
|
|
||||||
layout.push.apply(layout, tmpOptions.label.layout);
|
|
||||||
}
|
|
||||||
var label = __assign(__assign({}, tmpOptions.label), { position: 'middle', layout: layout, formatter: function (data) {
|
|
||||||
var _a, _b;
|
|
||||||
var value = data[(_a = extColor_1[0]) === null || _a === void 0 ? void 0 : _a.gisbiName];
|
|
||||||
if (!isNaN(Number(value))) {
|
|
||||||
return formatter_1.valueFormatter(value, (_b = extColor_1[0]) === null || _b === void 0 ? void 0 : _b.formatterCfg);
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
} });
|
|
||||||
return __assign(__assign({}, tmpOptions), { label: label });
|
|
||||||
}
|
|
||||||
return tmpOptions;
|
|
||||||
};
|
|
||||||
TableHeatmap.prototype.setupOptions = function (chart, options) {
|
|
||||||
return util_1.flow(this.configTheme, this.configXAxis, this.configYAxis, this.configBasicStyle, this.configLegend, this.configTooltip, this.configLabel)(chart, options);
|
|
||||||
};
|
|
||||||
return TableHeatmap;
|
|
||||||
}(g2plot_1.G2PlotChartView));
|
|
||||||
exports.TableHeatmap = TableHeatmap;
|
|
||||||
@ -1,564 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __extends = (this && this.__extends) || (function () {
|
|
||||||
var extendStatics = function (d, b) {
|
|
||||||
extendStatics = Object.setPrototypeOf ||
|
|
||||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
||||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
||||||
return extendStatics(d, b);
|
|
||||||
};
|
|
||||||
return function (d, b) {
|
|
||||||
extendStatics(d, b);
|
|
||||||
function __() { this.constructor = d; }
|
|
||||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
var __assign = (this && this.__assign) || function () {
|
|
||||||
__assign = Object.assign || function(t) {
|
|
||||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
||||||
s = arguments[i];
|
|
||||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
||||||
t[p] = s[p];
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
};
|
|
||||||
return __assign.apply(this, arguments);
|
|
||||||
};
|
|
||||||
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
||||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
||||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
||||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
||||||
r[k] = a[j];
|
|
||||||
return r;
|
|
||||||
};
|
|
||||||
exports.__esModule = true;
|
|
||||||
exports.TableInfo = void 0;
|
|
||||||
var s2_1 = require("@antv/s2");
|
|
||||||
var formatter_1 = require("../../../formatter");
|
|
||||||
var util_1 = require("../../../util");
|
|
||||||
var s2_2 = require("../../types/impl/s2");
|
|
||||||
var common_1 = require("./common");
|
|
||||||
var useI18n_1 = require("@/hooks/web/useI18n");
|
|
||||||
var lodash_es_1 = require("lodash-es");
|
|
||||||
var common_table_1 = require("@/views/chart/components/js/panel/common/common_table");
|
|
||||||
var t = useI18n_1.useI18n().t;
|
|
||||||
var ImageCell = /** @class */ (function (_super) {
|
|
||||||
__extends(ImageCell, _super);
|
|
||||||
function ImageCell() {
|
|
||||||
return _super !== null && _super.apply(this, arguments) || this;
|
|
||||||
}
|
|
||||||
ImageCell.prototype.drawTextShape = function () {
|
|
||||||
common_table_1.drawImage.apply(this);
|
|
||||||
};
|
|
||||||
return ImageCell;
|
|
||||||
}(common_table_1.CustomDataCell));
|
|
||||||
/**
|
|
||||||
* 明细表
|
|
||||||
*/
|
|
||||||
var TableInfo = /** @class */ (function (_super) {
|
|
||||||
__extends(TableInfo, _super);
|
|
||||||
function TableInfo() {
|
|
||||||
var _this = _super.call(this, 'table-info', []) || this;
|
|
||||||
_this.properties = common_1.TABLE_EDITOR_PROPERTY;
|
|
||||||
_this.propertyInner = __assign(__assign({}, common_1.TABLE_EDITOR_PROPERTY_INNER), { 'table-header-selector': __spreadArrays(common_1.TABLE_EDITOR_PROPERTY_INNER['table-header-selector'], [
|
|
||||||
'tableHeaderSort',
|
|
||||||
'showTableHeader',
|
|
||||||
'headerGroup'
|
|
||||||
]), 'basic-style-selector': [
|
|
||||||
'tableColumnMode',
|
|
||||||
'tableBorderColor',
|
|
||||||
'tableScrollBarColor',
|
|
||||||
'alpha',
|
|
||||||
'tablePageMode',
|
|
||||||
'showHoverStyle',
|
|
||||||
'autoWrap'
|
|
||||||
], 'table-cell-selector': __spreadArrays(common_1.TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'], [
|
|
||||||
'tableFreeze',
|
|
||||||
'tableColumnFreezeHead',
|
|
||||||
'tableRowFreezeHead',
|
|
||||||
'mergeCells'
|
|
||||||
]), 'summary-selector': ['showSummary', 'summaryLabel'] });
|
|
||||||
_this.axis = ['xAxis', 'filter', 'drill'];
|
|
||||||
_this.axisConfig = {
|
|
||||||
xAxis: {
|
|
||||||
name: t('chart.drag_block_table_data_column') + " / " + t('chart.dimension_or_quota')
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
TableInfo.prototype.drawChart = function (drawOption) {
|
|
||||||
var _this = this;
|
|
||||||
var _a, _b, _c, _d, _e;
|
|
||||||
var container = drawOption.container, chart = drawOption.chart, pageInfo = drawOption.pageInfo, action = drawOption.action, resizeAction = drawOption.resizeAction;
|
|
||||||
var containerDom = document.getElementById(container);
|
|
||||||
// fields
|
|
||||||
var fields = (_b = (_a = chart.data) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [];
|
|
||||||
var columns = [];
|
|
||||||
var meta = [];
|
|
||||||
var axisMap = chart.xAxis.reduce(function (pre, cur) {
|
|
||||||
pre[cur.gisbiName] = cur;
|
|
||||||
return pre;
|
|
||||||
}, {});
|
|
||||||
var drillFieldMap = {};
|
|
||||||
if (chart.drill) {
|
|
||||||
// 下钻过滤字段
|
|
||||||
var filterFields_1 = chart.drillFilters.map(function (i) { return i.fieldId; });
|
|
||||||
// 下钻入口的字段下标
|
|
||||||
var drillFieldId_1 = chart.drillFields[0].id;
|
|
||||||
var drillFieldIndex = chart.xAxis.findIndex(function (ele) { return ele.id === drillFieldId_1; });
|
|
||||||
// 当前下钻字段
|
|
||||||
var curDrillFieldId_1 = chart.drillFields[filterFields_1.length].id;
|
|
||||||
var curDrillField = fields.find(function (ele) { return ele.id === curDrillFieldId_1; });
|
|
||||||
filterFields_1.push(curDrillFieldId_1);
|
|
||||||
// 移除下钻字段，把当前下钻字段插入到下钻入口位置
|
|
||||||
fields = fields.filter(function (ele) {
|
|
||||||
return !filterFields_1.includes(ele.id);
|
|
||||||
});
|
|
||||||
drillFieldMap[curDrillField.gisbiName] = chart.drillFields[0].gisbiName;
|
|
||||||
fields.splice(drillFieldIndex, 0, curDrillField);
|
|
||||||
}
|
|
||||||
fields.forEach(function (ele) {
|
|
||||||
var _a;
|
|
||||||
var f = axisMap[ele.gisbiName];
|
|
||||||
if ((f === null || f === void 0 ? void 0 : f.hide) === true) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
columns.push(ele.gisbiName);
|
|
||||||
meta.push({
|
|
||||||
field: ele.gisbiName,
|
|
||||||
name: (_a = ele.chartShowName) !== null && _a !== void 0 ? _a : ele.name,
|
|
||||||
formatter: function (value) {
|
|
||||||
if (!f) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
if (value === null || value === undefined) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
if (![2, 3, 4].includes(f.deType) || !lodash_es_1.isNumber(value)) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
var formatCfg = f.formatterCfg;
|
|
||||||
if (!formatCfg) {
|
|
||||||
formatCfg = formatter_1.formatterItem;
|
|
||||||
}
|
|
||||||
return formatter_1.valueFormatter(value, formatCfg);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
var _f = util_1.parseJson(chart.customAttr), basicStyle = _f.basicStyle, tableCell = _f.tableCell, tableHeader = _f.tableHeader, tooltip = _f.tooltip;
|
|
||||||
// 表头分组
|
|
||||||
var headerGroup = tableHeader.headerGroup, showTableHeader = tableHeader.showTableHeader;
|
|
||||||
if (headerGroup && showTableHeader !== false) {
|
|
||||||
var headerGroupConfig = tableHeader.headerGroupConfig;
|
|
||||||
if ((_c = headerGroupConfig === null || headerGroupConfig === void 0 ? void 0 : headerGroupConfig.columns) === null || _c === void 0 ? void 0 : _c.length) {
|
|
||||||
var allKeys = columns.map(function (c) { return drillFieldMap[c] || c; });
|
|
||||||
var leafNodes = common_table_1.getLeafNodes(headerGroupConfig.columns);
|
|
||||||
var leafKeys = leafNodes.map(function (c) { return c.key; });
|
|
||||||
if (lodash_es_1.isEqual(leafKeys, allKeys)) {
|
|
||||||
if (Object.keys(drillFieldMap).length) {
|
|
||||||
var originField = Object.values(drillFieldMap)[0];
|
|
||||||
var drillField = Object.keys(drillFieldMap)[0];
|
|
||||||
var drillCol = common_table_1.getColumns([originField], headerGroupConfig.columns)[0];
|
|
||||||
drillCol.key = drillField;
|
|
||||||
}
|
|
||||||
columns.splice.apply(columns, __spreadArrays([0, columns.length], headerGroupConfig.columns));
|
|
||||||
meta.push.apply(meta, headerGroupConfig.meta);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 空值处理
|
|
||||||
var newData = this.configEmptyDataStrategy(chart);
|
|
||||||
// data config
|
|
||||||
var s2DataConfig = {
|
|
||||||
fields: {
|
|
||||||
columns: columns
|
|
||||||
},
|
|
||||||
meta: meta,
|
|
||||||
data: newData
|
|
||||||
};
|
|
||||||
// options
|
|
||||||
var s2Options = {
|
|
||||||
width: containerDom.getBoundingClientRect().width,
|
|
||||||
height: containerDom.offsetHeight,
|
|
||||||
showSeriesNumber: tableHeader.showIndex,
|
|
||||||
conditions: this.configConditions(chart),
|
|
||||||
tooltip: {
|
|
||||||
getContainer: function () { return containerDom; },
|
|
||||||
renderTooltip: function (sheet) { return new common_table_1.SortTooltip(sheet); }
|
|
||||||
},
|
|
||||||
interaction: {
|
|
||||||
hoverHighlight: !(basicStyle.showHoverStyle === false),
|
|
||||||
scrollbarPosition: newData.length
|
|
||||||
? s2_1.ScrollbarPositionType.CONTENT
|
|
||||||
: s2_1.ScrollbarPositionType.CANVAS
|
|
||||||
}
|
|
||||||
};
|
|
||||||
s2Options.style = this.configStyle(chart, s2DataConfig);
|
|
||||||
// 自适应列宽模式下，URL 字段的宽度固定为 120
|
|
||||||
if (basicStyle.tableColumnMode === 'adapt') {
|
|
||||||
var urlFields = fields.filter(function (field) { var _a; return field.deType === 7 && !((_a = axisMap[field.gisbiName]) === null || _a === void 0 ? void 0 : _a.hide); });
|
|
||||||
s2Options.style.colCfg.widthByFieldValue = urlFields === null || urlFields === void 0 ? void 0 : urlFields.reduce(function (p, n) {
|
|
||||||
var _a;
|
|
||||||
p[(_a = n.chartShowName) !== null && _a !== void 0 ? _a : n.name] = 120;
|
|
||||||
return p;
|
|
||||||
}, {});
|
|
||||||
}
|
|
||||||
if (tableCell.tableFreeze && !tableCell.mergeCells) {
|
|
||||||
s2Options.frozenColCount = (_d = tableCell.tableColumnFreezeHead) !== null && _d !== void 0 ? _d : 0;
|
|
||||||
s2Options.frozenRowCount = (_e = tableCell.tableRowFreezeHead) !== null && _e !== void 0 ? _e : 0;
|
|
||||||
}
|
|
||||||
// tooltip
|
|
||||||
this.configTooltip(chart, s2Options);
|
|
||||||
// 合并单元格
|
|
||||||
this.configMergeCells(chart, s2Options, s2DataConfig);
|
|
||||||
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
|
|
||||||
if (tableHeader.showTableHeader === false) {
|
|
||||||
s2Options.style.colCfg.height = 1;
|
|
||||||
if (tableCell.showHorizonBorder === false) {
|
|
||||||
s2Options.style.colCfg.height = 0;
|
|
||||||
}
|
|
||||||
s2Options.interaction.resize = {
|
|
||||||
colCellVertical: false
|
|
||||||
};
|
|
||||||
s2Options.colCell = function (node, sheet, config) {
|
|
||||||
node.label = ' ';
|
|
||||||
return new s2_1.TableColCell(node, sheet, config);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// header interaction
|
|
||||||
chart.container = container;
|
|
||||||
this.configHeaderInteraction(chart, s2Options);
|
|
||||||
s2Options.colCell = function (node, sheet, config) {
|
|
||||||
// 配置文本自动换行参数
|
|
||||||
node.autoWrap = tableCell.mergeCells ? false : basicStyle.autoWrap;
|
|
||||||
node.maxLines = basicStyle.maxLines;
|
|
||||||
return new common_table_1.CustomTableColCell(node, sheet, config);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 序列号和总计行
|
|
||||||
this.configSummaryRowAndIndex(chart, pageInfo, s2Options, s2DataConfig);
|
|
||||||
// 开始渲染
|
|
||||||
var newChart = new s2_1.TableSheet(containerDom, s2DataConfig, s2Options);
|
|
||||||
// 总计紧贴在单元格后面
|
|
||||||
this.summaryRowStyle(newChart, newData, tableCell, tableHeader, basicStyle.showSummary);
|
|
||||||
// 开启自动换行
|
|
||||||
if (basicStyle.autoWrap && !tableCell.mergeCells) {
|
|
||||||
// 调整表头宽度时，计算表头高度
|
|
||||||
newChart.on(s2_1.S2Event.LAYOUT_RESIZE_COL_WIDTH, function (info) {
|
|
||||||
common_table_1.calculateHeaderHeight(info, newChart, tableHeader, basicStyle, null);
|
|
||||||
});
|
|
||||||
newChart.on(s2_1.S2Event.LAYOUT_AFTER_HEADER_LAYOUT, function (ev) {
|
|
||||||
var _a;
|
|
||||||
var maxHeight = newChart.store.get('autoCalcHeight');
|
|
||||||
if (maxHeight) {
|
|
||||||
// 更新列的高度
|
|
||||||
ev.colLeafNodes.forEach(function (n) { return (n.height = maxHeight); });
|
|
||||||
ev.colsHierarchy.height = maxHeight;
|
|
||||||
newChart.store.set('autoCalcHeight', undefined);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if ((_a = ev.colLeafNodes) === null || _a === void 0 ? void 0 : _a.length) {
|
|
||||||
var _b = ev.colLeafNodes[0], value = _b.value, width = _b.width;
|
|
||||||
common_table_1.calculateHeaderHeight({ info: { meta: { value: value }, resizedWidth: width } }, newChart, tableHeader, basicStyle, ev);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 自适应铺满
|
|
||||||
if (basicStyle.tableColumnMode === 'adapt') {
|
|
||||||
newChart.on(s2_1.S2Event.LAYOUT_RESIZE_COL_WIDTH, function () {
|
|
||||||
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult);
|
|
||||||
});
|
|
||||||
newChart.on(s2_1.S2Event.LAYOUT_AFTER_HEADER_LAYOUT, function (ev) {
|
|
||||||
var _a, _b;
|
|
||||||
var lastLayoutResult = newChart.store.get('lastLayoutResult');
|
|
||||||
if (lastLayoutResult) {
|
|
||||||
// 拖动表头 resize
|
|
||||||
var widthByFieldValue_1 = (_b = (_a = newChart.options.style) === null || _a === void 0 ? void 0 : _a.colCfg) === null || _b === void 0 ? void 0 : _b.widthByFieldValue;
|
|
||||||
var lastLayoutWidthMap_1 = (lastLayoutResult === null || lastLayoutResult === void 0 ? void 0 : lastLayoutResult.colLeafNodes.reduce(function (p, n) {
|
|
||||||
var _a;
|
|
||||||
p[n.value] = (_a = widthByFieldValue_1 === null || widthByFieldValue_1 === void 0 ? void 0 : widthByFieldValue_1[n.value]) !== null && _a !== void 0 ? _a : n.width;
|
|
||||||
return p;
|
|
||||||
}, {})) || {};
|
|
||||||
var totalWidth_1 = ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
n.width = lastLayoutWidthMap_1[n.value] || n.width;
|
|
||||||
n.x = p;
|
|
||||||
return p + n.width;
|
|
||||||
}, 0);
|
|
||||||
// 处理分组的单元格，宽度为所有叶子节点之和
|
|
||||||
ev.colNodes.forEach(function (n) {
|
|
||||||
if (n.colIndex === -1) {
|
|
||||||
n.width = calcTreeWidth(n);
|
|
||||||
n.x = getStartPosition(n);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
ev.colsHierarchy.width = totalWidth_1;
|
|
||||||
newChart.store.set('lastLayoutResult', undefined);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 第一次渲染初始化，把图片字段固定为 120 进行计算
|
|
||||||
var urlFields = fields
|
|
||||||
.filter(function (field) { var _a; return field.deType === 7 && !((_a = axisMap[field.gisbiName]) === null || _a === void 0 ? void 0 : _a.hide); })
|
|
||||||
.map(function (f) { return f.gisbiName; });
|
|
||||||
var totalWidthWithImg = ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
return p + (urlFields.includes(n.field) ? 120 : n.width);
|
|
||||||
}, 0);
|
|
||||||
var containerWidth = containerDom.getBoundingClientRect().width;
|
|
||||||
if (containerWidth <= totalWidthWithImg) {
|
|
||||||
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，但是需要处理非整数宽度值，不然会出现透明细线
|
|
||||||
ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
n.width = Math.round(n.width);
|
|
||||||
n.x = p;
|
|
||||||
return p + n.width;
|
|
||||||
}, 0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 图片字段固定 120, 剩余宽度按比例均摊到其他字段进行扩大
|
|
||||||
var totalWidthWithoutImg = ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
return p + (urlFields.includes(n.field) ? 0 : n.width);
|
|
||||||
}, 0);
|
|
||||||
var restWidth = containerWidth - urlFields.length * 120;
|
|
||||||
var scale = restWidth / totalWidthWithoutImg;
|
|
||||||
var totalWidth = ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
n.width = urlFields.includes(n.field) ? 120 : Math.round(n.width * scale);
|
|
||||||
n.x = p;
|
|
||||||
return p + n.width;
|
|
||||||
}, 0);
|
|
||||||
// 处理分组的单元格，宽度为所有叶子节点之和
|
|
||||||
ev.colNodes.forEach(function (n) {
|
|
||||||
if (n.colIndex === -1) {
|
|
||||||
n.width = calcTreeWidth(n);
|
|
||||||
n.x = getStartPosition(n);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (totalWidth > containerWidth) {
|
|
||||||
ev.colLeafNodes[ev.colLeafNodes.length - 1].width -= totalWidth - containerWidth;
|
|
||||||
}
|
|
||||||
ev.colsHierarchy.width = containerWidth;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 空数据时表格样式
|
|
||||||
common_table_1.configEmptyDataStyle(newChart, basicStyle, newData, container);
|
|
||||||
// click
|
|
||||||
newChart.on(s2_1.S2Event.DATA_CELL_CLICK, function (ev) {
|
|
||||||
var cell = newChart.getCell(ev.target);
|
|
||||||
var meta = cell.getMeta();
|
|
||||||
var nameIdMap = fields.reduce(function (pre, next) {
|
|
||||||
pre[next['gisbiName']] = next['id'];
|
|
||||||
return pre;
|
|
||||||
}, {});
|
|
||||||
var rowData = newChart.dataSet.getRowData(meta);
|
|
||||||
var dimensionList = [];
|
|
||||||
for (var key in rowData) {
|
|
||||||
if (nameIdMap[key]) {
|
|
||||||
dimensionList.push({ id: nameIdMap[key], value: rowData[key] });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var param = {
|
|
||||||
x: ev.x,
|
|
||||||
y: ev.y,
|
|
||||||
data: {
|
|
||||||
dimensionList: dimensionList,
|
|
||||||
name: nameIdMap[meta.valueField],
|
|
||||||
sourceType: 'table-info',
|
|
||||||
quotaList: []
|
|
||||||
}
|
|
||||||
};
|
|
||||||
action(param);
|
|
||||||
});
|
|
||||||
// 合并的单元格直接复用数据单元格的事件
|
|
||||||
newChart.on(s2_1.S2Event.MERGED_CELLS_CLICK, function (e) { return newChart.emit(s2_1.S2Event.DATA_CELL_CLICK, e); });
|
|
||||||
// tooltip
|
|
||||||
var show = tooltip.show;
|
|
||||||
if (show) {
|
|
||||||
newChart.on(s2_1.S2Event.COL_CELL_HOVER, function (event) { return _this.showTooltip(newChart, event, meta); });
|
|
||||||
newChart.on(s2_1.S2Event.DATA_CELL_HOVER, function (event) { return _this.showTooltip(newChart, event, meta); });
|
|
||||||
newChart.on(s2_1.S2Event.MERGED_CELLS_HOVER, function (event) { return _this.showTooltip(newChart, event, meta); });
|
|
||||||
// touch
|
|
||||||
this.configTouchEvent(newChart, drawOption, meta);
|
|
||||||
}
|
|
||||||
// header resize
|
|
||||||
newChart.on(s2_1.S2Event.LAYOUT_RESIZE_COL_WIDTH, function (ev) { return resizeAction(ev); });
|
|
||||||
// right click
|
|
||||||
newChart.on(s2_1.S2Event.GLOBAL_CONTEXT_MENU, function (event) { return common_table_1.copyContent(newChart, event, meta); });
|
|
||||||
// theme
|
|
||||||
var customTheme = this.configTheme(chart);
|
|
||||||
newChart.setThemeCfg({ theme: customTheme });
|
|
||||||
return newChart;
|
|
||||||
};
|
|
||||||
TableInfo.prototype.configTheme = function (chart) {
|
|
||||||
var theme = _super.prototype.configTheme.call(this, chart);
|
|
||||||
var _a = util_1.parseJson(chart.customAttr), basicStyle = _a.basicStyle, tableCell = _a.tableCell;
|
|
||||||
if (tableCell.mergeCells) {
|
|
||||||
var tableFontColor = util_1.hexColorToRGBA(tableCell.tableFontColor, basicStyle.alpha);
|
|
||||||
var tableItemBgColor = tableCell.tableItemBgColor;
|
|
||||||
if (!util_1.isAlphaColor(tableItemBgColor)) {
|
|
||||||
tableItemBgColor = util_1.hexColorToRGBA(tableItemBgColor, basicStyle.alpha);
|
|
||||||
}
|
|
||||||
var tableBorderColor = basicStyle.tableBorderColor;
|
|
||||||
var tableItemAlign = tableCell.tableItemAlign, tableItemFontSize = tableCell.tableItemFontSize;
|
|
||||||
var fontStyle = tableCell.isItalic ? 'italic' : 'normal';
|
|
||||||
var fontWeight = tableCell.isBolder === false ? 'normal' : 'bold';
|
|
||||||
var mergeCellTheme = {
|
|
||||||
dataCell: {
|
|
||||||
cell: {
|
|
||||||
crossBackgroundColor: tableItemBgColor
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mergedCell: {
|
|
||||||
cell: {
|
|
||||||
backgroundColor: tableItemBgColor,
|
|
||||||
crossBackgroundColor: tableItemBgColor,
|
|
||||||
horizontalBorderColor: tableBorderColor,
|
|
||||||
verticalBorderColor: tableBorderColor,
|
|
||||||
horizontalBorderWidth: tableCell.showHorizonBorder ? 1 : 0,
|
|
||||||
verticalBorderWidth: tableCell.showVerticalBorder ? 1 : 0
|
|
||||||
},
|
|
||||||
bolderText: {
|
|
||||||
fill: tableFontColor,
|
|
||||||
textAlign: tableItemAlign,
|
|
||||||
fontSize: tableItemFontSize,
|
|
||||||
fontStyle: fontStyle,
|
|
||||||
fontWeight: fontWeight
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
fill: tableFontColor,
|
|
||||||
textAlign: tableItemAlign,
|
|
||||||
fontSize: tableItemFontSize,
|
|
||||||
fontStyle: fontStyle,
|
|
||||||
fontWeight: fontWeight
|
|
||||||
},
|
|
||||||
measureText: {
|
|
||||||
fill: tableFontColor,
|
|
||||||
textAlign: tableItemAlign,
|
|
||||||
fontSize: tableItemFontSize,
|
|
||||||
fontStyle: fontStyle,
|
|
||||||
fontWeight: fontWeight
|
|
||||||
},
|
|
||||||
seriesText: {
|
|
||||||
fill: tableFontColor,
|
|
||||||
textAlign: tableItemAlign,
|
|
||||||
fontSize: tableItemFontSize,
|
|
||||||
fontStyle: fontStyle,
|
|
||||||
fontWeight: fontWeight
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
lodash_es_1.merge(theme, mergeCellTheme);
|
|
||||||
}
|
|
||||||
return theme;
|
|
||||||
};
|
|
||||||
TableInfo.prototype.configSummaryRowAndIndex = function (chart, pageInfo, s2Options, s2DataConfig) {
|
|
||||||
var _a, _b;
|
|
||||||
var _c = util_1.parseJson(chart.customAttr), tableHeader = _c.tableHeader, basicStyle = _c.basicStyle, tableCell = _c.tableCell;
|
|
||||||
var fields = (_b = (_a = chart.data) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [];
|
|
||||||
// 开启序号之后，第一列就是序号列，修改 label 即可
|
|
||||||
if (s2Options.showSeriesNumber) {
|
|
||||||
var indexLabel_1 = tableHeader.indexLabel;
|
|
||||||
if (!indexLabel_1) {
|
|
||||||
indexLabel_1 = '';
|
|
||||||
}
|
|
||||||
s2Options.layoutCoordinate = function (_, __, col) {
|
|
||||||
if (col.colIndex === 0 && col.rowIndex === 0) {
|
|
||||||
col.label = indexLabel_1;
|
|
||||||
col.value = indexLabel_1;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
var showSummary = basicStyle.showSummary, summaryLabel = basicStyle.summaryLabel;
|
|
||||||
var data = s2DataConfig.data;
|
|
||||||
var xAxis = chart.xAxis;
|
|
||||||
if (showSummary && (data === null || data === void 0 ? void 0 : data.length)) {
|
|
||||||
// 设置汇总行高度和表头一致
|
|
||||||
var heightByField = {};
|
|
||||||
heightByField[data.length] = tableHeader.tableTitleHeight;
|
|
||||||
s2Options.style.rowCfg = { heightByField: heightByField };
|
|
||||||
// 计算汇总加入到数据里，冻结最后一行
|
|
||||||
s2Options.frozenTrailingRowCount = 1;
|
|
||||||
var axis = lodash_es_1.filter(xAxis, function (axis) { return [2, 3, 4].includes(axis.deType); });
|
|
||||||
var summaryObj = common_table_1.getSummaryRow(data, axis, basicStyle.seriesSummary);
|
|
||||||
data.push(summaryObj);
|
|
||||||
}
|
|
||||||
s2Options.dataCell = function (viewMeta) {
|
|
||||||
var _a;
|
|
||||||
// 总计行处理
|
|
||||||
if (showSummary && viewMeta.rowIndex === data.length - 1) {
|
|
||||||
if (viewMeta.colIndex === 0) {
|
|
||||||
if (tableHeader.showIndex) {
|
|
||||||
viewMeta.fieldValue = summaryLabel !== null && summaryLabel !== void 0 ? summaryLabel : t('chart.total_show');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// 第一列不是数值类型的，显示总计
|
|
||||||
if (![2, 3, 4].includes((_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis[0]) === null || _a === void 0 ? void 0 : _a.deType)) {
|
|
||||||
viewMeta.fieldValue = summaryLabel !== null && summaryLabel !== void 0 ? summaryLabel : t('chart.total_show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return new common_table_1.SummaryCell(viewMeta, viewMeta === null || viewMeta === void 0 ? void 0 : viewMeta.spreadsheet);
|
|
||||||
}
|
|
||||||
var field = fields.find(function (f) { return f.gisbiName === viewMeta.valueField; });
|
|
||||||
if ((field === null || field === void 0 ? void 0 : field.deType) === 7 && chart.showPosition !== 'dialog') {
|
|
||||||
return new ImageCell(viewMeta, viewMeta === null || viewMeta === void 0 ? void 0 : viewMeta.spreadsheet);
|
|
||||||
}
|
|
||||||
if (viewMeta.colIndex === 0 && s2Options.showSeriesNumber) {
|
|
||||||
if (tableCell.mergeCells) {
|
|
||||||
viewMeta.fieldValue = common_table_1.getRowIndex(s2Options.mergedCellsInfo, viewMeta);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
viewMeta.fieldValue =
|
|
||||||
pageInfo.pageSize * (pageInfo.currentPage - 1) + viewMeta.rowIndex + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 配置文本自动换行参数
|
|
||||||
viewMeta.autoWrap = tableCell.mergeCells ? false : basicStyle.autoWrap;
|
|
||||||
viewMeta.maxLines = basicStyle.maxLines;
|
|
||||||
return new common_table_1.CustomDataCell(viewMeta, viewMeta === null || viewMeta === void 0 ? void 0 : viewMeta.spreadsheet);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
TableInfo.prototype.summaryRowStyle = function (newChart, newData, tableCell, tableHeader, showSummary) {
|
|
||||||
if (!showSummary || !newData.length)
|
|
||||||
return;
|
|
||||||
var columns = newChart.dataCfg.fields.columns;
|
|
||||||
var showHeader = tableHeader.showTableHeader === true;
|
|
||||||
// 不显示表头时，减少一个表头的高度
|
|
||||||
var headerAndSummaryHeight = showHeader ? getMaxTreeDepth(columns) + 1 : 1;
|
|
||||||
newChart.on(s2_1.S2Event.LAYOUT_BEFORE_RENDER, function () {
|
|
||||||
var totalHeight = tableHeader.tableTitleHeight * headerAndSummaryHeight +
|
|
||||||
tableCell.tableItemHeight * (newData.length - 1);
|
|
||||||
if (totalHeight < newChart.container.cfg.height) {
|
|
||||||
newChart.options.height =
|
|
||||||
totalHeight < newChart.container.cfg.height - 8 ? totalHeight + 8 : totalHeight;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return TableInfo;
|
|
||||||
}(s2_2.S2ChartView));
|
|
||||||
exports.TableInfo = TableInfo;
|
|
||||||
function calcTreeWidth(node) {
|
|
||||||
var _a;
|
|
||||||
if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
||||||
return node.width;
|
|
||||||
}
|
|
||||||
return node.children.reduce(function (pre, cur) {
|
|
||||||
return pre + calcTreeWidth(cur);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
function getStartPosition(node) {
|
|
||||||
var _a;
|
|
||||||
if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
||||||
return node.x;
|
|
||||||
}
|
|
||||||
return getStartPosition(node.children[0]);
|
|
||||||
}
|
|
||||||
function getMaxTreeDepth(nodes) {
|
|
||||||
if (!(nodes === null || nodes === void 0 ? void 0 : nodes.length)) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
return Math.max.apply(Math, nodes.map(function (node) {
|
|
||||||
var _a;
|
|
||||||
if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
return getMaxTreeDepth(node.children) + 1;
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
@ -1,356 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
var __extends = (this && this.__extends) || (function () {
|
|
||||||
var extendStatics = function (d, b) {
|
|
||||||
extendStatics = Object.setPrototypeOf ||
|
|
||||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
||||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
||||||
return extendStatics(d, b);
|
|
||||||
};
|
|
||||||
return function (d, b) {
|
|
||||||
extendStatics(d, b);
|
|
||||||
function __() { this.constructor = d; }
|
|
||||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
var __assign = (this && this.__assign) || function () {
|
|
||||||
__assign = Object.assign || function(t) {
|
|
||||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
||||||
s = arguments[i];
|
|
||||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
||||||
t[p] = s[p];
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
};
|
|
||||||
return __assign.apply(this, arguments);
|
|
||||||
};
|
|
||||||
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
||||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
||||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
||||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
||||||
r[k] = a[j];
|
|
||||||
return r;
|
|
||||||
};
|
|
||||||
exports.__esModule = true;
|
|
||||||
exports.TableNormal = void 0;
|
|
||||||
var useI18n_1 = require("@/hooks/web/useI18n");
|
|
||||||
var formatter_1 = require("@/views/chart/components/js/formatter");
|
|
||||||
var common_table_1 = require("@/views/chart/components/js/panel/common/common_table");
|
|
||||||
var s2_1 = require("@/views/chart/components/js/panel/types/impl/s2");
|
|
||||||
var util_1 = require("@/views/chart/components/js/util");
|
|
||||||
var s2_2 = require("@antv/s2");
|
|
||||||
var lodash_es_1 = require("lodash-es");
|
|
||||||
var common_1 = require("./common");
|
|
||||||
var t = useI18n_1.useI18n().t;
|
|
||||||
/**
|
|
||||||
* 汇总表
|
|
||||||
*/
|
|
||||||
var TableNormal = /** @class */ (function (_super) {
|
|
||||||
__extends(TableNormal, _super);
|
|
||||||
function TableNormal() {
|
|
||||||
var _this = _super.call(this, 'table-normal', []) || this;
|
|
||||||
_this.properties = common_1.TABLE_EDITOR_PROPERTY;
|
|
||||||
_this.propertyInner = __assign(__assign({}, common_1.TABLE_EDITOR_PROPERTY_INNER), { 'table-header-selector': __spreadArrays(common_1.TABLE_EDITOR_PROPERTY_INNER['table-header-selector'], [
|
|
||||||
'tableHeaderSort',
|
|
||||||
'showTableHeader'
|
|
||||||
]), 'basic-style-selector': __spreadArrays(common_1.TABLE_EDITOR_PROPERTY_INNER['basic-style-selector'], [
|
|
||||||
'tablePageMode',
|
|
||||||
'showHoverStyle'
|
|
||||||
]), 'table-cell-selector': __spreadArrays(common_1.TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'], [
|
|
||||||
'tableFreeze',
|
|
||||||
'tableColumnFreezeHead',
|
|
||||||
'tableRowFreezeHead'
|
|
||||||
]), 'summary-selector': ['showSummary', 'summaryLabel'] });
|
|
||||||
_this.axis = ['xAxis', 'yAxis', 'drill', 'filter'];
|
|
||||||
_this.axisConfig = {
|
|
||||||
xAxis: {
|
|
||||||
name: t('chart.drag_block_table_data_column') + " / " + t('chart.dimension'),
|
|
||||||
type: 'd'
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: t('chart.drag_block_table_data_column') + " / " + t('chart.quota'),
|
|
||||||
type: 'q'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
TableNormal.prototype.setupDefaultOptions = function (chart) {
|
|
||||||
chart.xAxis = [];
|
|
||||||
return chart;
|
|
||||||
};
|
|
||||||
TableNormal.prototype.drawChart = function (drawOption) {
|
|
||||||
var _this = this;
|
|
||||||
var _a, _b;
|
|
||||||
var container = drawOption.container, chart = drawOption.chart, action = drawOption.action, pageInfo = drawOption.pageInfo, resizeAction = drawOption.resizeAction;
|
|
||||||
var containerDom = document.getElementById(container);
|
|
||||||
if (!containerDom)
|
|
||||||
return;
|
|
||||||
// fields
|
|
||||||
var fields = chart.data.fields;
|
|
||||||
var columns = [];
|
|
||||||
var meta = [];
|
|
||||||
if (chart.drill) {
|
|
||||||
// 下钻过滤字段
|
|
||||||
var filterFields_1 = chart.drillFilters.map(function (i) { return i.fieldId; });
|
|
||||||
// 下钻入口的字段下标
|
|
||||||
var drillFieldId_1 = chart.drillFields[0].id;
|
|
||||||
var drillFieldIndex = chart.xAxis.findIndex(function (ele) { return ele.id === drillFieldId_1; });
|
|
||||||
// 当前下钻字段
|
|
||||||
var curDrillFieldId_1 = chart.drillFields[filterFields_1.length].id;
|
|
||||||
var curDrillField = fields.filter(function (ele) { return ele.id === curDrillFieldId_1; });
|
|
||||||
filterFields_1.push(curDrillFieldId_1);
|
|
||||||
// 移除下钻字段，把当前下钻字段插入到下钻入口位置
|
|
||||||
fields = fields.filter(function (ele) {
|
|
||||||
return !filterFields_1.includes(ele.id);
|
|
||||||
});
|
|
||||||
fields.splice.apply(fields, __spreadArrays([drillFieldIndex, 0], curDrillField));
|
|
||||||
}
|
|
||||||
var axisMap = __spreadArrays(chart.xAxis, chart.yAxis).reduce(function (pre, cur) {
|
|
||||||
pre[cur.gisbiName] = cur;
|
|
||||||
return pre;
|
|
||||||
}, {});
|
|
||||||
// add drill list
|
|
||||||
fields.forEach(function (ele) {
|
|
||||||
var _a;
|
|
||||||
var f = axisMap[ele.gisbiName];
|
|
||||||
if ((f === null || f === void 0 ? void 0 : f.hide) === true) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
columns.push(ele.gisbiName);
|
|
||||||
meta.push({
|
|
||||||
field: ele.gisbiName,
|
|
||||||
name: (_a = ele.chartShowName) !== null && _a !== void 0 ? _a : ele.name,
|
|
||||||
formatter: function (value) {
|
|
||||||
if (!f) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
if (value === null || value === undefined) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
if (![2, 3, 4].includes(f.deType) || !lodash_es_1.isNumber(value)) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
var formatCfg = f.formatterCfg;
|
|
||||||
if (!formatCfg) {
|
|
||||||
formatCfg = formatter_1.formatterItem;
|
|
||||||
}
|
|
||||||
return formatter_1.valueFormatter(value, formatCfg);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 空值处理
|
|
||||||
var newData = this.configEmptyDataStrategy(chart);
|
|
||||||
// data config
|
|
||||||
var s2DataConfig = {
|
|
||||||
fields: {
|
|
||||||
columns: columns
|
|
||||||
},
|
|
||||||
meta: meta,
|
|
||||||
data: newData
|
|
||||||
};
|
|
||||||
var _c = util_1.parseJson(chart.customAttr), basicStyle = _c.basicStyle, tableCell = _c.tableCell, tableHeader = _c.tableHeader, tooltip = _c.tooltip;
|
|
||||||
// options
|
|
||||||
var s2Options = {
|
|
||||||
width: containerDom.getBoundingClientRect().width,
|
|
||||||
height: containerDom.offsetHeight,
|
|
||||||
showSeriesNumber: tableHeader.showIndex,
|
|
||||||
conditions: this.configConditions(chart),
|
|
||||||
tooltip: {
|
|
||||||
getContainer: function () { return containerDom; },
|
|
||||||
renderTooltip: function (sheet) { return new common_table_1.SortTooltip(sheet); }
|
|
||||||
},
|
|
||||||
interaction: {
|
|
||||||
hoverHighlight: !(basicStyle.showHoverStyle === false),
|
|
||||||
scrollbarPosition: newData.length
|
|
||||||
? s2_2.ScrollbarPositionType.CONTENT
|
|
||||||
: s2_2.ScrollbarPositionType.CANVAS
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 列宽设置
|
|
||||||
s2Options.style = this.configStyle(chart, s2DataConfig);
|
|
||||||
// 行列冻结
|
|
||||||
if (tableCell.tableFreeze) {
|
|
||||||
s2Options.frozenColCount = (_a = tableCell.tableColumnFreezeHead) !== null && _a !== void 0 ? _a : 0;
|
|
||||||
s2Options.frozenRowCount = (_b = tableCell.tableRowFreezeHead) !== null && _b !== void 0 ? _b : 0;
|
|
||||||
}
|
|
||||||
// tooltip
|
|
||||||
this.configTooltip(chart, s2Options);
|
|
||||||
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
|
|
||||||
if (tableHeader.showTableHeader === false) {
|
|
||||||
s2Options.style.colCfg.height = 1;
|
|
||||||
if (tableCell.showHorizonBorder === false) {
|
|
||||||
s2Options.style.colCfg.height = 0;
|
|
||||||
}
|
|
||||||
s2Options.interaction.resize = {
|
|
||||||
colCellVertical: false
|
|
||||||
};
|
|
||||||
s2Options.colCell = function (node, sheet, config) {
|
|
||||||
node.label = ' ';
|
|
||||||
return new s2_2.TableColCell(node, sheet, config);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// header interaction
|
|
||||||
chart.container = container;
|
|
||||||
this.configHeaderInteraction(chart, s2Options);
|
|
||||||
}
|
|
||||||
// 配置总计和序号列
|
|
||||||
this.configSummaryRowAndIndex(chart, pageInfo, s2Options, s2DataConfig);
|
|
||||||
// 开始渲染
|
|
||||||
var newChart = new s2_2.TableSheet(containerDom, s2DataConfig, s2Options);
|
|
||||||
// 总计紧贴在单元格后面
|
|
||||||
this.summaryRowStyle(newChart, newData, tableCell, tableHeader, basicStyle.showSummary);
|
|
||||||
// 自适应铺满
|
|
||||||
if (basicStyle.tableColumnMode === 'adapt') {
|
|
||||||
newChart.on(s2_2.S2Event.LAYOUT_RESIZE_COL_WIDTH, function () {
|
|
||||||
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult);
|
|
||||||
});
|
|
||||||
newChart.on(s2_2.S2Event.LAYOUT_AFTER_HEADER_LAYOUT, function (ev) {
|
|
||||||
var _a, _b;
|
|
||||||
var lastLayoutResult = newChart.store.get('lastLayoutResult');
|
|
||||||
if (lastLayoutResult) {
|
|
||||||
// 拖动表头 resize
|
|
||||||
var widthByFieldValue_1 = (_b = (_a = newChart.options.style) === null || _a === void 0 ? void 0 : _a.colCfg) === null || _b === void 0 ? void 0 : _b.widthByFieldValue;
|
|
||||||
var lastLayoutWidthMap_1 = (lastLayoutResult === null || lastLayoutResult === void 0 ? void 0 : lastLayoutResult.colLeafNodes.reduce(function (p, n) {
|
|
||||||
var _a;
|
|
||||||
p[n.value] = (_a = widthByFieldValue_1 === null || widthByFieldValue_1 === void 0 ? void 0 : widthByFieldValue_1[n.value]) !== null && _a !== void 0 ? _a : n.width;
|
|
||||||
return p;
|
|
||||||
}, {})) || {};
|
|
||||||
var totalWidth_1 = ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
n.width = lastLayoutWidthMap_1[n.value] || n.width;
|
|
||||||
n.x = p;
|
|
||||||
return p + n.width;
|
|
||||||
}, 0);
|
|
||||||
ev.colsHierarchy.width = totalWidth_1;
|
|
||||||
newChart.store.set('lastLayoutResult', undefined);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var containerWidth = containerDom.getBoundingClientRect().width;
|
|
||||||
var scale = containerWidth / ev.colsHierarchy.width;
|
|
||||||
if (scale <= 1) {
|
|
||||||
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，但是需要处理非整数宽度值，不然会出现透明细线
|
|
||||||
ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
n.width = Math.round(n.width);
|
|
||||||
n.x = p;
|
|
||||||
return p + n.width;
|
|
||||||
}, 0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var totalWidth = ev.colLeafNodes.reduce(function (p, n) {
|
|
||||||
n.width = Math.round(n.width * scale);
|
|
||||||
n.x = p;
|
|
||||||
return p + n.width;
|
|
||||||
}, 0);
|
|
||||||
if (totalWidth > containerWidth) {
|
|
||||||
// 从最后一列减掉
|
|
||||||
ev.colLeafNodes[ev.colLeafNodes.length - 1].width -= totalWidth - containerWidth;
|
|
||||||
}
|
|
||||||
ev.colsHierarchy.width = containerWidth;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
common_table_1.configEmptyDataStyle(newChart, basicStyle, newData, container);
|
|
||||||
// click
|
|
||||||
newChart.on(s2_2.S2Event.DATA_CELL_CLICK, function (ev) {
|
|
||||||
var cell = newChart.getCell(ev.target);
|
|
||||||
var meta = cell.getMeta();
|
|
||||||
var nameIdMap = fields.reduce(function (pre, next) {
|
|
||||||
pre[next['gisbiName']] = next['id'];
|
|
||||||
return pre;
|
|
||||||
}, {});
|
|
||||||
var rowData = newChart.dataSet.getRowData(meta);
|
|
||||||
var dimensionList = [];
|
|
||||||
for (var key in rowData) {
|
|
||||||
if (nameIdMap[key]) {
|
|
||||||
dimensionList.push({ id: nameIdMap[key], value: rowData[key] });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var param = {
|
|
||||||
x: ev.x,
|
|
||||||
y: ev.y,
|
|
||||||
data: {
|
|
||||||
dimensionList: dimensionList,
|
|
||||||
name: nameIdMap[meta.valueField],
|
|
||||||
sourceType: 'table-normal',
|
|
||||||
quotaList: []
|
|
||||||
}
|
|
||||||
};
|
|
||||||
action(param);
|
|
||||||
});
|
|
||||||
// tooltip
|
|
||||||
var show = tooltip.show;
|
|
||||||
if (show) {
|
|
||||||
newChart.on(s2_2.S2Event.COL_CELL_HOVER, function (event) { return _this.showTooltip(newChart, event, meta); });
|
|
||||||
newChart.on(s2_2.S2Event.DATA_CELL_HOVER, function (event) { return _this.showTooltip(newChart, event, meta); });
|
|
||||||
// touch
|
|
||||||
this.configTouchEvent(newChart, drawOption, meta);
|
|
||||||
}
|
|
||||||
// header resize
|
|
||||||
newChart.on(s2_2.S2Event.LAYOUT_RESIZE_COL_WIDTH, function (ev) { return resizeAction(ev); });
|
|
||||||
// right click
|
|
||||||
newChart.on(s2_2.S2Event.GLOBAL_CONTEXT_MENU, function (event) { return common_table_1.copyContent(newChart, event, meta); });
|
|
||||||
// theme
|
|
||||||
var customTheme = this.configTheme(chart);
|
|
||||||
newChart.setThemeCfg({ theme: customTheme });
|
|
||||||
return newChart;
|
|
||||||
};
|
|
||||||
TableNormal.prototype.configSummaryRowAndIndex = function (chart, pageInfo, s2Options, s2DataConfig) {
|
|
||||||
var _a = util_1.parseJson(chart.customAttr), tableHeader = _a.tableHeader, basicStyle = _a.basicStyle;
|
|
||||||
// 开启序号之后，第一列就是序号列，修改 label 即可
|
|
||||||
if (s2Options.showSeriesNumber) {
|
|
||||||
var indexLabel_1 = tableHeader.indexLabel;
|
|
||||||
if (!indexLabel_1) {
|
|
||||||
indexLabel_1 = '';
|
|
||||||
}
|
|
||||||
s2Options.layoutCoordinate = function (_, __, col) {
|
|
||||||
if (col.colIndex === 0 && col.rowIndex === 0) {
|
|
||||||
col.label = indexLabel_1;
|
|
||||||
col.value = indexLabel_1;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
var showSummary = basicStyle.showSummary, summaryLabel = basicStyle.summaryLabel;
|
|
||||||
var data = s2DataConfig.data;
|
|
||||||
var xAxis = chart.xAxis, yAxis = chart.yAxis;
|
|
||||||
if (showSummary && (data === null || data === void 0 ? void 0 : data.length)) {
|
|
||||||
// 设置汇总行高度和表头一致
|
|
||||||
var heightByField = {};
|
|
||||||
heightByField[data.length] = tableHeader.tableTitleHeight;
|
|
||||||
s2Options.style.rowCfg = { heightByField: heightByField };
|
|
||||||
// 计算汇总加入到数据里，冻结最后一行
|
|
||||||
s2Options.frozenTrailingRowCount = 1;
|
|
||||||
var summaryObj = common_table_1.getSummaryRow(data, yAxis, basicStyle.seriesSummary);
|
|
||||||
data.push(summaryObj);
|
|
||||||
}
|
|
||||||
s2Options.dataCell = function (viewMeta) {
|
|
||||||
// 总计行处理
|
|
||||||
if (showSummary && viewMeta.rowIndex === data.length - 1) {
|
|
||||||
if (viewMeta.colIndex === 0) {
|
|
||||||
if (tableHeader.showIndex || (xAxis === null || xAxis === void 0 ? void 0 : xAxis.length)) {
|
|
||||||
viewMeta.fieldValue = summaryLabel !== null && summaryLabel !== void 0 ? summaryLabel : t('chart.total_show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return new common_table_1.SummaryCell(viewMeta, viewMeta === null || viewMeta === void 0 ? void 0 : viewMeta.spreadsheet);
|
|
||||||
}
|
|
||||||
if (viewMeta.colIndex === 0 && s2Options.showSeriesNumber) {
|
|
||||||
viewMeta.fieldValue = pageInfo.pageSize * (pageInfo.currentPage - 1) + viewMeta.rowIndex + 1;
|
|
||||||
}
|
|
||||||
return new common_table_1.CustomDataCell(viewMeta, viewMeta === null || viewMeta === void 0 ? void 0 : viewMeta.spreadsheet);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
TableNormal.prototype.summaryRowStyle = function (newChart, newData, tableCell, tableHeader, showSummary) {
|
|
||||||
if (!showSummary || !newData.length)
|
|
||||||
return;
|
|
||||||
newChart.on(s2_2.S2Event.LAYOUT_BEFORE_RENDER, function () {
|
|
||||||
var showHeader = tableHeader.showTableHeader === true;
|
|
||||||
// 不显示表头时，减少一个表头的高度
|
|
||||||
var headerAndSummaryHeight = showHeader ? 2 : 1;
|
|
||||||
var totalHeight = tableHeader.tableTitleHeight * headerAndSummaryHeight +
|
|
||||||
tableCell.tableItemHeight * (newData.length - 1);
|
|
||||||
if (totalHeight < newChart.container.cfg.height) {
|
|
||||||
newChart.options.height =
|
|
||||||
totalHeight < newChart.container.cfg.height - 8 ? totalHeight + 8 : totalHeight;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return TableNormal;
|
|
||||||
}(s2_1.S2ChartView));
|
|
||||||
exports.TableNormal = TableNormal;
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -33,7 +33,7 @@ import {
|
|||||||
} from '@/data-visualization/chart/components/editor/util/chart'
|
} from '@/data-visualization/chart/components/editor/util/chart'
|
||||||
import DrillPath from '@/data-visualization/chart/components/views/components/DrillPath.vue'
|
import DrillPath from '@/data-visualization/chart/components/views/components/DrillPath.vue'
|
||||||
import { ElIcon, ElInput, ElMessage } from 'element-plus-secondary'
|
import { ElIcon, ElInput, ElMessage } from 'element-plus-secondary'
|
||||||
// import { useFilter } from '@/data-visualization/hooks/web/useFilter'
|
import { useFilter } from '@/data-visualization/hooks/web/useFilter'
|
||||||
import { useCache } from '@/data-visualization/hooks/web/useCache'
|
import { useCache } from '@/data-visualization/hooks/web/useCache'
|
||||||
|
|
||||||
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
||||||
@ -54,6 +54,8 @@ import request from '@/data-visualization/config/axios'
|
|||||||
import { store } from '@/data-visualization/store'
|
import { store } from '@/data-visualization/store'
|
||||||
import { clearExtremum } from '@/data-visualization/chart/components/js/extremumUitl'
|
import { clearExtremum } from '@/data-visualization/chart/components/js/extremumUitl'
|
||||||
import DePreviewPopDialog from '@/data-visualization/components/visualization/DePreviewPopDialog.vue'
|
import DePreviewPopDialog from '@/data-visualization/components/visualization/DePreviewPopDialog.vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
const route = useRoute()
|
||||||
const { wsCache } = useCache()
|
const { wsCache } = useCache()
|
||||||
const chartComponent = ref<any>()
|
const chartComponent = ref<any>()
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|||||||
@ -418,9 +418,9 @@ const reloadLinkage = () => {
|
|||||||
const resourceTable = ['canvas', 'canvasDataV', 'edit'].includes(showPosition.value)
|
const resourceTable = ['canvas', 'canvasDataV', 'edit'].includes(showPosition.value)
|
||||||
? 'snapshot'
|
? 'snapshot'
|
||||||
: 'core'
|
: 'core'
|
||||||
getPanelAllLinkageInfo(dvInfo.value.id, resourceTable).then(rsp => {
|
// getPanelAllLinkageInfo(dvInfo.value.id, resourceTable).then(rsp => {
|
||||||
dvMainStore.setNowPanelTrackInfo(rsp.data)
|
// dvMainStore.setNowPanelTrackInfo(rsp.data)
|
||||||
})
|
// })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
574
frontend/src/data-visualization/hooks/web/useFilter.ts
Normal file
574
frontend/src/data-visualization/hooks/web/useFilter.ts
Normal file
@ -0,0 +1,574 @@
|
|||||||
|
import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
|
||||||
|
import type { ManipulateType } from 'dayjs'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { getDynamicRange, getCustomTime } from '@/data-visualization/custom-component/v-query/time-format'
|
||||||
|
import { getCustomRange } from '@/data-visualization/custom-component/v-query/time-format-dayjs'
|
||||||
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
|
const { componentData, canvasStyleData } = storeToRefs(dvMainStore)
|
||||||
|
|
||||||
|
const getDynamicRangeTime = (type: number, selectValue: any, timeGranularityMultiple: string) => {
|
||||||
|
const timeType = (timeGranularityMultiple || '').split('range')[0]
|
||||||
|
|
||||||
|
if ('datetimerange' === timeGranularityMultiple || type === 1 || !timeType) {
|
||||||
|
return selectValue.map(ele => +new Date(ele))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (timeGranularityMultiple.includes('range') && type === 7) {
|
||||||
|
return [
|
||||||
|
+new Date(
|
||||||
|
dayjs(selectValue[0])
|
||||||
|
.startOf(timeType as 'month' | 'year' | 'date')
|
||||||
|
.format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
),
|
||||||
|
+new Date(
|
||||||
|
dayjs(selectValue[1])
|
||||||
|
.endOf(timeType as 'month' | 'year' | 'date')
|
||||||
|
.format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const [start] = selectValue
|
||||||
|
|
||||||
|
return [
|
||||||
|
+new Date(start),
|
||||||
|
+getCustomTime(
|
||||||
|
1,
|
||||||
|
timeType as ManipulateType,
|
||||||
|
timeType,
|
||||||
|
'b',
|
||||||
|
null,
|
||||||
|
timeGranularityMultiple,
|
||||||
|
'start-config'
|
||||||
|
) - 1000
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const forMatterValue = (
|
||||||
|
type: number,
|
||||||
|
selectValue: any,
|
||||||
|
timeGranularity: string,
|
||||||
|
timeGranularityMultiple: string
|
||||||
|
) => {
|
||||||
|
if (![1, 7].includes(type)) {
|
||||||
|
return Array.isArray(selectValue) ? selectValue : [selectValue]
|
||||||
|
}
|
||||||
|
return Array.isArray(selectValue)
|
||||||
|
? getDynamicRangeTime(type, selectValue, timeGranularityMultiple)
|
||||||
|
: getRange(selectValue, timeGranularity)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getRange = (selectValue, timeGranularity) => {
|
||||||
|
switch (timeGranularity) {
|
||||||
|
case 'year':
|
||||||
|
return getYearEnd(selectValue)
|
||||||
|
case 'month':
|
||||||
|
return getMonthEnd(selectValue)
|
||||||
|
case 'date':
|
||||||
|
return getDayEnd(selectValue)
|
||||||
|
case 'datetime':
|
||||||
|
return [+new Date(selectValue), +new Date(selectValue)]
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getYearEnd = timestamp => {
|
||||||
|
return [
|
||||||
|
+new Date(dayjs(timestamp).startOf('year').format('YYYY/MM/DD HH:mm:ss')),
|
||||||
|
+new Date(dayjs(timestamp).endOf('year').format('YYYY/MM/DD HH:mm:ss'))
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMonthEnd = timestamp => {
|
||||||
|
return [
|
||||||
|
+new Date(dayjs(timestamp).startOf('month').format('YYYY/MM/DD HH:mm:ss')),
|
||||||
|
+new Date(dayjs(timestamp).endOf('month').format('YYYY/MM/DD HH:mm:ss'))
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDayEnd = timestamp => {
|
||||||
|
return [
|
||||||
|
+new Date(dayjs(timestamp).startOf('day').format('YYYY/MM/DD HH:mm:ss')),
|
||||||
|
+new Date(dayjs(timestamp).endOf('day').format('YYYY/MM/DD HH:mm:ss'))
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFieldId = (arr, result, relationshipChartIndex, ids) => {
|
||||||
|
const [obj] = [...result].reverse()
|
||||||
|
const valArr = obj.split(',')
|
||||||
|
const idArr = arr.map(ele => ele.id)
|
||||||
|
const indexArr = relationshipChartIndex.filter(ele => valArr[ele])
|
||||||
|
if (!relationshipChartIndex.length) {
|
||||||
|
return [idArr.slice(0, valArr.length).join(','), [...new Set(result)]]
|
||||||
|
} else {
|
||||||
|
for (const key in result) {
|
||||||
|
result[key] = indexArr.map(ele => result[key].split(',')[ele]).join(',')
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
indexArr.map(ele => ids[ele]).join(','),
|
||||||
|
result.filter(ele => !ele.endsWith(',') && !!ele)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getValueByDefaultValueCheckOrFirstLoad = (
|
||||||
|
defaultValueCheck: boolean,
|
||||||
|
defaultValue: any,
|
||||||
|
selectValue: any,
|
||||||
|
firstLoad: boolean,
|
||||||
|
multiple: boolean,
|
||||||
|
defaultMapValue: any,
|
||||||
|
optionValueSource: number,
|
||||||
|
mapValue: any,
|
||||||
|
displayType: string,
|
||||||
|
displayId: string
|
||||||
|
) => {
|
||||||
|
if (+displayType === 9) {
|
||||||
|
if (firstLoad) {
|
||||||
|
return defaultValueCheck
|
||||||
|
? multiple
|
||||||
|
? defaultValue.map(ele => ele.split('-de-').join(','))
|
||||||
|
: (defaultValue || '').split('-de-').join(',')
|
||||||
|
: []
|
||||||
|
}
|
||||||
|
return selectValue?.length
|
||||||
|
? multiple
|
||||||
|
? selectValue.map(ele => ele.split('-de-').join(','))
|
||||||
|
: (selectValue || '').split('-de-').join(',')
|
||||||
|
: []
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
optionValueSource === 1 &&
|
||||||
|
(defaultMapValue?.length || displayId) &&
|
||||||
|
![1, 7].includes(+displayType)
|
||||||
|
) {
|
||||||
|
if (firstLoad) {
|
||||||
|
return defaultValueCheck ? defaultMapValue : multiple ? [] : ''
|
||||||
|
}
|
||||||
|
return (selectValue?.length ? mapValue : selectValue) || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if (firstLoad) {
|
||||||
|
return defaultValueCheck ? defaultValue : multiple ? [] : ''
|
||||||
|
}
|
||||||
|
return selectValue ? selectValue : multiple ? [] : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useFilter = (curComponentId: string, firstLoad = false) => {
|
||||||
|
// 弹窗区域过滤组件是否生效
|
||||||
|
const popupAvailable = canvasStyleData.value.popupAvailable
|
||||||
|
const filter = []
|
||||||
|
const queryComponentList = componentData.value.filter(
|
||||||
|
ele =>
|
||||||
|
ele.component === 'VQuery' &&
|
||||||
|
(popupAvailable || (!popupAvailable && ele.category !== 'hidden'))
|
||||||
|
)
|
||||||
|
searchQuery(queryComponentList, filter, curComponentId, firstLoad)
|
||||||
|
componentData.value.forEach(ele => {
|
||||||
|
if (ele.component === 'Group') {
|
||||||
|
const list = ele.propValue.filter(
|
||||||
|
item =>
|
||||||
|
item.innerType === 'VQuery' &&
|
||||||
|
(popupAvailable || (!popupAvailable && ele.category !== 'hidden'))
|
||||||
|
)
|
||||||
|
searchQuery(list, filter, curComponentId, firstLoad)
|
||||||
|
|
||||||
|
list.forEach(element => {
|
||||||
|
if (element.innerType === 'DeTabs') {
|
||||||
|
element.propValue.forEach(itx => {
|
||||||
|
const elementArr = itx.componentData.filter(
|
||||||
|
item =>
|
||||||
|
item.innerType === 'VQuery' &&
|
||||||
|
(popupAvailable || (!popupAvailable && ele.category !== 'hidden'))
|
||||||
|
)
|
||||||
|
searchQuery(elementArr, filter, curComponentId, firstLoad)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
ele.propValue.forEach(element => {
|
||||||
|
if (element.innerType === 'DeTabs') {
|
||||||
|
element.propValue.forEach(itx => {
|
||||||
|
const elementArr = itx.componentData.filter(
|
||||||
|
item =>
|
||||||
|
item.innerType === 'VQuery' &&
|
||||||
|
(popupAvailable || (!popupAvailable && ele.category !== 'hidden'))
|
||||||
|
)
|
||||||
|
searchQuery(elementArr, filter, curComponentId, firstLoad)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ele.innerType === 'DeTabs') {
|
||||||
|
ele.propValue.forEach(itx => {
|
||||||
|
itx.componentData.forEach(v => {
|
||||||
|
if (v.component === 'Group') {
|
||||||
|
const listGroup = v.propValue.filter(
|
||||||
|
item =>
|
||||||
|
item.innerType === 'VQuery' &&
|
||||||
|
(popupAvailable || (!popupAvailable && v.category !== 'hidden'))
|
||||||
|
)
|
||||||
|
searchQuery(listGroup, filter, curComponentId, firstLoad)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const arr = itx.componentData.filter(item => item.innerType === 'VQuery')
|
||||||
|
searchQuery(arr, filter, curComponentId, firstLoad)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
filter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getResult = (
|
||||||
|
conditionType,
|
||||||
|
defaultConditionValueF,
|
||||||
|
defaultConditionValueS,
|
||||||
|
conditionValueF,
|
||||||
|
conditionValueS,
|
||||||
|
firstLoad
|
||||||
|
) => {
|
||||||
|
const valueF = firstLoad ? defaultConditionValueF : conditionValueF
|
||||||
|
const valueS = firstLoad ? defaultConditionValueS : conditionValueS
|
||||||
|
if (conditionType === 0) {
|
||||||
|
return valueF === '' ? [] : valueF
|
||||||
|
}
|
||||||
|
return [valueF || '', valueS || ''].filter(ele => ele !== '')
|
||||||
|
}
|
||||||
|
|
||||||
|
const getResultNum = (
|
||||||
|
defaultNumValueEnd,
|
||||||
|
numValueEnd,
|
||||||
|
numValueStart,
|
||||||
|
defaultNumValueStart,
|
||||||
|
defaultValueCheck,
|
||||||
|
firstLoad
|
||||||
|
) => {
|
||||||
|
if (firstLoad && !defaultValueCheck) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
const valueS = firstLoad ? defaultNumValueStart : numValueStart
|
||||||
|
const valueE = firstLoad ? defaultNumValueEnd : numValueEnd
|
||||||
|
return [valueS ?? '', valueE ?? ''].filter(ele => ele !== '')
|
||||||
|
}
|
||||||
|
|
||||||
|
const getOperator = (
|
||||||
|
displayType,
|
||||||
|
multiple,
|
||||||
|
conditionType,
|
||||||
|
defaultConditionValueOperatorF,
|
||||||
|
defaultConditionValueF,
|
||||||
|
defaultConditionValueOperatorS,
|
||||||
|
defaultConditionValueS,
|
||||||
|
conditionValueOperatorF,
|
||||||
|
conditionValueF,
|
||||||
|
conditionValueOperatorS,
|
||||||
|
conditionValueS,
|
||||||
|
firstLoad
|
||||||
|
) => {
|
||||||
|
if (+displayType === 9) {
|
||||||
|
return multiple ? 'in' : 'eq'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (+displayType === 22) {
|
||||||
|
return 'between'
|
||||||
|
}
|
||||||
|
|
||||||
|
const valueF = firstLoad ? defaultConditionValueF : conditionValueF
|
||||||
|
const valueS = firstLoad ? defaultConditionValueS : conditionValueS
|
||||||
|
const operatorF = firstLoad ? defaultConditionValueOperatorF : conditionValueOperatorF
|
||||||
|
const operatorS = firstLoad ? defaultConditionValueOperatorS : conditionValueOperatorS
|
||||||
|
if (displayType === '8') {
|
||||||
|
if (conditionType === 0) {
|
||||||
|
return operatorF
|
||||||
|
}
|
||||||
|
const operatorArr = [valueF === '' ? '' : operatorF, valueS === '' ? '' : operatorS].filter(
|
||||||
|
ele => ele !== ''
|
||||||
|
)
|
||||||
|
if (operatorArr.length === 2) {
|
||||||
|
return operatorArr.join(`-${conditionType === 1 ? 'and' : 'or'}-`)
|
||||||
|
}
|
||||||
|
return valueF === '' ? operatorS : operatorF
|
||||||
|
}
|
||||||
|
|
||||||
|
return [1, 7].includes(+displayType) ? 'between' : multiple ? 'in' : 'eq'
|
||||||
|
}
|
||||||
|
|
||||||
|
const duplicateRemoval = arr => {
|
||||||
|
const objList = []
|
||||||
|
let idList = arr.map(ele => ele.id)
|
||||||
|
for (let index = 0; index < arr.length; index++) {
|
||||||
|
const element = arr[index]
|
||||||
|
if (idList.includes(element.id)) {
|
||||||
|
objList.push(element)
|
||||||
|
idList = idList.filter(ele => ele !== element.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return objList
|
||||||
|
}
|
||||||
|
|
||||||
|
export const searchQuery = (queryComponentList, filter, curComponentId, firstLoad) => {
|
||||||
|
queryComponentList.forEach(ele => {
|
||||||
|
if (!!ele.propValue?.length) {
|
||||||
|
ele.propValue.forEach(item => {
|
||||||
|
let shouldSearch = false
|
||||||
|
const relationshipChartIndex = []
|
||||||
|
const ids = Array(5).fill(1)
|
||||||
|
if (item.displayType === '9' && item.treeCheckedList?.length) {
|
||||||
|
item.treeCheckedList.forEach((itx, idx) => {
|
||||||
|
if (
|
||||||
|
itx.checkedFields.includes(curComponentId) &&
|
||||||
|
itx.checkedFieldsMap[curComponentId] &&
|
||||||
|
idx < item.treeFieldList.length
|
||||||
|
) {
|
||||||
|
relationshipChartIndex.push(idx)
|
||||||
|
ids[idx] = itx.checkedFieldsMap[curComponentId]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
shouldSearch =
|
||||||
|
item.checkedFields.includes(curComponentId) && item.checkedFieldsMap[curComponentId]
|
||||||
|
}
|
||||||
|
if (shouldSearch || relationshipChartIndex.length) {
|
||||||
|
let selectValue
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
selectValue: value,
|
||||||
|
timeGranularityMultiple,
|
||||||
|
defaultNumValueEnd,
|
||||||
|
numValueEnd,
|
||||||
|
numValueStart,
|
||||||
|
defaultNumValueStart,
|
||||||
|
conditionType = 0,
|
||||||
|
treeFieldList = [],
|
||||||
|
defaultConditionValueOperatorF = 'eq',
|
||||||
|
defaultConditionValueF = '',
|
||||||
|
defaultConditionValueOperatorS = 'like',
|
||||||
|
defaultConditionValueS = '',
|
||||||
|
conditionValueOperatorF = 'eq',
|
||||||
|
conditionValueF = '',
|
||||||
|
conditionValueOperatorS = 'like',
|
||||||
|
conditionValueS = '',
|
||||||
|
defaultValueCheck,
|
||||||
|
timeType = 'fixed',
|
||||||
|
defaultValue,
|
||||||
|
optionValueSource,
|
||||||
|
defaultMapValue,
|
||||||
|
mapValue,
|
||||||
|
parameters = [],
|
||||||
|
timeGranularity = 'date',
|
||||||
|
displayType,
|
||||||
|
displayId,
|
||||||
|
multiple
|
||||||
|
} = item
|
||||||
|
|
||||||
|
const isTree = +displayType === 9
|
||||||
|
|
||||||
|
if (
|
||||||
|
timeType === 'dynamic' &&
|
||||||
|
[1, 7].includes(+displayType) &&
|
||||||
|
firstLoad &&
|
||||||
|
defaultValueCheck
|
||||||
|
) {
|
||||||
|
if (+displayType === 1) {
|
||||||
|
selectValue = getDynamicRange(item)
|
||||||
|
item.defaultValue = new Date(selectValue[0])
|
||||||
|
item.selectValue = new Date(selectValue[0])
|
||||||
|
} else {
|
||||||
|
const {
|
||||||
|
timeNum,
|
||||||
|
relativeToCurrentType,
|
||||||
|
around,
|
||||||
|
relativeToCurrentRange,
|
||||||
|
arbitraryTime,
|
||||||
|
timeGranularity,
|
||||||
|
timeNumRange,
|
||||||
|
relativeToCurrentTypeRange,
|
||||||
|
aroundRange,
|
||||||
|
timeGranularityMultiple,
|
||||||
|
arbitraryTimeRange
|
||||||
|
} = item
|
||||||
|
|
||||||
|
let startTime = getCustomTime(
|
||||||
|
timeNum,
|
||||||
|
relativeToCurrentType,
|
||||||
|
timeGranularity,
|
||||||
|
around,
|
||||||
|
arbitraryTime,
|
||||||
|
timeGranularityMultiple,
|
||||||
|
'start-panel'
|
||||||
|
)
|
||||||
|
let endTime = getCustomTime(
|
||||||
|
timeNumRange,
|
||||||
|
relativeToCurrentTypeRange,
|
||||||
|
timeGranularity,
|
||||||
|
aroundRange,
|
||||||
|
arbitraryTimeRange,
|
||||||
|
timeGranularityMultiple,
|
||||||
|
'end-panel'
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!!relativeToCurrentRange && relativeToCurrentRange !== 'custom') {
|
||||||
|
;[startTime, endTime] = getCustomRange(relativeToCurrentRange)
|
||||||
|
}
|
||||||
|
item.defaultValue = [startTime, endTime]
|
||||||
|
item.selectValue = [startTime, endTime]
|
||||||
|
selectValue = [startTime, endTime]
|
||||||
|
}
|
||||||
|
} else if (displayType === '8') {
|
||||||
|
selectValue = getResult(
|
||||||
|
conditionType,
|
||||||
|
defaultConditionValueF,
|
||||||
|
defaultConditionValueS,
|
||||||
|
conditionValueF,
|
||||||
|
conditionValueS,
|
||||||
|
firstLoad
|
||||||
|
)
|
||||||
|
} else if (displayType === '22') {
|
||||||
|
selectValue = getResultNum(
|
||||||
|
defaultNumValueEnd,
|
||||||
|
numValueEnd,
|
||||||
|
numValueStart,
|
||||||
|
defaultNumValueStart,
|
||||||
|
defaultValueCheck,
|
||||||
|
firstLoad
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
selectValue = getValueByDefaultValueCheckOrFirstLoad(
|
||||||
|
defaultValueCheck,
|
||||||
|
defaultValue,
|
||||||
|
value,
|
||||||
|
firstLoad,
|
||||||
|
multiple,
|
||||||
|
defaultMapValue,
|
||||||
|
optionValueSource,
|
||||||
|
mapValue,
|
||||||
|
displayType,
|
||||||
|
displayId
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
!!selectValue?.length ||
|
||||||
|
['[object Number]', '[object Date]'].includes(
|
||||||
|
Object.prototype.toString.call(selectValue)
|
||||||
|
) ||
|
||||||
|
displayType === '8'
|
||||||
|
) {
|
||||||
|
let result = forMatterValue(
|
||||||
|
+displayType,
|
||||||
|
selectValue,
|
||||||
|
timeGranularity,
|
||||||
|
timeGranularityMultiple
|
||||||
|
)
|
||||||
|
const operator = getOperator(
|
||||||
|
displayType,
|
||||||
|
multiple,
|
||||||
|
conditionType,
|
||||||
|
defaultConditionValueOperatorF,
|
||||||
|
defaultConditionValueF,
|
||||||
|
defaultConditionValueOperatorS,
|
||||||
|
defaultConditionValueS,
|
||||||
|
conditionValueOperatorF,
|
||||||
|
conditionValueF,
|
||||||
|
conditionValueOperatorS,
|
||||||
|
conditionValueS,
|
||||||
|
firstLoad
|
||||||
|
)
|
||||||
|
if (result?.length) {
|
||||||
|
let fieldId = item.checkedFieldsMap[curComponentId]
|
||||||
|
if (isTree) {
|
||||||
|
const [i, r] = getFieldId(treeFieldList, result, relationshipChartIndex, ids)
|
||||||
|
fieldId = i
|
||||||
|
result = r
|
||||||
|
}
|
||||||
|
let parametersFilter = duplicateRemoval(
|
||||||
|
parameters.reduce((pre, next) => {
|
||||||
|
if (next.id === fieldId && !pre.length) {
|
||||||
|
pre.push(next)
|
||||||
|
}
|
||||||
|
return pre
|
||||||
|
}, [])
|
||||||
|
)
|
||||||
|
|
||||||
|
if (item.checkedFieldsMapArr?.[curComponentId]?.length) {
|
||||||
|
const endTimeFieldId = item.checkedFieldsMapArr?.[curComponentId].find(
|
||||||
|
element => element !== fieldId
|
||||||
|
)
|
||||||
|
const resultEnd = Array(2).fill(
|
||||||
|
endTimeFieldId === item.checkedFieldsMapEnd[curComponentId]
|
||||||
|
? result[1]
|
||||||
|
: result[0]
|
||||||
|
)
|
||||||
|
result = Array(2).fill(
|
||||||
|
endTimeFieldId === item.checkedFieldsMapEnd[curComponentId]
|
||||||
|
? result[0]
|
||||||
|
: result[1]
|
||||||
|
)
|
||||||
|
parametersFilter = duplicateRemoval(
|
||||||
|
item.parametersArr[curComponentId].filter(e => e.id === fieldId)
|
||||||
|
)
|
||||||
|
|
||||||
|
const parametersFilterEnd = duplicateRemoval(
|
||||||
|
item.parametersArr[curComponentId].filter(e => e.id === endTimeFieldId)
|
||||||
|
)
|
||||||
|
filter.push({
|
||||||
|
componentId: ele.id,
|
||||||
|
fieldId: endTimeFieldId,
|
||||||
|
operator,
|
||||||
|
value: resultEnd,
|
||||||
|
parameters: parametersFilterEnd,
|
||||||
|
isTree
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.checkedFieldsMapArrNum?.[curComponentId]?.length) {
|
||||||
|
const endTimeFieldId = item.checkedFieldsMapArrNum?.[curComponentId].find(
|
||||||
|
element => element !== fieldId
|
||||||
|
)
|
||||||
|
const resultEnd = Array(2).fill(
|
||||||
|
endTimeFieldId === item.checkedFieldsMapEndNum[curComponentId]
|
||||||
|
? result[1]
|
||||||
|
: result[0]
|
||||||
|
)
|
||||||
|
result = Array(2).fill(
|
||||||
|
endTimeFieldId === item.checkedFieldsMapEndNum[curComponentId]
|
||||||
|
? result[0]
|
||||||
|
: result[1]
|
||||||
|
)
|
||||||
|
parametersFilter = duplicateRemoval(
|
||||||
|
item.parametersArr[curComponentId].filter(e => e.id === fieldId)
|
||||||
|
)
|
||||||
|
|
||||||
|
const parametersFilterEnd = duplicateRemoval(
|
||||||
|
item.parametersArr[curComponentId].filter(e => e.id === endTimeFieldId)
|
||||||
|
)
|
||||||
|
filter.push({
|
||||||
|
componentId: ele.id,
|
||||||
|
fieldId: endTimeFieldId,
|
||||||
|
operator,
|
||||||
|
value: resultEnd,
|
||||||
|
parameters: parametersFilterEnd,
|
||||||
|
isTree
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
filter.push({
|
||||||
|
filterId: id,
|
||||||
|
componentId: ele.id,
|
||||||
|
fieldId,
|
||||||
|
operator,
|
||||||
|
value: result,
|
||||||
|
parameters: parametersFilter,
|
||||||
|
isTree
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -388,9 +388,9 @@ export async function initCanvasData(dvId, busiFlag, callBack) {
|
|||||||
dvMainStore.updateCurDvInfo(dvInfo)
|
dvMainStore.updateCurDvInfo(dvInfo)
|
||||||
dvMainStore.setCanvasViewInfo(canvasViewInfoPreview)
|
dvMainStore.setCanvasViewInfo(canvasViewInfoPreview)
|
||||||
// 刷新联动信息
|
// 刷新联动信息
|
||||||
getPanelAllLinkageInfo(dvInfo.id).then(rsp => {
|
// getPanelAllLinkageInfo(dvInfo.id).then(rsp => {
|
||||||
dvMainStore.setNowPanelTrackInfo(rsp.data)
|
// dvMainStore.setNowPanelTrackInfo(rsp.data)
|
||||||
})
|
// })
|
||||||
// 刷新跳转信息
|
// 刷新跳转信息
|
||||||
queryVisualizationJumpInfo(dvInfo.id).then(rsp => {
|
queryVisualizationJumpInfo(dvInfo.id).then(rsp => {
|
||||||
dvMainStore.setNowPanelJumpInfo(rsp.data)
|
dvMainStore.setNowPanelJumpInfo(rsp.data)
|
||||||
@ -504,9 +504,9 @@ export function initCanvasDataMobile(dvId, busiFlag, callBack) {
|
|||||||
dvMainStore.updateCurDvInfo(dvInfo)
|
dvMainStore.updateCurDvInfo(dvInfo)
|
||||||
dvMainStore.setCanvasViewInfo(canvasViewInfoPreview)
|
dvMainStore.setCanvasViewInfo(canvasViewInfoPreview)
|
||||||
// 刷新联动信息
|
// 刷新联动信息
|
||||||
getPanelAllLinkageInfo(dvInfo.id).then(rsp => {
|
// getPanelAllLinkageInfo(dvInfo.id).then(rsp => {
|
||||||
dvMainStore.setNowPanelTrackInfo(rsp.data)
|
// dvMainStore.setNowPanelTrackInfo(rsp.data)
|
||||||
})
|
// })
|
||||||
// 刷新跳转信息
|
// 刷新跳转信息
|
||||||
queryVisualizationJumpInfo(dvInfo.id).then(rsp => {
|
queryVisualizationJumpInfo(dvInfo.id).then(rsp => {
|
||||||
dvMainStore.setNowPanelJumpInfo(rsp.data)
|
dvMainStore.setNowPanelJumpInfo(rsp.data)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user