sapenlinea-components 0.9.75 → 0.9.76

package/fesm2022/sapenlinea-components.mjs

@@ -5135,6 +5135,82 @@ function getTotal(data) {
 function buildDonutChartOptions(data) {
     const total = getTotal(data);
     const showLegend = data.length > 10;
+    const splitLegend = data.length > 14;
+    let legendConfig = {};
+    if (showLegend) {
+        if (splitLegend) {
+            const half = Math.ceil(data.length / 2);
+            const leftData = data.slice(0, half).map(d => d.label);
+            const rightData = data.slice(half).map(d => d.label);
+            legendConfig = {
+                legend: [
+                    {
+                        data: leftData,
+                        type: 'scroll',
+                        orient: 'vertical',
+                        left: '5%',
+                        top: 'center',
+                        itemWidth: 12,
+                        itemHeight: 12,
+                        itemGap: 10,
+                        textStyle: {
+                            fontSize: 11,
+                            fontFamily: UI_CHART_TOKENS.fontFamily,
+                            color: UI_CHART_TOKENS.muted,
+                        },
+                        pageTextStyle: { color: UI_CHART_TOKENS.muted },
+                        pageIconColor: UI_CHART_TOKENS.centerText,
+                        pageIconInactiveColor: '#ccc',
+                    },
+                    {
+                        data: rightData,
+                        type: 'scroll',
+                        orient: 'vertical',
+                        right: '5%',
+                        top: 'center',
+                        itemWidth: 12,
+                        itemHeight: 12,
+                        itemGap: 10,
+                        textStyle: {
+                            fontSize: 11,
+                            fontFamily: UI_CHART_TOKENS.fontFamily,
+                            color: UI_CHART_TOKENS.muted,
+                        },
+                        pageTextStyle: { color: UI_CHART_TOKENS.muted },
+                        pageIconColor: UI_CHART_TOKENS.centerText,
+                        pageIconInactiveColor: '#ccc',
+                    }
+                ]
+            };
+        }
+        else {
+            legendConfig = {
+                legend: {
+                    type: 'scroll',
+                    orient: 'vertical',
+                    right: '5%',
+                    top: 'center',
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    itemGap: 10,
+                    textStyle: {
+                        fontSize: 11,
+                        fontFamily: UI_CHART_TOKENS.fontFamily,
+                        color: UI_CHART_TOKENS.muted,
+                    },
+                    pageTextStyle: {
+                        color: UI_CHART_TOKENS.muted,
+                    },
+                    pageIconColor: UI_CHART_TOKENS.centerText,
+                    pageIconInactiveColor: '#ccc',
+                }
+            };
+        }
+    }
+    let centerX = '50%';
+    if (showLegend) {
+        centerX = splitLegend ? '50%' : '35%';
+    }
     return {
         animation: true,
         backgroundColor: 'transparent',
@@ -5164,32 +5240,12 @@ function buildDonutChartOptions(data) {
       `,
             formatter: (params) => `${params.name}: ${params.value}`,
         },
-        ...(showLegend ? {
-            legend: {
-                type: 'scroll',
-                orient: 'horizontal',
-                bottom: 0,
-                left: 'center',
-                itemWidth: 12,
-                itemHeight: 12,
-                itemGap: 10,
-                textStyle: {
-                    fontSize: 11,
-                    fontFamily: UI_CHART_TOKENS.fontFamily,
-                    color: UI_CHART_TOKENS.muted,
-                },
-                pageTextStyle: {
-                    color: UI_CHART_TOKENS.muted,
-                },
-                pageIconColor: UI_CHART_TOKENS.centerText,
-                pageIconInactiveColor: '#ccc',
-            },
-        } : {}),
+        ...legendConfig,
         series: [
             {
                 type: 'pie',
                 radius: ['44%', '72%'],
-                center: ['50%', showLegend ? '46%' : '52%'],
+                center: [centerX, '50%'],
                 avoidLabelOverlap: true,
                 minAngle: 4,
                 itemStyle: {
@@ -5242,21 +5298,19 @@ function buildDonutChartOptions(data) {
                 })),
             },
         ],
-        graphic: [
-            {
-                type: 'text',
-                left: 'center',
-                top: showLegend ? '42%' : '48%',
-                style: {
-                    text: `${total}`,
-                    textAlign: 'center',
-                    fill: UI_CHART_TOKENS.centerText,
-                    fontSize: 24,
-                    fontWeight: 700,
-                    fontFamily: UI_CHART_TOKENS.fontFamily,
-                },
+        title: {
+            text: `${total}`,
+            left: centerX,
+            top: '48%',
+            textAlign: 'center',
+            textVerticalAlign: 'middle',
+            textStyle: {
+                color: UI_CHART_TOKENS.centerText,
+                fontSize: 24,
+                fontWeight: 700,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
             },
-        ],
+        },
     };
 }
 class DonutChart {
@@ -5394,6 +5448,7 @@ function buildHeatmapOptions(config) {
         visualMap: {
             min: minVal,
             max: maxVal,
+            calculable: false,
             orient: 'horizontal',
             left: 'center',
             bottom: '0',