@opendata-ai/openchart-engine 2.9.1 → 2.11.0

package/src/annotations/compute.ts

@@ -24,7 +24,7 @@ import type {
   TextAnnotation,
   TextStyle,
 } from '@opendata-ai/openchart-core';
-import { estimateTextWidth } from '@opendata-ai/openchart-core';
+import { detectCollision, estimateTextWidth } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import type { NormalizedChartSpec } from '../compiler/types';
 import type { ResolvedScales } from '../layout/scales';
@@ -549,14 +549,43 @@ function estimateLabelBounds(label: ResolvedLabel): Rect {
   return computeTextBounds(label.x, label.y, label.text, fontSize, fontWeight);
 }
 
-/** Check if two rects overlap. */
-function rectsOverlap(a: Rect, b: Rect): boolean {
-  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-}
-
 /** Padding between annotation and obstacle when nudging. */
 const NUDGE_PADDING = 6;
 
+/**
+ * Generate candidate displacement vectors to move `selfBounds` clear of each
+ * obstacle in 4 directions (below, above, left, right), sorted by smallest
+ * movement first.
+ */
+function generateNudgeCandidates(
+  selfBounds: Rect,
+  obstacles: Rect[],
+  padding: number,
+): { dx: number; dy: number; distance: number }[] {
+  const candidates: { dx: number; dy: number; distance: number }[] = [];
+
+  for (const obs of obstacles) {
+    // Below: shift self so its top edge clears the obstacle bottom
+    const belowDy = obs.y + obs.height + padding - selfBounds.y;
+    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
+
+    // Above: shift self so its bottom edge clears the obstacle top
+    const aboveDy = obs.y - padding - (selfBounds.y + selfBounds.height);
+    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
+
+    // Left: shift self so its right edge clears the obstacle left
+    const leftDx = obs.x - padding - (selfBounds.x + selfBounds.width);
+    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
+
+    // Right: shift self so its left edge clears the obstacle right
+    const rightDx = obs.x + obs.width + padding - selfBounds.x;
+    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
+  }
+
+  candidates.sort((a, b) => a.distance - b.distance);
+  return candidates;
+}
+
 /**
  * Try to reposition a text annotation to avoid overlapping with obstacle rects
  * (legend bounds, etc.). First tries standard anchor alternatives, then
@@ -573,7 +602,7 @@ function nudgeAnnotationFromObstacles(
 
   const labelBounds = estimateLabelBounds(annotation.label);
   const collidingObs = obstacles.filter(
-    (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(labelBounds, obs),
+    (obs) => obs.width > 0 && obs.height > 0 && detectCollision(labelBounds, obs),
   );
 
   if (collidingObs.length === 0) return false;
@@ -583,39 +612,9 @@ function nudgeAnnotationFromObstacles(
   const py = resolvePosition(originalAnnotation.y, scales.y);
   if (px === null || py === null) return false;
 
-  // Generate candidate positions: calculated offsets to clear each obstacle
-  const candidates: { dx: number; dy: number; distance: number }[] = [];
+  const candidates = generateNudgeCandidates(labelBounds, collidingObs, NUDGE_PADDING);
   const fontSize = labelBounds.height / Math.max(1, annotation.label.text.split('\n').length);
 
-  for (const obs of collidingObs) {
-    // Below obstacle: shift label so its top edge clears the obstacle bottom
-    const currentLabelTop = labelBounds.y;
-    const targetLabelTop = obs.y + obs.height + NUDGE_PADDING;
-    const belowDy = targetLabelTop - currentLabelTop;
-    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
-
-    // Above obstacle: shift label so its bottom edge clears the obstacle top
-    const currentLabelBottom = labelBounds.y + labelBounds.height;
-    const targetLabelBottom = obs.y - NUDGE_PADDING;
-    const aboveDy = targetLabelBottom - currentLabelBottom;
-    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
-
-    // Left of obstacle: shift label so its right edge clears the obstacle left
-    const currentLabelRight = labelBounds.x + labelBounds.width;
-    const targetLabelRight = obs.x - NUDGE_PADDING;
-    const leftDx = targetLabelRight - currentLabelRight;
-    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
-
-    // Right of obstacle: shift label so its left edge clears the obstacle right
-    const currentLabelLeft = labelBounds.x;
-    const targetLabelLeft = obs.x + obs.width + NUDGE_PADDING;
-    const rightDx = targetLabelLeft - currentLabelLeft;
-    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
-  }
-
-  // Sort candidates by distance (prefer smallest movement)
-  candidates.sort((a, b) => a.distance - b.distance);
-
   for (const { dx, dy } of candidates) {
     const newLabelX = annotation.label.x + dx;
     const newLabelY = annotation.label.y + dy;
@@ -651,7 +650,7 @@ function nudgeAnnotationFromObstacles(
 
     // Check no collisions with any obstacle
     const stillCollides = obstacles.some(
-      (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(candidateBounds, obs),
+      (obs) => obs.width > 0 && obs.height > 0 && detectCollision(candidateBounds, obs),
     );
     if (stillCollides) continue;
 
@@ -660,11 +659,14 @@ function nudgeAnnotationFromObstacles(
     // the text doesn't go completely off-screen.
     const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
     const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
+    // Allow nudged labels to extend into the chrome region below the chart
+    // (source/footer area) since annotations near the bottom edge often
+    // need to shift into that space to avoid marks or the brand watermark.
     const inBounds =
       labelCenterX >= chartArea.x &&
       labelCenterX <= chartArea.x + chartArea.width + 100 &&
       labelCenterY >= chartArea.y - fontSize &&
-      labelCenterY <= chartArea.y + chartArea.height + fontSize;
+      labelCenterY <= chartArea.y + chartArea.height + fontSize * 3;
 
     if (inBounds) {
       // When nudged vertically (directly above/below the data), use a caret
@@ -683,6 +685,117 @@ function nudgeAnnotationFromObstacles(
   return false;
 }
 
+// ---------------------------------------------------------------------------
+// Annotation-to-annotation collision resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve collisions between text annotation labels using a greedy algorithm.
+ *
+ * Iterates through text annotations in order, building a list of "placed"
+ * bounding rects. When a later annotation overlaps an already-placed one,
+ * it tries offset positions (below, above, left, right) to find a
+ * non-colliding spot. Recomputes the connector origin after nudging.
+ */
+function resolveAnnotationCollisions(
+  annotations: ResolvedAnnotation[],
+  originalSpecs: NormalizedChartSpec['annotations'],
+  scales: ResolvedScales,
+  chartArea: Rect,
+): void {
+  const placedBounds: Rect[] = [];
+
+  for (let i = 0; i < annotations.length; i++) {
+    const annotation = annotations[i];
+    if (annotation.type !== 'text' || !annotation.label) {
+      continue;
+    }
+
+    const bounds = estimateLabelBounds(annotation.label);
+
+    // Check against all previously placed annotation labels
+    const collidingBounds = placedBounds.filter(
+      (pb) => pb.width > 0 && pb.height > 0 && detectCollision(bounds, pb),
+    );
+
+    if (collidingBounds.length > 0) {
+      // Find the original spec to get data point coordinates for connector recomputation
+      const originalSpec = originalSpecs[i];
+
+      if (originalSpec?.type === 'text') {
+        const px = resolvePosition(originalSpec.x, scales.x);
+        const py = resolvePosition(originalSpec.y, scales.y);
+
+        if (px !== null && py !== null) {
+          const candidates = generateNudgeCandidates(bounds, collidingBounds, NUDGE_PADDING);
+          const fontSize = bounds.height / Math.max(1, annotation.label.text.split('\n').length);
+
+          for (const { dx, dy } of candidates) {
+            const newLabelX = annotation.label.x + dx;
+            const newLabelY = annotation.label.y + dy;
+
+            const candidateLabel: ResolvedLabel = {
+              ...annotation.label,
+              x: newLabelX,
+              y: newLabelY,
+            };
+            const candidateBounds = estimateLabelBounds(candidateLabel);
+
+            // Check no collisions with any placed label
+            const stillCollides = placedBounds.some(
+              (pb) => pb.width > 0 && pb.height > 0 && detectCollision(candidateBounds, pb),
+            );
+            if (stillCollides) continue;
+
+            // Check the label center stays reasonably in bounds
+            const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
+            const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
+            const inBounds =
+              labelCenterX >= chartArea.x &&
+              labelCenterX <= chartArea.x + chartArea.width + 100 &&
+              labelCenterY >= chartArea.y - fontSize &&
+              labelCenterY <= chartArea.y + chartArea.height + fontSize;
+
+            if (inBounds) {
+              // Recompute connector origin for the new position
+              let newConnector = annotation.label.connector;
+              if (newConnector) {
+                const annFontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+                const annFontWeight =
+                  annotation.label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+                const connStyle =
+                  newConnector.style === 'curve' ? ('curve' as const) : ('straight' as const);
+                const newFrom = computeConnectorOrigin(
+                  newLabelX,
+                  newLabelY,
+                  annotation.label.text,
+                  annFontSize,
+                  annFontWeight,
+                  px,
+                  py,
+                  connStyle,
+                );
+                newConnector = { ...newConnector, from: newFrom };
+              }
+
+              annotation.label = {
+                ...annotation.label,
+                x: newLabelX,
+                y: newLabelY,
+                connector: newConnector,
+              };
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    // Add this annotation's final bounds to the placed list
+    placedBounds.push(estimateLabelBounds(annotation.label));
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -696,7 +809,8 @@ function nudgeAnnotationFromObstacles(
  *
  * When obstacle rects are provided (e.g. legend bounds), text annotations
  * that overlap with them are automatically repositioned using alternate
- * anchor directions.
+ * anchor directions. After individual obstacle avoidance, annotation-to-
+ * annotation collisions are resolved using a greedy placement algorithm.
  */
 export function computeAnnotations(
   spec: NormalizedChartSpec,
@@ -737,6 +851,9 @@ export function computeAnnotations(
     }
   }
 
+  // Resolve annotation-to-annotation collisions (greedy, order-preserving)
+  resolveAnnotationCollisions(annotations, spec.annotations, scales, chartArea);
+
   // Sort by zIndex (lower first, undefined treated as 0)
   annotations.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
 

package/src/charts/column/__tests__/labels.test.ts

@@ -0,0 +1,104 @@
+import type { RectMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeColumnLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea = { x: 0, y: 0, width: 400, height: 300 };
+
+function makeMark(index: number, value: number): RectMark {
+  const height = Math.abs(value) * 5;
+  const y = value >= 0 ? 300 - height : 300;
+  return {
+    type: 'rect',
+    x: index * 80,
+    y,
+    width: 60,
+    height,
+    fill: '#4e79a7',
+    data: { category: `Cat${index}`, value },
+    aria: { label: `Cat${index}: ${value}` },
+  };
+}
+
+const marks: RectMark[] = [
+  makeMark(0, 10),
+  makeMark(1, 20),
+  makeMark(2, 30),
+  makeMark(3, 40),
+  makeMark(4, 50),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computeColumnLabels density modes', () => {
+  it('density "auto" runs collision detection and produces labels', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'auto');
+    expect(labels.length).toBeGreaterThan(0);
+    expect(labels.every((l) => typeof l.visible === 'boolean')).toBe(true);
+  });
+
+  it('density "all" shows every label as visible', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'all');
+    expect(labels).toHaveLength(marks.length);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('density "none" returns empty array', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'none');
+    expect(labels).toHaveLength(0);
+  });
+
+  it('density "endpoints" returns only first and last labels', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'endpoints');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('10');
+    expect(labels[1].text).toBe('50');
+  });
+
+  it('density "endpoints" with single mark returns that mark', () => {
+    const labels = computeColumnLabels([marks[0]], chartArea, 'endpoints');
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('10');
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computeColumnLabels(marks, chartArea, 'auto');
+    const withDefault = computeColumnLabels(marks, chartArea);
+    expect(withDefault.length).toBe(withAuto.length);
+  });
+});
+
+describe('computeColumnLabels positioning', () => {
+  it('places positive value labels above the column', () => {
+    const labels = computeColumnLabels([makeMark(0, 20)], chartArea, 'all');
+    expect(labels).toHaveLength(1);
+    const mark = makeMark(0, 20);
+    // Label y should be above the column top
+    expect(labels[0].y).toBeLessThan(mark.y);
+  });
+
+  it('places negative value labels below the column', () => {
+    const negativeMark = makeMark(0, -15);
+    const labels = computeColumnLabels([negativeMark], chartArea, 'all');
+    expect(labels).toHaveLength(1);
+    // Label y should be below the column bottom
+    expect(labels[0].y).toBeGreaterThan(negativeMark.y + negativeMark.height);
+  });
+
+  it('centers labels horizontally on the column', () => {
+    const labels = computeColumnLabels([makeMark(0, 20)], chartArea, 'all');
+    const mark = makeMark(0, 20);
+    const markCenter = mark.x + mark.width / 2;
+    expect(labels[0].x).toBe(markCenter);
+  });
+
+  it('applies labelFormat to numeric values', () => {
+    const labels = computeColumnLabels([makeMark(0, 1234)], chartArea, 'all', ',.0f');
+    expect(labels[0].text).toBe('1,234');
+  });
+});

package/src/charts/dot/__tests__/labels.test.ts

@@ -0,0 +1,98 @@
+import type { PointMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeDotLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea = { x: 0, y: 0, width: 400, height: 300 };
+
+function makeMark(index: number, value: number): PointMark {
+  return {
+    type: 'point',
+    cx: value * 5,
+    cy: index * 40 + 20,
+    r: 6,
+    fill: '#4e79a7',
+    stroke: '#4e79a7',
+    strokeWidth: 1,
+    data: { category: `Cat${index}`, value },
+    aria: { label: `Cat${index}: ${value}` },
+  };
+}
+
+const marks: PointMark[] = [
+  makeMark(0, 10),
+  makeMark(1, 20),
+  makeMark(2, 30),
+  makeMark(3, 40),
+  makeMark(4, 50),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computeDotLabels density modes', () => {
+  it('density "auto" runs collision detection and produces labels', () => {
+    const labels = computeDotLabels(marks, chartArea, 'auto');
+    expect(labels.length).toBeGreaterThan(0);
+    expect(labels.every((l) => typeof l.visible === 'boolean')).toBe(true);
+  });
+
+  it('density "all" shows every label as visible', () => {
+    const labels = computeDotLabels(marks, chartArea, 'all');
+    expect(labels).toHaveLength(marks.length);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('density "none" returns empty array', () => {
+    const labels = computeDotLabels(marks, chartArea, 'none');
+    expect(labels).toHaveLength(0);
+  });
+
+  it('density "endpoints" returns only first and last labels', () => {
+    const labels = computeDotLabels(marks, chartArea, 'endpoints');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('10');
+    expect(labels[1].text).toBe('50');
+  });
+
+  it('density "endpoints" with single mark returns that mark', () => {
+    const labels = computeDotLabels([marks[0]], chartArea, 'endpoints');
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('10');
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computeDotLabels(marks, chartArea, 'auto');
+    const withDefault = computeDotLabels(marks, chartArea);
+    expect(withDefault.length).toBe(withAuto.length);
+  });
+});
+
+describe('computeDotLabels positioning', () => {
+  it('places labels to the right of the dot', () => {
+    const labels = computeDotLabels([marks[0]], chartArea, 'all');
+    expect(labels).toHaveLength(1);
+    // Label x should be to the right of the dot center + radius
+    expect(labels[0].x).toBeGreaterThan(marks[0].cx + marks[0].r);
+  });
+
+  it('vertically centers labels on the dot', () => {
+    const labels = computeDotLabels([marks[0]], chartArea, 'all');
+    const textHeight = 11 * 1.2; // LABEL_FONT_SIZE * 1.2
+    // Label y should be roughly centered on the dot's cy
+    expect(labels[0].y).toBeCloseTo(marks[0].cy - textHeight / 2, 0);
+  });
+
+  it('returns empty for marks with no parseable value', () => {
+    const badMark: PointMark = {
+      ...marks[0],
+      aria: { label: 'no-colon-here' },
+    };
+    const labels = computeDotLabels([badMark], chartArea, 'all');
+    expect(labels).toHaveLength(0);
+  });
+});

package/src/charts/pie/__tests__/labels.test.ts

@@ -0,0 +1,132 @@
+import type { ArcMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computePieLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea = { x: 0, y: 0, width: 400, height: 400 };
+const center = { x: 200, y: 200 };
+const outerRadius = 150;
+
+function makeArc(category: string, value: number, startAngle: number, endAngle: number): ArcMark {
+  const midAngle = (startAngle + endAngle) / 2;
+  const centroidRadius = outerRadius * 0.6;
+  return {
+    type: 'arc',
+    path: '', // SVG path not needed for label computation
+    centroid: {
+      x: center.x + Math.sin(midAngle) * centroidRadius,
+      y: center.y - Math.cos(midAngle) * centroidRadius,
+    },
+    center,
+    innerRadius: 0,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill: '#4e79a7',
+    stroke: '#ffffff',
+    strokeWidth: 2,
+    data: { category, value },
+    aria: { label: `${category}: ${value} (${Math.round(value)}%)` },
+  };
+}
+
+// Three slices: top-right, bottom-right, left
+const marks: ArcMark[] = [
+  makeArc('Alpha', 50, 0, Math.PI * 0.8),
+  makeArc('Beta', 30, Math.PI * 0.8, Math.PI * 1.4),
+  makeArc('Gamma', 20, Math.PI * 1.4, Math.PI * 2),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computePieLabels density modes', () => {
+  it('density "auto" runs collision detection and produces labels', () => {
+    const labels = computePieLabels(marks, chartArea, 'auto');
+    expect(labels.length).toBeGreaterThan(0);
+    expect(labels.every((l) => typeof l.visible === 'boolean')).toBe(true);
+  });
+
+  it('density "all" shows every label as visible', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    expect(labels).toHaveLength(marks.length);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('density "none" returns empty array', () => {
+    const labels = computePieLabels(marks, chartArea, 'none');
+    expect(labels).toHaveLength(0);
+  });
+
+  it('density "endpoints" returns only first and last labels', () => {
+    const labels = computePieLabels(marks, chartArea, 'endpoints');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('Alpha');
+    expect(labels[1].text).toBe('Gamma');
+  });
+
+  it('density "endpoints" with single mark returns that mark', () => {
+    const labels = computePieLabels([marks[0]], chartArea, 'endpoints');
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('Alpha');
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computePieLabels(marks, chartArea, 'auto');
+    const withDefault = computePieLabels(marks, chartArea);
+    expect(withDefault.length).toBe(withAuto.length);
+  });
+
+  it('returns empty for empty marks array', () => {
+    const labels = computePieLabels([], chartArea, 'all');
+    expect(labels).toHaveLength(0);
+  });
+});
+
+describe('computePieLabels positioning', () => {
+  it('labels use category name (not value) as text', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    expect(labels[0].text).toBe('Alpha');
+    expect(labels[1].text).toBe('Beta');
+    expect(labels[2].text).toBe('Gamma');
+  });
+
+  it('labels are positioned outside the outer radius', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    for (const label of labels) {
+      const dx = label.x - center.x;
+      const dy = label.y - center.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      // Label should be at least at the outer radius distance from center
+      // (accounting for text width offset, the anchor point may vary)
+      expect(dist).toBeGreaterThan(outerRadius * 0.5);
+    }
+  });
+
+  it('visible labels have connector lines to centroid', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    const visibleLabels = labels.filter((l) => l.visible);
+    for (const label of visibleLabels) {
+      expect(label.connector).toBeDefined();
+      expect(label.connector!.from).toEqual({ x: label.x, y: label.y });
+      expect(label.connector!.to).toBeDefined();
+      expect(label.connector!.stroke).toBeDefined();
+    }
+  });
+
+  it('right-side labels use "start" text anchor', () => {
+    // First mark (0 to 0.8*PI) has midAngle ~0.4*PI, sin > 0 => right side
+    const labels = computePieLabels([marks[0]], chartArea, 'all');
+    expect(labels[0].style.textAnchor).toBe('start');
+  });
+
+  it('left-side labels use "end" text anchor', () => {
+    // Third mark (1.4*PI to 2*PI) has midAngle ~1.7*PI, sin(1.7*PI) < 0 => left side
+    const labels = computePieLabels([marks[2]], chartArea, 'all');
+    expect(labels[0].style.textAnchor).toBe('end');
+  });
+});