lens-chart-settings

Name: lens-chart-settings
Author: elastic

71stars10forks

How to install lens-chart-settings?

elastic/elastic-docs-skills/lens-chart-settings

$npx -y skills add elastic/elastic-docs-skills --skill lens-chart-settings

Installs into the current project.

Summary

Verify Kibana Lens chart UI settings against the source code. Use when documenting chart types, reviewing chart settings accuracy, or checking UI labels and rendering order for Lens visualizations (bar, line, area, pie, treemap, mosaic, waffle, tag cloud, heat map, gauge, metric,

Files · 1

View on GitHub

SKILL.md

1	<!-- Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
2	or more contributor license agreements. See the NOTICE file distributed with
3	this work for additional information regarding copyright
4	ownership. Elasticsearch B.V. licenses this file to you under
5	the Apache License, Version 2.0 (the "License"); you may
6	not use this file except in compliance with the License.
7	You may obtain a copy of the License at
8
9	http://www.apache.org/licenses/LICENSE-2.0
10
11	Unless required by applicable law or agreed to in writing,
12	software distributed under the License is distributed on an
13	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14	KIND, either express or implied. See the License for the
15	specific language governing permissions and limitations
16	under the License. -->
17
18	# Verifying Kibana Lens Chart Settings from Source Code
19
20	When documenting Lens chart settings, always verify labels, options, and rendering order against the Kibana source code. Do NOT guess UI labels.
21
22	## Key Principles
23
24	1. UI labels come from i18n `defaultMessage` strings — always extract the exact label.
25	2. Rendering order in JSX = rendering order in the UI — document settings in the same order they appear in the component tree.
26	3. Conditional rendering is everywhere — many settings only appear under specific conditions (chart type, selected options, number of dimensions). Trace the conditions.
27	4. Shared components are parameterized per chart — the same `LegendSettings` component behaves differently for treemaps vs waffle vs pie based on props.
28
29	## Source Code Layout
30
31	### Partition charts (pie, donut, treemap, mosaic, waffle)
32
33	All partition-type charts share code under:
34
35	```
36	x-pack/platform/plugins/shared/lens/public/visualizations/partition/
37	├── partition_charts_meta.ts # Per-chart config (toolbar options, legend config)
38	├── toolbar/
39	│ ├── style_settings.tsx # Orchestrates Style panel sections
40	│ ├── titles_and_text_settings.tsx # Slice labels + Slice values options
41	│ ├── appearance_settings.tsx # Donut hole (pie/donut only)
42	│ └── legend_settings.tsx # Partition-specific legend wrapper
43	```
44
45	Shared legend component:
46
47	```
48	x-pack/platform/plugins/shared/lens/public/shared_components/legend/
49	├── legend_settings.tsx # Main legend settings (Visibility, Size, Truncation, Nested, Stats)
50	├── location/legend_location_settings.tsx # Position (only when `location` prop is defined)
51	└── size/legend_size_settings.tsx # Width/Size dropdown
52	```
53
54	### Other chart types
55
56	Each chart type has its own directory under `visualizations/`:
57	- `visualizations/xy/` for bar, line, area
58	- `visualizations/heatmap/`
59	- `visualizations/gauge/`
60	- `visualizations/metric/`
61	- `visualizations/tagcloud/`
62
63	## Verification Workflow
64
65	### Step 1: Find the chart metadata
66
67	For partition charts, start with `partition_charts_meta.ts`. This file defines per-chart:
68	- `toolbar.categoryOptions` — Slice labels options (or empty array if none)
69	- `toolbar.numberOptions` — Slice values options (or empty array if none)
70	- `toolbar.emptySizeRatioOptions` — Donut hole options (pie/donut only)
71	- `toolbar.isDisabled` — Whether the Style panel is disabled entirely (waffle)
72	- `legend.defaultLegendStats` — Enables Statistics/Show value in legend (waffle only)
73	- `legend.hideNestedLegendSwitch` — Hides the Nested toggle (waffle)
74	- `legend.getShowLegendDefault` — Default legend visibility behavior for Auto mode
75	- `maxBuckets` — Maximum Group by dimensions
76
77	### Step 2: Trace the Style settings
78
79	Read `toolbar/style_settings.tsx` to understand the Style panel structure:
80
81	- If `emptySizeRatioOptions` exists → renders Appearance accordion + Titles and text accordion
82	- If not → renders only `PartitionTitlesAndTextSettings` directly (no sub-headers)
83
84	Then read `toolbar/titles_and_text_settings.tsx`:
85	- `categoryOptions` renders as the first button group (label: check i18n key `xpack.lens.pieChart.labelSliceLabels`)
86	- `numberOptions` renders as the second button group (label: check i18n key `xpack.lens.pieChart.sliceValues`)
87	- If `numberDisplay === 'percent'`, a Decimal places input appears
88
89	If `categoryOptions` is empty, the first button group is hidden. If `numberOptions` is empty, the second button group is hidden. If `isDisabled` is true, the entire section is disabled/hidden.
90
91	### Step 3: Trace the Legend settings
92
93	Read `toolbar/legend_settings.tsx` (partition wrapper) to see what pr

People who liked this also viewed

6 picks

Type

lens-chart-settings

71stars10forks

View on GitHub

How to install lens-chart-settings?

elastic/elastic-docs-skills/lens-chart-settings

$npx -y skills add elastic/elastic-docs-skills --skill lens-chart-settings

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
2	or more contributor license agreements. See the NOTICE file distributed with
3	this work for additional information regarding copyright
4	ownership. Elasticsearch B.V. licenses this file to you under
5	the Apache License, Version 2.0 (the "License"); you may
6	not use this file except in compliance with the License.
7	You may obtain a copy of the License at
8
9	http://www.apache.org/licenses/LICENSE-2.0
10
11	Unless required by applicable law or agreed to in writing,
12	software distributed under the License is distributed on an
13	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14	KIND, either express or implied. See the License for the
15	specific language governing permissions and limitations
16	under the License. -->
17
18	# Verifying Kibana Lens Chart Settings from Source Code
19
20	When documenting Lens chart settings, always verify labels, options, and rendering order against the Kibana source code. Do NOT guess UI labels.
21
22	## Key Principles
23
24	1. UI labels come from i18n `defaultMessage` strings — always extract the exact label.
25	2. Rendering order in JSX = rendering order in the UI — document settings in the same order they appear in the component tree.
26	3. Conditional rendering is everywhere — many settings only appear under specific conditions (chart type, selected options, number of dimensions). Trace the conditions.
27	4. Shared components are parameterized per chart — the same `LegendSettings` component behaves differently for treemaps vs waffle vs pie based on props.
28
29	## Source Code Layout
30
31	### Partition charts (pie, donut, treemap, mosaic, waffle)
32
33	All partition-type charts share code under:
34
35	```
36	x-pack/platform/plugins/shared/lens/public/visualizations/partition/
37	├── partition_charts_meta.ts # Per-chart config (toolbar options, legend config)
38	├── toolbar/
39	│ ├── style_settings.tsx # Orchestrates Style panel sections
40	│ ├── titles_and_text_settings.tsx # Slice labels + Slice values options
41	│ ├── appearance_settings.tsx # Donut hole (pie/donut only)
42	│ └── legend_settings.tsx # Partition-specific legend wrapper
43	```
44
45	Shared legend component:
46
47	```
48	x-pack/platform/plugins/shared/lens/public/shared_components/legend/
49	├── legend_settings.tsx # Main legend settings (Visibility, Size, Truncation, Nested, Stats)
50	├── location/legend_location_settings.tsx # Position (only when `location` prop is defined)
51	└── size/legend_size_settings.tsx # Width/Size dropdown
52	```
53
54	### Other chart types
55
56	Each chart type has its own directory under `visualizations/`:
57	- `visualizations/xy/` for bar, line, area
58	- `visualizations/heatmap/`
59	- `visualizations/gauge/`
60	- `visualizations/metric/`
61	- `visualizations/tagcloud/`
62
63	## Verification Workflow
64
65	### Step 1: Find the chart metadata
66
67	For partition charts, start with `partition_charts_meta.ts`. This file defines per-chart:
68	- `toolbar.categoryOptions` — Slice labels options (or empty array if none)
69	- `toolbar.numberOptions` — Slice values options (or empty array if none)
70	- `toolbar.emptySizeRatioOptions` — Donut hole options (pie/donut only)
71	- `toolbar.isDisabled` — Whether the Style panel is disabled entirely (waffle)
72	- `legend.defaultLegendStats` — Enables Statistics/Show value in legend (waffle only)
73	- `legend.hideNestedLegendSwitch` — Hides the Nested toggle (waffle)
74	- `legend.getShowLegendDefault` — Default legend visibility behavior for Auto mode
75	- `maxBuckets` — Maximum Group by dimensions
76
77	### Step 2: Trace the Style settings
78
79	Read `toolbar/style_settings.tsx` to understand the Style panel structure:
80
81	- If `emptySizeRatioOptions` exists → renders Appearance accordion + Titles and text accordion
82	- If not → renders only `PartitionTitlesAndTextSettings` directly (no sub-headers)
83
84	Then read `toolbar/titles_and_text_settings.tsx`:
85	- `categoryOptions` renders as the first button group (label: check i18n key `xpack.lens.pieChart.labelSliceLabels`)
86	- `numberOptions` renders as the second button group (label: check i18n key `xpack.lens.pieChart.sliceValues`)
87	- If `numberDisplay === 'percent'`, a Decimal places input appears
88
89	If `categoryOptions` is empty, the first button group is hidden. If `numberOptions` is empty, the second button group is hidden. If `isDisabled` is true, the entire section is disabled/hidden.
90
91	### Step 3: Trace the Legend settings
92
93	Read `toolbar/legend_settings.tsx` (partition wrapper) to see what pr

People who liked this also viewed

6 picks

Type