@evidence-dev/components - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

CHANGELOG.md

 # @evidence-dev/components
 
+## 1.3.1
+
+### Patch Changes
+
+- 87fd331: Fix formatting for <currency-code>2k format
+- 9d2726b: issue-343 auto formatting for unformatted number columns, auto formatted currencies. Introduced Jest unit tests for ES6 Modules.
+- 6ed9a37: GA new formatting system without feature flags
+- 4702901: Adds support for static folder that users can put files in
+- e5a3eb7: Minor changes to formatting settings panel
+- 77c205d: Made `pct` an auto format showing 3 significant digits from the median's leading digit
+
 ## 1.3.0
@@ -4,0 +15,0 @@

modules/echartsCanvasDownload.d.ts

@@ -1,4 +0,4 @@
-declare function _default(node: any, option: any, renderer: any): {
+declare function _default(node: any, option: any): {
     destroy(): void;
 };
 export default _default;

modules/echartsCanvasDownload.js

@@ -6,3 +6,3 @@ import * as echarts from 'echarts';
 
-export default(node, option, renderer) => {
+export default(node, option) => {
 
@@ -443,2 +443,4 @@ echarts.registerTheme('evidence-light', {
 
+    option.animation = false
+
 	chart.setOption(option);
@@ -445,0 +447,0 @@

modules/formatTitle.js

@@ -1,56 +0,10 @@
-import { getFormatName } from './formats';
+import { applyTitleTagReplacement } from './formatting';
 
 export default function formatTitle(column, columnFormat) {
-
-    // Get format tag from end of column name (if supplied):
-    let formatName = getFormatName(columnFormat);
-
-    // Remove the format tag from the column name (only if preceded by
-    // an underscore):
-    let colname = column.replace("_"+formatName,"");
-    let suffix = "";
-    
-    // Add special formatting depending on format of column name:
-    // TODO issue-333 move the replacement text to built-in formats
-    switch(formatName){
-        case "pct": 
-            // take name exluding fmt tag (colnam)
-            colname = colname
-            break;
-        case "usd": 
-            colname = colname;
-            suffix = " ($)";
-            break;
-        case "cad": 
-            colname = colname;
-            suffix = " ($)";
-            break;
-        case "eur": 
-            colname = colname;
-            suffix = " (€)";
-            break;
-        case "gbp": 
-            colname = colname;
-            suffix =  " (£)";
-            break;
-        case "chf": 
-            colname = colname;
-            suffix = " (CHF)";
-            break;
-        case "str":
-            colname = colname;
-            break;
-        case "date": 
-            // take name including fmt tag (column)
-            colname = column;
-            break;
-        default: 
-            colname = column;
-    }
-
+    let result = applyTitleTagReplacement(column, columnFormat);
     // Allow some acronyms to remain fully capitalized in titles:
     let acronyms = [
-        "id"
+        "id",
+        "gdp"
     ]
-
     // Allow some joining words to remain fully lowercased in title:
@@ -61,5 +15,5 @@ let lowercase = [
         "and",
-        "in"
+        "in",
+        "on"
     ]
-
     // Set name to proper casing:
@@ -79,9 +33,6 @@ function toTitleCase(str) {
     }
-
     // Remove all underscores before passing to title case function:
-    colname = toTitleCase(colname.replace(/_/g, ' '))
-    colname = colname + suffix;
-
-    return colname;
+    result = toTitleCase(result.replace(/_/g, ' '));
+    return result;
 }
   

modules/getColumnExtents.d.ts

@@ -1,1 +0,14 @@
-export default function getExtents(data: any, column: any): number[];
+/**
+ *
+ * @param {*} data
+ * @param {*} column
+ * @returns undefined if not all the defined values are numbers
+ */
+export function getColumnUnitSummary(data: any, columnName: any): {
+    min: number;
+    max: number;
+    median: number;
+    maxDecimals: number;
+    unitType: string;
+};
+export function getColumnExtentsLegacy(data: any, column: any): number[];

modules/getColumnExtents.js

@@ -1,11 +0,108 @@
-import {tidy, summarize, min, max} from "@tidyjs/tidy";
+import { tidy, summarize, min, max, median } from "@tidyjs/tidy";
 
-export default function getExtents(data, column) {
-    var domainData = tidy(
-        data,
-        summarize({ min: min(column), max: max(column) })
-    );
-    let minValue = domainData[0].min;
-    let maxValue = domainData[0].max;
-    return [minValue, maxValue];
+/**
+ *
+ * @param {*} data
+ * @param {*} column
+ * @returns undefined if not all the defined values are numbers
+ */
+export function getColumnUnitSummary(data, columnName) {
+  let seriesSummary;
+  let seriesExtents = tidy(
+    data,
+    summarize({ min: min(columnName), max: max(columnName), median: median(columnName) })
+  )[0];
+
+  //TODO try to use summerize spec in tidy
+  let  { maxDecimals, unitType } = summarizeUnits(data.map((row) => row[columnName]));
+
+  seriesSummary = {
+    min: seriesExtents.min,
+    max: seriesExtents.max,
+    median: seriesExtents.median,
+    maxDecimals: maxDecimals,
+    unitType: unitType,
+  };
+  return seriesSummary;
+}
+export function getColumnExtentsLegacy(data, column) {
+  var domainData = tidy(
+    data,
+    summarize({ min: min(column), max: max(column) })
+  );
+  let minValue = domainData[0].min;
+  let maxValue = domainData[0].max;
+  return [minValue, maxValue];
+}
+
+function summarizeUnits(series) {
+  let undefinedCount = 0;
+  let nullCount = 0;
+  let stringCount = 0;
+  let numberCount = 0;
+  let dateCount = 0;
+  let objectCount = 0;
+
+  let maxDecimals = 0;
+
+  if (series === undefined || series === null || series.length === 0) {
+    return {
+      maxDecimals: 0,
+      unitType: "unknown"
+    }
+  } else {
+    for (let i = 0; i < series.length; i++) {
+      let nextElement = series[i];
+      switch (typeof(nextElement)) {
+        case "undefined":
+          undefinedCount++;
+          break;
+        case "null": //typically this will be object
+          nullCount++;
+          break;
+        case "number":
+          numberCount++;
+          let thisDecimalPlaces = nextElement.toString().split(".")[1]?.length;
+          if (thisDecimalPlaces && thisDecimalPlaces > maxDecimals) {
+            maxDecimals = thisDecimalPlaces;
+          }
+          break;
+        case "string":
+          stringCount++;
+          break;
+        case "object":
+          if (nextElement instanceof Date) {
+            dateCount++;
+          } else if (nextElement === null) {
+            nullCount++;
+          } else {
+            objectCount++;
+          }
+          break;
+        case "date":
+          dateCount++;
+          break;
+        case "function":
+        default:
+          break;
+      }
+    }
+    let unitType = undefined;
+    let emptyValueCount = undefinedCount + nullCount;
+    if ((numberCount + emptyValueCount) === series.length) {
+      unitType = "number";
+    } else if ((stringCount + emptyValueCount) === series.length) {
+      unitType = "string";
+    } else if ((dateCount + emptyValueCount) === series.length) {
+      unitType = "date";
+    } else if ((objectCount + emptyValueCount) === series.length) {
+      unitType = "object";
+    } else {
+      unitType = "unknown";
+    }
+    return {
+      maxDecimals: maxDecimals,
+      unitType: unitType
+    }
+  }
 }

modules/getColumnSummary.js

 import getColumnEvidenceType from "./getColumnEvidenceType.js";
-import getColumnExtents from "./getColumnExtents.js";
-import getColumnUnits from "./getColumnUnits.js";
-import { getColumnFormat } from "./formats";
+import { getColumnExtentsLegacy, getColumnUnitSummary } from "./getColumnExtents.js";
+import { lookupColumnFormat } from "./formatting";
 import formatTitle from './formatTitle.js'
-import getFormatTag from "./getFormatTag.js";
 
@@ -11,22 +9,19 @@ export default function getColumnSummary(data, returnType="object") {
     var colName;
-    var colFmtTag;        
     var colType;
     var evidenceColumnType;
-    var colExtents;
-    var colUnits;
     var colFormat;
-    var legacyType; 
-
+    let columnUnitSummary;
     let columnSummary = [];
 
+    var colExtentsLegacy;
+
     if(returnType === 'object'){
       for (const [key] of Object.entries(data[0])) {
         colName = key;
-        colFmtTag = getFormatTag(key);
         evidenceColumnType = getColumnEvidenceType(data, colName);
-        colType = evidenceColumnType.evidenceType
-        colExtents = getColumnExtents(data, colName);        
-        colUnits = getColumnUnits(colExtents);
-        colFormat = getColumnFormat(colFmtTag);
-  
+        colType = evidenceColumnType.evidenceType;
+        columnUnitSummary = getColumnUnitSummary(data, colName);
+        colFormat = lookupColumnFormat(key, evidenceColumnType, columnUnitSummary);
+        colExtentsLegacy = getColumnExtentsLegacy(data, colName);
+
         let thisCol = {
@@ -37,9 +32,8 @@ [colName]: {
                 evidenceColumnType: evidenceColumnType,
-                extents: colExtents,
                 format: colFormat,
-                units: colUnits
+                columnUnitSummary: columnUnitSummary,
+                extentsLegacy: colExtentsLegacy
               }
         }
-
-          columnSummary = {...columnSummary, ...thisCol}
+        columnSummary = {...columnSummary, ...thisCol}
       }
@@ -49,22 +43,21 @@ } else {
         colName = key;
-        colFmtTag = getFormatTag(key);
         evidenceColumnType = getColumnEvidenceType(data, colName);
-        colType = evidenceColumnType.evidenceType
-        colExtents = getColumnExtents(data, colName);        
-        colUnits = getColumnUnits(colExtents);
-        colFormat = getColumnFormat(colFmtTag);
-  
-          columnSummary.push({
-              id: colName,
-              title: formatTitle(colName, colFormat),
-              type: colType,
-              evidenceColumnType: evidenceColumnType,
-              extents: colExtents,
-              format: colFormat,
-              units: colUnits
-          })
+        colType = evidenceColumnType.evidenceType;
+        columnUnitSummary = getColumnUnitSummary(data, colName);
+        colFormat = lookupColumnFormat(key, evidenceColumnType, columnUnitSummary);
+        colExtentsLegacy = getColumnExtentsLegacy(data, colName);
+
+        columnSummary.push({
+            id: colName,
+            title: formatTitle(colName, colFormat),
+            type: colType,
+            evidenceColumnType: evidenceColumnType,
+            format: colFormat,
+            columnUnitSummary: columnUnitSummary,
+            extentsLegacy: colExtentsLegacy,
+        })
       }
     }
 
-      return columnSummary
+    return columnSummary
 }

package.json

 {
   "name": "@evidence-dev/components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
@@ -12,8 +12,13 @@ "dependencies": {
     "git-remote-origin-url": "4.0.0",
-    "svelte-icons": "2.1.0",
-    "ssf": "^0.11.2"
+    "ssf": "^0.11.2",
+    "svelte-icons": "2.1.0"
   },
   "devDependencies": {
-    "fs-extra": "^10.0.1"
+    "cross-env": "^7.0.3",
+    "fs-extra": "^10.0.1",
+    "jest": "^28.1.2"
   },
+  "jest": {
+    "verbose": true
+  },
   "exports": {
@@ -23,2 +28,4 @@ "./package.json": "./package.json",
     "./TableOfContents.svelte": "./TableOfContents.svelte",
+    "./modules/autoFormatting": "./modules/autoFormatting.js",
+    "./modules/builtInFormats": "./modules/builtInFormats.js",
     "./modules/checkInputs": "./modules/checkInputs.js",
@@ -29,14 +36,10 @@ "./modules/colours": "./modules/colours.js",
     "./modules/echartsCopy": "./modules/echartsCopy.js",
-    "./modules/formatAxisLabel": "./modules/formatAxisLabel.js",
     "./modules/formatTitle": "./modules/formatTitle.js",
-    "./modules/formatValue": "./modules/formatValue.js",
-    "./modules/formats": "./modules/formats.js",
+    "./modules/formatting": "./modules/formatting.js",
     "./modules/getColumnEvidenceType": "./modules/getColumnEvidenceType.js",
     "./modules/getColumnExtents": "./modules/getColumnExtents.js",
     "./modules/getColumnSummary": "./modules/getColumnSummary.js",
-    "./modules/getColumnUnits": "./modules/getColumnUnits.js",
     "./modules/getCompletedData": "./modules/getCompletedData.js",
     "./modules/getDistinctCount": "./modules/getDistinctCount.js",
     "./modules/getDistinctValues": "./modules/getDistinctValues.js",
-    "./modules/getFormatTag": "./modules/getFormatTag.js",
     "./modules/getParsedDate": "./modules/getParsedDate.js",
@@ -46,5 +49,8 @@ "./modules/getSeriesConfig": "./modules/getSeriesConfig.js",
     "./modules/getStackedData": "./modules/getStackedData.js",
+    "./modules/globalContexts": "./modules/globalContexts.js",
     "./modules/inferColumnTypes": "./modules/inferColumnTypes.js",
     "./modules/replaceNulls": "./modules/replaceNulls.js",
-    "./modules/stores": "./modules/stores.js",
+    "./tests/autoFormatting.test": "./tests/autoFormatting.test.js",
+    "./tests/columnUnitSummary.test": "./tests/columnUnitSummary.test.js",
+    "./tests/formatting.test": "./tests/formatting.test.js",
     "./ui/BaseLayout.svelte": "./ui/BaseLayout.svelte",
@@ -71,6 +77,9 @@ "./ui/BigLink.svelte": "./ui/BigLink.svelte",
     "./ui/EmailSignup.svelte": "./ui/EmailSignup.svelte",
-    "./ui/Formatting/BuiltInFormating.svelte": "./ui/Formatting/BuiltInFormating.svelte",
-    "./ui/Formatting/CustomFormatting.svelte": "./ui/Formatting/CustomFormatting.svelte",
-    "./ui/Formatting/FormatGrid.svelte": "./ui/Formatting/FormatGrid.svelte",
+    "./ui/Formatting/BuiltInFormatGrid.svelte": "./ui/Formatting/BuiltInFormatGrid.svelte",
+    "./ui/Formatting/CollapsibleTableSection.svelte": "./ui/Formatting/CollapsibleTableSection.svelte",
+    "./ui/Formatting/CurrencyFormatGrid.svelte": "./ui/Formatting/CurrencyFormatGrid.svelte",
+    "./ui/Formatting/CustomFormatGrid.svelte": "./ui/Formatting/CustomFormatGrid.svelte",
+    "./ui/Formatting/CustomFormatsSection.svelte": "./ui/Formatting/CustomFormatsSection.svelte",
     "./ui/Formatting/FormattingSettingsPanel.svelte": "./ui/Formatting/FormattingSettingsPanel.svelte",
+    "./ui/Formatting/format-grid.css": "./ui/Formatting/format-grid.css",
     "./ui/Hamburger.svelte": "./ui/Hamburger.svelte",
@@ -111,4 +120,5 @@ "./ui/Header.svelte": "./ui/Header.svelte",
     "./viz/TypeExplorer.svelte": "./viz/TypeExplorer.svelte",
-    "./viz/Value.svelte": "./viz/Value.svelte"
+    "./viz/Value.svelte": "./viz/Value.svelte",
+    "./viz/context": "./viz/context.js"
   }
 }

ui/Formatting/FormattingSettingsPanel.svelte.d.ts

@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props}  FormattingSettingsPanelProps */
 export default class FormattingSettingsPanel extends SvelteComponentTyped<{
-    customSettings: any;
+    customFormattingSettings: any;
 }, {
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>;
     props: {
-        customSettings: any;
+        customFormattingSettings: any;
     };
@@ -20,0 +20,0 @@ events: {

viz/Chart.svelte.d.ts

@@ -77,3 +77,2 @@ /** @typedef {typeof __propDef.props}  ChartProps */
 };
-import { props } from "../modules/stores.js";
 export {};

viz/ECharts.svelte.d.ts

@@ -5,5 +5,5 @@ /** @typedef {typeof __propDef.props}  EChartsProps */
 export default class ECharts extends SvelteComponentTyped<{
+    config?: any;
     height?: string;
     width?: string;
-    config?: any;
 }, {
@@ -19,5 +19,5 @@ [evt: string]: CustomEvent<any>;
     props: {
+        config?: any;
         height?: string;
         width?: string;
-        config?: any;
     };
@@ -24,0 +24,0 @@ events: {

viz/EchartsCopyTarget.svelte.d.ts

@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props}  EchartsCopyTargetProps */
 export default class EchartsCopyTarget extends SvelteComponentTyped<{
-    downloadConfig?: any;
+    config?: any;
     height?: string;
@@ -20,3 +20,3 @@ width?: string;
     props: {
-        downloadConfig?: any;
+        config?: any;
         height?: string;
@@ -23,0 +23,0 @@ width?: string;

No alert changes

Improved metrics

Total package byte prevSize

390942

increased by13.97%

Number of package files

184

increased by5.14%

Lines of code

5829

increased by28.17%

Worsened metrics

Dev dependency count

3

increased by200%

No dependency changes