Merge pull request #328 from Dessia-tech/feat/logscale

[6] Feat/logscale

Author: Tanguylo

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Add
 - Integer axes only show integer ticks
 - Handle date as continuous value on axes
+- Allow to log scale axes
 
 ### Fix
 - Add reference_path to all Primitive / Elementary drawing Objects

cypress/e2e/axes.cy.ts

@@ -87,6 +87,13 @@ describe('Axis', function() {
     expect(axis.maxValue, "maxValue").to.be.closeTo(8.7, 0.05);
   });
 
+  it("should scale axis in a logarithmic way", function() {
+    const axis = new Axis(vector, boundingBox, origin, end, name, initScale, nTicks);
+    expect(vector.map(element => Math.floor(axis.relativeToAbsolute(element))), "projected values").to.deep.equal([4, 27, 50, 72, 95]);
+    axis.switchLogScale(vector);
+    expect(vector.map(element => Math.floor(axis.relativeToAbsolute(element))), "projected log values").to.deep.equal([-19, -12, -8, -5, -3]);
+  });
+
   it('should update axis with translation and style', function() {
     const axis = new Axis(vector, boundingBox, origin, end, name, initScale, nTicks);
     const viewPoint = new Vertex(0, 0);

cypress/snapshots/base/visualRegressions.cy.ts/PLOTSCATTER -- should draw canvas-base.png

@@ -51,6 +51,8 @@
         onclick="plot_data.switchOrientation()"> Change Disposition </button>
         <button name="toogleAxes" value="OK" type="button"
         onclick="plot_data.htmlToggleAxes()"> Show / Hide Axes </button>
+        <button name="logScale" value="OK" type="button"
+        onclick="plot_data.switchLogScale()"> Log Scale</button>
         $specific_buttons
     <hr style="border-top: 2px;">
     </div>

plot_data/templates.py

@@ -27,8 +27,9 @@
         elements[-1]['length'] = None
 
 plot_data_object = plot_data.ParallelPlot(elements=elements,
-                                          axes=['long middle_attribute name ' * 15, 'mass' * 30, 'color', 'length', 'shape',
-                                                'long middle_attribute name ' * 10, 'long right attribute name ' * 7, "date"])
+                                          axes=['long middle_attribute name ' * 15, 'mass' * 30, 'color', 'length',
+                                                'shape', 'long middle_attribute name ' * 10, 'long right attribute name ' * 7,
+                                                "date"])
 
 # The line above shows the minimum requirements for creating a
 # parallel plot. However, many options are available for further customization.

script/parallel_plot.py

@@ -10,7 +10,7 @@
 elements = []
 SHAPES = ['1-2-3-4-5-6-7-8-9round', 'square', 'triangle', 'ellipse']
 COLORS = [RED, BLUE, GREEN, YELLOW, ORANGE, VIOLET]
-for i in range(1000):
+for i in range(500):
     random_shape = SHAPES[random.randint(0, len(SHAPES) - 1)]
     random_color = COLORS[random.randint(0, len(SHAPES) - 1)]
     elements.append({'mass': random.uniform(0, 50),

script/plot_scatter.py

@@ -24,6 +24,7 @@ export class Axis extends Shape {
   public ticksFontsize: number = 12;
   public isDiscrete: boolean = true;
   public isInteger: boolean = false;
+  public logScale: boolean = false;
   public isDate: boolean = false;
 
   public drawPath: Path2D;
@@ -152,6 +153,30 @@ export class Axis extends Shape {
 
   public toggleView(): void { this.visible = !this.visible }
 
+  private getLogBoundaries(vector: number[]): [number, number] {
+    const positiveVector = vector.filter(value => value > 0);
+    const min = Math.min(...positiveVector);
+    const max = Math.max(...positiveVector);
+    if (max <= 0) {
+      this.logScale = false;
+      return [this.initMinValue, this.initMaxValue]
+    }
+    if (this.logScale) {
+      return [
+        this.initMinValue > 0 ? Math.log10(this.initMinValue) : Math.log10(min),
+        this.initMaxValue > 0 ? Math.log10(this.initMaxValue) : Math.log10(max)
+      ]
+    } else return [10 ** this.initMinValue, 10 ** this.initMaxValue]
+  }
+
+  public switchLogScale(vector: number[]): void {
+    if (!this.isDiscrete) {
+      this.logScale = !this.logScale;
+      [this.initMinValue, this.initMaxValue] = this.getLogBoundaries(vector);
+      this.updateTicks();
+    }
+  }
+
   private discretePropertiesFromVector(vector: any[]): void {
     if (vector) {
       if (vector.length != 0) {
@@ -186,8 +211,8 @@ export class Axis extends Shape {
   public resetScale(): void {
     this.minValue = this.initMinValue;
     this.maxValue = this.initMaxValue;
-    this._previousMin = this.initMinValue;
-    this._previousMax = this.initMaxValue;
+    this._previousMin = this.minValue;
+    this._previousMax = this.maxValue;
     this.updateTicks();
   }
 
@@ -251,13 +276,19 @@ export class Axis extends Shape {
   }
 
   public absoluteToRelative(value: string | number): number {
-    const numberedValue = this.stringToValue(value);
-    return this.isVertical ? (numberedValue - this.transformMatrix.f) / this.transformMatrix.d : (numberedValue - this.transformMatrix.e) / this.transformMatrix.a
+    let numberedValue = this.stringToValue(value);
+    const projectedValue = this.isVertical
+      ? (numberedValue - this.transformMatrix.f) / this.transformMatrix.a
+      : (numberedValue - this.transformMatrix.e) / this.transformMatrix.a;
+    return this.logScale ? 10 ** projectedValue : projectedValue;
   }
 
   public relativeToAbsolute(value: string | number): number {
-    const numberedValue = this.stringToValue(value);
-    return this.isVertical ? numberedValue * this.transformMatrix.d + this.transformMatrix.f : numberedValue * this.transformMatrix.a + this.transformMatrix.e
+    let numberedValue = this.stringToValue(value);
+    if (this.logScale) numberedValue = Math.log10(numberedValue);
+    return this.isVertical
+      ? numberedValue * this.transformMatrix.d + this.transformMatrix.f
+      : numberedValue * this.transformMatrix.a + this.transformMatrix.e;
   }
 
   public normedValue(value: number): number { return value / this.interval }
@@ -311,7 +342,7 @@ export class Axis extends Shape {
   private getTickIncrement(): number {
     const rawIncrement = this.isDiscrete ? 1 : Axis.nearestFive((this.maxValue - this.minValue) / this.nTicks);
     const logExponent = Math.floor(Math.log10(rawIncrement));
-    if (this.isInteger) return this.integerTickIncrement(rawIncrement, logExponent);
+    if (this.isInteger && !this.logScale) return this.integerTickIncrement(rawIncrement, logExponent);
     return this.floatTickIncrement(rawIncrement, logExponent);
   }
 
@@ -351,7 +382,7 @@ export class Axis extends Shape {
     if (ticks.slice(0)[0] < this.minValue) ticks.splice(0, 1);
     if (ticks.slice(-1)[0] >= this.maxValue) ticks.splice(-1, 1);
     this.updateTickPrecision(increment, ticks);
-    return ticks
+    return this.logScale ? ticks.map(tick => 10 ** tick) : ticks
   }
 
   public drawWhenIsVisible(context: CanvasRenderingContext2D): void {
@@ -458,8 +489,7 @@ export class Axis extends Shape {
         if (count == tick && this.labels[count]) {
           text = this.labels[count];
           count++;
-        }
-        else text = '';
+        } else text = '';
       }
       ticksText.push(this.computeTickText(context, text, tickTextParams, point, pointHTMatrix));
     })
@@ -497,7 +527,9 @@ export class Axis extends Shape {
   }
 
   protected drawTickPoint(context: CanvasRenderingContext2D, tick: number, vertical: boolean, HTMatrix: DOMMatrix, color: string): Point {
-    const center = new Vertex(tick * Number(!vertical), tick * Number(vertical)).transform(HTMatrix);
+    const center = this.logScale ?
+      new Vertex(Math.log10(tick) * Number(!vertical), Math.log10(tick) * Number(vertical)).transform(HTMatrix) :
+      new Vertex(tick * Number(!vertical), tick * Number(vertical)).transform(HTMatrix);
     const point = new Point(center.x, center.y, SIZE_AXIS_END, this.tickMarker, this.tickOrientation, color);
     point.draw(context);
     return point
@@ -514,7 +546,7 @@ export class Axis extends Shape {
   }
 
   private getValueToDrawMatrix(): DOMMatrix {
-    const scale = this.drawLength / this.interval;
+    let scale = this.drawLength / this.interval;
     if (this.isInverted) {
       return new DOMMatrix([
         -scale, 0, 0, -scale,
@@ -561,13 +593,18 @@ export class Axis extends Shape {
     }
   }
 
+  private restrictRubberBandTranslation(downValue: number, currentValue: number): [number, number] {
+    if (!this.logScale || this.rubberBand.lastValues.x + currentValue - downValue > 0 || !this.rubberBand.isTranslating) return [downValue, currentValue]
+    return [downValue, downValue - this.rubberBand.lastValues.x]
+  }
+
   public mouseMoveClickedArrow(mouseCoords: Vertex): void {
     const downValue = this.absoluteToRelative(this.isVertical ? this.mouseClick.y : this.mouseClick.x);
     const currentValue = this.absoluteToRelative(this.isVertical ? mouseCoords.y : mouseCoords.x);
     if (!this.rubberBand.isClicked) {
       this.rubberBand.minValue = Math.min(downValue, currentValue);
       this.rubberBand.maxValue = Math.max(downValue, currentValue);
-    } else this.rubberBand.mouseMove(downValue, currentValue);
+    } else this.rubberBand.mouseMove(...this.restrictRubberBandTranslation(downValue, currentValue));
   }
 
   public mouseMoveClickedTitle(mouseCoords: Vertex): void { }
@@ -643,13 +680,13 @@ export class Axis extends Shape {
 
   public updateScale(viewPoint: Vertex, scaling: Vertex, translation: Vertex): void {
     const HTMatrix = this.transformMatrix;
-    let center = (viewPoint.x - HTMatrix.e) / HTMatrix.a;
+    let center = (viewPoint.x - HTMatrix.e) / HTMatrix.a;;
     let offset = translation.x;
-    let scale = scaling.x;
+    let scale = this.logScale ? 10 ** (scaling.x - 1) : scaling.x;
     if (this.isVertical) {
       center = (viewPoint.y - HTMatrix.f) / HTMatrix.d;
       offset = translation.y;
-      scale = scaling.y;
+      scale = this.logScale ? 10 ** (scaling.y - 1) : scaling.y;
     }
     this.minValue = (this._previousMin - center) / scale + center - offset / HTMatrix.a;
     this.maxValue = (this._previousMax - center) / scale + center - offset / HTMatrix.a;

src/axes.ts

@@ -595,7 +595,10 @@ export class Scatter extends Frame {
   }
 
   private projectPoint(xCoord: number, yCoord: number): [number, number] {
-    return [xCoord * this.relativeMatrix.a + this.relativeMatrix.e, yCoord * this.relativeMatrix.d + this.relativeMatrix.f]
+    return [
+      this.axes[0].relativeToAbsolute(xCoord) * this.canvasMatrix.a + this.canvasMatrix.e,
+      this.axes[1].relativeToAbsolute(yCoord) * this.canvasMatrix.d + this.canvasMatrix.f
+    ]
   }
 
   private distanceMatrix(xCoords: number[], yCoords: number[]): number[][] {

src/figures.ts

@@ -42,8 +42,7 @@ export function isInteger(value: number): boolean {
 }
 
 export function isIntegerArray(array: number[]): boolean {
-  for (let value of array) { if (!isInteger(value) && value != null) return false };
-  return true
+  return !array.some(value => !isInteger(value) && value != null)
 }
 
 export function getTenPower(value: number): number {

src/functions.ts

@@ -424,6 +424,12 @@ export class RemoteFigure {
 
   public switchOrientation(): void {}
 
+  public switchLogScale(): void {
+    this.axes.forEach(axis => axis.switchLogScale(this.features.get(axis.name) as number[]));
+    this.resetScales();
+    this.draw();
+  }
+
   public togglePoints(): void {}
 
   public toggleAxes(): void {