@evidence-dev/components - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

CHANGELOG.md

 # @evidence-dev/components
 
+## 1.2.0
+
+### Minor Changes
+
+- 6a7fb35: Update to how the built-in formatting works and custom formats behind feature flag
+- 06cc44a: Remove support for value and fmt props in <Value /> tag
+- 9f894e7: Adds value and column title formatting to chart tooltips, with revised tooltips for scatter, bubble, and histogram charts
+
+### Patch Changes
+
+- 23d0234: Adds legacy FLOAT type to BigQuery connector types
+- 7a87d0b: Add support for native database types to all components
+- 04ad3b9: Indicate the data type that evidence has identified in the queryviewer data table
+- f6d00c3: Bug fix for settings page when gitignore file is missing
+- e2c7319: Adds formatting to query viewer data table
+- 23f90b7: Bug fix for tooltips in composable charts with multiple y columns
+- 6fd2f57: Avoids creating gitignore file when gitignore not selected
+
 ## 1.1.4
@@ -4,0 +22,0 @@

modules/formatAxisLabel.js

@@ -0,1 +1,3 @@
+import { applyFormatting, getFormatValue } from './formats';
+
 export default function formatAxisLabel(value, columnFormat, columnUnits) {
@@ -21,4 +23,5 @@
     }
+    let fmt = getFormatValue(columnFormat);
 
-    switch(columnFormat){
+    switch(fmt){
         case "pct": 
@@ -75,8 +78,21 @@ value = value.toLocaleString(undefined, { style: 'percent' })
             break;
-        default: 
-            value = value.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 2}) + suffix
+        default:
+            let fallbackValue = value.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 2}) + suffix;
+            if (fmt) {
+                try {
+                    let formattedValue = applyFormatting(value, fmt);
+                    if (formattedValue) {
+                        value = formattedValue + suffix;
+                    } else {
+                        value = fallbackValue;
+                    }
+                } catch (error) {
+                    value = fallbackValue;
+                }
+            } else {
+                value = fallbackValue;
+            }
+
     }
-
-  return value;
-	
+    return value;
 }

modules/formatTitle.js

@@ -0,13 +1,16 @@
+import { getFormatName } from './formats';
+
 export default function formatTitle(column, columnFormat) {
 
     // Get format tag from end of column name (if supplied):
-    let fmt = columnFormat;
+    let formatName = getFormatName(columnFormat);
 
     // Remove the format tag from the column name (only if preceded by
     // an underscore):
-    let colname = column.replace("_"+fmt,"");
+    let colname = column.replace("_"+formatName,"");
     let suffix = "";
     
     // Add special formatting depending on format of column name:
-    switch(fmt){
+    // TODO issue-333 move the replacement text to built-in formats
+    switch(formatName){
         case "pct": 
@@ -14,0 +17,0 @@ // take name exluding fmt tag (colnam)

modules/formatValue.js

@@ -0,87 +1,54 @@
+import { applyFormatting, getFormatValue } from "./formats";
 
-export default function(value, columnFormat, columnUnits) {
+export default function (value, columnFormat, columnUnits) {
 
-  let suffix;
-  switch(columnUnits){
-        case "B":
-            value = value / 1000000000; // 1,000,000,000
-            suffix = columnUnits;
-            break;
-        case "M":
-            value = value / 1000000; // 1,000,000
-            suffix = columnUnits;
-            break;
-        case "k":
-            value = value / 1000; // 1,000
-            suffix = columnUnits;
-            break;
-        default:
-            value = value;
-            suffix = '';
-  }
+  let fmt = getFormatValue(columnFormat);
 
-    // Get format tag from end of column name (if supplied):
-    let fmt = columnFormat;
+  if (value === undefined) {
+    return "-";
+  } else {
+    let suffix;
+    switch (columnUnits) {
+      case "B":
+        value = value / 1000000000; // 1,000,000,000
+        suffix = columnUnits;
+        break;
+      case "M":
+        value = value / 1000000; // 1,000,000
+        suffix = columnUnits;
+        break;
+      case "k":
+        value = value / 1000; // 1,000
+        suffix = columnUnits;
+        break;
+      default:
+        value = value;
+        suffix = "";
+    }
 
-    try{
-    switch(fmt){
-        case "pct": 
-            value = value.toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 2 })
-            break;
-        case "usd": 
-            value = value.toLocaleString('en-US',{style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2}) + suffix
-            break;
-        case "cad": 
-            value = value.toLocaleString('en-US',{style: 'currency', currency: 'CAD', minimumFractionDigits: 2, maximumFractionDigits: 2}) + suffix
-            break;
-        case "eur": 
-            value = value.toLocaleString('en-US',{style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2}) + suffix
-            break;
-        case "gbp":
-            value = value.toLocaleString('en-US',{style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2}) + suffix
-            break;
-        case "chf":
-            value = value.toLocaleString('en-US',{style: 'currency', currency: 'CHF', minimumFractionDigits: 2, maximumFractionDigits: 2}) + suffix
-            break;
-        case "date": 
-            value = value.toLocaleDateString('en-US',{ year: 'numeric', month: 'long', day: 'numeric' })
-            break;
-        case "week": 
-            value = value.toLocaleDateString('en-US',{ year: 'numeric', month: 'long', day: 'numeric' })
-            break;
-        case "month": 
-            value = value.toLocaleString('en-US', {month: 'short'});
-            break;
-        case "qtr": 
-            value = value.toLocaleDateString('en-US',{ year: 'numeric', month: 'long', day: 'numeric' })
-            break;
-        case "year": 
-            value = value.getFullYear();
-            break;
-        // case "time":
-        //     value = value.toLocaleTimeString('en-US')
-        //     break;
-        case "year_num":
-            value = value;
-            break;
-        case "id":
-            value = value;
-            break;
-        case "str":
-            value = value.toLocaleString();
-            break;
-        case "num":
-            value = value.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 2}) + suffix
-            break;
-        case "num2":
-            value = value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + suffix
-            break;
-        default: 
-            value = value.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 2}) + suffix
+
+    if (fmt) {
+      try {
+        let formattedValue = applyFormatting(value, fmt); //TODO issue-333 we need to consolidate columnUnits and columnFormat
+        if (formattedValue) {
+          return formattedValue + suffix
         }
-        } catch(error) {
-            value = value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + suffix
-        }
-    return value;
+      } catch (error) {
+        //fallback to default
+      }
+    }
+
+    //fallback if no formatting could be applied
+    if (typeof value === "number") {
+      return (
+        value.toLocaleString(undefined, {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 2,
+        }) + suffix
+      );
+    } else {
+      return value;
+    }
+  }
+
 }
-  

modules/getColumnEvidenceType.js

@@ -0,1 +1,3 @@
+import inferColumnTypes from "./inferColumnTypes";
+
 export default function getColumnEvidenceType(data, column) {
@@ -12,2 +14,6 @@ let item;
       return columnTypes.find(item => item.name === column);
+    } else {
+      // infer types as a fall-back (when someone is passing arbitrary data objects)
+      let columnTypes = inferColumnTypes(data);
+      return columnTypes.find(item => item.name === column);
     }
@@ -14,0 +20,0 @@ }

modules/getColumnSummary.js

@@ -1,6 +0,5 @@
-import getColumnType from "./getColumnType.js";
 import getColumnEvidenceType from "./getColumnEvidenceType.js";
 import getColumnExtents from "./getColumnExtents.js";
 import getColumnUnits from "./getColumnUnits.js";
-import getColumnFormat from "./getColumnFormat.js";
+import { getColumnFormat } from "./formats";
 import formatTitle from './formatTitle.js'
@@ -18,2 +17,3 @@ import getFormatTag from "./getFormatTag.js";
     var colFormat;
+    var legacyType; 
 
@@ -26,7 +26,7 @@ let columnSummary = [];
         colFmtTag = getFormatTag(key);
-        colType = getColumnType(data, colName, colFmtTag);
         evidenceColumnType = getColumnEvidenceType(data, colName);
+        colType = evidenceColumnType.evidenceType
         colExtents = getColumnExtents(data, colName);        
         colUnits = getColumnUnits(colExtents);
-        colFormat = getColumnFormat(colFmtTag, colType);
+        colFormat = getColumnFormat(colFmtTag);
   
@@ -50,7 +50,7 @@ let thisCol = {
         colFmtTag = getFormatTag(key);
-        colType = getColumnType(data, colName, colFmtTag);
         evidenceColumnType = getColumnEvidenceType(data, colName);
+        colType = evidenceColumnType.evidenceType
         colExtents = getColumnExtents(data, colName);        
         colUnits = getColumnUnits(colExtents);
-        colFormat = getColumnFormat(colFmtTag, colType);
+        colFormat = getColumnFormat(colFmtTag);
   
@@ -57,0 +57,0 @@ columnSummary.push({

modules/getFormatTag.js

@@ -0,1 +1,3 @@
+import { builtInFormats, getCustomFormats } from './formats'
+
 export default function getFormatTag(columnName) {
@@ -21,31 +23,8 @@
 
-    // Filter for supported format tags:
+    let customFormats = getCustomFormats() || [];
+    let supportedTags = [...builtInFormats, ...customFormats].map(format => format.formatName);
 
-    let supportedTags = [
-    // Date/Time:
-    "date",
-    "week",
-    "month",
-    "qtr",
-    "year",
-
-    // Currency:
-    "usd",
-    "cad",
-    "eur",
-    "gbp",
-    "chf",
-
-    // Numbers:
-    "pct",
-    "num",
-    "num2",
-
-    // Strings:
-    "str",
-    "id" // treating IDs as strings even if they are numbers
-    ]
-
     // if the fmt tag OR the full column name is in the supported tags, use that tag:
     fmt = supportedTags.includes(fmt) ? fmt : supportedTags.includes(columnName) ? columnName : null;
+
     return fmt;
@@ -52,0 +31,0 @@ }

package.json

 {
   "name": "@evidence-dev/components",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "type": "module",
@@ -29,7 +29,6 @@ "dependencies": {
     "./modules/formatValue": "./modules/formatValue.js",
+    "./modules/formats": "./modules/formats.js",
     "./modules/getColumnEvidenceType": "./modules/getColumnEvidenceType.js",
     "./modules/getColumnExtents": "./modules/getColumnExtents.js",
-    "./modules/getColumnFormat": "./modules/getColumnFormat.js",
     "./modules/getColumnSummary": "./modules/getColumnSummary.js",
-    "./modules/getColumnType": "./modules/getColumnType.js",
     "./modules/getColumnUnits": "./modules/getColumnUnits.js",
@@ -44,2 +43,3 @@ "./modules/getCompletedData": "./modules/getCompletedData.js",
     "./modules/getStackedData": "./modules/getStackedData.js",
+    "./modules/inferColumnTypes": "./modules/inferColumnTypes.js",
     "./modules/replaceNulls": "./modules/replaceNulls.js",
@@ -68,2 +68,6 @@ "./modules/stores": "./modules/stores.js",
     "./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/FormattingSettingsPanel.svelte": "./ui/Formatting/FormattingSettingsPanel.svelte",
     "./ui/Hamburger.svelte": "./ui/Hamburger.svelte",
@@ -103,4 +107,5 @@ "./ui/Header.svelte": "./ui/Header.svelte",
     "./viz/ScatterPlot.svelte": "./viz/ScatterPlot.svelte",
+    "./viz/TypeExplorer.svelte": "./viz/TypeExplorer.svelte",
     "./viz/Value.svelte": "./viz/Value.svelte"
   }
 }

viz/AreaChart.svelte.d.ts

@@ -18,8 +18,8 @@ /** @typedef {typeof __propDef.props}  AreaChartProps */
     yMin?: any;
+    xAxisTitle?: any;
+    yAxisTitle?: any;
     subtitle?: any;
-    xAxisTitle?: any;
     xBaseline?: any;
     xTickMarks?: any;
     xGridlines?: any;
-    yAxisTitle?: any;
     yBaseline?: any;
@@ -51,8 +51,8 @@ yTickMarks?: any;
         yMin?: any;
+        xAxisTitle?: any;
+        yAxisTitle?: any;
         subtitle?: any;
-        xAxisTitle?: any;
         xBaseline?: any;
         xTickMarks?: any;
         xGridlines?: any;
-        yAxisTitle?: any;
         yBaseline?: any;
@@ -59,0 +59,0 @@ yTickMarks?: any;

viz/BarChart.svelte.d.ts

@@ -17,8 +17,8 @@ /** @typedef {typeof __propDef.props}  BarChartProps */
     yMin?: any;
+    xAxisTitle?: any;
+    yAxisTitle?: any;
     subtitle?: any;
-    xAxisTitle?: any;
     xBaseline?: any;
     xTickMarks?: any;
     xGridlines?: any;
-    yAxisTitle?: any;
     yBaseline?: any;
@@ -52,8 +52,8 @@ yTickMarks?: any;
         yMin?: any;
+        xAxisTitle?: any;
+        yAxisTitle?: any;
         subtitle?: any;
-        xAxisTitle?: any;
         xBaseline?: any;
         xTickMarks?: any;
         xGridlines?: any;
-        yAxisTitle?: any;
         yBaseline?: any;
@@ -60,0 +60,0 @@ yTickMarks?: any;

viz/Bubble.svelte.d.ts

@@ -16,2 +16,3 @@ /** @typedef {typeof __propDef.props}  BubbleProps */
     scaleTo?: number;
+    useTooltip?: boolean;
 }, {
@@ -38,2 +39,3 @@ [evt: string]: CustomEvent<any>;
         scaleTo?: number;
+        useTooltip?: boolean;
     };
@@ -40,0 +42,0 @@ events: {

viz/BubbleChart.svelte.d.ts

@@ -16,8 +16,8 @@ /** @typedef {typeof __propDef.props}  BubbleChartProps */
     yMin?: any;
+    xAxisTitle?: any;
+    yAxisTitle?: any;
     subtitle?: any;
-    xAxisTitle?: any;
     xBaseline?: any;
     xTickMarks?: any;
     xGridlines?: any;
-    yAxisTitle?: any;
     yBaseline?: any;
@@ -52,8 +52,8 @@ yTickMarks?: any;
         yMin?: any;
+        xAxisTitle?: any;
+        yAxisTitle?: any;
         subtitle?: any;
-        xAxisTitle?: any;
         xBaseline?: any;
         xTickMarks?: any;
         xGridlines?: any;
-        yAxisTitle?: any;
         yBaseline?: any;
@@ -60,0 +60,0 @@ yTickMarks?: any;

viz/Chart.svelte.d.ts

@@ -18,6 +18,7 @@ /** @typedef {typeof __propDef.props}  ChartProps */
     yMin?: any;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
     subtitle?: any;
     bubble?: boolean;
     hist?: boolean;
-    xAxisTitle?: string;
     xBaseline?: boolean;
@@ -27,3 +28,2 @@ xTickMarks?: boolean;
     xAxisLabels?: boolean;
-    yAxisTitle?: string;
     yBaseline?: boolean;
@@ -58,6 +58,7 @@ yTickMarks?: boolean;
         yMin?: any;
+        xAxisTitle?: string;
+        yAxisTitle?: string;
         subtitle?: any;
         bubble?: boolean;
         hist?: boolean;
-        xAxisTitle?: string;
         xBaseline?: boolean;
@@ -67,3 +68,2 @@ xTickMarks?: boolean;
         xAxisLabels?: boolean;
-        yAxisTitle?: string;
         yBaseline?: boolean;
@@ -70,0 +70,0 @@ yTickMarks?: boolean;

viz/Histogram.svelte.d.ts

@@ -12,8 +12,8 @@ /** @typedef {typeof __propDef.props}  HistogramProps */
     yMin?: number;
+    xAxisTitle?: any;
+    yAxisTitle?: any;
     subtitle?: any;
-    xAxisTitle?: any;
     xBaseline?: any;
     xTickMarks?: any;
     xGridlines?: any;
-    yAxisTitle?: any;
     yBaseline?: any;
@@ -39,8 +39,8 @@ yTickMarks?: any;
         yMin?: number;
+        xAxisTitle?: any;
+        yAxisTitle?: any;
         subtitle?: any;
-        xAxisTitle?: any;
         xBaseline?: any;
         xTickMarks?: any;
         xGridlines?: any;
-        yAxisTitle?: any;
         yBaseline?: any;
@@ -47,0 +47,0 @@ yTickMarks?: any;

viz/LineChart.svelte.d.ts

@@ -15,8 +15,8 @@ /** @typedef {typeof __propDef.props}  LineChartProps */
     yMin?: any;
+    xAxisTitle?: any;
+    yAxisTitle?: any;
     subtitle?: any;
-    xAxisTitle?: any;
     xBaseline?: any;
     xTickMarks?: any;
     xGridlines?: any;
-    yAxisTitle?: any;
     yBaseline?: any;
@@ -52,8 +52,8 @@ yTickMarks?: any;
         yMin?: any;
+        xAxisTitle?: any;
+        yAxisTitle?: any;
         subtitle?: any;
-        xAxisTitle?: any;
         xBaseline?: any;
         xTickMarks?: any;
         xGridlines?: any;
-        yAxisTitle?: any;
         yBaseline?: any;
@@ -60,0 +60,0 @@ yTickMarks?: any;

viz/Scatter.svelte.d.ts

@@ -14,2 +14,3 @@ /** @typedef {typeof __propDef.props}  ScatterProps */
     opacity?: number;
+    useTooltip?: boolean;
     pointSize?: number;
@@ -35,2 +36,3 @@ }, {
         opacity?: number;
+        useTooltip?: boolean;
         pointSize?: number;
@@ -37,0 +39,0 @@ };

viz/ScatterPlot.svelte.d.ts

@@ -15,8 +15,8 @@ /** @typedef {typeof __propDef.props}  ScatterPlotProps */
     yMin?: any;
+    xAxisTitle?: any;
+    yAxisTitle?: any;
     subtitle?: any;
-    xAxisTitle?: any;
     xBaseline?: any;
     xTickMarks?: any;
     xGridlines?: any;
-    yAxisTitle?: any;
     yBaseline?: any;
@@ -50,8 +50,8 @@ yTickMarks?: any;
         yMin?: any;
+        xAxisTitle?: any;
+        yAxisTitle?: any;
         subtitle?: any;
-        xAxisTitle?: any;
         xBaseline?: any;
         xTickMarks?: any;
         xGridlines?: any;
-        yAxisTitle?: any;
         yBaseline?: any;
@@ -58,0 +58,0 @@ yTickMarks?: any;

viz/Value.svelte.d.ts

@@ -6,6 +6,4 @@ /** @typedef {typeof __propDef.props}  ValueProps */
     data?: any;
-    value?: any;
     row?: number;
     column?: string;
-    fmt?: any;
     placeholder?: any;
@@ -23,6 +21,4 @@ }, {
         data?: any;
-        value?: any;
         row?: number;
         column?: string;
-        fmt?: any;
         placeholder?: any;
@@ -29,0 +25,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

342916

increased by9.08%

Number of package files

175

increased by6.06%

Lines of code

4548

increased by5.13%

No dependency changes