docs(Docs): update API method

Author: SimbiozizV

docs/Axes.md

@@ -148,7 +148,6 @@ const timeline = new Timeline({
   },
   viewConfiguration: {
     axes: {
-      trackHeight: 30,
       lineWidth: 1,
       color: {
         line: '#e0e0e0'
@@ -188,8 +187,6 @@ const timeline = new Timeline({
   },
   viewConfiguration: {
     axes: {
-      // Customize axis appearance
-      trackHeight: 40,
       lineWidth: 2,
       color: {
         line: '#b0b0b0'
@@ -220,17 +217,16 @@ constructor(api: CanvasApi) {
 
 ### Track Position Calculation
 
-Track positions are calculated based on the axis configuration and visual settings:
+Track positions are calculated based on the axis configuration (each axis has its own `height` per track):
 
 ```typescript
 public getAxisTrackPosition(axis: Axis, trackIndex: number): number {
   if (!axis || axis.tracksCount < 0) {
     throw new Error("Invalid axis configuration");
   }
 
-  const { axes } = this.api.getVisualConfiguration();
   const index = clamp(trackIndex, 0, axis.tracksCount - 1);
-  return axis.top + axes.trackHeight * index + axes.trackHeight / 2;
+  return axis.top + axis.height * index + axis.height / 2;
 }
 ```
 
@@ -240,7 +236,7 @@ The rendering process handles both straight and dashed line modes:
 
 ```typescript
 public render() {
-  const { ruler, axes } = this.api.getVisualConfiguration();
+  const { axes } = this.api.getViewConfiguration();
   const { ctx } = this.api;
 
   // Set line style based on mode
@@ -250,7 +246,7 @@ public render() {
 
   // Apply scroll transform and ruler offset
   this.api.useScrollTransform();
-  ctx.translate(0, ruler.height);
+  ctx.translate(0, this.api.getRulerHeight());
 
   // Render tracks for each axis
   ctx.strokeStyle = axes.color.line;
@@ -279,7 +275,7 @@ public render() {
 
 2. **Visual Customization**
    - Choose appropriate line styles (straight/dashed)
-   - Set track heights based on content
+   - Set `height` per axis (height of each track in that axis)
    - Use consistent colors across related axes
 
 3. **Performance**

docs/CanvasApi.md

@@ -166,6 +166,8 @@ api.setMarkers([
   {
     time: Date.now() + 1800000,
     color: '#ff0000',
+    activeColor: '#ff5252',
+    hoverColor: '#ff1744',
     label: 'Important Point'
   }
 ]);
@@ -185,6 +187,37 @@ api.setSelectedEvents(['event1', 'event2']);
 **Parameters:**
 - `ids`: Array of event IDs to select
 
+#### `setSections(sections: TimelineSection[])`
+
+Updates the timeline sections.
+
+```typescript
+api.setSections([
+  {
+    id: 'section1',
+    from: Date.now(),
+    to: Date.now() + 1800000,
+    color: 'rgba(255, 193, 7, 0.2)',
+    hoverColor: 'rgba(255, 193, 7, 0.3)'
+  }
+]);
+```
+
+**Parameters:**
+- `sections`: Array of section configurations
+
+#### `setViewConfiguration(viewConfiguration: ViewConfiguration)`
+
+Updates the view configuration. **Merges with the current configuration** (does not replace it entirely).
+
+```typescript
+api.setViewConfiguration({ hideRuler: true });
+api.setViewConfiguration({ axes: { lineWidth: 2 } });
+```
+
+**Parameters:**
+- `viewConfiguration`: Partial view configuration to merge in
+
 ### Utility Methods
 
 #### `timeToPosition(t: number): number`
@@ -240,7 +273,7 @@ const duration = api.widthToTime(200);
 | `currentTime` | `number` | Current timestamp (aligned to seconds) |
 | `emit` | `Function` | Event emitter function |
 | `getInterval()` | `{ start: number; end: number }` | Current timeline range |
-| `getVisualConfiguration()` | `ViewConfigurationDefault` | Current view configuration |
+| `getViewConfiguration()` | `ViewConfigurationDefault` | Current view configuration |
 | `getTimelineSettings()` | `TimelineSettings` | Current timeline settings |
 
 ## Examples
@@ -327,7 +360,7 @@ api.setSelectedEvents(['event1']);
 // Get current timeline state
 const { start, end } = api.getInterval();
 const settings = api.getTimelineSettings();
-const config = api.getVisualConfiguration();
+const config = api.getViewConfiguration();
 ```
 
 ## Implementation Details

docs/Grid.md

@@ -172,7 +172,7 @@ private selectGridLevel(domainSize: number, canvasWidth: number): TGridLevel | n
 
     // Check if marks fit within visible area
     if (this.calculateMarksWidth(level, domainSize) > 
-        canvasWidth + this.api.getVisualConfiguration().grid.widthBuffer) {
+        canvasWidth + this.api.getViewConfiguration().grid.widthBuffer) {
       continue;
     }
 
@@ -190,7 +190,7 @@ Grid lines are rendered using the canvas 2D context:
 
 ```typescript
 private renderLevel(top: number, left: number, width: number, height: number, level: TGridLevel) {
-  const { grid } = this.api.getVisualConfiguration();
+  const { grid } = this.api.getViewConfiguration();
   const { start, end } = this.api.getInterval();
   const { ctx } = this.api;
 

docs/Ruler.md

@@ -336,7 +336,7 @@ private renderLevel(
   y: number,
   color: string,
 ) {
-  const { ruler } = this.api.getVisualConfiguration();
+  const { ruler } = this.api.getViewConfiguration();
   const { start, end } = this.api.getInterval();
   const { ctx, width } = this.api;
 

docs/docs.md

@@ -35,14 +35,14 @@ const timeline = new Timeline({
 Manages and renders timeline events with support for selection, interaction, and custom rendering.
 
 ```typescript
-// Events are managed through the Timeline instance
-timeline.settings.events = [{
+// Events are managed through the Timeline API
+timeline.api.setEvents([{
   id: '1',
   axisId: 'axis1',
   trackIndex: 0,
   from: Date.now(),
   to: Date.now() + 1800000
-}];
+}]);
 ```
 
 ### [Ruler](./Ruler.md)
@@ -176,12 +176,11 @@ const event = {
 
 Visit our [Storybook](https://preview.gravity-ui.com/timeline/) to explore interactive examples:
 
-- [Basic Timeline](https://preview.gravity-ui.com/timeline/?path=/story/basic-timeline--default)
-- [Multiple Axes](https://preview.gravity-ui.com/timeline/?path=/story/multiple-axes--default)
-- [Custom Events](https://preview.gravity-ui.com/timeline/?path=/story/custom-events--default)
-- [Markers](https://preview.gravity-ui.com/timeline/?path=/story/markers--default)
-- [Grid Customization](https://preview.gravity-ui.com/timeline/?path=/story/grid-customization--default)
-- [Ruler Customization](https://preview.gravity-ui.com/timeline/?path=/story/ruler-customization--default)
+- [Basic Timeline](https://preview.gravity-ui.com/timeline/?path=/story/timeline-events--basic) — Simple timeline with events and axes
+- [Endless Timeline](https://preview.gravity-ui.com/timeline/?path=/story/timeline-events--endless-timelines) — Endless timeline with events and axes
+- [Markers](https://preview.gravity-ui.com/timeline/?path=/story/timeline-markers--basic) — Timeline with vertical markers and labels
+- [Custom Events](https://preview.gravity-ui.com/timeline/?path=/story/timeline-events--custom-renderer) — Timeline with custom event rendering
+- [Integrations](https://preview.gravity-ui.com/timeline/?path=/story/integrations-gravity-ui--timeline-ruler) — RangeDateSelection, DragHandler, NestedEvents, Popup, List
 
 ## Best Practices