From 48fb6146d039010d7a78d9cf502624aafda24b5e Mon Sep 17 00:00:00 2001 From: Hank Ditton Date: Fri, 3 Apr 2026 15:13:47 -0600 Subject: [PATCH] fix(playground): multiply percent-formatted values by 100 before display The Playground was displaying format: percent values with a raw % suffix (e.g. 0.273%) instead of multiplying by 100 first (27.3%). This contradicts the documented behavior where presentation tools should apply the multiplication implicitly. Fixes #10623 Made-with: Cursor --- .../src/QueryBuilderV2/QueryBuilderResults.tsx | 2 +- .../src/QueryBuilderV2/components/ChartRenderer.tsx | 4 ++++ .../src/components/DrilldownModal/TableQueryRenderer.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderResults.tsx b/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderResults.tsx index 12e751c60f790..7132118232ec2 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderResults.tsx +++ b/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderResults.tsx @@ -786,7 +786,7 @@ export function QueryBuilderResults({ forceMinHeight }: { forceMinHeight?: boole ]; case 'percent': return [ - `${formatNumber(typeof value === 'string' ? parseFloat(value) : value)}%`, + `${formatNumber((typeof value === 'string' ? parseFloat(value) : value) * 100)}%`, 'percent', ]; default: diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/ChartRenderer.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/ChartRenderer.tsx index e1d60a2d1f441..0ddcc908128a5 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/components/ChartRenderer.tsx +++ b/packages/cubejs-playground/src/QueryBuilderV2/components/ChartRenderer.tsx @@ -466,6 +466,10 @@ const TypeToChartComponent = { return text && text !== '0' ? 'true' : 'false'; } + if (c.format === 'percent' && text != null) { + return `${(parseFloat(text) * 100).toFixed(2)}%`; + } + return text; } }, diff --git a/packages/cubejs-playground/src/components/DrilldownModal/TableQueryRenderer.tsx b/packages/cubejs-playground/src/components/DrilldownModal/TableQueryRenderer.tsx index 0d25849f94143..95efeb73af520 100644 --- a/packages/cubejs-playground/src/components/DrilldownModal/TableQueryRenderer.tsx +++ b/packages/cubejs-playground/src/components/DrilldownModal/TableQueryRenderer.tsx @@ -36,7 +36,7 @@ const formatTableData = (columns, data) => { } if (type === 'number' && format === 'percent') { - return [parseFloat(value).toFixed(2), '%'].join(''); + return [(parseFloat(value) * 100).toFixed(2), '%'].join(''); } return value.toString();