Category ticks

[LIYUHAN22]

105 Fix the overlapping issue

The text of the axis can show part of it when the data is too much, and when the mouse is hovering on it, it will show the complete value and words by tooltips.

closes #105

[b4rdha]

Great progress guys! I noticed that there are some changes when I compare to bar chart, it seems like we use the space less rationally see below:
They have a letter below each bar compared to our less frequent tick-ing.

• I noticed this difference from the rose chart:

https://github.com/TIBCOSoftware/spotfire-mods/blob/master/catalog/rose-chart/src/roseChart.ts and I tried the same logic, so instead you can wrap in the axis:

function wrap(this: any) {
        var self = d3.select(this);
        let availablePixels = barWidth + padding;

        const fontSize = settings.style.label.size;
        const fontWidth = fontSize * 0.7;

        let label = self.text();
        if (label.length > availablePixels / fontWidth) {
            self.text(label.slice(0, Math.max(1, availablePixels / fontWidth)) + "…"); 
        }
    }

I think it looks better, feel free to add it if you agree.

[AstridBer]

Great progress guys! I noticed that there are some changes when I compare to bar chart, it seems like we use the space less rationally see below: They have a letter below each bar compared to our less frequent tick-ing.

• I noticed this difference from the rose chart:

https://github.com/TIBCOSoftware/spotfire-mods/blob/master/catalog/rose-chart/src/roseChart.ts and I tried the same logic, so instead you can wrap in the axis:

function wrap(this: any) {
        var self = d3.select(this);
        let availablePixels = barWidth + padding;

        const fontSize = settings.style.label.size;
        const fontWidth = fontSize * 0.7;

        let label = self.text();
        if (label.length > availablePixels / fontWidth) {
            self.text(label.slice(0, Math.max(1, availablePixels / fontWidth)) + "…"); 
        }
    }

I think it looks better, feel free to add it if you agree.

We compared the two methods but don't see a noticable difference in how it displays the labels. We decided to add an if statement so that if the label is small it displays only the first letter without the dots. For now we keep the same method with the small modification.