From cb67e321ecc927a2d2ef8fcb406c480be7735c75 Mon Sep 17 00:00:00 2001 From: Maxhui <51693396+MaxHuiYYDS@users.noreply.github.com> Date: Tue, 14 Sep 2021 12:02:57 +0800 Subject: [PATCH] feat(plugin-chart-echarts): add x and y label support for 9 charts (#1351) * feat: add x and y label support for timeseries fix #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 --- .../src/sections/chartTitle.tsx | 103 ++++++++++++++++++ .../src/sections/index.ts | 1 + .../src/BoxPlot/controlPanel.ts | 5 +- .../src/BoxPlot/transformProps.ts | 33 +++++- .../plugin-chart-echarts/src/BoxPlot/types.ts | 4 +- .../src/MixedTimeseries/controlPanel.tsx | 13 +-- .../src/MixedTimeseries/transformProps.ts | 26 ++++- .../src/MixedTimeseries/types.ts | 15 ++- .../src/Timeseries/Area/controlPanel.tsx | 13 +-- .../Regular/Scatter/controlPanel.tsx | 14 +-- .../src/Timeseries/Regular/controlPanel.tsx | 14 +-- .../src/Timeseries/Step/controlPanel.tsx | 13 +-- .../src/Timeseries/controlPanel.tsx | 13 +-- .../src/Timeseries/transformProps.ts | 26 ++++- .../src/Timeseries/transformers.ts | 23 +++- .../src/Timeseries/types.ts | 14 ++- plugins/plugin-chart-echarts/src/types.ts | 16 +++ plugins/plugin-chart-pivot-table/README.md | 3 +- 18 files changed, 246 insertions(+), 103 deletions(-) create mode 100644 packages/superset-ui-chart-controls/src/sections/chartTitle.tsx diff --git a/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx b/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx new file mode 100644 index 0000000000..5e99d976c5 --- /dev/null +++ b/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: [ + [

{t('X Axis')}

], + [ + { + 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'), + }, + }, + ], + [

{t('Y Axis')}

], + [ + { + 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/packages/superset-ui-chart-controls/src/sections/index.ts b/packages/superset-ui-chart-controls/src/sections/index.ts index ae8b4cad83..2f6496e67a 100644 --- a/packages/superset-ui-chart-controls/src/sections/index.ts +++ b/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/plugins/plugin-chart-echarts/src/BoxPlot/controlPanel.ts b/plugins/plugin-chart-echarts/src/BoxPlot/controlPanel.ts index 4aeb1672e6..5d05a2c005 100644 --- a/plugins/plugin-chart-echarts/src/BoxPlot/controlPanel.ts +++ b/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/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts b/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts index ad16c2b54d..97d62fd4d1 100644 --- a/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts +++ b/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/plugins/plugin-chart-echarts/src/BoxPlot/types.ts b/plugins/plugin-chart-echarts/src/BoxPlot/types.ts index e24809c88f..10805087e6 100644 --- a/plugins/plugin-chart-echarts/src/BoxPlot/types.ts +++ b/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/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx index 7f3f03d88b..e79ae52da4 100644 --- a/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/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/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 64950b148c..a0c1492dae 100644 --- a/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/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/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts index 16908835f5..172df08918 100644 --- a/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts +++ b/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/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx index 940c7d87ec..4abe8bbedf 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx +++ b/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', diff --git a/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx index 292f645150..b66b8a477e 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx +++ b/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx @@ -72,6 +72,7 @@ const config: ControlPanelConfig = { sections.advancedAnalyticsControls, sections.annotationsAndLayersControls, sections.forecastIntervalControls, + sections.titleControls, { label: t('Chart Options'), expanded: true, @@ -120,6 +121,7 @@ const config: ControlPanelConfig = { ], ...legendSection, [

{t('X Axis')}

], + [ { name: 'x_axis_time_format', @@ -202,18 +204,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', diff --git a/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx index 22628eae38..cd201ad382 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx +++ b/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx @@ -89,6 +89,7 @@ const config: ControlPanelConfig = { sections.advancedAnalyticsControls, sections.annotationsAndLayersControls, sections.forecastIntervalControls, + sections.titleControls, { label: t('Chart Options'), expanded: true, @@ -194,6 +195,7 @@ const config: ControlPanelConfig = { ], // eslint-disable-next-line react/jsx-key [

{t('Y Axis')}

], + ['y_axis_format'], [ { @@ -219,18 +221,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', diff --git a/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx index b121263597..f91aa68b21 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx +++ b/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx @@ -95,6 +95,7 @@ const config: ControlPanelConfig = { sections.advancedAnalyticsControls, sections.annotationsAndLayersControls, sections.forecastIntervalControls, + sections.titleControls, { label: t('Chart Options'), expanded: true, @@ -273,18 +274,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', diff --git a/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx index cc4213ea89..c497f8e759 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx +++ b/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx @@ -96,6 +96,7 @@ const config: ControlPanelConfig = { sections.advancedAnalyticsControls, sections.annotationsAndLayersControls, sections.forecastIntervalControls, + sections.titleControls, { label: t('Chart Options'), expanded: true, @@ -276,18 +277,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', diff --git a/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index a91cf42bb5..b0093ce684 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -94,7 +94,6 @@ export default function transformProps( yAxisFormat, xAxisTimeFormat, yAxisBounds, - yAxisTitle, tooltipTimeFormat, zoomable, richTooltip, @@ -103,8 +102,12 @@ export default function transformProps( groupby, showValue, onlyTotal, + xAxisTitle, + yAxisTitle, + xAxisTitleMargin, + yAxisTitleMargin, + yAxisTitlePosition, }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; - const colorScale = CategoricalColorNamespace.getScale(colorScheme as string); const rebasedData = rebaseTimeseriesDatum(data, verboseMap); const rawSeries = extractTimeseriesSeries(rebasedData, { @@ -206,8 +209,18 @@ export default function transformProps( const { setDataMask = () => {} } = hooks; const addYAxisLabelOffset = !!yAxisTitle; - const padding = getPadding(showLegend, legendOrientation, addYAxisLabelOffset, zoomable); - + const addXAxisLabelOffset = !!xAxisTitle; + const padding = getPadding( + showLegend, + legendOrientation, + addYAxisLabelOffset, + zoomable, + null, + addXAxisLabelOffset, + yAxisTitlePosition, + yAxisTitleMargin, + xAxisTitleMargin, + ); const echartOptions: EChartsOption = { useUTC: true, grid: { @@ -216,6 +229,9 @@ export default function transformProps( }, xAxis: { type: 'time', + name: xAxisTitle, + nameGap: xAxisTitleMargin, + nameLocation: 'middle', axisLabel: { formatter: xAxisFormatter, rotate: xAxisLabelRotation, @@ -231,6 +247,8 @@ export default function transformProps( axisLabel: { formatter }, scale: truncateYAxis, name: yAxisTitle, + nameGap: yAxisTitleMargin, + nameLocation: yAxisTitlePosition === 'Left' ? 'middle' : 'end', }, tooltip: { ...defaultTooltip, diff --git a/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 2470bf22bf..7f8f3268cd 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -372,22 +372,33 @@ export function transformTimeseriesAnnotation( export function getPadding( showLegend: boolean, legendOrientation: LegendOrientation, - addYAxisLabelOffset: boolean, + addYAxisTitleOffset: boolean, zoomable: boolean, margin?: string | number | null, + addXAxisTitleOffset?: boolean, + yAxisTitlePosition?: string, + yAxisTitleMargin?: number, + xAxisTitleMargin?: number, ): { bottom: number; left: number; right: number; top: number; } { - const yAxisOffset = addYAxisLabelOffset ? TIMESERIES_CONSTANTS.yAxisLabelTopOffset : 0; + const yAxisOffset = addYAxisTitleOffset ? TIMESERIES_CONSTANTS.yAxisLabelTopOffset : 0; + const xAxisOffset = addXAxisTitleOffset ? xAxisTitleMargin || 0 : 0; return getChartPadding(showLegend, legendOrientation, margin, { - top: TIMESERIES_CONSTANTS.gridOffsetTop + yAxisOffset, + top: + yAxisTitlePosition && yAxisTitlePosition === 'Top' + ? TIMESERIES_CONSTANTS.gridOffsetTop + (yAxisTitleMargin || 0) + : TIMESERIES_CONSTANTS.gridOffsetTop + yAxisOffset, bottom: zoomable - ? TIMESERIES_CONSTANTS.gridOffsetBottomZoomable - : TIMESERIES_CONSTANTS.gridOffsetBottom, - left: TIMESERIES_CONSTANTS.gridOffsetLeft, + ? TIMESERIES_CONSTANTS.gridOffsetBottomZoomable + xAxisOffset + : TIMESERIES_CONSTANTS.gridOffsetBottom + xAxisOffset, + left: + yAxisTitlePosition === 'Left' + ? TIMESERIES_CONSTANTS.gridOffsetLeft + (yAxisTitleMargin || 0) + : TIMESERIES_CONSTANTS.gridOffsetLeft, right: showLegend && legendOrientation === LegendOrientation.Right ? 0 diff --git a/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 1d6a7a9b70..d1d550ee7a 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -24,7 +24,13 @@ import { TimeGranularity, } from '@superset-ui/core'; import { sections } from '@superset-ui/chart-controls'; -import { DEFAULT_LEGEND_FORM_DATA, EchartsLegendFormData, EChartTransformedProps } from '../types'; +import { + DEFAULT_LEGEND_FORM_DATA, + EchartsLegendFormData, + EChartTransformedProps, + EchartsTitleFormData, + DEFAULT_TITLE_FORM_DATA, +} from '../types'; export enum EchartsTimeseriesContributionType { Row = 'row', @@ -64,7 +70,6 @@ export type EchartsTimeseriesFormData = QueryFormData & { tooltipTimeFormat?: string; truncateYAxis: boolean; yAxisFormat?: string; - yAxisTitle: string; xAxisShowMinLabel?: boolean; xAxisShowMaxLabel?: boolean; xAxisTimeFormat?: string; @@ -77,7 +82,8 @@ export type EchartsTimeseriesFormData = QueryFormData & { groupby: string[]; showValue: boolean; onlyTotal: boolean; -} & EchartsLegendFormData; +} & EchartsLegendFormData & + EchartsTitleFormData; // @ts-ignore export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { @@ -107,9 +113,9 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { xAxisLabelRotation: 0, emitFilter: false, groupby: [], - yAxisTitle: '', showValue: false, onlyTotal: false, + ...DEFAULT_TITLE_FORM_DATA, }; export interface EchartsTimeseriesChartProps extends ChartProps { diff --git a/plugins/plugin-chart-echarts/src/types.ts b/plugins/plugin-chart-echarts/src/types.ts index 029aec3035..7539546c95 100644 --- a/plugins/plugin-chart-echarts/src/types.ts +++ b/plugins/plugin-chart-echarts/src/types.ts @@ -109,3 +109,19 @@ export interface EChartTransformedProps { groupby: string[]; selectedValues: Record; } + +export interface EchartsTitleFormData { + xAxisTitle: string; + xAxisTitleMargin: number; + yAxisTitle: string; + yAxisTitleMargin: number; + yAxisTitlePosition: string; +} + +export const DEFAULT_TITLE_FORM_DATA: EchartsTitleFormData = { + xAxisTitle: '', + xAxisTitleMargin: 0, + yAxisTitle: '', + yAxisTitleMargin: 0, + yAxisTitlePosition: 'Top', +}; diff --git a/plugins/plugin-chart-pivot-table/README.md b/plugins/plugin-chart-pivot-table/README.md index eb36895446..6271b1b321 100644 --- a/plugins/plugin-chart-pivot-table/README.md +++ b/plugins/plugin-chart-pivot-table/README.md @@ -4,7 +4,8 @@ This plugin provides Pivot Table for Superset. -If you change the logic of this plugin, please update [`pivot_table`](https://github.com/apache/superset/blob/master/superset/charts/post_processing.py). +If you change the logic of this plugin, please update +[`pivot_table`](https://github.com/apache/superset/blob/master/superset/charts/post_processing.py). ### Usage