sea-chart 2.0.0 → 2.0.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.
Files changed (80) hide show
  1. package/dist/components/cell-factory/SimpleCellFormatter.js +1 -1
  2. package/dist/components/cell-factory/link-content.js +4 -4
  3. package/dist/components/color-picker/index.js +1 -1
  4. package/dist/components/color-popover/color-rules/color-rule.js +1 -1
  5. package/dist/components/color-popover/color-rules/index.js +1 -1
  6. package/dist/components/color-popover/color-rules-popover.js +6 -6
  7. package/dist/components/color-popover/color-selector-popover.js +2 -2
  8. package/dist/components/color-setting/color-group-selector.js +1 -1
  9. package/dist/components/common-add-tool/index.js +2 -2
  10. package/dist/components/data-process-setter/hide-column-setter.js +1 -1
  11. package/dist/components/data-process-setter/sort-setter.js +2 -2
  12. package/dist/components/drill-down-settings/drill-down-fields-popover/index.js +4 -4
  13. package/dist/components/icon/index.js +2 -2
  14. package/dist/components/popover/hide-column-popover/hide-column-popover-widgets/hide-column-item.js +1 -1
  15. package/dist/components/popover/hide-column-popover/hide-column-popover.js +1 -1
  16. package/dist/components/popover/sort-popover/sort-popover.js +1 -1
  17. package/dist/components/row-card/row-card-header-cell.js +2 -2
  18. package/dist/components/row-card/row-card-header.js +1 -1
  19. package/dist/components/row-card/row-card-item.js +2 -2
  20. package/dist/components/row-card/row-card.js +2 -2
  21. package/dist/components/statistic-record-dialog/index.js +1 -1
  22. package/dist/components/types-dialog/index.js +7 -7
  23. package/dist/context.js +2 -2
  24. package/dist/services/map-json.js +4 -4
  25. package/dist/settings/basic-number-card/style-settings.js +1 -1
  26. package/dist/settings/map-settings/map-style-settings.js +1 -1
  27. package/dist/settings/stacks-settings/index.js +1 -1
  28. package/dist/settings/style-settings.js +1 -1
  29. package/dist/settings/table-settings/data-settings.js +1 -1
  30. package/dist/settings/trend-settings/style-setting.js +2 -2
  31. package/dist/settings/widgets/date-summary-item.js +2 -2
  32. package/dist/settings/widgets/numeric-summary-item.js +2 -2
  33. package/dist/settings/widgets/summary-settings.js +2 -2
  34. package/dist/settings/widgets/switch/index.js +1 -1
  35. package/dist/settings/widgets/y-axis-group-settings.js +1 -1
  36. package/dist/utils/chart-utils/base-utils.js +7 -7
  37. package/dist/utils/chart-utils/original-data-utils/basic-chart-calculator.js +1 -1
  38. package/dist/utils/chart-utils/original-data-utils/compare-bar-chart-calculator.js +2 -2
  39. package/dist/utils/chart-utils/original-data-utils/completeness-calculator.js +1 -1
  40. package/dist/utils/chart-utils/sql-statistics-utils.js +9 -9
  41. package/dist/utils/collaborator-utils.js +1 -1
  42. package/dist/utils/collaborator.js +2 -2
  43. package/dist/utils/column-utils.js +12 -12
  44. package/dist/utils/common-utils.js +1 -1
  45. package/dist/utils/date-translate.js +1 -1
  46. package/dist/utils/object-utils.js +1 -1
  47. package/dist/utils/options-utils.js +2 -2
  48. package/dist/utils/row-record-utils.js +2 -2
  49. package/dist/utils/sql/chart-data-sql.js +58 -58
  50. package/dist/utils/sql/column-2-sql-column.js +18 -18
  51. package/dist/view/index.js +2 -2
  52. package/dist/view/title/index.js +2 -2
  53. package/dist/view/wrapper/basic-number-card.js +8 -8
  54. package/dist/view/wrapper/chart-component.js +23 -14
  55. package/dist/view/wrapper/combination.js +22 -16
  56. package/dist/view/wrapper/dashboard.js +4 -4
  57. package/dist/view/wrapper/funnel.js +2 -2
  58. package/dist/view/wrapper/heat-map.js +1 -1
  59. package/dist/view/wrapper/horizontal-component.js +9 -9
  60. package/dist/view/wrapper/map.js +1 -1
  61. package/dist/view/wrapper/mirror.js +1 -1
  62. package/dist/view/wrapper/pie.js +1 -1
  63. package/dist/view/wrapper/ring.js +1 -1
  64. package/dist/view/wrapper/scatter.js +2 -2
  65. package/dist/view/wrapper/table/index.js +1 -1
  66. package/dist/view/wrapper/table/one-dimension-table-with-numeric-columns.js +3 -3
  67. package/dist/view/wrapper/table/pivot-table-display-name.js +1 -1
  68. package/dist/view/wrapper/table/two-dimension-table.js +8 -8
  69. package/dist/view/wrapper/table-element/components/formatter.js +2 -2
  70. package/dist/view/wrapper/table-element/components/formatters/FileFormatter/index.js +1 -1
  71. package/dist/view/wrapper/table-element/components/formatters/link-formatter.js +17 -17
  72. package/dist/view/wrapper/table-element/components/link-formatter.js +17 -17
  73. package/dist/view/wrapper/table-element/components/record.js +3 -3
  74. package/dist/view/wrapper/table-element/components/records.js +4 -4
  75. package/dist/view/wrapper/table-element/components/utils.js +1 -1
  76. package/dist/view/wrapper/treemap.js +1 -1
  77. package/dist/view/wrapper/trend.js +18 -18
  78. package/dist/view/wrapper/world-map.js +1 -1
  79. package/dist/view/wrapper/wrappers-d3/bar.js +4 -4
  80. package/package.json +1 -1
@@ -33,31 +33,31 @@ class ChartDataSQL {
33
33
  };
34
34
  this._get_sql_order_by = (sortType, groupName) => {
35
35
  if (!sortType) {
36
- return "ORDER BY ".concat(groupName);
36
+ return `ORDER BY ${groupName}`;
37
37
  }
38
38
  return '';
39
39
  };
40
40
  this._update_filter_sql = (include_empty, column, method) => {
41
41
  const column_name = (column === null || column === void 0 ? void 0 : column.name) || '';
42
42
  if (!include_empty) {
43
- const sql_column_name = method ? "".concat(method, "(`").concat(column_name, "`)") : "`".concat(column_name, "`");
44
- const not_include_empty_sql = "".concat(sql_column_name, " IS NOT NULL");
43
+ const sql_column_name = method ? `${method}(\`${column_name}\`)` : `\`${column_name}\``;
44
+ const not_include_empty_sql = `${sql_column_name} IS NOT NULL`;
45
45
  if (this.filter_sql) {
46
46
  if (this.filter_sql.startsWith('WHERE')) {
47
47
  this.filter_sql = this.filter_sql.slice(5);
48
48
  }
49
- this.filter_sql = "WHERE ".concat(not_include_empty_sql, " AND ").concat(this.filter_sql);
49
+ this.filter_sql = `WHERE ${not_include_empty_sql} AND ${this.filter_sql}`;
50
50
  } else {
51
- this.filter_sql = "WHERE ".concat(not_include_empty_sql);
51
+ this.filter_sql = `WHERE ${not_include_empty_sql}`;
52
52
  }
53
53
  }
54
54
  };
55
55
  this._summary_column_2_sql = (summary_method, column) => {
56
56
  const column_name = (column === null || column === void 0 ? void 0 : column.name) || '';
57
- const valid_column_name = "`".concat(column_name, "`");
58
- if (summary_method === 'DISTINCT_VALUES') return "COUNT(DISTINCT ".concat(valid_column_name, ")");
59
- if (summary_method === 'ROW_COUNT') return "COUNT(".concat(valid_column_name, ")");
60
- return "".concat(_constants.DTABLE_DB_SUMMARY_METHOD[summary_method], "(").concat(valid_column_name, ")");
57
+ const valid_column_name = `\`${column_name}\``;
58
+ if (summary_method === 'DISTINCT_VALUES') return `COUNT(DISTINCT ${valid_column_name})`;
59
+ if (summary_method === 'ROW_COUNT') return `COUNT(${valid_column_name})`;
60
+ return `${_constants.DTABLE_DB_SUMMARY_METHOD[summary_method]}(${valid_column_name})`;
61
61
  };
62
62
  this._basic_statistic_2_sql = () => {
63
63
  let x_axis_column_key, x_axis_date_granularity, x_axis_geolocation_granularity, x_axis_include_empty_cells, y_axis_summary_type, y_axis_summary_method, y_axis_summary_column_key;
@@ -102,9 +102,9 @@ class ChartDataSQL {
102
102
  }
103
103
  }
104
104
  if (summary_column_name) {
105
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
105
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
106
106
  }
107
- return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
107
+ return `SELECT ${groupby_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
108
108
  };
109
109
  this._heat_map_statistic_2_sql = () => {
110
110
  const {
@@ -131,7 +131,7 @@ class ChartDataSQL {
131
131
  }
132
132
  summary_column_name = this._summary_column_2_sql(summary_method.toUpperCase(), summary_column);
133
133
  }
134
- return "SELECT ".concat(column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(column_name, " LIMIT 0, 5000");
134
+ return `SELECT ${column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${column_name} LIMIT 0, 5000`;
135
135
  };
136
136
  this._mirror_map_statistic_2_sql = () => {
137
137
  const {
@@ -163,7 +163,7 @@ class ChartDataSQL {
163
163
  }
164
164
  summary_column_name = this._summary_column_2_sql(summary_method.toUpperCase(), summary_column);
165
165
  }
166
- return "SELECT ".concat(column_name, ", ").concat(column_groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(column_name, ", ").concat(column_groupby_column_name, " LIMIT 0, 5000");
166
+ return `SELECT ${column_name}, ${column_groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${column_name}, ${column_groupby_column_name} LIMIT 0, 5000`;
167
167
  };
168
168
  this._trend_map_statistic_2_sql = () => {
169
169
  const {
@@ -191,7 +191,7 @@ class ChartDataSQL {
191
191
  }
192
192
  summary_column_name = this._summary_column_2_sql(summary_method.toUpperCase(), summary_column);
193
193
  }
194
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
194
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
195
195
  };
196
196
  this._grouping_statistic_2_sql = () => {
197
197
  let x_axis_column_key, x_axis_date_granularity, x_axis_geolocation_granularity, x_axis_include_empty_cells, y_axis_summary_type, y_axis_summary_method, y_axis_summary_column_key;
@@ -236,7 +236,7 @@ class ChartDataSQL {
236
236
  'geolocation_granularity': column_groupby_geolocation_granularity
237
237
  });
238
238
  const summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);
239
- return "SELECT ".concat(groupby_column_name, ", ").concat(column_groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, ", ").concat(column_groupby_column_name, " LIMIT 0, 5000");
239
+ return `SELECT ${groupby_column_name}, ${column_groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name}, ${column_groupby_column_name} LIMIT 0, 5000`;
240
240
  }
241
241
  if (column_groupby_multiple_numeric_column) {
242
242
  let column_groupby_numeric_columns = summary_columns.slice(0);
@@ -257,7 +257,7 @@ class ChartDataSQL {
257
257
  column_groupby_numeric_column_names.push(summary_column_name);
258
258
  }
259
259
  const column_groupby_numeric_column_names_string = column_groupby_numeric_column_names.join(', ');
260
- return "SELECT ".concat(groupby_column_name, ", ").concat(column_groupby_numeric_column_names_string, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
260
+ return `SELECT ${groupby_column_name}, ${column_groupby_numeric_column_names_string} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
261
261
  }
262
262
  const summary_column = this._get_column_by_key(y_axis_summary_column_key);
263
263
  if (!summary_column) return this._basic_statistic_2_sql();
@@ -265,13 +265,13 @@ class ChartDataSQL {
265
265
  const column_groupby_column = this._get_column_by_key(column_groupby_column_key);
266
266
  const summary_column_name = this._summary_column_2_sql(summary_method, summary_column);
267
267
  if (!column_groupby_column) {
268
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
268
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
269
269
  }
270
270
  const column_groupby_column_name = this._chart_column_name_to_sql(column_groupby_column, {
271
271
  'date_granularity': column_groupby_date_granularity,
272
272
  'geolocation_granularity': column_groupby_geolocation_granularity
273
273
  });
274
- return "SELECT ".concat(groupby_column_name, ", ").concat(column_groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, ", ").concat(column_groupby_column_name, " LIMIT 0, 5000");
274
+ return `SELECT ${groupby_column_name}, ${column_groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name}, ${column_groupby_column_name} LIMIT 0, 5000`;
275
275
  };
276
276
  this._custom_statistic_2_sql = () => {
277
277
  const {
@@ -310,7 +310,7 @@ class ChartDataSQL {
310
310
  const numeric_column = this._get_column_by_key(item.column_key);
311
311
  group_methods.push(this._summary_column_2_sql(_constants.DTABLE_DB_SUMMARY_METHOD[item.summary_method.toUpperCase()], numeric_column));
312
312
  });
313
- sql = "SELECT ".concat(groupby_column_name, ", ").concat(group_methods.join(','), " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 5000");
313
+ sql = `SELECT ${groupby_column_name}, ${group_methods.join(',')} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 5000`;
314
314
  }
315
315
  SQLs.push(sql);
316
316
  }
@@ -358,9 +358,9 @@ class ChartDataSQL {
358
358
  filter_sql = this.filter_sql.length === 0 ? 'where ' : this.filter_sql + ' AND';
359
359
  const formattedXAxisDateRangeEnd = (0, _dayjs.default)(x_axis_date_range_end).add(1, 'days').format('YYYY-MM-DD');
360
360
  const formattedXAxisComparedDateRangeEnd = (0, _dayjs.default)(x_axis_compared_date_range_end).add(1, 'days').format('YYYY-MM-DD');
361
- filter_sql = filter_sql + " ((".concat(groupby_column.name, " >= '").concat(x_axis_date_range_start, "' AND ").concat(groupby_column.name, " < '").concat(formattedXAxisDateRangeEnd, "') Or (").concat(groupby_column.name, " >= '").concat(x_axis_compared_date_range_start, "' AND ").concat(groupby_column.name, " < '").concat(formattedXAxisComparedDateRangeEnd, "'))");
361
+ filter_sql = filter_sql + ` ((${groupby_column.name} >= '${x_axis_date_range_start}' AND ${groupby_column.name} < '${formattedXAxisDateRangeEnd}') Or (${groupby_column.name} >= '${x_axis_compared_date_range_start}' AND ${groupby_column.name} < '${formattedXAxisComparedDateRangeEnd}'))`;
362
362
  }
363
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
363
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
364
364
  };
365
365
  this._combination_chart_statistic_2_sql = () => {
366
366
  const x_axis_column_key = this.chart['x_axis_column_key'] || '';
@@ -391,13 +391,13 @@ class ChartDataSQL {
391
391
  let summary_column_name = '';
392
392
  if (right_summary_type === 'COUNT') {
393
393
  summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);
394
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
394
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
395
395
  } else {
396
396
  const right_summary_column = this._get_column_by_key(y_axis_right_summary_column);
397
397
  if (right_summary_column) {
398
398
  const right_summary_method = y_axis_right_summary_method.toUpperCase();
399
399
  summary_column_name = this._summary_column_2_sql(right_summary_method, right_summary_column);
400
- return "SELECT ".concat(groupby_column_name, ", COUNT(").concat(groupby_column_name, "), ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
400
+ return `SELECT ${groupby_column_name}, COUNT(${groupby_column_name}), ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
401
401
  }
402
402
  }
403
403
  }
@@ -437,7 +437,7 @@ class ChartDataSQL {
437
437
  }
438
438
  }
439
439
  const column_groupby_numeric_column_names_string = column_groupby_numeric_column_names.join(', ');
440
- return "SELECT ".concat(groupby_column_name, ", ").concat(column_groupby_numeric_column_names_string, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
440
+ return `SELECT ${groupby_column_name}, ${column_groupby_numeric_column_names_string} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
441
441
  }
442
442
  const summary_column = this._get_column_by_key(y_axis_left_summary_column);
443
443
  const summary_method = y_axis_left_summary_method.toUpperCase();
@@ -454,11 +454,11 @@ class ChartDataSQL {
454
454
  }
455
455
  if (right_summary_column_name) {
456
456
  if (left_summary_column_name === right_summary_column_name) {
457
- return "SELECT ".concat(groupby_column_name, ", ").concat(left_summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
457
+ return `SELECT ${groupby_column_name}, ${left_summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
458
458
  }
459
- return "SELECT ".concat(groupby_column_name, ", ").concat(right_summary_column_name, ", ").concat(left_summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
459
+ return `SELECT ${groupby_column_name}, ${right_summary_column_name}, ${left_summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
460
460
  }
461
- return "SELECT ".concat(groupby_column_name, ", ").concat(left_summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
461
+ return `SELECT ${groupby_column_name}, ${left_summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
462
462
  };
463
463
  this._summary_columns_2_sql = (summary_columns, summary_column_key, groupby_column, summary_method) => {
464
464
  const summary_column = this._get_column_by_key(summary_column_key);
@@ -515,11 +515,11 @@ class ChartDataSQL {
515
515
  summary_type = summary_type.toUpperCase();
516
516
  if (summary_type === 'COUNT') {
517
517
  const summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);
518
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
518
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
519
519
  }
520
520
  if (summary_columns) {
521
521
  const summary_column_names_str = this._summary_columns_2_sql(summary_columns, summary_column_key, groupby_column, summary_method);
522
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_names_str, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
522
+ return `SELECT ${groupby_column_name}, ${summary_column_names_str} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
523
523
  }
524
524
  summary_method = summary_method.toUpperCase();
525
525
  let new_numeric_column_keys = [summary_column_key];
@@ -532,9 +532,9 @@ class ChartDataSQL {
532
532
  }
533
533
  });
534
534
  if (numeric_column_names.length > 0) {
535
- return "SELECT ".concat(groupby_column_name, ", ").concat(numeric_column_names.join(', '), " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
535
+ return `SELECT ${groupby_column_name}, ${numeric_column_names.join(', ')} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
536
536
  }
537
- return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
537
+ return `SELECT ${groupby_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
538
538
  };
539
539
  this._two_dimension_statistic_table_2_sql = () => {
540
540
  const groupby_column_key = this.chart['groupby_column_key'] || '';
@@ -583,7 +583,7 @@ class ChartDataSQL {
583
583
  summary_column_names_str = this._summary_columns_2_sql(summary_columns, summary_column_key, groupby_column, summary_method);
584
584
  }
585
585
  }
586
- return "SELECT ".concat(groupby_column_name, ", ").concat(column_groupby_column_name, ", ").concat(summary_column_names_str, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, ", ").concat(column_groupby_column_name, " LIMIT 0, 5000");
586
+ return `SELECT ${groupby_column_name}, ${column_groupby_column_name}, ${summary_column_names_str} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name}, ${column_groupby_column_name} LIMIT 0, 5000`;
587
587
  };
588
588
  this._pie_chart_statistic_2_sql = () => {
589
589
  const groupby_column_key = this.chart['groupby_column_key'] || '';
@@ -619,14 +619,14 @@ class ChartDataSQL {
619
619
  }
620
620
  }
621
621
  if (summary_column_name) {
622
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
622
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
623
623
  }
624
- return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
624
+ return `SELECT ${groupby_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
625
625
  };
626
626
  this._basic_number_card_chart_statistic_2_sql = () => {
627
627
  const summary_type = this.chart['summary_type'];
628
628
  if (summary_type === _constants.CHART_Y_GROUP_TYPE.COUNT) {
629
- return "SELECT COUNT(*) FROM ".concat(this.table_name, " ").concat(this.filter_sql, " LIMIT 0, 5000");
629
+ return `SELECT COUNT(*) FROM ${this.table_name} ${this.filter_sql} LIMIT 0, 5000`;
630
630
  }
631
631
  const numeric_column_key = this.chart['numeric_column_key'] || '';
632
632
  let summary_method = this.chart['summary_method'] || '';
@@ -642,7 +642,7 @@ class ChartDataSQL {
642
642
  this._update_filter_sql(true, numeric_column);
643
643
  summary_method = summary_method.toUpperCase();
644
644
  const summary_column_name = this._summary_column_2_sql(summary_method, numeric_column);
645
- return "SELECT ".concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " LIMIT 0, 5000");
645
+ return `SELECT ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} LIMIT 0, 5000`;
646
646
  };
647
647
  this._dashboard_chart_statistic_2_sql = () => {
648
648
  const target_column_key = this.chart['target_value_column_key'] || '';
@@ -672,7 +672,7 @@ class ChartDataSQL {
672
672
  this._update_filter_sql(true, target_column);
673
673
  total_summary_method = total_summary_method.toUpperCase();
674
674
  const total_summary_column_name = this._summary_column_2_sql(total_summary_method, total_column);
675
- return "SELECT ".concat(target_summary_column_name, ", ").concat(total_summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " LIMIT 0, 5000");
675
+ return `SELECT ${target_summary_column_name}, ${total_summary_column_name} FROM ${this.table_name} ${this.filter_sql} LIMIT 0, 5000`;
676
676
  };
677
677
  this._completeness_chart_statistic_2_sql = () => {
678
678
  const groupby_column_key = this.chart['groupby_column_key'];
@@ -711,9 +711,9 @@ class ChartDataSQL {
711
711
  'date_granularity': date_granularity,
712
712
  'geolocation_granularity': geolocation_granularity
713
713
  });
714
- return "SELECT `".concat(groupby_column_name, "`, ").concat(column_groupby_column_name, ", SUM(`").concat(target_column_name, "`), SUM(`").concat(completed_column_name, "`) FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY `").concat(groupby_column_name, "`, ").concat(column_groupby_column_name, " LIMIT 0, 5000");
714
+ return `SELECT \`${groupby_column_name}\`, ${column_groupby_column_name}, SUM(\`${target_column_name}\`), SUM(\`${completed_column_name}\`) FROM ${this.table_name} ${this.filter_sql} GROUP BY \`${groupby_column_name}\`, ${column_groupby_column_name} LIMIT 0, 5000`;
715
715
  }
716
- return "SELECT `".concat(groupby_column_name, "`, `").concat(target_column_name, "`, `").concat(completed_column_name, "` FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY `").concat(groupby_column_name, "`, `").concat(target_column_name, "`, `").concat(completed_column_name, "` LIMIT 0, 5000");
716
+ return `SELECT \`${groupby_column_name}\`, \`${target_column_name}\`, \`${completed_column_name}\` FROM ${this.table_name} ${this.filter_sql} GROUP BY \`${groupby_column_name}\`, \`${target_column_name}\`, \`${completed_column_name}\` LIMIT 0, 5000`;
717
717
  };
718
718
  this._scatter_statistic_2_sql = () => {
719
719
  const x_axis_column_key = this.chart['x_axis_column_key'];
@@ -753,9 +753,9 @@ class ChartDataSQL {
753
753
  'date_granularity': date_granularity,
754
754
  'geolocation_granularity': geolocation_granularity
755
755
  });
756
- return "SELECT `".concat(xAxisColumnName, "`, `").concat(yAxisColumnName, "`, ").concat(column_groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY `").concat(xAxisColumnName, "`, `").concat(yAxisColumnName, "`, ").concat(column_groupby_column_name, " LIMIT 0, 5000");
756
+ return `SELECT \`${xAxisColumnName}\`, \`${yAxisColumnName}\`, ${column_groupby_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY \`${xAxisColumnName}\`, \`${yAxisColumnName}\`, ${column_groupby_column_name} LIMIT 0, 5000`;
757
757
  }
758
- return "SELECT `".concat(xAxisColumnName, "`, `").concat(yAxisColumnName, "` FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY `").concat(xAxisColumnName, "`, `").concat(yAxisColumnName, "` LIMIT 0, 5000");
758
+ return `SELECT \`${xAxisColumnName}\`, \`${yAxisColumnName}\` FROM ${this.table_name} ${this.filter_sql} GROUP BY \`${xAxisColumnName}\`, \`${yAxisColumnName}\` LIMIT 0, 5000`;
759
759
  };
760
760
  this._map_statistic_2_sql = () => {
761
761
  const {
@@ -791,9 +791,9 @@ class ChartDataSQL {
791
791
  }
792
792
  }
793
793
  if (summary_column_name) {
794
- return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
794
+ return `SELECT ${groupby_column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
795
795
  }
796
- return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
796
+ return `SELECT ${groupby_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${groupby_column_name} LIMIT 0, 5000`;
797
797
  };
798
798
  this._world_map_basic_statistic_2_sql = () => {
799
799
  const {
@@ -821,7 +821,7 @@ class ChartDataSQL {
821
821
  }
822
822
  summary_column_name = this._summary_column_2_sql(summary_method.toUpperCase(), summary_column);
823
823
  }
824
- return "SELECT ".concat(column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(column_name, " LIMIT 0, 5000");
824
+ return `SELECT ${column_name}, ${summary_column_name} FROM ${this.table_name} ${this.filter_sql} GROUP BY ${column_name} LIMIT 0, 5000`;
825
825
  };
826
826
  this.to_sql = () => {
827
827
  if (this.error) {
@@ -978,7 +978,7 @@ class ChartDataSQL {
978
978
  type
979
979
  } = column || {};
980
980
  if (type === _dtableUtils.CellType.SINGLE_SELECT || type === _dtableUtils.CellType.MULTIPLE_SELECT) {
981
- return "'".concat(name, "'");
981
+ return `'${name}'`;
982
982
  }
983
983
  if (type === _dtableUtils.CellType.NUMBER) {
984
984
  const newName = Number(name);
@@ -991,7 +991,7 @@ class ChartDataSQL {
991
991
  if (typeof newName === 'number') {
992
992
  return newName;
993
993
  }
994
- return "'".concat(newName, "'");
994
+ return `'${newName}'`;
995
995
  };
996
996
  this.get_statistic_record_sql = (statItem, statisticRecord, _ref2) => {
997
997
  let {
@@ -1031,36 +1031,36 @@ class ChartDataSQL {
1031
1031
  }
1032
1032
  let sqlString;
1033
1033
  if (type === _constants.CHART_TYPE.TABLE) {
1034
- let pivotGroupName = "".concat(isGroup ? "".concat(columnGroupName, "=").concat(sqlGroupName) : '');
1034
+ let pivotGroupName = `${isGroup ? `${columnGroupName}=${sqlGroupName}` : ''}`;
1035
1035
  if (isColumn) {
1036
1036
  if (this.filter_sql && pivotGroupName) {
1037
- sqlString = "select * from ".concat(this.table_name, " ").concat(this.filter_sql, " and ").concat(pivotGroupName, " limit 5000");
1037
+ sqlString = `select * from ${this.table_name} ${this.filter_sql} and ${pivotGroupName} limit 5000`;
1038
1038
  } else if (groupName && !this.filter_sql) {
1039
- sqlString = "select * from ".concat(this.table_name, " where ").concat(pivotGroupName, " limit 5000");
1039
+ sqlString = `select * from ${this.table_name} where ${pivotGroupName} limit 5000`;
1040
1040
  } else {
1041
- sqlString = "select * from ".concat(this.table_name, " ").concat(this.filter_sql, " limit 5000");
1041
+ sqlString = `select * from ${this.table_name} ${this.filter_sql} limit 5000`;
1042
1042
  }
1043
1043
  return sqlString;
1044
1044
  }
1045
1045
  if (isRow) {
1046
1046
  if (groupName && this.filter_sql) {
1047
- sqlString = "select * from ".concat(this.table_name, " ").concat(this.filter_sql, " and ").concat(groupName, "=").concat(sqlName, " limit 5000");
1047
+ sqlString = `select * from ${this.table_name} ${this.filter_sql} and ${groupName}=${sqlName} limit 5000`;
1048
1048
  } else if (groupName && !this.filter_sql) {
1049
- sqlString = "select * from ".concat(this.table_name, " where ").concat(groupName, "=").concat(sqlName, " limit 5000");
1049
+ sqlString = `select * from ${this.table_name} where ${groupName}=${sqlName} limit 5000`;
1050
1050
  } else {
1051
- sqlString = "select * from ".concat(this.table_name, " ").concat(this.filter_sql, " limit 5000");
1051
+ sqlString = `select * from ${this.table_name} ${this.filter_sql} limit 5000`;
1052
1052
  }
1053
1053
  return sqlString;
1054
1054
  }
1055
- sqlString = "select * from ".concat(this.table_name, " limit 5000");
1055
+ sqlString = `select * from ${this.table_name} limit 5000`;
1056
1056
  return sqlString;
1057
1057
  }
1058
1058
  if (groupName && this.filter_sql) {
1059
- sqlString = "select * from ".concat(this.table_name, " ").concat(this.filter_sql, " and ").concat(groupName, "=").concat(sqlName, " ").concat(isGroup ? "and ".concat(columnGroupName, "=").concat(sqlGroupName) : '', " limit 5000");
1059
+ sqlString = `select * from ${this.table_name} ${this.filter_sql} and ${groupName}=${sqlName} ${isGroup ? `and ${columnGroupName}=${sqlGroupName}` : ''} limit 5000`;
1060
1060
  } else if (groupName && !this.filter_sql) {
1061
- sqlString = "select * from ".concat(this.table_name, " where ").concat(groupName, "=").concat(sqlName, " ").concat(isGroup ? "and ".concat(columnGroupName, "=").concat(sqlGroupName) : '', " limit 5000");
1061
+ sqlString = `select * from ${this.table_name} where ${groupName}=${sqlName} ${isGroup ? `and ${columnGroupName}=${sqlGroupName}` : ''} limit 5000`;
1062
1062
  } else {
1063
- sqlString = "select * from ".concat(this.table_name, " ").concat(this.filter_sql, " limit 5000");
1063
+ sqlString = `select * from ${this.table_name} ${this.filter_sql} limit 5000`;
1064
1064
  }
1065
1065
  return sqlString;
1066
1066
  };
@@ -1070,7 +1070,7 @@ class ChartDataSQL {
1070
1070
  this.chart = (chart === null || chart === void 0 ? void 0 : chart.config) || {};
1071
1071
  this.username = username;
1072
1072
  const table_name = (table === null || table === void 0 ? void 0 : table.name) || '';
1073
- this.table_name = "`".concat(table_name, "`");
1073
+ this.table_name = `\`${table_name}\``;
1074
1074
  this.userId = userId;
1075
1075
  this.userDepartmentIdsMap = userDepartmentIdsMap;
1076
1076
  this.chart_type = (chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) || '';
@@ -21,7 +21,7 @@ const column2SqlColumn = function (column) {
21
21
  type,
22
22
  key
23
23
  } = column;
24
- const validColumnName = "`".concat(name, "`");
24
+ const validColumnName = `\`${name}\``;
25
25
  switch (type) {
26
26
  case _dtableUtils.CellType.DATE:
27
27
  case _dtableUtils.CellType.MTIME:
@@ -29,48 +29,48 @@ const column2SqlColumn = function (column) {
29
29
  {
30
30
  const validDateGranularity = dateGranularity && dateGranularity.toUpperCase();
31
31
  if (['DAY', 'DAYS_7', 'DAYS_30'].includes(validDateGranularity)) {
32
- const sqlColumnName = "ISODATE(".concat(validColumnName, ")");
32
+ const sqlColumnName = `ISODATE(${validColumnName})`;
33
33
  return {
34
34
  name: sqlColumnName,
35
35
  key: sqlColumnName
36
36
  };
37
37
  }
38
38
  if (validDateGranularity === 'WEEK') {
39
- const sqlColumnName = "ISODATE(STARTOFWEEK(".concat(validColumnName, ", \"monday\"))");
39
+ const sqlColumnName = `ISODATE(STARTOFWEEK(${validColumnName}, "monday"))`;
40
40
  return {
41
41
  name: sqlColumnName,
42
42
  key: sqlColumnName
43
43
  };
44
44
  }
45
45
  if (validDateGranularity === 'MONTH') {
46
- const sqlColumnName = "ISOMONTH(".concat(validColumnName, ")");
46
+ const sqlColumnName = `ISOMONTH(${validColumnName})`;
47
47
  return {
48
48
  name: sqlColumnName,
49
49
  key: sqlColumnName
50
50
  };
51
51
  }
52
52
  if (validDateGranularity === 'QUARTER') {
53
- const sqlColumnName = "CONCATENATE(year(".concat(validColumnName, "), \"-Q\", quarter(").concat(validColumnName, "))");
53
+ const sqlColumnName = `CONCATENATE(year(${validColumnName}), "-Q", quarter(${validColumnName}))`;
54
54
  return {
55
55
  name: sqlColumnName,
56
56
  key: sqlColumnName
57
57
  };
58
58
  }
59
59
  if (validDateGranularity === 'YEAR') {
60
- const sqlColumnName = "YEAR(".concat(validColumnName, ")");
60
+ const sqlColumnName = `YEAR(${validColumnName})`;
61
61
  return {
62
62
  name: sqlColumnName,
63
63
  key: sqlColumnName
64
64
  };
65
65
  }
66
66
  if (validDateGranularity === 'MAX' || validDateGranularity === 'MIN') {
67
- const sqlColumnName = "".concat(validDateGranularity, "(").concat(validColumnName, ")");
67
+ const sqlColumnName = `${validDateGranularity}(${validColumnName})`;
68
68
  return {
69
69
  name: sqlColumnName,
70
70
  key: sqlColumnName
71
71
  };
72
72
  }
73
- const sqlColumnName = "ISOMONTH(".concat(validColumnName, ")");
73
+ const sqlColumnName = `ISOMONTH(${validColumnName})`;
74
74
  return {
75
75
  name: sqlColumnName,
76
76
  key: sqlColumnName
@@ -80,21 +80,21 @@ const column2SqlColumn = function (column) {
80
80
  {
81
81
  const validGeolocationGranularity = geolocationGranularity && geolocationGranularity.toUpperCase();
82
82
  if (validGeolocationGranularity === 'PROVINCE') {
83
- const sqlColumnName = "PROVINCE(".concat(validColumnName, ")");
83
+ const sqlColumnName = `PROVINCE(${validColumnName})`;
84
84
  return {
85
85
  name: sqlColumnName,
86
86
  key: sqlColumnName
87
87
  };
88
88
  }
89
89
  if (validGeolocationGranularity === 'CITY') {
90
- const sqlColumnName = "CITY(".concat(validColumnName, ")");
90
+ const sqlColumnName = `CITY(${validColumnName})`;
91
91
  return {
92
92
  name: sqlColumnName,
93
93
  key: sqlColumnName
94
94
  };
95
95
  }
96
96
  if (validGeolocationGranularity === 'DISTRICT') {
97
- const sqlColumnName = "DISTRICT(".concat(validColumnName, ")");
97
+ const sqlColumnName = `DISTRICT(${validColumnName})`;
98
98
  return {
99
99
  name: sqlColumnName,
100
100
  key: sqlColumnName
@@ -120,13 +120,13 @@ const summaryMethodColumn2SqlColumn = function (summaryMethod) {
120
120
  const columnName = column.name || '';
121
121
  if (summaryMethod === _constants.DTABLE_DB_SUMMARY_METHOD.DISTINCT_VALUES) {
122
122
  return {
123
- name: "".concat(_constants.DTABLE_DB_SUMMARY_METHOD.COUNT, "(DISTINCT ").concat(columnName, ")"),
124
- key: "".concat(_constants.DTABLE_DB_SUMMARY_METHOD.COUNT, "(DISTINCT ").concat(columnName, ")")
123
+ name: `${_constants.DTABLE_DB_SUMMARY_METHOD.COUNT}(DISTINCT ${columnName})`,
124
+ key: `${_constants.DTABLE_DB_SUMMARY_METHOD.COUNT}(DISTINCT ${columnName})`
125
125
  };
126
126
  }
127
127
  return {
128
- name: "".concat(_constants.DTABLE_DB_SUMMARY_METHOD[summaryMethod], "(`").concat(columnName, "`)"),
129
- key: "".concat(_constants.DTABLE_DB_SUMMARY_METHOD[summaryMethod], "(").concat(columnName, ")")
128
+ name: `${_constants.DTABLE_DB_SUMMARY_METHOD[summaryMethod]}(\`${columnName}\`)`,
129
+ key: `${_constants.DTABLE_DB_SUMMARY_METHOD[summaryMethod]}(${columnName})`
130
130
  };
131
131
  };
132
132
  exports.summaryMethodColumn2SqlColumn = summaryMethodColumn2SqlColumn;
@@ -958,7 +958,7 @@ const getDatabaseGroupName = (statItem, selectedTable) => {
958
958
  time_column_key
959
959
  } = statItem;
960
960
  selectedColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, time_column_key);
961
- groupName = "ISODATE(".concat(selectedColumn.name, ")");
961
+ groupName = `ISODATE(${selectedColumn.name})`;
962
962
  break;
963
963
  }
964
964
  case _constants.CHART_TYPE.SCATTER:
@@ -1007,7 +1007,7 @@ const getDatabaseGroupName = (statItem, selectedTable) => {
1007
1007
  } = statItem;
1008
1008
  selectedColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, x_axis_column_key);
1009
1009
  if (!selectedColumn) return [];
1010
- groupName = "`".concat(selectedColumn.name, "`");
1010
+ groupName = `\`${selectedColumn.name}\``;
1011
1011
  if ([_dtableUtils.CellType.CTIME, _dtableUtils.CellType.MTIME, _dtableUtils.CellType.DATE].includes(selectedColumn.type)) {
1012
1012
  const {
1013
1013
  name
@@ -1047,7 +1047,7 @@ const getDatabaseGroupName = (statItem, selectedTable) => {
1047
1047
  groupby_column_key
1048
1048
  } = statItem;
1049
1049
  selectedColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, groupby_column_key);
1050
- groupName = "`".concat(selectedColumn.name, "`");
1050
+ groupName = `\`${selectedColumn.name}\``;
1051
1051
  break;
1052
1052
  }
1053
1053
  case _constants.CHART_TYPE.DASHBOARD:
@@ -307,13 +307,13 @@ class View extends _react.default.PureComponent {
307
307
  return /*#__PURE__*/_react.default.createElement("div", {
308
308
  className: validClassName
309
309
  }, /*#__PURE__*/_react.default.createElement("div", {
310
- className: (0, _classnames.default)('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config3 = chart.config) === null || _chart$config3 === void 0 ? void 0 : _chart$config3.type, "-formatter-container"), {
310
+ className: (0, _classnames.default)('sea-chart-formatter-container', `sea-chart-${chart === null || chart === void 0 ? void 0 : (_chart$config3 = chart.config) === null || _chart$config3 === void 0 ? void 0 : _chart$config3.type}-formatter-container`, {
311
311
  'big_screen_plugin': isBigScreenPlugin
312
312
  })
313
313
  }, !hideTitle && /*#__PURE__*/_react.default.createElement(_title.default, {
314
314
  chart: chart
315
315
  }), /*#__PURE__*/_react.default.createElement("div", {
316
- id: "sea-chart-cavans-container-".concat(chart.id),
316
+ id: `sea-chart-cavans-container-${chart.id}`,
317
317
  className: (0, _classnames.default)('sea-chart-cavans-container', {
318
318
  'has-title': hasTitle
319
319
  })
@@ -19,7 +19,7 @@ const Title = _ref => {
19
19
  const getTitleStyle = (0, _react.useCallback)(() => {
20
20
  var _chart$style_config, _chart$style_config2;
21
21
  let style = {
22
- fontSize: "".concat(_constants.DEFAULT_CHART_TITLE_FONT_SIZE, "px"),
22
+ fontSize: `${_constants.DEFAULT_CHART_TITLE_FONT_SIZE}px`,
23
23
  fontWeight: _constants.DEFAULT_CHART_FONT_WEIGHT
24
24
  };
25
25
  if (!chart || !chart.style_config || !((_chart$style_config = chart.style_config) !== null && _chart$style_config !== void 0 && _chart$style_config.title)) {
@@ -32,7 +32,7 @@ const Title = _ref => {
32
32
  horizontal_align
33
33
  } = (_chart$style_config2 = chart.style_config) === null || _chart$style_config2 === void 0 ? void 0 : _chart$style_config2.title;
34
34
  if ((0, _dtableUtils.isNumber)(font_size)) {
35
- style.fontSize = font_size < 0 ? 0 : "".concat(font_size, "px");
35
+ style.fontSize = font_size < 0 ? 0 : `${font_size}px`;
36
36
  }
37
37
  if (_constants.CHART_SUPPORT_FONT_WEIGHTS.includes(font_weight)) {
38
38
  style.fontWeight = font_weight;
@@ -127,11 +127,11 @@ class BasicNumericCard extends _react.Component {
127
127
  width: '100%',
128
128
  top: 'calc((100% - 25px)/2)',
129
129
  transform: 'translateY(-50%)',
130
- fontSize: "".concat(font_size, "px"),
130
+ fontSize: `${font_size}px`,
131
131
  margin: '-8px 0 2px 0',
132
- textAlign: "".concat(text_align),
133
- fontWeight: "".concat(font_weight),
134
- color: "".concat(font_color)
132
+ textAlign: `${text_align}`,
133
+ fontWeight: `${font_weight}`,
134
+ color: `${font_color}`
135
135
  }
136
136
  }, content), /*#__PURE__*/_react.default.createElement("p", {
137
137
  ref: ref => this.labelRef = ref,
@@ -140,10 +140,10 @@ class BasicNumericCard extends _react.Component {
140
140
  width: '100%',
141
141
  bottom: '0px',
142
142
  margin: '0',
143
- transform: currentLineHeight ? "translateY(".concat(currentLabelHeight - currentLineHeight, "px)") : '',
144
- fontSize: "".concat(card_label_font_size, "px"),
145
- fontWeight: "".concat(label_font_weight),
146
- textAlign: "".concat(label_text_align),
143
+ transform: currentLineHeight ? `translateY(${currentLabelHeight - currentLineHeight}px)` : '',
144
+ fontSize: `${card_label_font_size}px`,
145
+ fontWeight: `${label_font_weight}`,
146
+ textAlign: `${label_text_align}`,
147
147
  color: label_font_color,
148
148
  overflow: 'hidden',
149
149
  textOverflow: 'ellipsis',