@dataloop-ai/components 0.17.133 → 0.17.134

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue +41 -63
  3. package/src/components/shared/DlTooltip/DlTooltip.vue +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.17.133",
3
+ "version": "0.17.134",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue CHANGED
@@ -62,8 +62,6 @@
62
62
  :style="`background-color: ${getCellBackground(
63
63
  cell.value
64
64
  )}; color: ${getCellTextColor(cell.value)}`"
65
- @mouseenter="handleShowTooltip(cell, $event)"
66
- @mouseleave="handleHideTooltip"
67
65
  @mousedown="openLink(cell)"
68
66
  >
69
67
  {{
@@ -73,6 +71,31 @@
73
71
  : cell.unnormalizedValue
74
72
  : null
75
73
  }}
74
+ <dl-tooltip
75
+ class="matrix-tooltip"
76
+ background-color="dl-color-shadow"
77
+ color="dl-color-tooltip-background"
78
+ :offset="[5, 5]"
79
+ >
80
+ <div class="matrix-tooltip__body">
81
+ <span>{{ cell.xLabel }}</span>
82
+ <span>{{ cell.yLabel }}</span>
83
+ <span class="matrix-tooltip__value">
84
+ <span
85
+ v-if="cell.value"
86
+ class="matrix-tooltip__color"
87
+ :style="`background-color: ${getCellBackground(
88
+ cell.value
89
+ )}`"
90
+ />
91
+ {{
92
+ normalized
93
+ ? `Normalized ${cell.value}`
94
+ : `Unnormalized ${cell.unnormalizedValue}`
95
+ }}
96
+ </span>
97
+ </div>
98
+ </dl-tooltip>
76
99
  </div>
77
100
  </div>
78
101
  </div>
@@ -145,25 +168,6 @@
145
168
  >
146
169
  The given props cannot create a valid matrix.
147
170
  </div>
148
- <div
149
- v-if="tooltipVisible"
150
- :style="tooltipStyles"
151
- class="matrix-tooltip"
152
- >
153
- <span class="matrix-tooltip__x">{{ tooltipState.xLabel }}</span>
154
- <span class="matrix-tooltip__y">{{ tooltipState.yLabel }}</span>
155
- <span>
156
- <span
157
- v-if="tooltipState.value"
158
- class="matrix-tooltip__color"
159
- :style="`background-color: ${getCellBackground(
160
- tooltipState.value
161
- )}`"
162
- />
163
- {{ normalized ? 'Normalized' : 'Unnormalized' }}
164
- {{ tooltipState.value }}
165
- </span>
166
- </div>
167
171
  </div>
168
172
  </template>
169
173
 
@@ -264,15 +268,11 @@ export default defineComponent({
264
268
  getCellBackground,
265
269
  getCellTextColor,
266
270
  cellWidth,
267
- tooltipState,
268
271
  currentBrushState,
269
272
  rotateXLabels
270
273
  }
271
274
  },
272
275
  computed: {
273
- tooltipVisible(): boolean {
274
- return this.tooltipState?.visible
275
- },
276
276
  visibleLabels(): DlConfusionMatrixLabel[] {
277
277
  if (this.labels[0]) {
278
278
  const arr = this.labels as DlConfusionMatrixLabel[]
@@ -306,12 +306,6 @@ export default defineComponent({
306
306
  '--general-color': this.getCellBackground()
307
307
  }
308
308
  },
309
- tooltipStyles(): Record<string, number | string> {
310
- return {
311
- left: `${this.tooltipState?.x + 10}px`,
312
- top: `${this.tooltipState?.y + 15}px`
313
- }
314
- },
315
309
  gradationValues(): number[] {
316
310
  return this.normalized
317
311
  ? [1, 0.8, 0.6, 0.4, 0.2, 0]
@@ -385,28 +379,6 @@ export default defineComponent({
385
379
  const target = e.target as HTMLElement
386
380
  ;(this.$refs.yAxisOuter as HTMLElement).scroll(0, target.scrollTop)
387
381
  },
388
- handleShowTooltip(cell: DlConfusionMatrixCell, e: MouseEvent) {
389
- this.showTooltip(this, cell, e)
390
- },
391
- handleHideTooltip() {
392
- this.hideTooltip(this)
393
- },
394
- showTooltip: debounce(
395
- (ctx: any, cell: DlConfusionMatrixCell, e: MouseEvent) => {
396
- ctx.tooltipState = {
397
- value: ctx.normalized ? cell.value : cell.unnormalizedValue,
398
- xLabel: cell.xLabel,
399
- yLabel: cell.yLabel,
400
- x: e.x,
401
- y: e.y,
402
- visible: true
403
- }
404
- },
405
- 200
406
- ),
407
- hideTooltip: debounce((ctx: any) => {
408
- if (ctx?.tooltipState) ctx.tooltipState.visible = false
409
- }, 200),
410
382
  openLink(cell: DlConfusionMatrixCell) {
411
383
  if (!cell.link) return
412
384
  window.open(cell.link, '_blank')
@@ -546,16 +518,22 @@ export default defineComponent({
546
518
  }
547
519
 
548
520
  .matrix-tooltip {
549
- position: absolute;
550
- border: 1px solid var(--dl-color-separator);
551
- padding: 8px;
552
- font-size: 0.8em;
553
- display: flex;
554
- flex-direction: column;
555
- background-color: var(--dl-color-shadow);
556
- color: var(--dl-color-tooltip-background);
557
- border-radius: 3px;
558
- animation: fadeIn 0.4s;
521
+ --dl-tooltip-padding: 0px;
522
+
523
+ &__body {
524
+ border: 1px solid var(--dl-color-separator);
525
+ padding: 8px;
526
+ font-size: 10px;
527
+ line-height: 12px;
528
+ display: flex;
529
+ flex-direction: column;
530
+ gap: 2px;
531
+ }
532
+
533
+ &__value {
534
+ display: flex;
535
+ align-items: center;
536
+ }
559
537
 
560
538
  &__color {
561
539
  display: inline-block;
package/src/components/shared/DlTooltip/DlTooltip.vue CHANGED
@@ -424,7 +424,8 @@ export default defineComponent({
424
424
  '--dl-tooltip-text-align': props.textAlignment,
425
425
  '--dl-tooltip-text-transform': props.capitalized
426
426
  ? 'capitalize'
427
- : 'none'
427
+ : 'none',
428
+ '--dl-tooltip-padding': '--dl-tooltip-padding'
428
429
  }
429
430
  ] as any
430
431
  }