fix: apply reference label to sankey (#5410)

* fix: apply reference label to sankey

Signed-off-by: yuda <yuda@megazone.com>

* chore: add DT transform icons

Signed-off-by: yuda <yuda@megazone.com>

---------

Signed-off-by: yuda <yuda@megazone.com>

Author: yuda110

apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue

@@ -139,19 +139,19 @@ const state = reactive({
             key: DATA_TABLE_OPERATOR.VALUE_MAPPING,
             name: 'Value Mapping',
             description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.VALUE_MAPPING_DESC'),
-            icon: '', // TODO: Add icon
+            icon: 'ic_db-value-mapping',
         },
         {
             key: DATA_TABLE_OPERATOR.ADD_LABELS,
             name: 'Additional Labels',
             description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS_DESC'),
-            icon: '', // TODO: Add icon
+            icon: 'ic_db-additional-labels',
         },
         {
             key: DATA_TABLE_OPERATOR.PIVOT,
             name: 'Pivot',
             description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.PIVOT_DESC'),
-            icon: 'ic_db-pivot',
+            icon: 'ic_db-pivot-table',
         },
     ]),
 });

apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue

@@ -104,13 +104,9 @@ const state = reactive({
                 if (!_source || !_target) return '';
                 if (_sourceField === DATE_FIELD.DATE) {
                     _source = dayjs.utc(_source).format(state.dateFormat);
-                } else {
-                    getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.sankeyDimensionsInfo?.data?.[0] as string, _source);
                 }
                 if (_targetField === DATE_FIELD.DATE) {
                     _target = dayjs.utc(_target).format(state.dateFormat);
-                } else {
-                    getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.sankeyDimensionsInfo?.data?.[1] as string, _target);
                 }
                 let _value = numberFormatter(params.data.value) || '';
                 if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
@@ -191,15 +187,17 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     const _left = widgetOptionsState.sankeyDimensionsInfo?.data?.[0] as string;
     const _right = widgetOptionsState.sankeyDimensionsInfo?.data?.[1] as string;
     const _dataField = widgetOptionsState.dataFieldInfo?.data as string;
+    const _sourceField = widgetOptionsState.sankeyDimensionsInfo?.data?.[0] as string;
+    const _targetField = widgetOptionsState.sankeyDimensionsInfo?.data?.[1] as string;
     if (!_left || !_right || !_dataField) {
         state.links = [];
         state.chartData = [];
         return;
     }
     rawData?.results?.forEach((d) => {
         _links.push({
-            source: d[_left] as string,
-            target: d[_right] as string,
+            source: getReferenceLabel(props.allReferenceTypeInfo, _sourceField, d[_left] as string),
+            target: getReferenceLabel(props.allReferenceTypeInfo, _targetField, d[_right] as string),
             value: d[_dataField] as number,
         });
     });

packages/mirinae/src/foundation/icons/icon-assets/ic_db-additional-labels.svg

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_db-additional-labels': {
+    width: 32,
+    height: 32,
+    viewBox: '0 0 32 32',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M8.333 5.333A2.333 2.333 0 0110.667 3h16A2.333 2.333 0 0129 5.333v21.334A2.333 2.333 0 0126.667 29h-16a2.333 2.333 0 01-2.334-2.333V24a1 1 0 112 0v2.667c0 .184.15.333.334.333h16c.184 0 .333-.15.333-.333V5.333A.333.333 0 0026.667 5h-16a.333.333 0 00-.334.333V8a1 1 0 11-2 0V5.333z" _fill="#232533"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M18.667 3a1 1 0 011 1v24a1 1 0 11-2 0V4a1 1 0 011-1zM9.333 12.333a1 1 0 011 1v5.334a1 1 0 11-2 0v-5.334a1 1 0 011-1z" _fill="#232533"/><path pid="2" fill-rule="evenodd" clip-rule="evenodd" d="M5.667 16a1 1 0 011-1H12a1 1 0 110 2H6.667a1 1 0 01-1-1z" _fill="#232533"/><path pid="3" fill-rule="evenodd" clip-rule="evenodd" d="M9.333 11.667a4.333 4.333 0 100 8.666 4.333 4.333 0 000-8.666zM3 16a6.333 6.333 0 1112.667 0A6.333 6.333 0 013 16z" _fill="#232533"/>'
+  }
+})

packages/mirinae/src/foundation/icons/icon-assets/ic_db-dimensions.svg

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_db-dimensions': {
+    width: 32,
+    height: 32,
+    viewBox: '0 0 32 32',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M10.256 4.154a.359.359 0 00-.359.359v6.102h3.231a2.513 2.513 0 012.513 2.513v5.744a2.513 2.513 0 01-2.513 2.513h-3.23v6.102c0 .198.16.36.358.36h4.308a1.077 1.077 0 110 2.153h-4.308a2.513 2.513 0 01-2.512-2.513v-6.102H4.513A2.513 2.513 0 012 18.872v-5.744a2.513 2.513 0 012.513-2.513h3.23V4.513A2.513 2.513 0 0110.257 2h4.308a1.077 1.077 0 110 2.154h-4.308zm-5.743 8.615a.359.359 0 00-.36.36v5.743c0 .198.162.359.36.359h8.615c.198 0 .36-.16.36-.36v-5.743a.359.359 0 00-.36-.359H4.513zm11.846-8.256A2.513 2.513 0 0118.872 2h8.615A2.513 2.513 0 0130 4.513v22.974A2.513 2.513 0 0127.487 30h-8.615a2.513 2.513 0 01-2.513-2.513V4.513zm2.154 6.102v4.308h9.333v-4.308h-9.333zm9.333-2.153h-9.333v-3.95c0-.197.16-.358.359-.358h8.615c.198 0 .36.16.36.359v3.949zm0 8.615h-9.333v4.308h9.333v-4.308zm0 6.461h-9.333v3.95c0 .197.16.358.359.358h8.615a.36.36 0 00.36-.359V23.54zM9.041 13.231c.595 0 1.077.482 1.077 1.077v.58h.58a1.077 1.077 0 010 2.153h-.58v.58a1.077 1.077 0 11-2.154 0v-.58h-.58a1.077 1.077 0 110-2.154h.58v-.58c0-.594.482-1.076 1.077-1.076z" _fill="#232533"/>'
+  }
+})

packages/mirinae/src/foundation/icons/icon-assets/ic_db-pivot-table.svg

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_db-pivot-table': {
+    width: 32,
+    height: 32,
+    viewBox: '0 0 32 32',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M3 5.333A2.333 2.333 0 015.333 3h21.334A2.333 2.333 0 0129 5.333v21.334A2.333 2.333 0 0126.667 29H5.333A2.333 2.333 0 013 26.667V5.333zm2 5.334v16c0 .184.15.333.333.333h4V10.667H5zm4.333-2H5V5.333C5 5.15 5.15 5 5.333 5h4v3.667zm2 2V27h15.334c.184 0 .333-.15.333-.333v-16H11.333zm15.667-2H11.333V5h15.334c.184 0 .333.15.333.333v3.334zm-5.485 3.96a1 1 0 011.414 0l1.778 1.777a1 1 0 01-1.414 1.414l-.07-.07v3.808a3.667 3.667 0 01-3.667 3.666h-3.808l.07.07a1 1 0 01-1.414 1.415l-1.778-1.778a1 1 0 010-1.414l1.778-1.778a1 1 0 011.414 1.414l-.07.071h3.808c.92 0 1.666-.746 1.666-1.666v-3.809l-.07.071a1 1 0 01-1.415-1.414l1.778-1.778z" _fill="#232533"/>'
+  }
+})

packages/mirinae/src/foundation/icons/icon-assets/ic_db-value-mapping.svg

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_db-value-mapping': {
+    width: 32,
+    height: 32,
+    viewBox: '0 0 32 32',
+    data: '<path pid="0" d="M28.857 12.5V7.143A2.145 2.145 0 0026.714 5H23.5v2.143h3.214V12.5a4.257 4.257 0 001.481 3.214 4.26 4.26 0 00-1.48 3.215v5.357H23.5v2.143h3.214a2.146 2.146 0 002.143-2.143v-5.357A2.145 2.145 0 0131 16.786v-2.143a2.146 2.146 0 01-2.143-2.143zM5.286 12.5V7.143H8.5V5H5.286a2.145 2.145 0 00-2.143 2.143V12.5A2.145 2.145 0 011 14.643v2.143a2.145 2.145 0 012.143 2.143v5.357a2.145 2.145 0 002.143 2.143H8.5v-2.143H5.286v-5.357a4.26 4.26 0 00-1.481-3.215 4.26 4.26 0 001.48-3.214zM9.571 20.178v1.965h5.589v-1.965h-1.25l2.11-2.416 2.07 2.416h-1.25v1.965h5.589v-1.965h-1.74l-3.37-3.908 3.37-3.948h1.74v-1.965H16.84v1.965h1.25l-2.031 2.465-2.13-2.466h1.23v-1.964H9.62v1.965h1.71l3.39 3.948-3.39 3.909H9.571z" _fill="#232533"/>'
+  }
+})