add checkbox to display or not ALL/INV button

apache · Feb 21, 2025 · 7ace9b2 · 7ace9b2
1 parent 093135f
commit 7ace9b2
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 3 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/controlPanel.tsx
@@ -31,7 +31,7 @@ import {
   D3_FORMAT_DOCS,
   D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
 } from '@superset-ui/chart-controls';
-import { showLegendControl, showValueControl } from '../controls';
+import { showLegendControl, showLegendToggleControl, showValueControl } from '../controls';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -114,6 +114,7 @@ const config: ControlPanelConfig = {
         ['color_scheme'],
         [showValueControl],
         [showLegendControl],
+        [showLegendToggleControl],
         [
           {
             name: 'x_axis_title',
@@ -172,3 +173,4 @@ const config: ControlPanelConfig = {
 };
 
 export default config;
+console.log('✅ controlPanel.tsx is loaded! Test');
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts
@@ -57,6 +57,7 @@ export default function transformProps(
     groupby = [],
     normalize,
     showLegend,
+    showLegendToggle,
     showValue,
     sliceId,
     xAxisFormat,
@@ -152,6 +153,8 @@ export default function transformProps(
 
   type EChartsOption = ComposeOption<GridComponentOption | BarSeriesOption>;
 
+  console.log('🚀 DEBUG transformProps.ts - Avant envoi à getLegendProps:', { showLegend, showLegendToggle });
+
   const echartOptions: EChartsOption = {
     grid: {
       ...defaultGrid,
@@ -186,6 +189,8 @@ export default function transformProps(
         theme,
         false,
         legendState,
+        undefined,
+        showLegendToggle,
       ),
       data: legendOptions,
     },
@@ -195,7 +200,7 @@ export default function transformProps(
       formatter: tooltipFormatter,
     },
   };
-
+  console.log('🚀 transformProps.ts - Après envoi à getLegendProps:', { showLegend, showLegendToggle });
   return {
     refs,
     formData,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/types.ts
@@ -32,6 +32,7 @@ export type HistogramFormData = QueryFormData & {
   xAxisTitle: string;
   yAxisFormat: string;
   yAxisTitle: string;
+  showLegendToggle: boolean; // ✅ Ajout de l'option ici
 };
 
 export interface HistogramChartProps extends BaseChartProps<HistogramFormData> {

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
@@ -139,6 +139,8 @@ function Echart(
       chartRef.current?.getZr().on(name, handler);
     });
 
+    console.log('Test Echart options:', echartOptions.legend);
+
     chartRef.current.setOption(echartOptions, true);
   }, [echartOptions, eventHandlers, zrEventHandlers]);
 

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -44,6 +44,18 @@ export const showLegendControl: ControlSetItem = {
   },
 };
 
+export const showLegendToggleControl: ControlSetItem = {
+  name: 'show_legend_toggle',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Show All/Invert buttons in legend'),
+    renderTrigger: true,
+    default: true,  // ✅ Par défaut, les boutons sont affichés
+    description: t('Toggle to show/hide the "All/Invert" buttons in the legend.'),
+    visibility: ({ controls }: ControlPanelsContainerProps) =>
+      Boolean(controls?.show_legend?.value),  // ✅ S'affiche seulement si la légende est activée
+  },
+};
 const legendMarginControl: ControlSetItem = {
   name: 'legendMargin',
   config: {

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
@@ -426,7 +426,9 @@ export function getLegendProps(
   zoomable = false,
   legendState?: LegendState,
   padding?: LegendPaddingType,
+  showLegendToggle?: boolean,  // ✅ Ajout de l'option ici
 ): LegendComponentOption | LegendComponentOption[] {
+  console.log('📌 LEGEND PROPS:', { show, showLegendToggle });
   const legend: LegendComponentOption | LegendComponentOption[] = {
     orient: [LegendOrientation.Top, LegendOrientation.Bottom].includes(
       orientation,
@@ -436,7 +438,7 @@ export function getLegendProps(
     show,
     type,
     selected: legendState,
-    selector: ['all', 'inverse'],
+    selector: showLegendToggle === false ? [] : ['all', 'inverse'],  // ✅ Activation conditionnelle
     selectorLabel: {
       fontFamily: theme.typography.families.sansSerif,
       fontSize: theme.typography.sizes.s,