Skip to content

Commit

Permalink
feat: added comments to explain code
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kristiantvaa
Kristiantvaa committed Jul 3, 2024
1 parent 91d126c commit 3fa42a7
Showing 1 changed file with 24 additions and 39 deletions.
63 changes: 24 additions & 39 deletions src/Components/Derived/BarDiagram.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ type BarDiagramOptions = {

type Position = [[number, number], [number, number]];

type InfoAboutBar = [Polygon, Text, Text, number];

class BarDiagram extends Component {
data: number[];
labels: string[];
Expand All @@ -38,7 +40,6 @@ class BarDiagram extends Component {
maxLength: number;
maxHeight: number;

// Extra fields
fontSize: number;
labelsNextToLinePosition: number;
distanceMultiplierBarLabels: number;
Expand All @@ -48,7 +49,7 @@ class BarDiagram extends Component {
biggestElement: number;
smallesElement: number;

barsObject: { [key: number]: [Polygon, Text, Text] };
barsObject: { [key: number]: InfoAboutBar };

constructor(
data: number[],
Expand All @@ -71,15 +72,14 @@ class BarDiagram extends Component {
this.maxLength = 36;
this.maxHeight = 15;

// Extra fields
this.fontSize = 26;
// Used for calculating the distance from the label of the bar from the axisline
this.distanceMultiplierBarLabels = 0.03;
this.labelsNextToLinePosition =
-this.fontSize * this.distanceMultiplierBarLabels;

this.maxData = Math.max(...this.data.map(Math.abs));
this.biggestElement = Math.max(...this.data);
// this.maxData = Math.max(...this.data);
this.smallesElement = this.data.reduce((a, b) => {
if (a < b) {
return a;
Expand All @@ -88,6 +88,7 @@ class BarDiagram extends Component {
}
});

// The barDiagram will always have a max height. This is to make sure that the bars (collectively) always fill up the maxHeight
const totalHeightOfBars = Math.max(...this.data) + -this.smallesElement;
this.normalizationFactor = totalHeightOfBars / this.maxHeight;

Expand All @@ -98,7 +99,7 @@ class BarDiagram extends Component {
}

createBarDiagram() {
const basePosition = this.addBars(this.data, this.labels);
const basePosition = this.addBars();

const stringLengthMultiplier = 0.2; //For distributing the yAxisTitle and horizontal line-labels

Expand All @@ -115,21 +116,21 @@ class BarDiagram extends Component {
this.addHorizontalLines(stringLengthMultiplier, length);
}

addBars(data: number[], labels: string[]): number {
addBars(): number {
const allBars = new Group();
const allBarsLabels = new Group();

let counter = 0;

// Want the spacing to be 2/3 of the width of the bars
// maxLength = numOfBars * width + (numOfBars + 1) * spacingBetweenBars

const numOfBars = this.data.length;

const widthOfBars = this.maxLength / ((5 / 3) * numOfBars + 2 / 3);
const spacingBetweenBars = (2 / 3) * widthOfBars;
let basePosition = 0 + spacingBetweenBars;

// Normalize the data to fit the max height of the diagram
const normalizedData = this.data.map((elem) => {
elem = elem / this.normalizationFactor;
return elem;
Expand All @@ -151,7 +152,7 @@ class BarDiagram extends Component {

const barIsPositive = this.data[counter] >= 0;

// If the bar is positive the text label should be below the line, if negative it should be above
// If the bar is positive, the text label should be below the line, if negative it should be above
const textLabelPos = barIsPositive
? this.labelsNextToLinePosition
: -this.labelsNextToLinePosition;
Expand All @@ -163,7 +164,7 @@ class BarDiagram extends Component {
anchorY: barIsPositive ? "bottom" : "top",
});

// If the bar is positive the value of the bar should be displayed above the bar, otherwise it should be below the bar
// If the bar is positive, the value of the bar should be displayed above the bar, otherwise it should be below the bar
const addMargin = barIsPositive ? 0.1 : -0.1;
const valueOfBar = new Text("" + this.data[counter], {
fontSize: this.fontSize,
Expand All @@ -172,14 +173,14 @@ class BarDiagram extends Component {
anchorY: barIsPositive ? "bottom" : "top",
});

// Add the bars, label and value to an object for access to them later (for example when switching bars)
this.barsObject[counter] = [bar, label, valueOfBar, this.data[counter]];
basePosition += widthOfBars + spacingBetweenBars;
counter++;

allBars.add(bar);
allBarsLabels.add(label);
allBarsLabels.add(valueOfBar);

this.barsObject[bar.id] = [bar, label, valueOfBar];
}
this.add(allBars);
this.add(allBarsLabels);
Expand Down Expand Up @@ -284,6 +285,7 @@ class BarDiagram extends Component {
const horizontalLines = new Group();
const lineLabels = new Group();

// Calculates the sum of the rounded biggest and smallest numbers
const maxNicePositiveNumber = this.roundNumberToNearestDigit(
this.biggestElement
);
Expand All @@ -305,7 +307,7 @@ class BarDiagram extends Component {
const spacing = maxNiceNumber / numOfLines;
let y = maxNiceNegativeNumber;

// maxLengde for tallene skal være så mange desimaler som det er i største og minste tall
// maxLength for the line-values will be as many digits as there are in the largest or smallest number
const maxLengthOfHorizontalLineValues =
Math.abs(maxNiceNegativeNumber).toString().length >
maxNicePositiveNumber.toString().length
Expand Down Expand Up @@ -361,6 +363,7 @@ class BarDiagram extends Component {
return [label, line];
}

// Used for rounding a number to the nearest a*power of ten. EX: 324 => 300
roundNumberToNearestDigit(numberToRound: number) {
if (numberToRound === 0) {
return 0;
Expand All @@ -372,15 +375,16 @@ class BarDiagram extends Component {
Math.pow(10, exponent)
);
}

setColorForBar(barID: number, color?: number) {
const bar = this.barsObject[barID][0];
bar.setColor(color);
}

switchBars(barID1: number, barID2: number) {
// Må flytte om på polygon, label og tall
const bar1 = this.barsObject[barID1];
const bar2 = this.barsObject[barID2];
switchBars(bar1Index: number, bar2Index: number) {
// Get the content for the two indices
const bar1 = this.barsObject[bar1Index];
const bar2 = this.barsObject[bar2Index];

const newX1 = bar1[0].position.x;
const newX2 = bar2[0].position.x;
Expand All @@ -398,30 +402,11 @@ class BarDiagram extends Component {
bar2[0].setPosition([newX1, 0]);
bar2[1].setPosition([label1Pos[0], label2Pos[1]]);
bar2[2].setPosition([value1Pos[0], value2Pos[1]]);
}

//* For å lage noe så må man lage en form/shape OG et materiale som er hvordan det skal se ut.
//* For hvert elem i data vil vi lage Shape/Polygon som matcher. Høyden er lik data[i] og bredden er lik 1.
//* Posisjon må settes bortover, med y=0
//* Label må over hver bar med teksten labels[i]
//* Må ha linjer rett opp og rett bortover. Linjen oppover må være like lang som max(data) og linjen bortover må være like lang som data.length
//* Vil ha bredde på BarDiagram lik en maxLengde (nå på 36)

// Funksjon for å bytte om på søyler
// setColor()
// swapColumns() (fargelagte søyler når de byttes)
// Linjer: runde av til nærmeste "fine tall" for den høyeste verdien
// Fastsette maxHeight for diagrammet
//

// Kombinasjon av disse: https://www.geeksforgeeks.org/bar-graph-meaning-types-and-examples/ OG https://www.math-only-math.com/bar-graph.html
// Aksetitler sentrert basert på lengden av aksen og går henholdsvis loddrett og vannrett
// Benevning av akser rett utenfor pilspissen
// Horisontale linjer bortover fra yAxis
// Man skal kunne oppdatere søylene med knapper

//! OBS: Makshøyde funker ikke med negative tall
// ! Endre bars til å lage i origo og så sette posisjon (?)
// Switch index for bars after switching their places
this.barsObject[bar2Index] = bar1;
this.barsObject[bar1Index] = bar2;
}
}

export default BarDiagram;

0 comments on commit 3fa42a7

Please sign in to comment.