overview-components 1.0.78 → 1.0.80

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 (231) hide show
  1. package/dist/_virtual/_commonjsHelpers.js +6 -2
  2. package/dist/_virtual/air-datepicker.js +4 -0
  3. package/dist/assets/generated/locales/de.js +70 -72
  4. package/dist/assets/generated/locales/de.js.map +1 -0
  5. package/dist/assets/generated/locales/en.js +70 -72
  6. package/dist/assets/generated/locales/en.js.map +1 -0
  7. package/dist/assets/generated/locales/fr.js +70 -72
  8. package/dist/assets/generated/locales/fr.js.map +1 -0
  9. package/dist/assets/generated/locales/hr.js +70 -72
  10. package/dist/assets/generated/locales/hr.js.map +1 -0
  11. package/dist/assets/generated/locales/it.js +70 -72
  12. package/dist/assets/generated/locales/it.js.map +1 -0
  13. package/dist/assets/generated/locales/pl.js +70 -72
  14. package/dist/assets/generated/locales/pl.js.map +1 -0
  15. package/dist/assets/generated/locales/ro.js +70 -72
  16. package/dist/assets/generated/locales/ro.js.map +1 -0
  17. package/dist/assets/generated/locales/sk.js +70 -72
  18. package/dist/assets/generated/locales/sk.js.map +1 -0
  19. package/dist/assets/generated/locales/sr.js +70 -72
  20. package/dist/assets/generated/locales/sr.js.map +1 -0
  21. package/dist/assets/icons/iconGlyphs.js +678 -679
  22. package/dist/assets/icons/iconGlyphs.js.map +1 -0
  23. package/dist/assets/illustration/delete-illustration.js +96 -0
  24. package/dist/assets/illustration/delete-illustration.js.map +1 -0
  25. package/dist/assets/illustration/no-content.js +167 -0
  26. package/dist/assets/illustration/no-content.js.map +1 -0
  27. package/dist/assets/illustration/no-preview.js +133 -0
  28. package/dist/assets/illustration/no-preview.js.map +1 -0
  29. package/dist/assets/illustration/not-found.js +106 -0
  30. package/dist/assets/illustration/not-found.js.map +1 -0
  31. package/dist/assets/illustration/settings-illustration.js +176 -0
  32. package/dist/assets/illustration/settings-illustration.js.map +1 -0
  33. package/dist/components/components-settings/attachments-tab-settings.js +226 -0
  34. package/dist/components/components-settings/attachments-tab-settings.js.map +1 -0
  35. package/dist/components/components-settings/data-grid-settings.js +318 -0
  36. package/dist/components/components-settings/data-grid-settings.js.map +1 -0
  37. package/dist/components/components-settings/section-tab-settings.js +269 -0
  38. package/dist/components/components-settings/section-tab-settings.js.map +1 -0
  39. package/dist/components/components-settings/tabs-overview-settings.js +439 -0
  40. package/dist/components/components-settings/tabs-overview-settings.js.map +1 -0
  41. package/dist/components/lit-attachments-tab.js +432 -271
  42. package/dist/components/lit-attachments-tab.js.map +1 -0
  43. package/dist/components/lit-badge.js +40 -40
  44. package/dist/components/lit-badge.js.map +1 -0
  45. package/dist/components/lit-case-variables-tab.js +497 -382
  46. package/dist/components/lit-case-variables-tab.js.map +1 -0
  47. package/dist/components/lit-chart.js +406 -378
  48. package/dist/components/lit-chart.js.map +1 -0
  49. package/dist/components/lit-data-grid-tanstack.js +1663 -1150
  50. package/dist/components/lit-data-grid-tanstack.js.map +1 -0
  51. package/dist/components/lit-filter-modal.js +230 -198
  52. package/dist/components/lit-filter-modal.js.map +1 -0
  53. package/dist/components/lit-multiselect-item.js +477 -301
  54. package/dist/components/lit-multiselect-item.js.map +1 -0
  55. package/dist/components/lit-section-tab.js +85 -73
  56. package/dist/components/lit-section-tab.js.map +1 -0
  57. package/dist/components/lit-tabs-overview.js +232 -191
  58. package/dist/components/lit-tabs-overview.js.map +1 -0
  59. package/dist/components/modals/lit-confirm-modal.js +120 -0
  60. package/dist/components/modals/lit-confirm-modal.js.map +1 -0
  61. package/dist/components/modals/lit-delete-modal.js +128 -0
  62. package/dist/components/modals/lit-delete-modal.js.map +1 -0
  63. package/dist/components/react-wrappers/attachments-tab.js +8 -13
  64. package/dist/components/react-wrappers/attachments-tab.js.map +1 -0
  65. package/dist/components/react-wrappers/badge.js +8 -13
  66. package/dist/components/react-wrappers/badge.js.map +1 -0
  67. package/dist/components/react-wrappers/button.js +8 -13
  68. package/dist/components/react-wrappers/button.js.map +1 -0
  69. package/dist/components/react-wrappers/case-variables-tab.js +8 -13
  70. package/dist/components/react-wrappers/case-variables-tab.js.map +1 -0
  71. package/dist/components/react-wrappers/chart.js +8 -13
  72. package/dist/components/react-wrappers/chart.js.map +1 -0
  73. package/dist/components/react-wrappers/data-grid-tanstack.js +8 -13
  74. package/dist/components/react-wrappers/data-grid-tanstack.js.map +1 -0
  75. package/dist/components/react-wrappers/filter-modal.js +8 -13
  76. package/dist/components/react-wrappers/filter-modal.js.map +1 -0
  77. package/dist/components/react-wrappers/progress-bar.js +8 -13
  78. package/dist/components/react-wrappers/progress-bar.js.map +1 -0
  79. package/dist/components/react-wrappers/section-tab.js +8 -13
  80. package/dist/components/react-wrappers/section-tab.js.map +1 -0
  81. package/dist/components/react-wrappers/tabs-overview.js +8 -13
  82. package/dist/components/react-wrappers/tabs-overview.js.map +1 -0
  83. package/dist/data/translations.js +2763 -0
  84. package/dist/data/translations.js.map +1 -0
  85. package/dist/index.d.ts +56 -11
  86. package/dist/index.d.ts.map +1 -1
  87. package/dist/index.js +107 -61
  88. package/dist/index.js.map +1 -0
  89. package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +285 -231
  90. package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +48 -47
  91. package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +39 -38
  92. package/dist/node_modules/air-datepicker/air-datepicker.js +1147 -0
  93. package/dist/node_modules/air-datepicker/index.es.js +4 -0
  94. package/dist/schemas/index.js +17 -0
  95. package/dist/schemas/index.js.map +1 -0
  96. package/dist/schemas/lit-attachments-tab-document.schema.js +20 -0
  97. package/dist/schemas/lit-attachments-tab-document.schema.js.map +1 -0
  98. package/dist/schemas/lit-attachments-tab-settings-value.schema.js +15 -0
  99. package/dist/schemas/lit-attachments-tab-settings-value.schema.js.map +1 -0
  100. package/dist/schemas/lit-attachments-tab.schema.js +32 -0
  101. package/dist/schemas/lit-attachments-tab.schema.js.map +1 -0
  102. package/dist/schemas/lit-case-variables-tab-cell.schema.js +43 -0
  103. package/dist/schemas/lit-case-variables-tab-cell.schema.js.map +1 -0
  104. package/dist/schemas/lit-case-variables-tab-rows.schema.js +6 -0
  105. package/dist/schemas/lit-case-variables-tab-rows.schema.js.map +1 -0
  106. package/dist/schemas/lit-case-variables-tab.schema.js +24 -0
  107. package/dist/schemas/lit-case-variables-tab.schema.js.map +1 -0
  108. package/dist/schemas/lit-data-grid-tanstack-column-array.schema.js +6 -0
  109. package/dist/schemas/lit-data-grid-tanstack-column-array.schema.js.map +1 -0
  110. package/dist/schemas/lit-data-grid-tanstack-column-custom-filter-array.schema.js +6 -0
  111. package/dist/schemas/lit-data-grid-tanstack-column-custom-filter-array.schema.js.map +1 -0
  112. package/dist/schemas/lit-data-grid-tanstack-column-custom-filter.schema.js +11 -0
  113. package/dist/schemas/lit-data-grid-tanstack-column-custom-filter.schema.js.map +1 -0
  114. package/dist/schemas/lit-data-grid-tanstack-column.schema.js +55 -0
  115. package/dist/schemas/lit-data-grid-tanstack-column.schema.js.map +1 -0
  116. package/dist/schemas/lit-data-grid-tanstack.schema.js +99 -0
  117. package/dist/schemas/lit-data-grid-tanstack.schema.js.map +1 -0
  118. package/dist/schemas/lit-section-tab-schema.js +24 -0
  119. package/dist/schemas/lit-section-tab-schema.js.map +1 -0
  120. package/dist/schemas/lit-tabs-overview-tab-array.schema.js +6 -0
  121. package/dist/schemas/lit-tabs-overview-tab-array.schema.js.map +1 -0
  122. package/dist/schemas/lit-tabs-overview-tab.schema.js +32 -0
  123. package/dist/schemas/lit-tabs-overview-tab.schema.js.map +1 -0
  124. package/dist/schemas/lit-tabs-overview.schema.js +29 -0
  125. package/dist/schemas/lit-tabs-overview.schema.js.map +1 -0
  126. package/dist/scripts/translate-locales.js +69 -0
  127. package/dist/scripts/translate-locales.js.map +1 -0
  128. package/dist/shared/filter-inputs.js +427 -0
  129. package/dist/shared/filter-inputs.js.map +1 -0
  130. package/dist/shared/lit-button.js +80 -66
  131. package/dist/shared/lit-button.js.map +1 -0
  132. package/dist/shared/lit-case-variables-tab-cell.js +226 -0
  133. package/dist/shared/lit-case-variables-tab-cell.js.map +1 -0
  134. package/dist/shared/lit-checkbox.js +94 -78
  135. package/dist/shared/lit-checkbox.js.map +1 -0
  136. package/dist/shared/lit-custom-popper.js +117 -0
  137. package/dist/shared/lit-custom-popper.js.map +1 -0
  138. package/dist/shared/lit-data-grid-action-buttons-popover.js +295 -0
  139. package/dist/shared/lit-data-grid-action-buttons-popover.js.map +1 -0
  140. package/dist/shared/lit-data-grid-density-popover.js +84 -0
  141. package/dist/shared/lit-data-grid-density-popover.js.map +1 -0
  142. package/dist/shared/lit-data-grid-export-popover.js +68 -0
  143. package/dist/shared/lit-data-grid-export-popover.js.map +1 -0
  144. package/dist/shared/lit-data-grid-operators-popover.js +114 -0
  145. package/dist/shared/lit-data-grid-operators-popover.js.map +1 -0
  146. package/dist/shared/lit-data-grid-row-actions.js +76 -0
  147. package/dist/shared/lit-data-grid-row-actions.js.map +1 -0
  148. package/dist/shared/lit-date-picker.js +606 -0
  149. package/dist/shared/lit-date-picker.js.map +1 -0
  150. package/dist/shared/lit-icon-button.d.ts +1 -1
  151. package/dist/shared/lit-icon-button.d.ts.map +1 -1
  152. package/dist/shared/lit-icon-button.js +105 -0
  153. package/dist/shared/lit-icon-button.js.map +1 -0
  154. package/dist/shared/lit-icon.js +261 -259
  155. package/dist/shared/lit-icon.js.map +1 -0
  156. package/dist/shared/lit-input.js +143 -115
  157. package/dist/shared/lit-input.js.map +1 -0
  158. package/dist/shared/lit-label.js +104 -0
  159. package/dist/shared/lit-label.js.map +1 -0
  160. package/dist/shared/lit-loader.d.ts +1 -1
  161. package/dist/shared/lit-loader.d.ts.map +1 -1
  162. package/dist/shared/lit-loader.js +69 -0
  163. package/dist/shared/lit-loader.js.map +1 -0
  164. package/dist/shared/lit-loading-bar.d.ts +1 -1
  165. package/dist/shared/lit-loading-bar.d.ts.map +1 -1
  166. package/dist/shared/lit-loading-bar.js +127 -0
  167. package/dist/shared/lit-loading-bar.js.map +1 -0
  168. package/dist/shared/lit-menu-item.d.ts +1 -1
  169. package/dist/shared/lit-menu-item.d.ts.map +1 -1
  170. package/dist/shared/lit-menu-item.js +99 -0
  171. package/dist/shared/lit-menu-item.js.map +1 -0
  172. package/dist/shared/lit-menu.js +22 -20
  173. package/dist/shared/lit-menu.js.map +1 -0
  174. package/dist/shared/lit-modal-body.js +22 -0
  175. package/dist/shared/lit-modal-body.js.map +1 -0
  176. package/dist/shared/lit-modal-footer.js +29 -0
  177. package/dist/shared/lit-modal-footer.js.map +1 -0
  178. package/dist/shared/lit-modal-header.js +36 -0
  179. package/dist/shared/lit-modal-header.js.map +1 -0
  180. package/dist/shared/lit-modal.js +112 -71
  181. package/dist/shared/lit-modal.js.map +1 -0
  182. package/dist/shared/lit-overflow-tooltip.js +103 -0
  183. package/dist/shared/lit-overflow-tooltip.js.map +1 -0
  184. package/dist/shared/lit-pill.js +39 -37
  185. package/dist/shared/lit-pill.js.map +1 -0
  186. package/dist/shared/lit-progress-bar.js +33 -35
  187. package/dist/shared/lit-progress-bar.js.map +1 -0
  188. package/dist/shared/lit-responsive-button.js +94 -0
  189. package/dist/shared/lit-responsive-button.js.map +1 -0
  190. package/dist/shared/lit-select-field.js +459 -0
  191. package/dist/shared/lit-select-field.js.map +1 -0
  192. package/dist/shared/lit-select.js +276 -202
  193. package/dist/shared/lit-select.js.map +1 -0
  194. package/dist/shared/lit-settings.js +77 -0
  195. package/dist/shared/lit-settings.js.map +1 -0
  196. package/dist/shared/lit-text-field.d.ts +1 -1
  197. package/dist/shared/lit-text-field.d.ts.map +1 -1
  198. package/dist/shared/lit-text-field.js +222 -0
  199. package/dist/shared/lit-text-field.js.map +1 -0
  200. package/dist/shared/lit-toggle.js +222 -0
  201. package/dist/shared/lit-toggle.js.map +1 -0
  202. package/dist/shared/lit-tooltip.js +113 -84
  203. package/dist/shared/lit-tooltip.js.map +1 -0
  204. package/dist/shared/simple-popper.js +266 -0
  205. package/dist/shared/simple-popper.js.map +1 -0
  206. package/dist/shared/simple-tooltip.js +198 -124
  207. package/dist/shared/simple-tooltip.js.map +1 -0
  208. package/dist/shared/styles/button-shared-styles.js +4 -8
  209. package/dist/shared/styles/button-shared-styles.js.map +1 -0
  210. package/dist/style.css +1 -0
  211. package/dist/styles.js +3 -8
  212. package/dist/styles.js.map +1 -0
  213. package/dist/utils/currency.js +15 -12
  214. package/dist/utils/currency.js.map +1 -0
  215. package/dist/utils/custom-filters.js +80 -46
  216. package/dist/utils/custom-filters.js.map +1 -0
  217. package/dist/utils/date.js +21 -14
  218. package/dist/utils/date.js.map +1 -0
  219. package/dist/utils/getOperatorByType.js +65 -51
  220. package/dist/utils/getOperatorByType.js.map +1 -0
  221. package/dist/utils/getOverviewValue.js +177 -0
  222. package/dist/utils/getOverviewValue.js.map +1 -0
  223. package/dist/utils/localization.js +431 -29
  224. package/dist/utils/localization.js.map +1 -0
  225. package/dist/utils/utils.js +13 -0
  226. package/dist/utils/utils.js.map +1 -0
  227. package/dist/utils/validate-json-schema.js +8 -0
  228. package/dist/utils/validate-json-schema.js.map +1 -0
  229. package/dist/validators/validator.js +7 -0
  230. package/dist/validators/validator.js.map +1 -0
  231. package/package.json +2 -2
@@ -1,395 +1,423 @@
1
- import { customElement as w } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
2
- import { property as b } from "../node_modules/@lit/reactive-element/decorators/property.js";
3
- import "../node_modules/@lit/reactive-element/reactive-element.js";
4
- import { html as y } from "../node_modules/lit-html/lit-html.js";
5
- import { LitElement as v } from "../node_modules/lit-element/lit-element.js";
6
- import { Chart as p, registerables as x } from "chart.js";
7
- import { css as D } from "../node_modules/@lit/reactive-element/css-tag.js";
8
- var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (a, r, n, e) => {
9
- for (var t = e > 1 ? void 0 : e ? S(r, n) : r, o = a.length - 1, s; o >= 0; o--)
10
- (s = a[o]) && (t = (e ? s(r, n, t) : s(t)) || t);
11
- return e && t && k(r, n, t), t;
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
12
6
  };
13
- p.register(...x);
14
- let c = class extends v {
15
- constructor() {
16
- super(...arguments), this.type = "bar", this.data = { labels: [], datasets: [], title: "" }, this.isLoading = !1, this.chart = null;
17
- }
18
- updated(a) {
19
- (a.has("type") || a.has("data")) && this.renderChart();
20
- }
21
- generateColors(a) {
22
- return Array.from(
23
- { length: a },
24
- () => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`
25
- );
26
- }
27
- renderChart() {
28
- var r;
29
- const a = (r = this.shadowRoot) == null ? void 0 : r.querySelector("canvas");
30
- a && (this.type === "bar" || this.type === "line" ? this.renderBarAndLineChart(a) : this.type === "bubble" ? this.renderBubbleChart(a) : this.type === "pie" || this.type === "doughnut" ? this.renderPieAndDoughnutChart(a) : this.type === "gantt" && this.renderGanttChart(a));
31
- }
32
- renderGanttChart(a) {
33
- var m;
34
- this.chart && this.chart.destroy();
35
- const r = this.generateColors(((m = this.data.datasets[0]) == null ? void 0 : m.data.length) || 0), n = this.data.datasets.map((l, i) => ({
36
- label: l.label || `Dataset ${i + 1}`,
37
- data: l.data.map((d) => {
38
- const h = new Date(d.x[0]), f = new Date(d.x[1]);
39
- return {
40
- x: [
41
- isNaN(h.getTime()) ? Date.now() : h.getTime(),
42
- isNaN(f.getTime()) ? Date.now() : f.getTime()
43
- ],
44
- y: d.y
45
- };
46
- }),
47
- backgroundColor: r,
48
- borderColor: r,
49
- borderWidth: 1,
50
- barThickness: 16,
51
- borderRadius: 4,
52
- borderSkipped: !1
53
- })), e = this.data.datasets.flatMap(
54
- (l) => l.data.flatMap((i) => {
55
- var d, h;
56
- return [
57
- new Date((d = i == null ? void 0 : i.x) == null ? void 0 : d[0]).getTime(),
58
- new Date((h = i == null ? void 0 : i.x) == null ? void 0 : h[1]).getTime()
59
- ];
60
- })
61
- ), t = Math.min(...e), o = Math.max(...e), C = (o - t) / 20;
62
- this.chart = new p(a, {
63
- type: "bar",
64
- data: {
65
- datasets: n
66
- },
67
- options: {
68
- indexAxis: "y",
69
- responsive: !0,
70
- maintainAspectRatio: !1,
71
- scales: {
72
- x: {
73
- type: "linear",
74
- ticks: {
75
- stepSize: C,
76
- // 30 dní v milisekundách
77
- autoSkip: !1,
78
- callback: (l) => new Date(l).toLocaleDateString("sk-SK", {
79
- day: "2-digit",
80
- month: "2-digit",
81
- year: "numeric"
82
- })
83
- },
84
- min: t,
85
- max: o
86
- },
87
- y: {
88
- type: "category"
89
- }
90
- },
91
- plugins: {
92
- tooltip: {
93
- callbacks: {
94
- label: function(l) {
95
- const i = new Date(l.raw.x[0]).toLocaleDateString(
96
- "sk-SK",
97
- {
98
- day: "2-digit",
99
- month: "2-digit",
100
- year: "numeric"
101
- }
102
- ), d = new Date(l.raw.x[1]).toLocaleDateString("sk-SK", {
103
- day: "2-digit",
104
- month: "2-digit",
105
- year: "numeric"
106
- });
107
- return `  Začiatok: ${i}, Koniec: ${d}`;
108
- }
109
- },
110
- bodyFont: {
111
- size: 13,
112
- weight: 400
113
- },
114
- displayColors: !0,
115
- usePointStyle: !0,
116
- backgroundColor: "black",
117
- cornerRadius: 8
118
- },
119
- legend: {
120
- display: !1
121
- },
122
- title: {
123
- display: !0,
124
- text: this.data.title,
125
- // Text, ktorý sa zobrazí nad grafom
126
- font: {
127
- size: 17,
128
- weight: 500
129
- },
130
- color: "var(--text-primary, #111827)",
131
- padding: {
132
- top: 10,
133
- bottom: 20
134
- }
135
- }
136
- },
137
- onHover: (l, i) => {
138
- var h;
139
- const d = (h = l.native) == null ? void 0 : h.target;
140
- d.style.cursor = i.length ? "pointer" : "default";
7
+ import { customElement, property } from 'lit/decorators.js';
8
+ import { html, css, LitElement } from 'lit';
9
+ import { Chart, registerables } from 'chart.js';
10
+ import '../shared/lit-loader.js';
11
+ Chart.register(...registerables);
12
+ let LitChart = class LitChart extends LitElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.type = 'bar';
16
+ this.data = { labels: [], datasets: [], title: '' };
17
+ this.isLoading = false;
18
+ this.chart = null;
19
+ }
20
+ updated(changedProperties) {
21
+ if (changedProperties.has('type') || changedProperties.has('data')) {
22
+ this.renderChart();
141
23
  }
142
- }
143
- });
144
- }
145
- renderPieAndDoughnutChart(a) {
146
- var e;
147
- this.chart && this.chart.destroy();
148
- const r = this.generateColors(((e = this.data.datasets[0]) == null ? void 0 : e.data.length) || 0), n = this.data.datasets.map((t) => ({
149
- ...t,
150
- backgroundColor: r,
151
- borderColor: r,
152
- borderWidth: 2,
153
- pointBorderWidth: 2
154
- }));
155
- this.chart = new p(a, {
156
- type: this.type,
157
- data: {
158
- labels: this.data.labels,
159
- datasets: n
160
- },
161
- options: {
162
- responsive: !0,
163
- maintainAspectRatio: !1,
164
- plugins: {
165
- legend: {
166
- position: "top",
167
- labels: {
168
- usePointStyle: !0,
169
- pointStyle: "circle",
170
- font: {
171
- size: 13,
172
- weight: 500
173
- }
174
- }
175
- },
176
- tooltip: {
177
- callbacks: {
178
- title: () => "",
179
- label: (t) => (t.raw, `  ${t.label}: ${t.raw}`)
180
- },
181
- bodyFont: {
182
- size: 13,
183
- weight: 400
184
- },
185
- displayColors: !0,
186
- usePointStyle: !0,
187
- // Použitie kruhového symbolu
188
- xAlign: "center",
189
- yAlign: "bottom",
190
- padding: 16,
191
- backgroundColor: "black",
192
- cornerRadius: 8
193
- },
194
- title: {
195
- display: !0,
196
- text: this.data.title,
197
- // Text, ktorý sa zobrazí nad grafom
198
- font: {
199
- size: 17,
200
- weight: 500
201
- },
202
- color: "var(--text-primary, #111827)",
203
- padding: {
204
- top: 10,
205
- bottom: 20
206
- }
207
- }
208
- },
209
- ...this.type === "doughnut" && {
210
- cutout: "70%"
211
- },
212
- onHover: (t, o) => {
213
- var g;
214
- const s = (g = t.native) == null ? void 0 : g.target;
215
- o.length ? s.style.cursor = "pointer" : s.style.cursor = "default";
24
+ }
25
+ generateColors(numColors) {
26
+ return Array.from({ length: numColors }, () => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`);
27
+ }
28
+ renderChart() {
29
+ const canvas = this.shadowRoot?.querySelector('canvas');
30
+ if (!canvas)
31
+ return;
32
+ if (this.type === 'bar' || this.type === 'line') {
33
+ this.renderBarAndLineChart(canvas);
216
34
  }
217
- }
218
- });
219
- }
220
- renderBubbleChart(a) {
221
- this.chart && this.chart.destroy();
222
- const r = this.generateColors(this.data.datasets.length), n = this.data.datasets.map((e, t) => ({
223
- ...e,
224
- backgroundColor: r[t],
225
- borderColor: r[t],
226
- borderWidth: 1,
227
- hoverRadius: 10,
228
- pointBorderWidth: 2
229
- }));
230
- this.chart = new p(a, {
231
- type: "bubble",
232
- data: { datasets: n },
233
- options: {
234
- responsive: !0,
235
- scales: {
236
- x: { beginAtZero: !0 },
237
- y: { beginAtZero: !0 }
238
- },
239
- plugins: {
240
- legend: {
241
- position: "top",
242
- labels: {
243
- usePointStyle: !0,
244
- // Použitie kruhového symbolu
245
- pointStyle: "circle"
246
- // Špecifický tvar pre symbol v legende
247
- }
248
- },
249
- tooltip: {
250
- callbacks: {
251
- label: (e) => {
252
- const t = e.raw;
253
- return `  x: ${t.x}, y: ${t.y}, r: ${t.r}`;
254
- }
35
+ else if (this.type === 'bubble') {
36
+ this.renderBubbleChart(canvas);
37
+ }
38
+ else if (this.type === 'pie' || this.type === 'doughnut') {
39
+ this.renderPieAndDoughnutChart(canvas);
40
+ }
41
+ else if (this.type === 'gantt') {
42
+ this.renderGanttChart(canvas);
43
+ }
44
+ }
45
+ renderGanttChart(canvas) {
46
+ if (this.chart)
47
+ this.chart.destroy();
48
+ const colors = this.generateColors(this.data.datasets[0]?.data.length || 0);
49
+ const datasetsWithColors = this.data.datasets.map((dataset, index) => ({
50
+ label: dataset.label || `Dataset ${index + 1}`,
51
+ data: dataset.data.map((entry) => {
52
+ const startDate = new Date(entry.x[0]);
53
+ const endDate = new Date(entry.x[1]);
54
+ return {
55
+ x: [
56
+ isNaN(startDate.getTime()) ? Date.now() : startDate.getTime(),
57
+ isNaN(endDate.getTime()) ? Date.now() : endDate.getTime(),
58
+ ],
59
+ y: entry.y,
60
+ };
61
+ }),
62
+ backgroundColor: colors,
63
+ borderColor: colors,
64
+ borderWidth: 1,
65
+ barThickness: 16,
66
+ borderRadius: 4,
67
+ borderSkipped: false,
68
+ }));
69
+ const allDates = this.data.datasets.flatMap((dataset) => dataset.data.flatMap((entry) => [
70
+ new Date(entry?.x?.[0]).getTime(),
71
+ new Date(entry?.x?.[1]).getTime(),
72
+ ]));
73
+ const minDate = Math.min(...allDates);
74
+ const maxDate = Math.max(...allDates);
75
+ // Vypočítanie stepSize pre 20 hodnôt na osi X
76
+ const dateDifference = maxDate - minDate;
77
+ const desiredTicks = 20; // Počet požadovaných hodnôt na osi X
78
+ const stepSize = dateDifference / desiredTicks; // Vypočítanie stepSize
79
+ this.chart = new Chart(canvas, {
80
+ type: 'bar',
81
+ data: {
82
+ datasets: datasetsWithColors,
255
83
  },
256
- bodyFont: {
257
- size: 13,
258
- weight: 400
84
+ options: {
85
+ indexAxis: 'y',
86
+ responsive: true,
87
+ maintainAspectRatio: false,
88
+ scales: {
89
+ x: {
90
+ type: 'linear',
91
+ ticks: {
92
+ stepSize: stepSize, // 30 dní v milisekundách
93
+ autoSkip: false,
94
+ callback: (value) => {
95
+ return new Date(value).toLocaleDateString('sk-SK', {
96
+ day: '2-digit',
97
+ month: '2-digit',
98
+ year: 'numeric',
99
+ });
100
+ },
101
+ },
102
+ min: minDate,
103
+ max: maxDate,
104
+ },
105
+ y: {
106
+ type: 'category',
107
+ },
108
+ },
109
+ plugins: {
110
+ tooltip: {
111
+ callbacks: {
112
+ label: function (context) {
113
+ const start = new Date(context.raw.x[0]).toLocaleDateString('sk-SK', {
114
+ day: '2-digit',
115
+ month: '2-digit',
116
+ year: 'numeric',
117
+ });
118
+ const end = new Date(context.raw.x[1]).toLocaleDateString('sk-SK', {
119
+ day: '2-digit',
120
+ month: '2-digit',
121
+ year: 'numeric',
122
+ });
123
+ return `\u00A0\u00A0Začiatok: ${start}, Koniec: ${end}`;
124
+ },
125
+ },
126
+ bodyFont: {
127
+ size: 13,
128
+ weight: 400,
129
+ },
130
+ displayColors: true,
131
+ usePointStyle: true,
132
+ backgroundColor: 'black',
133
+ cornerRadius: 8,
134
+ },
135
+ legend: {
136
+ display: false,
137
+ },
138
+ title: {
139
+ display: true,
140
+ text: this.data.title, // Text, ktorý sa zobrazí nad grafom
141
+ font: {
142
+ size: 17,
143
+ weight: 500,
144
+ },
145
+ color: 'var(--text-primary, #111827)',
146
+ padding: {
147
+ top: 10,
148
+ bottom: 20,
149
+ },
150
+ },
151
+ },
152
+ onHover: (event, chartElement) => {
153
+ const target = event.native?.target;
154
+ target.style.cursor = chartElement.length ? 'pointer' : 'default';
155
+ },
259
156
  },
260
- displayColors: !0,
261
- usePointStyle: !0,
262
- // Použitie kruhového symbolu
263
- xAlign: "center",
264
- yAlign: "bottom",
265
- padding: 16,
266
- backgroundColor: "black",
267
- cornerRadius: 8
268
- },
269
- title: {
270
- display: !0,
271
- text: this.data.title,
272
- // Text, ktorý sa zobrazí nad grafom
273
- font: {
274
- size: 17,
275
- weight: 500
157
+ });
158
+ }
159
+ renderPieAndDoughnutChart(canvas) {
160
+ if (this.chart)
161
+ this.chart.destroy();
162
+ const colors = this.generateColors(this.data.datasets[0]?.data.length || 0);
163
+ const datasetsWithColors = this.data.datasets.map((dataset) => ({
164
+ ...dataset,
165
+ backgroundColor: colors,
166
+ borderColor: colors,
167
+ borderWidth: 2,
168
+ pointBorderWidth: 2,
169
+ }));
170
+ this.chart = new Chart(canvas, {
171
+ type: this.type,
172
+ data: {
173
+ labels: this.data.labels,
174
+ datasets: datasetsWithColors,
276
175
  },
277
- color: "var(--text-primary, #111827)",
278
- padding: {
279
- top: 10,
280
- bottom: 20
281
- }
282
- }
283
- },
284
- onHover: (e, t) => {
285
- var s;
286
- const o = (s = e.native) == null ? void 0 : s.target;
287
- t.length ? o.style.cursor = "pointer" : o.style.cursor = "default";
288
- }
289
- }
290
- });
291
- }
292
- renderBarAndLineChart(a) {
293
- this.chart && this.chart.destroy();
294
- const r = this.generateColors(this.data.datasets.length), n = this.data.datasets.map((e, t) => ({
295
- ...e,
296
- backgroundColor: r[t],
297
- borderColor: r[t],
298
- borderWidth: 2,
299
- ...this.type === "bar" ? { borderRadius: 4 } : {},
300
- ...this.type === "line" ? {
301
- pointStyle: "circle",
302
- pointRadius: 3,
303
- pointBorderWidth: 2,
304
- pointBorderColor: r[t]
305
- } : {}
306
- }));
307
- this.chart = new p(a, {
308
- type: this.type,
309
- data: {
310
- labels: this.data.labels,
311
- datasets: n
312
- },
313
- options: {
314
- responsive: !0,
315
- maintainAspectRatio: !1,
316
- plugins: {
317
- legend: {
318
- position: "top",
319
- labels: {
320
- usePointStyle: !0,
321
- // Použitie kruhového symbolu
322
- pointStyle: "circle"
323
- // Špecifický tvar pre symbol v legende
324
- }
325
- },
326
- tooltip: {
327
- callbacks: {
328
- title: () => "",
329
- label: (e) => (e.raw, `  ${e.label}: ${e.raw}`)
176
+ options: {
177
+ responsive: true,
178
+ maintainAspectRatio: false,
179
+ plugins: {
180
+ legend: {
181
+ position: 'top',
182
+ labels: {
183
+ usePointStyle: true,
184
+ pointStyle: 'circle',
185
+ font: {
186
+ size: 13,
187
+ weight: 500,
188
+ },
189
+ },
190
+ },
191
+ tooltip: {
192
+ callbacks: {
193
+ title: () => '',
194
+ label: (tooltipItem) => {
195
+ const value = tooltipItem.raw || 0;
196
+ return `\u00A0\u00A0${tooltipItem.label}: ${tooltipItem.raw}`;
197
+ },
198
+ },
199
+ bodyFont: {
200
+ size: 13,
201
+ weight: 400,
202
+ },
203
+ displayColors: true,
204
+ usePointStyle: true, // Použitie kruhového symbolu
205
+ xAlign: 'center',
206
+ yAlign: 'bottom',
207
+ padding: 16,
208
+ backgroundColor: 'black',
209
+ cornerRadius: 8,
210
+ },
211
+ title: {
212
+ display: true,
213
+ text: this.data.title, // Text, ktorý sa zobrazí nad grafom
214
+ font: {
215
+ size: 17,
216
+ weight: 500,
217
+ },
218
+ color: 'var(--text-primary, #111827)',
219
+ padding: {
220
+ top: 10,
221
+ bottom: 20,
222
+ },
223
+ },
224
+ },
225
+ ...(this.type === 'doughnut' && {
226
+ cutout: '70%',
227
+ }),
228
+ onHover: (event, chartElement) => {
229
+ const target = event.native?.target;
230
+ if (chartElement.length) {
231
+ target.style.cursor = 'pointer'; // Zmena kurzora na ruku
232
+ }
233
+ else {
234
+ target.style.cursor = 'default';
235
+ }
236
+ },
330
237
  },
331
- bodyFont: {
332
- size: 13,
333
- weight: 400
238
+ });
239
+ }
240
+ renderBubbleChart(canvas) {
241
+ if (this.chart)
242
+ this.chart.destroy();
243
+ const colors = this.generateColors(this.data.datasets.length);
244
+ const datasets = this.data.datasets.map((dataset, index) => ({
245
+ ...dataset,
246
+ backgroundColor: colors[index],
247
+ borderColor: colors[index],
248
+ borderWidth: 1,
249
+ hoverRadius: 10,
250
+ pointBorderWidth: 2,
251
+ }));
252
+ this.chart = new Chart(canvas, {
253
+ type: 'bubble',
254
+ data: { datasets },
255
+ options: {
256
+ responsive: true,
257
+ scales: {
258
+ x: { beginAtZero: true },
259
+ y: { beginAtZero: true },
260
+ },
261
+ plugins: {
262
+ legend: {
263
+ position: 'top',
264
+ labels: {
265
+ usePointStyle: true, // Použitie kruhového symbolu
266
+ pointStyle: 'circle', // Špecifický tvar pre symbol v legende
267
+ },
268
+ },
269
+ tooltip: {
270
+ callbacks: {
271
+ label: (tooltipItem) => {
272
+ const dataPoint = tooltipItem.raw;
273
+ return `\u00A0\u00A0x: ${dataPoint.x}, y: ${dataPoint.y}, r: ${dataPoint.r}`;
274
+ },
275
+ },
276
+ bodyFont: {
277
+ size: 13,
278
+ weight: 400,
279
+ },
280
+ displayColors: true,
281
+ usePointStyle: true, // Použitie kruhového symbolu
282
+ xAlign: 'center',
283
+ yAlign: 'bottom',
284
+ padding: 16,
285
+ backgroundColor: 'black',
286
+ cornerRadius: 8,
287
+ },
288
+ title: {
289
+ display: true,
290
+ text: this.data.title, // Text, ktorý sa zobrazí nad grafom
291
+ font: {
292
+ size: 17,
293
+ weight: 500,
294
+ },
295
+ color: 'var(--text-primary, #111827)',
296
+ padding: {
297
+ top: 10,
298
+ bottom: 20,
299
+ },
300
+ },
301
+ },
302
+ onHover: (event, chartElement) => {
303
+ const target = event.native?.target;
304
+ if (chartElement.length) {
305
+ target.style.cursor = 'pointer'; // Zmena kurzora na ruku
306
+ }
307
+ else {
308
+ target.style.cursor = 'default';
309
+ }
310
+ },
334
311
  },
335
- displayColors: !0,
336
- usePointStyle: !0,
337
- // Použitie kruhového symbolu
338
- xAlign: "center",
339
- yAlign: "bottom",
340
- padding: 16,
341
- backgroundColor: "black",
342
- cornerRadius: 8
343
- },
344
- title: {
345
- display: !0,
346
- text: this.data.title,
347
- // Text, ktorý sa zobrazí nad grafom
348
- font: {
349
- size: 17,
350
- weight: 500
312
+ });
313
+ }
314
+ renderBarAndLineChart(canvas) {
315
+ if (this.chart)
316
+ this.chart.destroy();
317
+ const colors = this.generateColors(this.data.datasets.length);
318
+ const datasetsWithColors = this.data.datasets.map((dataset, index) => ({
319
+ ...dataset,
320
+ backgroundColor: colors[index],
321
+ borderColor: colors[index],
322
+ borderWidth: 2,
323
+ ...(this.type === 'bar' ? { borderRadius: 4 } : {}),
324
+ ...(this.type === 'line'
325
+ ? {
326
+ pointStyle: 'circle',
327
+ pointRadius: 3,
328
+ pointBorderWidth: 2,
329
+ pointBorderColor: colors[index],
330
+ }
331
+ : {}),
332
+ }));
333
+ this.chart = new Chart(canvas, {
334
+ type: this.type,
335
+ data: {
336
+ labels: this.data.labels,
337
+ datasets: datasetsWithColors,
351
338
  },
352
- color: "var(--text-primary, #111827)",
353
- padding: {
354
- top: 10,
355
- bottom: 20
356
- }
357
- }
358
- },
359
- onHover: (e, t) => {
360
- var s;
361
- const o = (s = e.native) == null ? void 0 : s.target;
362
- t.length ? o.style.cursor = "pointer" : o.style.cursor = "default";
363
- }
364
- }
365
- });
366
- }
367
- render() {
368
- return y`${this.isLoading ? y`<lit-loader></lit-loader>` : y`<canvas></canvas>`}`;
369
- }
339
+ options: {
340
+ responsive: true,
341
+ maintainAspectRatio: false,
342
+ plugins: {
343
+ legend: {
344
+ position: 'top',
345
+ labels: {
346
+ usePointStyle: true, // Použitie kruhového symbolu
347
+ pointStyle: 'circle', // Špecifický tvar pre symbol v legende
348
+ },
349
+ },
350
+ tooltip: {
351
+ callbacks: {
352
+ title: () => '',
353
+ label: (tooltipItem) => {
354
+ const value = tooltipItem.raw || 0;
355
+ return `\u00A0\u00A0${tooltipItem.label}: ${tooltipItem.raw}`;
356
+ },
357
+ },
358
+ bodyFont: {
359
+ size: 13,
360
+ weight: 400,
361
+ },
362
+ displayColors: true,
363
+ usePointStyle: true, // Použitie kruhového symbolu
364
+ xAlign: 'center',
365
+ yAlign: 'bottom',
366
+ padding: 16,
367
+ backgroundColor: 'black',
368
+ cornerRadius: 8,
369
+ },
370
+ title: {
371
+ display: true,
372
+ text: this.data.title, // Text, ktorý sa zobrazí nad grafom
373
+ font: {
374
+ size: 17,
375
+ weight: 500,
376
+ },
377
+ color: 'var(--text-primary, #111827)',
378
+ padding: {
379
+ top: 10,
380
+ bottom: 20,
381
+ },
382
+ },
383
+ },
384
+ onHover: (event, chartElement) => {
385
+ const target = event.native?.target;
386
+ if (chartElement.length) {
387
+ target.style.cursor = 'pointer'; // Zmena kurzora na ruku
388
+ }
389
+ else {
390
+ target.style.cursor = 'default';
391
+ }
392
+ },
393
+ },
394
+ });
395
+ }
396
+ render() {
397
+ return html `${this.isLoading ? html `<lit-loader></lit-loader>` : html `<canvas></canvas>`}`;
398
+ }
370
399
  };
371
- c.styles = [
372
- D`
400
+ LitChart.styles = [
401
+ css `
373
402
  canvas {
374
403
  width: 100%;
375
404
  height: 100%;
376
405
  font-family: 'Inter', sans-serif;
377
406
  margin: 0 auto;
378
407
  }
379
- `
408
+ `,
380
409
  ];
381
- u([
382
- b({ type: String })
383
- ], c.prototype, "type", 2);
384
- u([
385
- b({ type: Array })
386
- ], c.prototype, "data", 2);
387
- u([
388
- b({ type: Boolean })
389
- ], c.prototype, "isLoading", 2);
390
- c = u([
391
- w("lit-chart")
392
- ], c);
393
- export {
394
- c as LitChart
395
- };
410
+ __decorate([
411
+ property({ type: String })
412
+ ], LitChart.prototype, "type", void 0);
413
+ __decorate([
414
+ property({ type: Array })
415
+ ], LitChart.prototype, "data", void 0);
416
+ __decorate([
417
+ property({ type: Boolean })
418
+ ], LitChart.prototype, "isLoading", void 0);
419
+ LitChart = __decorate([
420
+ customElement('lit-chart')
421
+ ], LitChart);
422
+ export { LitChart };
423
+ //# sourceMappingURL=lit-chart.js.map