Skip to content

Commit 5d32f23

Browse files
markov00markov00
authored
fix: group legend items by label and color (#999)
This commit fixes the duplicated legend elements when displaying small multiples. The legend item concept should allow the user to uniquely link a geometry color to a label. There are situations where multiple geometries or series are colored with the same color, like in a small multiple, and all of these series are related to the same metric for example. This PR removes any duplicate of the key color, label in the legend item, and introduce the ability to have multiple series referenced by the same legend item. BREAKING CHANGE: The `LegendActionProps` and the `LegendColorPickerProps`, used to add actions and color picker through the legend now receive an array of `SeriesIdentifiers`
1 parent a1abb85 commit 5d32f23

61 files changed

Lines changed: 607 additions & 1425 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.playground/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<style>
99
html,
1010
body {
11-
background: blanchedalmond !important;
11+
background: white !important;
1212
width: 100%;
1313
height: 100%;
1414
overflow: hidden;

‎.playground/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import React from 'react';
2222
import ReactDOM from 'react-dom';
2323

2424
import '../src/theme_light.scss';
25+
import '../node_modules/@elastic/eui/dist/eui_theme_light.css';
2526
import { Playground } from './playground';
2627

2728
ReactDOM.render(<Playground />, document.getElementById('root') as HTMLElement);

‎.playground/webpack.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ module.exports = {
3535
transpileOnly: true,
3636
},
3737
},
38+
{
39+
test: /\.css$/,
40+
use: [
41+
'style-loader',
42+
{
43+
loader: 'css-loader',
44+
options: { importLoaders: 1 },
45+
},
46+
],
47+
},
3848
{
3949
test: /\.scss$/,
4050
use: [

‎api/charts.api.md‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1207,7 +1207,7 @@ export type LegendAction = ComponentType<LegendActionProps>;
12071207
export interface LegendActionProps {
12081208
color: string;
12091209
label: string;
1210-
series: SeriesIdentifier;
1210+
series: SeriesIdentifier[];
12111211
}
12121212

12131213
// Warning: (ae-missing-release-tag) "LegendColorPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1223,13 +1223,13 @@ export interface LegendColorPickerProps {
12231223
color: Color;
12241224
onChange: (color: Color | null) => void;
12251225
onClose: () => void;
1226-
seriesIdentifier: SeriesIdentifier;
1226+
seriesIdentifiers: SeriesIdentifier[];
12271227
}
12281228

12291229
// Warning: (ae-missing-release-tag) "LegendItemListener" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
12301230
//
12311231
// @public (undocumented)
1232-
export type LegendItemListener = (series: SeriesIdentifier | null) => void;
1232+
export type LegendItemListener = (series: SeriesIdentifier[]) => void;
12331233

12341234
// @public (undocumented)
12351235
export type LegendPath = LegendPathElement[];
@@ -1778,6 +1778,11 @@ export type SeriesIdentifier = {
17781778
key: SeriesKey;
17791779
};
17801780

1781+
// Warning: (ae-missing-release-tag) "SeriesKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
1782+
//
1783+
// @public
1784+
export type SeriesKey = CategoryKey;
1785+
17811786
// @public (undocumented)
17821787
export type SeriesName = string | number | null;
17831788

@@ -2163,6 +2168,11 @@ export type TickStyle = StrokeStyle & Visible & {
21632168
// @public (undocumented)
21642169
export function timeFormatter(format: string): TickFormatter;
21652170

2171+
// Warning: (ae-missing-release-tag) "toEntries" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
2172+
//
2173+
// @public
2174+
export function toEntries<T extends Record<string, string>, S>(array: T[], accessor: keyof T, staticValue: S): Record<string, S>;
2175+
21662176
// @public
21672177
export interface TooltipInfo {
21682178
header: TooltipValue | null;
@@ -2348,7 +2358,6 @@ export type YDomainRange = YDomainBase & DomainRange;
23482358
// src/chart_types/heatmap/layout/types/config_types.ts:62:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
23492359
// src/chart_types/partition_chart/layout/types/config_types.ts:130:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
23502360
// src/chart_types/partition_chart/layout/types/config_types.ts:131:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
2351-
// src/common/series_id.ts:40:3 - (ae-forgotten-export) The symbol "SeriesKey" needs to be exported by the entry point index.d.ts
23522361

23532362
// (No @packageDocumentation comment for this package)
23542363

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-grid-lines-visually-looks-correct-1-snap.png‎

1.15 KB
Loading

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-heterogeneous-visually-looks-correct-1-snap.png‎

8.1 KB
Loading

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png‎

6.95 KB
Loading

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-horizontal-bars-visually-looks-correct-1-snap.png‎

11.5 KB
Loading

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-horizontal-bars-visually-looks-correct-2-snap.png‎

26.4 KB
Loading

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-vertical-areas-visually-looks-correct-1-snap.png‎

-360 Bytes
Loading

0 commit comments

Comments
 (0)