@elastic/charts
Version:
Elastic-Charts data visualization library
172 lines • 10.7 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Legend = void 0;
const classnames_1 = __importDefault(require("classnames"));
const react_1 = __importStar(require("react"));
const react_redux_1 = require("react-redux");
const redux_1 = require("redux");
const custom_legend_1 = require("./custom_legend");
const legend_list_1 = require("./legend_list");
const legend_table_1 = require("./legend_table");
const position_style_1 = require("./position_style");
const style_utils_1 = require("./style_utils");
const use_action_focus_management_1 = require("./use_action_focus_management");
const legend_1 = require("../../common/legend");
const specs_1 = require("../../specs");
const colors_1 = require("../../state/actions/colors");
const legend_2 = require("../../state/actions/legend");
const get_chart_theme_1 = require("../../state/selectors/get_chart_theme");
const get_internal_chart_state_1 = require("../../state/selectors/get_internal_chart_state");
const get_internal_is_intialized_1 = require("../../state/selectors/get_internal_is_intialized");
const get_internal_main_projection_area_1 = require("../../state/selectors/get_internal_main_projection_area");
const get_legend_config_selector_1 = require("../../state/selectors/get_legend_config_selector");
const get_legend_items_values_1 = require("../../state/selectors/get_legend_items_values");
const get_legend_size_1 = require("../../state/selectors/get_legend_size");
const get_longest_legend_formatted_value_1 = require("../../state/selectors/get_longest_legend_formatted_value");
const get_settings_spec_1 = require("../../state/selectors/get_settings_spec");
const is_brushing_1 = require("../../state/selectors/is_brushing");
const common_1 = require("../../utils/common");
const light_theme_1 = require("../../utils/themes/light_theme");
function LegendComponent(props) {
const { items, size, debug, isBrushing, chartTheme: { chartMargins, legend }, chartDimensions, containerDimensions, config, maxFormattedValueWidth, } = props;
const { onLegendItemOut, onLegendItemOver, legendLayout, legendPosition } = config;
const { onItemOutAction, onItemOverAction } = props;
const onLegendItemMouseOver = (0, react_1.useCallback)((seriesIdentifiers, path) => {
if (onLegendItemOver) {
onLegendItemOver(seriesIdentifiers);
}
onItemOverAction(path);
}, [onItemOverAction, onLegendItemOver]);
const onLegendItemMouseOut = (0, react_1.useCallback)(() => {
if (onLegendItemOut) {
onLegendItemOut();
}
onItemOutAction();
}, [onLegendItemOut, onItemOutAction]);
if (items.every(({ isItemHidden }) => isItemHidden)) {
return null;
}
const positionConfig = (0, position_style_1.getLegendPositionConfig)(config.legendPosition);
const containerStyle = (0, style_utils_1.getLegendStyle)(positionConfig, size, legend.margin);
const listStyle = (0, style_utils_1.getLegendListStyle)(positionConfig, chartMargins, legend, items.length);
const isMostlyRTL = (0, common_1.hasMostlyRTLItems)(items.map(({ label }) => label));
const legendClasses = (0, classnames_1.default)('echLegend', {
'echLegend--debug': debug,
'echLegend--inert': isBrushing,
'echLegend--horizontal': positionConfig.direction === common_1.LayoutDirection.Horizontal,
'echLegend--vertical': positionConfig.direction === common_1.LayoutDirection.Vertical,
'echLegend--left': positionConfig.hAlign === common_1.HorizontalAlignment.Left,
'echLegend--right': positionConfig.hAlign === common_1.HorizontalAlignment.Right,
'echLegend--top': positionConfig.vAlign === common_1.VerticalAlignment.Top,
'echLegend--bottom': positionConfig.vAlign === common_1.VerticalAlignment.Bottom,
});
const itemProps = {
positionConfig,
isMostlyRTL,
totalItems: items.length,
hiddenItems: items.filter(({ isSeriesHidden }) => isSeriesHidden).length,
extraValues: props.extraValues,
legendValues: config.legendValues,
onLegendItemMouseOver,
onLegendItemMouseOut,
onClick: config.onLegendItemClick,
clearTemporaryColorsAction: props.clearTemporaryColors,
setPersistedColorAction: props.setPersistedColor,
setTemporaryColorAction: props.setTemporaryColor,
toggleDeselectSeriesAction: props.onToggleDeselectSeriesAction,
colorPicker: config.legendColorPicker,
action: config.legendAction,
legendActionOnHover: config.legendActionOnHover ?? specs_1.DEFAULT_LEGEND_CONFIG.legendActionOnHover,
labelOptions: legend.labelOptions,
flatLegend: config.flatLegend ?? specs_1.DEFAULT_LEGEND_CONFIG.flatLegend,
legendTitle: config.legendTitle,
};
const positionStyle = (0, position_style_1.legendPositionStyle)(config, size, chartDimensions, containerDimensions);
const isTableView = (0, legend_1.shouldDisplayTable)(itemProps.legendValues, legendPosition, legendLayout);
const isGridListView = (0, legend_1.shouldDisplayGridList)(isTableView, legendPosition, legendLayout);
const actionFocusEnabled = Boolean(config.legendAction);
return (react_1.default.createElement(use_action_focus_management_1.ActionFocusProvider, { enabled: actionFocusEnabled },
react_1.default.createElement("div", { className: legendClasses, style: positionStyle, dir: isMostlyRTL ? 'rtl' : 'ltr' }, config.customLegend ? (react_1.default.createElement("div", { style: containerStyle },
react_1.default.createElement(custom_legend_1.CustomLegend, { component: config.customLegend, items: items.map(({ seriesIdentifiers, childId, path, ...customProps }) => ({
...customProps,
seriesIdentifiers,
path,
extraValue: itemProps.extraValues.get(seriesIdentifiers[0]?.key ?? '')?.get(childId ?? ''),
onItemOutAction,
onItemOverActon: () => onItemOverAction(path),
onItemClickAction: (negate) => itemProps.toggleDeselectSeriesAction({ legendItemIds: seriesIdentifiers, metaKey: negate }),
})) }))) : isTableView ? (react_1.default.createElement("div", { style: containerStyle, className: "echLegendTable__container" },
react_1.default.createElement(legend_table_1.LegendTable, { items: items, ...itemProps, seriesWidth: size.seriesWidth }))) : isGridListView ? (react_1.default.createElement("div", { style: containerStyle, className: "echLegendGridListContainer" },
react_1.default.createElement("ul", { style: listStyle, className: "echLegendGridList" }, items.map((item, index) => (react_1.default.createElement(legend_list_1.LegendList, { key: `${index}`, item: item, ...itemProps })))))) : (react_1.default.createElement("div", { style: containerStyle, className: "echLegendListContainer" },
react_1.default.createElement("ul", { style: listStyle, className: "echLegendList" }, items.map((item, index) => (react_1.default.createElement(legend_list_1.LegendList, { key: `${index}`, item: item, ...itemProps, isListLayout: true, maxFormattedValueWidth: maxFormattedValueWidth })))))))));
}
const mapDispatchToProps = (dispatch) => (0, redux_1.bindActionCreators)({
onToggleDeselectSeriesAction: legend_2.onToggleDeselectSeriesAction,
onItemOutAction: legend_2.onLegendItemOutAction,
onItemOverAction: legend_2.onLegendItemOverAction,
clearTemporaryColors: colors_1.clearTemporaryColors,
setTemporaryColor: colors_1.setTemporaryColor,
setPersistedColor: colors_1.setPersistedColor,
}, dispatch);
const EMPTY_DEFAULT_STATE = {
chartDimensions: { width: 0, height: 0, left: 0, top: 0 },
containerDimensions: { width: 0, height: 0, left: 0, top: 0 },
items: [],
extraValues: new Map(),
debug: false,
isBrushing: false,
chartTheme: light_theme_1.LIGHT_THEME,
size: { width: 0, height: 0 },
config: specs_1.DEFAULT_LEGEND_CONFIG,
};
const mapStateToProps = (state) => {
const internalChartState = (0, get_internal_chart_state_1.getInternalChartStateSelector)(state);
if (internalChartState === null || (0, get_internal_is_intialized_1.getInternalIsInitializedSelector)(state) !== get_internal_is_intialized_1.InitStatus.Initialized) {
return EMPTY_DEFAULT_STATE;
}
const config = (0, get_legend_config_selector_1.getLegendConfigSelector)(state);
if (!config.showLegend) {
return EMPTY_DEFAULT_STATE;
}
const { debug } = (0, get_settings_spec_1.getSettingsSpecSelector)(state);
return {
debug,
isBrushing: (0, is_brushing_1.isBrushingSelector)(state),
chartDimensions: (0, get_internal_main_projection_area_1.getInternalMainProjectionAreaSelector)(state),
containerDimensions: internalChartState.getProjectionContainerArea(state),
chartTheme: (0, get_chart_theme_1.getChartThemeSelector)(state),
size: (0, get_legend_size_1.getLegendSizeSelector)(state),
items: internalChartState.getLegendItems(state),
extraValues: (0, get_legend_items_values_1.getLegendExtraValuesSelector)(state),
maxFormattedValueWidth: (0, get_longest_legend_formatted_value_1.getLongestLegendFormattedValueWidthSelector)(state),
config,
};
};
exports.Legend = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(LegendComponent);
//# sourceMappingURL=legend.js.map