web/index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>User Story Map</title>
    <script src="3rdparty/d3/d3.v5.min.js"></script>
    <script src="3rdparty/d3/d3-selection-multi.v1.min.js"></script>
    <script src="3rdparty/d3/d3-polygon.v1.min.js"></script>
    <script src="3rdparty/d3/d3-textwrap.min.js"></script>
    <script src="3rdparty/usm.io/usmio.min.js"></script>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #usm {
            /* position: absolute; */
            /* width: 300px; */
            width: 100%;
            height: 400px;
            /* height: 100%; */
            margin-top: 20px;
            overflow-y: scroll;
            /* overflow: hidden; */
            /*  "overflow: hidden" is a fix for the little gap
                at the bottom, that appears in combination with
                "height: 100%" on the svg element.
            */
            box-sizing: border-box;
            font-size: 14px;
        }

        #usm svg {
            width: 100%;
            /* height: 100%; */
            background: #eee;
        }

        #usm .card {
            cursor: pointer;
        }

        #usm .card rect {
            fill: #ee9 !important;
        }

        #usm .activity>.card rect {
            fill: #9ae !important;

        }

        #usm .step>.card rect {
            fill: #9d9 !important;

        }

        #usm .card.active rect {
            stroke: #f00 !important;
            fill: #fcc !important;
        }

        #details {
            margin: 20px;
        }

        #details p {
            line-height: 14px;
        }
    </style>

    <script>
        const apiEndpoint = "http://localhost:8080"
        const margins = {
            top: 40,
            right: 20,
            bottom: 40,
            left: 20
        }

        document.addEventListener("DOMContentLoaded", function (event) {

            var url = apiEndpoint + "/data"

            d3.json(url)
                .then((result) => {

                    console.log("#usm (width x height)", parseInt(d3.select("#usm").style("width")) + " x " + parseInt(d3.select("#usm").style("height")))

                    /**
                     * scaleToWidth and scaleToHeight are optional.
                     * If given,the svg is scaled to fit the box defined by
                     * the given hight and/or width.
                     * If not given, it's rendered to it's original size.
                     * Use "overflow: scroll" on the container!
                     */
                    var dimensions = {
                        scaleToWidth: parseInt(d3.select("#usm").style("width")),
                        // scaleToHeight: parseInt(d3.select("#usm").style("height")),
                        marginTop: 40,
                        marginRight: 20,
                        marginBottom: 40,
                        marginLeft: 20
                    }

                    var myUsm = new usm.USM(result.data)
                    myUsm.render(
                        d3.select("#usm"), {
                            detailsContainer: d3.select("#details")
                        },
                        dimensions,
                        false
                    )

                })
                .catch((error) => {
                    console.error("Error:", error)
                })

        })
    </script>

</head>

<body>
    <div id="usm"></div>
    <div id="details"></div>
</body>

</html>