Custom visual with hierarchy table

filipwydra — Wed, 20 Oct 2021 18:34:36 GMT

Hello,

I would like to create hierarchical column like this one below:

I already created hierarchy in dataset:

private static hierarchyDataset( dataView: DataView, taskTypes: TaskTypes, settings: GanttSettings, host: IVisualHost 😞 Task[] | any[] { let tasks: Task[] = []; const values: GanttColumns<any> = GanttColumns.getCategoricalValues(dataView); if (!values.yAxis) { return tasks; } const groupValues: GanttColumns<DataViewValueColumn>[] = GanttColumns.getGroupedValueColumns(dataView); let endDate: ISegment = { date: null, name: "" }; for (let j = 0; j < values.yAxis.length; j++) { for (let index = 0; index < values.yAxis[0].length; index++) { let seriesName: TaskTypeMetadata = null; let wasDowngradeDurationUnit: boolean = false; let stepDurationTransformation: number = 0; let segment: ISegment[] = []; const selectionBuilder: ISelectionIdBuilder = host .createSelectionIdBuilder() .withCategory(dataView.categorical.categories[0], index); if (groupValues) { groupValues.forEach((group: GanttColumns<any>) => { if (group.endDate && group.endDate.values[index] !== null) { seriesName = find( taskTypes.types, (typeMeta: TaskTypeMetadata) => typeMeta.name === group.endDate.source.groupName ); if (seriesName) { selectionBuilder.withCategory(seriesName.selectionColumn, 0); } endDate = { date: group.endDate.values[index] ? moment(group.endDate.values[index] as Date) : null, name: group.endDate.source.displayName, showOnTooltip: !!group.endDate.values[index], role: `endDate`, }; if (typeof endDate === "string" || typeof endDate === "number") { endDate = endDate; } } group.segment.map((d, i) => { if (d && d.values[index] !== null) { seriesName = find( taskTypes.types, (typeMeta: TaskTypeMetadata) => typeMeta.name === d.source.groupName ); if (seriesName) { selectionBuilder.withCategory(seriesName.selectionColumn, 0); } segment[i] = { date: d.values[index] && Date.parse(d.values[index]) ? moment(d.values[index] as Date) : null, name: d.source.displayName || null, showOnTooltip: !!d.values[index], role: `segment${i}`, }; } }); }); } const selectionId: powerbi.extensibility.ISelectionId = selectionBuilder.createSelectionId(); const categoryValues: string[] = []; values.yAxis.map((d, i) => { categoryValues.push(d[index]); }); let startDate: ISegment = { date: null, name: "" }; startDate = { date: values.startDate && moment(values.startDate[index]), name: dataView.categorical.categories.filter( (d) => d.source.roles.startDate )[0].source.displayName, showOnTooltip: !!values.startDate[index], role: `startDate`, }; const milestoneDate: Date = ((values.milestoneDate && !isEmpty(values.milestoneDate[index]) && values.milestoneDate[index]) as Date) || null; const task: Task = { index: index, yAxis: categoryValues, name: categoryValues[j], parentName: j === 0 ? null : categoryValues[j - 1], parentID: j === 0 ? null : j - 1, children: [], startDate: startDate, endDate: endDate, segments: Object.assign([], [startDate, ...segment, endDate]), visibility: true, seriesName: seriesName && seriesName.name, selected: false, identity: selectionId, wasDowngradeDurationUnit, stepDurationTransformation, milestoneDate: milestoneDate && moment(milestoneDate), }; tasks.forEach((task) => { if (task.endDate && task.startDate) { task.endDate = task.endDate; } else { task.endDate = task.startDate; } }); tasks.push(task); } } return tasks; } //--------- private prepareHierarchyData(tasks) { _(tasks).forEach((f) => { f.children = _(tasks) .filter((g) => g.parentName === f.name) .value(); }); const resultArray = _(tasks) .filter((f) => f.parentName === null) .value(); return _.unionBy(resultArray, (d) => d.name); }

My capabilities.json looks like that:

"dataRoles": [ { "displayName": "yAxis", "name": "yAxis", "kind": "Grouping" }, { "displayName": "Legend", "name": "projectStatus", "kind": "Grouping" }, { "displayName": "Milestone", "name": "milestoneDate", "kind": "Grouping" }, { "displayName": "Start Date", "name": "startDate", "kind": "Grouping" }, { "displayName": "End Date", "name": "endDate", "kind": "Measure" }, { "displayName": "Phases", "name": "segment", "kind": "Measure" } ], "dataViewMappings": [ { "conditions": [ { "yAxis": { "max": 5 }, "projectStatus": { "max": 1 }, "milestoneDate": { "max": 1 }, "startDate": { "max": 1 }, "endDate": { "max": 1 }, "segment": { "max": 10 } } ], "categorical": { "categories": { "select": [ { "for": { "in": "yAxis" } }, { "for": { "in": "milestoneDate" } }, { "for": { "in": "startDate" } } ] }, "values": { "group": { "by": "projectStatus", "select": [ { "for": { "in": "endDate" } }, { "for": { "in": "segment" } } ] } } } } ],

I don't know how to move on. I was trying to create sth like these here https://observablehq.com/@d3/icicle?ui=classic but I don't have values so it doesn't work for me since I have dates only. Also I was reading about treemap but I don't know how to use it in that case.

Do you have any examples or solutions how to draw hierarchical table ? It doesn't has to be with plus/minus button.

I will be gratefull for any answear.

Re: Custom visual with hierarchy table

Anonymous — Mon, 25 Oct 2021 07:45:07 GMT

Hi @filipwydra

I think you can try to transform your table in Power Query Editor and then let your table in format: Level1, Level2,Level3,...,Values. Then add these columns in Matrix visual, and turn off Stepped layout in Format.

Then you can get result you want.

Best Regards,
Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Re: Custom visual with hierarchy table

filipwydra — Tue, 26 Oct 2021 11:04:28 GMT

I found solution I need here: https://observablehq.com/@mojaie/collapsible-tree-with-checkboxes-d3-js?ui=classic

topic Custom visual with hierarchy table in Developer

Custom visual with hierarchy table

Re: Custom visual with hierarchy table

Re: Custom visual with hierarchy table