@cubejs-client/vue3 0.35.0 → 0.35.23

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.
@@ -30,7 +30,6 @@ var QueryRenderer = {
30
30
  required: false
31
31
  }
32
32
  },
33
-
34
33
  data() {
35
34
  return {
36
35
  mutexObj: {},
@@ -40,20 +39,17 @@ var QueryRenderer = {
40
39
  sqlQuery: undefined
41
40
  };
42
41
  },
43
-
44
42
  async mounted() {
45
43
  const {
46
44
  query,
47
45
  queries
48
46
  } = this;
49
-
50
47
  if (isQueryPresent(query)) {
51
48
  await this.load();
52
49
  } else if (isQueryPresent(queries)) {
53
50
  await this.loadQueries(queries);
54
51
  }
55
52
  },
56
-
57
53
  render() {
58
54
  const {
59
55
  $slots,
@@ -66,19 +62,17 @@ var QueryRenderer = {
66
62
  let slot = this.$slots.empty ? this.$slots.empty() : empty;
67
63
  let controls = h('div', {});
68
64
  const onlyDefault = !('empty' in this.$slots) && !('error' in this.$slots);
69
-
70
65
  if ($slots.builder && this.builderProps.measures) {
71
- controls = $slots.builder({ ...this.builderProps
66
+ controls = $slots.builder({
67
+ ...this.builderProps
72
68
  });
73
69
  }
74
-
75
70
  if (!loading && resultSet && !error || onlyDefault) {
76
71
  let slotProps = {
77
72
  resultSet,
78
73
  sqlQuery,
79
74
  query: this.builderProps.query || this.query
80
75
  };
81
-
82
76
  if (onlyDefault) {
83
77
  slotProps = {
84
78
  loading,
@@ -88,7 +82,6 @@ var QueryRenderer = {
88
82
  ...slotProps
89
83
  };
90
84
  }
91
-
92
85
  slot = $slots.default ? $slots.default(slotProps) : slot;
93
86
  } else if (error) {
94
87
  slot = $slots.error ? $slots.error({
@@ -96,25 +89,20 @@ var QueryRenderer = {
96
89
  sqlQuery
97
90
  }) : slot;
98
91
  }
99
-
100
92
  return h('div', {}, [controls, slot]);
101
93
  },
102
-
103
94
  methods: {
104
95
  async load() {
105
96
  const {
106
97
  query
107
98
  } = this;
108
-
109
99
  if (!isQueryPresent(query)) {
110
100
  return;
111
101
  }
112
-
113
102
  try {
114
103
  this.loading = true;
115
104
  this.error = null;
116
105
  this.resultSet = null;
117
-
118
106
  if (this.loadSql === 'only') {
119
107
  this.sqlQuery = await this.cubeApi.sql(query, {
120
108
  mutexObj: this.mutexObj,
@@ -135,7 +123,6 @@ var QueryRenderer = {
135
123
  mutexKey: 'query'
136
124
  });
137
125
  }
138
-
139
126
  this.loading = false;
140
127
  } catch (error) {
141
128
  this.error = error;
@@ -143,12 +130,10 @@ var QueryRenderer = {
143
130
  this.loading = false;
144
131
  }
145
132
  },
146
-
147
133
  async loadQueries() {
148
134
  const {
149
135
  queries
150
136
  } = this;
151
-
152
137
  try {
153
138
  this.error = undefined;
154
139
  this.loading = true;
@@ -163,7 +148,6 @@ var QueryRenderer = {
163
148
  this.loading = false;
164
149
  }
165
150
  }
166
-
167
151
  },
168
152
  watch: {
169
153
  loading(loading) {
@@ -179,24 +163,19 @@ var QueryRenderer = {
179
163
  });
180
164
  }
181
165
  },
182
-
183
166
  cubeApi() {
184
167
  this.load();
185
168
  },
186
-
187
169
  chartType() {
188
170
  this.load();
189
171
  },
190
-
191
172
  query: {
192
173
  deep: true,
193
-
194
174
  handler(query, prevQuery) {
195
175
  if (!areQueriesEqual(query, prevQuery)) {
196
176
  this.load();
197
177
  }
198
178
  }
199
-
200
179
  },
201
180
  queries: {
202
181
  handler(val) {
@@ -204,65 +183,54 @@ var QueryRenderer = {
204
183
  this.loadQueries();
205
184
  }
206
185
  },
207
-
208
186
  deep: true
209
187
  }
210
188
  }
211
189
  };
212
190
 
213
191
  const QUERY_ELEMENTS = ['measures', 'dimensions', 'segments', 'timeDimensions', 'filters'];
214
-
215
192
  const toOrderMember = member => ({
216
193
  id: member.name,
217
194
  title: member.title
218
195
  });
219
-
220
196
  const reduceOrderMembers = array => array.reduce((acc, {
221
197
  id,
222
198
  order
223
199
  }) => order !== 'none' ? [...acc, [id, order]] : acc, []);
224
-
225
200
  const operators = ['and', 'or'];
226
-
227
201
  const validateFilters = filters => filters.reduce((acc, raw) => {
228
202
  if (raw.operator) {
229
203
  return [...acc, raw];
230
204
  }
231
-
232
205
  const validBooleanFilter = operators.reduce((acc, operator) => {
233
206
  const filters = raw[operator];
234
207
  const booleanFilters = validateFilters(filters || []);
235
-
236
208
  if (booleanFilters.length) {
237
- return { ...acc,
209
+ return {
210
+ ...acc,
238
211
  [operator]: booleanFilters
239
212
  };
240
213
  }
241
-
242
214
  return acc;
243
215
  }, {});
244
-
245
216
  if (operators.some(operator => validBooleanFilter[operator])) {
246
217
  return [...acc, validBooleanFilter];
247
218
  }
248
-
249
219
  return acc;
250
220
  }, []);
251
-
252
221
  const getDimensionOrMeasure = (meta, m) => {
253
222
  const memberName = m.member || m.dimension;
254
223
  return memberName && meta.resolveMember(memberName, ['dimensions', 'measures']);
255
224
  };
256
-
257
225
  const resolveMembers = (meta, arr) => arr && arr.map((e, index) => {
258
- return { ...e,
226
+ return {
227
+ ...e,
259
228
  member: getDimensionOrMeasure(meta, e),
260
229
  index,
261
230
  and: resolveMembers(meta, e.and),
262
231
  or: resolveMembers(meta, e.or)
263
232
  };
264
233
  });
265
-
266
234
  var QueryBuilder = {
267
235
  components: {
268
236
  QueryRenderer
@@ -291,7 +259,6 @@ var QueryBuilder = {
291
259
  default: () => ({})
292
260
  }
293
261
  },
294
-
295
262
  data() {
296
263
  const {
297
264
  query = this.query,
@@ -322,7 +289,6 @@ var QueryBuilder = {
322
289
  pivotConfig: ResultSet.getNormalizedPivotConfig(query || {}, pivotConfig)
323
290
  };
324
291
  },
325
-
326
292
  render() {
327
293
  const {
328
294
  chartType,
@@ -351,7 +317,6 @@ var QueryBuilder = {
351
317
  orderMembers
352
318
  } = this;
353
319
  let builderProps = {};
354
-
355
320
  if (meta) {
356
321
  builderProps = {
357
322
  query,
@@ -381,7 +346,8 @@ var QueryBuilder = {
381
346
  pivotConfig: this.pivotConfig,
382
347
  updateOrder: {
383
348
  set: (memberId, newOrder) => {
384
- this.order = reduceOrderMembers(orderMembers.map(orderMember => ({ ...orderMember,
349
+ this.order = reduceOrderMembers(orderMembers.map(orderMember => ({
350
+ ...orderMember,
385
351
  order: orderMember.id === memberId ? newOrder : orderMember.order
386
352
  })));
387
353
  },
@@ -411,25 +377,20 @@ var QueryBuilder = {
411
377
  };
412
378
  QUERY_ELEMENTS.forEach(elementName => {
413
379
  const name = elementName.charAt(0).toUpperCase() + elementName.slice(1);
414
-
415
380
  builderProps[`add${name}`] = member => {
416
381
  this.addMember(elementName, member);
417
382
  };
418
-
419
383
  builderProps[`update${name}`] = (member, updateWith) => {
420
384
  this.updateMember(elementName, member, updateWith);
421
385
  };
422
-
423
386
  builderProps[`remove${name}`] = member => {
424
387
  this.removeMember(elementName, member);
425
388
  };
426
-
427
389
  builderProps[`set${name}`] = members => {
428
390
  this.setMembers(elementName, members);
429
391
  };
430
392
  });
431
393
  }
432
-
433
394
  return h(QueryRenderer, {
434
395
  query: this.validatedQuery,
435
396
  cubeApi,
@@ -442,7 +403,6 @@ var QueryBuilder = {
442
403
  }
443
404
  }, this.$slots);
444
405
  },
445
-
446
406
  computed: {
447
407
  isQueryPresent() {
448
408
  const {
@@ -450,7 +410,6 @@ var QueryBuilder = {
450
410
  } = this;
451
411
  return isQueryPresent(validatedQuery);
452
412
  },
453
-
454
413
  orderMembers() {
455
414
  return getOrderMembersFromOrder([...this.measures, ...this.dimensions, ...this.timeDimensions.reduce((acc, {
456
415
  dimension,
@@ -459,15 +418,12 @@ var QueryBuilder = {
459
418
  if (granularity !== undefined) {
460
419
  acc.push(toOrderMember(dimension));
461
420
  }
462
-
463
421
  return acc;
464
422
  }, [])].map((member, index) => {
465
423
  const id = member.name || member.id;
466
-
467
424
  if (!id) {
468
425
  return false;
469
426
  }
470
-
471
427
  return {
472
428
  index,
473
429
  id,
@@ -475,7 +431,6 @@ var QueryBuilder = {
475
431
  };
476
432
  }).filter(Boolean), this.order);
477
433
  },
478
-
479
434
  vizState() {
480
435
  return {
481
436
  query: this.validatedQuery,
@@ -483,12 +438,10 @@ var QueryBuilder = {
483
438
  pivotConfig: this.pivotConfig
484
439
  };
485
440
  },
486
-
487
441
  validatedQuery() {
488
442
  let validatedQuery = {};
489
-
490
- let toQuery = member => member.name; // TODO: implement timezone
491
-
443
+ let toQuery = member => member.name;
444
+ // TODO: implement timezone
492
445
 
493
446
  let hasElements = false;
494
447
  QUERY_ELEMENTS.forEach(element => {
@@ -507,37 +460,31 @@ var QueryBuilder = {
507
460
  or: member.or && member.or.map(toQuery)
508
461
  });
509
462
  }
510
-
511
463
  if (this[element].length > 0) {
512
464
  validatedQuery[element] = this[element].map(x => toQuery(x));
513
465
  hasElements = true;
514
466
  }
515
467
  });
516
-
517
468
  if (validatedQuery.filters) {
518
469
  validatedQuery.filters = validateFilters(validatedQuery.filters);
519
- } // only set limit and offset if there are elements otherwise an invalid request with just limit/offset
520
- // gets sent when the component is first mounted, but before the actual query is constructed.
521
-
470
+ }
522
471
 
472
+ // only set limit and offset if there are elements otherwise an invalid request with just limit/offset
473
+ // gets sent when the component is first mounted, but before the actual query is constructed.
523
474
  if (hasElements) {
524
475
  if (this.limit) {
525
476
  validatedQuery.limit = this.limit;
526
477
  }
527
-
528
478
  if (this.offset) {
529
479
  validatedQuery.offset = this.offset;
530
480
  }
531
-
532
481
  if (this.order) {
533
482
  validatedQuery.order = this.order;
534
483
  }
535
-
536
484
  if (this.renewQuery) {
537
485
  validatedQuery.renewQuery = this.renewQuery;
538
486
  }
539
487
  }
540
-
541
488
  if (!this.skipHeuristics && !this.disableHeuristics && isQueryPresent(validatedQuery) && this.meta) {
542
489
  const heuristicsFn = this.stateChangeHeuristics || defaultHeuristics;
543
490
  const {
@@ -552,7 +499,8 @@ var QueryBuilder = {
552
499
  meta: this.meta,
553
500
  sessionGranularity: validatedQuery?.timeDimensions?.[0]?.granularity
554
501
  });
555
- validatedQuery = { ...validatedQuery,
502
+ validatedQuery = {
503
+ ...validatedQuery,
556
504
  ...query,
557
505
  ...(shouldApplyHeuristicOrder ? {
558
506
  order: defaultOrder(query)
@@ -561,29 +509,24 @@ var QueryBuilder = {
561
509
  this.chartType = chartType || this.chartType;
562
510
  this.pivotConfig = ResultSet.getNormalizedPivotConfig(validatedQuery, pivotConfig !== undefined ? pivotConfig : this.pivotConfig);
563
511
  this.copyQueryFromProps(validatedQuery);
564
- } // query heuristics should only apply on query change (not applied to the initial query)
565
-
512
+ }
566
513
 
514
+ // query heuristics should only apply on query change (not applied to the initial query)
567
515
  if (this.prevValidatedQuery !== null) {
568
516
  this.skipHeuristics = false;
569
517
  }
570
-
571
518
  this.prevValidatedQuery = validatedQuery;
572
519
  return validatedQuery;
573
520
  }
574
-
575
521
  },
576
-
577
522
  async mounted() {
578
523
  this.meta = await this.cubeApi.meta();
579
524
  this.copyQueryFromProps();
580
-
581
525
  if (isQueryPresent(this.initialQuery)) {
582
526
  const dryRunResponse = await this.cubeApi.dryRun(this.initialQuery);
583
527
  this.pivotConfig = ResultSet.getNormalizedPivotConfig(dryRunResponse?.pivotQuery || {}, this.pivotConfig);
584
528
  }
585
529
  },
586
-
587
530
  methods: {
588
531
  copyQueryFromProps(query) {
589
532
  const {
@@ -609,8 +552,10 @@ var QueryBuilder = {
609
552
  index,
610
553
  ...this.meta.resolveMember(m, 'segments')
611
554
  }));
612
- this.timeDimensions = timeDimensions.map((m, index) => ({ ...m,
613
- dimension: { ...this.meta.resolveMember(m.dimension, 'dimensions'),
555
+ this.timeDimensions = timeDimensions.map((m, index) => ({
556
+ ...m,
557
+ dimension: {
558
+ ...this.meta.resolveMember(m.dimension, 'dimensions'),
614
559
  granularities: this.granularities
615
560
  },
616
561
  index
@@ -618,7 +563,8 @@ var QueryBuilder = {
618
563
  const memberTypes = ['dimensions', 'measures'];
619
564
  this.filters = filters.map((m, index) => {
620
565
  const memberName = m.member || m.dimension;
621
- return { ...m,
566
+ return {
567
+ ...m,
622
568
  member: memberName && this.meta.resolveMember(memberName, memberTypes),
623
569
  operators: memberName && this.meta.filterOperatorsForMember(memberName, memberTypes),
624
570
  and: resolveMembers(this.meta, m.and),
@@ -635,19 +581,18 @@ var QueryBuilder = {
635
581
  this.renewQuery = renewQuery || false;
636
582
  this.order = order || null;
637
583
  },
638
-
639
584
  addMember(element, member) {
640
585
  const name = element.charAt(0).toUpperCase() + element.slice(1);
641
586
  let mem;
642
-
643
587
  if (element === 'timeDimensions') {
644
588
  mem = this[`available${name}`].find(m => m.name === member.dimension);
645
-
646
589
  if (mem) {
647
- const dimension = { ...this.meta.resolveMember(mem.name, 'dimensions'),
590
+ const dimension = {
591
+ ...this.meta.resolveMember(mem.name, 'dimensions'),
648
592
  granularities: this.granularities
649
593
  };
650
- mem = { ...mem,
594
+ mem = {
595
+ ...mem,
651
596
  granularity: member.granularity,
652
597
  dateRange: member.dateRange,
653
598
  dimension,
@@ -655,7 +600,8 @@ var QueryBuilder = {
655
600
  };
656
601
  }
657
602
  } else if (element === 'filters') {
658
- mem = { ...member,
603
+ mem = {
604
+ ...member,
659
605
  and: resolveMembers(this.meta, member.and),
660
606
  or: resolveMembers(this.meta, member.or),
661
607
  member: getDimensionOrMeasure(this.meta, member)
@@ -663,16 +609,13 @@ var QueryBuilder = {
663
609
  } else {
664
610
  mem = this[`available${name}`].find(m => m.name === member);
665
611
  }
666
-
667
612
  if (mem) {
668
613
  this[element].push(mem);
669
614
  }
670
615
  },
671
-
672
616
  removeMember(element, member) {
673
617
  const name = element.charAt(0).toUpperCase() + element.slice(1);
674
618
  let mem;
675
-
676
619
  if (element === 'timeDimensions') {
677
620
  mem = this[`available${name}`].find(x => x.name === member);
678
621
  } else if (element === 'filters') {
@@ -680,27 +623,25 @@ var QueryBuilder = {
680
623
  } else {
681
624
  mem = this[`available${name}`].find(m => m.name === member);
682
625
  }
683
-
684
626
  if (mem) {
685
627
  const index = this[element].findIndex(x => x.name === mem);
686
628
  this[element].splice(index, 1);
687
629
  }
688
630
  },
689
-
690
631
  updateMember(element, old, member) {
691
632
  const name = element.charAt(0).toUpperCase() + element.slice(1);
692
633
  let mem;
693
634
  let index;
694
-
695
635
  if (element === 'timeDimensions') {
696
636
  index = this[element].findIndex(x => x.dimension.name === old.dimension);
697
637
  mem = this[`available${name}`].find(m => m.name === member.dimension);
698
-
699
638
  if (mem) {
700
- const dimension = { ...this.meta.resolveMember(mem.name, 'dimensions'),
639
+ const dimension = {
640
+ ...this.meta.resolveMember(mem.name, 'dimensions'),
701
641
  granularities: this.granularities
702
642
  };
703
- mem = { ...mem,
643
+ mem = {
644
+ ...mem,
704
645
  dimension,
705
646
  granularity: member.granularity,
706
647
  dateRange: member.dateRange,
@@ -709,7 +650,8 @@ var QueryBuilder = {
709
650
  }
710
651
  } else if (element === 'filters') {
711
652
  index = this[element].findIndex(x => x.dimension === old);
712
- mem = { ...member,
653
+ mem = {
654
+ ...member,
713
655
  and: resolveMembers(this.meta, member.and),
714
656
  or: resolveMembers(this.meta, member.or),
715
657
  member: getDimensionOrMeasure(this.meta, member)
@@ -718,12 +660,10 @@ var QueryBuilder = {
718
660
  index = this[element].findIndex(x => x.name === old);
719
661
  mem = this[`available${name}`].find(m => m.name === member);
720
662
  }
721
-
722
663
  if (mem) {
723
664
  this[element].splice(index, 1, mem);
724
665
  }
725
666
  },
726
-
727
667
  setMembers(element, members) {
728
668
  const name = element.charAt(0).toUpperCase() + element.slice(1);
729
669
  let mem;
@@ -731,12 +671,13 @@ var QueryBuilder = {
731
671
  members.filter(Boolean).forEach(m => {
732
672
  if (element === 'timeDimensions') {
733
673
  mem = this[`available${name}`].find(x => x.name === m.dimension);
734
-
735
674
  if (mem) {
736
- const dimension = { ...this.meta.resolveMember(mem.name, 'dimensions'),
675
+ const dimension = {
676
+ ...this.meta.resolveMember(mem.name, 'dimensions'),
737
677
  granularities: this.granularities
738
678
  };
739
- mem = { ...mem,
679
+ mem = {
680
+ ...mem,
740
681
  granularity: m.granularity,
741
682
  dateRange: m.dateRange,
742
683
  dimension,
@@ -744,7 +685,8 @@ var QueryBuilder = {
744
685
  };
745
686
  }
746
687
  } else if (element === 'filters') {
747
- mem = { ...m,
688
+ mem = {
689
+ ...m,
748
690
  and: resolveMembers(this.meta, m.and),
749
691
  or: resolveMembers(this.meta, m.or),
750
692
  member: getDimensionOrMeasure(this.meta, m)
@@ -752,58 +694,47 @@ var QueryBuilder = {
752
694
  } else {
753
695
  mem = this[`available${name}`].find(x => x.name === m);
754
696
  }
755
-
756
697
  if (mem) {
757
698
  elements.push(mem);
758
699
  }
759
700
  });
760
701
  this[element] = elements;
761
702
  },
762
-
763
703
  setLimit(limit) {
764
704
  this.limit = limit;
765
705
  },
766
-
767
706
  removeLimit() {
768
707
  this.limit = null;
769
708
  },
770
-
771
709
  setOffset(offset) {
772
710
  this.offset = offset;
773
711
  },
774
-
775
712
  removeOffset() {
776
713
  this.offset = null;
777
714
  },
778
-
779
715
  updateChart(chartType) {
780
716
  this.chartType = chartType;
781
717
  },
782
-
783
718
  setOrder(order = {}) {
784
719
  this.order = order;
785
720
  },
786
-
787
721
  emitVizStateChange(partialVizState) {
788
- this.$emit('vizStateChange', clone({ ...this.vizState,
722
+ this.$emit('vizStateChange', clone({
723
+ ...this.vizState,
789
724
  ...partialVizState
790
725
  }));
791
726
  }
792
-
793
727
  },
794
728
  watch: {
795
729
  validatedQuery: {
796
730
  deep: true,
797
-
798
731
  handler(query, prevQuery) {
799
732
  const hasQueryChanged = !areQueriesEqual(query, prevQuery);
800
-
801
733
  if (hasQueryChanged) {
802
734
  this.emitVizStateChange({
803
735
  query
804
736
  });
805
737
  }
806
-
807
738
  if (isQueryPresent(query) && hasQueryChanged) {
808
739
  this.cubeApi.dryRun(query, {
809
740
  mutexObj: this.mutex
@@ -811,18 +742,15 @@ var QueryBuilder = {
811
742
  pivotQuery
812
743
  }) => {
813
744
  const pivotConfig = ResultSet.getNormalizedPivotConfig(pivotQuery, this.pivotConfig);
814
-
815
745
  if (!equals(pivotConfig, this.pivotConfig)) {
816
746
  this.pivotConfig = pivotConfig;
817
747
  }
818
748
  }).catch(error => console.error(error));
819
749
  }
820
750
  }
821
-
822
751
  },
823
752
  query: {
824
753
  deep: true,
825
-
826
754
  handler(query) {
827
755
  if (!this.meta) {
828
756
  // this is ok as if meta has not been loaded by the time query prop has changed,
@@ -830,14 +758,11 @@ var QueryBuilder = {
830
758
  // copyQueryFromProps and will therefore update anyway.
831
759
  return;
832
760
  }
833
-
834
761
  this.copyQueryFromProps(query);
835
762
  }
836
-
837
763
  },
838
764
  pivotConfig: {
839
765
  deep: true,
840
-
841
766
  handler(pivotConfig, prevPivotConfig) {
842
767
  if (!equals(pivotConfig, prevPivotConfig)) {
843
768
  this.emitVizStateChange({
@@ -845,15 +770,12 @@ var QueryBuilder = {
845
770
  });
846
771
  }
847
772
  }
848
-
849
773
  },
850
-
851
774
  chartType(value) {
852
775
  this.emitVizStateChange({
853
776
  chartType: value
854
777
  });
855
778
  }
856
-
857
779
  }
858
780
  };
859
781