Skip to content

Commit

Permalink
fix: first version to try
Browse files Browse the repository at this point in the history
  • Loading branch information
@MAudelGisaia
MAudelGisaia committed Feb 3, 2025
1 parent 99a24db commit fb95d51
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 98 deletions.
117 changes: 29 additions & 88 deletions src/histograms/AbstractHistogram.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@ export abstract class AbstractHistogram {
protected plottingCount = 0;
protected minusSign = 1;

protected _factor = null;
protected _xlabelCount = null;
protected _xlabelCount = 0;
protected _xlabelMeanWidth = 0;


public constructor() {
Expand All @@ -79,6 +79,9 @@ export abstract class AbstractHistogram {
public init() {
/** each time we [re]plot, the bucket range is reset */
this.histogramParams.bucketRange = undefined;
if(this._xlabelCount === 0){
this._xlabelCount = this.histogramParams.xLabels;
}
this.setHistogramMargins();
if (this.context) {
this.context.remove();
Expand Down Expand Up @@ -117,8 +120,6 @@ export abstract class AbstractHistogram {
if (this.histogramParams.xAxisPosition === Position.top) {
this.minusSign = -1;
}

this._xlabelCount = this.histogramParams.xLabels;
}

protected initializeDescriptionValues(start: Date | number, end: Date | number, dataInterval: number) {
Expand Down Expand Up @@ -276,103 +277,43 @@ export abstract class AbstractHistogram {
return calue;
}

public getLabelMeanWidth(){
const label = this.xLabelsAxis.selectAll('text');
let mean = 0;
for (let i = 0; i < label.size(); i++) {
const c = this.getDimension(label.nodes()[i]);
mean += c.width;
}
return mean / label.size();
}

public labelOverlap(ch, leftOffset = 0){

// create a virtual node to get the width of the labels
const virtualLabels = this.chartDimensions.svg.append('g');
const labels = virtualLabels.append('g')
.attr('class', 'histogram__labels-axis')
.attr('transform', 'translate(' + (leftOffset - 1) + ',' + this.chartDimensions.height * this.histogramParams.xAxisPosition + ')')
.call(ch.xLabelsAxis).selectAll('text');

let overlapCount = 0;
for (let i = 0; i < labels.size(); i++) {
const next = i + 1;
if(labels.data()[next]){
const c = this.getDimension(labels.nodes()[i]);
const n = this.getDimension(labels.nodes()[next]);
if(c && n && !this.getOverlapFromX(c,n)) {
overlapCount++;
console.error(labels.nodes()[i]);
}
}
}
console.error('overlap count => ', overlapCount);
// clear svg
virtualLabels.remove();
return overlapCount;
}

public calcNumberOfLabelDisplayed(overlapCount: number){
// get a factor to know .
this._factor = (this._xlabelCount / (overlapCount / 2));
this._xlabelCount = min([this.histogramParams.xLabels, Math.floor( this._xlabelCount / overlapCount * this._factor)]);
console.error(this._xlabelCount, overlapCount * this._factor, Math.floor(this._xlabelCount / overlapCount * this._factor));

}


public checkOverlap(ch, leftOffset = 0){
/**
* To improve 2 methode
* 1: nombre d'élément en fonction de la taille moyenne du label.
* On récupère l'offset horizontal
* on récupère la taille moyenne des label
* ensuite onf ait (width du chart / taillMoyen + offset)
* On aobtien le nombre à affiché
* 2 facteur linéaire
* au premiers overlap on récupère le facteur linéaire (on divise le nb toal par le nombre de paire de label qui soverlap)
* ensuite on applique ce facteur en fonction du nombre d'overlap retrouver.
*/
const horizontalOffset = this.getHorizontalOffset(ch);
let labelMeanWidth = 0;
public updateNumberOfLabelDisplayedIfOverlap(chartAxes, leftOffset = 0){
const horizontalOffset = this.getHorizontalOffset(chartAxes);
let sumWidth = 0;
const virtualLabels = this.chartDimensions.svg.append('g');
const labels = virtualLabels.append('g')
.attr('class', 'histogram__labels-axis')
.attr('transform', 'translate(' + (leftOffset - 1) + ',' + this.chartDimensions.height * this.histogramParams.xAxisPosition + ')')
.call(ch.xLabelsAxis).selectAll('text');
console.log(labels);
let coverlapCount = 0;
.call(chartAxes.xLabelsAxis).selectAll('text');

let hasOverlap = false;
for (let i = 0; i < labels.size(); i++) {
const next = i + 1;
if(labels.data()[next]){
const c = this.getDimension(labels.nodes()[i]);
const n = this.getDimension(labels.nodes()[next]);
console.log(labels.nodes()[i], coverlapCount, labels.nodes()[next]);
if(!this.getOverlapFromX(c,n)) {
coverlapCount++;
hasOverlap = true;
}

labelMeanWidth += c.width;
console.log('overlap count => ', coverlapCount, labels.size(), labels.size() / coverlapCount);
sumWidth += c.width;
}
}

virtualLabels.remove();
labelMeanWidth = labelMeanWidth / this.histogramParams.xLabels;
let displayed = this._xlabelCount ?? this.histogramParams.xLabels;
if(coverlapCount > 0) {

this._factor = (this.histogramParams.xLabels / (coverlapCount / 2));
// console.error(this._xlabelCount, this._factor, coverlapCount);
// displayed = Math.round(this.histogramParams.chartWidth / (labelMeanWidth + horizontalOffset));
displayed = min([this.histogramParams.xLabels, Math.ceil( this._xlabelCount / coverlapCount * this._factor)]);
this._xlabelCount =displayed;
// displayed = Math.round((((this.histogramParams.chartWidth - (this._xlabelCount * horizontalOffset) )
// * (this._xlabelCount) / this._xHistowidth);
}
console.error('displayed', displayed, coverlapCount);
return displayed;
if(!this._xlabelMeanWidth) {
this._xlabelMeanWidth = sumWidth / this.histogramParams.xLabels;
}

virtualLabels.remove();
if(!hasOverlap) {
return 0;
}
console.error('has hasOverlap');
this._xlabelCount = min([
this.histogramParams.xLabels,
Math.round(this.histogramParams.chartWidth / (this._xlabelMeanWidth + horizontalOffset))]
);
chartAxes.xLabelsAxis.ticks(this._xlabelCount);
chartAxes.xTicksAxis.ticks(this._xlabelCount * 4);
}

public getDimension(node) {
Expand All @@ -390,7 +331,7 @@ export abstract class AbstractHistogram {
a.right = l.x + l.width + this.histogramParams.overlapXTolerance;
b.left = r.x - this.histogramParams.overlapXTolerance;
b.right = r.x + r.width + this.histogramParams.overlapXTolerance;
console.log('overlap count => ', a, l);
console.error('label size ', a, l);
return a.left >= b.right || a.right <= b.left;
}

Expand Down
10 changes: 3 additions & 7 deletions src/histograms/charts/AbstractChart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,14 +422,10 @@ export abstract class AbstractChart extends AbstractHistogram {
tickFormat(d => tickNumberFormat(d, this.histogramParams.numberFormatChar));
}

const overlapCount = this.labelOverlap(this.chartAxes);
if(overlapCount !== 0){
this.calcNumberOfLabelDisplayed(overlapCount);
}
if(this._xlabelCount < this.histogramParams.xLabels) {
this.chartAxes.xLabelsAxis.ticks(this._xlabelCount);
this.chartAxes.xTicksAxis.ticks(this._xlabelCount * 3);
if(this.chartDimensions.svg) {
this.updateNumberOfLabelDisplayedIfOverlap(this.chartAxes);
}

}

protected createChartAxes(data: Array<HistogramData>): void {
Expand Down
5 changes: 2 additions & 3 deletions test/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,12 +145,11 @@ function displayHistogram(histogram, containerName, data, selectionOverflow = fa
endvalue: selectionOverflow ? 10 * +data[data.length - 1].key : +data[data.length - 1].key
});
}
console.log(histogramArea)

window.addEventListener('resize', () => {
console.log('resize')
histogramBars.resize(document.getElementById('containerBars'));
histogramCurve.resize(document.getElementById('containerCurve'));
histogramArea.resize(document.getElementById('containerArea'));
histogramArea.resize(document.getElementById('containerArea'));
timeHistogramBars.resize(document.getElementById('containerHistTime'));
});

Expand Down

0 comments on commit fb95d51

Please sign in to comment.