legend order for mixed charts.

[sunilreddy0720]

Guys,

suppose i have a Time series mixed chart.

and my legend order is

i want my legend order to be Year1 year2 year3 year4+ Rolling 4 week average.

is there any option that can we alert this legend order ?

[dosubot[bot]]

Hello @sunilreddy0720! I'm here to help with any bugs, questions, or contributions you have. Let me know how I can assist you!

Yes, you can alter the legend order in a time series mixed chart. You can customize the legend order by modifying the legend property in the echartOptions object within the transformProps function. Here is an example of how you can set the legend order to: "Year 1", "Year 2", "Year 3", "Year 4+", and "Rolling 4 week average":

const echartOptions: EChartsCoreOption = {
  // ... other properties
  legend: {
    // ... other legend properties
    data: ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"],
  },
  // ... other properties
};

This will ensure that the legend items are displayed in the specified order ^[1].

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hello
can we achieve this on a generic level using a setting option.

i have lot of charts, but how can we specifically apply this rule for particular chart

const echartOptions: EChartsCoreOption = {
// ... other properties
legend: {
// ... other legend properties
data: ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"],
},
// ... other properties
};

[dosubot[bot]]

To customize the legend order for a specific time series mixed chart using a setting option, you can use the legend configuration within the echartOptions object. This allows you to specify the order of the legend items directly. Here is how you can achieve this:

1. Add a Control for Legend Order: Modify the control panel configuration to include a control for setting the legend order.

import { t } from '@superset-ui/core';
import { ControlPanelConfig, ControlSubSectionHeader } from '@superset-ui/chart-controls';
import { legendSection } from '../controls';

const customLegendSection = [
  [<ControlSubSectionHeader>{t('Legend')}</ControlSubSectionHeader>],
  [
    {
      name: 'legend_order',
      config: {
        type: 'SelectControl',
        label: t('Legend Order'),
        renderTrigger: true,
        choices: [
          ['default', t('Default')],
          ['reverse', t('Reverse')],
          ['custom', t('Custom')],
        ],
        default: 'default',
        description: t('Order of the legend items'),
      },
    },
  ],
  // Add more controls if needed
];

const config: ControlPanelConfig = {
  controlPanelSections: [
    {
      label: t('Shared query fields'),
      expanded: true,
      controlSetRows: [['x_axis'], ['time_grain_sqla']],
    },
    // Other sections...
    {
      label: t('Chart Options'),
      expanded: true,
      controlSetRows: [
        ['color_scheme'],
        // Other controls...
        ...customLegendSection,
        // Other controls...
      ],
    },
  ],
  // Other configurations...
};

export default config;

2. Use the Legend Order in transformProps: Modify the transformProps function to apply the legend order based on the control value.

import { EChartsCoreOption } from 'echarts';
import { EchartsMixedTimeseriesProps, EchartsMixedTimeseriesChartTransformedProps } from './types';
import { getLegendProps } from '../utils/series';

export default function transformProps(
  chartProps: EchartsMixedTimeseriesProps,
): EchartsMixedTimeseriesChartTransformedProps {
  const {
    width,
    height,
    formData,
    queriesData,
    hooks,
    filterState,
    datasource,
    theme,
    inContextMenu,
    emitCrossFilters,
  } = chartProps;

  const {
    legend_order: legendOrder,
    // other formData properties...
  } = formData;

  const rawSeriesA = extractSeries(queriesData[0].data);
  const rawSeriesB = extractSeries(queriesData[1].data);

  const echartOptions: EChartsCoreOption = {
    // other echart options...
    legend: {
      ...getLegendProps(
        formData.legendType,
        formData.legendOrientation,
        formData.showLegend,
        theme,
        formData.zoomable,
      ),
      data: rawSeriesA.concat(rawSeriesB).map(entry => entry.name || ''),
      // Apply custom legend order
      formatter: (name) => {
        if (legendOrder === 'reverse') {
          return rawSeriesA.concat(rawSeriesB).reverse().map(entry => entry.name || '');
        }
        // Add custom logic for 'custom' order if needed
        return name;
      },
    },
    series: dedupSeries(series),
    // other echart options...
  };

  return {
    formData,
    width,
    height,
    echartOptions,
    setDataMask: hooks.setDataMask,
    emitCrossFilters,
    labelMap: queriesData[0].label_map,
    labelMapB: queriesData[1].label_map,
    groupby: formData.groupby,
    groupbyB: formData.groupbyB,
    seriesBreakdown: rawSeriesA.length,
    selectedValues: filterState.selectedValues || [],
    onContextMenu: hooks.onContextMenu,
    onFocusedSeries: (seriesName: string | null) => {
      focusedSeries = seriesName;
    },
    xValueFormatter: tooltipFormatter,
    xAxis: {
      label: xAxisLabel,
      type: xAxisType,
    },
    refs,
    coltypeMapping,
  };
}

This approach allows you to set the legend order for specific charts using a control in the chart's configuration panel ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi dosu

can we achieve this in a generic way apart from code change.

[dosubot[bot]]

Yes, you can achieve this in a generic way using the existing controls in Superset without modifying the code. Specifically, you can use the sortSeriesType and sortSeriesAscending controls in the seriesOrderSection to sort the series on the chart and legend based on specified criteria.

Here is how you can configure these controls:

1. Sort Series By: This control allows you to specify the criteria for sorting the series.
2. Sort Series Ascending: This control allows you to specify whether the series should be sorted in ascending order.

Here is the relevant configuration:

const sortSeriesType: ControlSetItem = {
  name: 'sort_series_type',
  config: {
    type: 'SelectControl',
    freeForm: false,
    label: t('Sort Series By'),
    choices: SORT_SERIES_CHOICES,
    default: DEFAULT_SORT_SERIES_DATA.sort_series_type,
    renderTrigger: true,
    description: t('Based on what should series be ordered on the chart and legend'),
  },
};

const sortSeriesAscending: ControlSetItem = {
  name: 'sort_series_ascending',
  config: {
    type: 'CheckboxControl',
    label: t('Sort Series Ascending'),
    default: DEFAULT_SORT_SERIES_DATA.sort_series_ascending,
    renderTrigger: true,
    description: t('Sort series in ascending order'),
  },
};

export const seriesOrderSection: ControlSetRow[] = [
  [<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
  [sortSeriesType],
  [sortSeriesAscending],
];

By using these controls, you can manage the order of the legend items for your charts without needing to make code changes ^[1].

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi
can we achieve this in dashboard level
edit dashboard--->edit properties---> advanced ?

[dosubot[bot]]

Yes, you can customize the legend order for a time series mixed chart at the dashboard level using the "Edit Dashboard" -> "Edit Properties" -> "Advanced" settings. Here are the steps:

1. Open the dashboard in edit mode.
2. Open the properties modal.
3. Navigate to the advanced properties section.
4. Modify the JSON metadata to set the legend order.

Here is the JSON metadata you need to add to set the legend order to "Year 1", "Year 2", "Year 3", "Year 4+", and "Rolling 4 week average":

{
  "legend_order": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"]
}

Steps in Detail:

1. Edit Dashboard:

   function editDashboard() {
     cy.getBySel('edit-dashboard-button').click();
   }

2. Open Properties:

   function openProperties() {
     cy.get('body').then($body => {
       if ($body.find('[data-test="properties-modal-cancel-button"]').length) {
         closeModal();
       }
       cy.getBySel('actions-trigger').click({ force: true });
       cy.getBySel('header-actions-menu')
         .contains('Edit properties')
         .click({ force: true });
       cy.wait(500);
     });
   }

3. Open Advanced Properties:

   function openAdvancedProperties() {
     cy.get('.ant-modal-body')
       .contains('Advanced')
       .should('be.visible')
       .click({ force: true });
   }

4. Write Metadata:

   function writeMetadata(metadata: string) {
     cy.get('#json_metadata').then($jsonmetadata =>
       cy
         .wrap($jsonmetadata)
         .find('.ace_text-input')
         .type(metadata, { parseSpecialCharSequences: false, force: true }),
     );
   }

5. Apply and Save Changes:

   function applyChanges() {
     cy.getBySel('properties-modal-apply-button').click({ force: true });
   }
   
   function saveChanges() {
     interceptUpdate();
     cy.getBySel('header-save-button').click({ force: true });
     cy.wait('@update');
   }

Example Usage:

describe('Customize Legend Order', () => {
  it('should set custom legend order', () => {
    visitEdit(SAMPLE_DASHBOARD_1);
    openProperties();
    openAdvancedProperties();
    writeMetadata('{"legend_order":["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"]}');
    applyChanges();
    saveChanges();
  });
});

This will set the legend order for the specified chart without modifying the code directly ^[1].

To continue talking to Dosu, mention @dosu.

[sunilreddy0720]

Hi
How to keep this
{
"legend_order": ["Year 1", "Year 2", "Year 3", "Year 4+", "Rolling 4 week average"]
}
in json metadata for a specific chart

[dosubot[bot]]

To set the legend order for a specific chart using JSON metadata, you can use the sort_series_type and sort_series_ascending controls. These controls allow you to specify the criteria for sorting the series in the chart and legend.

Here is an example of how you can configure these settings in your JSON metadata:

{
  "controls": {
    "sort_series_type": "alphabetical",  // or any other choice from SORT_SERIES_CHOICES
    "sort_series_ascending": true  // or false, depending on the desired order
  }
}

In this configuration:

• sort_series_type specifies the criteria for sorting the series (e.g., alphabetical, by metric, etc.).
• sort_series_ascending specifies whether the sorting should be in ascending order (true) or descending order (false).

These settings will ensure that the legend order is set according to your specified criteria ^[1][2].

To continue talking to Dosu, mention @dosu.