@operational/utils
Advanced tools
Comparing version 0.2.2 to 0.3.0
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var colorCalculator = require("tinycolor2"); | ||
var getBrightestColor = function (colors) { | ||
return colors.reduce(function (acc, curr) { | ||
if (curr.l > acc.l) { | ||
return curr; | ||
} | ||
return acc; | ||
}); | ||
}; | ||
exports.readableTextColor = function (backgroundColor, workingColors) { | ||
var backgroundHsl = colorCalculator(backgroundColor).toHsl(); | ||
var workingColorHsls = workingColors.map(function (color) { return colorCalculator(color).toHsl(); }); | ||
const colorCalculator = require("tinycolor2"); | ||
const getBrightestColor = (colors) => colors.reduce((acc, curr) => { | ||
if (curr.l > acc.l) { | ||
return curr; | ||
} | ||
return acc; | ||
}); | ||
exports.readableTextColor = (backgroundColor, workingColors) => { | ||
const backgroundHsl = colorCalculator(backgroundColor).toHsl(); | ||
const workingColorHsls = workingColors.map(color => colorCalculator(color).toHsl()); | ||
// For reasonably saturated colors on the bright side, still pick the lightest color. | ||
@@ -21,27 +19,20 @@ if (backgroundHsl.s > 0.4 && backgroundHsl.l < 0.75) { | ||
}; | ||
exports.darken = function (color, percentage) { | ||
return colorCalculator(color) | ||
.darken(percentage) | ||
.toString(); | ||
}; | ||
exports.lighten = function (color, percentage) { | ||
return colorCalculator(color) | ||
.lighten(percentage) | ||
.toString(); | ||
}; | ||
exports.getBrightness = function (color) { | ||
var c = colorCalculator(color); | ||
exports.darken = (color, percentage) => colorCalculator(color) | ||
.darken(percentage) | ||
.toString(); | ||
exports.lighten = (color, percentage) => colorCalculator(color) | ||
.lighten(percentage) | ||
.toString(); | ||
exports.getBrightness = (color) => { | ||
const c = colorCalculator(color); | ||
return c.getBrightness(); | ||
}; | ||
exports.setBrightness = function (color, targetBrightness) { | ||
var c = colorCalculator(color); | ||
var brightness = c.getBrightness(); | ||
return c.brighten(targetBrightness / brightness * 100 - 100).toString(); | ||
exports.setBrightness = (color, targetBrightness) => { | ||
const c = colorCalculator(color); | ||
const brightness = c.getBrightness(); | ||
return c.brighten((targetBrightness / brightness) * 100 - 100).toString(); | ||
}; | ||
exports.transparentize = function (color) { return function (percentage) { | ||
return (function (_a) { | ||
var r = _a.r, g = _a.g, b = _a.b; | ||
return "rgba(" + r + ", " + g + ", " + b + ", " + 255 * (100 - percentage) / 100 + ")"; | ||
})(colorCalculator(color).toRgb()); | ||
}; }; | ||
exports.transparentize = (color) => (percentage) => (({ r, g, b }) => { | ||
return `rgba(${r}, ${g}, ${b}, ${(255 * (100 - percentage)) / 100})`; | ||
})(colorCalculator(color).toRgb()); | ||
//# sourceMappingURL=color.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.colorAssigner = function (palette) { | ||
exports.colorAssigner = (palette) => { | ||
if (palette.length === 0) { | ||
throw new Error("No color palette defined"); | ||
} | ||
var assigned = {}; | ||
var usedColors = []; | ||
var getColor = function (key) { | ||
const assigned = {}; | ||
const usedColors = []; | ||
const getColor = (key) => { | ||
return assigned[key]; | ||
}; | ||
var nextColor = function () { | ||
const nextColor = () => { | ||
// Count how many times each colour has been used | ||
var usageCount = palette.reduce(function (memo, color) { | ||
const usageCount = palette.reduce((memo, color) => { | ||
memo[color] = 0; | ||
return memo; | ||
}, {}); | ||
usedColors.forEach(function (color) { | ||
usedColors.forEach((color) => { | ||
usageCount[color] += 1; | ||
}); | ||
var min = palette.reduce(function (memo, color) { | ||
const min = palette.reduce((memo, color) => { | ||
return memo ? Math.min(memo, usageCount[color]) : usageCount[color]; | ||
}, undefined); | ||
// Find a color with the minimum usage count | ||
return palette.find(function (color) { | ||
return palette.find((color) => { | ||
return usageCount[color] === min; | ||
}); | ||
}; | ||
var assignColor = function (key) { | ||
var color = nextColor(); | ||
const assignColor = (key) => { | ||
const color = nextColor(); | ||
assigned[key] = color; | ||
@@ -35,3 +35,3 @@ usedColors.push(color); | ||
}; | ||
return function (key) { | ||
return (key) => { | ||
return getColor(key) || assignColor(key); | ||
@@ -38,0 +38,0 @@ }; |
@@ -8,11 +8,7 @@ "use strict"; | ||
*/ | ||
exports.handleWithD3Element = function (handler) { | ||
return function (datum) { | ||
var args = []; | ||
for (var _i = 1; _i < arguments.length; _i++) { | ||
args[_i - 1] = arguments[_i]; | ||
} | ||
handler.apply(void 0, [datum, this].concat(args)); | ||
exports.handleWithD3Element = (handler) => { | ||
return function (datum, ...args) { | ||
handler(datum, this, ...args); | ||
}; | ||
}; | ||
//# sourceMappingURL=d3.js.map |
@@ -1,4 +0,5 @@ | ||
export { fadeIn, resetTransform, spin, baseStylesheet, injectStylesheet } from "./styles"; | ||
export { readableTextColor, darken, lighten, transparentize, setBrightness, getBrightness } from "./color"; | ||
export { handleWithD3Element } from "./d3"; | ||
export { colorAssigner } from "./colorAssigner"; | ||
export * from "./styles"; | ||
export * from "./color"; | ||
export * from "./d3"; | ||
export * from "./colorAssigner"; | ||
export * from "./text"; |
"use strict"; | ||
function __export(m) { | ||
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
} | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var styles_1 = require("./styles"); | ||
exports.fadeIn = styles_1.fadeIn; | ||
exports.resetTransform = styles_1.resetTransform; | ||
exports.spin = styles_1.spin; | ||
exports.baseStylesheet = styles_1.baseStylesheet; | ||
exports.injectStylesheet = styles_1.injectStylesheet; | ||
var color_1 = require("./color"); | ||
exports.readableTextColor = color_1.readableTextColor; | ||
exports.darken = color_1.darken; | ||
exports.lighten = color_1.lighten; | ||
exports.transparentize = color_1.transparentize; | ||
exports.setBrightness = color_1.setBrightness; | ||
exports.getBrightness = color_1.getBrightness; | ||
var d3_1 = require("./d3"); | ||
exports.handleWithD3Element = d3_1.handleWithD3Element; | ||
var colorAssigner_1 = require("./colorAssigner"); | ||
exports.colorAssigner = colorAssigner_1.colorAssigner; | ||
__export(require("./styles")); | ||
__export(require("./color")); | ||
__export(require("./d3")); | ||
__export(require("./colorAssigner")); | ||
__export(require("./text")); | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var glamor_1 = require("glamor"); | ||
var color_1 = require("./color"); | ||
exports.baseStylesheet = function (theme) { return "\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n font-family: " + theme.fontFamily + ";\n font-size: 13px;\n height: 100%;\n}\n\nbody {\n background-color: " + theme.colors.background + ";\n}\n\na:link,\na:visited {\n color: " + theme.colors.info + ";\n}\n\na:hover: {\n color: " + color_1.darken(theme.colors.info, 5) + ";\n}\n"; }; | ||
exports.injectStylesheet = function (cssString) { | ||
const glamor_1 = require("glamor"); | ||
const color_1 = require("./color"); | ||
exports.baseStylesheet = (theme) => ` | ||
* { | ||
box-sizing: border-box; | ||
} | ||
html, | ||
body { | ||
margin: 0; | ||
padding: 0; | ||
font-family: ${theme.fontFamily}; | ||
font-size: 13px; | ||
height: 100%; | ||
} | ||
body { | ||
background-color: ${theme.colors.background}; | ||
} | ||
a:link, | ||
a:visited { | ||
color: ${theme.colors.info}; | ||
} | ||
a:hover: { | ||
color: ${color_1.darken(theme.colors.info, 5)}; | ||
} | ||
`; | ||
exports.injectStylesheet = (cssString) => { | ||
if (!document) { | ||
return; | ||
} | ||
var styleEl = document.createElement("style"); | ||
const styleEl = document.createElement("style"); | ||
styleEl.innerHTML = cssString; | ||
@@ -12,0 +38,0 @@ document.head.appendChild(styleEl); |
{ | ||
"name": "@operational/utils", | ||
"version": "0.2.2", | ||
"version": "0.3.0", | ||
"description": "A collection of utilities used within the Contiamo UI suite", | ||
@@ -14,34 +14,15 @@ "main": "./lib/index.js", | ||
"scripts": { | ||
"package": "rm -rf lib && tsc -d", | ||
"package:watch": "rm -rf lib && tsc -d -w", | ||
"package": "rimraf lib && tsc", | ||
"package:watch": "rimraf lib && tsc -w", | ||
"test": "jest", | ||
"test:u": "jest -u", | ||
"lint": "tslint './src/**/*.{ts,tsx}' --fix", | ||
"prettier": "prettier './src/**/*.{ts,tsx}' --write" | ||
"test:watch": "jest --watch" | ||
}, | ||
"dependencies": { | ||
"@operational/theme": "^0.2.2", | ||
"@operational/theme": "^0.3.0", | ||
"glamor": "^2.20.40", | ||
"tinycolor2": "^1.4.1" | ||
}, | ||
"devDependencies": { | ||
"@types/core-js": "0.9.43", | ||
"@types/d3-ease": "1.0.7", | ||
"@types/d3-scale": "1.0.10", | ||
"@types/d3-selection": "1.1.0", | ||
"@types/d3-shape": "1.2.1", | ||
"@types/d3-transition": "1.1.0", | ||
"@types/jest": "20.0.8", | ||
"@types/node": "8.0.27", | ||
"@types/tinycolor2": "1.4.0", | ||
"jest": "21.2.1", | ||
"prettier": "1.8.2", | ||
"ts-jest": "21.0.0", | ||
"tslint": "5.9.1", | ||
"tslint-config-airbnb": "5.8.0", | ||
"tslint-config-prettier": "1.12.0", | ||
"typescript": "2.8.3" | ||
}, | ||
"jest": { | ||
"setupFiles": [ | ||
"./test-polyfills.js" | ||
"../../test-polyfills.js" | ||
], | ||
@@ -55,7 +36,12 @@ "moduleFileExtensions": [ | ||
"transform": { | ||
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js" | ||
"\\.(ts|tsx)$": "<rootDir>/../../node_modules/ts-jest/preprocessor.js" | ||
}, | ||
"testRegex": "/__tests__/.*\\.(ts|tsx|js|jsx)$", | ||
"mapCoverage": true | ||
"roots": [ | ||
"<rootDir>/src" | ||
], | ||
"testRegex": "/__tests__/.*\\.(ts|tsx|js|jsx)$" | ||
}, | ||
"devDependencies": { | ||
"prettier": "^1.13.4" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
25568
1
40
468
3
2
+ Addedglamor@^2.20.40
+ Added@operational/theme@0.3.0(transitive)
+ Addedasap@2.0.6(transitive)
+ Addedbowser@1.9.4(transitive)
+ Addedcore-js@1.2.7(transitive)
+ Addedcss-in-js-utils@2.0.1(transitive)
+ Addedencoding@0.1.13(transitive)
+ Addedfbjs@0.8.18(transitive)
+ Addedglamor@2.20.40(transitive)
+ Addedhyphenate-style-name@1.1.0(transitive)
+ Addediconv-lite@0.6.3(transitive)
+ Addedinline-style-prefixer@3.0.8(transitive)
+ Addedis-stream@1.1.0(transitive)
+ Addedisobject@3.0.1(transitive)
+ Addedisomorphic-fetch@2.2.1(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addednode-fetch@1.7.3(transitive)
+ Addedobject-assign@4.1.1(transitive)
+ Addedpromise@7.3.1(transitive)
+ Addedprop-types@15.8.1(transitive)
+ Addedreact-is@16.13.1(transitive)
+ Addedsafer-buffer@2.1.2(transitive)
+ Addedsetimmediate@1.0.5(transitive)
+ Addedthrough@2.3.8(transitive)
+ Addedua-parser-js@0.7.39(transitive)
+ Addedwhatwg-fetch@3.6.20(transitive)
- Removed@operational/theme@0.2.2(transitive)
Updated@operational/theme@^0.3.0