Rename FormData to ChartFormData (#100)

This commit is contained in:
Krist Wongsuphasawat 2019-02-15 16:03:15 -08:00 committed by Yongjie Zhao
parent dd9cf0deb6
commit e4cd35a02e
19 changed files with 58 additions and 52 deletions

View File

@ -8,15 +8,15 @@ import {
} from '@superset-ui/connection'; } from '@superset-ui/connection';
import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton'; import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton';
import { AnnotationLayerMetadata } from '../types/Annotation'; import { AnnotationLayerMetadata } from '../types/Annotation';
import { FormData } from '../types/FormData'; import { ChartFormData } from '../types/ChartFormData';
export type SliceIdAndOrFormData = export type SliceIdAndOrFormData =
| { | {
sliceId: number; sliceId: number;
formData?: Partial<FormData>; formData?: Partial<ChartFormData>;
} }
| { | {
formData: FormData; formData: ChartFormData;
}; };
interface AnnotationData { interface AnnotationData {
@ -26,7 +26,7 @@ interface AnnotationData {
interface ChartData { interface ChartData {
annotationData: AnnotationData; annotationData: AnnotationData;
datasource: object; datasource: object;
formData: FormData; formData: ChartFormData;
queryData: object; queryData: object;
} }
@ -42,7 +42,7 @@ export default class ChartClient {
this.client = client; this.client = client;
} }
loadFormData(input: SliceIdAndOrFormData, options?: RequestConfig): Promise<FormData> { loadFormData(input: SliceIdAndOrFormData, options?: RequestConfig): Promise<ChartFormData> {
/* If sliceId is provided, use it to fetch stored formData from API */ /* If sliceId is provided, use it to fetch stored formData from API */
if ('sliceId' in input) { if ('sliceId' in input) {
const promise = this.client const promise = this.client
@ -57,7 +57,7 @@ export default class ChartClient {
* If formData is also specified, override API result * If formData is also specified, override API result
* with user-specified formData * with user-specified formData
*/ */
return promise.then((dbFormData: FormData) => ({ return promise.then((dbFormData: ChartFormData) => ({
...dbFormData, ...dbFormData,
...input.formData, ...input.formData,
})); }));
@ -65,11 +65,11 @@ export default class ChartClient {
/* If sliceId is not provided, returned formData wrapped in a Promise */ /* If sliceId is not provided, returned formData wrapped in a Promise */
return input.formData return input.formData
? Promise.resolve(input.formData as FormData) ? Promise.resolve(input.formData as ChartFormData)
: Promise.reject(new Error('At least one of sliceId or formData must be specified')); : Promise.reject(new Error('At least one of sliceId or formData must be specified'));
} }
loadQueryData(formData: FormData, options?: RequestConfig): Promise<object> { loadQueryData(formData: ChartFormData, options?: RequestConfig): Promise<object> {
const buildQuery = getChartBuildQueryRegistry().get(formData.viz_type); const buildQuery = getChartBuildQueryRegistry().get(formData.viz_type);
if (buildQuery) { if (buildQuery) {
return this.client return this.client

View File

@ -21,5 +21,5 @@ export { default as DatasourceKey } from './query/DatasourceKey';
export * from './types/Annotation'; export * from './types/Annotation';
export * from './types/Datasource'; export * from './types/Datasource';
export * from './types/FormData'; export * from './types/ChartFormData';
export * from './types/Query'; export * from './types/Query';

View File

@ -5,7 +5,7 @@ import getChartMetadataRegistry from '../registries/ChartMetadataRegistrySinglet
import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton'; import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton';
import getChartComponentRegistry from '../registries/ChartComponentRegistrySingleton'; import getChartComponentRegistry from '../registries/ChartComponentRegistrySingleton';
import getChartTransformPropsRegistry from '../registries/ChartTransformPropsRegistrySingleton'; import getChartTransformPropsRegistry from '../registries/ChartTransformPropsRegistrySingleton';
import { FormData } from '../types/FormData'; import { ChartFormData } from '../types/ChartFormData';
import { QueryContext } from '../types/Query'; import { QueryContext } from '../types/Query';
const IDENTITY = (x: any) => x; const IDENTITY = (x: any) => x;
@ -13,7 +13,7 @@ const IDENTITY = (x: any) => x;
type PromiseOrValue<T> = Promise<T> | T; type PromiseOrValue<T> = Promise<T> | T;
type PromiseOrValueLoader<T> = () => PromiseOrValue<T> | PromiseOrValue<{ default: T }>; type PromiseOrValueLoader<T> = () => PromiseOrValue<T> | PromiseOrValue<{ default: T }>;
export type BuildQueryFunction<T extends FormData> = (formData: T) => QueryContext; export type BuildQueryFunction<T extends ChartFormData> = (formData: T) => QueryContext;
export type TransformPropsFunction = ( export type TransformPropsFunction = (
chartProps: ChartProps, chartProps: ChartProps,
@ -21,7 +21,7 @@ export type TransformPropsFunction = (
[key: string]: any; [key: string]: any;
}; };
interface ChartPluginConfig<T extends FormData> { interface ChartPluginConfig<T extends ChartFormData> {
metadata: ChartMetadata; metadata: ChartMetadata;
// use buildQuery for immediate value // use buildQuery for immediate value
buildQuery?: BuildQueryFunction<T>; buildQuery?: BuildQueryFunction<T>;
@ -37,7 +37,7 @@ interface ChartPluginConfig<T extends FormData> {
loadChart?: PromiseOrValueLoader<Function>; loadChart?: PromiseOrValueLoader<Function>;
} }
export default class ChartPlugin<T extends FormData = FormData> extends Plugin { export default class ChartPlugin<T extends ChartFormData = ChartFormData> extends Plugin {
metadata: ChartMetadata; metadata: ChartMetadata;
loadBuildQuery?: PromiseOrValueLoader<BuildQueryFunction<T>>; loadBuildQuery?: PromiseOrValueLoader<BuildQueryFunction<T>>;
loadTransformProps: PromiseOrValueLoader<TransformPropsFunction>; loadTransformProps: PromiseOrValueLoader<TransformPropsFunction>;

View File

@ -1,4 +1,4 @@
import { FormData } from '../types/FormData'; import { ChartFormData } from '../types/ChartFormData';
import { MetricKey, Metric, FormDataMetric, AdhocMetric, ExpressionType } from '../types/Metric'; import { MetricKey, Metric, FormDataMetric, AdhocMetric, ExpressionType } from '../types/Metric';
export const LABEL_MAX_LENGTH = 43; export const LABEL_MAX_LENGTH = 43;
@ -7,7 +7,7 @@ export default class Metrics {
// Use Array to maintain insertion order for metrics that are order sensitive // Use Array to maintain insertion order for metrics that are order sensitive
private metrics: Metric[]; private metrics: Metric[];
constructor(formData: FormData) { constructor(formData: ChartFormData) {
this.metrics = []; this.metrics = [];
Object.keys(MetricKey).forEach(key => { Object.keys(MetricKey).forEach(key => {
const metric = formData[MetricKey[key as keyof typeof MetricKey]]; const metric = formData[MetricKey[key as keyof typeof MetricKey]];

View File

@ -1,12 +1,12 @@
import buildQueryObject from './buildQueryObject'; import buildQueryObject from './buildQueryObject';
import DatasourceKey from './DatasourceKey'; import DatasourceKey from './DatasourceKey';
import { FormData } from '../types/FormData'; import { ChartFormData } from '../types/ChartFormData';
import { QueryContext, QueryObject } from '../types/Query'; import { QueryContext, QueryObject } from '../types/Query';
const WRAP_IN_ARRAY = (baseQueryObject: QueryObject) => [baseQueryObject]; const WRAP_IN_ARRAY = (baseQueryObject: QueryObject) => [baseQueryObject];
export default function buildQueryContext( export default function buildQueryContext(
formData: FormData, formData: ChartFormData,
buildQuery: (baseQueryObject: QueryObject) => QueryObject[] = WRAP_IN_ARRAY, buildQuery: (baseQueryObject: QueryObject) => QueryObject[] = WRAP_IN_ARRAY,
): QueryContext { ): QueryContext {
return { return {

View File

@ -1,8 +1,8 @@
import Metrics from './Metrics'; import Metrics from './Metrics';
import { QueryObject } from '../types/Query'; import { QueryObject } from '../types/Query';
import { FormData } from '../types/FormData'; import { ChartFormData } from '../types/ChartFormData';
function getGranularity(formData: FormData): string { function getGranularity(formData: ChartFormData): string {
return 'granularity_sqla' in formData ? formData.granularity_sqla : formData.granularity; return 'granularity_sqla' in formData ? formData.granularity_sqla : formData.granularity;
} }
@ -11,7 +11,7 @@ function getGranularity(formData: FormData): string {
// buildQuery method for each viz type (see `wordcloud/buildQuery.ts` for an example). // buildQuery method for each viz type (see `wordcloud/buildQuery.ts` for an example).
// Note the type of the formData argument passed in here is the type of the formData for a // Note the type of the formData argument passed in here is the type of the formData for a
// specific viz, which is a subtype of the generic formData shared among all viz types. // specific viz, which is a subtype of the generic formData shared among all viz types.
export default function buildQueryObject<T extends FormData>(formData: T): QueryObject { export default function buildQueryObject<T extends ChartFormData>(formData: T): QueryObject {
return { return {
granularity: getGranularity(formData), granularity: getGranularity(formData),
metrics: new Metrics(formData).getMetrics(), metrics: new Metrics(formData).getMetrics(),

View File

@ -28,4 +28,4 @@ type DruidFormData = {
granularity: string; granularity: string;
} & BaseFormData; } & BaseFormData;
export type FormData = SqlaFormData | DruidFormData; export type ChartFormData = SqlaFormData | DruidFormData;

View File

@ -1,3 +1,5 @@
/* eslint-disable no-unused-vars */
export enum ColumnType { export enum ColumnType {
DOUBLE = 'DOUBLE', DOUBLE = 'DOUBLE',
FLOAT = 'FLOAT', FLOAT = 'FLOAT',

View File

@ -1,4 +1,4 @@
/* eslint-disable import/prefer-default-export */ /* eslint-disable import/prefer-default-export, no-unused-vars */
export enum DatasourceType { export enum DatasourceType {
Table = 'table', Table = 'table',

View File

@ -1,3 +1,5 @@
/* eslint-disable no-unused-vars */
import { Column } from './Column'; import { Column } from './Column';
// Note that the values of MetricKeys are lower_snake_case because they're // Note that the values of MetricKeys are lower_snake_case because they're

View File

@ -1,6 +1,6 @@
import ChartProps from '../models/ChartProps'; import ChartProps from '../models/ChartProps';
import { DatasourceType } from './Datasource'; import { DatasourceType } from './Datasource';
import { FormData } from './FormData'; import { ChartFormData } from './ChartFormData';
import { Metric } from './Metric'; import { Metric } from './Metric';
export interface QueryObject { export interface QueryObject {
@ -17,7 +17,7 @@ export interface QueryContext {
queries: QueryObject[]; queries: QueryObject[];
} }
export type BuildQueryFunction<T extends FormData> = (formData: T) => QueryContext; export type BuildQueryFunction<T extends ChartFormData> = (formData: T) => QueryContext;
export type TransformPropsFunction = ( export type TransformPropsFunction = (
chartProps: ChartProps, chartProps: ChartProps,

View File

@ -1,7 +1,12 @@
import fetchMock from 'fetch-mock'; import fetchMock from 'fetch-mock';
import { SupersetClientClass, SupersetClient } from '@superset-ui/connection'; import { SupersetClientClass, SupersetClient } from '@superset-ui/connection';
import { ChartClient, getChartBuildQueryRegistry, buildQueryContext, FormData } from '../../src'; import {
ChartClient,
getChartBuildQueryRegistry,
buildQueryContext,
ChartFormData,
} from '../../src';
import { SliceIdAndOrFormData } from '../../src/clients/ChartClient'; import { SliceIdAndOrFormData } from '../../src/clients/ChartClient';
import { LOGIN_GLOB } from '../../../superset-ui-connection/test/fixtures/constants'; import { LOGIN_GLOB } from '../../../superset-ui-connection/test/fixtures/constants';
@ -90,7 +95,7 @@ describe('ChartClient', () => {
describe('.loadQueryData(formData, options)', () => { describe('.loadQueryData(formData, options)', () => {
it('returns a promise of query data for known chart type', () => { it('returns a promise of query data for known chart type', () => {
getChartBuildQueryRegistry().registerValue('word_cloud', (formData: FormData) => getChartBuildQueryRegistry().registerValue('word_cloud', (formData: ChartFormData) =>
buildQueryContext(formData), buildQueryContext(formData),
); );
fetchMock.post('glob:*/api/v1/query/', { fetchMock.post('glob:*/api/v1/query/', {
@ -196,7 +201,7 @@ describe('ChartClient', () => {
amet: true, amet: true,
}); });
getChartBuildQueryRegistry().registerValue('line', (formData: FormData) => getChartBuildQueryRegistry().registerValue('line', (formData: ChartFormData) =>
buildQueryContext(formData), buildQueryContext(formData),
); );

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { mount, shallow } from 'enzyme'; import { mount, shallow } from 'enzyme';
import { ChartProps, ChartMetadata, ChartPlugin, FormData, SuperChart } from '../../src'; import { ChartProps, ChartMetadata, ChartPlugin, ChartFormData, SuperChart } from '../../src';
describe('SuperChart', () => { describe('SuperChart', () => {
const TestComponent = (props: any) => ( const TestComponent = (props: any) => (
@ -8,7 +8,7 @@ describe('SuperChart', () => {
); );
const chartProps = new ChartProps(); const chartProps = new ChartProps();
class MyChartPlugin extends ChartPlugin<FormData> { class MyChartPlugin extends ChartPlugin<ChartFormData> {
constructor() { constructor() {
super({ super({
metadata: new ChartMetadata({ metadata: new ChartMetadata({
@ -21,7 +21,7 @@ describe('SuperChart', () => {
} }
} }
class SecondChartPlugin extends ChartPlugin<FormData> { class SecondChartPlugin extends ChartPlugin<ChartFormData> {
constructor() { constructor() {
super({ super({
metadata: new ChartMetadata({ metadata: new ChartMetadata({
@ -34,7 +34,7 @@ describe('SuperChart', () => {
} }
} }
class SlowChartPlugin extends ChartPlugin<FormData> { class SlowChartPlugin extends ChartPlugin<ChartFormData> {
constructor() { constructor() {
super({ super({
metadata: new ChartMetadata({ metadata: new ChartMetadata({

View File

@ -1,7 +1,7 @@
import { import {
ChartPlugin, ChartPlugin,
ChartMetadata, ChartMetadata,
FormData, ChartFormData,
DatasourceType, DatasourceType,
ChartProps, ChartProps,
BuildQueryFunction, BuildQueryFunction,
@ -20,7 +20,7 @@ describe('ChartPlugin', () => {
describe('new ChartPlugin()', () => { describe('new ChartPlugin()', () => {
const FakeChart = () => 'test'; const FakeChart = () => 'test';
const buildQuery = (_: FormData) => ({ const buildQuery = (_: ChartFormData) => ({
datasource: { id: 1, type: DatasourceType.Table }, datasource: { id: 1, type: DatasourceType.Table },
queries: [{ granularity: 'day' }], queries: [{ granularity: 'day' }],
}); });
@ -53,7 +53,7 @@ describe('ChartPlugin', () => {
loadBuildQuery: () => buildQuery, loadBuildQuery: () => buildQuery,
}); });
if (typeof plugin.loadBuildQuery === 'function') { if (typeof plugin.loadBuildQuery === 'function') {
const fn = plugin.loadBuildQuery() as BuildQueryFunction<FormData>; const fn = plugin.loadBuildQuery() as BuildQueryFunction<ChartFormData>;
expect(fn(FORM_DATA).queries[0]).toEqual({ granularity: 'day' }); expect(fn(FORM_DATA).queries[0]).toEqual({ granularity: 'day' });
} }
}); });
@ -65,7 +65,7 @@ describe('ChartPlugin', () => {
buildQuery, buildQuery,
}); });
if (typeof plugin.loadBuildQuery === 'function') { if (typeof plugin.loadBuildQuery === 'function') {
const fn = plugin.loadBuildQuery() as BuildQueryFunction<FormData>; const fn = plugin.loadBuildQuery() as BuildQueryFunction<ChartFormData>;
expect(fn(FORM_DATA).queries[0]).toEqual({ granularity: 'day' }); expect(fn(FORM_DATA).queries[0]).toEqual({ granularity: 'day' });
} }
}); });

View File

@ -1,4 +1,4 @@
/* eslint-disable import/prefer-default-export */ /* eslint-disable import/prefer-default-export, no-unused-vars */
export enum OverwritePolicy { export enum OverwritePolicy {
ALLOW = 'ALLOW', ALLOW = 'ALLOW',

View File

@ -1,12 +0,0 @@
import { FormData as GenericFormData } from '@superset-ui/chart';
// FormData specific to the wordcloud viz
interface WordCloudFormData {
series: string;
}
// FormData for wordcloud contains both common properties of all form data
// and properties specific to wordcloud vizzes
type FormData = GenericFormData & WordCloudFormData;
export default FormData;

View File

@ -0,0 +1,9 @@
import { ChartFormData } from '@superset-ui/chart';
// FormData for wordcloud contains both common properties of all form data
// and properties specific to wordcloud vizzes
type WordCloudFormData = ChartFormData & {
series: string;
};
export default WordCloudFormData;

View File

@ -1,7 +1,7 @@
import { buildQueryContext } from '@superset-ui/chart'; import { buildQueryContext } from '@superset-ui/chart';
import FormData from './FormData'; import WordCloudFormData from './WordCloudFormData';
export default function buildQuery(formData: FormData) { export default function buildQuery(formData: WordCloudFormData) {
// Set the single QueryObject's groupby field with series in formData // Set the single QueryObject's groupby field with series in formData
return buildQueryContext(formData, baseQueryObject => [ return buildQueryContext(formData, baseQueryObject => [
{ {

View File

@ -1,7 +1,7 @@
import { t } from '@superset-ui/translation'; import { t } from '@superset-ui/translation';
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart'; import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
import buildQuery from './buildQuery'; import buildQuery from './buildQuery';
import FormData from './FormData'; import WordCloudFormData from './WordCloudFormData';
import transformProps from './transformProps'; import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png'; import thumbnail from './images/thumbnail.png';
@ -12,7 +12,7 @@ const metadata = new ChartMetadata({
thumbnail, thumbnail,
}); });
export default class WordCloudChartPlugin extends ChartPlugin<FormData> { export default class WordCloudChartPlugin extends ChartPlugin<WordCloudFormData> {
constructor() { constructor() {
super({ super({
buildQuery, buildQuery,