Skip to content

Commit 2eed901

Browse files
BojanSovticEngITBojanSovticEngIT
authored
Merge pull request #313 from KnowageLabs/map-widget-development
Map Dialog Updates
2 parents 19b3ec0 + 667cb4f commit 2eed901

6 files changed

Lines changed: 61 additions & 56 deletions

File tree

‎src/modules/documentExecution/dashboard/interfaces/mapWidget/DashboardMapWidget.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,9 @@ export interface IMapDialogSettings {
245245

246246
export interface IMapDialogSettingsProperty {
247247
name: string
248+
prefix: string
249+
suffix: string
250+
precision: number
248251
columns: string[]
249252
}
250253

@@ -255,6 +258,9 @@ export interface IMapTooltipSettings {
255258

256259
export interface IMapTooltipSettingsLayer {
257260
name: string
261+
prefix: string
262+
suffix: string
263+
precision: number
258264
columns: string[]
259265
}
260266

‎src/modules/documentExecution/dashboard/widget/MapWidget/LeafletWrapper.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ const handleLegendUpdated = (legendData: Record<string, any> | undefined) => {
199199
200200
.customLeafletPopup {
201201
margin: 0px 0px;
202-
padding: 0px 5px;
202+
padding: 0px 5px !important;
203203
background: white;
204204
min-width: 150px;
205205
max-width: 400px;

‎src/modules/documentExecution/dashboard/widget/MapWidget/visualization/MapDialogHelper.ts‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ISelection, IVariable, IWidget } from '../../../Dashboard'
2-
import { ILayerFeature, IMapDialogSettings, IMapTooltipSettings, IMapTooltipSettingsLayer, IMapWidgetCrossNavigation, IMapWidgetLayer, IMapWidgetLinkConfiguration, IMapWidgetPreview, IMapWidgetSelectionConfiguration, IMapWidgetVisualizationType } from '../../../interfaces/mapWidget/DashboardMapWidget'
2+
import { ILayerFeature, IMapDialogSettings, IMapDialogSettingsProperty, IMapTooltipSettings, IMapTooltipSettingsLayer, IMapWidgetCrossNavigation, IMapWidgetLayer, IMapWidgetLinkConfiguration, IMapWidgetPreview, IMapWidgetSelectionConfiguration, IMapWidgetVisualizationType } from '../../../interfaces/mapWidget/DashboardMapWidget'
33
import { getColumnName } from '../LeafletHelper'
44
import L from 'leaflet'
55
import { ChartValuesRecord } from './MapChartsVizualizationHelper'
@@ -23,6 +23,7 @@ export const createDialogFromDataset = (tooltip: boolean, layerVisualizationSett
2323
const layersList = settings.layers.filter((layer: IMapTooltipSettingsLayer) => layer.name === layerVisualizationSettings.target)
2424
layersList.forEach((item: IMapTooltipSettingsLayer) => {
2525
item.columns.forEach((column: string) => {
26+
const layerSettings = settings.layers.find((layerSettings: IMapDialogSettingsProperty | IMapTooltipSettingsLayer) => layerSettings.name === layerVisualizationSettings.target && layerSettings.columns.includes(column))
2627
const value = `${column}: ${row[getColumnName(column, meta)]}`
2728
const dataMap = {}
2829

@@ -31,7 +32,7 @@ export const createDialogFromDataset = (tooltip: boolean, layerVisualizationSett
3132
dataMap[field.header] = row[field.dataIndex]
3233
})
3334

34-
list.append(createTooltipListItem(value, (settings as IMapDialogSettings).style, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
35+
list.append(createTooltipListItem(value, (settings as IMapDialogSettings).style, layerSettings, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
3536
})
3637
})
3738
if (tooltip) return L.tooltip().setContent(list)
@@ -65,18 +66,7 @@ export const addTooltipToMarkerForLayerData = (feature: ILayerFeature, model: IW
6566
}
6667

6768
// Function that creates popup/tooltip for the maps that use layers as the target
68-
const createDialogForLayerData = (
69-
feature: ILayerFeature,
70-
tooltip: boolean,
71-
layerVisualizationSettings: IMapWidgetVisualizationType,
72-
settings: IMapTooltipSettings | IMapDialogSettings,
73-
value: string | number | ChartValuesRecord,
74-
widgetModel: IWidget,
75-
activeSelections: ISelection[],
76-
dashboardId: string,
77-
variables: IVariable[],
78-
foreignKeyValue?: string | null
79-
) => {
69+
const createDialogForLayerData = (feature: ILayerFeature, tooltip: boolean, layerVisualizationSettings: IMapWidgetVisualizationType, settings: IMapTooltipSettings | IMapDialogSettings, value: string | number | ChartValuesRecord, widgetModel: IWidget, activeSelections: ISelection[], dashboardId: string, variables: IVariable[], foreignKeyValue?: string | null) => {
8070
const container = document.createElement('div')
8171
const layersList = settings.layers.filter((layer: IMapTooltipSettingsLayer) => layer.name === layerVisualizationSettings.target) as any
8272

@@ -88,18 +78,19 @@ const createDialogForLayerData = (
8878
const targetDatasetList = document.createElement('ul')
8979
targetDatasetList.classList.add('customLeafletPopup')
9080
targetDatasetList.append(createTooltipListHeader(layerVisualizationSettings.targetDataset))
91-
targetDatasetList.append(createTooltipListItem(`${layerVisualizationSettings.targetDatasetForeignKeyColumn}: ${getTooltipHeaderValue(value, layerVisualizationSettings.targetDatasetForeignKeyColumn, foreignKeyValue)}`, (settings as IMapDialogSettings).style, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables))
81+
targetDatasetList.append(createTooltipListItem(`${layerVisualizationSettings.targetDatasetForeignKeyColumn}: ${getTooltipHeaderValue(value, layerVisualizationSettings.targetDatasetForeignKeyColumn, foreignKeyValue)}`, (settings as IMapDialogSettings).style, null, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables))
9282
container.appendChild(targetDatasetList)
9383
}
9484

9585
const list = document.createElement('ul')
9686
list.classList.add('customLeafletPopup')
9787

9888
layersList.forEach((item: IMapTooltipSettingsLayer) => {
99-
if (layerVisualizationSettings.targetDataset && layerVisualizationSettings.targetProperty) list.append(createTooltipListHeader(item.name))
89+
if (layerVisualizationSettings.targetDataset && layerVisualizationSettings.targetProperty) list.append(createTooltipListHeader(layerVisualizationSettings.layerName ?? ''))
10090
item.columns.forEach((property: string) => {
91+
const layerSettings = settings.layers.find((layerSettings: IMapDialogSettingsProperty | IMapTooltipSettingsLayer) => layerSettings.name === layerVisualizationSettings.target && layerSettings.columns.includes(property))
10192
const dataMap = feature.properties
102-
list.append(createTooltipListItem(`${property}: ${feature.properties[property] ?? ''}`, (settings as IMapDialogSettings).style, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
93+
list.append(createTooltipListItem(`${property}: ${feature.properties[property] ?? ''}`, (settings as IMapDialogSettings).style, layerSettings, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
10394
})
10495
})
10596

@@ -122,9 +113,13 @@ const createTooltipListHeader = (header: string) => {
122113
return headerElement
123114
}
124115

125-
const createTooltipListItem = (value: string, style: IListItemStyle | undefined, widgetModel: IWidget, layerVisualizationSettings: IMapWidgetVisualizationType, activeSelections: ISelection[], dashboardId: string, variables: IVariable[], dataMap?: Record<string, string | number> | null) => {
116+
const createTooltipListItem = (value: string, style: IListItemStyle | undefined, layerSettings: IMapDialogSettingsProperty | IMapTooltipSettingsLayer | null | undefined, widgetModel: IWidget, layerVisualizationSettings: IMapWidgetVisualizationType, activeSelections: ISelection[], dashboardId: string, variables: IVariable[], dataMap?: Record<string, string | number> | null) => {
126117
const li = document.createElement('li')
127-
li.innerHTML = value
118+
const [rawValueColumn, rawValue] = value.split(':')
119+
const column = rawValueColumn.trim()
120+
const formattedValue = rawValue.trim()
121+
122+
li.innerHTML = column + ': ' + (layerSettings?.prefix || '') + getFormattedValueForTheTooltipListItem(formattedValue, layerSettings?.precision) + (layerSettings?.suffix || '')
128123

129124
li.classList.add('kn-cursor-pointer')
130125

@@ -150,6 +145,18 @@ const createTooltipListItem = (value: string, style: IListItemStyle | undefined,
150145
return li
151146
}
152147

148+
const getFormattedValueForTheTooltipListItem = (value: string, precision: number | undefined) => {
149+
if (!precision) return value
150+
151+
const floatValue = parseFloat(value)
152+
153+
if (!isNaN(floatValue) && Number.isFinite(floatValue) && !Number.isInteger(floatValue)) {
154+
return floatValue.toFixed(precision)
155+
}
156+
157+
return value
158+
}
159+
153160
const checkInteractionsIfColumnIsClickable = (value: string, widgetModel: IWidget, layerVisualizationSettings: IMapWidgetVisualizationType) => {
154161
const [rawValueColumn] = value.split(':')
155162
const column = rawValueColumn.trim()

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/MapWidget/dialog/MapDialogSettings.vue‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,7 @@
88

99
<div v-for="(dialogProperty, index) in dialogSettings.layers" :key="index" class="dynamic-form-item p-grid p-col-12 p-ai-center p-m-0 p-pt-0">
1010
<div v-show="dropzoneTopVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
11-
<div
12-
class="p-col-12 form-list-item-dropzone"
13-
:class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }"
14-
@drop.stop="onDropComplete($event, 'before', index)"
15-
@dragover.prevent
16-
@dragenter.prevent="displayDropzone('top', index)"
17-
@dragleave.prevent="hideDropzone('top', index)"
18-
></div>
11+
<div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent="displayDropzone('top', index)" @dragleave.prevent="hideDropzone('top', index)"></div>
1912

2013
<div class="p-d-flex kn-flex p-ai-center" :draggable="true" @dragstart.stop="onDragStart($event, index)">
2114
<i class="pi pi-th-large kn-cursor-pointer"></i>
@@ -35,14 +28,13 @@
3528
</div>
3629
</div>
3730

38-
<div
39-
class="p-col-12 form-list-item-dropzone"
40-
:class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }"
41-
@drop.stop="onDropComplete($event, 'after', index)"
42-
@dragover.prevent
43-
@dragenter.prevent="displayDropzone('bottom', index)"
44-
@dragleave.prevent="hideDropzone('bottom', index)"
45-
></div>
31+
<div class="p-grid p-col-12 p-mt-2">
32+
<q-input dense class="p-col-4" filled v-model="dialogProperty.prefix" :label="$t('dashboard.widgetEditor.prefix')" :disable="dialogSettingsDisabled" />
33+
<q-input dense class="p-col-4" filled v-model="dialogProperty.suffix" :label="$t('dashboard.widgetEditor.suffix')" :disable="dialogSettingsDisabled" />
34+
<q-input dense class="p-col-4" type="number" filled v-model="dialogProperty.precision" :label="$t('dashboard.widgetEditor.precision')" :disable="dialogSettingsDisabled" />
35+
</div>
36+
37+
<div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent="displayDropzone('bottom', index)" @dragleave.prevent="hideDropzone('bottom', index)"></div>
4638
<div v-show="dropzoneBottomVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
4739
</div>
4840
</div>
@@ -101,7 +93,7 @@ export default defineComponent({
10193
if (targetLayer?.type === 'layer') await this.loadAvailablePropertiesInTooltipSettingsForLayer(targetLayer)
10294
},
10395
addDialog() {
104-
this.dialogSettings?.layers.push({ name: '', columns: [] })
96+
this.dialogSettings?.layers.push(mapWidgetDefaultValues.getDefaultDialogSettings().layers[0])
10597
},
10698
removeDialog(index: number) {
10799
if (!this.dialogSettings || !this.dialogSettings.layers) return

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/MapWidget/tooltips/MapTooltips.vue‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,8 @@
55
</Message>
66
<div v-for="(tool, index) in tooltip.layers" :key="index" class="dynamic-form-item p-grid p-col-12 p-ai-center">
77
<div v-show="dropzoneTopVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
8-
<div
9-
class="p-col-12 form-list-item-dropzone"
10-
:class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }"
11-
@drop.stop="onDropComplete($event, 'before', index)"
12-
@dragover.prevent
13-
@dragenter.prevent="displayDropzone('top', index)"
14-
@dragleave.prevent="hideDropzone('top', index)"
15-
></div>
8+
<div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent="displayDropzone('top', index)" @dragleave.prevent="hideDropzone('top', index)"></div>
9+
1610
<div class="p-d-flex kn-flex p-ai-center" :draggable="true" @dragstart.stop="onDragStart($event, index)">
1711
<i class="pi pi-th-large kn-cursor-pointer"></i>
1812
<div class="kn-flex p-mx-2 p-d-flex p-flex-row" style="gap: 0.5em">
@@ -31,14 +25,13 @@
3125
</div>
3226
</div>
3327

34-
<div
35-
class="p-col-12 form-list-item-dropzone"
36-
:class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }"
37-
@drop.stop="onDropComplete($event, 'after', index)"
38-
@dragover.prevent
39-
@dragenter.prevent="displayDropzone('bottom', index)"
40-
@dragleave.prevent="hideDropzone('bottom', index)"
41-
></div>
28+
<div class="p-grid p-col-12 p-mt-2">
29+
<q-input dense class="p-col-4" filled v-model="tool.prefix" :label="$t('dashboard.widgetEditor.prefix')" :disable="tooltipsDisabled" />
30+
<q-input dense class="p-col-4" filled v-model="tool.suffix" :label="$t('dashboard.widgetEditor.suffix')" :disable="tooltipsDisabled" />
31+
<q-input dense class="p-col-4" type="number" filled v-model="tool.precision" :label="$t('dashboard.widgetEditor.precision')" :disable="tooltipsDisabled" />
32+
</div>
33+
34+
<div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent="displayDropzone('bottom', index)" @dragleave.prevent="hideDropzone('bottom', index)"></div>
4235
<div v-show="dropzoneBottomVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
4336
</div>
4437
</div>
@@ -55,6 +48,7 @@ import MultiSelect from 'primevue/multiselect'
5548
import Message from 'primevue/message'
5649
import defaultsDescriptor from '../../../helpers/mapWidget/MapWidgetDefaultValuesDescriptor.json'
5750
import { getPropertiesByLayerId } from '../../../../MapWidget/MapWidgetDataProxy'
51+
import * as mapWidgetDefaultValues from '../../../helpers/mapWidget/MapWidgetDefaultValues'
5852
5953
export default defineComponent({
6054
name: 'map-tooltips',
@@ -95,7 +89,7 @@ export default defineComponent({
9589
if (targetLayer?.type === 'layer') await this.loadAvailablePropertiesInTooltipSettingsForLayer(targetLayer)
9690
},
9791
addTooltip() {
98-
this.tooltip?.layers.push({ name: '', columns: [] })
92+
this.tooltip?.layers.push(mapWidgetDefaultValues.getDefaultMapTooltips().layers[0])
9993
},
10094
removeTooltip(index: number) {
10195
if (!this.tooltip || !this.tooltip.layers) return

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/helpers/mapWidget/MapWidgetDefaultValuesDescriptor.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
"layers": [
2222
{
2323
"columns": [],
24-
"name": ""
24+
"name": "",
25+
"precision": 2,
26+
"prefix": "",
27+
"suffix": ""
2528
}
2629
],
2730
"style": {
@@ -87,7 +90,10 @@
8790
"layers": [
8891
{
8992
"columns": [],
90-
"name": ""
93+
"name": "",
94+
"precision": 2,
95+
"prefix": "",
96+
"suffix": ""
9197
}
9298
]
9399
},

0 commit comments

Comments
 (0)