@thoughtspot/ts-chart-sdk 0.0.2-alpha.3 → 0.0.2-alpha.5

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.
Files changed (54) hide show
  1. package/dist/ts-chart-sdk.d.ts +660 -0
  2. package/lib/index.d.ts +2 -0
  3. package/lib/index.d.ts.map +1 -1
  4. package/lib/index.js +2 -0
  5. package/lib/index.js.map +1 -1
  6. package/lib/main/custom-chart-context.d.ts +8 -4
  7. package/lib/main/custom-chart-context.d.ts.map +1 -1
  8. package/lib/main/custom-chart-context.js +44 -2
  9. package/lib/main/custom-chart-context.js.map +1 -1
  10. package/lib/main/custom-chart-context.spec.js +101 -1
  11. package/lib/main/custom-chart-context.spec.js.map +1 -1
  12. package/lib/main/post-message-event-bridge.js +1 -1
  13. package/lib/main/post-message-event-bridge.js.map +1 -1
  14. package/lib/test/test-conditional-formatting-utils.d.ts +5 -0
  15. package/lib/test/test-conditional-formatting-utils.d.ts.map +1 -0
  16. package/lib/test/test-conditional-formatting-utils.js +43 -0
  17. package/lib/test/test-conditional-formatting-utils.js.map +1 -0
  18. package/lib/types/answer-column.types.d.ts +44 -0
  19. package/lib/types/answer-column.types.d.ts.map +1 -1
  20. package/lib/types/answer-column.types.js +40 -0
  21. package/lib/types/answer-column.types.js.map +1 -1
  22. package/lib/types/common.types.d.ts +6 -0
  23. package/lib/types/common.types.d.ts.map +1 -1
  24. package/lib/types/conditional-formatting.types.d.ts +155 -0
  25. package/lib/types/conditional-formatting.types.d.ts.map +1 -0
  26. package/lib/types/conditional-formatting.types.js +60 -0
  27. package/lib/types/conditional-formatting.types.js.map +1 -0
  28. package/lib/types/configurator.types.d.ts +3 -0
  29. package/lib/types/configurator.types.d.ts.map +1 -1
  30. package/lib/types/ts-to-chart-event.types.d.ts.map +1 -1
  31. package/lib/types/visual-prop.types.d.ts +3 -0
  32. package/lib/types/visual-prop.types.d.ts.map +1 -1
  33. package/lib/utils/conditional-formatting/conditional-formatting.d.ts +10 -0
  34. package/lib/utils/conditional-formatting/conditional-formatting.d.ts.map +1 -0
  35. package/lib/utils/conditional-formatting/conditional-formatting.js +103 -0
  36. package/lib/utils/conditional-formatting/conditional-formatting.js.map +1 -0
  37. package/lib/utils/conditional-formatting/conditional-formatting.spec.d.ts +2 -0
  38. package/lib/utils/conditional-formatting/conditional-formatting.spec.d.ts.map +1 -0
  39. package/lib/utils/conditional-formatting/conditional-formatting.spec.js +122 -0
  40. package/lib/utils/conditional-formatting/conditional-formatting.spec.js.map +1 -0
  41. package/package.json +3 -3
  42. package/src/index.ts +2 -0
  43. package/src/main/custom-chart-context.spec.ts +118 -1
  44. package/src/main/custom-chart-context.ts +113 -8
  45. package/src/main/post-message-event-bridge.ts +1 -1
  46. package/src/test/test-conditional-formatting-utils.ts +95 -0
  47. package/src/types/answer-column.types.ts +63 -0
  48. package/src/types/common.types.ts +8 -0
  49. package/src/types/conditional-formatting.types.ts +172 -0
  50. package/src/types/configurator.types.ts +7 -0
  51. package/src/types/ts-to-chart-event.types.ts +2 -1
  52. package/src/types/visual-prop.types.ts +7 -0
  53. package/src/utils/conditional-formatting/conditional-formatting.spec.ts +415 -0
  54. package/src/utils/conditional-formatting/conditional-formatting.ts +229 -0
@@ -0,0 +1,229 @@
1
+ /**
2
+ * @file: Conditional Formatting Utils
3
+ * @fileoverview All CF utils for the Custom Chart implementations
4
+ * @author Yashvardhan Nehra <yashvardhan.nehra@thoughtspot.com>
5
+ *
6
+ * Copyright: ThoughtSpot Inc. 2023
7
+ */
8
+
9
+ import _ from 'lodash';
10
+ import { ChartColumn } from '../../types/answer-column.types';
11
+ import { DataPointsArray } from '../../types/common.types';
12
+ import {
13
+ ConditionalFormatting,
14
+ ConditionalFormattingComparisonTypes,
15
+ ConditionalMetric,
16
+ Operators,
17
+ Parameter,
18
+ } from '../../types/conditional-formatting.types';
19
+
20
+ export const getMinRangeValue = (
21
+ metric: ConditionalMetric,
22
+ ): number | undefined | null => metric?.rangeValues?.min;
23
+
24
+ export const getMaxRangeValue = (
25
+ metric: ConditionalMetric,
26
+ ): number | undefined | null => metric?.rangeValues?.max;
27
+
28
+ /**
29
+ * Performs a value-based comparison between two values based on the specified operator in the
30
+ * metric.
31
+ *
32
+ * @param metric - The conditional formatting metric info
33
+ * @param lhsValue - The left-hand side value to compare.
34
+ * @param rhsValue - The right-hand side value to compare.
35
+ * @returns Boolean indicating the result of the comparison.
36
+ */
37
+ const doValueBasedComparison = (
38
+ metric: ConditionalMetric,
39
+ lhsValue?: string | number | null,
40
+ rhsValue?: string | number | null,
41
+ ): boolean => {
42
+ switch (metric.operator) {
43
+ case Operators.Is:
44
+ case Operators.EqualTo:
45
+ return (
46
+ !_.isNil(lhsValue) &&
47
+ !_.isNil(rhsValue) &&
48
+ (_.isEqual(lhsValue, rhsValue) ||
49
+ _.isEqual(_.toString(lhsValue), _.toString(rhsValue)))
50
+ );
51
+ case Operators.IsNot:
52
+ case Operators.NotEqualTo: {
53
+ if (_.isNil(lhsValue) || _.isNil(rhsValue))
54
+ return lhsValue !== rhsValue;
55
+ return !_.isEqual(_.toString(lhsValue), _.toString(rhsValue));
56
+ }
57
+ case Operators.IsNull:
58
+ case Operators.IsEmpty:
59
+ return _.isNil(lhsValue);
60
+ case Operators.IsNotNull:
61
+ case Operators.IsNotEmpty:
62
+ return !_.isNil(lhsValue);
63
+ case Operators.LessThan:
64
+ return _.toNumber(lhsValue) < _.toNumber(rhsValue);
65
+ case Operators.LessThanEqualTo:
66
+ return _.toNumber(lhsValue) <= _.toNumber(rhsValue);
67
+ case Operators.GreaterThan:
68
+ return _.toNumber(lhsValue) > _.toNumber(rhsValue);
69
+ case Operators.GreaterThanEqualTo:
70
+ return _.toNumber(lhsValue) >= _.toNumber(rhsValue);
71
+ case Operators.IsBetween:
72
+ return (
73
+ lhsValue != null &&
74
+ +lhsValue >= (getMinRangeValue(metric) ?? -Infinity) &&
75
+ +lhsValue <= (getMaxRangeValue(metric) ?? Infinity)
76
+ );
77
+ case Operators.Contains:
78
+ return (
79
+ lhsValue != null &&
80
+ rhsValue != null &&
81
+ _.includes(_.toString(lhsValue), rhsValue.toString())
82
+ );
83
+ case Operators.DoesNotContain:
84
+ return (
85
+ lhsValue != null &&
86
+ rhsValue != null &&
87
+ !_.includes(_.toString(lhsValue), rhsValue.toString())
88
+ );
89
+ case Operators.StartsWith:
90
+ return (
91
+ lhsValue != null &&
92
+ rhsValue != null &&
93
+ _.startsWith(_.toString(lhsValue), rhsValue.toString())
94
+ );
95
+ case Operators.EndsWith:
96
+ return (
97
+ lhsValue != null &&
98
+ rhsValue != null &&
99
+ _.endsWith(_.toString(lhsValue), rhsValue.toString())
100
+ );
101
+ default:
102
+ return false;
103
+ }
104
+ };
105
+
106
+ /**
107
+ * Evaluates whether the condition defined by the metric is satisfied.
108
+ *
109
+ * @param metric - The conditional formatting metric info
110
+ * @param parameters - An array of parameters that may include the parameter needed for ParameterBased comparison.
111
+ * @param lhsColValue - The value of the left-hand side column, used in ColumnBased and some ValueBased comparisons.
112
+ * @param rhsColValue - The value of the right-hand side column, used in ColumnBased comparisons.
113
+ * @returns Boolean indicating whether the condition is satisfied.
114
+ */
115
+ export const isConditionSatisfied = (
116
+ metric: ConditionalMetric,
117
+ parameters?: Parameter[],
118
+ lhsColValue?: string | number | null,
119
+ rhsColValue?: string | number | null,
120
+ ): boolean => {
121
+ let parameter = null;
122
+ let parameterValue = null;
123
+ switch (metric.comparisonType) {
124
+ case ConditionalFormattingComparisonTypes.ValueBased:
125
+ return doValueBasedComparison(metric, lhsColValue, metric.value);
126
+ case ConditionalFormattingComparisonTypes.ParameterBased:
127
+ parameter = parameters?.find(
128
+ (parameter: Parameter) =>
129
+ parameter.id === metric.comparisonParameterId,
130
+ );
131
+ parameterValue =
132
+ parameter?.overrideValue || parameter?.defaultValue;
133
+ return doValueBasedComparison(metric, lhsColValue, parameterValue);
134
+ case ConditionalFormattingComparisonTypes.ColumnBased:
135
+ return doValueBasedComparison(metric, lhsColValue, rhsColValue);
136
+ default:
137
+ return doValueBasedComparison(metric, lhsColValue, metric.value);
138
+ }
139
+ };
140
+
141
+ /**
142
+ * Validates if the conditional rule is applicable or not.
143
+ *
144
+ * @param conditionalMetric - The conditional rule to be validated.
145
+ * @param index - The index of the data point to evaluate.
146
+ * @param columnId - The ID of the column for which to validate the rule.
147
+ * @param dataAttr - The data points array containing the data for the chart.
148
+ * @param inScopeParameters - The list of parameters available for the chart.
149
+ * @returns Boolean indicating if the conditional rule is applicable or not.
150
+ */
151
+ export function validateCfCondition(
152
+ conditionalMetric: ConditionalMetric,
153
+ index: number,
154
+ columnId: string,
155
+ dataAttr?: DataPointsArray,
156
+ inScopeParameters?: Parameter[],
157
+ ): boolean {
158
+ let lhsColumnValue;
159
+ let rhsColumnValue;
160
+ if (dataAttr?.columns) {
161
+ const columnIdx = _.findIndex(
162
+ dataAttr.columns,
163
+ (colId) => colId === columnId,
164
+ );
165
+ lhsColumnValue = dataAttr?.dataValue[index][columnIdx];
166
+ }
167
+ const lhsId = conditionalMetric.lhsColumnId;
168
+ const rhsId = conditionalMetric.rhsColumnId;
169
+ if (lhsId && dataAttr?.columns) {
170
+ const lhsIdx = _.findIndex(
171
+ dataAttr.columns,
172
+ (colId) => colId === lhsId,
173
+ );
174
+ lhsColumnValue = dataAttr?.dataValue[index][lhsIdx];
175
+ }
176
+ if (rhsId && dataAttr?.columns) {
177
+ const rhsIdx = _.findIndex(
178
+ dataAttr.columns,
179
+ (colId) => colId === rhsId,
180
+ );
181
+ rhsColumnValue = dataAttr?.dataValue[index][rhsIdx];
182
+ }
183
+ return isConditionSatisfied(
184
+ conditionalMetric,
185
+ inScopeParameters,
186
+ lhsColumnValue,
187
+ rhsColumnValue,
188
+ );
189
+ }
190
+
191
+ /**
192
+ * Evaluates all conditional formatting rules against a specific data point and returns the first
193
+ * applicable rule.
194
+ *
195
+ * @param idx - The index of the data point to evaluate.
196
+ * @param columnId - The ID of the column for which to validate the rule.
197
+ * @param dataArr - The array of data points against which the conditional formatting rules will be evaluated.
198
+ * @param conditionalFormatting - The conditional formattings applied on a column.
199
+ * @returns The first ConditionalMetric that is applicable to the specified data point, or null if no rules are applicable.
200
+ */
201
+ export const applicableConditionalFormatting = (
202
+ idx: number,
203
+ columnId: string,
204
+ dataArr: DataPointsArray,
205
+ conditionalFormatting?: ConditionalFormatting,
206
+ ): ConditionalMetric | null => {
207
+ return (
208
+ _.find(conditionalFormatting?.rows, (conditionalMetric) => {
209
+ return validateCfCondition(
210
+ conditionalMetric as ConditionalMetric,
211
+ idx,
212
+ columnId,
213
+ dataArr,
214
+ );
215
+ }) || null
216
+ );
217
+ };
218
+
219
+ /**
220
+ * Retrieves all conditional formatting rules applied to a column.
221
+ *
222
+ * @param column - The column for which to retrieve conditional formatting rules.
223
+ * @returns An array of ConditionalFormatting configurations applied to the specified column, or undefined if no configurations are applicable.
224
+ */
225
+ export function getCfForColumn(
226
+ column: ChartColumn,
227
+ ): ConditionalFormatting | undefined {
228
+ return column?.columnProperties?.conditionalFormatting || undefined;
229
+ }