HTML content for Bullet point and enable drill-through

[rickferreiran]

I am using HTML content to create a bullet point graph, where each circle represents a project and the color indicates its status.

However, when I add the project names for granularity, the graph changes to a single row with a scroll bar. I realized that the issue stems from the granularity;

I need to include it because it is the only way to enable drill-through functionality to a detailed project page.

Does anyone know how to resolve this issue, or how I can create a similar graph with drill-through capabilities?

Thank you!

Code my html content:

HTMLbulletpoint = 
VAR DistinctProjects = DISTINCT(
    SELECTCOLUMNS(
        AllTogether, 
        "Project_ID", AllTogether[Project_ID], 
        "Nom du Projet", AllTogether[Nom du Projet], 
        "Méteo_Color", AllTogether[Méteo_Color]
    )
)
VAR ProjectCount = COUNTROWS(DistinctProjects)
VAR ProjectList = ADDCOLUMNS(
    DistinctProjects,
    "Index", RANKX(DistinctProjects, [Nom du Projet], , ASC)
)
VAR ColumnsCount = CEILING(ProjectCount / 3, 1)
VAR TableColumnsHTML = CONCATENATEX(
    GENERATESERIES(1, ColumnsCount),
    VAR CurrentColumn = [Value]
    VAR StartIndex = (CurrentColumn - 1) * 3 + 1
    VAR EndIndex = CurrentColumn * 3
    VAR ProjectsInColumn = 
        FILTER(
            ProjectList,
            [Index] >= StartIndex && [Index] <= EndIndex
        )
    VAR CirclesInColumn = CONCATENATEX(
        ProjectsInColumn,
        "<div style='margin-bottom:2px;'><span style='display:inline-block; width:18px; height:18px; background-color:" & [Méteo_Color] & "; border-radius:50%;'></span></div>",
        ""
    )
    RETURN "<td style='vertical-align:top; padding:0; padding-left:5px; padding-right:5px;'>" & CirclesInColumn & "</td>",
    ""
)
RETURN "<table style='font-size:24px; margin:0; padding:0; border-collapse:collapse;'><tr>" & TableColumnsHTML & "</tr></table>" 

[Anonymous · Accepted solution]

Hi @rickferreiran 

t seems like you're trying to create a bullet-point graph in HTML where each circle represents a project, and the color indicates its status. However, when adding project names for drill-through functionality, the layout changes to a single row with a scroll bar due to the increased granularity.

To address this issue, you can modify your HTML generation logic to ensure the graph maintains its intended layout while accommodating the project names. Here are some suggestions:

1. Adjust the Table Layout
Instead of forcing all projects into a single row, you can create a multi-row layout where each row contains a fixed number of projects. This will prevent the graph from stretching horizontally and requiring a scroll bar.

2. Include Project Names Below Circles
You can add project names below each circle in a way that doesn't disrupt the layout.

3. Use CSS for Responsive Design
Use CSS to make the graph responsive. For example, you can use flexbox or grid to ensure the layout adapts to different screen sizes.

4. Modify Your Code
Here's an updated version of your code that incorporates project names and ensures a multi-row layout:

HTMLbulletpoint = 
VAR DistinctProjects = DISTINCT(
    SELECTCOLUMNS(
        AllTogether, 
        "Project_ID", AllTogether[Project_ID], 
        "Nom du Projet", AllTogether[Nom du Projet], 
        "Méteo_Color", AllTogether[Méteo_Color]
    )
)
VAR ProjectCount = COUNTROWS(DistinctProjects)
VAR ProjectList = ADDCOLUMNS(
    DistinctProjects,
    "Index", RANKX(DistinctProjects, [Nom du Projet], , ASC)
)
VAR ColumnsCount = CEILING(ProjectCount / 3, 1)
VAR TableColumnsHTML = CONCATENATEX(
    GENERATESERIES(1, ColumnsCount),
    VAR CurrentColumn = [Value]
    VAR StartIndex = (CurrentColumn - 1) * 3 + 1
    VAR EndIndex = CurrentColumn * 3
    VAR ProjectsInColumn = 
        FILTER(
            ProjectList,
            [Index] >= StartIndex && [Index] <= EndIndex
        )
    VAR CirclesInColumn = CONCATENATEX(
        ProjectsInColumn,
        "<div style='margin-bottom:2px; text-align:center;'><span style='display:inline-block; width:18px; height:18px; background-color:" & [Méteo_Color] & "; border-radius:50%;'></span><div style='font-size:12px;'>" & [Nom du Projet] & "</div></div>",
        ""
    )
    RETURN "<td style='vertical-align:top; padding:0; padding-left:5px; padding-right:5px;'>" & CirclesInColumn & "</td>",
    ""
)
RETURN "<table style='font-size:24px; margin:0; padding:0; border-collapse:collapse;'><tr>" & TableColumnsHTML & "</tr></table>"

 5. Test and Iterate
Test the updated code to ensure the layout works as expected.
If the graph still doesn't look right, consider using a JavaScript library like D3.js or Chart.js for more advanced visualizations with drill-through capabilities.

Regards,

Nono Chen

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