span {
@@ -17,4 +23,9 @@
.icon svg {
display: block;
+ color: var(--colors-grey700);
+}
+
+.iconButton:hover .icon svg {
+ color: var(--colors-grey900);
}
diff --git a/src/components/datatable/useTableData.js b/src/components/datatable/useTableData.js
index 42e61bf0c..cf370e995 100644
--- a/src/components/datatable/useTableData.js
+++ b/src/components/datatable/useTableData.js
@@ -7,6 +7,7 @@ import {
ORG_UNIT_LAYER,
EARTH_ENGINE_LAYER,
FACILITY_LAYER,
+ GEOJSON_URL_LAYER,
} from '../../constants/layers.js'
import { numberValueTypes } from '../../constants/valueTypes.js'
import { hasClasses, getPrecision } from '../../util/earthEngine.js'
@@ -147,6 +148,27 @@ const getEarthEngineHeaders = ({ aggregationType, legend, data }) => {
.concat(customFields)
}
+const getGeoJsonUrlHeaders = (data) => {
+ const customFields = Object.entries(data[0]).map(([key, value]) => {
+ let roundFn = null
+ const type = typeof value === TYPE_NUMBER ? TYPE_NUMBER : TYPE_STRING
+ if (type === TYPE_NUMBER) {
+ const precision = getPrecision(data.map((d) => d[key]))
+ roundFn = numberPrecision(precision)
+ }
+
+ return {
+ name: key,
+ dataKey: key,
+ type,
+ roundFn,
+ }
+ })
+
+ customFields.push(defaultFieldsMap()[TYPE])
+ return customFields
+}
+
const EMPTY_AGGREGATIONS = {}
const EMPTY_LAYER = {}
@@ -203,6 +225,8 @@ export const useTableData = ({ layer, sortField, sortDirection }) => {
})
case FACILITY_LAYER:
return getFacilityHeaders()
+ case GEOJSON_URL_LAYER:
+ return getGeoJsonUrlHeaders(dataWithAggregations)
default: {
return null
}
@@ -227,7 +251,6 @@ export const useTableData = ({ layer, sortField, sortDirection }) => {
const filteredData = filterData(dataWithAggregations, dataFilters)
- //sort
filteredData.sort((a, b) => {
a = a[sortField]
b = b[sortField]
diff --git a/src/components/edit/LayerEdit.js b/src/components/edit/LayerEdit.js
index 9c2002a4d..857ed6d01 100644
--- a/src/components/edit/LayerEdit.js
+++ b/src/components/edit/LayerEdit.js
@@ -17,27 +17,30 @@ import { useOrgUnits } from '../OrgUnitsProvider.js'
import EarthEngineDialog from './earthEngine/EarthEngineDialog.js'
import EventDialog from './event/EventDialog.js'
import FacilityDialog from './FacilityDialog.js'
+import GeoJsonDialog from './geoJson/GeoJsonDialog.js'
import OrgUnitDialog from './orgUnit/OrgUnitDialog.js'
import styles from './styles/LayerEdit.module.css'
import ThematicDialog from './thematic/ThematicDialog.js'
import TrackedEntityDialog from './trackedEntity/TrackedEntityDialog.js'
-const layerType = {
+const layerDialogs = {
event: EventDialog,
trackedEntity: TrackedEntityDialog,
facility: FacilityDialog,
thematic: ThematicDialog,
orgUnit: OrgUnitDialog,
earthEngine: EarthEngineDialog,
+ geoJsonUrl: GeoJsonDialog,
}
-const layerName = () => ({
+const getLayerNames = () => ({
event: i18n.t('event'),
trackedEntity: i18n.t('tracked entity'),
facility: i18n.t('facility'),
thematic: i18n.t('thematic'),
orgUnit: i18n.t('org unit'),
earthEngine: i18n.t('Earth Engine'),
+ geoJsonUrl: i18n.t('feature'),
})
const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
@@ -74,13 +77,13 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
}
const type = layer.layer
- const LayerDialog = layerType[type]
+ const LayerDialog = layerDialogs[type]
if (!LayerDialog) {
return null
}
- let name = layerName()[type]
+ let name = getLayerNames()[type]
if (type === EARTH_ENGINE_LAYER) {
name = layer.name.toLowerCase()
diff --git a/src/components/edit/geoJson/GeoJsonDialog.js b/src/components/edit/geoJson/GeoJsonDialog.js
new file mode 100644
index 000000000..a8f505c37
--- /dev/null
+++ b/src/components/edit/geoJson/GeoJsonDialog.js
@@ -0,0 +1,45 @@
+import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { setFeatureStyle } from '../../../actions/layerEdit.js'
+import { Tab, Tabs } from '../../core/index.js'
+import FeatureStyle from '../shared/FeatureStyle.js'
+import styles from '../styles/LayerDialog.module.css'
+
+const GeoJsonDialog = ({ featureStyle, validateLayer, onLayerValidation }) => {
+ const [tab, setTab] = useState('style')
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ if (validateLayer) {
+ onLayerValidation(true)
+ }
+ }, [validateLayer, onLayerValidation])
+
+ return (
+
+
+ {i18n.t('Style')}
+
+
+
+
+ dispatch(setFeatureStyle(val))}
+ />
+
+
+
+
+ )
+}
+
+GeoJsonDialog.propTypes = {
+ validateLayer: PropTypes.bool.isRequired,
+ onLayerValidation: PropTypes.func.isRequired,
+ featureStyle: PropTypes.object,
+}
+
+export default GeoJsonDialog
diff --git a/src/components/edit/shared/FeatureStyle.js b/src/components/edit/shared/FeatureStyle.js
new file mode 100644
index 000000000..6b3aaad5c
--- /dev/null
+++ b/src/components/edit/shared/FeatureStyle.js
@@ -0,0 +1,113 @@
+import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
+import React, { useMemo, useEffect } from 'react'
+import { Checkbox, ColorPicker, NumberField } from '../../core/index.js'
+import styles from '../styles/LayerDialog.module.css'
+
+const FILL = 'color'
+const STROKE_COLOR = 'strokeColor'
+const STROKE_WIDTH = 'weight'
+const POINT_SIZE = 'pointSize'
+
+const FILL_TRANSPARENT = 'transparent'
+const FIELD_TYPE_COLOR = 'color'
+const FIELD_TYPE_NUMBER = 'number'
+
+const defaultNoTransparentFillColor = '#EEEEEE'
+
+// Wrapped in a function to make sure i18n is applied
+const getFields = () => [
+ {
+ id: FILL,
+ label: i18n.t('Fill color'),
+ type: FIELD_TYPE_COLOR,
+ default: 'transparent',
+ allowTransparent: true,
+ },
+ {
+ id: STROKE_COLOR,
+ label: i18n.t('Line/stroke color'),
+ type: FIELD_TYPE_COLOR,
+ default: '#333333',
+ },
+ {
+ id: STROKE_WIDTH,
+ label: i18n.t('Line/stroke width'),
+ type: FIELD_TYPE_NUMBER,
+ default: 1,
+ },
+ {
+ id: POINT_SIZE,
+ label: i18n.t('Point size'),
+ type: FIELD_TYPE_NUMBER,
+ default: 5,
+ },
+]
+
+const FeatureStyle = ({ style, onChange }) => {
+ const fields = useMemo(() => getFields(), [])
+
+ useEffect(() => {
+ if (!style) {
+ onChange({
+ [FILL]: FILL_TRANSPARENT,
+ [STROKE_COLOR]: '#333333',
+ [STROKE_WIDTH]: 1,
+ [POINT_SIZE]: 5,
+ })
+ }
+ }, [style, onChange])
+
+ if (!style) {
+ return null
+ }
+
+ return (
+ <>
+ {fields.map(({ id, label, type, allowTransparent }) =>
+ type === FIELD_TYPE_COLOR ? (
+
+ {allowTransparent && (
+
+ onChange({
+ [id]: isChecked
+ ? defaultNoTransparentFillColor
+ : FILL_TRANSPARENT,
+ })
+ }
+ />
+ )}
+ {style[id] !== FILL_TRANSPARENT && (
+ onChange({ [id]: color })}
+ className={styles.narrowField}
+ />
+ )}
+
+ ) : (
+
+ onChange({ [id]: parseInt(value) })
+ }
+ className={styles.narrowField}
+ />
+ )
+ )}
+
+ )
+}
+
+FeatureStyle.propTypes = {
+ onChange: PropTypes.func.isRequired,
+ style: PropTypes.object,
+}
+
+export default FeatureStyle
diff --git a/src/components/feature/FeatureProfile.js b/src/components/feature/FeatureProfile.js
new file mode 100644
index 000000000..328621363
--- /dev/null
+++ b/src/components/feature/FeatureProfile.js
@@ -0,0 +1,46 @@
+import i18n from '@dhis2/d2-i18n'
+import { IconCross24 } from '@dhis2/ui'
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { closeFeatureProfile } from '../../actions/feature.js'
+import Drawer from '../core/Drawer.js'
+import styles from './styles/FeatureProfile.module.css'
+
+const FeatureProfile = () => {
+ const featureProfile = useSelector((state) => state.featureProfile)
+ const dispatch = useDispatch()
+
+ const { data } = featureProfile
+
+ return (
+
+
+ {i18n.t('Feature profile')}
+ dispatch(closeFeatureProfile())}
+ >
+
+
+
+
+
+
+
+
+ {Object.keys(data).map((key) => (
+
+ | {key} |
+ {data[key]} |
+
+ ))}
+
+
+
+
+