fix(playground): Multiple percent-formatted values by 100 before display, thanks @hank-sq (cube-js#10624)

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 cube-js#10623

Made-with: Cursor

Author: hank-sq

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:

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;
                   }
                 },

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();