feat(plugin-chart-echarts): add x and y label support for 9 charts (a…

…pache#1351) * feat: add x and y label support for timeseries fix apache#16512 * feat: change label to title * feat: add x/y title to 9 chats * refactor: move config to shared-control * refactor: add chartTitle section config in custom tab * refactor: refactor param names * lint: code lint * refactor: refactor code * lint: lint code * feat: make ypostion clearable false * lint: code lint Co-authored-by: xuzhebin <maxhui2020@gmail.com>
zhaoyongjie · Nov 24, 2021 · df40ee1 · df40ee1
1 parent 09ccca3
commit df40ee1
Show file tree

Hide file tree

Showing 18 changed files with 246 additions and 103 deletions.
diff --git a/...y_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx b/...y_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
@@ -0,0 +1,103 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { t } from '@superset-ui/core';
+import { ControlPanelSectionConfig } from '../types';
+import { formatSelectOptions } from '../utils';
+
+const TITLE_MARGIN_OPTIONS: number[] = [15, 30, 50, 75, 100, 125, 150, 200];
+const TITLE_POSITION_OPTIONS: string[] = ['Left', 'Top'];
+export const titleControls: ControlPanelSectionConfig = {
+  label: t('Chart Title'),
+  tabOverride: 'customize',
+  expanded: true,
+  controlSetRows: [
+    [<h1 className="section-header">{t('X Axis')}</h1>],
+    [
+      {
+        name: 'x_axis_title',
+        config: {
+          type: 'TextControl',
+          label: t('X Axis Title'),
+          renderTrigger: true,
+          default: '',
+          description: t('Changing this control takes effect instantly'),
+        },
+      },
+    ],
+    [
+      {
+        name: 'x_axis_title_margin',
+        config: {
+          type: 'SelectControl',
+          freeForm: true,
+          clearable: true,
+          label: t('X AXIS TITLE BOTTOM MARGIN'),
+          renderTrigger: true,
+          default: TITLE_MARGIN_OPTIONS[0],
+          choices: formatSelectOptions(TITLE_MARGIN_OPTIONS),
+          description: t('Changing this control takes effect instantly'),
+        },
+      },
+    ],
+    [<h1 className="section-header">{t('Y Axis')}</h1>],
+    [
+      {
+        name: 'y_axis_title',
+        config: {
+          type: 'TextControl',
+          label: t('Y Axis Title'),
+          renderTrigger: true,
+          default: '',
+          description: t('Changing this control takes effect instantly'),
+        },
+      },
+    ],
+    [
+      {
+        name: 'y_axis_title_margin',
+        config: {
+          type: 'SelectControl',
+          freeForm: true,
+          clearable: true,
+          label: t('Y AXIS TITLE MARGIN'),
+          renderTrigger: true,
+          default: TITLE_MARGIN_OPTIONS[0],
+          choices: formatSelectOptions(TITLE_MARGIN_OPTIONS),
+          description: t('Changing this control takes effect instantly'),
+        },
+      },
+    ],
+    [
+      {
+        name: 'y_axis_title_position',
+        config: {
+          type: 'SelectControl',
+          freeForm: true,
+          clearable: false,
+          label: t('Y AXIS TITLE POSITION'),
+          renderTrigger: true,
+          default: TITLE_POSITION_OPTIONS[0],
+          choices: formatSelectOptions(TITLE_POSITION_OPTIONS),
+          description: t('Changing this control takes effect instantly'),
+        },
+      },
+    ],
+  ],
+};
diff --git a/...mporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/sections/index.ts b/...mporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/sections/index.ts
@@ -21,3 +21,4 @@ export * from './sections';
 export * from './advancedAnalytics';
 export * from './annotationsAndLayers';
 export * from './forecastInterval';
+export * from './chartTitle';
diff --git a/...emporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/controlPanel.ts b/...emporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/controlPanel.ts
@@ -24,9 +24,10 @@ import {
   formatSelectOptions,
   sections,
   emitFilterControl,
+  ControlPanelConfig,
 } from '@superset-ui/chart-controls';
 
-export default {
+const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
     {
@@ -59,6 +60,7 @@ export default {
         ],
       ],
     },
+    sections.titleControls,
     {
       label: t('Chart Options'),
       expanded: true,
@@ -125,3 +127,4 @@ export default {
     },
   },
 };
+export default config;
diff --git a/...porary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts b/...porary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts
@@ -32,6 +32,7 @@ import {
 } from './types';
 import { extractGroupbyLabel, getColtypesMapping, sanitizeHtml } from '../utils/series';
 import { defaultGrid, defaultTooltip, defaultYAxis } from '../defaults';
+import { getPadding } from '../Timeseries/transformers';
 import { OpacityEnum } from '../constants';
 
 export default function transformProps(
@@ -49,11 +50,16 @@ export default function transformProps(
     dateFormat,
     xTicksLayout,
     emitFilter,
+    legendOrientation = 'top',
+    xAxisTitle,
+    yAxisTitle,
+    xAxisTitleMargin,
+    yAxisTitleMargin,
+    yAxisTitlePosition,
   } = formData as BoxPlotQueryFormData;
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const numberFormatter = getNumberFormatter(numberFormat);
   const metricLabels = formdataMetrics.map(getMetricLabel);
-
   const transformedData = data
     .map((datum: any) => {
       const groupbyLabel = extractGroupbyLabel({
@@ -187,24 +193,39 @@ export default function transformProps(
     // @ts-ignore
     ...outlierData,
   ];
-
+  const addYAxisTitleOffset = !!yAxisTitle;
+  const addXAxisTitleOffset = !!xAxisTitle;
+  const chartPadding = getPadding(
+    true,
+    legendOrientation,
+    addYAxisTitleOffset,
+    false,
+    null,
+    addXAxisTitleOffset,
+    yAxisTitlePosition,
+    yAxisTitleMargin,
+    xAxisTitleMargin,
+  );
   const echartOptions: EChartsOption = {
     grid: {
       ...defaultGrid,
-      top: 30,
-      bottom: 30,
-      left: 20,
-      right: 20,
+      ...chartPadding,
     },
     xAxis: {
       type: 'category',
       data: transformedData.map(row => row.name),
       axisLabel,
+      name: xAxisTitle,
+      nameGap: xAxisTitleMargin,
+      nameLocation: 'middle',
     },
     yAxis: {
       ...defaultYAxis,
       type: 'value',
       axisLabel: { formatter: numberFormatter },
+      name: yAxisTitle,
+      nameGap: yAxisTitleMargin,
+      nameLocation: yAxisTitlePosition === 'Left' ? 'middle' : 'end',
     },
     tooltip: {
       ...defaultTooltip,

diff --git a/...ntend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/types.ts b/...ntend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/types.ts
@@ -25,13 +25,14 @@ import {
 } from '@superset-ui/core';
 import { PostProcessingBoxplot } from '@superset-ui/core/lib/query/types/PostProcessing';
 import { EChartsOption } from 'echarts';
+import { EchartsTitleFormData, DEFAULT_TITLE_FORM_DATA } from '../types';
 
 export type BoxPlotQueryFormData = QueryFormData & {
   numberFormat?: string;
   whiskerOptions?: BoxPlotFormDataWhiskerOptions;
   xTickLayout?: BoxPlotFormXTickLayout;
   emitFilter: boolean;
-};
+} & EchartsTitleFormData;
 
 export type BoxPlotFormDataWhiskerOptions =
   | 'Tukey'
@@ -44,6 +45,7 @@ export type BoxPlotFormXTickLayout = '45°' | '90°' | 'auto' | 'flat' | 'stagge
 // @ts-ignore
 export const DEFAULT_FORM_DATA: BoxPlotQueryFormData = {
   emitFilter: false,
+  ...DEFAULT_TITLE_FORM_DATA,
 };
 
 export interface EchartsBoxPlotChartProps extends ChartProps {

diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -247,6 +247,7 @@ const config: ControlPanelConfig = {
         ],
       ],
     },
+    sections.titleControls,
     {
       label: t('Chart Options'),
       expanded: true,
@@ -379,18 +380,6 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [
-          {
-            name: 'yAxisTitle',
-            config: {
-              type: 'TextControl',
-              label: t('Primary y-axis title'),
-              renderTrigger: true,
-              default: '',
-              description: t('Title for y-axis'),
-            },
-          },
-        ],
         [
           {
             name: 'logAxis',

diff --git a/...uperset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/...uperset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -103,7 +103,6 @@ export default function transformProps(
     yAxisBounds,
     yAxisIndex,
     yAxisIndexB,
-    yAxisTitle,
     yAxisTitleSecondary,
     zoomable,
     richTooltip,
@@ -112,6 +111,11 @@ export default function transformProps(
     groupbyB,
     emitFilter,
     emitFilterB,
+    xAxisTitle,
+    yAxisTitle,
+    xAxisTitleMargin,
+    yAxisTitleMargin,
+    yAxisTitlePosition,
   }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
@@ -191,9 +195,20 @@ export default function transformProps(
   const tooltipTimeFormatter = getTooltipTimeFormatter(tooltipTimeFormat);
   const xAxisFormatter = getXAxisFormatter(xAxisTimeFormat);
 
-  const addYAxisLabelOffset = !!(yAxisTitle || yAxisTitleSecondary);
-  const chartPadding = getPadding(showLegend, legendOrientation, addYAxisLabelOffset, zoomable);
+  const addYAxisTitleOffset = !!(yAxisTitle || yAxisTitleSecondary);
+  const addXAxisTitleOffset = !!xAxisTitle;
 
+  const chartPadding = getPadding(
+    showLegend,
+    legendOrientation,
+    addYAxisTitleOffset,
+    zoomable,
+    null,
+    addXAxisTitleOffset,
+    yAxisTitlePosition,
+    yAxisTitleMargin,
+    xAxisTitleMargin,
+  );
   const labelMap = rawSeriesA.reduce((acc, datum) => {
     const label = datum.name as string;
     return {
@@ -220,6 +235,9 @@ export default function transformProps(
     },
     xAxis: {
       type: 'time',
+      name: xAxisTitle,
+      nameGap: xAxisTitleMargin,
+      nameLocation: 'middle',
       axisLabel: {
         showMinLabel: xAxisShowMinLabel,
         showMaxLabel: xAxisShowMaxLabel,
@@ -238,6 +256,8 @@ export default function transformProps(
         axisLabel: { formatter },
         scale: truncateYAxis,
         name: yAxisTitle,
+        nameGap: yAxisTitleMargin,
+        nameLocation: yAxisTitlePosition === 'Left' ? 'middle' : 'end',
       },
       {
         ...defaultYAxis,

diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts
@@ -26,7 +26,12 @@ import {
   ChartProps,
   ChartDataResponseResult,
 } from '@superset-ui/core';
-import { DEFAULT_LEGEND_FORM_DATA, EchartsLegendFormData } from '../types';
+import {
+  DEFAULT_LEGEND_FORM_DATA,
+  EchartsLegendFormData,
+  EchartsTitleFormData,
+  DEFAULT_TITLE_FORM_DATA,
+} from '../types';
 import {
   DEFAULT_FORM_DATA as TIMESERIES_DEFAULTS,
   EchartsTimeseriesContributionType,
@@ -41,7 +46,6 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   logAxisSecondary: boolean;
   yAxisFormat?: string;
   yAxisFormatSecondary?: string;
-  yAxisTitle: string;
   yAxisTitleSecondary: string;
   yAxisBounds: [number | undefined | null, number | undefined | null];
   yAxisBoundsSecondary: [number | undefined | null, number | undefined | null];
@@ -80,7 +84,8 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   groupby: string[];
   groupbyB: string[];
   emitFilter: boolean;
-} & EchartsLegendFormData;
+} & EchartsLegendFormData &
+  EchartsTitleFormData;
 
 // @ts-ignore
 export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
@@ -95,8 +100,7 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
   yAxisBoundsSecondary: TIMESERIES_DEFAULTS.yAxisBounds,
   yAxisFormat: TIMESERIES_DEFAULTS.yAxisFormat,
   yAxisFormatSecondary: TIMESERIES_DEFAULTS.yAxisFormat,
-  yAxisTitle: TIMESERIES_DEFAULTS.yAxisTitle,
-  yAxisTitleSecondary: TIMESERIES_DEFAULTS.yAxisTitle,
+  yAxisTitleSecondary: DEFAULT_TITLE_FORM_DATA.yAxisTitle,
   tooltipTimeFormat: TIMESERIES_DEFAULTS.tooltipTimeFormat,
   xAxisTimeFormat: TIMESERIES_DEFAULTS.xAxisTimeFormat,
   area: TIMESERIES_DEFAULTS.area,
@@ -124,6 +128,7 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
   zoomable: TIMESERIES_DEFAULTS.zoomable,
   richTooltip: TIMESERIES_DEFAULTS.richTooltip,
   xAxisLabelRotation: TIMESERIES_DEFAULTS.xAxisLabelRotation,
+  ...DEFAULT_TITLE_FORM_DATA,
 };
 
 export interface EchartsMixedTimeseriesProps extends ChartProps {

diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -95,6 +95,7 @@ const config: ControlPanelConfig = {
     sections.advancedAnalyticsControls,
     sections.annotationsAndLayersControls,
     sections.forecastIntervalControls,
+    sections.titleControls,
     {
       label: t('Chart Options'),
       expanded: true,
@@ -259,18 +260,6 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [
-          {
-            name: 'yAxisTitle',
-            config: {
-              type: 'TextControl',
-              label: t('Primary y-axis title'),
-              renderTrigger: true,
-              default: '',
-              description: t('Title for y-axis'),
-            },
-          },
-        ],
         [
           {
             name: 'truncateYAxis',