@thoughtspot/ts-chart-sdk 0.0.1-alpha.8 → 0.0.2-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/main/custom-chart-context.d.ts +17 -3
- package/lib/main/custom-chart-context.d.ts.map +1 -1
- package/lib/main/custom-chart-context.js +138 -33
- package/lib/main/custom-chart-context.js.map +1 -1
- package/lib/main/custom-chart-context.spec.js +259 -164
- package/lib/main/custom-chart-context.spec.js.map +1 -1
- package/lib/main/post-message-event-bridge.d.ts +3 -3
- package/lib/main/post-message-event-bridge.d.ts.map +1 -1
- package/lib/main/post-message-event-bridge.js +24 -36
- package/lib/main/post-message-event-bridge.js.map +1 -1
- package/lib/main/post-message-event-bridge.spec.js +0 -2
- package/lib/main/post-message-event-bridge.spec.js.map +1 -1
- package/lib/main/util.d.ts +2 -0
- package/lib/main/util.d.ts.map +1 -0
- package/lib/main/util.js +9 -0
- package/lib/main/util.js.map +1 -0
- package/lib/react/use-custom-chart-context.spec.js +74 -119
- package/lib/react/use-custom-chart-context.spec.js.map +1 -1
- package/lib/types/chart-to-ts-event.types.d.ts +7 -1
- package/lib/types/chart-to-ts-event.types.d.ts.map +1 -1
- package/lib/types/chart-to-ts-event.types.js.map +1 -1
- package/lib/types/common.types.d.ts +2 -0
- package/lib/types/common.types.d.ts.map +1 -1
- package/lib/types/ts-to-chart-event.types.d.ts +26 -1
- package/lib/types/ts-to-chart-event.types.d.ts.map +1 -1
- package/lib/types/ts-to-chart-event.types.js +2 -0
- package/lib/types/ts-to-chart-event.types.js.map +1 -1
- package/package.json +5 -4
- package/src/main/custom-chart-context.spec.ts +330 -173
- package/src/main/custom-chart-context.ts +276 -39
- package/src/main/post-message-event-bridge.spec.ts +0 -3
- package/src/main/post-message-event-bridge.ts +36 -62
- package/src/main/util.ts +11 -0
- package/src/react/use-custom-chart-context.spec.tsx +84 -120
- package/src/types/chart-to-ts-event.types.ts +21 -1
- package/src/types/common.types.ts +15 -1
- package/src/types/ts-to-chart-event.types.ts +84 -0
- package/cjs/index.d.ts +0 -9
- package/cjs/index.d.ts.map +0 -1
- package/cjs/index.js +0 -25
- package/cjs/index.js.map +0 -1
- package/cjs/main/custom-chart-context.d.ts +0 -40
- package/cjs/main/custom-chart-context.d.ts.map +0 -1
- package/cjs/main/custom-chart-context.js +0 -218
- package/cjs/main/custom-chart-context.js.map +0 -1
- package/cjs/main/custom-chart-context.spec.d.ts +0 -2
- package/cjs/main/custom-chart-context.spec.d.ts.map +0 -1
- package/cjs/main/custom-chart-context.spec.js +0 -448
- package/cjs/main/custom-chart-context.spec.js.map +0 -1
- package/cjs/main/post-message-event-bridge.d.ts +0 -6
- package/cjs/main/post-message-event-bridge.d.ts.map +0 -1
- package/cjs/main/post-message-event-bridge.js +0 -46
- package/cjs/main/post-message-event-bridge.js.map +0 -1
- package/cjs/main/post-message-event-bridge.spec.d.ts +0 -2
- package/cjs/main/post-message-event-bridge.spec.d.ts.map +0 -1
- package/cjs/main/post-message-event-bridge.spec.js +0 -124
- package/cjs/main/post-message-event-bridge.spec.js.map +0 -1
- package/cjs/react/custom-chart-context-service.d.ts +0 -33
- package/cjs/react/custom-chart-context-service.d.ts.map +0 -1
- package/cjs/react/custom-chart-context-service.js +0 -118
- package/cjs/react/custom-chart-context-service.js.map +0 -1
- package/cjs/react/custom-chart.context.d.ts +0 -26
- package/cjs/react/custom-chart.context.d.ts.map +0 -1
- package/cjs/react/custom-chart.context.js +0 -105
- package/cjs/react/custom-chart.context.js.map +0 -1
- package/cjs/react/custom-chart.spec.d.ts +0 -2
- package/cjs/react/custom-chart.spec.d.ts.map +0 -1
- package/cjs/react/custom-chart.spec.js +0 -72
- package/cjs/react/custom-chart.spec.js.map +0 -1
- package/cjs/react/mocks/custom-chart-context-mock.d.ts +0 -3
- package/cjs/react/mocks/custom-chart-context-mock.d.ts.map +0 -1
- package/cjs/react/mocks/custom-chart-context-mock.js +0 -100
- package/cjs/react/mocks/custom-chart-context-mock.js.map +0 -1
- package/cjs/react/use-custom-chart-context.d.ts +0 -4
- package/cjs/react/use-custom-chart-context.d.ts.map +0 -1
- package/cjs/react/use-custom-chart-context.js +0 -95
- package/cjs/react/use-custom-chart-context.js.map +0 -1
- package/cjs/react/use-custom-chart-context.spec.d.ts +0 -2
- package/cjs/react/use-custom-chart-context.spec.d.ts.map +0 -1
- package/cjs/react/use-custom-chart-context.spec.js +0 -391
- package/cjs/react/use-custom-chart-context.spec.js.map +0 -1
- package/cjs/react/use-custom-chart-context.util.d.ts +0 -6
- package/cjs/react/use-custom-chart-context.util.d.ts.map +0 -1
- package/cjs/react/use-custom-chart-context.util.js +0 -60
- package/cjs/react/use-custom-chart-context.util.js.map +0 -1
- package/cjs/react/use-custom-chart-types.d.ts +0 -23
- package/cjs/react/use-custom-chart-types.d.ts.map +0 -1
- package/cjs/react/use-custom-chart-types.js +0 -3
- package/cjs/react/use-custom-chart-types.js.map +0 -1
- package/cjs/test/test-utils.d.ts +0 -7
- package/cjs/test/test-utils.d.ts.map +0 -1
- package/cjs/test/test-utils.js +0 -14
- package/cjs/test/test-utils.js.map +0 -1
- package/cjs/types/answer-column.types.d.ts +0 -69
- package/cjs/types/answer-column.types.d.ts.map +0 -1
- package/cjs/types/answer-column.types.js +0 -59
- package/cjs/types/answer-column.types.js.map +0 -1
- package/cjs/types/chart-to-ts-event.types.d.ts +0 -92
- package/cjs/types/chart-to-ts-event.types.d.ts.map +0 -1
- package/cjs/types/chart-to-ts-event.types.js +0 -32
- package/cjs/types/chart-to-ts-event.types.js.map +0 -1
- package/cjs/types/common.types.d.ts +0 -50
- package/cjs/types/common.types.d.ts.map +0 -1
- package/cjs/types/common.types.js +0 -3
- package/cjs/types/common.types.js.map +0 -1
- package/cjs/types/configurator.types.d.ts +0 -15
- package/cjs/types/configurator.types.d.ts.map +0 -1
- package/cjs/types/configurator.types.js +0 -3
- package/cjs/types/configurator.types.js.map +0 -1
- package/cjs/types/ts-to-chart-event.types.d.ts +0 -69
- package/cjs/types/ts-to-chart-event.types.d.ts.map +0 -1
- package/cjs/types/ts-to-chart-event.types.js +0 -16
- package/cjs/types/ts-to-chart-event.types.js.map +0 -1
- package/cjs/types/visual-prop.types.d.ts +0 -73
- package/cjs/types/visual-prop.types.d.ts.map +0 -1
- package/cjs/types/visual-prop.types.js +0 -3
- package/cjs/types/visual-prop.types.js.map +0 -1
- package/dist/ts-chart-sdk.d.ts +0 -312
- package/lib/dist/ts-chart-sdk.d.ts +0 -312
- package/lib/react/custom-chart-context-service.d.ts +0 -33
- package/lib/react/custom-chart-context-service.d.ts.map +0 -1
- package/lib/react/custom-chart-context-service.js +0 -91
- package/lib/react/custom-chart-context-service.js.map +0 -1
- package/lib/react/custom-chart.context.d.ts +0 -26
- package/lib/react/custom-chart.context.d.ts.map +0 -1
- package/lib/react/custom-chart.context.js +0 -78
- package/lib/react/custom-chart.context.js.map +0 -1
- package/lib/react/custom-chart.spec.d.ts +0 -2
- package/lib/react/custom-chart.spec.d.ts.map +0 -1
- package/lib/react/custom-chart.spec.js +0 -67
- package/lib/react/custom-chart.spec.js.map +0 -1
|
@@ -8,8 +8,6 @@ import { TSToChartEvent } from '../types/ts-to-chart-event.types';
|
|
|
8
8
|
import { contextChartProps } from './mocks/custom-chart-context-mock';
|
|
9
9
|
import { useChartContext } from './use-custom-chart-context';
|
|
10
10
|
|
|
11
|
-
jest.mock('../main/post-message-event-bridge');
|
|
12
|
-
|
|
13
11
|
describe('useChartContext initialization', () => {
|
|
14
12
|
let eventProcessor: any;
|
|
15
13
|
let mockInitMessage;
|
|
@@ -26,6 +24,7 @@ describe('useChartContext initialization', () => {
|
|
|
26
24
|
);
|
|
27
25
|
mockInitMessage.mockImplementation((fn: any) => {
|
|
28
26
|
eventProcessor = fn;
|
|
27
|
+
return () => null;
|
|
29
28
|
});
|
|
30
29
|
|
|
31
30
|
mockPostMessageToHost.mockImplementation(() => {
|
|
@@ -35,6 +34,7 @@ describe('useChartContext initialization', () => {
|
|
|
35
34
|
afterEach(() => {
|
|
36
35
|
// Clear mock implementations after each test
|
|
37
36
|
jest.clearAllMocks();
|
|
37
|
+
PostMessageEventBridge.globalThis.isInitialized = false;
|
|
38
38
|
});
|
|
39
39
|
|
|
40
40
|
test('should initialize the context only after intialize completes', async () => {
|
|
@@ -47,32 +47,24 @@ describe('useChartContext initialization', () => {
|
|
|
47
47
|
expect(result.current.hasInitialized).toBe(false);
|
|
48
48
|
expect(result.current.chartModel).toBeUndefined();
|
|
49
49
|
const mockPostMessage = jest.fn();
|
|
50
|
-
eventProcessor({
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
chartModel: mockedChartModel,
|
|
56
|
-
},
|
|
57
|
-
eventType: TSToChartEvent.Initialize,
|
|
58
|
-
source: 'ts-host-app',
|
|
50
|
+
await eventProcessor({
|
|
51
|
+
payload: {
|
|
52
|
+
componentId: 'COMPONENT_ID',
|
|
53
|
+
hostUrl: 'https://some.chart.app',
|
|
54
|
+
chartModel: mockedChartModel,
|
|
59
55
|
},
|
|
60
|
-
|
|
56
|
+
eventType: TSToChartEvent.Initialize,
|
|
61
57
|
});
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
eventType: TSToChartEvent.InitializeComplete,
|
|
67
|
-
source: 'ts-host-app',
|
|
68
|
-
},
|
|
69
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
58
|
+
await eventProcessor({
|
|
59
|
+
payload: {},
|
|
60
|
+
eventType: TSToChartEvent.InitializeComplete,
|
|
61
|
+
source: 'ts-host-app',
|
|
70
62
|
});
|
|
63
|
+
|
|
71
64
|
await waitFor(() => {
|
|
72
65
|
expect(result.current.hasInitialized).toBe(true);
|
|
73
66
|
expect(result.current.chartModel).toEqual(mockedChartModel);
|
|
74
67
|
});
|
|
75
|
-
result.current?.destroy();
|
|
76
68
|
});
|
|
77
69
|
|
|
78
70
|
test('should make sure hasInitialized to remain false when context initialization failed', async () => {
|
|
@@ -117,6 +109,7 @@ describe('useChartContext emit', () => {
|
|
|
117
109
|
);
|
|
118
110
|
mockInitMessage.mockImplementation((fn: any) => {
|
|
119
111
|
eventProcessor = fn;
|
|
112
|
+
return () => null;
|
|
120
113
|
});
|
|
121
114
|
|
|
122
115
|
mockPostMessageToHost.mockImplementation(() => {
|
|
@@ -126,6 +119,7 @@ describe('useChartContext emit', () => {
|
|
|
126
119
|
afterEach(() => {
|
|
127
120
|
// Clear mock implementations after each test
|
|
128
121
|
jest.clearAllMocks();
|
|
122
|
+
PostMessageEventBridge.globalThis.isInitialized = false;
|
|
129
123
|
});
|
|
130
124
|
|
|
131
125
|
test('should trigger the emitter correctly when context is initialized', async () => {
|
|
@@ -134,23 +128,17 @@ describe('useChartContext emit', () => {
|
|
|
134
128
|
useChartContext(contextChartProps),
|
|
135
129
|
);
|
|
136
130
|
const mockPostMessage = jest.fn();
|
|
137
|
-
eventProcessor({
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
eventType: TSToChartEvent.Initialize,
|
|
141
|
-
source: 'ts-host-app',
|
|
142
|
-
},
|
|
143
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
131
|
+
await eventProcessor({
|
|
132
|
+
payload: mockInitializeContextPayload,
|
|
133
|
+
eventType: TSToChartEvent.Initialize,
|
|
144
134
|
});
|
|
145
135
|
|
|
146
|
-
eventProcessor({
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
source: 'ts-host-app',
|
|
151
|
-
},
|
|
152
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
136
|
+
await eventProcessor({
|
|
137
|
+
payload: {},
|
|
138
|
+
eventType: TSToChartEvent.InitializeComplete,
|
|
139
|
+
source: 'ts-host-app',
|
|
153
140
|
});
|
|
141
|
+
|
|
154
142
|
await waitFor(() => {
|
|
155
143
|
expect(result.current.hasInitialized).toBe(true);
|
|
156
144
|
});
|
|
@@ -174,14 +162,12 @@ describe('useChartContext emit', () => {
|
|
|
174
162
|
useChartContext(contextChartProps),
|
|
175
163
|
);
|
|
176
164
|
const mockPostMessage = jest.fn();
|
|
177
|
-
eventProcessor({
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
source: 'ts-host-app',
|
|
182
|
-
},
|
|
183
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
165
|
+
await eventProcessor({
|
|
166
|
+
payload: mockInitializeContextPayload,
|
|
167
|
+
eventType: TSToChartEvent.Initialize,
|
|
168
|
+
source: 'ts-host-app',
|
|
184
169
|
});
|
|
170
|
+
|
|
185
171
|
await waitFor(() => {
|
|
186
172
|
expect(result.current.hasInitialized).toBe(false);
|
|
187
173
|
});
|
|
@@ -207,6 +193,7 @@ describe('useChartContext setOn listeners', () => {
|
|
|
207
193
|
);
|
|
208
194
|
mockInitMessage.mockImplementation((fn: any) => {
|
|
209
195
|
eventProcessor = fn;
|
|
196
|
+
return () => null;
|
|
210
197
|
});
|
|
211
198
|
|
|
212
199
|
mockPostMessageToHost.mockImplementation(() => {
|
|
@@ -216,6 +203,7 @@ describe('useChartContext setOn listeners', () => {
|
|
|
216
203
|
afterEach(() => {
|
|
217
204
|
// Clear mock implementations after each test
|
|
218
205
|
jest.clearAllMocks();
|
|
206
|
+
PostMessageEventBridge.globalThis.isInitialized = false;
|
|
219
207
|
});
|
|
220
208
|
|
|
221
209
|
test('should trigger the setOnEvent correctly when context is initialized', async () => {
|
|
@@ -227,63 +215,49 @@ describe('useChartContext setOn listeners', () => {
|
|
|
227
215
|
// Assert that the context is not initialized initially
|
|
228
216
|
expect(result.current.hasInitialized).toBe(false);
|
|
229
217
|
expect(result.current.chartModel).toBeUndefined();
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
hostUrl: 'https://some.chart.app',
|
|
236
|
-
chartModel: mockedChartModel,
|
|
237
|
-
},
|
|
238
|
-
eventType: TSToChartEvent.Initialize,
|
|
239
|
-
source: 'ts-host-app',
|
|
218
|
+
await eventProcessor({
|
|
219
|
+
payload: {
|
|
220
|
+
componentId: 'COMPONENT_ID',
|
|
221
|
+
hostUrl: 'https://some.chart.app',
|
|
222
|
+
chartModel: mockedChartModel,
|
|
240
223
|
},
|
|
241
|
-
|
|
224
|
+
eventType: TSToChartEvent.Initialize,
|
|
242
225
|
});
|
|
243
226
|
|
|
244
|
-
eventProcessor({
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
source: 'ts-host-app',
|
|
249
|
-
},
|
|
250
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
227
|
+
await eventProcessor({
|
|
228
|
+
payload: {},
|
|
229
|
+
eventType: TSToChartEvent.InitializeComplete,
|
|
230
|
+
source: 'ts-host-app',
|
|
251
231
|
});
|
|
232
|
+
|
|
252
233
|
await waitFor(() => {
|
|
253
234
|
expect(result.current.hasInitialized).toBe(true);
|
|
254
235
|
expect(result.current.chartModel).toEqual(mockedChartModel);
|
|
255
236
|
});
|
|
256
237
|
|
|
257
|
-
eventProcessor({
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
source: 'ts-host-app',
|
|
262
|
-
},
|
|
263
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
238
|
+
const resp = await eventProcessor({
|
|
239
|
+
payload: { chartModel: {} },
|
|
240
|
+
eventType: TSToChartEvent.ChartModelUpdate,
|
|
241
|
+
source: 'ts-host-app',
|
|
264
242
|
});
|
|
243
|
+
|
|
265
244
|
await waitFor(() => {
|
|
266
|
-
expect(
|
|
245
|
+
expect(resp).toEqual({
|
|
267
246
|
triggerRenderChart: true,
|
|
268
247
|
});
|
|
269
248
|
expect(result.current.chartModel).toEqual({});
|
|
270
249
|
});
|
|
271
250
|
|
|
272
|
-
eventProcessor({
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
source: 'ts-host-app',
|
|
277
|
-
},
|
|
278
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
251
|
+
const propsUpdateResp = await eventProcessor({
|
|
252
|
+
payload: { visualProps: { color: 'red' } },
|
|
253
|
+
eventType: TSToChartEvent.VisualPropsUpdate,
|
|
254
|
+
source: 'ts-host-app',
|
|
279
255
|
});
|
|
280
|
-
|
|
256
|
+
|
|
257
|
+
expect(propsUpdateResp).toEqual({
|
|
281
258
|
triggerRenderChart: true,
|
|
282
259
|
});
|
|
283
260
|
await waitFor(() => {
|
|
284
|
-
expect(mockPostMessage).toHaveBeenCalledWith({
|
|
285
|
-
triggerRenderChart: true,
|
|
286
|
-
});
|
|
287
261
|
expect(result.current.chartModel?.visualProps).toEqual({
|
|
288
262
|
color: 'red',
|
|
289
263
|
});
|
|
@@ -297,14 +271,12 @@ describe('useChartContext setOn listeners', () => {
|
|
|
297
271
|
useChartContext(contextChartProps),
|
|
298
272
|
);
|
|
299
273
|
const mockPostMessage = jest.fn();
|
|
300
|
-
eventProcessor({
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
source: 'ts-host-app',
|
|
305
|
-
},
|
|
306
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
274
|
+
await eventProcessor({
|
|
275
|
+
payload: mockInitializeContextPayload,
|
|
276
|
+
eventType: TSToChartEvent.Initialize,
|
|
277
|
+
source: 'ts-host-app',
|
|
307
278
|
});
|
|
279
|
+
|
|
308
280
|
await waitFor(() => {
|
|
309
281
|
expect(result.current.hasInitialized).toBe(false);
|
|
310
282
|
});
|
|
@@ -333,6 +305,7 @@ describe('useChartContext on React Wrapper component', () => {
|
|
|
333
305
|
);
|
|
334
306
|
mockInitMessage.mockImplementation((fn: any) => {
|
|
335
307
|
eventProcessor = fn;
|
|
308
|
+
return () => null;
|
|
336
309
|
});
|
|
337
310
|
|
|
338
311
|
mockPostMessageToHost.mockImplementation(() => {
|
|
@@ -342,6 +315,7 @@ describe('useChartContext on React Wrapper component', () => {
|
|
|
342
315
|
afterEach(() => {
|
|
343
316
|
// Clear mock implementations after each test
|
|
344
317
|
jest.clearAllMocks();
|
|
318
|
+
PostMessageEventBridge.globalThis.isInitialized = false;
|
|
345
319
|
});
|
|
346
320
|
test('TSChartContext renders children and should not increase counter for useEffect on chartModel if visualProps is updated', async () => {
|
|
347
321
|
const CustomChartComponent = () => {
|
|
@@ -364,18 +338,15 @@ describe('useChartContext on React Wrapper component', () => {
|
|
|
364
338
|
const { getByTestId, rerender } = render(<CustomChartComponent />);
|
|
365
339
|
|
|
366
340
|
const mockPostMessage = jest.fn();
|
|
367
|
-
eventProcessor({
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
chartModel: mockedChartModel,
|
|
373
|
-
},
|
|
374
|
-
eventType: TSToChartEvent.Initialize,
|
|
375
|
-
source: 'ts-host-app',
|
|
341
|
+
await eventProcessor({
|
|
342
|
+
payload: {
|
|
343
|
+
componentId: 'COMPONENT_ID',
|
|
344
|
+
hostUrl: 'https://some.chart.app',
|
|
345
|
+
chartModel: mockedChartModel,
|
|
376
346
|
},
|
|
377
|
-
|
|
347
|
+
eventType: TSToChartEvent.Initialize,
|
|
378
348
|
});
|
|
349
|
+
|
|
379
350
|
rerender(<CustomChartComponent />);
|
|
380
351
|
|
|
381
352
|
// Check if the child element is rendered
|
|
@@ -385,13 +356,10 @@ describe('useChartContext on React Wrapper component', () => {
|
|
|
385
356
|
);
|
|
386
357
|
});
|
|
387
358
|
|
|
388
|
-
eventProcessor({
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
source: 'ts-host-app',
|
|
393
|
-
},
|
|
394
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
359
|
+
await eventProcessor({
|
|
360
|
+
payload: { visualProps: { color: 'red' } },
|
|
361
|
+
eventType: TSToChartEvent.VisualPropsUpdate,
|
|
362
|
+
source: 'ts-host-app',
|
|
395
363
|
});
|
|
396
364
|
|
|
397
365
|
// Re-render the component with a new key
|
|
@@ -432,26 +400,22 @@ describe('useChartContext on React Wrapper component', () => {
|
|
|
432
400
|
|
|
433
401
|
// Re-render the component with a new key
|
|
434
402
|
const mockPostMessage = jest.fn();
|
|
435
|
-
eventProcessor({
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
chartModel: mockedChartModel,
|
|
441
|
-
},
|
|
442
|
-
eventType: TSToChartEvent.Initialize,
|
|
443
|
-
source: 'ts-host-app',
|
|
403
|
+
await eventProcessor({
|
|
404
|
+
payload: {
|
|
405
|
+
componentId: 'COMPONENT_ID',
|
|
406
|
+
hostUrl: 'https://some.chart.app',
|
|
407
|
+
chartModel: mockedChartModel,
|
|
444
408
|
},
|
|
445
|
-
|
|
409
|
+
eventType: TSToChartEvent.Initialize,
|
|
410
|
+
source: 'ts-host-app',
|
|
446
411
|
});
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
},
|
|
453
|
-
ports: [{ postMessage: mockPostMessage }],
|
|
412
|
+
|
|
413
|
+
await eventProcessor({
|
|
414
|
+
payload: { visualProps: { color: 'red' } },
|
|
415
|
+
eventType: TSToChartEvent.VisualPropsUpdate,
|
|
416
|
+
source: 'ts-host-app',
|
|
454
417
|
});
|
|
418
|
+
|
|
455
419
|
rerender(<CustomChartComponent />);
|
|
456
420
|
// Check if the child element is still in the document after re-render
|
|
457
421
|
const updatedChildElement = getByTestId('child-element');
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { VisualProps } from './common.types';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
CustomAxisMenuAction,
|
|
4
|
+
CustomContextMenuAction,
|
|
5
|
+
Query,
|
|
6
|
+
} from './ts-to-chart-event.types';
|
|
3
7
|
|
|
4
8
|
/**
|
|
5
9
|
*
|
|
@@ -339,3 +343,19 @@ export interface OpenAxisMenuEventPayload {
|
|
|
339
343
|
* */
|
|
340
344
|
customActions?: AxisMenuCustomAction[];
|
|
341
345
|
}
|
|
346
|
+
|
|
347
|
+
/**
|
|
348
|
+
*
|
|
349
|
+
* @group Custom action callback mapping with action id/ Context Menu
|
|
350
|
+
*/
|
|
351
|
+
export interface ContextMenuActionHandler {
|
|
352
|
+
[key: string]: (args: CustomContextMenuAction) => void;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/**
|
|
356
|
+
*
|
|
357
|
+
* @group Custom action callback mapping with action id/ Axis Menu
|
|
358
|
+
*/
|
|
359
|
+
export interface AxisMenuActionHandler {
|
|
360
|
+
[key: string]: (args: CustomAxisMenuAction) => void;
|
|
361
|
+
}
|
|
@@ -160,12 +160,15 @@ export type VisualProps = JSON;
|
|
|
160
160
|
type CustomStylingConfig = any;
|
|
161
161
|
|
|
162
162
|
export interface AppConfig {
|
|
163
|
+
/**
|
|
164
|
+
* @hidden
|
|
165
|
+
*/
|
|
163
166
|
styleConfig?: CustomStylingConfig;
|
|
164
167
|
|
|
165
168
|
appOptions?: {
|
|
166
169
|
isMobile?: boolean;
|
|
167
170
|
isPrintMode?: boolean; // export mode on/off
|
|
168
|
-
|
|
171
|
+
isLiveboardContext?: boolean; // if chart renders in liveboard context
|
|
169
172
|
// runtime configurations
|
|
170
173
|
isDebugMode?: boolean; // enables debug mode for logging
|
|
171
174
|
};
|
|
@@ -177,8 +180,19 @@ export interface AppConfig {
|
|
|
177
180
|
sessionTimezone: string;
|
|
178
181
|
};
|
|
179
182
|
|
|
183
|
+
/**
|
|
184
|
+
* App url for the custom chart application where the chart app is hosted.
|
|
185
|
+
* This helps the chart developer to access app artifacts relative to this url.
|
|
186
|
+
* There can be different build systems that developers may have used and different ways
|
|
187
|
+
* to host the same. This helps in resolving the same.
|
|
188
|
+
*/
|
|
189
|
+
appUrl?: string;
|
|
190
|
+
|
|
180
191
|
// Idea: we might be able to map this to data and ask user to read data in a
|
|
181
192
|
// certain way the transformations for point during context menu operations
|
|
182
193
|
// need to be explored
|
|
194
|
+
/**
|
|
195
|
+
* @hidden
|
|
196
|
+
*/
|
|
183
197
|
customCalendarConfig?: any; // this is to initialize custom calendar service
|
|
184
198
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { AllowedConfigurations } from '../main/custom-chart-context';
|
|
1
2
|
import { ChartColumn } from './answer-column.types';
|
|
3
|
+
import { Point } from './chart-to-ts-event.types';
|
|
2
4
|
import {
|
|
3
5
|
AppConfig,
|
|
4
6
|
ChartConfig,
|
|
@@ -57,6 +59,16 @@ export enum TSToChartEvent {
|
|
|
57
59
|
* @version SDK: 0.1 | ThoughtSpot:
|
|
58
60
|
*/
|
|
59
61
|
VisualPropsUpdate = 'VisualPropsUpdate',
|
|
62
|
+
/**
|
|
63
|
+
* @version SDK: 0.1 | ThoughtSpot:
|
|
64
|
+
*/
|
|
65
|
+
|
|
66
|
+
ContextMenuActionClick = 'ContextMenuActionClick',
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* @version SDK: 0.1 | ThoughtSpot:
|
|
70
|
+
*/
|
|
71
|
+
AxisMenuActionClick = 'AxisMenuActionClick',
|
|
60
72
|
}
|
|
61
73
|
|
|
62
74
|
/**
|
|
@@ -104,6 +116,14 @@ export interface TSToChartInternalEventsPayloadMap {
|
|
|
104
116
|
) => ValidationResponse;
|
|
105
117
|
|
|
106
118
|
[TSToChartEvent.TriggerRenderChart]: () => void;
|
|
119
|
+
|
|
120
|
+
[TSToChartEvent.ContextMenuActionClick]: (
|
|
121
|
+
payload: ContextMenuCustomActionPayload,
|
|
122
|
+
) => void;
|
|
123
|
+
|
|
124
|
+
[TSToChartEvent.AxisMenuActionClick]: (
|
|
125
|
+
payload: AxisMenuCustomActionPayload,
|
|
126
|
+
) => void;
|
|
107
127
|
}
|
|
108
128
|
|
|
109
129
|
/**
|
|
@@ -140,6 +160,13 @@ export interface InitializeEventPayload {
|
|
|
140
160
|
* @version SDK: 0.1 | ThoughtSpot:
|
|
141
161
|
*/
|
|
142
162
|
hostUrl: string;
|
|
163
|
+
/**
|
|
164
|
+
* The selector of the container element where the chart will be rendered. Used for internal
|
|
165
|
+
* charts, external custom charts mostly have their own DOM.
|
|
166
|
+
*
|
|
167
|
+
* @version SDK: 0.2 | ThoughtSpot:
|
|
168
|
+
*/
|
|
169
|
+
containerElSelector: string;
|
|
143
170
|
}
|
|
144
171
|
|
|
145
172
|
/**
|
|
@@ -172,6 +199,12 @@ export interface InitializeEventResponsePayload {
|
|
|
172
199
|
* @version SDK: 0.1 | ThoughtSpot:
|
|
173
200
|
*/
|
|
174
201
|
visualPropEditorDefinition?: VisualPropEditorDefinition;
|
|
202
|
+
/**
|
|
203
|
+
* Toggle native configurations supported by TS UI. Ex: column level number and conditional formatting.
|
|
204
|
+
*
|
|
205
|
+
* @version SDK: 0.1 | ThoughtSpot:
|
|
206
|
+
*/
|
|
207
|
+
allowedConfigurations?: AllowedConfigurations;
|
|
175
208
|
}
|
|
176
209
|
|
|
177
210
|
/**
|
|
@@ -261,3 +294,54 @@ export interface ChartConfigValidateEventPayload {
|
|
|
261
294
|
*/
|
|
262
295
|
chartConfig: ChartConfig[];
|
|
263
296
|
}
|
|
297
|
+
|
|
298
|
+
/**
|
|
299
|
+
* Custom action dispatched by context menu of the chart
|
|
300
|
+
*
|
|
301
|
+
* @group ThoughtSpot to Chart Events
|
|
302
|
+
* @version SDK: 0.1 | ThoughtSpot:
|
|
303
|
+
*/
|
|
304
|
+
export interface CustomContextMenuAction {
|
|
305
|
+
id: string;
|
|
306
|
+
clickedPoint: Point;
|
|
307
|
+
selectedPoints?: Point[];
|
|
308
|
+
event: Pick<PointerEvent, 'clientX' | 'clientY'>;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
/**
|
|
312
|
+
*
|
|
313
|
+
* @group ThoughtSpot to Chart Events
|
|
314
|
+
*/
|
|
315
|
+
export interface ContextMenuCustomActionPayload {
|
|
316
|
+
/**
|
|
317
|
+
* Dispatched custom action from context menu
|
|
318
|
+
*
|
|
319
|
+
* @version SDK: 0.1 | ThoughtSpot:
|
|
320
|
+
*/
|
|
321
|
+
customAction: CustomContextMenuAction;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/**
|
|
325
|
+
* Custom action dispatched by axis menu of the chart
|
|
326
|
+
*
|
|
327
|
+
* @group ThoughtSpot to Chart Events
|
|
328
|
+
* @version SDK: 0.1 | ThoughtSpot:
|
|
329
|
+
*/
|
|
330
|
+
export interface CustomAxisMenuAction {
|
|
331
|
+
id: string;
|
|
332
|
+
columnIds: string[];
|
|
333
|
+
event: Pick<PointerEvent, 'clientX' | 'clientY'>;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/**
|
|
337
|
+
*
|
|
338
|
+
* @group ThoughtSpot to Chart Events
|
|
339
|
+
*/
|
|
340
|
+
export interface AxisMenuCustomActionPayload {
|
|
341
|
+
/**
|
|
342
|
+
* Dispatched custom action from context menu
|
|
343
|
+
*
|
|
344
|
+
* @version SDK: 0.1 | ThoughtSpot:
|
|
345
|
+
*/
|
|
346
|
+
customAction: CustomAxisMenuAction;
|
|
347
|
+
}
|
package/cjs/index.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export * from './types/common.types';
|
|
2
|
-
export * from './types/configurator.types';
|
|
3
|
-
export * from './types/visual-prop.types';
|
|
4
|
-
export * from './types/answer-column.types';
|
|
5
|
-
export * from './types/chart-to-ts-event.types';
|
|
6
|
-
export * from './types/ts-to-chart-event.types';
|
|
7
|
-
export * from './main/custom-chart-context';
|
|
8
|
-
export * from './react/use-custom-chart-context';
|
|
9
|
-
//# sourceMappingURL=index.d.ts.map
|
package/cjs/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC"}
|
package/cjs/index.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./types/common.types"), exports);
|
|
18
|
-
__exportStar(require("./types/configurator.types"), exports);
|
|
19
|
-
__exportStar(require("./types/visual-prop.types"), exports);
|
|
20
|
-
__exportStar(require("./types/answer-column.types"), exports);
|
|
21
|
-
__exportStar(require("./types/chart-to-ts-event.types"), exports);
|
|
22
|
-
__exportStar(require("./types/ts-to-chart-event.types"), exports);
|
|
23
|
-
__exportStar(require("./main/custom-chart-context"), exports);
|
|
24
|
-
__exportStar(require("./react/use-custom-chart-context"), exports);
|
|
25
|
-
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,6DAA2C;AAC3C,4DAA0C;AAC1C,8DAA4C;AAC5C,kEAAgD;AAChD,kEAAgD;AAChD,8DAA4C;AAC5C,mEAAiD"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { ChartToTSEventsPayloadMap } from '../types/chart-to-ts-event.types';
|
|
2
|
-
import { ChartConfig, ChartModel, ValidationResponse, VisualProps } from '../types/common.types';
|
|
3
|
-
import { ChartConfigEditorDefinition } from '../types/configurator.types';
|
|
4
|
-
import { Query, TSToChartEventsPayloadMap } from '../types/ts-to-chart-event.types';
|
|
5
|
-
import { VisualPropEditorDefinition } from '../types/visual-prop.types';
|
|
6
|
-
export type CustomChartContextProps = {
|
|
7
|
-
getDefaultChartConfig: (chartModel: ChartModel) => ChartConfig[];
|
|
8
|
-
getQueriesFromChartConfig: (chartConfig: ChartConfig[]) => Query[];
|
|
9
|
-
renderChart: (ctx: CustomChartContext) => Promise<void>;
|
|
10
|
-
validateConfig?: (updatedConfig: ChartConfig[], chartModel: ChartModel) => ValidationResponse;
|
|
11
|
-
validateVisualProps?: (updatedVisualProps: VisualProps, chartModel: ChartModel) => ValidationResponse;
|
|
12
|
-
chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
|
|
13
|
-
visualPropEditorDefinition?: VisualPropEditorDefinition;
|
|
14
|
-
};
|
|
15
|
-
export declare class CustomChartContext {
|
|
16
|
-
private componentId;
|
|
17
|
-
private hostUrl;
|
|
18
|
-
private chartModel;
|
|
19
|
-
private chartContextProps;
|
|
20
|
-
private eventListeners;
|
|
21
|
-
private hasInitializedPromise;
|
|
22
|
-
private triggerInitResolve;
|
|
23
|
-
constructor(chartContextProps: CustomChartContextProps);
|
|
24
|
-
initialize: () => Promise<void>;
|
|
25
|
-
on<T extends keyof TSToChartEventsPayloadMap>(eventType: T, callbackFn: TSToChartEventsPayloadMap[T]): void;
|
|
26
|
-
off<T extends keyof TSToChartEventsPayloadMap>(eventType: T): void;
|
|
27
|
-
private onInternal;
|
|
28
|
-
destroy(): void;
|
|
29
|
-
getChartModel: () => ChartModel;
|
|
30
|
-
emitEvent<T extends keyof ChartToTSEventsPayloadMap>(eventType: T, ...eventPayload: ChartToTSEventsPayloadMap[T]): Promise<any>;
|
|
31
|
-
private registerEventProcessor;
|
|
32
|
-
private eventProcessor;
|
|
33
|
-
private registerEvents;
|
|
34
|
-
private initializeContext;
|
|
35
|
-
private initializationComplete;
|
|
36
|
-
private publishChartContextPropsToHost;
|
|
37
|
-
private executeEventListenerCBs;
|
|
38
|
-
}
|
|
39
|
-
export declare const getChartContext: (customChartConfig: CustomChartContextProps) => Promise<CustomChartContext>;
|
|
40
|
-
//# sourceMappingURL=custom-chart-context.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"custom-chart-context.d.ts","sourceRoot":"","sources":["../../src/main/custom-chart-context.ts"],"names":[],"mappings":"AAQA,OAAO,EAEH,yBAAyB,EAE5B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACH,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,WAAW,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAQH,KAAK,EAEL,yBAAyB,EAI5B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAKxE,MAAM,MAAM,uBAAuB,GAAG;IAQlC,qBAAqB,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,WAAW,EAAE,CAAC;IAQjE,yBAAyB,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,CAAC;IAQnE,WAAW,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAUxD,cAAc,CAAC,EAAE,CACb,aAAa,EAAE,WAAW,EAAE,EAC5B,UAAU,EAAE,UAAU,KACrB,kBAAkB,CAAC;IAWxB,mBAAmB,CAAC,EAAE,CAClB,kBAAkB,EAAE,WAAW,EAC/B,UAAU,EAAE,UAAU,KACrB,kBAAkB,CAAC;IAQxB,2BAA2B,CAAC,EAAE,2BAA2B,EAAE,CAAC;IAW5D,0BAA0B,CAAC,EAAE,0BAA0B,CAAC;CAC3D,CAAC;AAWF,qBAAa,kBAAkB;IAU3B,OAAO,CAAC,WAAW,CAAM;IASzB,OAAO,CAAC,OAAO,CAAM;IAQrB,OAAO,CAAC,UAAU,CAAyB;IAO3C,OAAO,CAAC,iBAAiB,CACkC;IAQ3D,OAAO,CAAC,cAAc,CAAoD;IAW1E,OAAO,CAAC,qBAAqB,CAAgB;IAS7C,OAAO,CAAC,kBAAkB,CAAsB;gBAOpC,iBAAiB,EAAE,uBAAuB;IAkB/C,UAAU,QAAO,QAAQ,IAAI,CAAC,CAGnC;IAUK,EAAE,CAAC,CAAC,SAAS,MAAM,yBAAyB,EAC/C,SAAS,EAAE,CAAC,EACZ,UAAU,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACzC,IAAI;IAeA,GAAG,CAAC,CAAC,SAAS,MAAM,yBAAyB,EAAE,SAAS,EAAE,CAAC,GAAG,IAAI;IAiBzE,OAAO,CAAC,UAAU;IAgBX,OAAO;IAUP,aAAa,QAAO,UAAU,CAAoB;IAUlD,SAAS,CAAC,CAAC,SAAS,MAAM,yBAAyB,EACtD,SAAS,EAAE,CAAC,EACZ,GAAG,YAAY,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAC9C,OAAO,CAAC,GAAG,CAAC;IAmBf,OAAO,CAAC,sBAAsB,CAU5B;IAOF,OAAO,CAAC,cAAc,CAuBpB;IAOF,OAAO,CAAC,cAAc,CA6IpB;IASF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,sBAAsB,CAM5B;IAEF,OAAO,CAAC,8BAA8B,CA6BhC;IAQN,OAAO,CAAC,uBAAuB,CAyB7B;CACL;AAQD,eAAO,MAAM,eAAe,sBACL,uBAAuB,KAC3C,QAAQ,kBAAkB,CAO5B,CAAC"}
|