universal-adaptive-bars 0.0.1
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.
- package/README.md +110 -0
- package/dist/smart-bar-chart.js +3863 -0
- package/dist/smart-bar-chart.umd.cjs +20 -0
- package/dist/vite.svg +1 -0
- package/package.json +72 -0
- package/src/lib/SmartBarChart.tsx +526 -0
- package/src/lib/SmartBarChartNative.tsx +528 -0
- package/src/lib/__tests__/SmartBarChart.test.tsx +69 -0
- package/src/lib/components/Bar.tsx +49 -0
- package/src/lib/components/BarNative.tsx +44 -0
- package/src/lib/components/Tooltip.tsx +35 -0
- package/src/lib/components/TooltipNative.tsx +60 -0
- package/src/lib/hooks/useChartData.ts +212 -0
- package/src/lib/index.ts +2 -0
- package/src/lib/native.ts +1 -0
- package/src/lib/services/gemini.ts +79 -0
- package/src/lib/types.ts +64 -0
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# Universal Adaptive Bars 📊
|
|
2
|
+
|
|
3
|
+
A highly customizable, interactive, and drill-down capable Bar Chart library for **React** and **React Native**.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- 📅 **Time-based Drill Down**: Navigate seamlessly continuously from **Year** -> **Month** -> **Week** -> **Day**.
|
|
11
|
+
- 🎨 **Deep Customization**: Full control over colors, grid, axis, and bar styling via the `theme` prop.
|
|
12
|
+
- 📱 **React Native Support**: First-class support for Mobile via `react-native-svg`.
|
|
13
|
+
- 🥞 **Stacked Bars**: Support for multi-value data keys (Histogram style).
|
|
14
|
+
- ♿ **Accessible**: ARIA support for Web and Accessibility Props for Native.
|
|
15
|
+
- 🤖 **AI Ready**: Integrated interfaces for predictive analytics.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install universal-adaptive-bars date-fns d3-scale clsx tailwind-merge
|
|
21
|
+
# Peer Dependencies for React Native
|
|
22
|
+
# npm install react-native-svg
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Usage (Web)
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { SmartBarChart, DataPoint } from 'smart-bar-chart';
|
|
29
|
+
|
|
30
|
+
const data = [
|
|
31
|
+
{ date: '2023-01-01', value: 100, label: 'Jan' },
|
|
32
|
+
{ date: '2023-02-01', value: 200, label: 'Feb' },
|
|
33
|
+
// ...
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
function App() {
|
|
37
|
+
return (
|
|
38
|
+
<SmartBarChart
|
|
39
|
+
data={data}
|
|
40
|
+
view="month"
|
|
41
|
+
dataKeys={{ label: 'label', value: 'value', date: 'date' }}
|
|
42
|
+
axisLabels={{ x: 'Date', y: 'Revenue' }}
|
|
43
|
+
height={400}
|
|
44
|
+
theme={{
|
|
45
|
+
background: '#fff',
|
|
46
|
+
bar: { radius: 4, opacity: 1 },
|
|
47
|
+
grid: { stroke: '#eee', visible: true }
|
|
48
|
+
}}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Usage (React Native)
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { SmartBarChartNative } from 'smart-bar-chart/native';
|
|
58
|
+
|
|
59
|
+
// ... usage is identical to Web component
|
|
60
|
+
<SmartBarChartNative
|
|
61
|
+
data={data}
|
|
62
|
+
view="month"
|
|
63
|
+
dataKeys={{ label: 'label', value: 'value', date: 'date' }}
|
|
64
|
+
/>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Props
|
|
68
|
+
|
|
69
|
+
| Prop | Type | Description |
|
|
70
|
+
|------|------|-------------|
|
|
71
|
+
| `data` | `RawDataPoint[]` | Array of data objects. |
|
|
72
|
+
| `view` | `'day' \| 'week' \| 'month' \| 'year'` | Initial aggregation level. |
|
|
73
|
+
| `dataKeys` | `{ label: string, value: string \| string[], date: string }` | Keys to map data fields. |
|
|
74
|
+
| `theme` | `ChartTheme` | Custom styling object. |
|
|
75
|
+
| `onViewChange` | `(view: ChartView) => void` | Callback when drill-down occurs. |
|
|
76
|
+
| `geminiConfig` | `{ apiKey: string, model: string }` | Configuration for AI predictions. |
|
|
77
|
+
|
|
78
|
+
## Customization (Theme)
|
|
79
|
+
|
|
80
|
+
The `theme` prop allows you to override default styles:
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
interface ChartTheme {
|
|
84
|
+
background?: string;
|
|
85
|
+
bar?: {
|
|
86
|
+
radius?: number;
|
|
87
|
+
opacity?: number;
|
|
88
|
+
maxWidth?: number;
|
|
89
|
+
};
|
|
90
|
+
grid?: {
|
|
91
|
+
stroke?: string;
|
|
92
|
+
strokeDasharray?: string;
|
|
93
|
+
visible?: boolean;
|
|
94
|
+
};
|
|
95
|
+
axis?: {
|
|
96
|
+
labelColor?: string;
|
|
97
|
+
tickColor?: string;
|
|
98
|
+
fontSize?: number;
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Accessibility
|
|
104
|
+
|
|
105
|
+
- **Web**: Main chart has `role="img"` and proper ARIA labels. Bars are interactive.
|
|
106
|
+
- **Native**: Elements support `accessibilityLabel` and `accessibilityHint` compatible with TalkBack and VoiceOver.
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
Built with ❤️ using React & D3.
|