Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make treemap compatible with flat data #2085

Merged
merged 5 commits into from
Jul 18, 2024
Merged

Make treemap compatible with flat data #2085

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
26ef594
feat(treemap): make treemap compatible with flat data
AlasDiablo Jul 4, 2024
67ed2be
typo: update translation
AlasDiablo Jul 5, 2024
bfa8250
refactor(treemap): rename variables
AlasDiablo Jul 5, 2024
e39e067
Merge branch 'refs/heads/master' into feats/2075
AlasDiablo Jul 5, 2024
8fa0ab2
Merge branch 'refs/heads/master' into feats/2075
AlasDiablo Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/custom/translations.tsv
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1099,3 +1099,5 @@
"ejs_data" "Variable containing the routine data" "Variable contenant les données de la routine"
"ejs_lodash" "Variable containing the Lodash function" "Variable contenant les fonctions de Lodash"
"routine_args" "Routine fields" "Champs de la routine"
"treemap_hierarchy_data" "Hierarchy data" "Données hiérarchiques"
"treemap_flat_data_type" "Data structure" "Structure des données"
14 changes: 12 additions & 2 deletions src/app/js/formats/utils/components/field-set/FormatFieldSetPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,26 @@ const FormatFieldSetPreview = ({
}) => {
const ReactJson = require('react-json-view').default;

const [datasetName, setDatasetName] = useState(datasets[0].name);
const [datasetName, setDatasetName] = useState('');
const [dataset, setDataset] = useState({});

useEffect(() => {
if (datasets && datasets.length >= 1) {
setDatasetName(datasets[0].name);
}
}, [datasets]);

useEffect(() => {
const newSet = datasets.find((value) => value.name === datasetName);
if (!newSet) {
setDataset({});
return;
}
setDataset({
total: newSet.total,
values: newSet.values,
});
}, [datasetName]);
}, [datasets, datasetName]);

const handleDataSetChange = (event) => {
setDatasetName(event.target.value);
Expand Down
68 changes: 64 additions & 4 deletions src/app/js/formats/vega/component/tree-map/TreeMapAdmin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ import {
import VegaAdvancedMode from '../../../utils/components/admin/VegaAdvancedMode';
import ColorPickerParamsAdmin from '../../../utils/components/admin/ColorPickerParamsAdmin';
import AspectRatioSelector from '../../../utils/components/admin/AspectRatioSelector';
import { TreeMapSourceTargetWeight } from '../../../utils/dataSet';
import {
StandardIdValue,
StandardSourceTargetWeight,
TreeMapSourceTargetWeight,
} from '../../../utils/dataSet';
import VegaFieldPreview from '../../../utils/components/field-set/FormatFieldSetPreview';
import VegaToolTips from '../../../utils/components/admin/VegaToolTips';
import { TreeMapAdminView } from './TreeMapView';
Expand All @@ -34,6 +38,8 @@ export const defaultArgs = {
maxSize: 5,
orderBy: 'value/asc',
},
hierarchy: true,
flatType: 'id/value',
advancedMode: false,
advancedModeSpec: null,
tooltip: false,
Expand All @@ -57,6 +63,8 @@ const TreeMapAdmin = (props) => {
} = props;

const {
hierarchy,
flatType,
advancedMode,
advancedModeSpec,
tooltip,
Expand All @@ -69,6 +77,16 @@ const TreeMapAdmin = (props) => {
aspectRatio,
} = args;

const dataset = useMemo(() => {
if (hierarchy) {
return TreeMapSourceTargetWeight;
}
if (flatType === 'id/value') {
return StandardIdValue;
}
return StandardSourceTargetWeight;
}, [hierarchy, flatType]);

const colors = useMemo(() => {
return args.colors || defaultArgs.colors;
}, [args.colors]);
Expand All @@ -84,8 +102,12 @@ const TreeMapAdmin = (props) => {

const specBuilder = new TreeMap();

specBuilder.setHierarchy(hierarchy);
specBuilder.setColors(colors.split(' '));
specBuilder.setTooltip(tooltip);
specBuilder.setThirdTooltip(
hierarchy || (!hierarchy && flatType !== 'id/value'),
);
specBuilder.setTooltipSource(tooltipSource);
specBuilder.setTooltipTarget(tooltipTarget);
specBuilder.setTooltipWeight(tooltipWeight);
Expand All @@ -110,7 +132,15 @@ const TreeMapAdmin = (props) => {
};

const toggleAdvancedMode = () => {
updateAdminArgs('advancedMode', !args.advancedMode, props);
updateAdminArgs('advancedMode', !advancedMode, props);
};

const toggleHierarchy = () => {
updateAdminArgs('hierarchy', !hierarchy, props);
};

const handleFlatType = (e) => {
updateAdminArgs('flatType', e.target.value, props);
};

const clearAdvancedModeSpec = () => {
Expand Down Expand Up @@ -178,6 +208,31 @@ const TreeMapAdmin = (props) => {
label={polyglot.t('advancedMode')}
/>
</FormGroup>
<FormGroup>
<FormControlLabel
control={
<Switch
checked={hierarchy}
onChange={toggleHierarchy}
/>
}
label={polyglot.t('treemap_hierarchy_data')}
/>
</FormGroup>
{!hierarchy ? (
<TextField
fullWidth
select
label={polyglot.t('treemap_flat_data_type')}
onChange={handleFlatType}
value={flatType}
>
<MenuItem value="id/value">_id / value</MenuItem>
<MenuItem value="source/target/weight">
source / target / weight
</MenuItem>
</TextField>
) : null}
{advancedMode ? (
<VegaAdvancedMode
value={spec}
Expand All @@ -194,7 +249,10 @@ const TreeMapAdmin = (props) => {
onValueTitleChange={handleTooltipTarget}
valueTitle={tooltipTarget}
polyglot={polyglot}
thirdValue={true}
thirdValue={
hierarchy ||
(!hierarchy && flatType !== 'id/value')
}
onThirdValueChange={handleTooltipWeight}
thirdValueTitle={tooltipWeight}
/>
Expand Down Expand Up @@ -256,7 +314,7 @@ const TreeMapAdmin = (props) => {
<VegaFieldPreview
args={args}
PreviewComponent={TreeMapAdminView}
datasets={[TreeMapSourceTargetWeight]}
datasets={[dataset]}
showDatasetsSelector={false}
/>
</FormatGroupedFieldSet>
Expand All @@ -271,6 +329,8 @@ TreeMapAdmin.propTypes = {
minValue: PropTypes.number,
orderBy: PropTypes.string,
}),
hierarchy: PropTypes.bool,
flatType: PropTypes.oneOf(['id/value', 'source/target/weight']),
advancedMode: PropTypes.bool,
advancedModeSpec: PropTypes.string,
tooltip: PropTypes.bool,
Expand Down
78 changes: 76 additions & 2 deletions src/app/js/formats/vega/component/tree-map/TreeMapData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,37 @@ export default class TreeMapData {
*/
filteredNodes;

constructor(data) {
/**
* Those variables are use when we have flat data
* @type {boolean}
*/
isHierarchy;
/**
* @type {Map<string, any>}
*/
originalObject;

/**
* @param {Array<{source: string, target: string, weight: string | number, original?: any}>} data
* @param isHierarchy
*/
constructor(data, isHierarchy = true) {
this.data = data;
this.idIncrement = 0;
this.ids = new Map();
this.rawNodesAndLeaves = new Map();
this.formattedNodesAndLeaves = new Map();
this.filteredNodes = new Set();
this.isHierarchy = isHierarchy;

if (!this.isHierarchy) {
this.originalObject = new Map();
data.forEach((datum) => {
if (datum.original) {
this.originalObject.set(datum.target, datum.original);
}
});
}
}

/**
Expand Down Expand Up @@ -141,7 +165,11 @@ export default class TreeMapData {
continue;
}

datum.hierarchy = this.createHierarchy(datum.parent);
if (this.isHierarchy) {
datum.hierarchy = this.createHierarchy(datum.parent);
} else {
datum.original = this.originalObject.get(datum.name);
}

transformedAndCleanupData.push(datum);
}
Expand All @@ -159,3 +187,49 @@ export default class TreeMapData {
return this.buildReturnable();
}
}

/**
* @param {Array<{_id: string, value: string | number}>} values
* @return {Array<{source: string, target: string, weight: string | number, original: any}>}
*/
TreeMapData.transformIdValue = (values) => {
const finalValues = [];
values.forEach((datum) => {
const middleNode = `root_${datum._id}`;
finalValues.push({
source: middleNode,
target: datum._id,
weight: datum.value,
original: { ...datum },
});
finalValues.push({
source: 'root',
target: middleNode,
weight: datum.value,
});
});
return finalValues;
};

/**
* @param {Array<{source: string, target: string, weight: string | number}>} values
* @return {Array<{source: string, target: string, weight: string | number, original: any}>}
*/
TreeMapData.transformSourceTargetWeight = (values) => {
const finalValues = [];
values.forEach((datum) => {
const leaves = `leaves_${datum.source}_${datum.target}`;
finalValues.push({
source: datum.source,
target: leaves,
weight: datum.weight,
original: { ...datum },
});
finalValues.push({
source: 'root',
target: datum.source,
weight: datum.weight,
});
});
return finalValues;
};
28 changes: 24 additions & 4 deletions src/app/js/formats/vega/component/tree-map/TreeMapView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ const TreeMapView = (props) => {
const {
data,
field,
hierarchy,
flatType,
advancedMode,
advancedModeSpec,
tooltip,
Expand All @@ -43,12 +45,22 @@ const TreeMapView = (props) => {
return data;
}

const treeMapDataBuilder = new TreeMapData(data.values);
let values = data.values;
if (!hierarchy) {
if (flatType === 'id/value') {
values = TreeMapData.transformIdValue(data.values);
}
if (flatType === 'source/target/weight') {
values = TreeMapData.transformSourceTargetWeight(data.values);
}
}

const treeMapDataBuilder = new TreeMapData(values, hierarchy);
return {
...data,
values: treeMapDataBuilder.build(),
};
}, [data]);
}, [data, hierarchy, flatType]);

const { ref, width } = useSizeObserver();
const [error, setError] = useState('');
Expand All @@ -69,8 +81,12 @@ const TreeMapView = (props) => {

const specBuilder = new TreeMap();

specBuilder.setHierarchy(hierarchy);
specBuilder.setColors(colors.split(' '));
specBuilder.setTooltip(tooltip);
specBuilder.setThirdTooltip(
hierarchy || (!hierarchy && flatType !== 'id/value'),
);
specBuilder.setTooltipSource(tooltipSource);
specBuilder.setTooltipTarget(tooltipTarget);
specBuilder.setTooltipWeight(tooltipWeight);
Expand All @@ -80,6 +96,8 @@ const TreeMapView = (props) => {
return specBuilder.buildSpec(width);
}, [
width,
hierarchy,
flatType,
advancedMode,
advancedModeSpec,
tooltip,
Expand Down Expand Up @@ -108,9 +126,11 @@ const TreeMapView = (props) => {
};

TreeMapView.propTypes = {
field: fieldPropTypes.isRequired,
resource: PropTypes.object.isRequired,
field: fieldPropTypes,
resource: PropTypes.object,
data: PropTypes.any,
hierarchy: PropTypes.bool,
flatType: PropTypes.oneOf(['id/value', 'source/target/weight']),
advancedMode: PropTypes.bool,
advancedModeSpec: PropTypes.string,
tooltip: PropTypes.bool,
Expand Down
Loading
Loading