@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

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 (188) hide show
  1. package/package.json +5 -8
  2. package/src/atoms/gv-autocomplete.js +1 -461
  3. package/src/atoms/gv-button.js +1 -410
  4. package/src/atoms/gv-checkbox.js +1 -187
  5. package/src/atoms/gv-date-picker-calendar.js +1 -894
  6. package/src/atoms/gv-date-picker-cell.js +1 -190
  7. package/src/atoms/gv-date-picker.js +1 -671
  8. package/src/atoms/gv-file-upload.js +1 -367
  9. package/src/atoms/gv-icon.js +1 -103
  10. package/src/atoms/gv-image.js +1 -144
  11. package/src/atoms/gv-input-message.js +1 -84
  12. package/src/atoms/gv-input.js +1 -561
  13. package/src/atoms/gv-link.js +1 -210
  14. package/src/atoms/gv-message.js +1 -128
  15. package/src/atoms/gv-metric.js +1 -117
  16. package/src/atoms/gv-relative-time.js +1 -156
  17. package/src/atoms/gv-select-native.js +1 -388
  18. package/src/atoms/gv-select.js +1 -437
  19. package/src/atoms/gv-spinner.js +1 -57
  20. package/src/atoms/gv-state.js +1 -130
  21. package/src/atoms/gv-switch.js +1 -243
  22. package/src/atoms/gv-tag.js +1 -168
  23. package/src/atoms/gv-text.js +1 -168
  24. package/src/charts/gv-chart-bar.js +1 -103
  25. package/src/charts/gv-chart-gauge.js +1 -100
  26. package/src/charts/gv-chart-histogram.js +1 -83
  27. package/src/charts/gv-chart-line.js +1 -224
  28. package/src/charts/gv-chart-map.js +1 -112
  29. package/src/charts/gv-chart-pie.js +1 -91
  30. package/src/index.js +1 -77
  31. package/src/lib/cron-expression.js +1 -205
  32. package/src/lib/date.js +1 -44
  33. package/src/lib/events.js +1 -26
  34. package/src/lib/http-client-schema-form.js +1 -67
  35. package/src/lib/http.js +1 -237
  36. package/src/lib/i18n.js +1 -103
  37. package/src/lib/item.js +1 -118
  38. package/src/lib/properties.js +1 -189
  39. package/src/lib/schema-form.js +1 -44
  40. package/src/lib/studio.js +1 -141
  41. package/src/lib/style.js +1 -41
  42. package/src/lib/text-format.js +1 -69
  43. package/src/lib/theme.js +1 -63
  44. package/src/lib/utils.js +1 -111
  45. package/src/mixins/chart-element.js +1 -165
  46. package/src/mixins/input-element.js +1 -144
  47. package/src/mixins/item-resource.js +1 -120
  48. package/src/mixins/keyboard-element.js +1 -69
  49. package/src/mixins/update-after-browser.js +1 -30
  50. package/src/mixins/with-resize-observer.js +1 -68
  51. package/src/mixins/with-skeleton-attribute.js +1 -112
  52. package/src/molecules/gv-card-full.js +1 -218
  53. package/src/molecules/gv-card-list.js +1 -113
  54. package/src/molecules/gv-card.js +1 -133
  55. package/src/molecules/gv-category-list.js +1 -60
  56. package/src/molecules/gv-category.js +1 -170
  57. package/src/molecules/gv-code.js +1 -359
  58. package/src/molecules/gv-confirm.js +1 -188
  59. package/src/molecules/gv-cron-editor.js +1 -710
  60. package/src/molecules/gv-dropdown-menu.js +1 -116
  61. package/src/molecules/gv-expandable.js +1 -122
  62. package/src/molecules/gv-expression-language.js +1 -270
  63. package/src/molecules/gv-identity-picture.js +1 -148
  64. package/src/molecules/gv-list.js +1 -227
  65. package/src/molecules/gv-metrics.js +1 -162
  66. package/src/molecules/gv-modal.js +1 -213
  67. package/src/molecules/gv-nav.js +1 -196
  68. package/src/molecules/gv-option.js +1 -242
  69. package/src/molecules/gv-plans.js +1 -429
  70. package/src/molecules/gv-popover.js +1 -351
  71. package/src/molecules/gv-promote.js +1 -209
  72. package/src/molecules/gv-rating-list.js +1 -365
  73. package/src/molecules/gv-rating.js +1 -253
  74. package/src/molecules/gv-row-expandable.js +1 -45
  75. package/src/molecules/gv-row.js +1 -210
  76. package/src/molecules/gv-stats.js +1 -121
  77. package/src/molecules/gv-stepper.js +1 -288
  78. package/src/molecules/gv-table.js +1 -685
  79. package/src/molecules/gv-tree.js +1 -250
  80. package/src/organisms/gv-documentation.js +1 -215
  81. package/src/organisms/gv-header.js +1 -288
  82. package/src/organisms/gv-http-client.js +1 -275
  83. package/src/organisms/gv-menu.js +1 -263
  84. package/src/organisms/gv-newsletter-subscription.js +1 -271
  85. package/src/organisms/gv-pagination.js +1 -198
  86. package/src/organisms/gv-properties.js +1 -920
  87. package/src/organisms/gv-resizable-views.js +1 -396
  88. package/src/organisms/gv-resources.js +1 -535
  89. package/src/organisms/gv-schema-form-array.js +1 -250
  90. package/src/organisms/gv-schema-form-control-object.js +1 -154
  91. package/src/organisms/gv-schema-form-control.js +1 -443
  92. package/src/organisms/gv-schema-form.js +1 -751
  93. package/src/organisms/gv-tabs.js +1 -210
  94. package/src/organisms/gv-user-menu.js +1 -314
  95. package/src/organisms/gv-vertical-menu.js +1 -123
  96. package/src/policy-studio/gv-flow-step.js +1 -464
  97. package/src/policy-studio/gv-flow.js +1 -621
  98. package/src/policy-studio/gv-policy-studio-menu.js +1 -750
  99. package/src/policy-studio/gv-policy-studio.js +1 -1842
  100. package/src/styles/empty.js +1 -36
  101. package/src/styles/input.js +1 -263
  102. package/src/styles/link.js +1 -32
  103. package/src/styles/shapes.js +1 -17
  104. package/src/styles/skeleton.js +1 -53
  105. package/src/styles/zoom.js +1 -40
  106. package/src/theme/gv-theme.js +1 -203
  107. package/wc/gv-autocomplete.js +1 -1
  108. package/wc/gv-button.js +1 -1
  109. package/wc/gv-card-full.js +1 -1
  110. package/wc/gv-card-list.js +1 -1
  111. package/wc/gv-card.js +1 -1
  112. package/wc/gv-category-list.js +1 -1
  113. package/wc/gv-category.js +1 -1
  114. package/wc/gv-chart-bar.js +1 -1
  115. package/wc/gv-chart-gauge.js +1 -1
  116. package/wc/gv-chart-histogram.js +1 -1
  117. package/wc/gv-chart-line.js +1 -1
  118. package/wc/gv-chart-map.js +1 -1
  119. package/wc/gv-chart-pie.js +1 -1
  120. package/wc/gv-checkbox.js +1 -1
  121. package/wc/gv-code.js +1 -1
  122. package/wc/gv-confirm.js +1 -1
  123. package/wc/gv-cron-editor.js +1 -1
  124. package/wc/gv-date-picker-calendar.js +1 -1
  125. package/wc/gv-date-picker-cell.js +1 -1
  126. package/wc/gv-date-picker.js +1 -1
  127. package/wc/gv-documentation.js +1 -1
  128. package/wc/gv-dropdown-menu.js +1 -1
  129. package/wc/gv-expandable.js +1 -1
  130. package/wc/gv-expression-language.js +1 -1
  131. package/wc/gv-file-upload.js +1 -1
  132. package/wc/gv-flow-step.js +1 -1
  133. package/wc/gv-flow.js +1 -1
  134. package/wc/gv-header.js +1 -1
  135. package/wc/gv-http-client.js +1 -1
  136. package/wc/gv-icon.js +1 -1
  137. package/wc/gv-identity-picture.js +1 -1
  138. package/wc/gv-image.js +1 -1
  139. package/wc/gv-input-message.js +1 -1
  140. package/wc/gv-input.js +1 -1
  141. package/wc/gv-link.js +1 -1
  142. package/wc/gv-list.js +1 -1
  143. package/wc/gv-menu.js +1 -1
  144. package/wc/gv-message.js +1 -1
  145. package/wc/gv-metric.js +1 -1
  146. package/wc/gv-metrics.js +1 -1
  147. package/wc/gv-modal.js +1 -1
  148. package/wc/gv-nav.js +1 -1
  149. package/wc/gv-newsletter-subscription.js +1 -1
  150. package/wc/gv-option.js +1 -1
  151. package/wc/gv-pagination.js +1 -1
  152. package/wc/gv-plans.js +1 -1
  153. package/wc/gv-policy-studio-menu.js +1 -1
  154. package/wc/gv-policy-studio.js +1 -1
  155. package/wc/gv-popover.js +1 -1
  156. package/wc/gv-promote.js +1 -1
  157. package/wc/gv-properties.js +1 -1
  158. package/wc/gv-rating-list.js +1 -1
  159. package/wc/gv-rating.js +1 -1
  160. package/wc/gv-relative-time.js +1 -1
  161. package/wc/gv-resizable-views.js +1 -1
  162. package/wc/gv-resources.js +1 -1
  163. package/wc/gv-row-expandable.js +1 -1
  164. package/wc/gv-row.js +1 -1
  165. package/wc/gv-schema-form-array.js +1 -1
  166. package/wc/gv-schema-form-control-object.js +1 -1
  167. package/wc/gv-schema-form-control.js +1 -1
  168. package/wc/gv-schema-form.js +1 -1
  169. package/wc/gv-select-native.js +1 -1
  170. package/wc/gv-select.js +1 -1
  171. package/wc/gv-spinner.js +1 -1
  172. package/wc/gv-state.js +1 -1
  173. package/wc/gv-stats.js +1 -1
  174. package/wc/gv-stepper.js +1 -1
  175. package/wc/gv-switch.js +1 -1
  176. package/wc/gv-table.js +1 -1
  177. package/wc/gv-tabs.js +1 -1
  178. package/wc/gv-tag.js +1 -1
  179. package/wc/gv-text.js +1 -1
  180. package/wc/gv-theme.js +1 -1
  181. package/wc/gv-tree.js +1 -1
  182. package/wc/gv-user-menu.js +1 -1
  183. package/wc/gv-vertical-menu.js +1 -1
  184. package/CHANGELOG.md +0 -1292
  185. package/LICENSE.txt +0 -202
  186. package/README.md +0 -195
  187. package/src/.eslintrc.js +0 -19
  188. package/src/theme/definition.json +0 -1762
@@ -1,103 +1 @@
1
- /*
2
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- import { LitElement } from 'lit';
17
- import '../atoms/gv-button';
18
- import '../atoms/gv-tag';
19
- import { ChartElement } from '../mixins/chart-element';
20
- import { dispatchCustomEvent } from '../lib/events';
21
-
22
- /**
23
- * Bar chart component
24
- *
25
- * ⚠️ This component is based on `highcharts`.
26
- * To use this component in your project be sure the dependency is installed or
27
- * install it with: `npm install highcharts --save`
28
- *
29
- * @fires gv-chart-bar:select - Custom event with selected value
30
- *
31
- * @attr {Array} series - The series to display on the bar chart.
32
- * @attr {Array} options - The list of options to display.
33
- *
34
- */
35
- export class GvChartBar extends ChartElement(LitElement) {
36
- async getOptions() {
37
- let total = 0;
38
- const categories = [];
39
- if (this._series && this._series.values) {
40
- this.options.data.forEach((data, i) => {
41
- data.y = this._series.values[this.options.data[i].name] || 0;
42
- categories.push(data.name);
43
- });
44
- this.options.data.forEach((d) => {
45
- total += d.y;
46
- });
47
- }
48
- if (!total) {
49
- this._empty = true;
50
- }
51
- return {
52
- chart: {
53
- type: 'bar',
54
- },
55
- series: total === 0 ? [] : [this.options],
56
- xAxis: {
57
- categories: categories,
58
- },
59
- legend: {
60
- enabled: false,
61
- },
62
- yAxis: {
63
- allowDecimals: false,
64
- title: {
65
- text: null,
66
- },
67
- min: 0,
68
- },
69
- plotOptions: {
70
- bar: {
71
- dataLabels: {
72
- enabled: true,
73
- },
74
- },
75
- series: {
76
- animation: false,
77
- events: {
78
- click: (event) => {
79
- event.preventDefault();
80
- dispatchCustomEvent(this, 'select', event.point.options);
81
- },
82
- },
83
- },
84
- },
85
- tooltip: {
86
- pointFormat: 'Nb hits: <b>{point.y}</b>',
87
- },
88
- title: {
89
- text: 'Total: ' + total,
90
- useHTML: true,
91
- align: 'left',
92
- verticalAlign: 'bottom',
93
- y: 10,
94
- style: {
95
- fontSize: '12px',
96
- fontWeight: 'bold',
97
- },
98
- },
99
- };
100
- }
101
- }
102
-
103
- window.customElements.define('gv-chart-bar', GvChartBar);
1
+ Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartBar=void 0;const t=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const e=require("../mixins/chart-element"),s=require("../lib/events");class i extends((0,e.ChartElement)(t.LitElement)){async getOptions(){let t=0;const e=[];return this._series&&this._series.values&&(this.options.data.forEach(((t,s)=>{t.y=this._series.values[this.options.data[s].name]||0,e.push(t.name)})),this.options.data.forEach((e=>{t+=e.y}))),t||(this._empty=!0),{chart:{type:"bar"},series:0===t?[]:[this.options],xAxis:{categories:e},legend:{enabled:!1},yAxis:{allowDecimals:!1,title:{text:null},min:0},plotOptions:{bar:{dataLabels:{enabled:!0}},series:{animation:!1,events:{click:t=>{t.preventDefault(),(0,s.dispatchCustomEvent)(this,"select",t.point.options)}}}},tooltip:{pointFormat:"Nb hits: <b>{point.y}</b>"},title:{text:"Total: "+t,useHTML:!0,align:"left",verticalAlign:"bottom",y:10,style:{fontSize:"12px",fontWeight:"bold"}}}}}exports.GvChartBar=i,window.customElements.define("gv-chart-bar",i);
@@ -1,100 +1 @@
1
- /*
2
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- import { LitElement } from 'lit';
17
- import { ChartElement } from '../mixins/chart-element';
18
- import ChartModuleMore from 'highcharts/highcharts-more';
19
- import Highcharts from 'highcharts';
20
- import HCSolidGauge from 'highcharts/modules/solid-gauge';
21
-
22
- /**
23
- * Gauge chart component
24
- *
25
- * ⚠️ This component is based on `highcharts`.
26
- * To use this component in your project be sure the dependency is installed or
27
- * install it with: `npm install highcharts --save`
28
- *
29
- * @attr {number} max - The maximum value of the gauge.
30
- * @attr {Array} series - Array of the series to display.
31
- * @attr {Object} tooltip - The list of tooltip attributes to overwrite.
32
- * @attr {Object} pane - The pane serves as a container for axes and backgrounds for circular gauges and polar charts.
33
- */
34
- export class GvChartGauge extends ChartElement(LitElement) {
35
- constructor() {
36
- super();
37
- ChartModuleMore(Highcharts);
38
- HCSolidGauge(Highcharts);
39
- }
40
-
41
- static get properties() {
42
- return {
43
- /** @required */
44
- max: { type: Number },
45
- series: { type: Array },
46
- };
47
- }
48
-
49
- async getOptions() {
50
- this._empty = false;
51
- return {
52
- chart: {
53
- type: 'solidgauge',
54
- backgroundColor: 'transparent',
55
- },
56
- tooltip: {
57
- enabled: false,
58
- ...this.tooltip,
59
- },
60
-
61
- pane: {
62
- startAngle: 0,
63
- endAngle: 360,
64
- background: [
65
- {
66
- outerRadius: '112%',
67
- innerRadius: '88%',
68
- backgroundColor: 'transparent',
69
- borderWidth: 0,
70
- },
71
- ],
72
- ...this.pane,
73
- },
74
-
75
- yAxis: [
76
- {
77
- min: 0,
78
- max: this.max,
79
- lineWidth: 0,
80
- tickPositions: [],
81
- },
82
- ],
83
-
84
- plotOptions: {
85
- solidgauge: {
86
- dataLabels: {
87
- enabled: true,
88
- },
89
- linecap: 'round',
90
- stickyTracking: false,
91
- rounded: true,
92
- },
93
- },
94
-
95
- series: this.series,
96
- };
97
- }
98
- }
99
-
100
- window.customElements.define('gv-chart-gauge', GvChartGauge);
1
+ var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartGauge=void 0;const t=require("lit"),r=require("../mixins/chart-element"),a=e(require("highcharts/highcharts-more")),i=e(require("highcharts")),s=e(require("highcharts/modules/solid-gauge"));class n extends((0,r.ChartElement)(t.LitElement)){constructor(){super(),(0,a.default)(i.default),(0,s.default)(i.default)}static get properties(){return{max:{type:Number},series:{type:Array}}}async getOptions(){return this._empty=!1,{chart:{type:"solidgauge",backgroundColor:"transparent"},tooltip:{enabled:!1,...this.tooltip},pane:{startAngle:0,endAngle:360,background:[{outerRadius:"112%",innerRadius:"88%",backgroundColor:"transparent",borderWidth:0}],...this.pane},yAxis:[{min:0,max:this.max,lineWidth:0,tickPositions:[]}],plotOptions:{solidgauge:{dataLabels:{enabled:!0},linecap:"round",stickyTracking:!1,rounded:!0}},series:this.series}}}exports.GvChartGauge=n,window.customElements.define("gv-chart-gauge",n);
@@ -1,83 +1 @@
1
- /*
2
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- import { LitElement } from 'lit';
17
- import { ChartElement } from '../mixins/chart-element';
18
-
19
- /**
20
- * Histogram chart component
21
- *
22
- * ⚠️ This component is based on `highcharts`.
23
- * To use this component in your project be sure the dependency is installed or
24
- * install it with: `npm install highcharts --save`
25
- *
26
- * @attr {Array} series - The series to display on the histogram chart.
27
- * @attr {Object} options - The list of options to display.
28
- *
29
- */
30
- export class GvChartHistogram extends ChartElement(LitElement) {
31
- async getOptions() {
32
- let yAxis;
33
- let title;
34
- let subtitle;
35
- let plotOptions;
36
-
37
- if (this.options) {
38
- yAxis = this.options.yAxis;
39
- title = this.options.title;
40
- subtitle = this.options.subtitle;
41
- plotOptions = this.options.plotOptions;
42
- }
43
-
44
- if (this._series && this._series.values && this._series.values.length === 0) {
45
- this._empty = true;
46
- }
47
-
48
- return {
49
- chart: {
50
- type: 'column',
51
- backgroundColor: 'transparent',
52
- },
53
- title: {
54
- text: title,
55
- align: 'left',
56
- style: { fontSize: '12px', fontWeight: '700' },
57
- },
58
- subtitle: {
59
- text: subtitle,
60
- align: 'left',
61
- style: { fontSize: '11px', color: '#000000', opacity: '0.54' },
62
- },
63
- series: this._series.values,
64
- xAxis: {
65
- type: 'datetime',
66
- dateTimeLabelFormats: {
67
- month: '%e. %b',
68
- year: '%b',
69
- },
70
- },
71
- legend: {
72
- enabled: false,
73
- },
74
- yAxis,
75
- plotOptions,
76
- tooltip: {
77
- pointFormat: 'Value: <b>{point.y}</b>',
78
- },
79
- };
80
- }
81
- }
82
-
83
- window.customElements.define('gv-chart-histogram', GvChartHistogram);
1
+ Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartHistogram=void 0;const t=require("lit"),e=require("../mixins/chart-element");class s extends((0,e.ChartElement)(t.LitElement)){async getOptions(){let t,e,s,i;return this.options&&(t=this.options.yAxis,e=this.options.title,s=this.options.subtitle,i=this.options.plotOptions),this._series&&this._series.values&&0===this._series.values.length&&(this._empty=!0),{chart:{type:"column",backgroundColor:"transparent"},title:{text:e,align:"left",style:{fontSize:"12px",fontWeight:"700"}},subtitle:{text:s,align:"left",style:{fontSize:"11px",color:"#000000",opacity:"0.54"}},series:this._series.values,xAxis:{type:"datetime",dateTimeLabelFormats:{month:"%e. %b",year:"%b"}},legend:{enabled:!1},yAxis:t,plotOptions:i,tooltip:{pointFormat:"Value: <b>{point.y}</b>"}}}}exports.GvChartHistogram=s,window.customElements.define("gv-chart-histogram",s);
@@ -1,224 +1 @@
1
- /*
2
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- import { LitElement } from 'lit';
17
- import '../atoms/gv-button';
18
- import '../atoms/gv-tag';
19
- import Highcharts from 'highcharts';
20
- import { ChartElement } from '../mixins/chart-element';
21
- import { dispatchCustomEvent } from '../lib/events';
22
- import { getLanguage } from '../lib/i18n';
23
-
24
- /**
25
- * Line chart component
26
- *
27
- * ⚠️ This component is based on `highcharts`.
28
- * To use this component in your project be sure the dependency is installed or
29
- * install it with: `npm install highcharts --save`
30
- *
31
- * @fires gv-chart-line:zoom - Custom event with zoomed timeframe
32
- * @fires gv-chart-line:select - Custom event with selected value
33
- *
34
- * @attr {Array} series - The series to display on the line chart.
35
- * @attr {Array} options - The list of options to display.
36
- *
37
- */
38
- export class GvChartLine extends ChartElement(LitElement) {
39
- async getOptions() {
40
- if (this._series && this._series.values && this._series.values[0] && this._series.values[0].buckets) {
41
- const values = this._series.values[0].buckets.slice();
42
- const metadata = this._series.values[0].metadata;
43
- values.forEach((bucket, i) => {
44
- this._series.values[i] = { ...bucket, ...this.options.data[0] };
45
- let isFieldRequest = this.options.request.aggs && this.options.request.aggs.startsWith('field:');
46
- if (bucket.name === '1' || bucket.name.match('^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$')) {
47
- isFieldRequest = false;
48
- }
49
- let label = this.options.labels ? this.options.labels[0] : '';
50
- if (!label && metadata && metadata[bucket.name]) {
51
- label = metadata[bucket.name].name;
52
- }
53
- if (isFieldRequest) {
54
- this._series.values[i].name = bucket.name;
55
- this._series.values[i].labelPrefix = label;
56
- this._series.values[i].value = bucket.name;
57
- } else {
58
- this._series.values[i].name = label;
59
- this._series.values[i].labelPrefix = '';
60
- this._series.values[i].value = bucket.name;
61
- }
62
- });
63
- }
64
- this.options.plotLines = this.options.plotLines
65
- ? this.options.plotLines.map((line) => {
66
- return {
67
- ...line,
68
- events: {
69
- mouseover: function () {
70
- this.label.element.firstElementChild.style.visibility = 'visible';
71
- },
72
- mouseout: function () {
73
- this.label.element.firstElementChild.style.visibility = 'hidden';
74
- },
75
- },
76
- };
77
- })
78
- : [];
79
- return {
80
- chart: {
81
- type: 'areaspline',
82
- zoomType: 'x',
83
- events: {
84
- selection: (event) => {
85
- event.preventDefault();
86
- dispatchCustomEvent(this, 'zoom', {
87
- from: Math.floor(event.xAxis[0].min),
88
- to: Math.round(event.xAxis[0].max),
89
- });
90
- },
91
- },
92
- },
93
- tooltip: {
94
- formatter: function () {
95
- const nbCol = Math.trunc(this.points.filter((p) => p.y).length / 10);
96
- let s = '<div><b>' + new Date(this.x).toLocaleString(getLanguage()) + '</b></div>';
97
- s += '<div class="' + (nbCol >= 2 ? 'tooltip tooltip-' + (nbCol > 5 ? 5 : nbCol) : '') + '">';
98
- if (
99
- this.points.filter((point) => {
100
- return point.y !== 0;
101
- }).length
102
- ) {
103
- let i = 0;
104
- this.points.forEach((point) => {
105
- if (point.y) {
106
- const name =
107
- ' ' + (point.series.options.labelPrefix ? point.series.options.labelPrefix + ' ' + point.series.name : point.series.name);
108
- if (nbCol < 2 && i++ > 0) {
109
- s += '<br />';
110
- }
111
- s +=
112
- '<span style="margin: 1px 5px;"><span style="color:' +
113
- point.color +
114
- '">\u25CF</span>' +
115
- name +
116
- ': <b>' +
117
- (point.series.options.decimalFormat ? Highcharts.numberFormat(point.y, 2) : point.y) +
118
- (point.series.options.labelSuffix ? point.series.options.labelSuffix : '') +
119
- '</b></span>';
120
- }
121
- });
122
- }
123
- s += '</div>';
124
- return s;
125
- },
126
- shared: true,
127
- useHTML: true,
128
- },
129
- plotOptions: {
130
- line: {
131
- allowPointSelect: true,
132
- cursor: 'pointer',
133
- dataLabels: {
134
- enabled: true,
135
- format: '<b>{point.name}</b>: {point.percentage:.1f} %',
136
- },
137
- },
138
- series: {
139
- ...this.options,
140
- ...{
141
- marker: {
142
- enabled: false,
143
- },
144
- fillOpacity: 0.1,
145
- },
146
- events: {
147
- legendItemClick: (event) => {
148
- event.preventDefault();
149
- dispatchCustomEvent(this, 'select', event.target);
150
- },
151
- },
152
- },
153
- },
154
- xAxis: {
155
- type: 'datetime',
156
- dateTimeLabelFormats: {
157
- month: '%e. %b',
158
- year: '%b',
159
- },
160
- crosshair: true,
161
- plotLines: [...this.options.plotLines],
162
- },
163
- yAxis: { title: { text: '' } },
164
- };
165
- }
166
-
167
- updated(changedProperties) {
168
- super.updated(changedProperties);
169
- if (changedProperties.has('options')) {
170
- this.getOptions().then((options) => {
171
- this._additionalOptions = options;
172
- });
173
- }
174
- }
175
-
176
- firstUpdated() {
177
- this.shadowRoot.addEventListener('mousemove', (e) => {
178
- let chart, i, event, points;
179
- for (i = 0; i < Highcharts.charts.length; i++) {
180
- chart = Highcharts.charts[i];
181
- if (chart && chart.pointer) {
182
- if (e.originalEvent) {
183
- event = chart.pointer.normalize(e.originalEvent);
184
- } else {
185
- event = chart.pointer.normalize(e);
186
- }
187
- points = chart.series.map((serie) => {
188
- return serie.searchPoint(event, true);
189
- });
190
- points = points.filter((point) => {
191
- return point;
192
- });
193
-
194
- e.points = points;
195
- if (points.length && points[0] && points[0].series.area) {
196
- points[0].highlight(e);
197
- }
198
- }
199
- }
200
- });
201
- Highcharts.Pointer.prototype.reset = function () {
202
- let chart;
203
- for (let i = 0; i < Highcharts.charts.length; i++) {
204
- chart = Highcharts.charts[i];
205
- if (chart) {
206
- if (chart.tooltip) {
207
- chart.tooltip.hide(this);
208
- }
209
- if (chart.xAxis[0]) {
210
- chart.xAxis[0].hideCrosshair();
211
- }
212
- }
213
- }
214
- };
215
- Highcharts.Point.prototype.highlight = function (event) {
216
- if (event.points.length) {
217
- this.series.chart.tooltip.refresh(event.points);
218
- this.series.chart.xAxis[0].drawCrosshair(event, this);
219
- }
220
- };
221
- }
222
- }
223
-
224
- window.customElements.define('gv-chart-line', GvChartLine);
1
+ var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartLine=void 0;const t=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const s=e(require("highcharts")),i=require("../mixins/chart-element"),o=require("../lib/events"),a=require("../lib/i18n");class n extends((0,i.ChartElement)(t.LitElement)){async getOptions(){if(this._series&&this._series.values&&this._series.values[0]&&this._series.values[0].buckets){const e=this._series.values[0].buckets.slice(),t=this._series.values[0].metadata;e.forEach(((e,s)=>{this._series.values[s]={...e,...this.options.data[0]};let i=this.options.request.aggs&&this.options.request.aggs.startsWith("field:");("1"===e.name||e.name.match("^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$"))&&(i=!1);let o=this.options.labels?this.options.labels[0]:"";!o&&t&&t[e.name]&&(o=t[e.name].name),i?(this._series.values[s].name=e.name,this._series.values[s].labelPrefix=o,this._series.values[s].value=e.name):(this._series.values[s].name=o,this._series.values[s].labelPrefix="",this._series.values[s].value=e.name)}))}return this.options.plotLines=this.options.plotLines?this.options.plotLines.map((e=>({...e,events:{mouseover:function(){this.label.element.firstElementChild.style.visibility="visible"},mouseout:function(){this.label.element.firstElementChild.style.visibility="hidden"}}}))):[],{chart:{type:"areaspline",zoomType:"x",events:{selection:e=>{e.preventDefault(),(0,o.dispatchCustomEvent)(this,"zoom",{from:Math.floor(e.xAxis[0].min),to:Math.round(e.xAxis[0].max)})}}},tooltip:{formatter:function(){const e=Math.trunc(this.points.filter((e=>e.y)).length/10);let t="<div><b>"+new Date(this.x).toLocaleString((0,a.getLanguage)())+"</b></div>";if(t+='<div class="'+(e>=2?"tooltip tooltip-"+(e>5?5:e):"")+'">',this.points.filter((e=>0!==e.y)).length){let i=0;this.points.forEach((o=>{if(o.y){const a=" "+(o.series.options.labelPrefix?o.series.options.labelPrefix+" "+o.series.name:o.series.name);e<2&&i++>0&&(t+="<br />"),t+='<span style="margin: 1px 5px;"><span style="color:'+o.color+'">●</span>'+a+": <b>"+(o.series.options.decimalFormat?s.default.numberFormat(o.y,2):o.y)+(o.series.options.labelSuffix?o.series.options.labelSuffix:"")+"</b></span>"}}))}return t+="</div>",t},shared:!0,useHTML:!0},plotOptions:{line:{allowPointSelect:!0,cursor:"pointer",dataLabels:{enabled:!0,format:"<b>{point.name}</b>: {point.percentage:.1f} %"}},series:{...this.options,marker:{enabled:!1},fillOpacity:.1,events:{legendItemClick:e=>{e.preventDefault(),(0,o.dispatchCustomEvent)(this,"select",e.target)}}}},xAxis:{type:"datetime",dateTimeLabelFormats:{month:"%e. %b",year:"%b"},crosshair:!0,plotLines:[...this.options.plotLines]},yAxis:{title:{text:""}}}}updated(e){super.updated(e),e.has("options")&&this.getOptions().then((e=>{this._additionalOptions=e}))}firstUpdated(){this.shadowRoot.addEventListener("mousemove",(e=>{let t,i,o,a;for(i=0;i<s.default.charts.length;i++)t=s.default.charts[i],t&&t.pointer&&(o=e.originalEvent?t.pointer.normalize(e.originalEvent):t.pointer.normalize(e),a=t.series.map((e=>e.searchPoint(o,!0))),a=a.filter((e=>e)),e.points=a,a.length&&a[0]&&a[0].series.area&&a[0].highlight(e))})),s.default.Pointer.prototype.reset=function(){let e;for(let t=0;t<s.default.charts.length;t++)e=s.default.charts[t],e&&(e.tooltip&&e.tooltip.hide(this),e.xAxis[0]&&e.xAxis[0].hideCrosshair())},s.default.Point.prototype.highlight=function(e){e.points.length&&(this.series.chart.tooltip.refresh(e.points),this.series.chart.xAxis[0].drawCrosshair(e,this))}}}exports.GvChartLine=n,window.customElements.define("gv-chart-line",n);
@@ -1,112 +1 @@
1
- /*
2
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- import { LitElement } from 'lit';
17
- import '../atoms/gv-button';
18
- import '../atoms/gv-tag';
19
- import { ChartElement } from '../mixins/chart-element';
20
- import Highcharts from 'highcharts';
21
- import { dispatchCustomEvent } from '../lib/events';
22
-
23
- /**
24
- * Map chart component.
25
- *
26
- * ⚠️ This component is based on `highcharts` and `@highcharts/map-collection`.
27
- * To use this component in your project be sure the dependencies are installed or
28
- * install them with: `npm install highcharts @highcharts/map-collection --save`
29
- *
30
- * @fires gv-chart-map:select - Custom event with selected value
31
- *
32
- * @attr {Array} series - The series to display on the map chart.
33
- * @attr {Array} options - The list of options to display.
34
- *
35
- */
36
- export class GvChartMap extends ChartElement(LitElement) {
37
- async getOptions() {
38
- const data = [];
39
- if (this._series && this._series.values) {
40
- Object.keys(this._series.values).forEach((k) => {
41
- if (!this.options.excludedKeys || (this.options.excludedKeys && !this.options.excludedKeys.includes(k))) {
42
- data.push({ key: k, value: this._series.values[k] });
43
- }
44
- });
45
- }
46
- let key, map;
47
- if (this.options.zone) {
48
- const zone = this.options.zone.toLowerCase();
49
- key = 'name';
50
- map = await import('@highcharts/map-collection/countries/' + zone.substring(0, 2) + '/' + zone + '-all.geo.json');
51
- } else {
52
- key = 'hc-a2';
53
- map = await import('@highcharts/map-collection/custom/world.geo.json');
54
- }
55
- return {
56
- chart: {
57
- map,
58
- },
59
- mapNavigation: {
60
- enabled: true,
61
- enableMouseWheelZoom: false,
62
- },
63
- legend: {
64
- layout: 'vertical',
65
- align: 'left',
66
- verticalAlign: 'bottom',
67
- },
68
- colorAxis: {
69
- min: 0,
70
- stops: [
71
- [0, '#EFEFFF'],
72
- [0.5, Highcharts.getOptions().colors[0]],
73
- [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()],
74
- ],
75
- },
76
- series: [
77
- {
78
- data,
79
- joinBy: [key, 'key'],
80
- name: this.options.name,
81
- dataLabels: {
82
- enabled: true,
83
- formatter: function () {
84
- return key === 'name' ? this.point[key] : '';
85
- },
86
- },
87
- states: {
88
- hover: {
89
- color: '#a4edba',
90
- borderColor: 'gray',
91
- },
92
- },
93
- nullColor: '#eaecfd',
94
- point: {
95
- events: {
96
- click: (event) => {
97
- event.preventDefault();
98
- dispatchCustomEvent(this, 'select', event.point.properties);
99
- },
100
- },
101
- },
102
- },
103
- ],
104
- tooltip: {
105
- headerFormat: '',
106
- pointFormat: '<b>{point.name}:</b> {point.value}',
107
- },
108
- };
109
- }
110
- }
111
-
112
- window.customElements.define('gv-chart-map', GvChartMap);
1
+ var e=Object.create?function(e,t,o,r){void 0===r&&(r=o),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[o]}})}:function(e,t,o,r){void 0===r&&(r=o),e[r]=t[o]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},o=function(o){if(o&&o.__esModule)return o;var r={};if(null!=o)for(var i in o)"default"!==i&&Object.prototype.hasOwnProperty.call(o,i)&&e(r,o,i);return t(r,o),r},r=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartMap=void 0;const i=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const n=require("../mixins/chart-element"),s=r(require("highcharts")),a=require("../lib/events");class l extends((0,n.ChartElement)(i.LitElement)){async getOptions(){const e=[];let t,r;if(this._series&&this._series.values&&Object.keys(this._series.values).forEach((t=>{(!this.options.excludedKeys||this.options.excludedKeys&&!this.options.excludedKeys.includes(t))&&e.push({key:t,value:this._series.values[t]})})),this.options.zone){const e=this.options.zone.toLowerCase();t="name",r=await Promise.resolve().then((()=>o(require("@highcharts/map-collection/countries/"+e.substring(0,2)+"/"+e+"-all.geo.json"))))}else t="hc-a2",r=await Promise.resolve().then((()=>o(require("@highcharts/map-collection/custom/world.geo.json"))));return{chart:{map:r},mapNavigation:{enabled:!0,enableMouseWheelZoom:!1},legend:{layout:"vertical",align:"left",verticalAlign:"bottom"},colorAxis:{min:0,stops:[[0,"#EFEFFF"],[.5,s.default.getOptions().colors[0]],[1,s.default.Color(s.default.getOptions().colors[0]).brighten(-.5).get()]]},series:[{data:e,joinBy:[t,"key"],name:this.options.name,dataLabels:{enabled:!0,formatter:function(){return"name"===t?this.point[t]:""}},states:{hover:{color:"#a4edba",borderColor:"gray"}},nullColor:"#eaecfd",point:{events:{click:e=>{e.preventDefault(),(0,a.dispatchCustomEvent)(this,"select",e.point.properties)}}}}],tooltip:{headerFormat:"",pointFormat:"<b>{point.name}:</b> {point.value}"}}}}exports.GvChartMap=l,window.customElements.define("gv-chart-map",l);