From 688a1578924522b09e2ebfe92b4f571325bb11e3 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Mon, 17 Jun 2024 21:49:57 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=AC=A6=E5=8F=B7=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/manage/ChartDataManage.java | 24 ++ .../dataease/chart/utils/ChartDataBuild.java | 2 +- .../src/assets/svg/symbolic-map.svg | 93 +++++ .../data-visualization/canvas/Shape.vue | 10 +- .../components/visualization/SettingMenu.vue | 6 +- core/core-frontend/src/locales/zh-CN.ts | 7 +- .../src/models/chart/chart-attr.d.ts | 24 ++ .../src/models/chart/editor.d.ts | 1 + .../editor/drag-label/QuotaLabel.vue | 2 +- .../editor/editor-style/ChartStyle.vue | 6 + .../components/BasicStyleSelector.vue | 90 ++++- .../editor-style/components/LabelSelector.vue | 95 ++++- .../components/TooltipSelector.vue | 75 +++- .../views/chart/components/editor/index.vue | 1 + .../chart/components/editor/util/chart.ts | 9 +- .../js/panel/charts/map/flow-map.ts | 2 +- .../js/panel/charts/map/symbolic-map.ts | 339 ++++++++++++++++++ .../components/js/panel/types/impl/l7.ts | 30 +- .../views/components/ChartComponentG2Plot.vue | 6 +- 19 files changed, 796 insertions(+), 26 deletions(-) create mode 100644 core/core-frontend/src/assets/svg/symbolic-map.svg create mode 100644 core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts diff --git a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java index b4f810d23c..de276c7c17 100644 --- a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java +++ b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java @@ -214,6 +214,7 @@ public class ChartDataManage { || StringUtils.equalsIgnoreCase(view.getType(), "flow-map") || StringUtils.equalsIgnoreCase(view.getType(), "sankey") || StringUtils.containsIgnoreCase(view.getType(), "chart-mix") + || StringUtils.equalsIgnoreCase(view.getType(), "symbolic-map") ) { xAxis.addAll(xAxisExt); } @@ -740,6 +741,28 @@ public class ChartDataManage { ExtWhere2Str.extWhere2sqlOjb(sqlMeta, yoyFilterList, transFields(allFields), crossDs, dsMap); yoySql = SQLProvider.createQuerySQL(sqlMeta, true, needOrder, view); } + } else if (StringUtils.equalsIgnoreCase("symbolic-map", view.getType())) { + Dimension2SQLObj.dimension2sqlObj(sqlMeta, xAxis, transFields(allFields), crossDs, dsMap); + Quota2SQLObj.quota2sqlObj(sqlMeta, yAxis, transFields(allFields), crossDs, dsMap); + List yFields = new ArrayList<>(); + yFields.addAll(chartViewManege.transFieldDTO(Collections.singletonList(chartViewManege.createCountField(view.getTableId())))); + yFields.addAll(extBubble); + yAxis.addAll(yFields); + Quota2SQLObj.quota2sqlObj(sqlMeta, yAxis, transFields(allFields), crossDs, dsMap); + querySql = SQLProvider.createQuerySQL(sqlMeta, true, needOrder, view); + List xAxisIds = xAxis.stream().map(ChartViewFieldDTO::getId).toList(); + viewFields.addAll(xAxis); + viewFields.addAll(allFields.stream().filter(field -> !xAxisIds.contains(field.getId())).toList()); + if (ObjectUtils.isNotEmpty(viewFields)) { + detailFieldList.addAll(viewFields); + SQLMeta sqlMeta1 = new SQLMeta(); + BeanUtils.copyBean(sqlMeta1, sqlMeta); + sqlMeta1.setYFields(new ArrayList<>()); + Dimension2SQLObj.dimension2sqlObj(sqlMeta1, detailFieldList, transFields(allFields), crossDs, dsMap); + String originSql = SQLProvider.createQuerySQL(sqlMeta1, false, needOrder, view); + String limit = ((pageInfo.getGoPage() != null && pageInfo.getPageSize() != null) ? " LIMIT " + pageInfo.getPageSize() + " OFFSET " + (pageInfo.getGoPage() - 1) * pageInfo.getPageSize() : ""); + detailFieldSql = originSql + limit; + } } else { Dimension2SQLObj.dimension2sqlObj(sqlMeta, xAxis, transFields(allFields), crossDs, dsMap); Quota2SQLObj.quota2sqlObj(sqlMeta, yAxis, transFields(allFields), crossDs, dsMap); @@ -782,6 +805,7 @@ public class ChartDataManage { } if (StringUtils.isNotBlank(detailFieldSql)) { + detailFieldSql = SqlUtils.rebuildSQL(detailFieldSql, sqlMeta, crossDs, dsMap); datasourceRequest.setQuery(detailFieldSql); detailData = (List) calciteProvider.fetchResultField(datasourceRequest).get("data"); } diff --git a/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java b/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java index 73ee299154..4c7eb56ca1 100644 --- a/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java +++ b/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java @@ -1193,7 +1193,7 @@ public class ChartDataBuild { Map map = transTableNormal(fields, null, data, desensitizationList); List> tableRow = (List>) map.get("tableRow"); final int xEndIndex = detailIndex; - Map> groupDataList = detailData.stream().collect(Collectors.groupingBy(item -> "(" + StringUtils.join(ArrayUtils.subarray(item, 0, xEndIndex), "-de-") + ")")); + Map> groupDataList = detailData.stream().collect(Collectors.groupingBy(item -> "(" + StringUtils.join(ArrayUtils.subarray(item, 0, xEndIndex), ")-de-(") + ")")); tableRow.forEach(row -> { String key = xAxis.stream().map(x -> String.format(format, row.get(x.getDataeaseName()).toString())).collect(Collectors.joining("-de-")); diff --git a/core/core-frontend/src/assets/svg/symbolic-map.svg b/core/core-frontend/src/assets/svg/symbolic-map.svg new file mode 100644 index 0000000000..e7b32071ee --- /dev/null +++ b/core/core-frontend/src/assets/svg/symbolic-map.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index 0cc767b300..3911bb1e62 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -294,7 +294,15 @@ const active = computed(() => { }) const boardMoveActive = computed(() => { - const CHARTS = ['flow-map', 'map', 'bubble-map', 'table-info', 'table-normal', 'table-pivot'] + const CHARTS = [ + 'flow-map', + 'map', + 'bubble-map', + 'table-info', + 'table-normal', + 'table-pivot', + 'symbolic-map' + ] return CHARTS.includes(element.value.innerType) }) diff --git a/core/core-frontend/src/components/visualization/SettingMenu.vue b/core/core-frontend/src/components/visualization/SettingMenu.vue index 330d3dd372..33c51bd3f1 100644 --- a/core/core-frontend/src/components/visualization/SettingMenu.vue +++ b/core/core-frontend/src/components/visualization/SettingMenu.vue @@ -175,7 +175,8 @@ const state = reactive({ 'label', 'word-cloud', 'flow-map', - 'bidirectional-bar' + 'bidirectional-bar', + 'symbolic-map' ], linkageExcludeViewType: [ 'richTextView', @@ -185,7 +186,8 @@ const state = reactive({ 'label', 'word-cloud', 'flow-map', - 'bidirectional-bar' + 'bidirectional-bar', + 'symbolic-map' ], copyData: null, hyperlinksSetVisible: false, diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 6d832c19be..aab0fe5e65 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -1229,7 +1229,12 @@ export default { progress_current: '实际值', gauge_axis_label: '显示刻度', gauge_percentage_tick: '百分比刻度', - add_style: '添加样式' + add_style: '添加样式', + map_symbol_marker: '标记', + map_symbol_pentagon: '五角形', + map_symbol_hexagon: '六角形', + map_symbol_octagon: '八角形', + map_symbol_hexagram: '菱形' }, dataset: { scope_edit: '仅编辑时生效', diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index 3e5d0c3c86..44b6f80a50 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -698,6 +698,18 @@ declare interface ChartLabelAttr { */ seriesLabelFormatter: SeriesFormatter[] + /** + * 显示字段，通过字段名称显示对应的值 + * @example + * ['name', 'value'] + */ + showFields?: string[] + + /** + * 自定义显示内容 + */ + customContent?: string + showGap?: boolean } /** @@ -732,6 +744,18 @@ declare interface ChartTooltipAttr { seriesTooltipFormatter: SeriesFormatter[] showGap?: boolean + + /** + * 显示字段，通过字段名称显示对应的值 + * @example + * ['name', 'value'] + */ + showFields?: string[] + + /** + * 自定义显示内容 + */ + customContent?: string } /** diff --git a/core/core-frontend/src/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts index 143291419f..dd890c90b4 100644 --- a/core/core-frontend/src/models/chart/editor.d.ts +++ b/core/core-frontend/src/models/chart/editor.d.ts @@ -24,6 +24,7 @@ declare type EditorProperty = | 'indicator-value-selector' | 'indicator-name-selector' | 'quadrant-selector' + | 'map-symbolic-selector' declare type EditorPropertyInner = { [key in EditorProperty]?: string[] } diff --git a/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue b/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue index f5a5bbfb63..89adf9a35f 100644 --- a/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue +++ b/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue @@ -20,7 +20,7 @@ const props = defineProps({ v-else-if=" props.view.type && (includesAny(props.view.type, 'bar', 'line', 'scatter') || - equalsAny(props.view.type, 'waterfall', 'area', 'area-stack', 'flow-map')) + equalsAny(props.view.type, 'waterfall', 'area', 'area-stack', 'flow-map', 'symbolic-map')) " >{{ t('chart.drag_block_value_axis') }} diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue index 84ab972fe2..6fcbbe8dc2 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue @@ -75,6 +75,10 @@ const props = defineProps({ default: () => { return {} } + }, + allFields: { + type: Array, + required: true } }) @@ -350,6 +354,7 @@ watch( :themes="themes" class="attr-selector" :chart="chart" + :all-fields="props.allFields" @onLabelChange="onLabelChange" /> @@ -368,6 +373,7 @@ watch( :property-inner="propertyInnerAll['tooltip-selector']" :themes="themes" :chart="chart" + :all-fields="props.allFields" @onTooltipChange="onTooltipChange" @onExtTooltipChange="onExtTooltipChange" /> diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue index 78b54bddec..d4b03bd09f 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue @@ -198,6 +198,16 @@ const flowLineTypeOptions = [ { name: t('chart.map_line_type_arc_3d'), value: 'arc3d' } ] +const mapSymbolOptions = [ + { name: t('chart.line_symbol_circle'), value: 'circle' }, + { name: t('chart.line_symbol_rect'), value: 'square' }, + { name: t('chart.line_symbol_triangle'), value: 'triangle' }, + { name: t('chart.map_symbol_pentagon'), value: 'pentagon' }, + { name: t('chart.map_symbol_hexagon'), value: 'hexagon' }, + { name: t('chart.map_symbol_octagon'), value: 'octogon' }, + { name: t('chart.line_symbol_diamond'), value: 'rhombus' } +] + onMounted(() => { init() }) @@ -326,7 +336,7 @@ onMounted(() => { /> -
+
{ {
-
+
{
+
+ + + + + + + + + +
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue index 88e3149e1e..afd6e7e0cd 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue @@ -1,14 +1,16 @@