From 53c233b96975f961998af854e21e235917bc347f Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Wed, 14 Aug 2024 20:11:04 +0300
Subject: [PATCH] area generator: support `invert` option for y/y1 axes

---
 examples/area.html | 11 +++++++----
 src/index.ts       | 11 ++++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/examples/area.html b/examples/area.html
index 67082dd..290b64a 100644
--- a/examples/area.html
+++ b/examples/area.html
@@ -13,8 +13,9 @@
       let options = {
         renderLegend: false, usePanning: false,
         axis: {
-          y: { invert: false, range: [0, 100] },
           x: { format: 'numeric', range: [0, 100] },
+          y: { invert: true, range: [0, 100] },
+          y1: { isActive: true, format: 'numeric', range: [0, 1000] },
         },
         zoomEvents: {
           mouse: { zoom: { isActive: false, orientation: 'horizontal' } },
@@ -24,16 +25,18 @@
       const data1 = [[0,0], [35, 40], [65, 60], [100, 100]];
       const data2 = [[0,0], [35, 50], [65, 65], [80, 100]];
       const data3 = [[0,0], [35, 20], [65, 50], [100, 80]];
+      const data4 = [[0,900], [35, 800], [65, 700], [100, 600]];
       var pod = new LinePod(
         document.getElementById('chart'),
         [
-          { target: 'test1', datapoints: data1, color: 'green' },
+          { target: 'test1', datapoints: data1, color: 'green', renderArea: 'Above' },
           { target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' },
-          { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Above' },
+          { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Below', yOrientation: 'right' },
+          { target: 'test4', datapoints: data4, color: 'purple', renderArea: 'Above', yOrientation: 'right' },
         ],
         options
       );
-      pod.render();      
+      pod.render();
     </script>
   </body>
 </html>
diff --git a/src/index.ts b/src/index.ts
index 84f67f3..13fe2ab 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -62,6 +62,11 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
 
   getRenderGenerator(renderArea: AreaType, yOrientation: yAxisOrientation): Generator {
     const yScale = yOrientation === yAxisOrientation.LEFT ? this.state.yScale : this.state.y1Scale;
+    const yValueRange = yOrientation === yAxisOrientation.LEFT ? this.state.yValueRange : this.state.y1ValueRange;
+    const yAxisOptions = yOrientation === yAxisOrientation.LEFT ? this.options.axis.y : this.options.axis.y1;
+
+    const topChartBorder = !yAxisOptions.invert ? yScale(yValueRange[1]) : yScale(yValueRange[0]);
+    const bottomChartBorder = !yAxisOptions.invert ? yScale(yValueRange[0]) : yScale(yValueRange[1]);
     switch(renderArea) {
       case AreaType.NONE:
         // return line generator
@@ -71,13 +76,13 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       case AreaType.ABOVE:
         return d3.area()
           .x(d => this.state.xScale(d[0]))
-          .y0(this.height)
+          .y0(topChartBorder)
           .y1(d => yScale(d[1]));
       case AreaType.BELOW:
         return d3.area()
           .x(d => this.state.xScale(d[0]))
           .y0(d => yScale(d[1]))
-          .y1(0);
+          .y1(bottomChartBorder);
       default:
         throw new Error(`Unknown type of renderArea: ${renderArea}`);
     }
@@ -438,7 +443,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
 
     // TODO: refactor core not to take _options explicitly
     if(
-      this.options._options.events !== undefined && 
+      this.options._options.events !== undefined &&
       this.options._options.events.zoomOut !== undefined
     ) {
       this.options._options.events.zoomOut(