feat(plugin-chart-echarts): subject Add option to rotate label defaul…

… 45 (#921)
apache-superset · Feb 8, 2021 · a7daa91 · a7daa91 · vercel · Feb 8, 2021
1 parent ca2d2f5
commit a7daa91
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
@@ -54,6 +54,7 @@ const {
   truncateYAxis,
   yAxisBounds,
   zoomable,
+  xAxisLabelRotation,
 } = DEFAULT_FORM_DATA;
 
 const config: ControlPanelConfig = {
@@ -338,6 +339,24 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'xAxisLabelRotation',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              clearable: false,
+              label: t('Rotate x axis label'),
+              choices: [
+                [0, '0°'],
+                [45, '45°'],
+              ],
+              default: xAxisLabelRotation,
+              renderTrigger: true,
+              description: t('Input field supports custom rotation. e.g. 30 for 30°'),
+            },
+          },
+        ],
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Tooltip')}</h1>],
         [

diff --git a/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -81,6 +81,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     timeGrainSqla,
     zoomable,
     richTooltip,
+    xAxisLabelRotation,
   }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
@@ -154,6 +155,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
         showMinLabel: xAxisShowMinLabel,
         showMaxLabel: xAxisShowMaxLabel,
         formatter: xAxisFormatter,
+        rotate: xAxisLabelRotation,
       },
     },
     yAxis: {

diff --git a/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/plugins/plugin-chart-echarts/src/Timeseries/types.ts
@@ -63,6 +63,7 @@ export type EchartsTimeseriesFormData = {
   yAxisBounds: [number | undefined | null, number | undefined | null];
   zoomable: boolean;
   richTooltip: boolean;
+  xAxisLabelRotation: number;
 } & EchartsLegendFormData;
 
 export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
@@ -90,4 +91,5 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
   xAxisShowMaxLabel: true,
   zoomable: false,
   richTooltip: true,
+  xAxisLabelRotation: 45,
 };