Merge pull request #965 from qxqzx13/shuangY

fix:(Chart) fix doubleY yAxis label and chart label
running-elephant · Mar 10, 2022 · c840d95 · c840d95
2 parents 765855a + 33495af
commit c840d95
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 16 deletions.
diff --git a/frontend/src/app/components/ChartGraph/BasicDoubleYChart/BasicDoubleYChart.tsx b/frontend/src/app/components/ChartGraph/BasicDoubleYChart/BasicDoubleYChart.tsx
@@ -161,13 +161,14 @@ class BasicDoubleYChart extends Chart {
     chartDataSet: IChartDataSet<string>,
   ) {
     const _getSeriesByDemisionPostion =
-      () => (config, styles, settings, data, direction) => {
+      () => (config, styles, settings, data, direction, yAxisIndex) => {
         const [graphType, graphStyle] = getStyles(
           styles,
           [direction],
           ['graphType', 'graphStyle'],
         );
         return {
+          yAxisIndex,
           name: getColumnRenderName(config),
           type: graphType || 'line',
           sampling: 'average',
@@ -194,6 +195,7 @@ class BasicDoubleYChart extends Chart {
             settingConfigs,
             chartDataSet,
             'leftY',
+            0,
           ),
         ),
       )
@@ -205,13 +207,10 @@ class BasicDoubleYChart extends Chart {
             settingConfigs,
             chartDataSet,
             'rightY',
+            1,
           ),
         ),
-      )
-      .map((config, index) => {
-        (config as any).yAxisIndex = index;
-        return config;
-      });
+      );
     return series;
   }
 
@@ -290,7 +289,7 @@ class BasicDoubleYChart extends Chart {
       ['showHorizonLine', 'horizonLineStyle'],
     );
 
-    const _yAxisTemplate = (position, index, name) => {
+    const _yAxisTemplate = (position, name) => {
       const [showAxis, inverse, font, showLabel] = getStyles(
         styles,
         [`${position}Y`],
@@ -300,7 +299,6 @@ class BasicDoubleYChart extends Chart {
       return {
         type: 'value',
         position,
-        offset: index * 20,
         showTitleAndUnit: true,
         name,
         nameLocation: 'middle',
@@ -318,14 +316,17 @@ class BasicDoubleYChart extends Chart {
       };
     };
 
-    const leftYAxis = leftDeminsionConfigs.map((c, index) =>
-      _yAxisTemplate('left', index, getColumnRenderName(c)),
-    );
+    const leftYAxisNames = leftDeminsionConfigs
+      .map(getColumnRenderName)
+      .join('/');
+    const rightYAxisNames = rightDeminsionConfigs
+      .map(getColumnRenderName)
+      .join('/');
 
-    const rightYAxis = rightDeminsionConfigs.map((c, index) =>
-      _yAxisTemplate('right', index, getColumnRenderName(c)),
-    );
-    return leftYAxis.concat(rightYAxis);
+    return [
+      _yAxisTemplate('left', leftYAxisNames),
+      _yAxisTemplate('right', rightYAxisNames),
+    ];
   }
 
   private getLegend(styles, seriesNames) {
@@ -377,7 +378,7 @@ class BasicDoubleYChart extends Chart {
   private getLabelStyle(styles, direction) {
     const [showLabel, position, LabelFont] = getStyles(
       styles,
-      ['label'],
+      [direction + 'Label'],
       ['showLabel', 'position', 'font'],
     );
 

diff --git a/frontend/src/app/components/ChartGraph/BasicDoubleYChart/config.ts b/frontend/src/app/components/ChartGraph/BasicDoubleYChart/config.ts
@@ -141,6 +141,104 @@ const config: ChartConfig = {
         },
       ],
     },
+    {
+      label: 'label.leftYTitle',
+      key: 'leftYLabel',
+      comType: 'group',
+      rows: [
+        {
+          label: 'label.showLabel',
+          key: 'showLabel',
+          default: true,
+          comType: 'checkbox',
+        },
+        {
+          label: 'label.position',
+          key: 'position',
+          comType: 'select',
+          default: 'top',
+          options: {
+            // TODO(Stephen): to be extract customize LabelPosition Component
+            items: [
+              { label: '上', value: 'top' },
+              { label: '左', value: 'left' },
+              { label: '右', value: 'right' },
+              { label: '下', value: 'bottom' },
+              { label: '内', value: 'inside' },
+              { label: '内左', value: 'insideLeft' },
+              { label: '内右', value: 'insideRight' },
+              { label: '内上', value: 'insideTop' },
+              { label: '内下', value: 'insideBottom' },
+              { label: '内左上', value: 'insideTopLeft' },
+              { label: '内左下', value: 'insideBottomLeft' },
+              { label: '内右上', value: 'insideTopRight' },
+              { label: '内右下', value: 'insideBottomRight' },
+            ],
+          },
+        },
+        {
+          label: 'viz.palette.style.font',
+          key: 'font',
+          comType: 'font',
+          default: {
+            fontFamily: 'PingFang SC',
+            fontSize: '12',
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            color: '#495057',
+          },
+        },
+      ],
+    },
+    {
+      label: 'label.rightYTitle',
+      key: 'rightYLabel',
+      comType: 'group',
+      rows: [
+        {
+          label: 'label.showLabel',
+          key: 'showLabel',
+          default: true,
+          comType: 'checkbox',
+        },
+        {
+          label: 'label.position',
+          key: 'position',
+          comType: 'select',
+          default: 'top',
+          options: {
+            // TODO(Stephen): to be extract customize LabelPosition Component
+            items: [
+              { label: '上', value: 'top' },
+              { label: '左', value: 'left' },
+              { label: '右', value: 'right' },
+              { label: '下', value: 'bottom' },
+              { label: '内', value: 'inside' },
+              { label: '内左', value: 'insideLeft' },
+              { label: '内右', value: 'insideRight' },
+              { label: '内上', value: 'insideTop' },
+              { label: '内下', value: 'insideBottom' },
+              { label: '内左上', value: 'insideTopLeft' },
+              { label: '内左下', value: 'insideBottomLeft' },
+              { label: '内右上', value: 'insideTopRight' },
+              { label: '内右下', value: 'insideBottomRight' },
+            ],
+          },
+        },
+        {
+          label: 'viz.palette.style.font',
+          key: 'font',
+          comType: 'font',
+          default: {
+            fontFamily: 'PingFang SC',
+            fontSize: '12',
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            color: '#495057',
+          },
+        },
+      ],
+    },
     {
       label: 'leftY.title',
       key: 'leftY',
@@ -473,6 +571,12 @@ const config: ChartConfig = {
           label: '数值',
           stack: '堆叠',
         },
+        label: {
+          leftYTitle: '左轴标签',
+          rightYTitle: '右轴标签',
+          showLabel: '显示标签',
+          position: '位置',
+        },
         legend: {
           title: '图例',
           showLegend: '显示图例',
@@ -542,6 +646,12 @@ const config: ChartConfig = {
           label: 'Label',
           stack: 'Stack',
         },
+        label: {
+          leftYTitle: 'Left Y Axis Label',
+          rightYTitle: 'Right Y Axis Label',
+          showLabel: 'Show Label',
+          position: 'Position',
+        },
         legend: {
           title: 'Legend',
           showLegend: 'Show Legend',