Skip to content

Commit 4637c36

Browse files
niklavsBarissniklavsBariss
committed
Update README
1 parent fbd1c61 commit 4637c36

1 file changed

Lines changed: 141 additions & 14 deletions

File tree

‎README.md‎

Lines changed: 141 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -105,20 +105,25 @@ export default function App() {
105105

106106
### Chart Props
107107

108-
| Prop | Type | Required | Description |
109-
| ------------------ | ----------------- | -------- | ---------------------------------------------------------------------------------- |
110-
| `width` | `number` | ✅ | Chart width in pixels |
111-
| `height` | `number` | ✅ | Chart height in pixels |
112-
| `datasets` | `Dataset[]` | ✅ | Array of data series to display |
113-
| `colors` | `ChartColors` | ✅ | Color configuration for chart elements |
114-
| `timeDomain` | `TimeDomain` | ✅ | Control intial zoom level / scale of X-axis, doesn't have to fit the whole dataset |
115-
| `noDataString` | `string` | ✅ | Message to show when no data is available |
116-
| `zoomEnabled` | `boolean` | ❌ | Enable zoom guesture |
117-
| `locale` | `string` | ❌ | Locale for date/time formatting (default: 'en') |
118-
| `marginHorizontal` | `number` | ❌ | Horizontal margin in pixels |
119-
| `calendarStrings` | `CalendarStrings` | ❌ | Custom calendar strings for localization |
120-
| `onZoomStarted` | `() => void` | ❌ | Callback when zoom interaction starts |
121-
| `onZoomEnded` | `() => void` | ❌ | Callback when zoom interaction ends |
108+
| Prop | Type | Required | Description |
109+
| ------------------------ | ------------------------------------- | -------- | ---------------------------------------------------------------------------------- |
110+
| `width` | `number` | ✅ | Chart width in pixels |
111+
| `height` | `number` | ✅ | Chart height in pixels |
112+
| `datasets` | `Dataset[]` | ✅ | Array of data series to display |
113+
| `colors` | `ChartColors` | ✅ | Color configuration for chart elements |
114+
| `timeDomain` | `TimeDomain` | ✅ | Control intial zoom level / scale of X-axis, doesn't have to fit the whole dataset |
115+
| `noDataString` | `string` | ✅ | Message to show when no data is available |
116+
| `zoomEnabled` | `boolean` | ❌ | Enable zoom guesture |
117+
| `locale` | `string` | ❌ | Locale for date/time formatting (default: 'en') |
118+
| `marginHorizontal` | `number` | ❌ | Horizontal margin in pixels |
119+
| `highlightPosition` | `number` | ❌ | Position of highlight line (0-1, default: 0.5 for center) |
120+
| `highlightValuePosition` | `'top' \| 'tooltip' \| 'none'` | ❌ | Where to show values: header, floating tooltip, or hidden (default: 'top') |
121+
| `xDividerConfig` | `XDividerConfig` | ❌ | Style for vertical dividers on X axis (ticks or segments) |
122+
| `errorSegments` | `ErrorSegment[]` | ❌ | Time ranges with error messages to display |
123+
| `calendarStrings` | `CalendarStrings` | ❌ | Custom calendar strings for localization |
124+
| `onZoomStarted` | `() => void` | ❌ | Callback when zoom interaction starts |
125+
| `onZoomEnded` | `() => void` | ❌ | Callback when zoom interaction ends |
126+
| `onHighlightChanged` | `(payload: HighlightPayload) => void` | ❌ | Callback when highlight position changes with current values |
122127

123128
### Types
124129

@@ -207,8 +212,130 @@ type CalendarStrings = {
207212
}
208213
```
209214
215+
#### ErrorSegment
216+
217+
```typescript
218+
type ErrorSegment = {
219+
message: string // Error message to display
220+
messageColor: string // Color for the error message
221+
start: number // Start timestamp (ms)
222+
end: number // End timestamp (ms)
223+
}
224+
```
225+
226+
#### XDividerConfig
227+
228+
```typescript
229+
// Option 1: Tick style (lines extending from labels)
230+
type XDividerTick = {
231+
type: 'tick'
232+
color?: string // Defaults to ChartColors.border
233+
strokeWidth?: number // Defaults to 0.5
234+
strokeDasharray?: string // Defaults to '2,2'
235+
}
236+
237+
// Option 2: Segment style (alternating full-height segments)
238+
type XDividerSegment = {
239+
type: 'segment'
240+
variant?: 'hour' | 'day' | { dynamicThreshold: number } // Defaults to dynamic
241+
color?: string // Defaults to '#FBFBFC' with gradient
242+
}
243+
244+
type XDividerConfig = XDividerTick | XDividerSegment
245+
```
246+
247+
#### HighlightPayload
248+
249+
```typescript
250+
type HighlightPayload = {
251+
timestamp: number // Exact timestamp at highlight position
252+
values: Array<{
253+
value: number | null // Data value at this point
254+
timestamp: number // Point timestamp
255+
color: string // Dataset color
256+
errorMessage: string | null // Error message if in error segment
257+
measurementName: string // Dataset name
258+
} | null> // null if dataset has no data at this position
259+
}
260+
```
261+
210262
## Advanced Usage
211263
264+
### Highlight Position and Value Display
265+
266+
Control where the vertical highlight line appears and how values are displayed:
267+
268+
```tsx
269+
<Chart
270+
// ... other props
271+
highlightPosition={0.7} // Position from 0 (left) to 1 (right), default: 0.5 (center)
272+
highlightValuePosition="tooltip" // 'top' (header), 'tooltip' (floating box), or 'none'
273+
onHighlightChanged={useCallback((payload) => {
274+
console.log('Current timestamp:', payload.timestamp)
275+
console.log('Values:', payload.values)
276+
}, [])}
277+
/>
278+
```
279+
280+
**Highlight value position modes:**
281+
282+
- `'top'` (default): Shows values in the chart header area
283+
- `'tooltip'`: Displays a floating tooltip box near the highlight line
284+
- `'none'`: Hides value display, useful with `onHighlightChanged` for custom UI
285+
286+
### X-Axis Dividers
287+
288+
Customize the vertical grid lines on the X-axis:
289+
290+
```tsx
291+
// Dashed tick lines (default style)
292+
<Chart
293+
xDividerConfig={{
294+
type: 'tick',
295+
color: '#999',
296+
strokeWidth: 1,
297+
strokeDasharray: '4,4',
298+
}}
299+
/>
300+
301+
// Alternating background segments
302+
<Chart
303+
xDividerConfig={{
304+
type: 'segment',
305+
variant: 'hour', // or 'day' or { dynamicThreshold: 95040000 }
306+
color: '#F5F5F5',
307+
}}
308+
/>
309+
```
310+
311+
**Segment variants:**
312+
313+
- `'hour'`: Every other hour has a background segment
314+
- `'day'`: Every other day has a background segment
315+
- `{ dynamicThreshold: number }`: Auto-switches between hour/day based on visible time range
316+
317+
### Error Segments
318+
319+
Display error messages and highlight problematic time ranges:
320+
321+
```tsx
322+
const errorSegments = [
323+
{
324+
message: 'Sensor offline',
325+
messageColor: '#FF0000',
326+
start: Date.now() - 3600000,
327+
end: Date.now() - 1800000,
328+
},
329+
]
330+
331+
<Chart
332+
// ... other props
333+
errorSegments={errorSegments}
334+
/>
335+
```
336+
337+
Data points within error segments will show the error message instead of values, and the background will be highlighted.
338+
212339
### Multiple Datasets
213340

214341
```tsx

0 commit comments

Comments
 (0)