@elastic/charts 64.1.0 → 65.1.0

package/dist/common/legend.d.ts

@@ -1,2 +1,52 @@
-export {};
+import { $Values } from 'utility-types';
+import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
+/** @public */
+export type LegendItemValue = {
+    value: PrimitiveValue;
+    label: string;
+    type: LegendValue;
+};
+/** @public */
+export declare const LegendValue: Readonly<{
+    /** Value of the bucket being hovered or last bucket value when not hovering. */
+    CurrentAndLastValue: "currentAndLastValue";
+    /** Last value considering all data points in the chart */
+    LastValue: "lastValue";
+    /** Last non-null value */
+    LastNonNullValue: "lastNonNullValue";
+    /** Average value considering all data points in the chart */
+    Average: "average";
+    /** Median value considering all data points in the chart */
+    Median: "median";
+    /** Maximum value considering all data points in the chart */
+    Max: "max";
+    /** Minimum value considering all data points in the chart */
+    Min: "min";
+    /** First value considering all data points in the chart */
+    FirstValue: "firstValue";
+    /** First non-null value */
+    FirstNonNullValue: "firstNonNullValue";
+    /** Sum of al values plotted in the chart */
+    Total: "total";
+    /** number of data points plotted in the chart */
+    Count: "count";
+    /** number of data points with different values plotted in the chart */
+    DistinctCount: "distinctCount";
+    /** Variance of all data points plotted in the chart */
+    Variance: "variance";
+    /** Standard deviation of all data points plotted in the chart */
+    StdDeviation: "stdDeviation";
+    /**  Difference between min and max values */
+    Range: "range";
+    /** Difference between first and last values */
+    Difference: "difference";
+    /** % difference between first and last values */
+    DifferencePercent: "differencePercent";
+    /** Partition section value */
+    Value: "value";
+    /** Partition section value in percent */
+    Percent: "percent";
+}>;
+/** @public */
+export type LegendValue = $Values<typeof LegendValue>;
 //# sourceMappingURL=legend.d.ts.map

package/dist/common/legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/common/legend.ts"],"names":[],"mappings":""}
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/common/legend.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,OAAO,EAAE,cAAc,EAAE,MAAM,6DAA6D,CAAC;AAQ7F,cAAc;AACd,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAE1F,cAAc;AACd,eAAO,MAAM,WAAW;IACtB,gFAAgF;;IAEhF,0DAA0D;;IAE1D,0BAA0B;;IAE1B,6DAA6D;;IAE7D,4DAA4D;;IAE5D,6DAA6D;;IAE7D,6DAA6D;;IAE7D,2DAA2D;;IAE3D,2BAA2B;;IAE3B,4CAA4C;;IAE5C,iDAAiD;;IAEjD,uEAAuE;;IAEvE,uDAAuD;;IAEvD,iEAAiE;;IAEjE,6CAA6C;;IAE7C,+CAA+C;;IAE/C,iDAAiD;;IAEjD,8BAA8B;;IAE9B,yCAAyC;;EAEzC,CAAC;AACH,cAAc;AACd,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/common/legend.js

@@ -1,3 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.legendValueTitlesMap = exports.shouldDisplayTable = exports.LegendValue = void 0;
+exports.LegendValue = Object.freeze({
+    CurrentAndLastValue: 'currentAndLastValue',
+    LastValue: 'lastValue',
+    LastNonNullValue: 'lastNonNullValue',
+    Average: 'average',
+    Median: 'median',
+    Max: 'max',
+    Min: 'min',
+    FirstValue: 'firstValue',
+    FirstNonNullValue: 'firstNonNullValue',
+    Total: 'total',
+    Count: 'count',
+    DistinctCount: 'distinctCount',
+    Variance: 'variance',
+    StdDeviation: 'stdDeviation',
+    Range: 'range',
+    Difference: 'difference',
+    DifferencePercent: 'differencePercent',
+    Value: 'value',
+    Percent: 'percent',
+});
+const shouldDisplayTable = (legendValues) => legendValues.some((v) => v !== exports.LegendValue.CurrentAndLastValue && v !== exports.LegendValue.Value);
+exports.shouldDisplayTable = shouldDisplayTable;
+exports.legendValueTitlesMap = {
+    [exports.LegendValue.CurrentAndLastValue]: 'Value',
+    [exports.LegendValue.Value]: 'Value',
+    [exports.LegendValue.Percent]: 'Percent',
+    [exports.LegendValue.LastValue]: 'Last',
+    [exports.LegendValue.LastNonNullValue]: 'Last non-null',
+    [exports.LegendValue.FirstValue]: 'First',
+    [exports.LegendValue.FirstNonNullValue]: 'First non-null',
+    [exports.LegendValue.Average]: 'Avg',
+    [exports.LegendValue.Median]: 'Mid',
+    [exports.LegendValue.Min]: 'Min',
+    [exports.LegendValue.Max]: 'Max',
+    [exports.LegendValue.Total]: 'Total',
+    [exports.LegendValue.Count]: 'Count',
+    [exports.LegendValue.DistinctCount]: 'Dist Count',
+    [exports.LegendValue.Variance]: 'Variance',
+    [exports.LegendValue.StdDeviation]: 'Std dev',
+    [exports.LegendValue.Range]: 'Range',
+    [exports.LegendValue.Difference]: 'Diff',
+    [exports.LegendValue.DifferencePercent]: 'Diff %',
+};
 //# sourceMappingURL=legend.js.map

package/dist/common/legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../src/common/legend.ts"],"names":[],"mappings":""}
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../src/common/legend.ts"],"names":[],"mappings":";;;AAyBa,QAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC;IAEvC,mBAAmB,EAAE,qBAA8B;IAEnD,SAAS,EAAE,WAAoB;IAE/B,gBAAgB,EAAE,kBAA2B;IAE7C,OAAO,EAAE,SAAkB;IAE3B,MAAM,EAAE,QAAiB;IAEzB,GAAG,EAAE,KAAc;IAEnB,GAAG,EAAE,KAAc;IAEnB,UAAU,EAAE,YAAqB;IAEjC,iBAAiB,EAAE,mBAA4B;IAE/C,KAAK,EAAE,OAAgB;IAEvB,KAAK,EAAE,OAAgB;IAEvB,aAAa,EAAE,eAAwB;IAEvC,QAAQ,EAAE,UAAmB;IAE7B,YAAY,EAAE,cAAuB;IAErC,KAAK,EAAE,OAAgB;IAEvB,UAAU,EAAE,YAAqB;IAEjC,iBAAiB,EAAE,mBAA4B;IAE/C,KAAK,EAAE,OAAgB;IAEvB,OAAO,EAAE,SAAkB;CAC5B,CAAC,CAAC;AA8BI,MAAM,kBAAkB,GAAG,CAAC,YAA2B,EAAE,EAAE,CAChE,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,mBAAW,CAAC,mBAAmB,IAAI,CAAC,KAAK,mBAAW,CAAC,KAAK,CAAC,CAAC;AADhF,QAAA,kBAAkB,sBAC8D;AAKhF,QAAA,oBAAoB,GAAG;IAClC,CAAC,mBAAW,CAAC,mBAAmB,CAAC,EAAE,OAAO;IAC1C,CAAC,mBAAW,CAAC,KAAK,CAAC,EAAE,OAAO;IAC5B,CAAC,mBAAW,CAAC,OAAO,CAAC,EAAE,SAAS;IAChC,CAAC,mBAAW,CAAC,SAAS,CAAC,EAAE,MAAM;IAC/B,CAAC,mBAAW,CAAC,gBAAgB,CAAC,EAAE,eAAe;IAC/C,CAAC,mBAAW,CAAC,UAAU,CAAC,EAAE,OAAO;IACjC,CAAC,mBAAW,CAAC,iBAAiB,CAAC,EAAE,gBAAgB;IACjD,CAAC,mBAAW,CAAC,OAAO,CAAC,EAAE,KAAK;IAC5B,CAAC,mBAAW,CAAC,MAAM,CAAC,EAAE,KAAK;IAC3B,CAAC,mBAAW,CAAC,GAAG,CAAC,EAAE,KAAK;IACxB,CAAC,mBAAW,CAAC,GAAG,CAAC,EAAE,KAAK;IACxB,CAAC,mBAAW,CAAC,KAAK,CAAC,EAAE,OAAO;IAC5B,CAAC,mBAAW,CAAC,KAAK,CAAC,EAAE,OAAO;IAC5B,CAAC,mBAAW,CAAC,aAAa,CAAC,EAAE,YAAY;IACzC,CAAC,mBAAW,CAAC,QAAQ,CAAC,EAAE,UAAU;IAClC,CAAC,mBAAW,CAAC,YAAY,CAAC,EAAE,SAAS;IACrC,CAAC,mBAAW,CAAC,KAAK,CAAC,EAAE,OAAO;IAC5B,CAAC,mBAAW,CAAC,UAAU,CAAC,EAAE,MAAM;IAChC,CAAC,mBAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ;CAC1C,CAAC"}

package/dist/components/chart.d.ts

@@ -41,7 +41,7 @@ export declare class Chart extends React.Component<ChartProps, ChartState> {
     } | null;
     getChartContainerRef: () => React.RefObject<HTMLDivElement>;
     dispatchExternalPointerEvent(event: PointerEvent): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=chart.d.ts.map

package/dist/components/legend/label.js

@@ -26,26 +26,62 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = void 0;
+exports.NonInteractiveLabel = exports.Label = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const common_1 = require("../../utils/common");
-function Label({ label, isToggleable, onToggle, isSeriesHidden, options }) {
+const isAppleDevice = typeof window !== 'undefined' && /Mac|iPhone|iPad/.test(window.navigator.userAgent);
+const modifierKey = isAppleDevice ? '⌘ (Command)' : 'Ctrl';
+const isolateSeriesMessage = 'isolate series';
+const showAllSeriesMessage = 'show all series';
+const showSeriesMessage = 'show series';
+const hideSeriesMessage = 'hide series';
+function getInteractivityTitle(isSeriesVisible, hiddenSeries, allSeries) {
+    if (isSeriesVisible) {
+        if (allSeries - hiddenSeries === 1) {
+            return `
+Click: ${showAllSeriesMessage}
+${modifierKey} + click: ${hideSeriesMessage}`;
+        }
+        if (hiddenSeries > 0) {
+            return `
+Click: ${hideSeriesMessage}
+${modifierKey} + click: ${hideSeriesMessage}`;
+        }
+        return `
+Click: ${isolateSeriesMessage}
+${modifierKey} + click: ${hideSeriesMessage}`;
+    }
+    return `
+Click: ${showSeriesMessage}
+${modifierKey} + click: ${showSeriesMessage}`;
+}
+function Label({ label, onToggle, isToggleable, isSeriesHidden, options, hiddenSeriesCount, totalSeriesCount, }) {
+    const { className, dir, clampStyles } = getSharedProps(label, options, !!onToggle);
+    const onClick = (0, react_1.useCallback)(({ metaKey, ctrlKey }) => onToggle === null || onToggle === void 0 ? void 0 : onToggle(isAppleDevice ? metaKey : ctrlKey), [onToggle]);
+    const onKeyDown = (0, react_1.useCallback)(({ key, metaKey, ctrlKey }) => {
+        if (key === ' ' || key === 'Enter')
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(isAppleDevice ? metaKey : ctrlKey);
+    }, [onToggle]);
+    const title = options.maxLines > 0 ? label : '';
+    const interactionsGuidanceText = getInteractivityTitle(!isSeriesHidden, hiddenSeriesCount, totalSeriesCount);
+    return isToggleable ? (react_1.default.createElement("div", { role: "button", tabIndex: 0, dir: dir, className: className, title: `${title}${interactionsGuidanceText}`, onClick: onClick, onKeyDown: onKeyDown, "aria-pressed": isSeriesHidden, style: clampStyles, "aria-label": `${label}; ${interactionsGuidanceText.replace('\n', '')}` }, label)) : (react_1.default.createElement("div", { dir: dir, className: className, title: label, style: clampStyles }, label));
+}
+exports.Label = Label;
+function NonInteractiveLabel({ label, options }) {
+    const { className, dir, clampStyles } = getSharedProps(label, options);
+    return (react_1.default.createElement("div", { dir: dir, className: className, title: label, style: clampStyles }, label));
+}
+exports.NonInteractiveLabel = NonInteractiveLabel;
+function getSharedProps(label, options, isToggleable) {
     const maxLines = Math.abs(options.maxLines);
-    const labelClassNames = (0, classnames_1.default)('echLegendItem__label', {
-        'echLegendItem__label--clickable': Boolean(onToggle),
+    const className = (0, classnames_1.default)('echLegendItem__label', {
+        'echLegendItem__label--clickable': Boolean(isToggleable),
         'echLegendItem__label--singleline': maxLines === 1,
         'echLegendItem__label--multiline': maxLines > 1,
     });
-    const onClick = (0, react_1.useCallback)(({ shiftKey }) => onToggle === null || onToggle === void 0 ? void 0 : onToggle(shiftKey), [onToggle]);
-    const onKeyDown = (0, react_1.useCallback)(({ key, shiftKey }) => {
-        if (key === ' ' || key === 'Enter')
-            onToggle === null || onToggle === void 0 ? void 0 : onToggle(shiftKey);
-    }, [onToggle]);
     const dir = (0, common_1.isRTLString)(label) ? 'rtl' : 'ltr';
-    const title = options.maxLines > 0 ? label : '';
     const clampStyles = maxLines > 1 ? { WebkitLineClamp: maxLines } : {};
-    return isToggleable ? (react_1.default.createElement("div", { role: "button", tabIndex: 0, dir: dir, className: labelClassNames, title: title, onClick: onClick, onKeyDown: onKeyDown, "aria-pressed": isSeriesHidden, style: clampStyles, "aria-label": isSeriesHidden ? `${label}; Activate to show series in graph` : `${label}; Activate to hide series in graph` }, label)) : (react_1.default.createElement("div", { dir: dir, className: labelClassNames, title: label, style: clampStyles }, label));
+    return { className, dir, clampStyles };
 }
-exports.Label = Label;
 //# sourceMappingURL=label.js.map

package/dist/components/legend/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/components/legend/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,4DAAoC;AACpC,+CAAoF;AAEpF,+CAAiD;AAejD,SAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAc;IAC1F,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EAAE;QACzD,iCAAiC,EAAE,OAAO,CAAC,QAAQ,CAAC;QACpD,kCAAkC,EAAE,QAAQ,KAAK,CAAC;QAClD,iCAAiC,EAAE,QAAQ,GAAG,CAAC;KAChD,CAAC,CAAC;IAEH,MAAM,OAAO,GAAsB,IAAA,mBAAW,EAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnG,MAAM,SAAS,GAAyB,IAAA,mBAAW,EACjD,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;QACpB,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,OAAO;YAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,GAAG,GAAG,IAAA,oBAAW,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/C,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAChD,MAAM,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtE,OAAO,YAAY,CAAC,CAAC,CAAC,CAGpB,uCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,kBACN,cAAc,EAC5B,KAAK,EAAE,WAAW,gBAEhB,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,oCAAoC,CAAC,CAAC,CAAC,GAAG,KAAK,oCAAoC,IAG7G,KAAK,CACF,CACP,CAAC,CAAC,CAAC,CACF,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,IACxE,KAAK,CACF,CACP,CAAC;AACJ,CAAC;AA5CD,sBA4CC"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/components/legend/label.tsx"],"names":[],"mappings":"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"}

package/dist/components/legend/legend.js

@@ -1,20 +1,45 @@
 "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 = __importDefault(require("react"));
+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_item_1 = require("./legend_item");
+const legend_table_1 = require("./legend_table");
 const position_style_1 = require("./position_style");
 const style_utils_1 = require("./style_utils");
+const legend_1 = require("../../common/legend");
 const specs_1 = require("../../specs");
 const colors_1 = require("../../state/actions/colors");
-const legend_1 = require("../../state/actions/legend");
+const legend_2 = require("../../state/actions/legend");
 const get_chart_theme_1 = require("../../state/selectors/get_chart_theme");
 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");
@@ -30,6 +55,20 @@ const light_theme_1 = require("../../utils/themes/light_theme");
 function LegendComponent(props) {
     var _a;
     const { items, size, debug, isBrushing, chartTheme: { chartMargins, legend }, chartDimensions, containerDimensions, config, } = props;
+    const { onLegendItemOut, onLegendItemOver } = 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;
     }
@@ -51,23 +90,24 @@ function LegendComponent(props) {
         positionConfig,
         isMostlyRTL,
         totalItems: items.length,
+        hiddenItems: items.filter(({ isSeriesHidden }) => isSeriesHidden).length,
         extraValues: props.extraValues,
-        showExtra: config.showLegendExtra,
-        onMouseOut: config.onLegendItemOut,
-        onMouseOver: config.onLegendItemOver,
+        legendValues: config.legendValues,
+        onLegendItemMouseOver,
+        onLegendItemMouseOut,
         onClick: config.onLegendItemClick,
         clearTemporaryColorsAction: props.clearTemporaryColors,
         setPersistedColorAction: props.setPersistedColor,
         setTemporaryColorAction: props.setTemporaryColor,
-        mouseOutAction: props.onItemOutAction,
-        mouseOverAction: props.onItemOverAction,
         toggleDeselectSeriesAction: props.onToggleDeselectSeriesAction,
         colorPicker: config.legendColorPicker,
         action: config.legendAction,
         labelOptions: legend.labelOptions,
         flatLegend: (_a = config.flatLegend) !== null && _a !== void 0 ? _a : 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);
     return (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 }) => {
                 var _a, _b, _c;
@@ -76,17 +116,18 @@ function LegendComponent(props) {
                     seriesIdentifiers,
                     path,
                     extraValue: (_c = itemProps.extraValues.get((_b = (_a = seriesIdentifiers[0]) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.get(childId !== null && childId !== void 0 ? childId : ''),
-                    onItemOutAction: itemProps.mouseOutAction,
-                    onItemOverActon: () => itemProps.mouseOverAction(path),
+                    onItemOutAction,
+                    onItemOverActon: () => onItemOverAction(path),
                     onItemClickAction: (negate) => itemProps.toggleDeselectSeriesAction(seriesIdentifiers, negate),
                 });
-            }) }))) : (react_1.default.createElement("div", { style: containerStyle, className: "echLegendListContainer" },
+            }) }))) : 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 }))) : (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_item_1.LegendListItem, { key: `${index}`, item: item, ...itemProps }))))))));
 }
 const mapDispatchToProps = (dispatch) => (0, redux_1.bindActionCreators)({
-    onToggleDeselectSeriesAction: legend_1.onToggleDeselectSeriesAction,
-    onItemOutAction: legend_1.onLegendItemOutAction,
-    onItemOverAction: legend_1.onLegendItemOverAction,
+    onToggleDeselectSeriesAction: legend_2.onToggleDeselectSeriesAction,
+    onItemOutAction: legend_2.onLegendItemOutAction,
+    onItemOverAction: legend_2.onLegendItemOverAction,
     clearTemporaryColors: colors_1.clearTemporaryColors,
     setTemporaryColor: colors_1.setTemporaryColor,
     setPersistedColor: colors_1.setPersistedColor,

package/dist/components/legend/legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../../src/components/legend/legend.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../../src/components/legend/legend.tsx"],"names":[],"mappings":"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"}

package/dist/components/legend/legend_color_picker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=legend_color_picker.d.ts.map

package/dist/components/legend/legend_color_picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend_color_picker.d.ts","sourceRoot":"","sources":["../../../src/components/legend/legend_color_picker.tsx"],"names":[],"mappings":""}

package/dist/components/legend/legend_color_picker.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLegendColorPicker = void 0;
+const react_1 = __importDefault(require("react"));
+const color_1 = require("./color");
+const useLegendColorPicker = ({ item: { color, isSeriesHidden, label, pointStyle, seriesIdentifiers }, colorPicker: ColorPickerRenderer, clearTemporaryColorsAction, setTemporaryColorAction, setPersistedColorAction, }) => {
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
+    const colorRef = react_1.default.useRef(null);
+    const shouldClearPersistedColor = react_1.default.useRef(false);
+    const toggleIsOpen = () => {
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+    };
+    const handleColorClick = (changeable) => changeable
+        ? (event) => {
+            event.stopPropagation();
+            toggleIsOpen();
+        }
+        : undefined;
+    const handleColorPickerClose = () => {
+        const seriesKeys = seriesIdentifiers.map(({ key }) => key);
+        setPersistedColorAction(seriesKeys, shouldClearPersistedColor.current ? null : color);
+        clearTemporaryColorsAction();
+        requestAnimationFrame(() => { var _a; return (_a = colorRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+        toggleIsOpen();
+    };
+    const handleColorPickerChange = (c) => {
+        const seriesKeys = seriesIdentifiers.map(({ key }) => key);
+        shouldClearPersistedColor.current = c === null;
+        setTemporaryColorAction(seriesKeys, c);
+    };
+    const hasColorPicker = Boolean(ColorPickerRenderer);
+    const renderItemColor = () => (react_1.default.createElement(color_1.Color, { ref: colorRef, color: color, seriesName: label, isSeriesHidden: isSeriesHidden, hasColorPicker: hasColorPicker, onClick: handleColorClick(hasColorPicker), pointStyle: pointStyle }));
+    const renderColorPickerPopup = () => ColorPickerRenderer &&
+        isOpen &&
+        colorRef.current && (react_1.default.createElement(ColorPickerRenderer, { anchor: colorRef.current, color: color, onClose: handleColorPickerClose, onChange: handleColorPickerChange, seriesIdentifiers: seriesIdentifiers }));
+    return { renderItemColor, renderColorPickerPopup };
+};
+exports.useLegendColorPicker = useLegendColorPicker;
+//# sourceMappingURL=legend_color_picker.js.map

package/dist/components/legend/legend_color_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend_color_picker.js","sourceRoot":"","sources":["../../../src/components/legend/legend_color_picker.tsx"],"names":[],"mappings":";;;;;;AAQA,kDAA0B;AAE1B,mCAA6C;AAKtC,MAAM,oBAAoB,GAAG,CAAC,EACnC,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,EACrE,WAAW,EAAE,mBAAmB,EAChC,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,GACP,EAAE,EAAE;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,eAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEvD,MAAM,yBAAyB,GAAG,eAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,SAAS,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC;IACF,MAAM,gBAAgB,GAAG,CAAC,UAAmB,EAAE,EAAE,CAC/C,UAAU;QACR,CAAC,CAAC,CAAC,KAAuB,EAAE,EAAE;YAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,YAAY,EAAE,CAAC;QACjB,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,MAAM,UAAU,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;QAC3D,uBAAuB,CAAC,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACtF,0BAA0B,EAAE,CAAC;QAC7B,qBAAqB,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAC,CAAC;QACvD,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,CAAe,EAAE,EAAE;QAClD,MAAM,UAAU,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;QAC3D,yBAAyB,CAAC,OAAO,GAAG,CAAC,KAAK,IAAI,CAAC;QAC/C,uBAAuB,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAC5B,8BAAC,aAAS,IACR,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAClC,mBAAmB;QACnB,MAAM;QACN,QAAQ,CAAC,OAAO,IAAI,CAClB,8BAAC,mBAAmB,IAClB,MAAM,EAAE,QAAQ,CAAC,OAAO,EACxB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,sBAAsB,EAC/B,QAAQ,EAAE,uBAAuB,EACjC,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;IAEJ,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC;AACrD,CAAC,CAAC;AAhEW,QAAA,oBAAoB,wBAgE/B"}

package/dist/components/legend/legend_item.js

@@ -26,113 +26,62 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegendListItem = exports.LEGEND_HIERARCHY_MARGIN = void 0;
+exports.LegendListItem = exports.prepareLegendValues = exports.LEGEND_HIERARCHY_MARGIN = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
-const color_1 = require("./color");
-const extra_1 = require("./extra");
 const label_1 = require("./label");
+const legend_color_picker_1 = require("./legend_color_picker");
 const utils_1 = require("./utils");
+const legend_1 = require("../../common/legend");
 const common_1 = require("../../utils/common");
-const fast_deep_equal_1 = require("../../utils/fast_deep_equal");
 exports.LEGEND_HIERARCHY_MARGIN = 10;
-class LegendListItem extends react_1.Component {
-    constructor() {
-        super(...arguments);
-        this.shouldClearPersistedColor = false;
-        this.colorRef = (0, react_1.createRef)();
-        this.state = {
-            isOpen: false,
-            actionActive: false,
-        };
-        this.handleColorClick = (changeable) => changeable
-            ? (event) => {
-                event.stopPropagation();
-                this.toggleIsOpen();
-            }
-            : undefined;
-        this.toggleIsOpen = () => {
-            this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
-        };
-        this.onLegendItemMouseOver = () => {
-            const { onMouseOver, mouseOverAction, item } = this.props;
-            if (onMouseOver) {
-                onMouseOver(item.seriesIdentifiers);
-            }
-            mouseOverAction(item.path);
-        };
-        this.onLegendItemMouseOut = () => {
-            const { onMouseOut, mouseOutAction } = this.props;
-            if (onMouseOut) {
-                onMouseOut();
-            }
-            mouseOutAction();
-        };
-        this.onLabelToggle = (legendItemId) => {
-            const { item, onClick, toggleDeselectSeriesAction, totalItems } = this.props;
-            if (totalItems <= 1 || (!item.isToggleable && !onClick)) {
-                return;
-            }
-            return (negate) => {
-                if (onClick) {
-                    onClick(legendItemId);
-                }
-                if (item.isToggleable) {
-                    toggleDeselectSeriesAction(legendItemId, negate);
-                }
-            };
-        };
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        return !(0, fast_deep_equal_1.deepEqual)(this.props, nextProps) || !(0, fast_deep_equal_1.deepEqual)(this.state, nextState);
-    }
-    renderColorPicker() {
-        const { colorPicker: ColorPicker, item, clearTemporaryColorsAction, setTemporaryColorAction, setPersistedColorAction, } = this.props;
-        const { seriesIdentifiers, color } = item;
-        const seriesKeys = seriesIdentifiers.map(({ key }) => key);
-        const handleClose = () => {
-            setPersistedColorAction(seriesKeys, this.shouldClearPersistedColor ? null : color);
-            clearTemporaryColorsAction();
-            requestAnimationFrame(() => { var _a, _b; return (_b = (_a = this.colorRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); });
-            this.toggleIsOpen();
-        };
-        const handleChange = (c) => {
-            this.shouldClearPersistedColor = c === null;
-            setTemporaryColorAction(seriesKeys, c);
+const prepareLegendValues = (item, legendValues, totalItems, extraValues) => {
+    return legendValues.map((legendValue) => {
+        if (legendValue === legend_1.LegendValue.Value || legendValue === legend_1.LegendValue.CurrentAndLastValue) {
+            return (0, utils_1.getExtra)(extraValues, item, totalItems);
+        }
+        return item.values.find(({ type }) => type === legendValue);
+    });
+};
+exports.prepareLegendValues = prepareLegendValues;
+const LegendListItem = (props) => {
+    const { extraValues, item, legendValues, totalItems, action: Action, positionConfig, labelOptions, isMostlyRTL, flatLegend, onClick, toggleDeselectSeriesAction, hiddenItems, onLegendItemMouseOver, onLegendItemMouseOut, } = props;
+    const { color, isSeriesHidden, isItemHidden, seriesIdentifiers, label, depth, path, isToggleable } = item;
+    const itemClassNames = (0, classnames_1.default)('echLegendItem', {
+        'echLegendItem--hidden': isSeriesHidden,
+        'echLegendItem--vertical': positionConfig.direction === common_1.LayoutDirection.Vertical,
+    });
+    const legendValueItems = (0, exports.prepareLegendValues)(item, legendValues, totalItems, extraValues).filter(common_1.isDefined);
+    const style = flatLegend
+        ? {}
+        : {
+            [isMostlyRTL ? 'marginRight' : 'marginLeft']: exports.LEGEND_HIERARCHY_MARGIN * (depth !== null && depth !== void 0 ? depth : 0),
         };
-        if (ColorPicker && this.state.isOpen && this.colorRef.current) {
-            return (react_1.default.createElement(ColorPicker, { anchor: this.colorRef.current, color: color, onClose: handleClose, onChange: handleChange, seriesIdentifiers: seriesIdentifiers }));
+    const onLabelToggle = (0, react_1.useCallback)((legendItemId) => (negate) => {
+        if (totalItems <= 1 || (!isToggleable && !onClick)) {
+            return;
         }
-    }
-    render() {
-        var _a;
-        const { extraValues, item, showExtra, colorPicker, totalItems, action: Action, positionConfig, labelOptions, isMostlyRTL, flatLegend, } = this.props;
-        const { color, isSeriesHidden, isItemHidden, seriesIdentifiers, label, pointStyle } = item;
-        if (isItemHidden)
-            return null;
-        const itemClassNames = (0, classnames_1.default)('echLegendItem', {
-            'echLegendItem--hidden': isSeriesHidden,
-            'echLegendItem--vertical': positionConfig.direction === common_1.LayoutDirection.Vertical,
-        });
-        const hasColorPicker = Boolean(colorPicker);
-        const extra = showExtra ? (0, utils_1.getExtra)(extraValues, item, totalItems) : null;
-        const style = flatLegend
-            ? {}
-            : {
-                [isMostlyRTL ? 'marginRight' : 'marginLeft']: exports.LEGEND_HIERARCHY_MARGIN * ((_a = item.depth) !== null && _a !== void 0 ? _a : 0),
-            };
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("li", { className: itemClassNames, onMouseEnter: this.onLegendItemMouseOver, onMouseLeave: this.onLegendItemMouseOut, style: style, dir: isMostlyRTL ? 'rtl' : 'ltr', "data-ech-series-name": label },
-                react_1.default.createElement("div", { className: "background" }),
-                react_1.default.createElement("div", { className: "colorWrapper" },
-                    react_1.default.createElement(color_1.Color, { ref: this.colorRef, color: color, seriesName: label, isSeriesHidden: isSeriesHidden, hasColorPicker: hasColorPicker, onClick: this.handleColorClick(hasColorPicker), pointStyle: pointStyle })),
-                react_1.default.createElement(label_1.Label, { label: label, options: labelOptions, isToggleable: totalItems > 1 && item.isToggleable, onToggle: this.onLabelToggle(seriesIdentifiers), isSeriesHidden: isSeriesHidden }),
-                extra && !isSeriesHidden && (0, extra_1.renderExtra)(extra.formatted),
-                Action && (react_1.default.createElement("div", { className: "echLegendItem__action" },
-                    react_1.default.createElement(Action, { series: seriesIdentifiers, color: color, label: label })))),
-            this.renderColorPicker()));
-    }
-}
+        if (onClick) {
+            onClick(legendItemId);
+        }
+        if (isToggleable) {
+            toggleDeselectSeriesAction(legendItemId, negate);
+        }
+    }, [onClick, toggleDeselectSeriesAction, isToggleable, totalItems]);
+    const { renderItemColor, renderColorPickerPopup } = (0, legend_color_picker_1.useLegendColorPicker)(props);
+    if (isItemHidden)
+        return null;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("li", { className: itemClassNames, onMouseEnter: () => onLegendItemMouseOver(seriesIdentifiers, path), onMouseLeave: onLegendItemMouseOut, style: style, dir: isMostlyRTL ? 'rtl' : 'ltr', "data-ech-series-name": label },
+            react_1.default.createElement("div", { className: "background" }),
+            react_1.default.createElement("div", { className: "echLegend__colorWrapper" }, renderItemColor()),
+            react_1.default.createElement(label_1.Label, { label: label, options: labelOptions, isToggleable: totalItems > 1 && item.isToggleable, onToggle: onLabelToggle(seriesIdentifiers), isSeriesHidden: isSeriesHidden, totalSeriesCount: totalItems, hiddenSeriesCount: hiddenItems }),
+            !isSeriesHidden
+                ? legendValueItems.map((legendValueItem) => legendValueItem.label !== '' ? (react_1.default.createElement("div", { key: legendValueItem.label, className: "echLegendItem__legendValue" }, legendValueItem.label)) : null)
+                : null,
+            Action && (react_1.default.createElement("div", { className: "echLegendItem__action" },
+                react_1.default.createElement(Action, { series: seriesIdentifiers, color: color, label: label })))),
+        renderColorPickerPopup()));
+};
 exports.LegendListItem = LegendListItem;
-LegendListItem.displayName = 'LegendItem';
 //# sourceMappingURL=legend_item.js.map