Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Legend Select and Hide Not Working in Partition Chart #2468

Open
mageshsankar opened this issue Jun 18, 2024 · 2 comments
Open

Legend Select and Hide Not Working in Partition Chart #2468

mageshsankar opened this issue Jun 18, 2024 · 2 comments
Assignees
Labels
enhancement New feature or request :legend Legend related issue :partition Partition/PieChart/Donut/Sunburst/Treemap chart related

Comments

@mageshsankar
Copy link

mageshsankar commented Jun 18, 2024

Legend Select and Hide Not Working in Partition Chart

Description:

When using the @elastic/charts library, I encountered an issue where the legend select and hide functionality is not working correctly in a partition chart. Specifically, the legend items are displayed, but clicking on them does not hide or show the corresponding segments in the chart.

Steps to Reproduce:

Create a partition chart using the @elastic/charts library.
Add a legend to the chart using the Settings component.
Observe that clicking on legend items does not affect the visibility of chart segments.
Expected Behavior:
Clicking on a legend item should toggle the visibility of the corresponding segment in the partition chart.

Actual Behavior:
Clicking on a legend item does nothing; the chart segments remain visible regardless of the legend item state.

Code Example:

`import React from "react";
import { Chart, Partition, Settings } from "@elastic/charts";

export default function App() {
  return (
    <div className="App">
      <Chart size={["100%", 500]}>
        <Settings
          showLegend
          legendSort={(...args) => {
            console.log(args);
            return 0;
          }}
        />
        <Partition
          id="spec_1"
          data={[
            { cat1: "A", cat2: "A", val: 1 },
            { cat1: "A", cat2: "B", val: 1 },
            { cat1: "B", cat2: "A", val: 1 },
            { cat1: "B", cat2: "B", val: 1 },
            { cat1: "C", cat2: "A", val: 1 },
            { cat1: "C", cat2: "B", val: 1 }
          ]}
          valueAccessor={(d) => d.val}
          layers={[
            {
              groupByRollup: (d: { cat1: string; cat2: string; val: number }) =>
                d.cat1
            }
          ]}
        />
      </Chart>
    </div>
  );
}`

Environment Details

Kibana Version: 8.12.0
Elastic Charts Version: As included in Kibana 8.12.0
Browser: All supported browsers
OS: Linux

Current Screenshot :
image

Expected Screenshot
image

@mageshsankar mageshsankar added the bug Something isn't working label Jun 18, 2024
@mageshsankar
Copy link
Author

@nickofthyme Can you look into this

@nickofthyme
Copy link
Collaborator

@mageshsankar This has not been supported since the Partition spec was added year ago. I agree it is strange to have a different legend behavior between chart types.

I will see if this is a quick feature to add given most of the necessary logic is in place from the other chart types.

@nickofthyme nickofthyme added enhancement New feature or request :legend Legend related issue :partition Partition/PieChart/Donut/Sunburst/Treemap chart related and removed bug Something isn't working labels Jun 21, 2024
@nickofthyme nickofthyme self-assigned this Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request :legend Legend related issue :partition Partition/PieChart/Donut/Sunburst/Treemap chart related
Projects
None yet
Development

No branches or pull requests

2 participants