@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
201 lines • 9.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getThresholdTheme = exports.getTheme = exports.getThemeColors = exports.getDonutUtilizationTheme = exports.getDonutThresholdStaticTheme = exports.getDonutThresholdDynamicTheme = exports.getDonutTheme = exports.getChartTheme = exports.getBulletQualitativeRangeTheme = exports.getBulletPrimarySegmentedMeasureTheme = exports.getBulletPrimaryNegativeMeasureTheme = exports.getBulletPrimaryDotMeasureTheme = exports.getBulletGroupTitleTheme = exports.getBulletComparativeWarningMeasureTheme = exports.getBulletComparativeMeasureTheme = exports.getBulletComparativeErrorMeasureTheme = exports.getBulletTheme = exports.getAxisTheme = exports.mergeTheme = exports.getCustomTheme = void 0;
const tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-unused-vars */
const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
const blue_color_theme_1 = require("../ChartTheme/themes/light/blue-color-theme");
const cyan_color_theme_1 = require("../ChartTheme/themes/light/cyan-color-theme");
const gold_color_theme_1 = require("../ChartTheme/themes/light/gold-color-theme");
const gray_color_theme_1 = require("../ChartTheme/themes/light/gray-color-theme");
const green_color_theme_1 = require("../ChartTheme/themes/light/green-color-theme");
const multi_color_ordered_theme_1 = require("../ChartTheme/themes/light/multi-color-ordered-theme");
const multi_color_unordered_theme_1 = require("../ChartTheme/themes/light/multi-color-unordered-theme");
const orange_color_theme_1 = require("../ChartTheme/themes/light/orange-color-theme");
const purple_color_theme_1 = require("../ChartTheme/themes/light/purple-color-theme");
const ChartTheme_1 = require("../ChartTheme/ChartTheme");
/**
* Apply custom properties to base and color themes
* @deprecated Use mergeTheme
* @public
*/
const getCustomTheme = (themeColor, themeVariant, customTheme) => (0, exports.mergeTheme)(themeColor, customTheme);
exports.getCustomTheme = getCustomTheme;
/**
* Merge custom properties with base and color themes
* @param themeColor The theme color to merge with custom theme
* @param customTheme The custom theme to merge
* @public
*/
const mergeTheme = (themeColor, customTheme) => (0, merge_1.default)((0, exports.getTheme)(themeColor), customTheme);
exports.mergeTheme = mergeTheme;
/**
* Returns axis theme
* @private
*/
const getAxisTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartAxisTheme);
exports.getAxisTheme = getAxisTheme;
/**
* Returns bullet chart theme
* @private
*/
const getBulletTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletTheme);
exports.getBulletTheme = getBulletTheme;
/**
* Returns comparative error measure theme for bullet chart
* @private
*/
const getBulletComparativeErrorMeasureTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletComparativeErrorMeasureTheme);
exports.getBulletComparativeErrorMeasureTheme = getBulletComparativeErrorMeasureTheme;
/**
* Returns comparative measure theme for bullet chart
* @private
*/
const getBulletComparativeMeasureTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletComparativeMeasureTheme);
exports.getBulletComparativeMeasureTheme = getBulletComparativeMeasureTheme;
/**
* Returns comparative warning measure theme for bullet chart
* @private
*/
const getBulletComparativeWarningMeasureTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletComparativeWarningMeasureTheme);
exports.getBulletComparativeWarningMeasureTheme = getBulletComparativeWarningMeasureTheme;
/**
* Returns group title theme for bullet chart
* @private
*/
const getBulletGroupTitleTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletGroupTitleTheme);
exports.getBulletGroupTitleTheme = getBulletGroupTitleTheme;
/**
* Returns primary dot measure theme for bullet chart
* @private
*/
const getBulletPrimaryDotMeasureTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletPrimaryDotMeasureTheme);
exports.getBulletPrimaryDotMeasureTheme = getBulletPrimaryDotMeasureTheme;
/**
* Returns primary negative measure theme for bullet chart
* @private
*/
const getBulletPrimaryNegativeMeasureTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletPrimaryNegativeMeasureTheme);
exports.getBulletPrimaryNegativeMeasureTheme = getBulletPrimaryNegativeMeasureTheme;
/**
* Returns primary segmented measure theme for bullet chart
* @private
*/
const getBulletPrimarySegmentedMeasureTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletPrimarySegmentedMeasureTheme);
exports.getBulletPrimarySegmentedMeasureTheme = getBulletPrimarySegmentedMeasureTheme;
/**
* Returns qualitative range theme for bullet chart
* @private
*/
const getBulletQualitativeRangeTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartBulletQualitativeRangeTheme);
exports.getBulletQualitativeRangeTheme = getBulletQualitativeRangeTheme;
/**
* Returns theme for Chart component
* @private
*/
const getChartTheme = (themeColor, showAxis) => {
const theme = (0, exports.getTheme)(themeColor);
if (!showAxis) {
theme.axis.padding = 0;
theme.axis.style.axis.fill = 'none';
theme.axis.style.axis.stroke = 'none';
theme.axis.style.grid.fill = 'none';
theme.axis.style.grid.stroke = 'none';
theme.axis.style.ticks.fill = 'none';
theme.axis.style.ticks.stroke = 'none';
theme.axis.style.tickLabels.fill = 'none';
}
return theme;
};
exports.getChartTheme = getChartTheme;
/**
* Returns donut theme
* @private
*/
const getDonutTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartDonutTheme);
exports.getDonutTheme = getDonutTheme;
/**
* Returns dynamic donut threshold theme
* @private
*/
const getDonutThresholdDynamicTheme = (themeColor) => {
const theme = (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartDonutThresholdDynamicTheme);
// Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale
theme.legend.colorScale = [theme.pie.colorScale[0], ...ChartTheme_1.ChartDonutThresholdDynamicTheme.legend.colorScale];
// Merge the threshold colors in case users want to show the unused data
theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartTheme_1.ChartDonutThresholdStaticTheme.pie.colorScale];
return theme;
};
exports.getDonutThresholdDynamicTheme = getDonutThresholdDynamicTheme;
/**
* Returns static donut threshold theme
* @private
*/
const getDonutThresholdStaticTheme = (themeColor, invert) => {
const staticTheme = (0, cloneDeep_1.default)(ChartTheme_1.ChartDonutThresholdStaticTheme);
if (invert && staticTheme.pie.colorScale instanceof Array) {
staticTheme.pie.colorScale = staticTheme.pie.colorScale.reverse();
}
return (0, exports.mergeTheme)(themeColor, staticTheme);
};
exports.getDonutThresholdStaticTheme = getDonutThresholdStaticTheme;
/**
* Returns donut utilization theme
* @private
*/
const getDonutUtilizationTheme = (themeColor) => {
const theme = (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartDonutUtilizationDynamicTheme);
// Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale
theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartTheme_1.ChartDonutUtilizationStaticTheme.pie.colorScale];
theme.legend.colorScale = [theme.legend.colorScale[0], ...ChartTheme_1.ChartDonutUtilizationStaticTheme.legend.colorScale];
return theme;
};
exports.getDonutUtilizationTheme = getDonutUtilizationTheme;
/**
* Returns theme colors
* @private
*/
const getThemeColors = (themeColor) => {
switch (themeColor) {
case ChartTheme_1.ChartThemeColor.blue:
return blue_color_theme_1.LightBlueColorTheme;
case ChartTheme_1.ChartThemeColor.cyan:
return cyan_color_theme_1.LightCyanColorTheme;
case ChartTheme_1.ChartThemeColor.gold:
return gold_color_theme_1.LightGoldColorTheme;
case ChartTheme_1.ChartThemeColor.gray:
return gray_color_theme_1.LightGrayColorTheme;
case ChartTheme_1.ChartThemeColor.green:
return green_color_theme_1.LightGreenColorTheme;
case ChartTheme_1.ChartThemeColor.multi:
case ChartTheme_1.ChartThemeColor.multiOrdered:
return multi_color_ordered_theme_1.LightMultiColorOrderedTheme;
case ChartTheme_1.ChartThemeColor.multiUnordered:
return multi_color_unordered_theme_1.LightMultiColorUnorderedTheme;
case ChartTheme_1.ChartThemeColor.orange:
return orange_color_theme_1.LightOrangeColorTheme;
case ChartTheme_1.ChartThemeColor.purple:
return purple_color_theme_1.LightPurpleColorTheme;
default:
return blue_color_theme_1.LightBlueColorTheme;
}
};
exports.getThemeColors = getThemeColors;
/**
* Applies theme color to base theme
* @private
*/
const getTheme = (themeColor) => {
// Deep clone
const baseTheme = Object.assign({}, JSON.parse(JSON.stringify(ChartTheme_1.ChartBaseTheme)));
return (0, merge_1.default)(baseTheme, (0, exports.getThemeColors)(themeColor));
};
exports.getTheme = getTheme;
/**
* Returns threshold theme
* @private
*/
const getThresholdTheme = (themeColor) => (0, exports.mergeTheme)(themeColor, ChartTheme_1.ChartThresholdTheme);
exports.getThresholdTheme = getThresholdTheme;
//# sourceMappingURL=chart-theme.js.map