Merge pull request #1038 from neo4j-labs/fix/1037-line-rule-based-styling

Fix/1037 line rule based styling

Author: alfredorubin96

src/chart/line/LineChart.tsx

@@ -3,13 +3,7 @@ import React, { useEffect } from 'react';
 import { NoDrawableDataErrorMessage } from '../../component/editor/CodeViewerComponent';
 import { evaluateRulesOnDict, useStyleRules } from '../../extensions/styling/StyleRuleEvaluator';
 import { ChartProps } from '../Chart';
-import {
-  convertRecordObjectToString,
-  mutateName,
-  processHierarchyFromRecords,
-  recordToNative,
-  toNumber,
-} from '../ChartUtils';
+import { recordToNative, toNumber } from '../ChartUtils';
 import { themeNivo } from '../Utils';
 import { extensionEnabled } from '../../utils/ReportUtils';
 
@@ -77,17 +71,18 @@ const NeoLineChart = (props: ChartProps) => {
   // For line charts, the line color is overridden if at least one value meets the criteria.
   const getLineColors = (line) => {
     const xFieldName = props.selection && props.selection.x;
-    const yFieldName = line.id && line.id.split('(')[1] && line.id.split('(')[1].split(')')[0];
+    const yFieldName = line.id;
     let color = 'black';
-    line.data.forEach((entry) => {
+    for (const entry of line.data) {
       const data = {};
-      data[xFieldName] = entry[selection.x];
-      data[yFieldName] = entry[selection.value];
+      data[xFieldName] = entry.x;
+      data[yFieldName] = entry.y;
       const validRuleIndex = evaluateRulesOnDict(data, styleRules, ['line color']);
       if (validRuleIndex !== -1) {
         color = styleRules[validRuleIndex].customizationValue;
+        break;
       }
-    });
+    }
     return color;
   };
 

src/chart/table/TableChart.tsx

@@ -245,7 +245,6 @@ export const NeoTableChart = (props: ChartProps) => {
       ColumnSortedDescendingIcon: () => <></>,
       ColumnSortedAscendingIcon: () => <></>,
     },
-    // TODO: if mixing and matching row and cell styling, row rules MUST be set first or will not populate correctly
     getRowClassName: (params) => {
       return ['row color', 'row text color']
         .map((e) => {
@@ -256,21 +255,28 @@ export const NeoTableChart = (props: ChartProps) => {
     getCellClassName: (params) => {
       return ['cell color', 'cell text color']
         .map((e) => {
-          let trueRulesList = [''];
-          let trueRule;
+          let validRuleClass = '';
           for (const [index, rule] of styleRules.entries()) {
+            let ruleClass = '';
+            // If the rule target is not the current cell
             if (rule.targetField) {
               if (rule.targetField === params.field) {
-                trueRule = `rule${evaluateSingleRuleOnDict({ [rule.field]: params.row[rule.field] }, rule, index, [
+                ruleClass = `rule${evaluateSingleRuleOnDict({ [rule.field]: params.row[rule.field] }, rule, index, [
                   e,
                 ])}`;
               }
-            } else {
-              trueRule = `rule${evaluateSingleRuleOnDict({ [params.field]: params.value }, rule, index, [e])}`;
             }
-            trueRulesList.push(trueRule);
+            // If the rule target is the current cell
+            else {
+              ruleClass = `rule${evaluateSingleRuleOnDict({ [params.field]: params.value }, rule, index, [e])}`;
+            }
+            // If rule class is valid (rule-1 means rule check has failed)
+            if (ruleClass && ruleClass !== 'rule-1') {
+              validRuleClass = ruleClass;
+              break;
+            }
           }
-          return trueRulesList.join(' ');
+          return validRuleClass;
         })
         .join(' ');
     },

src/extensions/styling/StyleRuleEvaluator.ts

@@ -63,7 +63,10 @@ export const evaluateRulesOnDict = (dict, rules, customizations) => {
   }
   for (const [index, rule] of rules.entries()) {
     // Only check customizations that are specified
-    return evaluateSingleRuleOnDict(dict, rule, index, customizations);
+    const evaluationResult = evaluateSingleRuleOnDict(dict, rule, index, customizations);
+    if (evaluationResult !== -1) {
+      return evaluationResult;
+    }
   }
   // If no rules are met, return not found (index=-1)
   return -1;