fix(Highcharts plugin): fix optional id usage for series identifier (#…

…125) Co-authored-by: Flunt1k <[email protected]>
gravity-ui · Feb 10, 2023 · f08b414 · f08b414
1 parent a64c4c2
commit f08b414
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/plugins/highcharts/__stories__/mocks/combo-chart-with-same-legend-titles.ts b/src/plugins/highcharts/__stories__/mocks/combo-chart-with-same-legend-titles.ts
@@ -4,6 +4,7 @@ export const data: HighchartsWidgetData = {
     data: {
         graphs: [
             {
+                id: 'uniq-1',
                 title: 'Office Supplies',
                 tooltip: {
                     chartKitFormatting: true,
@@ -92,6 +93,7 @@ export const data: HighchartsWidgetData = {
                 type: 'line',
             },
             {
+                id: 'uniq-2',
                 title: 'Technology',
                 tooltip: {
                     chartKitFormatting: true,
@@ -138,6 +140,7 @@ export const data: HighchartsWidgetData = {
                 type: 'line',
             },
             {
+                id: 'uniq-3',
                 title: 'Furniture',
                 tooltip: {
                     chartKitFormatting: true,
@@ -198,6 +201,7 @@ export const data: HighchartsWidgetData = {
                 type: 'line',
             },
             {
+                id: 'uniq-4',
                 title: 'Furniture',
                 tooltip: {
                     chartKitFormatting: true,
@@ -258,6 +262,7 @@ export const data: HighchartsWidgetData = {
                 stack: 'c44bfc70-a7a5-11ed-96a0-9bb7dddec993__',
             },
             {
+                id: 'uniq-5',
                 title: 'Office Supplies',
                 tooltip: {
                     chartKitFormatting: true,
@@ -346,6 +351,7 @@ export const data: HighchartsWidgetData = {
                 stack: 'c44bfc70-a7a5-11ed-96a0-9bb7dddec993__',
             },
             {
+                id: 'uniq-6',
                 title: 'Technology',
                 tooltip: {
                     chartKitFormatting: true,

diff --git a/src/plugins/highcharts/renderer/helpers/config/handleLegendItemClick.ts b/src/plugins/highcharts/renderer/helpers/config/handleLegendItemClick.ts
@@ -4,8 +4,8 @@ import Highcharts from 'highcharts';
 
 type LegendItemClickType = 'extended' | 'default';
 
-const getUniqueSeriesName = (series: Highcharts.Series) => {
-    return `${series.name}__${series.index}`;
+const getSeriesIdentifier = (series: Highcharts.Series): string => {
+    return (series.userOptions.id as string | undefined) || series.name;
 };
 
 const needSetVisible = (
@@ -20,7 +20,7 @@ const needSetVisible = (
     const hasAnotherVisibleSeries = chartSeries
         .filter(
             (series) =>
-                series.options.showInLegend !== false && getUniqueSeriesName(series) !== seriesName,
+                series.options.showInLegend !== false && getSeriesIdentifier(series) !== seriesName,
         )
         .some((series) => series.visible);
 
@@ -32,11 +32,11 @@ const updateSeries = (
     chartSeries: Highcharts.Series[],
     type: LegendItemClickType,
 ) => {
-    const clickedSeriesName = getUniqueSeriesName(series);
+    const clickedSeriesName = getSeriesIdentifier(series);
     switch (type) {
         case 'extended': {
             chartSeries.forEach((item) => {
-                if (getUniqueSeriesName(item) === clickedSeriesName) {
+                if (getSeriesIdentifier(item) === clickedSeriesName) {
                     item.setVisible(!item.visible, false);
                 }
             });
@@ -46,13 +46,13 @@ const updateSeries = (
 
         case 'default': {
             const visible = needSetVisible(
-                getUniqueSeriesName(series),
+                getSeriesIdentifier(series),
                 series.visible,
                 chartSeries,
             );
 
             chartSeries.forEach((item) => {
-                if (getUniqueSeriesName(item) === clickedSeriesName) {
+                if (getSeriesIdentifier(item) === clickedSeriesName) {
                     item.setVisible(true, false);
                 } else {
                     item.setVisible(visible, false);