Offset connector line and too short match boxes

RooRoo6080 commented 2 months ago

The image in the readme looks great, but when I run it I see something like this:

To compare, what's on the demo looks like this:

How do I make the spacing and alignment look that good, and could those aesthetics be brought back into the current version?

Shenato commented 1 month ago

I think you might be using incorrect data and that's why it looks the way it does. can you share the data you're feeding the component?

RooRoo6080 commented 1 month ago

The same problem occurs when using the sample data. I ended up fixing it by editing some values in bundle.js when installed from npm. I believe it was somewhere between line 61 and 85. In general, these are nice values to edit to change the looks. This is what I use now:

      width: 125,
      boxHeight: 125,
      canvasPadding: 50,
      spaceBetweenColumns: 15,
      spaceBetweenRows: -60,
      connectorColor: "#415a77",
      connectorColorHighlight: "#DDD",
      roundHeader: {
        isShown: !0,
        height: 10,
        marginBottom: 0,
        fontSize: 12,
        fontColor: "white",
        backgroundColor: "rgb(47, 54, 72)",
        fontFamily: '"Montserrat", "Arial", "Helvetica", "sans-serif"',
        roundTextGenerator: void 0
      },
      roundSeparatorWidth: 0,
      lineInfo: {
        separation: -13,
        homeVisitorSpread: 0.5
      },
      horizontalOffset: 8,
      wonBywalkOverText: "WO",
      lostByNoShowText: "NS"

g-loot / react-tournament-brackets

Offset connector line and too short match boxes #72