From 3fa42a7627e5035a6ddb71cba6833c1a1956fc41 Mon Sep 17 00:00:00 2001 From: Kristiantvaa Date: Wed, 3 Jul 2024 12:18:53 +0200 Subject: [PATCH] feat: added comments to explain code --- src/Components/Derived/BarDiagram.ts | 63 +++++++++++----------------- 1 file changed, 24 insertions(+), 39 deletions(-) diff --git a/src/Components/Derived/BarDiagram.ts b/src/Components/Derived/BarDiagram.ts index 14d1f14..08dc9c9 100644 --- a/src/Components/Derived/BarDiagram.ts +++ b/src/Components/Derived/BarDiagram.ts @@ -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[]; @@ -38,7 +40,6 @@ class BarDiagram extends Component { maxLength: number; maxHeight: number; - // Extra fields fontSize: number; labelsNextToLinePosition: number; distanceMultiplierBarLabels: number; @@ -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[], @@ -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; @@ -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; @@ -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 @@ -115,7 +116,7 @@ class BarDiagram extends Component { this.addHorizontalLines(stringLengthMultiplier, length); } - addBars(data: number[], labels: string[]): number { + addBars(): number { const allBars = new Group(); const allBarsLabels = new Group(); @@ -123,13 +124,13 @@ class BarDiagram extends Component { // 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; @@ -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; @@ -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, @@ -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); @@ -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 ); @@ -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 @@ -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; @@ -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; @@ -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;