Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhaoyongjie
zhaoyongjie committed Apr 14, 2021
1 parent 213c6b5 commit 3d24cd3
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 12 deletions.
20 changes: 18 additions & 2 deletions ...chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import React, { useMemo, useState } from 'react';
import { ChartDataResponseResult, useTheme, t } from '@superset-ui/core';
import {ChartDataResponseResult, useTheme, t, GenericDataType} from '@superset-ui/core';
import ControlHeader from '../../../components/ControlHeader';
import { ControlComponentProps } from '../types';

Expand All @@ -31,6 +31,7 @@ export type ColumnConfigControlProps<T extends ColumnConfig> = ControlComponentP
> & {
queryResponse?: ChartDataResponseResult;
configFormLayout?: ColumnConfigFormLayout;
appliedColumnNames?: string[];
};

/**
Expand All @@ -43,12 +44,27 @@ const MAX_NUM_COLS = 10;
*/
export default function ColumnConfigControl<T extends ColumnConfig>({
queryResponse,
appliedColumnNames = [],
value,
onChange,
configFormLayout = DEFAULT_CONFIG_FORM_LAYOUT,
...props
}: ColumnConfigControlProps<T>) {
const { colnames, coltypes } = queryResponse || {};
const { colnames: _colnames, coltypes: _coltypes } = queryResponse || {};
let colnames: string[] = [];
let coltypes: GenericDataType[] = [];
if (appliedColumnNames.length === 0) {
colnames = _colnames || [];
coltypes = _coltypes || [];
} else {
const appliedCol = new Set(appliedColumnNames);
_colnames?.forEach((col, idx) => {
if (appliedCol.has(col)) {
colnames.push(col);
coltypes.push(_coltypes?.[idx] as GenericDataType);
}
})
}
const theme = useTheme();
const columnConfigs = useMemo(() => {
const configs: Record<string, ColumnConfigInfo> = {};
Expand Down
6 changes: 4 additions & 2 deletions plugins/plugin-chart-echarts/src/Radar/EchartsRadar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
* under the License.
*/
import React, { useCallback } from 'react';
import { DataRecordValue } from '@superset-ui/core';
import { RadarChartTransformedProps } from './types';
import Echart from '../components/Echart';
import { EventHandlers } from '../types';
Expand All @@ -37,7 +38,7 @@ export default function EchartsRadar({
return;
}

const groupbyValues = values.map(value => labelMap[value]);
const groupbyValues = values.map(value => labelMap.get(value));

setDataMask({
crossFilters: {
Expand All @@ -47,7 +48,8 @@ export default function EchartsRadar({
values.length === 0
? []
: groupby.map((col, idx) => {
const val = groupbyValues.map(v => v[idx]);
// const val = groupbyValues.map((v: DataRecordValue) => v[idx]);
const val = values[0];
if (val === null || val === undefined)
return {
col,
Expand Down
76 changes: 70 additions & 6 deletions plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,15 @@
* under the License.
*/
import React from 'react';
import { t, validateNonEmpty } from '@superset-ui/core';
import {
ChartDataResponseResult,
FeatureFlag,
GenericDataType,
isFeatureEnabled,
QueryFormMetric,
t,
validateNonEmpty, validateNumber
} from '@superset-ui/core';
import {
ControlPanelConfig,
D3_FORMAT_DOCS,
Expand All @@ -28,8 +36,24 @@ import {
import { DEFAULT_FORM_DATA } from './types';
import { legendOrientationControl, legendTypeControl, showLegendControl } from '../controls';
import { LABEL_POSITION } from '../constants';
import {ControlFormItemSpec} from "@superset-ui/chart-controls/lib/components/ControlForm";

const { labelType, labelPosition, numberFormat, showLabels, isCircle, emitFilter } = DEFAULT_FORM_DATA;

const { labelType, labelPosition, numberFormat, showLabels, isCircle } = DEFAULT_FORM_DATA;
const radarMetricMaxValue: { name: string; config: ControlFormItemSpec } = {
name: 'radarMetricMaxValue',
config: {
controlType: 'InputNumber',
label: t('Max'),
description: t(
'Default column width in pixels, may still be restricted by the shortest/longest word in the column',
),
width: 120,
placeholder: 'auto',
debounceDelay: 400,
validators: [validateNumber],
}
};

const config: ControlPanelConfig = {
controlPanelSections: [
Expand All @@ -44,12 +68,24 @@ const config: ControlPanelConfig = {
expanded: true,
controlSetRows: [
['color_scheme'],
// eslint-disable-next-line react/jsx-key
[<h1 className="section-header">{t('Legend')}</h1>],
isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)
? [
{
name: 'emit_filter',
config: {
type: 'CheckboxControl',
label: t('Enable emitting filters'),
default: emitFilter,
renderTrigger: true,
description: t('Enable emmiting filters.'),
},
},
]
: [],
[showLegendControl],
[legendTypeControl],
[legendOrientationControl],
// eslint-disable-next-line react/jsx-key
[<h1 className="section-header">{t('Labels')}</h1>],
[
{
Expand Down Expand Up @@ -123,8 +159,36 @@ const config: ControlPanelConfig = {
},
},
],
// eslint-disable-next-line react/jsx-key
[<h1 className="section-header">{t('Radar')}</h1>],
[
{
name: 'column_config',
config: {
type: 'ColumnConfigControl',
label: t('Customize Metrics'),
description: t('Further customize how to display each metric'),
renderTrigger: true,
configFormLayout: {
[GenericDataType.NUMERIC]: [
[radarMetricMaxValue]
],
},
mapStateToProps(explore, control, chart) {
const values = explore?.controls?.metrics?.value as QueryFormMetric[];
const metricColumn = values.map((value) => {
if (typeof value === "string") {
return value;
}
return value.label;
});
return {
queryResponse: chart?.queriesResponse?.[0] as ChartDataResponseResult | undefined,
appliedColumnNames: metricColumn,
};
},
},
},
],
[
{
name: 'is_circle',
Expand All @@ -133,7 +197,7 @@ const config: ControlPanelConfig = {
label: t('Circle radar shape'),
renderTrigger: true,
default: isCircle,
description: t('Whether to display the labels.'),
description: t("Radar render type, whether to display 'circle' shape."),
},
},
],
Expand Down
Binary file modified plugins/plugin-chart-echarts/src/Radar/images/thumbnail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions plugins/plugin-chart-echarts/src/Radar/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
import buildQuery from './buildQuery';
import controlPanel from './controlPanel';
import transformProps from './transformProps';
Expand All @@ -44,7 +44,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
controlPanel,
loadChart: () => import('./EchartsRadar'),
metadata: new ChartMetadata({
// behaviors: [Behavior.CROSS_FILTER],
behaviors: [Behavior.CROSS_FILTER],
credits: ['https://echarts.apache.org'],
description: 'Radar Chart (Apache ECharts)',
name: t('Radar Chart'),
Expand Down

0 comments on commit 3d24cd3

Please sign in to comment.