mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
chore(core): remove queryData and replace with queriesData (#874)
* feat: remove single queryData from api * feat: migrate old plugins to queriesData api property * test: fix tests * test: fix tests * fix: fix storybook * lint: fix lint * refactor: fix CR notes * refactor: remove queryData from Chart Provider
This commit is contained in:
parent
b9b7f767df
commit
16225132c2
@ -24,9 +24,9 @@ Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
||||
|
@ -35,8 +35,8 @@ export default function transformProps(chartProps: ChartProps) {
|
||||
* the chart is located
|
||||
* - `formData`: the chart data request payload that was sent to the
|
||||
* backend.
|
||||
* - `queryData`: the chart data response payload that was received
|
||||
* from the backend. Some notable properties of `queryData`:
|
||||
* - `queriesData`: the chart data response payload that was received
|
||||
* from the backend. Some notable properties of `queriesData`:
|
||||
* - `data`: an array with data, each row with an object mapping
|
||||
* the column/alias to its value. Example:
|
||||
* `[{ col1: 'abc', metric1: 10 }, { col1: 'xyz', metric1: 20 }]`
|
||||
@ -48,9 +48,9 @@ export default function transformProps(chartProps: ChartProps) {
|
||||
* function during development with hot reloading, changes won't
|
||||
* be seen until restarting the development server.
|
||||
*/
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
const { width, height, formData, queriesData } = chartProps;
|
||||
const { boldText, headerFontSize, headerText } = formData;
|
||||
const data = queryData.data as TimeseriesDataRecord[];
|
||||
const data = queriesData[0].data as TimeseriesDataRecord[];
|
||||
|
||||
console.log('formData via TransformProps.ts', formData);
|
||||
|
||||
|
@ -16,9 +16,9 @@ describe('<%= packageLabel %> tranformProps', () => {
|
||||
formData,
|
||||
width: 800,
|
||||
height: 600,
|
||||
queryData: {
|
||||
queriesData: [{
|
||||
data: [{ name: 'Hulk', sum__num: 1<%if (chartType === 'timeseries') { %>, __timestamp: 599616000000<% } %> }],
|
||||
},
|
||||
}],
|
||||
});
|
||||
|
||||
it('should tranform chart props for viz', () => {
|
||||
|
@ -29,7 +29,7 @@ export interface ChartData {
|
||||
annotationData: AnnotationData;
|
||||
datasource: PlainObject;
|
||||
formData: QueryFormData;
|
||||
queryData: QueryData;
|
||||
queriesData: QueryData[];
|
||||
}
|
||||
|
||||
export default class ChartClient {
|
||||
@ -76,7 +76,7 @@ export default class ChartClient {
|
||||
async loadQueryData(
|
||||
formData: QueryFormData,
|
||||
options?: Partial<RequestConfig>,
|
||||
): Promise<QueryData> {
|
||||
): Promise<QueryData[]> {
|
||||
const { viz_type: visType } = formData;
|
||||
const metaDataRegistry = getChartMetadataRegistry();
|
||||
const buildQueryRegistry = getChartBuildQueryRegistry();
|
||||
@ -101,8 +101,7 @@ export default class ChartClient {
|
||||
};
|
||||
|
||||
return this.client.post(requestConfig).then(response => {
|
||||
// let's assume response.json always has the shape of QueryData
|
||||
return response.json as QueryData;
|
||||
return Array.isArray(response.json) ? response.json : [response.json];
|
||||
});
|
||||
}
|
||||
|
||||
@ -156,11 +155,11 @@ export default class ChartClient {
|
||||
this.loadAnnotations(formData.annotation_layers),
|
||||
this.loadDatasource(formData.datasource),
|
||||
this.loadQueryData(formData),
|
||||
]).then(([annotationData, datasource, queryData]) => ({
|
||||
]).then(([annotationData, datasource, queriesData]) => ({
|
||||
annotationData,
|
||||
datasource,
|
||||
formData,
|
||||
queryData,
|
||||
queriesData,
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ import { QueryData } from '../types/QueryResponse';
|
||||
|
||||
interface Payload {
|
||||
formData: Partial<QueryFormData>;
|
||||
queryData: QueryData;
|
||||
queriesData: QueryData[];
|
||||
datasource?: Datasource;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ export type ChartDataProviderProps =
|
||||
formDataRequestOptions?: Partial<RequestConfig>;
|
||||
/** Hook to override the datasource request config. */
|
||||
datasourceRequestOptions?: Partial<RequestConfig>;
|
||||
/** Hook to override the queryData request config. */
|
||||
/** Hook to override the queriesData request config. */
|
||||
queryRequestOptions?: Partial<RequestConfig>;
|
||||
};
|
||||
|
||||
@ -90,12 +90,12 @@ class ChartDataProvider extends React.PureComponent<
|
||||
: Promise.resolve(undefined),
|
||||
this.chartClient.loadQueryData(formData, queryRequestOptions),
|
||||
]).then(
|
||||
([datasource, queryData]) =>
|
||||
([datasource, queriesData]) =>
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
({
|
||||
datasource,
|
||||
formData,
|
||||
queryData,
|
||||
queriesData,
|
||||
} as Payload),
|
||||
),
|
||||
)
|
||||
|
@ -111,14 +111,12 @@ export default class SuperChart extends React.PureComponent<Props, {}> {
|
||||
FallbackComponent,
|
||||
onErrorBoundary,
|
||||
Wrapper,
|
||||
queryData,
|
||||
queriesData,
|
||||
...rest
|
||||
} = this.props as PropsWithDefault;
|
||||
|
||||
const chartProps = this.createChartProps({
|
||||
...rest,
|
||||
queryData,
|
||||
queriesData,
|
||||
height,
|
||||
width,
|
||||
@ -126,14 +124,10 @@ export default class SuperChart extends React.PureComponent<Props, {}> {
|
||||
|
||||
let chart;
|
||||
// Render the no results component if the query data is null or empty
|
||||
const noResultQuery =
|
||||
!queryData ||
|
||||
!queryData.data ||
|
||||
(Array.isArray(queryData.data) && queryData.data.length === 0);
|
||||
const noResultQueries =
|
||||
!queriesData ||
|
||||
queriesData.every(({ data }) => !data || (Array.isArray(data) && data.length === 0));
|
||||
if (noResultQuery && noResultQueries) {
|
||||
if (noResultQueries) {
|
||||
chart = <NoResultsComponent id={id} className={className} height={height} width={width} />;
|
||||
} else {
|
||||
const chartWithoutWrapper = (
|
||||
|
@ -47,10 +47,7 @@ export interface ChartPropsConfig {
|
||||
height?: number;
|
||||
/** Programmatic overrides such as event handlers, renderers */
|
||||
hooks?: Hooks;
|
||||
/** Formerly called "payload". This property going to be deprecated because
|
||||
* contains only first item in response data array (use `queriesData` instead) */
|
||||
queryData?: QueryData;
|
||||
/** Formerly called "payload" */
|
||||
/** The data returned for all queries objects in the request */
|
||||
queriesData?: QueryData[];
|
||||
/** Chart width */
|
||||
width?: number;
|
||||
@ -78,8 +75,6 @@ export default class ChartProps {
|
||||
|
||||
hooks: Hooks;
|
||||
|
||||
queryData: QueryData;
|
||||
|
||||
queriesData: QueryData[];
|
||||
|
||||
width: number;
|
||||
@ -91,7 +86,6 @@ export default class ChartProps {
|
||||
formData = {},
|
||||
hooks = {},
|
||||
initialValues = {},
|
||||
queryData = {},
|
||||
queriesData = [],
|
||||
width = DEFAULT_WIDTH,
|
||||
height = DEFAULT_HEIGHT,
|
||||
@ -105,7 +99,6 @@ export default class ChartProps {
|
||||
this.rawFormData = formData;
|
||||
this.hooks = hooks;
|
||||
this.initialValues = initialValues;
|
||||
this.queryData = queryData;
|
||||
this.queriesData = queriesData;
|
||||
}
|
||||
}
|
||||
@ -119,20 +112,9 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
|
||||
input => input.height,
|
||||
input => input.hooks,
|
||||
input => input.initialValues,
|
||||
input => input.queryData,
|
||||
input => input.queriesData,
|
||||
input => input.width,
|
||||
(
|
||||
annotationData,
|
||||
datasource,
|
||||
formData,
|
||||
height,
|
||||
hooks,
|
||||
initialValues,
|
||||
queryData,
|
||||
queriesData,
|
||||
width,
|
||||
) =>
|
||||
(annotationData, datasource, formData, height, hooks, initialValues, queriesData, width) =>
|
||||
new ChartProps({
|
||||
annotationData,
|
||||
datasource,
|
||||
@ -140,7 +122,6 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
|
||||
height,
|
||||
hooks,
|
||||
initialValues,
|
||||
queryData,
|
||||
queriesData,
|
||||
width,
|
||||
}),
|
||||
|
@ -100,10 +100,12 @@ describe('ChartClient', () => {
|
||||
getChartBuildQueryRegistry().registerValue('word_cloud', (formData: QueryFormData) =>
|
||||
buildQueryContext(formData),
|
||||
);
|
||||
fetchMock.post('glob:*/api/v1/chart/data', {
|
||||
field1: 'abc',
|
||||
field2: 'def',
|
||||
});
|
||||
fetchMock.post('glob:*/api/v1/chart/data', [
|
||||
{
|
||||
field1: 'abc',
|
||||
field2: 'def',
|
||||
},
|
||||
]);
|
||||
|
||||
return expect(
|
||||
chartClient.loadQueryData({
|
||||
@ -111,10 +113,12 @@ describe('ChartClient', () => {
|
||||
viz_type: 'word_cloud',
|
||||
datasource: '1__table',
|
||||
}),
|
||||
).resolves.toEqual({
|
||||
field1: 'abc',
|
||||
field2: 'def',
|
||||
});
|
||||
).resolves.toEqual([
|
||||
{
|
||||
field1: 'abc',
|
||||
field2: 'def',
|
||||
},
|
||||
]);
|
||||
});
|
||||
it('returns a promise that rejects for unknown chart type', () =>
|
||||
expect(
|
||||
@ -151,10 +155,12 @@ describe('ChartClient', () => {
|
||||
viz_type: 'word_cloud_legacy',
|
||||
datasource: '1__table',
|
||||
}),
|
||||
).resolves.toEqual({
|
||||
field1: 'abc',
|
||||
field2: 'def',
|
||||
});
|
||||
).resolves.toEqual([
|
||||
{
|
||||
field1: 'abc',
|
||||
field2: 'def',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@ -259,11 +265,13 @@ describe('ChartClient', () => {
|
||||
datasource: '1__table',
|
||||
color: 'living-coral',
|
||||
},
|
||||
queryData: {
|
||||
lorem: 'ipsum',
|
||||
dolor: 'sit',
|
||||
amet: true,
|
||||
},
|
||||
queriesData: [
|
||||
{
|
||||
lorem: 'ipsum',
|
||||
dolor: 'sit',
|
||||
amet: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -17,8 +17,12 @@ function createPromise<T>(input: T) {
|
||||
return Promise.resolve(input);
|
||||
}
|
||||
|
||||
function createArrayPromise<T>(input: T) {
|
||||
return Promise.resolve([input]);
|
||||
}
|
||||
|
||||
const mockLoadDatasource = jest.fn<Promise<unknown>, unknown[]>(createPromise);
|
||||
const mockLoadQueryData = jest.fn<Promise<unknown>, unknown[]>(createPromise);
|
||||
const mockLoadQueryData = jest.fn<Promise<unknown>, unknown[]>(createArrayPromise);
|
||||
|
||||
// ChartClient is now a mock
|
||||
jest.mock('@superset-ui/core/src/chart/clients/ChartClient', () =>
|
||||
@ -202,7 +206,7 @@ describe('ChartDataProvider', () => {
|
||||
payload: {
|
||||
formData: props.formData,
|
||||
datasource: props.formData.datasource,
|
||||
queryData: props.formData,
|
||||
queriesData: [props.formData],
|
||||
},
|
||||
});
|
||||
done();
|
||||
@ -258,7 +262,7 @@ describe('ChartDataProvider', () => {
|
||||
expect(onLoaded.mock.calls[0][0]).toEqual({
|
||||
formData: props.formData,
|
||||
datasource: props.formData.datasource,
|
||||
queryData: props.formData,
|
||||
queriesData: [props.formData],
|
||||
});
|
||||
done();
|
||||
}, 0);
|
||||
|
@ -73,7 +73,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.BUGGY}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width="200"
|
||||
height="200"
|
||||
/>,
|
||||
@ -91,7 +91,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.BUGGY}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width="200"
|
||||
height="200"
|
||||
FallbackComponent={CustomFallbackComponent}
|
||||
@ -109,7 +109,7 @@ describe('SuperChart', () => {
|
||||
mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.BUGGY}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width="200"
|
||||
height="200"
|
||||
onErrorBoundary={handleError}
|
||||
@ -129,7 +129,7 @@ describe('SuperChart', () => {
|
||||
<SuperChart
|
||||
disableErrorBoundary
|
||||
chartType={ChartKeys.BUGGY}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width="200"
|
||||
height="200"
|
||||
onErrorBoundary={inactiveErrorHandler}
|
||||
@ -148,7 +148,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width={101}
|
||||
height={118}
|
||||
formData={{ abc: 1 }}
|
||||
@ -184,7 +184,6 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERIES_DATA[0]}
|
||||
queriesData={DEFAULT_QUERIES_DATA}
|
||||
width={101}
|
||||
height={118}
|
||||
@ -200,25 +199,12 @@ describe('SuperChart', () => {
|
||||
});
|
||||
|
||||
describe('supports NoResultsComponent', () => {
|
||||
it('renders NoResultsComponent when queryData is missing', () => {
|
||||
it('renders NoResultsComponent when queriesData is missing', () => {
|
||||
const wrapper = mount(<SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />);
|
||||
|
||||
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders NoResultsComponent when queryData data is null', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={{ data: null }}
|
||||
width="200"
|
||||
height="200"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders NoResultsComponent when queriesData data is null', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
@ -231,33 +217,6 @@ describe('SuperChart', () => {
|
||||
|
||||
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders NoResultsComponent when queryData data is empty', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={{ data: [] }}
|
||||
width="200"
|
||||
height="200"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders NoResultsComponent when queryData and queriesData data is empty (backward compatibility)', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={{ data: [] }}
|
||||
queriesData={[{ data: [] }]}
|
||||
width="200"
|
||||
height="200"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('supports dynamic width and/or height', () => {
|
||||
@ -265,7 +224,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width={100}
|
||||
height={100}
|
||||
/>,
|
||||
@ -281,7 +240,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
width="100%"
|
||||
height="100%"
|
||||
@ -299,7 +258,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
width="50%"
|
||||
height="125"
|
||||
@ -320,7 +279,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
width="50"
|
||||
height="25%"
|
||||
@ -341,7 +300,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
/>,
|
||||
);
|
||||
@ -371,7 +330,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width={100}
|
||||
height={100}
|
||||
Wrapper={MyWrapper}
|
||||
@ -391,7 +350,7 @@ describe('SuperChart', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
width="100%"
|
||||
height="100%"
|
||||
|
@ -99,13 +99,13 @@ describe('SuperChartCore', () => {
|
||||
});
|
||||
it('uses preTransformProps when specified', () => {
|
||||
const chartPropsWithPayload = new ChartProps({
|
||||
queryData: { message: 'hulk' },
|
||||
queriesData: [{ message: 'hulk' }],
|
||||
});
|
||||
const wrapper = shallow(
|
||||
<SuperChartCore
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
preTransformProps={() => chartPropsWithPayload}
|
||||
overrideTransformProps={props => props.queryData}
|
||||
overrideTransformProps={props => props.queriesData[0]}
|
||||
/>,
|
||||
);
|
||||
|
||||
|
@ -107,7 +107,7 @@ describe('ChartPlugin', () => {
|
||||
formData: FORM_DATA,
|
||||
width: 400,
|
||||
height: 400,
|
||||
queryData: {},
|
||||
queriesData: [{}],
|
||||
});
|
||||
it('defaults to identity function', () => {
|
||||
const plugin = new ChartPlugin({
|
||||
|
@ -9,6 +9,7 @@ const RAW_DATASOURCE = {
|
||||
};
|
||||
|
||||
const QUERY_DATA = { data: {} };
|
||||
const QUERIES_DATA = [QUERY_DATA];
|
||||
|
||||
describe('ChartProps', () => {
|
||||
it('exists', () => {
|
||||
@ -20,7 +21,7 @@ describe('ChartProps', () => {
|
||||
width: 800,
|
||||
height: 600,
|
||||
formData: RAW_FORM_DATA,
|
||||
queryData: QUERY_DATA,
|
||||
queriesData: QUERIES_DATA,
|
||||
});
|
||||
expect(props).toBeInstanceOf(ChartProps);
|
||||
});
|
||||
@ -30,7 +31,7 @@ describe('ChartProps', () => {
|
||||
height: 600,
|
||||
datasource: RAW_DATASOURCE,
|
||||
formData: RAW_FORM_DATA,
|
||||
queryData: QUERY_DATA,
|
||||
queriesData: QUERIES_DATA,
|
||||
});
|
||||
expect(props.formData.someField as number).toEqual(1);
|
||||
expect(props.datasource.columnFormats).toEqual(RAW_DATASOURCE.column_formats);
|
||||
@ -49,14 +50,14 @@ describe('ChartProps', () => {
|
||||
height: 600,
|
||||
datasource: RAW_DATASOURCE,
|
||||
formData: RAW_FORM_DATA,
|
||||
queryData: QUERY_DATA,
|
||||
queriesData: QUERIES_DATA,
|
||||
});
|
||||
const props2 = selector({
|
||||
width: 800,
|
||||
height: 600,
|
||||
datasource: RAW_DATASOURCE,
|
||||
formData: RAW_FORM_DATA,
|
||||
queryData: QUERY_DATA,
|
||||
queriesData: QUERIES_DATA,
|
||||
});
|
||||
expect(props1).toBe(props2);
|
||||
});
|
||||
@ -66,21 +67,21 @@ describe('ChartProps', () => {
|
||||
height: 600,
|
||||
datasource: RAW_DATASOURCE,
|
||||
formData: RAW_FORM_DATA,
|
||||
queryData: QUERY_DATA,
|
||||
queriesData: QUERIES_DATA,
|
||||
});
|
||||
const props2 = selector({
|
||||
width: 800,
|
||||
height: 600,
|
||||
datasource: RAW_DATASOURCE,
|
||||
formData: { new_field: 3 },
|
||||
queryData: QUERY_DATA,
|
||||
queriesData: QUERIES_DATA,
|
||||
});
|
||||
const props3 = selector({
|
||||
width: 800,
|
||||
height: 600,
|
||||
datasource: RAW_DATASOURCE,
|
||||
formData: RAW_FORM_DATA,
|
||||
queryData: QUERY_DATA,
|
||||
queriesData: QUERIES_DATA,
|
||||
});
|
||||
expect(props1).not.toBe(props2);
|
||||
expect(props1).not.toBe(props3);
|
||||
|
@ -48,11 +48,7 @@ export default function createQueryStory({
|
||||
formData={payload.formData}
|
||||
// @TODO fix typing
|
||||
// all vis's now expect objects but api/v1/ returns an array
|
||||
queryData={
|
||||
Array.isArray(payload.queryData)
|
||||
? payload.queryData[0]
|
||||
: payload.queryData
|
||||
}
|
||||
queriesData={payload.queriesData}
|
||||
/>
|
||||
<br />
|
||||
<Expandable expandableWhat="payload">
|
||||
|
@ -16,7 +16,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
cellSize: 10,
|
||||
cellPadding: 2,
|
||||
|
@ -14,7 +14,7 @@ export const basic = () => (
|
||||
chartType="chord"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
yAxisFormat: '.2f',
|
||||
|
@ -17,7 +17,7 @@ export const basic = () => (
|
||||
chartType="country-map"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
linearColorScheme: 'schemeRdYlBu',
|
||||
numberFormat: '.3s',
|
||||
|
@ -20,7 +20,7 @@ export const basic = () => (
|
||||
chartType="event-flow"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
allColumnsX: 'eventName',
|
||||
entity: 'userId',
|
||||
|
@ -11,5 +11,5 @@ export default {
|
||||
};
|
||||
|
||||
export const basic = () => (
|
||||
<SuperChart chartType="force-directed" width={400} height={400} queryData={{ data }} />
|
||||
<SuperChart chartType="force-directed" width={400} height={400} queriesData={[{ data }]} />
|
||||
);
|
||||
|
@ -33,12 +33,14 @@ export const basic = () => (
|
||||
yAxisFormat: '.3s',
|
||||
yscaleInterval: '1',
|
||||
}}
|
||||
queryData={{
|
||||
data: {
|
||||
records: data,
|
||||
extents: [0.1, 24.9],
|
||||
queriesData={[
|
||||
{
|
||||
data: {
|
||||
records: data,
|
||||
extents: [0.1, 24.9],
|
||||
},
|
||||
},
|
||||
}}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -66,20 +68,22 @@ export const withNullData = () => (
|
||||
yAxisFormat: '.3s',
|
||||
yscaleInterval: '1',
|
||||
}}
|
||||
queryData={{
|
||||
data: {
|
||||
records: [
|
||||
...data,
|
||||
{
|
||||
x: null,
|
||||
y: 'Electricity and heat',
|
||||
v: 25.9,
|
||||
perc: 0.43,
|
||||
rank: 1.0,
|
||||
},
|
||||
],
|
||||
extents: [0.1, 24.9],
|
||||
queriesData={[
|
||||
{
|
||||
data: {
|
||||
records: [
|
||||
...data,
|
||||
{
|
||||
x: null,
|
||||
y: 'Electricity and heat',
|
||||
v: 25.9,
|
||||
perc: 0.43,
|
||||
rank: 1.0,
|
||||
},
|
||||
],
|
||||
extents: [0.1, 24.9],
|
||||
},
|
||||
},
|
||||
}}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="histogram"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
globalOpacity: 1,
|
||||
|
@ -14,7 +14,7 @@ export const basic = () => (
|
||||
chartType="horizon"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
horizonColorScale: 'series',
|
||||
seriesHeight: '25',
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="map-box"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
allColumnsX: 'LON',
|
||||
allColumnsY: 'LAT',
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="paired-t-test"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
groupby: ['name'],
|
||||
liftvaluePrecision: 4,
|
||||
|
@ -14,7 +14,7 @@ export const basic = () => (
|
||||
chartType="parallel-coordinates"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
includeSeries: false,
|
||||
linearColorScheme: 'schemeRdYlBu',
|
||||
|
@ -16,7 +16,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
dateTimeFormat: '%Y-%m-%d',
|
||||
|
@ -23,16 +23,18 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={datasource}
|
||||
queryData={{
|
||||
data: {
|
||||
columns: [
|
||||
['sum__num', 'other'],
|
||||
['sum__num', 'All'],
|
||||
],
|
||||
html:
|
||||
'<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n <thead>\n <tr>\n <th></th>\n <th colspan="2" halign="left">sum__num</th>\n </tr>\n <tr>\n <th>state</th>\n <th>other</th>\n <th>All</th>\n </tr>\n <tr>\n <th>name</th>\n <th></th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>Christopher</th>\n <td>803607</td>\n <td>803607</td>\n </tr>\n <tr>\n <th>David</th>\n <td>673992</td>\n <td>673992</td>\n </tr>\n <tr>\n <th>James</th>\n <td>749686</td>\n <td>749686</td>\n </tr>\n <tr>\n <th>Jennifer</th>\n <td>587540</td>\n <td>587540</td>\n </tr>\n <tr>\n <th>John</th>\n <td>638450</td>\n <td>638450</td>\n </tr>\n <tr>\n <th>Joshua</th>\n <td>548044</td>\n <td>548044</td>\n </tr>\n <tr>\n <th>Matthew</th>\n <td>608212</td>\n <td>608212</td>\n </tr>\n <tr>\n <th>Michael</th>\n <td>1047996</td>\n <td>1047996</td>\n </tr>\n <tr>\n <th>Robert</th>\n <td>575592</td>\n <td>575592</td>\n </tr>\n <tr>\n <th>William</th>\n <td>574464</td>\n <td>574464</td>\n </tr>\n <tr>\n <th>All</th>\n <td>6807583</td>\n <td>6807583</td>\n </tr>\n </tbody>\n</table>',
|
||||
queriesData={[
|
||||
{
|
||||
data: {
|
||||
columns: [
|
||||
['sum__num', 'other'],
|
||||
['sum__num', 'All'],
|
||||
],
|
||||
html:
|
||||
'<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n <thead>\n <tr>\n <th></th>\n <th colspan="2" halign="left">sum__num</th>\n </tr>\n <tr>\n <th>state</th>\n <th>other</th>\n <th>All</th>\n </tr>\n <tr>\n <th>name</th>\n <th></th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>Christopher</th>\n <td>803607</td>\n <td>803607</td>\n </tr>\n <tr>\n <th>David</th>\n <td>673992</td>\n <td>673992</td>\n </tr>\n <tr>\n <th>James</th>\n <td>749686</td>\n <td>749686</td>\n </tr>\n <tr>\n <th>Jennifer</th>\n <td>587540</td>\n <td>587540</td>\n </tr>\n <tr>\n <th>John</th>\n <td>638450</td>\n <td>638450</td>\n </tr>\n <tr>\n <th>Joshua</th>\n <td>548044</td>\n <td>548044</td>\n </tr>\n <tr>\n <th>Matthew</th>\n <td>608212</td>\n <td>608212</td>\n </tr>\n <tr>\n <th>Michael</th>\n <td>1047996</td>\n <td>1047996</td>\n </tr>\n <tr>\n <th>Robert</th>\n <td>575592</td>\n <td>575592</td>\n </tr>\n <tr>\n <th>William</th>\n <td>574464</td>\n <td>574464</td>\n </tr>\n <tr>\n <th>All</th>\n <td>6807583</td>\n <td>6807583</td>\n </tr>\n </tbody>\n</table>',
|
||||
},
|
||||
},
|
||||
}}
|
||||
]}
|
||||
formData={{
|
||||
groupby: ['name'],
|
||||
numberFormat: '.3s',
|
||||
@ -46,16 +48,18 @@ export const withNull = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={datasource}
|
||||
queryData={{
|
||||
data: {
|
||||
columns: [
|
||||
['sum__num', 'other'],
|
||||
['sum__num', 'All'],
|
||||
],
|
||||
html:
|
||||
'<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n <thead>\n <tr>\n <th></th>\n <th colspan="2" halign="left">sum__num</th>\n </tr>\n <tr>\n <th>state</th>\n <th>other</th>\n <th>All</th>\n </tr>\n <tr>\n <th>name</th>\n <th></th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>Christopher</th>\n <td>null</td>\n <td>803607</td>\n </tr>\n <tr>\n <th>David</th>\n <td>null</td>\n <td>673992</td>\n </tr>\n <tr>\n <th>James</th>\n <td>749686</td>\n <td>null</td>\n </tr>\n <tr>\n <th>Jennifer</th>\n <td>587540</td>\n <td>null</td>\n </tr>\n <tr>\n <th>John</th>\n <td>638450</td>\n <td>638450</td>\n </tr>\n <tr>\n <th>Joshua</th>\n <td>null</td>\n <td>548044</td>\n </tr>\n <tr>\n <th>Matthew</th>\n <td>608212</td>\n <td>608212</td>\n </tr>\n <tr>\n <th>Michael</th>\n <td>1047996</td>\n <td>1047996</td>\n </tr>\n <tr>\n <th>Robert</th>\n <td>575592</td>\n <td>575592</td>\n </tr>\n <tr>\n <th>William</th>\n <td>574464</td>\n <td>574464</td>\n </tr>\n <tr>\n <th>All</th>\n <td>6807583</td>\n <td>6807583</td>\n </tr>\n </tbody>\n</table>',
|
||||
queriesData={[
|
||||
{
|
||||
data: {
|
||||
columns: [
|
||||
['sum__num', 'other'],
|
||||
['sum__num', 'All'],
|
||||
],
|
||||
html:
|
||||
'<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n <thead>\n <tr>\n <th></th>\n <th colspan="2" halign="left">sum__num</th>\n </tr>\n <tr>\n <th>state</th>\n <th>other</th>\n <th>All</th>\n </tr>\n <tr>\n <th>name</th>\n <th></th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>Christopher</th>\n <td>null</td>\n <td>803607</td>\n </tr>\n <tr>\n <th>David</th>\n <td>null</td>\n <td>673992</td>\n </tr>\n <tr>\n <th>James</th>\n <td>749686</td>\n <td>null</td>\n </tr>\n <tr>\n <th>Jennifer</th>\n <td>587540</td>\n <td>null</td>\n </tr>\n <tr>\n <th>John</th>\n <td>638450</td>\n <td>638450</td>\n </tr>\n <tr>\n <th>Joshua</th>\n <td>null</td>\n <td>548044</td>\n </tr>\n <tr>\n <th>Matthew</th>\n <td>608212</td>\n <td>608212</td>\n </tr>\n <tr>\n <th>Michael</th>\n <td>1047996</td>\n <td>1047996</td>\n </tr>\n <tr>\n <th>Robert</th>\n <td>575592</td>\n <td>575592</td>\n </tr>\n <tr>\n <th>William</th>\n <td>574464</td>\n <td>574464</td>\n </tr>\n <tr>\n <th>All</th>\n <td>6807583</td>\n <td>6807583</td>\n </tr>\n </tbody>\n</table>',
|
||||
},
|
||||
},
|
||||
}}
|
||||
]}
|
||||
formData={{
|
||||
groupby: ['name'],
|
||||
numberFormat: '.3s',
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="rose"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
dateTimeFormat: '%Y-%m-%d',
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="sankey-loop"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
}}
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="sankey"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
}}
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="sunburst"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
metric: 'sum__SP_POP_TOTL',
|
||||
|
@ -15,17 +15,19 @@ export const basic = () => (
|
||||
chartType="time-table"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{
|
||||
data: {
|
||||
columns: [
|
||||
'East Asia & Pacific',
|
||||
'Latin America & Caribbean',
|
||||
'Middle East & North Africa',
|
||||
'Sub-Saharan Africa',
|
||||
],
|
||||
records: data,
|
||||
queriesData={[
|
||||
{
|
||||
data: {
|
||||
columns: [
|
||||
'East Asia & Pacific',
|
||||
'Latin America & Caribbean',
|
||||
'Middle East & North Africa',
|
||||
'Sub-Saharan Africa',
|
||||
],
|
||||
records: data,
|
||||
},
|
||||
},
|
||||
}}
|
||||
]}
|
||||
formData={{
|
||||
adhocFilters: [],
|
||||
groupby: ['region'],
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="treemap"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
numberFormat: '.3s',
|
||||
|
@ -15,7 +15,7 @@ export const basic = () => (
|
||||
chartType="world-map"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
maxBubbleSize: '25',
|
||||
showBubbles: true,
|
||||
|
@ -64,7 +64,7 @@ export const basicWithTrendline = () => (
|
||||
chartType="big-number"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data: testData }}
|
||||
queriesData={[{ data: testData }]}
|
||||
formData={formData}
|
||||
/>
|
||||
);
|
||||
@ -74,7 +74,7 @@ export const weeklyTimeGranularity = () => (
|
||||
chartType="big-number"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data: testData }}
|
||||
queriesData={[{ data: testData }]}
|
||||
formData={{
|
||||
...formData,
|
||||
timeGrainSqla: 'P1W',
|
||||
@ -87,7 +87,7 @@ export const nullInTheMiddle = () => (
|
||||
chartType="big-number"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data: withNulls(testData, 3) }}
|
||||
queriesData={[{ data: withNulls(testData, 3) }]}
|
||||
formData={formData}
|
||||
/>
|
||||
);
|
||||
@ -97,11 +97,13 @@ export const fixedRange = () => (
|
||||
chartType="big-number"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{
|
||||
data: testData.slice(0, 9),
|
||||
from_dttm: testData[testData.length - 1][TIME_COLUMN],
|
||||
to_dttm: null,
|
||||
}}
|
||||
queriesData={[
|
||||
{
|
||||
data: testData.slice(0, 9),
|
||||
from_dttm: testData[testData.length - 1][TIME_COLUMN],
|
||||
to_dttm: null,
|
||||
},
|
||||
]}
|
||||
formData={{
|
||||
...formData,
|
||||
timeRangeFixed: true,
|
||||
@ -114,11 +116,13 @@ export const noFixedRange = () => (
|
||||
chartType="big-number"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{
|
||||
data: testData.slice(0, 9),
|
||||
from_dttm: testData[testData.length - 1][TIME_COLUMN],
|
||||
to_dttm: testData[0][TIME_COLUMN],
|
||||
}}
|
||||
queriesData={[
|
||||
{
|
||||
data: testData.slice(0, 9),
|
||||
from_dttm: testData[testData.length - 1][TIME_COLUMN],
|
||||
to_dttm: testData[0][TIME_COLUMN],
|
||||
},
|
||||
]}
|
||||
formData={{
|
||||
...formData,
|
||||
timeRangeFixed: false,
|
||||
|
@ -32,7 +32,7 @@ export const totalBasic = () => (
|
||||
chartType="big-number-total"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
metric: 'sum__num',
|
||||
subheader: 'total female participants',
|
||||
@ -47,7 +47,7 @@ export const totalNoData = () => (
|
||||
chartType="big-number-total"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data: [] }}
|
||||
queriesData={[{ data: [] }]}
|
||||
formData={{
|
||||
metric: 'sum__num',
|
||||
subheader: 'total female participants',
|
||||
|
@ -9,7 +9,7 @@ export const controlsShown = () => (
|
||||
datasource={dummyDatasource}
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorCcheme: 'd3Category10',
|
||||
|
@ -9,7 +9,7 @@ export const expanded = () => (
|
||||
datasource={dummyDatasource}
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorCcheme: 'd3Category10',
|
||||
|
@ -10,7 +10,7 @@ export const stacked = () => (
|
||||
datasource={dummyDatasource}
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -9,7 +9,7 @@ export const stackedWithYAxisBounds = () => (
|
||||
datasource={dummyDatasource}
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorCcheme: 'd3Category10',
|
||||
@ -44,7 +44,7 @@ export const stackedWithYAxisBoundsMinOnly = () => (
|
||||
datasource={dummyDatasource}
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorCcheme: 'd3Category10',
|
||||
|
@ -9,12 +9,14 @@ export const barWithPositiveAndNegativeValues = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{
|
||||
data: data.map((group, i) => ({
|
||||
...group,
|
||||
values: group.values.map(pair => ({ ...pair, y: (i % 2 === 0 ? 1 : -1) * pair.y })),
|
||||
})),
|
||||
}}
|
||||
queriesData={[
|
||||
{
|
||||
data: data.map((group, i) => ({
|
||||
...group,
|
||||
values: group.values.map(pair => ({ ...pair, y: (i % 2 === 0 ? 1 : -1) * pair.y })),
|
||||
})),
|
||||
},
|
||||
]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -9,7 +9,7 @@ export const barWithValues = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -9,7 +9,7 @@ export const stackedBarWithValues = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
barStacked: true,
|
||||
bottomMargin: 'auto',
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
vizType: 'box_plot',
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
annotationData: {},
|
||||
bottomMargin: 'auto',
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
markerLabels: '',
|
||||
markerLineLabels: '',
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -8,184 +8,186 @@ export const timeFormat = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{
|
||||
data: [
|
||||
{
|
||||
key: ['Africa and Middle East'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 3985,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 5882,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 7983,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 16462,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 5542,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 2825,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['Asia'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 34837,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 40718,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 58507,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 110120,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 43443,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 33538,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['Australia'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 12975,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 18471,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 17880,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 52204,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 26690,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 16423,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['Europe'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 127029,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 177637,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 172653,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 203654,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 79200,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 45238,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['LatAm'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 22513,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 24594,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 32578,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 34733,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 71696,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 166611,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['North America'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 104596,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 109850,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 136873,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 133243,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 327739,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 162711,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
queriesData={[
|
||||
{
|
||||
data: [
|
||||
{
|
||||
key: ['Africa and Middle East'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 3985,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 5882,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 7983,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 16462,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 5542,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 2825,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['Asia'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 34837,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 40718,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 58507,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 110120,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 43443,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 33538,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['Australia'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 12975,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 18471,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 17880,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 52204,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 26690,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 16423,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['Europe'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 127029,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 177637,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 172653,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 203654,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 79200,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 45238,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['LatAm'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 22513,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 24594,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 32578,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 34733,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 71696,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 166611,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: ['North America'],
|
||||
values: [
|
||||
{
|
||||
x: 1606348800000,
|
||||
y: 104596,
|
||||
},
|
||||
{
|
||||
x: 1606435200000,
|
||||
y: 109850,
|
||||
},
|
||||
{
|
||||
x: 1606521600000,
|
||||
y: 136873,
|
||||
},
|
||||
{
|
||||
x: 1606608000000,
|
||||
y: 133243,
|
||||
},
|
||||
{
|
||||
x: 1606694400000,
|
||||
y: 327739,
|
||||
},
|
||||
{
|
||||
x: 1606780800000,
|
||||
y: 162711,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
formData={{
|
||||
datasource: '24771__table',
|
||||
vizType: 'compare',
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
barstacked: false,
|
||||
bottomMargin: 'auto',
|
||||
|
@ -25,7 +25,7 @@ export const manyBars = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
showBarValue: false,
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
vizType: 'dual_line',
|
||||
|
@ -15,7 +15,7 @@ export const verifyConsistentColors = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
vizType: 'dual_line',
|
||||
@ -29,7 +29,7 @@ export const verifyConsistentColors = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data: reverseData }}
|
||||
queriesData={[{ data: reverseData }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
vizType: 'dual_line',
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -9,7 +9,7 @@ export const logScale = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
richTooltip: true,
|
||||
vizType: 'line',
|
||||
|
@ -9,7 +9,7 @@ export const markers = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -12,7 +12,7 @@ export const yAxisBounds = () => (
|
||||
width={400}
|
||||
height={200}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
richTooltip: true,
|
||||
showLegend: false,
|
||||
@ -25,7 +25,7 @@ export const yAxisBounds = () => (
|
||||
width={400}
|
||||
height={200}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
richTooltip: true,
|
||||
showLegend: false,
|
||||
@ -39,7 +39,7 @@ export const yAxisBounds = () => (
|
||||
width={400}
|
||||
height={200}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
richTooltip: true,
|
||||
showLegend: false,
|
||||
@ -53,7 +53,7 @@ export const yAxisBounds = () => (
|
||||
width={400}
|
||||
height={200}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
richTooltip: true,
|
||||
showLegend: false,
|
||||
@ -67,7 +67,7 @@ export const yAxisBounds = () => (
|
||||
width={400}
|
||||
height={200}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
richTooltip: true,
|
||||
showLegend: true,
|
||||
|
@ -9,7 +9,7 @@ export const basic = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
donut: false,
|
||||
|
@ -8,7 +8,7 @@ export const noData = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data: [] }}
|
||||
queriesData={[{ data: [] }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
donut: false,
|
||||
|
@ -24,7 +24,7 @@ export const WorldMap = () => {
|
||||
chartType="choropleth-map"
|
||||
width={800}
|
||||
height={450}
|
||||
queryData={{ data: useFakeMapData(map) }}
|
||||
queriesData={[{ data: useFakeMapData(map) }]}
|
||||
formData={{
|
||||
map,
|
||||
encoding: {
|
||||
@ -50,7 +50,7 @@ export const USA = () => (
|
||||
chartType="choropleth-map"
|
||||
width={800}
|
||||
height={450}
|
||||
queryData={{ data: useFakeMapData('usa') }}
|
||||
queriesData={[{ data: useFakeMapData('usa') }]}
|
||||
formData={{
|
||||
map: 'usa',
|
||||
encoding: {
|
||||
@ -82,7 +82,7 @@ export const CategoricalColor = () => (
|
||||
chartType="choropleth-map"
|
||||
width={800}
|
||||
height={450}
|
||||
queryData={{ data: useFakeMapData('usa') }}
|
||||
queriesData={[{ data: useFakeMapData('usa') }]}
|
||||
formData={{
|
||||
map: 'usa',
|
||||
encoding: {
|
||||
|
@ -21,7 +21,7 @@ export const BoxPlot = ({ width, height }) => {
|
||||
chartType="echarts-boxplot"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
columns: [],
|
||||
groupby: ['type', 'region'],
|
||||
|
@ -21,7 +21,7 @@ export const WeekdayPie = ({ width, height }) => {
|
||||
chartType="echarts-pie"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data: weekday }}
|
||||
queriesData={[{ data: weekday }]}
|
||||
formData={{
|
||||
colorScheme: 'supersetColors',
|
||||
groupby: ['Day'],
|
||||
@ -50,7 +50,7 @@ export const PopulationPie = ({ width, height }) => {
|
||||
chartType="echarts-pie"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data: population }}
|
||||
queriesData={[{ data: population }]}
|
||||
formData={{
|
||||
colorScheme: 'supersetColors',
|
||||
groupby: ['Country'],
|
||||
|
@ -35,7 +35,7 @@ export const Timeseries = ({ width, height }) => {
|
||||
chartType="echarts-timeseries"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data: queryData }}
|
||||
queriesData={[{ data: queryData }]}
|
||||
formData={{
|
||||
contributionMode: undefined,
|
||||
forecastEnabled,
|
||||
|
@ -40,18 +40,20 @@ function loadData(
|
||||
props: TableChartProps,
|
||||
{ pageLength = 50, rows = 1042, cols = 8, alignPn = false, showCellBars = true },
|
||||
): TableChartProps {
|
||||
if (!props.queryData) return props;
|
||||
const records = props.queryData?.data?.records || [];
|
||||
const columns = props.queryData?.data?.columns || [];
|
||||
if (!props.queriesData || !props.queriesData[0]) return props;
|
||||
const records = props.queriesData?.[0].data?.records || [];
|
||||
const columns = props.queriesData?.[0].data?.columns || [];
|
||||
return {
|
||||
...props,
|
||||
queryData: {
|
||||
...props.queryData,
|
||||
data: {
|
||||
records: expandRecords(records, rows),
|
||||
columns: expandColumns(columns, cols),
|
||||
queriesData: [
|
||||
{
|
||||
...props.queriesData[0],
|
||||
data: {
|
||||
records: expandRecords(records, rows),
|
||||
columns: expandColumns(columns, cols),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
formData: {
|
||||
...props.formData,
|
||||
alignPn,
|
||||
@ -70,7 +72,7 @@ export const basic = ({ width, height }) => (
|
||||
}}
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data: basicData }}
|
||||
queriesData={[{ data: basicData }]}
|
||||
formData={basicFormData}
|
||||
/>
|
||||
);
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -26,7 +26,7 @@ export const basic = ({ width, height }) => (
|
||||
chartType="word-cloud2"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
color: {
|
||||
@ -56,7 +56,7 @@ export const encodesColorByWordLength = ({ width, height }) => (
|
||||
chartType="word-cloud2"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
color: {
|
||||
@ -92,7 +92,7 @@ export const encodesFontByFirstLetter = ({ width, height }) => (
|
||||
chartType="word-cloud2"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
color: {
|
||||
@ -130,7 +130,7 @@ export const legacyShim = ({ width, height }) => (
|
||||
chartType="legacy-word-cloud2"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
metric: 'sum__num',
|
||||
|
@ -23,7 +23,7 @@ export const Select = ({ width, height }) => {
|
||||
chartType="filter_select"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
adhoc_filters: [],
|
||||
extra_filters: [],
|
||||
|
@ -8,7 +8,7 @@ export const basic = () => (
|
||||
chartType="v2-box-plot"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
x: {
|
||||
@ -51,7 +51,7 @@ export const horizontal = () => (
|
||||
chartType="v2-box-plot"
|
||||
width={400}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
y: {
|
||||
|
@ -9,7 +9,7 @@ export const legacy = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
colorScheme: 'd3Category10',
|
||||
groupby: ['region'],
|
||||
|
@ -47,7 +47,7 @@ export default () => (
|
||||
},
|
||||
}}
|
||||
height={400}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
width={400}
|
||||
/>
|
||||
);
|
||||
|
@ -17,7 +17,7 @@ export default () => (
|
||||
width={400}
|
||||
height={200}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
x: {
|
||||
@ -68,7 +68,7 @@ export default () => (
|
||||
width={400}
|
||||
height={200}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
x: {
|
||||
|
@ -12,7 +12,7 @@ export default () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
@ -41,7 +41,7 @@ export default () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
bottomMargin: 'auto',
|
||||
colorScheme: 'd3Category10',
|
||||
|
@ -16,7 +16,7 @@ const missing = () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data: missingData }}
|
||||
queriesData={[{ data: missingData }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
x: {
|
||||
|
@ -11,7 +11,7 @@ export default () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
x: {
|
||||
|
@ -13,7 +13,7 @@ export default () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
x: {
|
||||
|
@ -13,7 +13,7 @@ export default () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
encoding: {
|
||||
x: {
|
||||
|
@ -11,7 +11,7 @@ export default () => (
|
||||
width={400}
|
||||
height={400}
|
||||
datasource={dummyDatasource}
|
||||
queryData={{ data }}
|
||||
queriesData={[{ data }]}
|
||||
formData={{
|
||||
annotationData: {},
|
||||
bottomMargin: 'auto',
|
||||
|
@ -75,9 +75,7 @@ export const dataProvider = () => {
|
||||
height={Number(height)}
|
||||
// @TODO fix typing
|
||||
// all vis's now expect objects but api/v1/ returns an array
|
||||
queryData={
|
||||
Array.isArray(payload.queryData) ? payload.queryData[0] : payload.queryData
|
||||
}
|
||||
queriesData={payload.queriesData}
|
||||
width={Number(width)}
|
||||
/>
|
||||
<br />
|
||||
|
@ -27,7 +27,7 @@ export const basic = () => {
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
formData={{ hi: 1 }}
|
||||
/>
|
||||
);
|
||||
@ -41,7 +41,7 @@ export const container50pct = () => {
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
formData={{ hi: 1 }}
|
||||
/>
|
||||
);
|
||||
@ -56,7 +56,7 @@ export const Resizable = () => {
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
width={size.width}
|
||||
height={size.height}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
/>
|
||||
)}
|
||||
</ResizableChartDemo>
|
||||
@ -72,7 +72,7 @@ export const fixedWidth100height = () => {
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
height={height}
|
||||
width={width}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -87,7 +87,7 @@ export const fixedHeight100Width = () => {
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
height={height}
|
||||
width={width}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -102,10 +102,11 @@ export const withErrorBoundar = () => {
|
||||
chartType={ChartKeys.BUGGY}
|
||||
height={height}
|
||||
width={width}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const withWrapper = () => {
|
||||
const width = text('Vis width', '100%');
|
||||
const height = text('Vis height', '100%');
|
||||
@ -115,7 +116,7 @@ export const withWrapper = () => {
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={DEFAULT_QUERY_DATA}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
Wrapper={({ children }) => (
|
||||
<div>
|
||||
<div style={{ margin: 10, position: 'fixed' }}>With wrapper!</div>
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,7 +17,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { height, formData, queryData, datasource } = chartProps;
|
||||
const { height, formData, queriesData, datasource } = chartProps;
|
||||
const {
|
||||
cellPadding,
|
||||
cellRadius,
|
||||
@ -37,7 +37,7 @@ export default function transformProps(chartProps) {
|
||||
|
||||
return {
|
||||
height,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
cellPadding,
|
||||
cellRadius,
|
||||
cellSize,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,12 +17,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
const { width, height, formData, queriesData } = chartProps;
|
||||
const { yAxisFormat, colorScheme } = formData;
|
||||
|
||||
return {
|
||||
colorScheme,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
height,
|
||||
numberFormat: yAxisFormat,
|
||||
width,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,13 +17,13 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
const { width, height, formData, queriesData } = chartProps;
|
||||
const { linearColorScheme, numberFormat, selectCountry } = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
country: selectCountry,
|
||||
linearColorScheme,
|
||||
numberFormat,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -27,15 +27,15 @@ export interface EventFlowFormData {
|
||||
|
||||
export interface EventFlowChartProps extends ChartProps {
|
||||
formData: EventFlowFormData;
|
||||
queryData: {
|
||||
queriesData: {
|
||||
data: TimeseriesDataRecord[];
|
||||
};
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function transformProps(chartProps: ChartProps) {
|
||||
const { formData, queryData, width, height } = chartProps as EventFlowChartProps;
|
||||
const { formData, queriesData, width, height } = chartProps as EventFlowChartProps;
|
||||
const { allColumnsX, entity, minLeafNodeEventCount } = formData;
|
||||
const { data } = queryData;
|
||||
const { data } = queriesData[0];
|
||||
|
||||
const hasData = data && data.length > 0;
|
||||
if (hasData) {
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,12 +17,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
const { width, height, formData, queriesData } = chartProps;
|
||||
const { charge, linkLength } = formData;
|
||||
|
||||
return {
|
||||
charge,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
height,
|
||||
linkLength,
|
||||
width,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,7 +17,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
const { width, height, formData, queriesData } = chartProps;
|
||||
const {
|
||||
bottomMargin,
|
||||
canvasImageRendering,
|
||||
@ -41,7 +41,7 @@ export default function transformProps(chartProps) {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
bottomMargin,
|
||||
canvasImageRendering,
|
||||
colorScheme: linearColorScheme,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,13 +17,13 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
const { width, height, formData, queriesData } = chartProps;
|
||||
const { colorScheme, linkLength, normalized, globalOpacity, xAxisLabel, yAxisLabel } = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
binCount: parseInt(linkLength, 10),
|
||||
colorScheme,
|
||||
normalized,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,12 +17,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { height, width, formData, queryData } = chartProps;
|
||||
const { height, width, formData, queriesData } = chartProps;
|
||||
const { horizonColorScale, seriesHeight } = formData;
|
||||
|
||||
return {
|
||||
colorScale: horizonColorScale,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
height,
|
||||
seriesHeight: parseInt(seriesHeight, 10),
|
||||
width,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -22,9 +22,9 @@ import { DEFAULT_POINT_RADIUS, DEFAULT_MAX_ZOOM } from './MapBox';
|
||||
const NOOP = () => {};
|
||||
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, hooks, queryData } = chartProps;
|
||||
const { width, height, formData, hooks, queriesData } = chartProps;
|
||||
const { onError = NOOP, setControlValue = NOOP } = hooks;
|
||||
const { bounds, geoJSON, hasCustomMetric, mapboxApiKey } = queryData.data;
|
||||
const { bounds, geoJSON, hasCustomMetric, mapboxApiKey } = queriesData[0].data;
|
||||
const {
|
||||
clusteringRadius,
|
||||
globalOpacity,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
@ -17,12 +17,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { formData, queryData } = chartProps;
|
||||
const { formData, queriesData } = chartProps;
|
||||
const { groupby, liftvaluePrecision, metrics, pvaluePrecision, significanceLevel } = formData;
|
||||
|
||||
return {
|
||||
alpha: significanceLevel,
|
||||
data: queryData.data,
|
||||
data: queriesData[0].data,
|
||||
groups: groupby,
|
||||
liftValPrec: parseInt(liftvaluePrecision, 10),
|
||||
metrics,
|
||||
|
@ -26,8 +26,8 @@ for more details.
|
||||
width={600}
|
||||
height={600}
|
||||
formData={...}
|
||||
queryData={{
|
||||
queriesData={[{
|
||||
data: {...},
|
||||
}}
|
||||
}]}
|
||||
/>
|
||||
```
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user