fix(time-pivot): show sparse-period symbols, legend off by default, x-axis format control

A line series with a single point renders nothing when symbols are hidden,
which made sparse pivots (yearly data over 52-week periods) look empty;
symbols now show for series with two or fewer points. The 40-plus period
legend adds little, so it defaults off while staying togglable. Adds the
x_axis_format control (D3 time formats, matching the legacy control name)
applied to the axis labels.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: claude

superset-frontend/plugins/plugin-chart-echarts/src/TimePivot/controlPanel.ts

@@ -17,7 +17,11 @@
  * under the License.
  */
 import { t } from '@apache-superset/core/translation';
-import { ControlPanelConfig, sections } from '@superset-ui/chart-controls';
+import {
+  ControlPanelConfig,
+  D3_TIME_FORMAT_OPTIONS,
+  sections,
+} from '@superset-ui/chart-controls';
 
 // Control names match the legacy nvd3 chart so saved charts keep working
 // without a form-data migration. nvd3-specific pixel-margin and min/max
@@ -76,7 +80,7 @@ const config: ControlPanelConfig = {
               type: 'CheckboxControl',
               label: t('Legend'),
               renderTrigger: true,
-              default: true,
+              default: false,
               description: t('Whether to display the legend (toggles)'),
             },
           },
@@ -117,6 +121,20 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'x_axis_format',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('X Axis Format'),
+              renderTrigger: true,
+              default: 'smart_date',
+              choices: D3_TIME_FORMAT_OPTIONS,
+              description: t('D3 time format for the x-axis labels'),
+            },
+          },
+        ],
       ],
     },
     {

superset-frontend/plugins/plugin-chart-echarts/src/TimePivot/transformProps.ts

@@ -20,6 +20,7 @@ import {
   getMetricLabel,
   getNumberFormatter,
   getTimeFormatter,
+  smartDateFormatter,
   JsonObject,
   SMART_DATE_VERBOSE_ID,
 } from '@superset-ui/core';
@@ -43,6 +44,7 @@ export default function transformProps(
     colorPicker,
     showLegend,
     lineInterpolation,
+    xAxisFormat,
     xAxisLabel,
     yAxisLabel,
     yAxisFormat,
@@ -98,7 +100,15 @@ export default function transformProps(
       name: xAxisLabel || undefined,
       nameLocation: 'middle',
       nameGap: theme.sizeUnit * 8,
-      axisLabel: { color: theme.colorTextSecondary },
+      axisLabel: {
+        color: theme.colorTextSecondary,
+        ...(xAxisFormat && xAxisFormat !== smartDateFormatter.id
+          ? {
+              formatter: (value: number) =>
+                getTimeFormatter(xAxisFormat)(value),
+            }
+          : {}),
+      },
     },
     yAxis: {
       type: yLogScale ? 'log' : 'value',
@@ -136,7 +146,9 @@ export default function transformProps(
       type: 'line',
       smooth,
       ...(step ? { step } : {}),
-      showSymbol: false,
+      // a line series with one point renders nothing without its symbol;
+      // sparse periods (e.g. yearly data pivoted by 52 weeks) need them
+      showSymbol: s.values.filter(({ y }) => y != null).length <= 2,
       connectNulls: false,
       lineStyle: {
         color: colorOf(s),

superset-frontend/plugins/plugin-chart-echarts/src/TimePivot/types.ts

@@ -30,6 +30,7 @@ export type EchartsTimePivotFormData = QueryFormData & {
   colorPicker?: { r: number; g: number; b: number; a: number };
   showLegend?: boolean;
   lineInterpolation?: string;
+  xAxisFormat?: string;
   xAxisLabel?: string;
   yAxisLabel?: string;
   yAxisFormat?: string;