Fix line to vega conversion bug (opensearch-project#4554) (opensearch…

…-project#4558) * Fix line to vega conversion bug * Update CHANGELOG and release notes * Address comments * Add more details to comment * Not a released changed, so no need to document --------- (cherry picked from commit b94a62f) Signed-off-by: Ashish Agrawal <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
ruanyl · Jul 12, 2023 · ab5017a · ab5017a
1 parent 4935a4d
commit ab5017a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/src/plugins/vis_type_vega/public/expressions/helpers.test.js b/src/plugins/vis_type_vega/public/expressions/helpers.test.js
@@ -194,6 +194,8 @@ describe('helpers', function () {
   describe('createSpecFromXYChartDatatable()', function () {
     // Following 3 tests fail since they are persisting temporal data
     // which can cause snapshots to fail depending on the test env they are run on.
+    // Tracking issue: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4555
+    // TODO: Add a test for the fix in this PR: https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4554
     it.skip('build simple line chart"', function () {
       expect(
         JSON.stringify(

diff --git a/src/plugins/vis_type_vega/public/expressions/helpers.ts b/src/plugins/vis_type_vega/public/expressions/helpers.ts
@@ -198,35 +198,40 @@ export const createSpecFromXYChartDatatable = (
   if (datatable.rows.length > 0 && dimensions.x !== null) {
     const xAxisId = getXAxisId(dimensions, datatable.columns);
     const xAxisTitle = cleanString(dimensions.x.label);
-    let seriesParamSkipCount = 0;
     datatable.columns.forEach((column, index) => {
-      // Don't add a layer for x axis column
-      if (isXAxisColumn(column)) {
-        seriesParamSkipCount++;
-        // Don't add a layer for vis layer column
-      } else if (!isVisLayerColumn(column)) {
-        const currentSeriesParams = visParams.seriesParams[index - seriesParamSkipCount];
-        const currentValueAxis = valueAxis.get(currentSeriesParams.valueAxis.toString());
-        let tooltip: Array<{ field: string; type: string; title: string }> = [];
-        if (visParams.addTooltip) {
-          tooltip = [
-            { field: xAxisId, type: 'temporal', title: xAxisTitle },
-            { field: column.id, type: 'quantitative', title: column.name },
-          ];
-        }
-        spec.layer.push({
-          mark: buildLayerMark(currentSeriesParams),
-          encoding: {
-            x: buildXAxis(xAxisTitle, xAxisId, visParams),
-            y: buildYAxis(column, currentValueAxis, visParams),
-            tooltip,
-            color: {
-              // This ensures all the different metrics have their own distinct and unique color
-              datum: column.name,
-            },
-          },
-        });
+      // Ignore columns that are for the x-axis and visLayers
+      if (isXAxisColumn(column) || isVisLayerColumn(column)) return;
+      // Get the series param id which is the 2nd value in the column id
+      // Example: 'col-1-3', the seriesParamId is 3. 'col-1-2-6', the seriesParamId is 2.
+      const seriesParamsId = column.id.split('-')[2];
+      const currentSeriesParams = visParams.seriesParams.find(
+        (param: { data: { id: string } }) => param?.data?.id === seriesParamsId
+      );
+      if (!currentSeriesParams) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to find matching series param for column of id: ${column.id}`);
+        return;
+      }
+      const currentValueAxis = valueAxis.get(currentSeriesParams.valueAxis.toString());
+      let tooltip: Array<{ field: string; type: string; title: string }> = [];
+      if (visParams.addTooltip) {
+        tooltip = [
+          { field: xAxisId, type: 'temporal', title: xAxisTitle },
+          { field: column.id, type: 'quantitative', title: column.name },
+        ];
       }
+      spec.layer.push({
+        mark: buildLayerMark(currentSeriesParams),
+        encoding: {
+          x: buildXAxis(xAxisTitle, xAxisId, visParams),
+          y: buildYAxis(column, currentValueAxis, visParams),
+          tooltip,
+          color: {
+            // This ensures all the different metrics have their own distinct and unique color
+            datum: column.name,
+          },
+        },
+      });
     });
   }