diff --git a/package.json b/package.json index 6bce580..ce5ad12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eqworks/lumen-table", - "version": "2.0.0-alpha.33", + "version": "2.0.0-alpha.38", "main": "dist/index.js", "source": "src/index.js", "files": [ diff --git a/src/in-cell-bar.js b/src/in-cell-bar.js index d2795c2..bcdb99a 100644 --- a/src/in-cell-bar.js +++ b/src/in-cell-bar.js @@ -23,7 +23,7 @@ const useStyles = ({ bgColor, barLength, barHeight }) => makeStyles({ const maxValsPerColumn = {} const computeMaxVals = (data, columnID, maxValsPerColumn) => { if (!maxValsPerColumn[columnID]) { - const max = Math.max(...data.map((column) => parseInt(column[columnID]))) + const max = Math.max(...data.map((column) => parseFloat(column[columnID]))) maxValsPerColumn[columnID] = max } return maxValsPerColumn @@ -99,17 +99,30 @@ const InCellBar = ({ data, column, value, barColumns, formatData, barColumnsColo return

{_value}

} const _maxVals = useMemo(() => computeMaxVals(data, column.id, maxValsPerColumn), [data, column, maxValsPerColumn]) + const maxValue = Math.max(...data.map((row) => parseFloat(row[column.id]))) + const maxDigits = useMemo(() => { + return Math.max( + ...data.map((row) => + String(getFormattedValue(row[column.id], formatData, column.Header)).replace(/[^0-9]/g, '').length, + ), + ) + }, [data, column, formatData]) + + const baseScalingFactor = Math.max(90 - (maxDigits * 4), 50) + const normalizedValue = parseFloat(value) / maxValue + const scaledValue = Math.pow(normalizedValue, 0.85) + const barLength = (scaledValue * baseScalingFactor).toFixed(2) const styles = useStyles({ bgColor: barColumnsColor.length === 2 ? - adjustFixedRange(getColorAmount(_maxVals[column.id], Math.ceil(Number(value))), barColumnsColor) : - adjustBarColor(getColorAmount(_maxVals[column.id], Math.ceil(Number(value))), barColumnsColor), - barLength: ((value/_maxVals[column.id]) * 100).toFixed(2), + adjustFixedRange(getColorAmount(_maxVals[column.id], parseFloat(value)), barColumnsColor): + adjustBarColor(getColorAmount(_maxVals[column.id], parseFloat(value)), barColumnsColor), + barLength: barLength, barHeight: barColumnsColor.length === 2 ? 2 : 0.875, }) return ( -
+

{_value}

diff --git a/stories/data/cross-category-data.js b/stories/data/cross-category-data.js index b1301f8..d90362e 100644 --- a/stories/data/cross-category-data.js +++ b/stories/data/cross-category-data.js @@ -4,9 +4,9 @@ const data = [ 'total_spend': 219123075.04, 'percentage_spent': 10.54, 'avg_transaction_size': 51.55, - 'avg_spend_per_customer': 1459.99, + 'avg_spend_per_customer': 1000.99, 'penetration_rate': 84.01, - 'avg_transaction_size_index': 1, + 'avg_transaction_size_index': 1.1, 'avg_spend_per_customer_index': 1, }, { @@ -16,8 +16,8 @@ const data = [ 'avg_transaction_size': 68.49, 'avg_spend_per_customer': 1024.56, 'penetration_rate': 74.07, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.2, + 'avg_spend_per_customer_index': 0.9, }, { 'category_name': 'Wholesale Clubs', @@ -26,8 +26,8 @@ const data = [ 'avg_transaction_size': 128.72, 'avg_spend_per_customer': 1584.9, 'penetration_rate': 47.61, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.3, + 'avg_spend_per_customer_index': 0.8, }, { 'category_name': 'Marketplaces', @@ -36,8 +36,8 @@ const data = [ 'avg_transaction_size': 43.27, 'avg_spend_per_customer': 1026.21, 'penetration_rate': 65.6, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.22, + 'avg_spend_per_customer_index': 1.4, }, { 'category_name': 'Automated Fuel Dispensers', @@ -46,8 +46,8 @@ const data = [ 'avg_transaction_size': 47.42, 'avg_spend_per_customer': 847.92, 'penetration_rate': 70.07, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 12, + 'avg_spend_per_customer_index': 0.76, }, { 'category_name': 'Fast Food Restaurants', @@ -56,8 +56,8 @@ const data = [ 'avg_transaction_size': 14.59, 'avg_spend_per_customer': 593.81, 'penetration_rate': 84.42, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.14, + 'avg_spend_per_customer_index': 1.43, }, { 'category_name': 'Eating Places and Restaurants', @@ -66,8 +66,8 @@ const data = [ 'avg_transaction_size': 41.13, 'avg_spend_per_customer': 665.95, 'penetration_rate': 72.19, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 0.81, + 'avg_spend_per_customer_index': 9.1, }, { 'category_name': 'Telecommunication Services, including Local and Long Distance Calls, Credit Card Calls, Calls Through Use of Magnetic Stripe Reading Telephones, and Fax Services', @@ -76,18 +76,18 @@ const data = [ 'avg_transaction_size': 125.25, 'avg_spend_per_customer': 923.82, 'penetration_rate': 48.15, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.22, + 'avg_spend_per_customer_index': 1.33, }, { 'category_name': 'Travel Agencies and Tour Operators', 'total_spend': 63387198.81, 'percentage_spent': 3.05, 'avg_transaction_size': 525.31, - 'avg_spend_per_customer': 2012.68, + 'avg_spend_per_customer': 1000.68, 'penetration_rate': 17.63, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.44, + 'avg_spend_per_customer_index': 1.55, }, { 'category_name': 'Drug Stores and Pharmacies', @@ -96,18 +96,18 @@ const data = [ 'avg_transaction_size': 37.36, 'avg_spend_per_customer': 411.76, 'penetration_rate': 71.62, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 0.71, + 'avg_spend_per_customer_index': 0.99, }, { 'category_name': 'Airlines and Air Carriers', 'total_spend': 47383176.16, 'percentage_spent': 2.28, 'avg_transaction_size': 421.27, - 'avg_spend_per_customer': 1278.07, + 'avg_spend_per_customer': 178.07, 'penetration_rate': 20.75, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 6, + 'avg_spend_per_customer_index': 5.0, }, { 'category_name': 'Hardware Stores', @@ -116,18 +116,18 @@ const data = [ 'avg_transaction_size': 113.66, 'avg_spend_per_customer': 684.13, 'penetration_rate': 38.08, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 18, + 'avg_spend_per_customer_index': 11, }, { 'category_name': 'Betting, including Lottery Tickets, Casino Gaming Chips, Off- Track Betting, Wagers at Race Tracks and games of chance to win prizes of monetary value', 'total_spend': 45501824.97, 'percentage_spent': 2.19, 'avg_transaction_size': 67.39, - 'avg_spend_per_customer': 1774.71, + 'avg_spend_per_customer': 774.71, 'penetration_rate': 14.35, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 0.1, + 'avg_spend_per_customer_index': 0.1, }, { 'category_name': 'Digital Goods - Large Digital Goods Merchant', @@ -136,18 +136,18 @@ const data = [ 'avg_transaction_size': 33.29, 'avg_spend_per_customer': 441.08, 'penetration_rate': 54.77, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 0.11, + 'avg_spend_per_customer_index': 0.98, }, { 'category_name': 'Insurance Sales, Underwriting, and Premiums', 'total_spend': 42446521.07, 'percentage_spent': 2.04, 'avg_transaction_size': 237.83, - 'avg_spend_per_customer': 1172.2, + 'avg_spend_per_customer': 992.2, 'penetration_rate': 20.27, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.8, + 'avg_spend_per_customer_index': 1.9, }, { 'category_name': 'Package Stores - Beer, Wine, and Liquor', @@ -156,8 +156,8 @@ const data = [ 'avg_transaction_size': 56.17, 'avg_spend_per_customer': 489.1, 'penetration_rate': 44.93, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.1, + 'avg_spend_per_customer_index': 1.7, }, { 'category_name': 'Lodging - Hotels, Motels, Resorts, Central Reservation Services', @@ -166,8 +166,8 @@ const data = [ 'avg_transaction_size': 319.55, 'avg_spend_per_customer': 1026.29, 'penetration_rate': 20.77, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.6, + 'avg_spend_per_customer_index': 1.5, }, { 'category_name': 'Department Stores', @@ -176,8 +176,8 @@ const data = [ 'avg_transaction_size': 89.54, 'avg_spend_per_customer': 419.05, 'penetration_rate': 41.6, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.5, + 'avg_spend_per_customer_index': 1.4, }, { 'category_name': 'Miscellaneous Food Stores - Convenience Stores and Specialty Markets', @@ -186,8 +186,8 @@ const data = [ 'avg_transaction_size': 28.94, 'avg_spend_per_customer': 310.88, 'penetration_rate': 53.42, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.4, + 'avg_spend_per_customer_index': 1.3, }, { 'category_name': "Men's and Women's Clothing Stores", @@ -196,8 +196,8 @@ const data = [ 'avg_transaction_size': 104.38, 'avg_spend_per_customer': 414.5, 'penetration_rate': 38.38, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.3, + 'avg_spend_per_customer_index': 1.2, }, { 'category_name': 'Furniture, Home Furnishings, and Equipment Stores, Except Appliances', @@ -206,8 +206,8 @@ const data = [ 'avg_transaction_size': 191.97, 'avg_spend_per_customer': 602.36, 'penetration_rate': 25.21, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.46, + 'avg_spend_per_customer_index': 1.64, }, { 'category_name': 'Non-Financial Institutions - Foreign Currency, Non-Fiat Currency (for example: Cryptocurrency), Money Orders (Not Money Transfer), Account Funding (not Stored Value Load), Travelers Cheques, and Debt Repayment', @@ -216,8 +216,8 @@ const data = [ 'avg_transaction_size': 170.2, 'avg_spend_per_customer': 1099.94, 'penetration_rate': 13.23, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 11, + 'avg_spend_per_customer_index': 9, }, { 'category_name': 'Car and Truck Dealers (New and Used) Sales, Service, Repairs, Parts, and Leasing', @@ -226,8 +226,8 @@ const data = [ 'avg_transaction_size': 332.92, 'avg_spend_per_customer': 916.54, 'penetration_rate': 14, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 10, + 'avg_spend_per_customer_index': 8, }, { 'category_name': "Women's Ready-To-Wear Stores ..", @@ -236,18 +236,18 @@ const data = [ 'avg_transaction_size': 111.28, 'avg_spend_per_customer': 413.89, 'penetration_rate': 28.52, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 9, + 'avg_spend_per_customer_index': 7, }, { 'category_name': 'Money Transfer', 'total_spend': 19714678.84, 'percentage_spent': 0.95, 'avg_transaction_size': 303.79, - 'avg_spend_per_customer': 2911.2, + 'avg_spend_per_customer': 911.2, 'penetration_rate': 3.79, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 6.66, + 'avg_spend_per_customer_index': 5.88, }, { 'category_name': 'Discount Stores', @@ -256,8 +256,8 @@ const data = [ 'avg_transaction_size': 21.9, 'avg_spend_per_customer': 176.2, 'penetration_rate': 62.3, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 4.33, + 'avg_spend_per_customer_index': 3.22, }, { 'category_name': 'Taxicabs and Limousines', @@ -266,8 +266,8 @@ const data = [ 'avg_transaction_size': 21.89, 'avg_spend_per_customer': 349.15, 'penetration_rate': 30.29, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 3.22, + 'avg_spend_per_customer_index': 2.11, }, { 'category_name': 'Electronics Stores', @@ -276,8 +276,8 @@ const data = [ 'avg_transaction_size': 214.83, 'avg_spend_per_customer': 476.89, 'penetration_rate': 19.78, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 1.11, + 'avg_spend_per_customer_index': 0.31, }, { 'category_name': 'Sports and Riding Apparel Stores', @@ -286,8 +286,8 @@ const data = [ 'avg_transaction_size': 115.63, 'avg_spend_per_customer': 291.46, 'penetration_rate': 25.79, - 'avg_transaction_size_index': 1, - 'avg_spend_per_customer_index': 1, + 'avg_transaction_size_index': 0.92, + 'avg_spend_per_customer_index': 0.99, }, { 'category_name': 'Ticket Agencies and Theatrical Producers (Except Motion Pictures)', @@ -344,7 +344,7 @@ const data = [ 'total_spend': 11408974.15, 'percentage_spent': 0.55, 'avg_transaction_size': 403.1, - 'avg_spend_per_customer': 2180.2, + 'avg_spend_per_customer': 950.2, 'penetration_rate': 2.93, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -363,8 +363,8 @@ const data = [ 'category_name': 'Steamship and Cruise Lines', 'total_spend': 10168212.88, 'percentage_spent': 0.49, - 'avg_transaction_size': 1117.14, - 'avg_spend_per_customer': 2482.47, + 'avg_transaction_size': 1100.14, + 'avg_spend_per_customer': 1482.47, 'penetration_rate': 2.29, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -793,8 +793,8 @@ const data = [ 'category_name': 'Medical Services and Health Practitioners (Not Elsewhere Classified)', 'total_spend': 2721328.8, 'percentage_spent': 0.13, - 'avg_transaction_size': 103.73, - 'avg_spend_per_customer': 268.4, + 'avg_transaction_size': 800.73, + 'avg_spend_per_customer': 800.4, 'penetration_rate': 5.68, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -804,7 +804,7 @@ const data = [ 'total_spend': 2542690.57, 'percentage_spent': 0.12, 'avg_transaction_size': 881.04, - 'avg_spend_per_customer': 3929.97, + 'avg_spend_per_customer': 929.97, 'penetration_rate': 0.36, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1204,7 +1204,7 @@ const data = [ 'total_spend': 816834.63, 'percentage_spent': 0.04, 'avg_transaction_size': 478.52, - 'avg_spend_per_customer': 1734.26, + 'avg_spend_per_customer': 1034.26, 'penetration_rate': 0.26, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1484,7 +1484,7 @@ const data = [ 'total_spend': 555075.52, 'percentage_spent': 0.03, 'avg_transaction_size': 454.97, - 'avg_spend_per_customer': 8410.24, + 'avg_spend_per_customer': 890.24, 'penetration_rate': 0.04, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1703,8 +1703,8 @@ const data = [ 'category_name': 'Funeral Services and Crematories', 'total_spend': 184397.32, 'percentage_spent': 0.01, - 'avg_transaction_size': 2634.24, - 'avg_spend_per_customer': 4609.93, + 'avg_transaction_size': 634.24, + 'avg_spend_per_customer': 609.93, 'penetration_rate': 0.02, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1744,7 +1744,7 @@ const data = [ 'total_spend': 291020.15, 'percentage_spent': 0.01, 'avg_transaction_size': 183.95, - 'avg_spend_per_customer': 1484.8, + 'avg_spend_per_customer': 1084.8, 'penetration_rate': 0.11, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1804,7 +1804,7 @@ const data = [ 'total_spend': 208369.35, 'percentage_spent': 0.01, 'avg_transaction_size': 179.16, - 'avg_spend_per_customer': 1278.34, + 'avg_spend_per_customer': 788.34, 'penetration_rate': 0.09, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1844,7 +1844,7 @@ const data = [ 'total_spend': 160086.9, 'percentage_spent': 0.01, 'avg_transaction_size': 505, - 'avg_spend_per_customer': 20010.86, + 'avg_spend_per_customer': 2010.86, 'penetration_rate': 0, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1863,8 +1863,8 @@ const data = [ 'category_name': 'Boat Dealers', 'total_spend': 193097.23, 'percentage_spent': 0.01, - 'avg_transaction_size': 6896.32, - 'avg_spend_per_customer': 38619.45, + 'avg_transaction_size': 1000.32, + 'avg_spend_per_customer': 1000.45, 'penetration_rate': 0, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1964,7 +1964,7 @@ const data = [ 'total_spend': 137193.69, 'percentage_spent': 0.01, 'avg_transaction_size': 94.48, - 'avg_spend_per_customer': 3266.52, + 'avg_spend_per_customer': 1266.52, 'penetration_rate': 0.02, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -1973,8 +1973,8 @@ const data = [ 'category_name': 'Construction Materials (Not Elsewhere Classified)', 'total_spend': 245235.25, 'percentage_spent': 0.01, - 'avg_transaction_size': 2249.86, - 'avg_spend_per_customer': 5449.67, + 'avg_transaction_size': 249.86, + 'avg_spend_per_customer': 449.67, 'penetration_rate': 0.03, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -2003,8 +2003,8 @@ const data = [ 'category_name': 'Office and Commercial Furniture ...', 'total_spend': 44162.91, 'percentage_spent': 0, - 'avg_transaction_size': 1380.09, - 'avg_spend_per_customer': 1522.86, + 'avg_transaction_size': 380.09, + 'avg_spend_per_customer': 522.86, 'penetration_rate': 0.02, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -2063,8 +2063,8 @@ const data = [ 'category_name': 'Furriers and Fur Shops', 'total_spend': 66017.57, 'percentage_spent': 0, - 'avg_transaction_size': 916.91, - 'avg_spend_per_customer': 1082.26, + 'avg_transaction_size': 91.91, + 'avg_spend_per_customer': 182.26, 'penetration_rate': 0.03, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -2113,8 +2113,8 @@ const data = [ 'category_name': 'Precious Stones and Metals, Watches and Jewelry', 'total_spend': 55621.88, 'percentage_spent': 0, - 'avg_transaction_size': 2060.06, - 'avg_spend_per_customer': 2528.27, + 'avg_transaction_size': 60.06, + 'avg_spend_per_customer': 528.27, 'penetration_rate': 0.01, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -2233,8 +2233,8 @@ const data = [ 'category_name': 'Electrical Contractors', 'total_spend': 36480.82, 'percentage_spent': 0, - 'avg_transaction_size': 12160.27, - 'avg_spend_per_customer': 12160.27, + 'avg_transaction_size': 1111.27, + 'avg_spend_per_customer': 1111.27, 'penetration_rate': 0, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -2273,8 +2273,8 @@ const data = [ 'category_name': 'Motor Homes Dealers', 'total_spend': 9035.56, 'percentage_spent': 0, - 'avg_transaction_size': 1807.11, - 'avg_spend_per_customer': 2258.89, + 'avg_transaction_size': 807.11, + 'avg_spend_per_customer': 258.89, 'penetration_rate': 0, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1, @@ -2333,8 +2333,8 @@ const data = [ 'category_name': 'Roofing, Siding, and Sheet Metal Work Contractors', 'total_spend': 30014.2, 'percentage_spent': 0, - 'avg_transaction_size': 7503.55, - 'avg_spend_per_customer': 15007.1, + 'avg_transaction_size': 1011.55, + 'avg_spend_per_customer': 1011.1, 'penetration_rate': 0, 'avg_transaction_size_index': 1, 'avg_spend_per_customer_index': 1,