@lightdash/common 0.1387.1 → 0.1389.0

package/dist/visualizations/CartesianChartDataModel.d.ts

@@ -71,6 +71,7 @@ export type CartesianChartDisplay = {
             color?: string;
             type?: CartesianSeriesType.LINE | CartesianSeriesType.BAR;
             valueLabelPosition?: ValueLabelPositionOptions;
+            whichYAxis?: number;
         };
     };
     legend?: {

package/dist/visualizations/CartesianChartDataModel.js

@@ -299,12 +299,17 @@ class CartesianChartDataModel {
         const defaultSeriesType = type === savedCharts_1.ChartKind.VERTICAL_BAR ? 'bar' : 'line';
         const shouldStack = display?.stack === true;
         const xAxisReference = transformedData.indexColumn?.reference;
+        const leftYAxisSeriesReferences = [];
+        const rightYAxisSeriesReferences = [];
         const series = transformedData.valuesColumns.map((seriesColumn, index) => {
             const seriesDisplay = Object.values(display?.series || {}).find((s) => s.yAxisIndex === index);
-            const seriesFormat = seriesDisplay?.format ?? display?.yAxis?.[0]?.format; // TODO: don't always use the first y-axis format once there are multiple y-axes;
             const seriesColor = seriesDisplay?.color;
             const seriesValueLabelPosition = seriesDisplay?.valueLabelPosition;
             const seriesType = seriesDisplay?.type ?? defaultSeriesType;
+            // Any value other than 1 is considered the left axis.
+            const whichYAxis = seriesDisplay?.whichYAxis === 1 ? 1 : 0;
+            const seriesFormat = seriesDisplay?.format ??
+                display?.yAxis?.[whichYAxis]?.format;
             const singleYAxisLabel = 
             // NOTE: When there's only one y-axis left, set the label on the series as well
             transformedData.valuesColumns.length === 1 &&
@@ -312,6 +317,12 @@ class CartesianChartDataModel {
                 ? display.yAxis[0].label
                 : undefined;
             const seriesLabel = singleYAxisLabel ?? seriesDisplay?.label;
+            if (whichYAxis === 1) {
+                rightYAxisSeriesReferences.push(seriesColumn);
+            }
+            else {
+                leftYAxisSeriesReferences.push(seriesColumn);
+            }
             return {
                 dimensions: [xAxisReference, seriesColumn],
                 type: seriesType ?? defaultSeriesType,
@@ -324,9 +335,9 @@ class CartesianChartDataModel {
                     x: xAxisReference,
                     y: seriesColumn,
                 },
-                yAxisIndex: (display?.series &&
-                    display.series[seriesColumn]?.yAxisIndex) ||
-                    0,
+                // NOTE: this yAxisIndex is the echarts option, NOT the yAxisIndex
+                // we had been storing in the display object.
+                yAxisIndex: whichYAxis,
                 tooltip: {
                     valueFormatter: seriesFormat
                         ? CartesianChartDataModel.getTooltipFormatter(seriesFormat)
@@ -387,10 +398,10 @@ class CartesianChartDataModel {
                 {
                     type: 'value',
                     position: display?.yAxis?.[0]?.position || 'left',
-                    name: (display?.yAxis && display.yAxis[0]?.label) ||
-                        (0, field_1.friendlyName)(transformedData.valuesColumns.length === 1
-                            ? transformedData.valuesColumns[0]
-                            : ''),
+                    name: leftYAxisSeriesReferences.length > 0
+                        ? display?.yAxis?.[0]?.label ||
+                            (0, field_1.friendlyName)(leftYAxisSeriesReferences[0])
+                        : '',
                     nameLocation: 'center',
                     nameGap: 50,
                     nameRotate: 90,
@@ -405,6 +416,27 @@ class CartesianChartDataModel {
                         }
                         : {}),
                 },
+                {
+                    type: 'value',
+                    position: 'right',
+                    name: rightYAxisSeriesReferences.length > 0
+                        ? display?.yAxis?.[1]?.label ||
+                            (0, field_1.friendlyName)(rightYAxisSeriesReferences[0])
+                        : '',
+                    nameLocation: 'center',
+                    nameGap: 50,
+                    nameRotate: -90,
+                    nameTextStyle: {
+                        fontWeight: 'bold',
+                    },
+                    ...(display?.yAxis?.[1]?.format
+                        ? {
+                            axisLabel: {
+                                formatter: CartesianChartDataModel.getTooltipFormatter(display?.yAxis?.[1].format),
+                            },
+                        }
+                        : {}),
+                },
             ],
             dataset: {
                 id: 'dataset',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lightdash/common",
-    "version": "0.1387.1",
+    "version": "0.1389.0",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [