@malloydata/render 0.0.109-dev231130215708 → 0.0.109-dev231201191617

package/dist/component/render-numeric-field.d.ts

@@ -0,0 +1,2 @@
+import { AtomicField } from '@malloydata/malloy';
+export declare function renderNumericField(f: AtomicField, value: number): string;

package/dist/component/render-numeric-field.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderNumericField = void 0;
+const data_styles_1 = require("../data_styles");
+const ssf_1 = require("ssf");
+// Map of unit to how many units of the make up the following time unit.
+const multiplierMap = new Map([
+    [data_styles_1.DurationUnit.Nanoseconds, 1000],
+    [data_styles_1.DurationUnit.Microseconds, 1000],
+    [data_styles_1.DurationUnit.Milliseconds, 1000],
+    [data_styles_1.DurationUnit.Seconds, 60],
+    [data_styles_1.DurationUnit.Minutes, 60],
+    [data_styles_1.DurationUnit.Hours, 24],
+    [data_styles_1.DurationUnit.Days, Number.MAX_VALUE],
+]);
+function formatTimeUnit(value, unit) {
+    let unitString = unit.toString();
+    if (value === 1) {
+        unitString = unitString.substring(0, unitString.length - 1);
+    }
+    return `${value} ${unitString}`;
+}
+function renderNumericField(f, value) {
+    let displayValue = value;
+    const { tag } = f.tagParse();
+    if (tag.has('currency')) {
+        let unitText = '$';
+        switch (tag.text('currency')) {
+            case data_styles_1.Currency.Euros:
+                unitText = '€';
+                break;
+            case data_styles_1.Currency.Pounds:
+                unitText = '£';
+                break;
+            case data_styles_1.Currency.Dollars:
+                // Do nothing.
+                break;
+        }
+        displayValue = (0, ssf_1.format)(`${unitText}#,##0.00`, value);
+    }
+    else if (tag.has('percent'))
+        displayValue = (0, ssf_1.format)('#,##0.00%', value);
+    else if (tag.has('duration')) {
+        const duration_unit = tag.text('duration');
+        const targetUnit = duration_unit !== null && duration_unit !== void 0 ? duration_unit : data_styles_1.DurationUnit.Seconds;
+        let currentDuration = value;
+        let currentUnitValue = 0;
+        let durationParts = [];
+        let foundUnit = false;
+        for (const [unit, multiplier] of multiplierMap) {
+            if (unit === targetUnit) {
+                foundUnit = true;
+            }
+            if (!foundUnit) {
+                continue;
+            }
+            currentUnitValue = currentDuration % multiplier;
+            currentDuration = Math.floor((currentDuration /= multiplier));
+            if (currentUnitValue > 0) {
+                durationParts = [
+                    formatTimeUnit(currentUnitValue, unit),
+                    ...durationParts,
+                ];
+            }
+            if (currentDuration === 0) {
+                break;
+            }
+        }
+        if (durationParts.length > 0) {
+            displayValue = durationParts.slice(0, 2).join(' ');
+        }
+        else
+            displayValue = formatTimeUnit(0, targetUnit);
+    }
+    else if (tag.has('number'))
+        displayValue = (0, ssf_1.format)(tag.text('number'), value);
+    else
+        displayValue = value.toLocaleString();
+    return displayValue;
+}
+exports.renderNumericField = renderNumericField;
+//# sourceMappingURL=render-numeric-field.js.map

package/dist/component/table.js

@@ -34,6 +34,7 @@ const decorators_js_1 = require("lit/decorators.js");
 const class_map_js_1 = require("lit/directives/class-map.js");
 const context_1 = require("@lit/context");
 const util_1 = require("./util");
+const render_numeric_field_1 = require("./render-numeric-field");
 const tableContext = (0, context_1.createContext)('table');
 // TODO: replace with an estimator per column
 function getColumnWidth() {
@@ -75,8 +76,9 @@ const renderFieldContent = (row, f, options) => {
     let value = row.cell(f).value;
     if (options.pinnedHeader)
         value = '';
-    else if (f.isAtomicField() && f.isNumber())
-        value = value.toLocaleString();
+    else if (f.isAtomicField() && f.isNumber()) {
+        value = (0, render_numeric_field_1.renderNumericField)(f, value);
+    }
     return renderCell(f, value, {
         hideStartGutter: (0, util_1.isFirstChild)(f),
         hideEndGutter: (0, util_1.isLastChild)(f),

package/dist/stories/tables.stories.d.ts

@@ -28,3 +28,9 @@ export declare const Nested: {
         view: string;
     };
 };
+export declare const NumberFormatting: {
+    args: {
+        source: string;
+        view: string;
+    };
+};

package/dist/stories/tables.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
+exports.NumberFormatting = exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
 const tables_malloy_raw_1 = __importDefault(require("./static/tables.malloy?raw"));
 const util_1 = require("./util");
 require("./themes.css");
@@ -50,4 +50,10 @@ exports.Nested = {
         view: 'nested',
     },
 };
+exports.NumberFormatting = {
+    args: {
+        source: 'products',
+        view: 'number_formats',
+    },
+};
 //# sourceMappingURL=tables.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.109-dev231130215708",
+  "version": "0.0.109-dev231201191617",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@malloydata/malloy": "^0.0.109-dev231130215708",
+    "@malloydata/malloy": "^0.0.109-dev231201191617",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",