From 39bf38969e62781453b26560f730f6831b90f0c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CBastien?= <“bastien.hubert@hotmail.com”> Date: Tue, 11 Feb 2025 17:22:59 +0100 Subject: [PATCH 1/3] Fix Table rule based styling by applying the first valid rule --- src/chart/table/TableChart.tsx | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx index 717b5caea..f47082dc1 100644 --- a/src/chart/table/TableChart.tsx +++ b/src/chart/table/TableChart.tsx @@ -256,21 +256,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(' '); }, From ff4f12f98b46fca891b77bc12d18cae00ee65da0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CBastien?= <“bastien.hubert@hotmail.com”> Date: Tue, 11 Feb 2025 17:23:43 +0100 Subject: [PATCH 2/3] Fix evaluateSingleRuleOnDict() function in order to avoid always returning the first evaluation result --- src/chart/table/TableChart.tsx | 1 - src/extensions/styling/StyleRuleEvaluator.ts | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx index f47082dc1..fbdc54289 100644 --- a/src/chart/table/TableChart.tsx +++ b/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) => { diff --git a/src/extensions/styling/StyleRuleEvaluator.ts b/src/extensions/styling/StyleRuleEvaluator.ts index 43cc6a092..b75418006 100644 --- a/src/extensions/styling/StyleRuleEvaluator.ts +++ b/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; From b89c22d62a969df0b8f5a75216ae1e03849a6f3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CBastien?= <“bastien.hubert@hotmail.com”> Date: Thu, 13 Feb 2025 17:29:31 +0100 Subject: [PATCH 3/3] Fix Line chart rule based styling and applying the first matching rule by line --- src/chart/line/LineChart.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/chart/line/LineChart.tsx b/src/chart/line/LineChart.tsx index c4e106fd4..ada63c847 100644 --- a/src/chart/line/LineChart.tsx +++ b/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; };