@c8y/style 1021.66.0 → 1021.67.0

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 (6) hide show
  1. package/img/gauge-presets/custom-dark.webp +0 -0
  2. package/img/gauge-presets/custom.webp +0 -0
  3. package/img/radial-gauge-pr.png +0 -0
  4. package/package.json +1 -1
  5. package/styles/_c8y-gauges.less +40 -203
  6. package/styles/_info-gauge.less +16 -9
package/img/gauge-presets/custom.webp ADDED
Binary file
package/img/radial-gauge-pr.png ADDED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c8y/style",
3
- "version": "1021.66.0",
3
+ "version": "1021.67.0",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Cumulocity GmbH",
6
6
  "description": "Styles for Cumulocity IoT applications",
package/styles/_c8y-gauges.less CHANGED
@@ -1,208 +1,45 @@
1
- .value-warning {
2
- display: block;
3
- float: left;
4
- margin-top: 20px;
5
- padding: 5px;
6
- border-color: @black;
7
- background-color: @black;
8
- }
9
-
10
- .table-kpi-list tbody:hover td[rowspan],
11
- .table-hover tr:hover td {
12
- background: @component-background-hover;
13
- }
14
-
15
- .bright-hover tr:hover td {
16
- background-color: @palette-high;
17
- }
18
-
19
- .table-kpi-list .disabled-detector-container {
20
- position: relative;
21
- }
22
-
23
- .table-kpi-list .disabled-detector {
24
- position: absolute;
25
- top: 0;
26
- right: 0;
27
- bottom: 0;
28
- left: 0;
29
- opacity: 0;
30
- }
1
+ @image-directory: if(@use-relative-paths, '../img/', 'img/');
31
2
 
32
- .linearGauge {
33
- // border: 5px solid @gray-80;
3
+ .c8y-radial-gauge {
4
+ width: 99%;
5
+ height: 99%;
34
6
  position: relative;
35
- margin: 10px auto;
36
- width: 90%;
37
- height: 80px;
38
- border-radius: 40px;
39
- background: @gray-80;
40
- .ranges {
41
- position: absolute;
42
- top: 5px;
43
- right: 5px;
44
- bottom: 5px;
45
- left: 5px;
46
- overflow: hidden;
47
- border: 5px solid @component-background-default;
48
- border-radius: 40px;
49
- }
50
- }
51
-
52
- .silo {
53
- position: absolute;
54
- width: 100%;
55
- height: 100%;
56
- min-width: 360px;
57
- }
58
-
59
- .linearGauge.vertical {
60
- width: 20px;
61
- height: 300px;
62
- }
63
-
64
- .linearGaugeRange {
65
- position: absolute;
66
- top: 0;
67
- bottom: 0;
68
- }
69
-
70
- .siloRange {
71
- position: absolute;
72
- right: 0;
73
- left: 0;
74
- }
75
-
76
- .linearGaugeRange.vertical {
77
- position: absolute;
78
- right: 0;
79
- left: 0;
80
- }
81
-
82
- .yellowRange {
83
- background: @status-warning;
84
- }
85
-
86
- .redRange {
87
- background: @status-danger;
88
- }
89
-
90
- .linearGaugePointer {
91
- position: absolute;
92
- top: 7px;
93
- bottom: 7px;
94
- left: auto;
95
- width: 0;
96
- border: 1px solid @gray-40;
97
- }
98
-
99
- .siloPointer {
100
- position: absolute;
101
- right: 7px !important;
102
- left: 7px !important;
103
- height: 0;
104
- border: 1px solid transparent;
105
- }
106
-
107
- .siloPointer-wrapper {
108
- position: absolute;
109
- top: 10px;
110
- right: 0;
111
- bottom: 10px;
112
- left: 0;
113
- }
114
-
115
- .linearGaugePointer-wrapper {
116
- position: absolute;
117
- top: 0;
118
- right: 10px;
119
- bottom: 0;
120
- left: 10px;
121
- }
122
-
123
- .siloPointer > div {
124
- position: absolute;
125
- top: -32px;
126
- left: 70px;
127
- z-index: 100;
128
- display: inline-block;
129
- width: auto;
130
- font-size: 14px;
131
- line-height: 1;
132
- .popover-content {
133
- padding: 8px;
134
- }
135
- }
136
-
137
- .linearGaugePointer > div {
138
- position: absolute;
139
- top: 100%;
140
- display: inline-block;
141
- width: auto;
142
- font-size: 14px;
143
- line-height: 1;
144
-
145
- .translate(-50%, 2px);
146
- .popover-content {
147
- padding: 8px;
7
+ display: block;
8
+ &--square {
9
+ height: auto;
10
+ aspect-ratio: 1;
148
11
  }
149
- }
150
-
151
- .linearGaugePointer.target {
152
- border-color: @status-success;
153
- }
154
-
155
- .siloPointer.target {
156
- border-color: @status-success;
157
- }
158
-
159
- .linearGaugeLabel {
160
- position: absolute;
161
- bottom: -30px;
162
- font-size: 12px;
163
- }
164
-
165
- .siloLabel {
166
- position: absolute;
167
- left: 85px;
168
- display: table; //.translate(-100%,0);
169
- white-space: nowrap;
170
- font-size: 12px;
171
- }
172
-
173
- .nv-pieLabels text {
174
- fill: @component-background-default !important;
175
- }
176
-
177
- .silo .graphHoverInfoCurrent,
178
- .linearGauge .graphHoverInfoCurrent {
179
- position: absolute;
180
- z-index: 1000;
181
- overflow: visible;
182
- padding: 2px 5px 0;
183
- width: auto;
184
- background-color: @tooltip-background-default;
185
- box-shadow: none;
186
- color: @component-background-default;
187
- font-size: 12px;
188
-
189
- .translate(-50%, -30px);
190
- &:after {
191
- position: absolute;
192
- top: 100%;
193
- left: 50%;
194
- margin-left: -5px;
195
- width: 0;
196
- height: 0;
197
- border-width: 5px 5px 0;
198
- border-style: solid;
199
- border-color: transparent;
200
- border-top-color: @tooltip-arrow-color;
201
- background-color: transparent;
202
- content: '';
12
+ &__preset {
13
+ .btn-clean();
14
+ padding: @margin-base!important;
15
+ display: flex;
16
+ flex-direction: column;
17
+ align-items: center;
18
+ cursor: pointer;
19
+ transition: all 0.25s linear;
20
+ outline: 0;
21
+ &:hover, &.selected{
22
+ outline: 1px solid @component-brand-primary;
23
+ outline-offset: -2px;
24
+ border-radius: 4px;
25
+ }
26
+
27
+ &.preset-custom::before {
28
+ content: '';
29
+ display: block;
30
+ aspect-ratio: 1;
31
+ background-size: contain;
32
+ background-repeat: no-repeat;
33
+ background-position: center;
34
+ min-width: 100%;
35
+ background-image: url('@{image-directory}gauge-presets/custom.webp');
36
+ .c8y-dark-theme & {
37
+ background-image: url('@{image-directory}gauge-presets/custom-dark.webp');
38
+ }
39
+ }
40
+
41
+ .c8y-radial-gauge--square{
42
+ pointer-events: none;
43
+ }
203
44
  }
204
45
  }
205
-
206
- .linearGauge .graphHoverInfoCurrent {
207
- .translate(-50%, -40px);
208
- }
package/styles/_info-gauge.less CHANGED
@@ -1,13 +1,11 @@
1
-
2
-
3
1
  .label-value-unit-gauge {
4
2
  display: block;
5
3
  padding: 0 @margin-24;
6
4
  min-height: 100%;
7
- .gauge-legend{
5
+ .gauge-legend {
8
6
  width: 100%;
9
7
  }
10
-
8
+
11
9
  .gauge-legend {
12
10
  h3 {
13
11
  margin: 0;
@@ -34,7 +32,7 @@
34
32
  .center-label {
35
33
  font-size: 14px;
36
34
  }
37
-
35
+
38
36
  .center-unit,
39
37
  .center-date-time {
40
38
  font-size: 10px;
@@ -71,16 +69,25 @@
71
69
  }
72
70
  }
73
71
 
74
- @container (min-width: 150px){
75
- .label-value-unit-gauge{
72
+ .chart-container {
73
+ min-height: 280px;
74
+ }
75
+
76
+ .card-dashboard .chart-container {
77
+ max-height: calc(100% - 95px);
78
+ max-width: 99.5%;
79
+ }
80
+
81
+ @container (min-width: 150px) {
82
+ .label-value-unit-gauge {
76
83
  display: flex;
77
84
  flex-flow: row nowrap;
78
85
  align-items: center;
79
- .gauge-legend{
86
+ .gauge-legend {
80
87
  width: 40cqw;
81
88
  }
82
89
  }
83
- .gauge-svg{
90
+ .gauge-svg {
84
91
  height: 100cqh;
85
92
  width: 100%;
86
93
  }