@divami-artefacts/ai-design-system 1.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/LICENSE +21 -0
- package/README.md +315 -0
- package/dist/canvas/CanvasTooltip.d.ts +13 -0
- package/dist/canvas/CausalFlowCanvas.d.ts +16 -0
- package/dist/canvas/canvasUtils.d.ts +38 -0
- package/dist/canvas/easing.d.ts +23 -0
- package/dist/canvas/useCanvasInteraction.d.ts +45 -0
- package/dist/canvas/useCanvasLoop.d.ts +19 -0
- package/dist/components/areaChart/AreaChart.d.ts +2 -0
- package/dist/components/barChart/BarChart.d.ts +2 -0
- package/dist/components/chartFrame/ChartFrame.d.ts +2 -0
- package/dist/components/commitmentRace/CommitmentRace.d.ts +2 -0
- package/dist/components/commitmentRace/index.d.ts +2 -0
- package/dist/components/commitmentRace/styles.d.ts +1 -0
- package/dist/components/commitmentRace/types.d.ts +5 -0
- package/dist/components/common/SeriesChart.d.ts +2 -0
- package/dist/components/compensationGauge/CompensationGauge.d.ts +2 -0
- package/dist/components/compensationGauge/index.d.ts +2 -0
- package/dist/components/compensationGauge/styles.d.ts +1 -0
- package/dist/components/compensationGauge/types.d.ts +6 -0
- package/dist/components/constants.d.ts +6 -0
- package/dist/components/contractBars/ContractBars.d.ts +2 -0
- package/dist/components/contractBars/index.d.ts +2 -0
- package/dist/components/contractBars/styles.d.ts +1 -0
- package/dist/components/contractBars/types.d.ts +5 -0
- package/dist/components/contractValueOrb/ContractValueOrb.d.ts +2 -0
- package/dist/components/contractValueOrb/index.d.ts +2 -0
- package/dist/components/contractValueOrb/styles.d.ts +1 -0
- package/dist/components/contractValueOrb/types.d.ts +5 -0
- package/dist/components/contractorRank/ContractorRank.d.ts +2 -0
- package/dist/components/contractorRank/index.d.ts +2 -0
- package/dist/components/contractorRank/styles.d.ts +1 -0
- package/dist/components/contractorRank/types.d.ts +5 -0
- package/dist/components/donutChart/DonutChart.d.ts +2 -0
- package/dist/components/ewCategory/EWCategory.d.ts +2 -0
- package/dist/components/ewCategory/index.d.ts +2 -0
- package/dist/components/ewCategory/styles.d.ts +1 -0
- package/dist/components/ewCategory/types.d.ts +5 -0
- package/dist/components/hooks/useWorkspace.d.ts +6 -0
- package/dist/components/keyHighlights/KeyHighlights.d.ts +4 -0
- package/dist/components/lineChart/LineChart.d.ts +2 -0
- package/dist/components/miniBars/MiniBars.d.ts +2 -0
- package/dist/components/nceTree/NCETree.d.ts +2 -0
- package/dist/components/nceTree/index.d.ts +2 -0
- package/dist/components/nceTree/styles.d.ts +1 -0
- package/dist/components/nceTree/types.d.ts +6 -0
- package/dist/components/pieChart/PieChart.d.ts +2 -0
- package/dist/components/quotationBalance/QuotationBalance.d.ts +2 -0
- package/dist/components/quotationBalance/index.d.ts +2 -0
- package/dist/components/quotationBalance/styles.d.ts +1 -0
- package/dist/components/quotationBalance/types.d.ts +6 -0
- package/dist/components/quotationTrend/QuotationTrend.d.ts +2 -0
- package/dist/components/quotationTrend/index.d.ts +2 -0
- package/dist/components/quotationTrend/styles.d.ts +1 -0
- package/dist/components/quotationTrend/types.d.ts +5 -0
- package/dist/components/sankey/ProcessSankey.d.ts +2 -0
- package/dist/components/sankey/RankingSankey.d.ts +2 -0
- package/dist/components/sankey/SankeySvg.d.ts +2 -0
- package/dist/components/sankey/index.d.ts +3 -0
- package/dist/components/severityBands/SeverityBands.d.ts +2 -0
- package/dist/components/severityBands/index.d.ts +2 -0
- package/dist/components/severityBands/styles.d.ts +1 -0
- package/dist/components/severityBands/types.d.ts +5 -0
- package/dist/components/statusArc/StatusArc.d.ts +2 -0
- package/dist/components/statusArc/index.d.ts +2 -0
- package/dist/components/statusArc/styles.d.ts +1 -0
- package/dist/components/statusArc/types.d.ts +9 -0
- package/dist/components/trendChart/TrendChart.d.ts +2 -0
- package/dist/components/variationSplit/VariationSplit.d.ts +2 -0
- package/dist/components/variationSplit/index.d.ts +2 -0
- package/dist/components/variationSplit/styles.d.ts +1 -0
- package/dist/components/variationSplit/types.d.ts +5 -0
- package/dist/components/visualizationRenderer/VisualizationRenderer.d.ts +2 -0
- package/dist/components/weeklyFlow/WeeklyFlow.d.ts +2 -0
- package/dist/components/weeklyFlow/index.d.ts +2 -0
- package/dist/components/weeklyFlow/styles.d.ts +1 -0
- package/dist/components/weeklyFlow/types.d.ts +5 -0
- package/dist/components/workspaceShell/WorkspaceShell.d.ts +1 -0
- package/dist/hooks/useWorkspace.d.ts +6 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +3019 -0
- package/dist/mocks/workspace.mock.d.ts +378 -0
- package/dist/pages/chartGallery/ChartGalleryPage.d.ts +1 -0
- package/dist/pages/projectDashboard/ProjectDashboardPage.d.ts +1 -0
- package/dist/pages/projectDashboard/index.d.ts +2 -0
- package/dist/pages/projectDashboard/styles.d.ts +4 -0
- package/dist/pages/projectDashboard/types.d.ts +3 -0
- package/dist/pages/workspace/WorkspacePage.d.ts +1 -0
- package/dist/types/index.d.ts +344 -0
- package/dist/utils/mounts.d.ts +4 -0
- package/dist/utils/workspace.utils.d.ts +17 -0
- package/package.json +53 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Divami Design Labs
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
# @divami_artefacts/ai-design-system
|
|
2
|
+
|
|
3
|
+
A React component library of data visualization widgets — charts, sankey diagrams, highlights, and a universal `VisualizationRenderer` — built with Vite and TypeScript.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @divami_artefacts/ai-design-system
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer dependencies
|
|
14
|
+
|
|
15
|
+
Make sure your project has these installed:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install react react-dom
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Setup
|
|
24
|
+
|
|
25
|
+
Import the stylesheet once in your app entry (e.g. `main.tsx`):
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import '@divami_artefacts/ai-design-system/styles';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## Components
|
|
34
|
+
|
|
35
|
+
### `VisualizationRenderer` — Universal renderer
|
|
36
|
+
|
|
37
|
+
The easiest way to render any chart. Pass a typed `config` object and it picks the right component automatically.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { VisualizationRenderer } from '@divami_artefacts/ai-design-system';
|
|
41
|
+
|
|
42
|
+
// Bar / Line / Area / Pie / Donut
|
|
43
|
+
<VisualizationRenderer config={{ type: 'bar', rows: [{ vendor: 'Alpha', pricing: 120 }] }} />
|
|
44
|
+
<VisualizationRenderer config={{ type: 'line', rows: [{ vendor: 'Q1', pricing: 80 }] }} />
|
|
45
|
+
<VisualizationRenderer config={{ type: 'area', rows: [{ vendor: 'Q1', pricing: 80 }] }} />
|
|
46
|
+
<VisualizationRenderer config={{ type: 'pie', rows: [{ vendor: 'Alpha', pricing: 40 }] }} />
|
|
47
|
+
<VisualizationRenderer config={{ type: 'donut', rows: [{ vendor: 'Alpha', pricing: 40 }] }} />
|
|
48
|
+
|
|
49
|
+
// Trend sparkline
|
|
50
|
+
<VisualizationRenderer config={{ type: 'trend', points: [['Jan', 10], ['Feb', 20]] }} />
|
|
51
|
+
|
|
52
|
+
// Mini bars
|
|
53
|
+
<VisualizationRenderer config={{ type: 'mini-bars', rows: [['Alpha', 80, '#4f8ef7']] }} />
|
|
54
|
+
|
|
55
|
+
// Sankey (ranked)
|
|
56
|
+
<VisualizationRenderer config={{ type: 'sankey', rows: [{ vendor: 'Alpha', pricing: 120 }] }} />
|
|
57
|
+
|
|
58
|
+
// Causal flow sankey
|
|
59
|
+
<VisualizationRenderer config={{ type: 'flow', selectedEntity: 'Alpha' }} />
|
|
60
|
+
|
|
61
|
+
// Optional className for sizing
|
|
62
|
+
<VisualizationRenderer config={{ type: 'bar', rows: [] }} className="h-64 w-full" />
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
**`config` type reference:**
|
|
66
|
+
|
|
67
|
+
| `type` | Required fields |
|
|
68
|
+
| ------------------- | ------------------------------------------------------------ |
|
|
69
|
+
| `line / area / bar / pie / donut / sankey` | `rows: VizRow[]` |
|
|
70
|
+
| `trend` | `points: PointPair[]` |
|
|
71
|
+
| `mini-bars` | `rows: MiniBarRow[]` |
|
|
72
|
+
| `flow` | `selectedEntity?: string \| null` |
|
|
73
|
+
| `contract-value-orb` | `data: ContractData` |
|
|
74
|
+
| `contract-bars` | `contractors: ContractorRow[]` |
|
|
75
|
+
| `commitment-race` | `contractors: ContractorRow[]` |
|
|
76
|
+
| `status-arc` | `segments: EWStatusRow[]; title?: string` |
|
|
77
|
+
| `ew-category` | `categories: EWCategoryRow[]; title?: string` |
|
|
78
|
+
| `contractor-rank` | `contractors: EWOpenContractorRow[]; title?: string` |
|
|
79
|
+
| `severity-bands` | `severities: EWSeverityRow[]; title?: string` |
|
|
80
|
+
| `nce-tree` | `total: number; byContractor: NCEContractorRow[]` |
|
|
81
|
+
| `compensation-gauge` | `pct: number; confirmed: number; total: number` |
|
|
82
|
+
| `variation-split` | `contractors: VariationRow[]` |
|
|
83
|
+
| `quotation-balance` | `accepted: QuotationSide; submitted: QuotationSide` |
|
|
84
|
+
| `quotation-trend` | `trend: QuotationTrendPoint[]` |
|
|
85
|
+
| `weekly-flow` | `contractors: ContractorRow[]` |
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
### `BarChart`
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import { BarChart } from '@divami_artefacts/ai-design-system';
|
|
93
|
+
|
|
94
|
+
<BarChart
|
|
95
|
+
rows={[
|
|
96
|
+
{ vendor: 'Alpha Corp', pricing: 120 },
|
|
97
|
+
{ vendor: 'Beta Ltd', pricing: 85 },
|
|
98
|
+
]}
|
|
99
|
+
colors={{ bars: ['#4f8ef7', '#a78bfa'], axisLine: '#e5e7eb' }}
|
|
100
|
+
className="h-48"
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
| Prop | Type | Description |
|
|
105
|
+
| ----------- | ----------------- | ------------------------------- |
|
|
106
|
+
| `rows` | `VizRow[]` | Data rows `{ vendor, pricing }` |
|
|
107
|
+
| `colors` | `BarChartColors` | Optional color overrides |
|
|
108
|
+
| `className` | `string` | CSS class for sizing |
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
### `LineChart` / `AreaChart`
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
import { LineChart, AreaChart } from '@divami_artefacts/ai-design-system';
|
|
116
|
+
|
|
117
|
+
<LineChart rows={[{ vendor: 'Jan', pricing: 40 }, { vendor: 'Feb', pricing: 60 }]} />
|
|
118
|
+
<AreaChart rows={[{ vendor: 'Jan', pricing: 40 }, { vendor: 'Feb', pricing: 60 }]} />
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
| Prop | Type | Description |
|
|
122
|
+
| -------- | -------------------- | ------------------------ |
|
|
123
|
+
| `rows` | `VizRow[]` | Data rows |
|
|
124
|
+
| `colors` | `SeriesChartColors` | `line`, `areaFill`, etc. |
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
### `PieChart` / `DonutChart`
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import { PieChart, DonutChart } from '@divami_artefacts/ai-design-system';
|
|
132
|
+
|
|
133
|
+
<PieChart variant="pie" rows={[{ vendor: 'A', pricing: 60 }, { vendor: 'B', pricing: 40 }]} />
|
|
134
|
+
<DonutChart rows={[{ vendor: 'A', pricing: 60 }, { vendor: 'B', pricing: 40 }]} />
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
### `TrendChart`
|
|
140
|
+
|
|
141
|
+
Sparkline-style trend line.
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
import { TrendChart } from '@divami_artefacts/ai-design-system';
|
|
145
|
+
|
|
146
|
+
<TrendChart
|
|
147
|
+
points={[['Week 1', 10], ['Week 2', 18], ['Week 3', 14], ['Week 4', 22]]}
|
|
148
|
+
colors={{ line: '#4f8ef7', point: '#fff' }}
|
|
149
|
+
/>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
### `MiniBars`
|
|
155
|
+
|
|
156
|
+
Compact horizontal bar list.
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
import { MiniBars } from '@divami_artefacts/ai-design-system';
|
|
160
|
+
|
|
161
|
+
// MiniBarRow = [label, value, color]
|
|
162
|
+
<MiniBars rows={[
|
|
163
|
+
['Alpha', 80, '#4f8ef7'],
|
|
164
|
+
['Beta', 55, '#a78bfa'],
|
|
165
|
+
]} />
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
### `ProcessSankey` / `RankingSankey` / `SankeySvg`
|
|
171
|
+
|
|
172
|
+
```tsx
|
|
173
|
+
import { ProcessSankey, RankingSankey, SankeySvg } from '@divami_artefacts/ai-design-system';
|
|
174
|
+
|
|
175
|
+
// Flow sankey driven by an entity selection
|
|
176
|
+
<ProcessSankey selectedEntity="Alpha Corp" />
|
|
177
|
+
|
|
178
|
+
// Ranked sankey from VizRow data
|
|
179
|
+
<RankingSankey rows={[{ vendor: 'Alpha', pricing: 120 }]} />
|
|
180
|
+
|
|
181
|
+
// Raw SVG sankey with full node/link control
|
|
182
|
+
<SankeySvg
|
|
183
|
+
ariaLabel="Project cost flow"
|
|
184
|
+
nodes={[{ id: 'a', name: 'Alpha' }, { id: 'b', name: 'Beta' }]}
|
|
185
|
+
links={[{ source: 'a', target: 'b', value: 100 }]}
|
|
186
|
+
width={600}
|
|
187
|
+
height={400}
|
|
188
|
+
/>
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
### `SeriesChart`
|
|
194
|
+
|
|
195
|
+
Combined line/area chart with a `variant` prop.
|
|
196
|
+
|
|
197
|
+
```tsx
|
|
198
|
+
import { SeriesChart } from '@divami_artefacts/ai-design-system';
|
|
199
|
+
|
|
200
|
+
<SeriesChart variant="line" rows={[{ vendor: 'Jan', pricing: 50 }]} />
|
|
201
|
+
<SeriesChart variant="area" rows={[{ vendor: 'Jan', pricing: 50 }]} />
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
### `KeyHighlights`
|
|
207
|
+
|
|
208
|
+
Renders a rich highlight block — supports stat chips, badges, dots, flags, comparison tables, and scorecards.
|
|
209
|
+
|
|
210
|
+
```tsx
|
|
211
|
+
import { KeyHighlights } from '@divami_artefacts/ai-design-system';
|
|
212
|
+
import type { KeyHighlightBlock } from '@divami_artefacts/ai-design-system';
|
|
213
|
+
|
|
214
|
+
const block: KeyHighlightBlock = {
|
|
215
|
+
type: 'stat',
|
|
216
|
+
title: 'Total Contracts',
|
|
217
|
+
value: '142',
|
|
218
|
+
chips: [
|
|
219
|
+
{ value: '+12', label: 'this month', color: 'green' },
|
|
220
|
+
],
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
<KeyHighlights block={block} />
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
### `ChartFrame`
|
|
229
|
+
|
|
230
|
+
A simple wrapper that provides consistent padding/sizing for any custom chart content.
|
|
231
|
+
|
|
232
|
+
```tsx
|
|
233
|
+
import { ChartFrame } from '@divami_artefacts/ai-design-system';
|
|
234
|
+
|
|
235
|
+
<ChartFrame className="h-64">
|
|
236
|
+
<p>Custom content</p>
|
|
237
|
+
</ChartFrame>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## Utility Functions
|
|
243
|
+
|
|
244
|
+
### `hydrateVisualizationMounts`
|
|
245
|
+
|
|
246
|
+
Renders `VisualizationRenderer` into all DOM elements that have a `data-visualization` attribute — useful for server-rendered or CMS pages.
|
|
247
|
+
|
|
248
|
+
```ts
|
|
249
|
+
import { hydrateVisualizationMounts } from '@divami_artefacts/ai-design-system';
|
|
250
|
+
|
|
251
|
+
// Call after the DOM is ready
|
|
252
|
+
hydrateVisualizationMounts();
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
Add to your HTML:
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<div data-visualization='{"type":"bar","rows":[{"vendor":"Alpha","pricing":100}]}'></div>
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### `serializeVisualizationConfig`
|
|
262
|
+
|
|
263
|
+
Safely serializes a config object into a `data-visualization` attribute string.
|
|
264
|
+
|
|
265
|
+
```ts
|
|
266
|
+
import { serializeVisualizationConfig } from '@divami_artefacts/ai-design-system';
|
|
267
|
+
|
|
268
|
+
const attr = serializeVisualizationConfig({ type: 'bar', rows: [] });
|
|
269
|
+
// → '{"type":"bar","rows":[]}'
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
### `cleanupVisualizationMounts`
|
|
273
|
+
|
|
274
|
+
Unmounts all hydrated visualization roots. Call before navigating away or on component unmount.
|
|
275
|
+
|
|
276
|
+
```ts
|
|
277
|
+
import { cleanupVisualizationMounts } from '@divami_artefacts/ai-design-system';
|
|
278
|
+
|
|
279
|
+
cleanupVisualizationMounts();
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
284
|
+
## Type Exports
|
|
285
|
+
|
|
286
|
+
All shared types are re-exported for use in consuming projects:
|
|
287
|
+
|
|
288
|
+
```ts
|
|
289
|
+
import type {
|
|
290
|
+
BaseVisualizationConfig,
|
|
291
|
+
VizRow,
|
|
292
|
+
PointPair,
|
|
293
|
+
MiniBarRow,
|
|
294
|
+
SankeyNodeData,
|
|
295
|
+
SankeyLinkData,
|
|
296
|
+
KeyHighlightBlock,
|
|
297
|
+
} from '@divami_artefacts/ai-design-system';
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
---
|
|
301
|
+
|
|
302
|
+
## Building the library
|
|
303
|
+
|
|
304
|
+
```bash
|
|
305
|
+
npm run build:lib # outputs to dist/
|
|
306
|
+
npm pack # creates .tgz for distribution
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
---
|
|
310
|
+
|
|
311
|
+
## License
|
|
312
|
+
|
|
313
|
+
MIT © Divami Design Labs
|
|
314
|
+
|
|
315
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { TooltipState } from './useCanvasInteraction';
|
|
2
|
+
interface CanvasTooltipProps extends TooltipState {
|
|
3
|
+
parentW?: number;
|
|
4
|
+
parentH?: number;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* DOM-based tooltip overlay for canvas visualizations.
|
|
8
|
+
* Render as a sibling inside a position:relative wrapper around the canvas.
|
|
9
|
+
* Dynamic position is applied imperatively via useLayoutEffect to avoid
|
|
10
|
+
* inline style props while still updating each frame.
|
|
11
|
+
*/
|
|
12
|
+
export declare function CanvasTooltip({ visible, x, y, content, parentW }: CanvasTooltipProps): import("react/jsx-runtime").JSX.Element | null;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SankeyNodeData, SankeyLinkData } from '../types';
|
|
2
|
+
export interface CausalFlowCanvasProps {
|
|
3
|
+
nodes: SankeyNodeData[];
|
|
4
|
+
links: SankeyLinkData[];
|
|
5
|
+
width?: number;
|
|
6
|
+
height?: number;
|
|
7
|
+
selectedEntity?: string | null;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Canvas-based causal flow diagram.
|
|
11
|
+
* Adapted from enterprise-brain/src/canvas/CausalCanvas.jsx.
|
|
12
|
+
*
|
|
13
|
+
* Renders circular nodes at organic scattered positions connected by
|
|
14
|
+
* animated bezier curves with confidence badges and flowing particles.
|
|
15
|
+
*/
|
|
16
|
+
export declare function CausalFlowCanvas({ nodes, links, width, height, selectedEntity, }: CausalFlowCanvasProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared canvas drawing utilities and color helpers.
|
|
3
|
+
* Ported from enterprise-brain/src/canvas/utils.js + theme/tokens.js
|
|
4
|
+
*/
|
|
5
|
+
export declare const CC: {
|
|
6
|
+
readonly bg: "#070B12";
|
|
7
|
+
readonly bgL: "#0C1420";
|
|
8
|
+
readonly sf: "#111B28";
|
|
9
|
+
readonly bd: "#1C2D42";
|
|
10
|
+
readonly blue: "#3B8BF6";
|
|
11
|
+
readonly cyan: "#22D3EE";
|
|
12
|
+
readonly orange: "#F0813A";
|
|
13
|
+
readonly red: "#F06060";
|
|
14
|
+
readonly green: "#34D399";
|
|
15
|
+
readonly purple: "#A78BFA";
|
|
16
|
+
readonly amber: "#FBBF24";
|
|
17
|
+
readonly t1: "#F1F5F9";
|
|
18
|
+
readonly t2: "#94A3B8";
|
|
19
|
+
readonly t3: "#64748B";
|
|
20
|
+
readonly t4: "#334155";
|
|
21
|
+
};
|
|
22
|
+
export declare const PALETTE: ("#3B8BF6" | "#22D3EE" | "#F06060" | "#34D399" | "#A78BFA" | "#FBBF24")[];
|
|
23
|
+
/** Convert hex + alpha to rgba string */
|
|
24
|
+
export declare function rgb(hex: string, alpha?: number): string;
|
|
25
|
+
/** Linear interpolation between two values */
|
|
26
|
+
export declare function lerp(a: number, b: number, t: number): number;
|
|
27
|
+
/** Linear interpolation between two hex colors */
|
|
28
|
+
export declare function lerpC(hex1: string, hex2: string, t: number): string;
|
|
29
|
+
/** Setup canvas with DPR scaling, returns context */
|
|
30
|
+
export declare function setupCanvas(canvas: HTMLCanvasElement, w: number, h: number, dpr?: number): CanvasRenderingContext2D;
|
|
31
|
+
/** Draw a radial gradient glow (cheaper than ctx.shadowBlur) */
|
|
32
|
+
export declare function drawGlow(ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, color: string, alpha?: number): void;
|
|
33
|
+
/** Draw ambient floating dust particles */
|
|
34
|
+
export declare function drawDust(ctx: CanvasRenderingContext2D, w: number, h: number, T: number, count?: number, color?: string): void;
|
|
35
|
+
/** Draw subtle horizontal scanlines for cinematic feel */
|
|
36
|
+
export declare function drawScanline(ctx: CanvasRenderingContext2D, w: number, h: number, T: number, alpha?: number): void;
|
|
37
|
+
/** Draw a vertical dashed crosshair line */
|
|
38
|
+
export declare function drawCrosshair(ctx: CanvasRenderingContext2D, x: number, top: number, bottom: number, color?: string): void;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Easing functions and animation utilities for canvas visualizations.
|
|
3
|
+
* Ported from enterprise-brain/src/canvas/easing.js
|
|
4
|
+
*/
|
|
5
|
+
export declare const easeOutCubic: (t: number) => number;
|
|
6
|
+
export declare const easeOutQuart: (t: number) => number;
|
|
7
|
+
export declare const easeOutExpo: (t: number) => number;
|
|
8
|
+
export declare const easeInOutCubic: (t: number) => number;
|
|
9
|
+
export declare const easeOutBack: (t: number) => number;
|
|
10
|
+
/** Damped sine pulse — decays toward zero over time */
|
|
11
|
+
export declare const dampedPulse: (T: number, freq?: number, decay?: number) => number;
|
|
12
|
+
/** Smooth looping pulse (no decay) */
|
|
13
|
+
export declare const smoothPulse: (T: number, freq?: number, amplitude?: number) => number;
|
|
14
|
+
/**
|
|
15
|
+
* Returns eased progress for item `i` of `n` total, given global progress 0–1.
|
|
16
|
+
* Items start with a staggered delay from each other.
|
|
17
|
+
*/
|
|
18
|
+
export declare const stagger: (progress: number, i: number, n: number, ease?: (t: number) => number) => number;
|
|
19
|
+
/**
|
|
20
|
+
* Smoothly animates hover progress values toward their targets (0 or 1).
|
|
21
|
+
* Call once per frame inside the draw loop.
|
|
22
|
+
*/
|
|
23
|
+
export declare function tickHoverProgress(hoverMap: Map<string, number>, hoveredId: string | null, speed?: number): void;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
export interface TooltipContent {
|
|
2
|
+
label?: string;
|
|
3
|
+
value: string;
|
|
4
|
+
sublabel?: string;
|
|
5
|
+
color?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface TooltipState {
|
|
8
|
+
visible: boolean;
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
content: TooltipContent | string | null;
|
|
12
|
+
}
|
|
13
|
+
interface HitZone {
|
|
14
|
+
id: string;
|
|
15
|
+
data: TooltipContent | string;
|
|
16
|
+
test: (x: number, y: number) => boolean;
|
|
17
|
+
}
|
|
18
|
+
interface MouseState {
|
|
19
|
+
x: number;
|
|
20
|
+
y: number;
|
|
21
|
+
over: boolean;
|
|
22
|
+
}
|
|
23
|
+
interface UseCanvasInteractionOptions {
|
|
24
|
+
width: number;
|
|
25
|
+
height: number;
|
|
26
|
+
onClick?: (id: string, data: TooltipContent | string) => void;
|
|
27
|
+
enabled?: boolean;
|
|
28
|
+
}
|
|
29
|
+
interface UseCanvasInteractionReturn {
|
|
30
|
+
mouseRef: React.MutableRefObject<MouseState>;
|
|
31
|
+
hoveredRef: React.MutableRefObject<string | null>;
|
|
32
|
+
tooltip: TooltipState;
|
|
33
|
+
showTooltip: (x: number, y: number, content: TooltipContent | string) => void;
|
|
34
|
+
hideTooltip: () => void;
|
|
35
|
+
hitZonesRef: React.MutableRefObject<HitZone[]>;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Canvas interaction hook — mouse tracking, hit-testing, tooltip, click.
|
|
39
|
+
* Uses refs (not state) for mouse position to avoid 60 re-renders/sec.
|
|
40
|
+
* Ported from enterprise-brain/src/hooks/useCanvasInteraction.js
|
|
41
|
+
*/
|
|
42
|
+
export declare function useCanvasInteraction(canvasRef: React.RefObject<HTMLCanvasElement | null>, { width, height, onClick, enabled }: UseCanvasInteractionOptions): UseCanvasInteractionReturn;
|
|
43
|
+
export declare function registerHitCircle(zones: HitZone[], id: string, cx: number, cy: number, radius: number, data: TooltipContent | string): void;
|
|
44
|
+
export declare function registerHitRect(zones: HitZone[], id: string, x: number, y: number, w: number, h: number, data: TooltipContent | string): void;
|
|
45
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
type DrawFn = (ctx: CanvasRenderingContext2D, progress: number, frame: number) => void;
|
|
2
|
+
type EasingFn = (t: number) => number;
|
|
3
|
+
interface CanvasLoopOptions {
|
|
4
|
+
easing?: EasingFn;
|
|
5
|
+
durationFrames?: number;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Canvas animation loop hook with DPR scaling and eased entrance progress.
|
|
9
|
+
* Ported from enterprise-brain/src/hooks/useCanvasLoop.js
|
|
10
|
+
*
|
|
11
|
+
* @param canvasRef - ref to the <canvas> element
|
|
12
|
+
* @param width - logical canvas width (CSS pixels)
|
|
13
|
+
* @param height - logical canvas height (CSS pixels)
|
|
14
|
+
* @param drawFn - (ctx, progress 0–1, frameNumber) => void
|
|
15
|
+
* @param animate - when true, plays entrance animation from progress 0→1
|
|
16
|
+
* @param opts - { easing, durationFrames }
|
|
17
|
+
*/
|
|
18
|
+
export declare function useCanvasLoop(canvasRef: React.RefObject<HTMLCanvasElement | null>, width: number, height: number, drawFn: DrawFn, animate?: boolean, opts?: CanvasLoopOptions): void;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const containerStyle: React.CSSProperties;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const containerStyle: React.CSSProperties;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const containerStyle: React.CSSProperties;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const orbContainer: React.CSSProperties;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const containerStyle: React.CSSProperties;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const containerStyle: React.CSSProperties;
|