@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
174 lines • 8.27 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PaletteGenerator = void 0;
var tslib_1 = require("tslib");
var ChartControl_types_1 = require("./ChartControl.types");
var ChartColorPalettes_1 = require("./ChartColorPalettes");
var color_1 = tslib_1.__importDefault(require("color"));
/**
* Generates color palettes matching those you get within Office charts
*/
var PaletteGenerator = /** @class */ (function () {
function PaletteGenerator() {
}
/**
* Returns an array of colors generated using one of the
* pre-defined Office palettes colors
* @param palette the pre-defined Office palette
* @param desiredLength the desired resulting array lenght
*/
PaletteGenerator.GetPalette = function (palette, desiredLength) {
// Add default color scheme if it wasn't provided
var paletteColors = [];
switch (palette) {
case ChartControl_types_1.ChartPalette.OfficeColorful4:
paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL4, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeColorful3:
paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL3, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeColorful2:
paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL2, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic1:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC1, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic2:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC2, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic3:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC3, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic4:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC4, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic5:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC5, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic6:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC6, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic7:
paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_MONOCHROMATIC7, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic8:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC8, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic9:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC9, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic10:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC10, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic11:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC11, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic12:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC12, desiredLength);
break;
case ChartControl_types_1.ChartPalette.OfficeMonochromatic13:
paletteColors = this.generateNonRepeatingGradient(ChartColorPalettes_1.OFFICE_MONOCHROMATIC13, desiredLength);
break;
default:
paletteColors = this.generateRepeatingPattern(ChartColorPalettes_1.OFFICE_COLORFUL1, desiredLength);
break;
}
return paletteColors;
};
/**
* ChartJs doesn't give cycle through colors if the length of array of colors is smaller than
* the data length. This function repeats the array as many times as needed to make sure each
* item has a background color.
* @param array the array to make bigger
* @param desiredLength the desired length
*/
PaletteGenerator.generateRepeatingPattern = function (array, desiredLength) {
if (desiredLength === 0) {
return [];
}
var a = array;
while (a.length * 2 <= desiredLength) {
a = a.concat(a);
}
if (a.length < desiredLength) {
a = a.concat(a.slice(0, desiredLength - a.length));
}
return a;
};
/**
* Some of the Office color palettes consist of
* a non-repeating gradient from one color to another,
* divided by the number of steps (or array elements)
* @param colorRange the colors to start and end with
* @param numSteps the number of gradient steps to generate
*/
PaletteGenerator.generateNonRepeatingGradient = function (colorRange, numSteps) {
var startHex = colorRange[0];
var endHex = colorRange[colorRange.length - 1];
var startRGB = this._hexToRGB(startHex);
var endRGB = this._hexToRGB(endHex);
var colors = [];
var factorStep = 1 / (numSteps - 1);
for (var index = 0; index < numSteps; index++) {
var interpolatedColor = this._interpolateColors(startRGB, endRGB, factorStep * index);
var hexColor = this._rgbToHex(interpolatedColor);
colors.push(hexColor);
}
return colors;
};
/**
* Converts a color or array of colors to a semi-opaque version
* @param colors a single color, or array of colors to convert
* @param alphaValue a value between 0 and 1 indicating the opacity (alpha)
*/
PaletteGenerator.alpha = function (colors, alphaValue) {
if (colors instanceof Array) {
return colors.map(function (color) {
return (0, color_1.default)(color).alpha(alphaValue).toString();
});
}
else {
return (0, color_1.default)(colors).alpha(alphaValue).toString();
}
};
/**
* Interpolates between two colors
* @param color1 start color
* @param color2 end color
* @param factor interpolation facotor
*/
PaletteGenerator._interpolateColors = function (color1, color2, factor) {
if (arguments.length < 3) {
factor = 0.5;
}
var result = color1.slice();
for (var i = 0; i < 3; i++) {
result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
}
return result;
};
/**
* Converts a hex color to RGB
* @param hex the hex color string
*/
PaletteGenerator._hexToRGB = function (hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
// tslint:disable-next-line:no-bitwise
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : undefined;
};
/**
* Converts an RGB colour to a hex string
* @param rgb The RGC color
*/
PaletteGenerator._rgbToHex = function (rgb) {
// tslint:disable-next-line:no-bitwise
return '#' + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
};
return PaletteGenerator;
}());
exports.PaletteGenerator = PaletteGenerator;
//# sourceMappingURL=PaletteGenerator.js.map