QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-28 11:15:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(glyph): single-file chart definition pattern across all plugins

Browse Source 
Introduce `defineChart()` — a declarative pattern that bundles metadata,
arguments (control-panel config), buildQuery, transform, and render into
a single chart-plugin file. Migrate every chart plugin to this pattern:

  * plugin-chart-echarts: Pie, Funnel, Gauge, Sankey, Waterfall,
    Histogram, Tree, Bubble, BoxPlot, Sunburst, Radar, Treemap, Graph,
    Heatmap, Gantt, BigNumber (Total, WithTrendline, PoP, Glyph demo),
    MixedTimeseries, and the Timeseries family (Generic, Scatter,
    SmoothLine, Step, Area, Line, Bar)
  * legacy-plugin-chart-*: calendar, horizon, chord, country-map,
    world-map, paired-t-test, parallel-coordinates, partition, rose,
    map-box
  * other plugins: handlebars, word-cloud, pivot-table, table,
    ag-grid-table, cartodiagram
  * legacy-preset-chart-nvd3: Bubble, Bullet, Compare, TimePivot
  * legacy-preset-chart-deckgl: Grid, Hex, Polygon, Scatter (single-file
    defineChart); Arc, Contour, Geojson, Heatmap, Path, Screengrid kept
    on the original multi-file ChartPlugin pattern pending follow-up

Glyph-core lives as @superset-ui/glyph-core (extracted package) and
provides: defineChart, ~14 argument types (Metric, Dimension, Select,
Checkbox, Text, Int, Slider, etc.), reusable presets (ShowLegend,
HeaderFontSize, Subtitle, etc.), cross-filter utilities
(extractCrossFilterProps, createSelectedValuesMap, isDataPointFiltered,
createLabelMap), and visibility-condition helpers
(resolveArgClass, getArgVisibleWhen, evaluateGlyphCondition).

Customize-tab rendering uses a new GlyphOptionsPanel — a native React
renderer that hybrids glyph args with additionalControls, with
inlined sharedControls in the Query section.

Imports are routed through @apache-superset/core subpath entrypoints
(/translation for t, /common for GenericDataType).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Evan Rusackas
2026-05-14 14:23:50 -07:00
parent 4e09889607
commit 2e16b8266a
385 changed files with 29627 additions and 45106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
superset-frontend/plugins/plugin-chart-handlebars/test/plugin/buildQuery.test.ts
View File

@@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { HandlebarsQueryFormData } from '../../src/types';
import buildQuery from '../../src/plugin/buildQuery';
import { HandlebarsQueryFormData, buildQuery } from '../../src/index';
describe('Handlebars buildQuery', () => {
const formData: HandlebarsQueryFormData = {

116
superset-frontend/plugins/plugin-chart-handlebars/test/plugin/controls.test.ts
View File

@@ -1,116 +0,0 @@
/**
* 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 {
ControlPanelState,
ControlState,
CustomControlItem,
} from '@superset-ui/chart-controls';
import { QueryFormData } from '@superset-ui/core';
import { handlebarsTemplateControlSetItem } from '../../src/plugin/controls/handlebarTemplate';
import { styleControlSetItem } from '../../src/plugin/controls/style';
const handlebarsConfig = (handlebarsTemplateControlSetItem as CustomControlItem)
.config;
const styleConfig = (styleControlSetItem as CustomControlItem).config;
const buildState = (form_data: Partial<QueryFormData>) =>
({
form_data: form_data as QueryFormData,
controls: {},
datasource: null,
common: { conf: { HTML_SANITIZATION: true } },
slice: { slice_id: 1 },
}) as unknown as ControlPanelState;
const CUSTOM = '<div>custom template</div>';
const CUSTOM_CSS = '.foo { color: red; }';
test('handlebarsTemplate mapStateToProps reads snake_case handlebars_template (MCP-created charts)', () => {
const result = handlebarsConfig.mapStateToProps!(
buildState({ handlebars_template: CUSTOM } as Partial<QueryFormData>),
{} as ControlState,
);
expect(result.value).toBe(CUSTOM);
});
test('handlebarsTemplate mapStateToProps reads camelCase handlebarsTemplate (UI-created charts)', () => {
const result = handlebarsConfig.mapStateToProps!(
buildState({ handlebarsTemplate: CUSTOM } as Partial<QueryFormData>),
{} as ControlState,
);
expect(result.value).toBe(CUSTOM);
});
test('handlebarsTemplate mapStateToProps prefers camelCase when both keys present (latest edit wins over legacy snake_case)', () => {
const result = handlebarsConfig.mapStateToProps!(
buildState({
handlebars_template: 'stale legacy value',
handlebarsTemplate: 'latest edit',
} as Partial<QueryFormData>),
{} as ControlState,
);
expect(result.value).toBe('latest edit');
});
test('handlebarsTemplate mapStateToProps returns undefined when no template stored (allows default)', () => {
const result = handlebarsConfig.mapStateToProps!(
buildState({}),
{} as ControlState,
);
expect(result.value).toBeUndefined();
});
test('styleTemplate mapStateToProps reads camelCase styleTemplate (MCP and UI charts)', () => {
const result = styleConfig.mapStateToProps!(
buildState({ styleTemplate: CUSTOM_CSS } as Partial<QueryFormData>),
{} as ControlState,
);
expect(result.value).toBe(CUSTOM_CSS);
expect(result.htmlSanitization).toBe(true);
});
test('styleTemplate mapStateToProps prefers camelCase when both keys present', () => {
const result = styleConfig.mapStateToProps!(
buildState({
style_template: 'stale',
styleTemplate: 'latest',
} as Partial<QueryFormData>),
{} as ControlState,
);
expect(result.value).toBe('latest');
});
test('styleTemplate mapStateToProps reads snake_case style_template as fallback', () => {
const result = styleConfig.mapStateToProps!(
buildState({ style_template: CUSTOM_CSS } as Partial<QueryFormData>),
{} as ControlState,
);
expect(result.value).toBe(CUSTOM_CSS);
});
test('styleTemplate mapStateToProps uses HTML_SANITIZATION=false from config', () => {
const result = styleConfig.mapStateToProps!(
{
...buildState({}),
common: { conf: { HTML_SANITIZATION: false } },
} as unknown as ControlPanelState,
{} as ControlState,
);
expect(result.htmlSanitization).toBe(false);
});

53
superset-frontend/plugins/plugin-chart-handlebars/test/plugin/transformProps.test.ts
View File

@@ -1,53 +0,0 @@
/**
* 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 { ChartProps, QueryFormData, VizType } from '@superset-ui/core';
import { supersetTheme } from '@apache-superset/core/theme';
import { HandlebarsQueryFormData } from '../../src/types';
import transformProps from '../../src/plugin/transformProps';
describe('Handlebars transformProps', () => {
const formData: HandlebarsQueryFormData = {
colorScheme: 'bnbColors',
datasource: '3__table',
granularitySqla: 'ds',
metric: 'sum__num',
groupby: ['name'],
width: 500,
height: 500,
viz_type: VizType.Handlebars,
};
const data = [{ name: 'Hulk', sum__num: 1, __timestamp: 599616000000 }];
const chartProps = new ChartProps<QueryFormData>({
formData,
width: 800,
height: 600,
queriesData: [{ data }],
theme: supersetTheme,
});
test('should transform chart props for viz', () => {
expect(transformProps(chartProps)).toEqual(
expect.objectContaining({
width: 800,
height: 600,
data,
}),
);
});
});