fix: multiple axis of different scales (#49)

fix: multiple axis of different scales (#49)

Author: victorgz

__tests__/unit/attributes/cartesianAxis.test.js

@@ -7,7 +7,7 @@ const TEST_DATA_PROPERTIES = [
     yAxes: [{ position: 'foo' }]
   }),
   ChartOptionMock('offset', true, { yAxes: [{ offset: true }] }),
-  ChartOptionMock('id', 'foo', { yAxes: [{ id: 'foo' }] }),
+  ChartOptionMock('axisid', 'foo', { yAxes: [{ id: 'foo' }] }),
   ChartOptionMock('ticksMin', 'foo', {
     yAxes: [{ ticks: { min: 'foo' } }]
   }),

__tests__/unit/chartConfigService.test.js

@@ -36,6 +36,23 @@ describe('c-chart-config-service', () => {
       chartConfigService.getConfig()[ATTRIBUTE_CARTESIAN_AXES]
     ).toMatchObject(testSubject);
   });
+  test(`Update scales config with multiple scales on same axis`, () => {
+    const chartConfigService = new ChartConfigService();
+    const firstAxis = { uuid: 1, gridLines: { offsetGridLines: 10 } };
+    const secondAxis = { uuid: 2, gridLines: { offsetGridLines: 20 } };
+    chartConfigService.updateConfig(
+      { yAxes: [firstAxis] },
+      ATTRIBUTE_CARTESIAN_AXES
+    );
+    chartConfigService.updateConfig(
+      { yAxes: [secondAxis] },
+      ATTRIBUTE_CARTESIAN_AXES
+    );
+    const testSubject = { yAxes: [firstAxis, secondAxis] };
+    expect(
+      chartConfigService.getConfig()[ATTRIBUTE_CARTESIAN_AXES]
+    ).toMatchObject(testSubject);
+  });
   test(`Update config with new object`, () => {
     const chartConfigService = new ChartConfigService();
     const testSubject = { test: { attribut: 'val' } };

force-app/main/default/lwc/cartesianAxis/cartesianAxis.js

@@ -53,11 +53,22 @@ export default class CartesianAxis extends BaseAxis {
     this._content.offset = parseBoolean(v);
   }
 
+  /**
+   * @deprecated Property replaced by axisid
+   */
   @api
   get id() {
     return this._content.id;
   }
   set id(v) {
+    // Do nothing
+  }
+
+  @api
+  get axisid() {
+    return this._content.id;
+  }
+  set axisid(v) {
     this._content.id = v;
   }
 

force-app/main/default/lwc/chartConfigService/chartConfigService.js

@@ -61,6 +61,15 @@ export default class ChartConfigService {
         } else {
           // the attribut is an object we don't know
           this._config[option][attribut] = payload[attribut]; // store it
+
+          // If this is a scale object with data, add it to the scales property
+          if (
+            Object.prototype.hasOwnProperty.call(this._scales, attribut) &&
+            payload[attribut] !== undefined
+          ) {
+            this._scales[attribut][payload[attribut][0].uuid] =
+              payload[attribut][0];
+          }
         }
       });
     }

force-app/sample/default/lwc/sampleApp/sampleApp.html

@@ -731,5 +731,81 @@
         </c-chart>
       </code>
     </c-sample-app-item>
+
+    <!-- Multiple axes -->
+    <c-sample-app-item>
+      <c-chart slot="chartExample" type="line" responsive="true">
+        <c-dataset labels='["A", "B", "C", "D", "E"]'>
+          <c-data
+            yaxisid="left"
+            label="Left dataset"
+            backgroundcolor="rgba(82, 183, 216, 1)"
+            bordercolor="rgba(82, 183, 216, 0.2)"
+            detail="[10, 9, 4, 3, 6]"
+            fill="false"
+          ></c-data>
+          <c-data
+            yaxisid="right"
+            label="Right dataset"
+            detail="[3, 2, 1, 5, 0]"
+            backgroundcolor="rgba(84, 167, 123, 1)"
+            bordercolor="rgba(84, 167, 123, 0.2)"
+            fill="false"
+          ></c-data>
+        </c-dataset>
+        <c-title text="Multiple axes with different scales"></c-title>
+        <c-cartesian-axis
+          axis="x"
+          position="bottom"
+          type="category"
+        ></c-cartesian-axis>
+        <c-cartesian-linear-axis
+          axisid="left"
+          axis="y"
+          position="left"
+          ticks-stepsize="3"
+          title-labelstring="Left axis"
+          title-display="true"
+        ></c-cartesian-linear-axis>
+        <c-cartesian-linear-axis
+          axisid="right"
+          axis="y"
+          position="right"
+          ticks-stepsize="1"
+          title-labelstring="Right axis"
+          title-display="true"
+        ></c-cartesian-linear-axis>
+      </c-chart>
+      <code slot="chartCode" lang="html">
+        &lt;c-chart type=&quot;line&quot; responsive=&quot;true&quot;&gt;<br />
+        &emsp;&lt;c-dataset labels=&apos;[&quot;A&quot;, &quot;B&quot;,
+        &quot;C&quot;, &quot;D&quot;, &quot;E&quot;]&apos;&gt;<br />
+        &emsp;&emsp;&lt;c-data yaxisid=&quot;left&quot; label=&quot;Left
+        dataset&quot; detail=&quot;[10, 9, 4, 3, 6]&quot;
+        backgroundcolor=&quot;rgba(82, 183, 216, 1)&quot;<br />
+        &emsp;&emsp;&emsp;bordercolor=&quot;rgba(82, 183, 216, 0.2)&quot;
+        fill=&quot;false&quot;&gt;&lt;/c-data&gt;<br />
+        &emsp;&emsp;&lt;c-data yaxisid=&quot;right&quot; label=&quot;Right
+        dataset&quot; detail=&quot;[3, 2, 1, 5, 0]&quot;
+        backgroundcolor=&quot;rgba(84, 167, 123, 1)&quot;<br />
+        &emsp;&emsp;&emsp;bordercolor=&quot;rgba(84, 167, 123, 0.2)&quot;
+        fill=&quot;false&quot;&gt;&lt;/c-data&gt;<br />
+        &emsp;&lt;/c-dataset&gt;<br />
+        &emsp;&lt;c-title text=&quot;Multiple axes with different
+        scales&quot;&gt;&lt;/c-title&gt;<br />
+        &emsp;&lt;c-cartesian-axis axis=&quot;x&quot;
+        position=&quot;bottom&quot;
+        type=&quot;category&quot;&gt;&lt;/c-cartesian-axis&gt;<br />
+        &emsp;&lt;c-cartesian-linear-axis axisid=&quot;left&quot;
+        axis=&quot;y&quot; position=&quot;left&quot;
+        ticks-stepsize=&quot;3&quot; title-labelstring=&quot;Left axis&quot;<br />
+        &emsp;&emsp;title-display=&quot;true&quot;&gt;&lt;/c-cartesian-linear-axis&gt;<br />
+        &emsp;&lt;c-cartesian-linear-axis axisid=&quot;right&quot;
+        axis=&quot;y&quot; position=&quot;right&quot;
+        ticks-stepsize=&quot;1&quot; title-labelstring=&quot;Right axis&quot;<br />
+        &emsp;&emsp;title-display=&quot;true&quot;&gt;&lt;/c-cartesian-linear-axis&gt;<br />
+        &lt;/c-chart&gt;
+      </code>
+    </c-sample-app-item>
   </div>
 </template>