@teamflojo/floimg-d3 0.1.0 → 0.2.0
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 +23 -23
- package/dist/index.d.ts +1 -1
- package/package.json +12 -11
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
#
|
|
1
|
+
# floimg-d3
|
|
2
2
|
|
|
3
|
-
D3 data visualization generator for
|
|
3
|
+
D3 data visualization generator for floimg using server-side rendering.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install
|
|
8
|
+
npm install @teamflojo/floimg @teamflojo/floimg-d3
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
|
-
import createClient from '
|
|
15
|
-
import d3viz from '
|
|
14
|
+
import createClient from '@teamflojo/floimg';
|
|
15
|
+
import d3viz from '@teamflojo/floimg-d3';
|
|
16
16
|
|
|
17
|
-
const
|
|
18
|
-
|
|
17
|
+
const floimg = createClient();
|
|
18
|
+
floimg.registerGenerator(d3viz());
|
|
19
19
|
|
|
20
20
|
// Create a bar chart
|
|
21
|
-
const chart = await
|
|
21
|
+
const chart = await floimg.generate({
|
|
22
22
|
generator: 'd3',
|
|
23
23
|
params: {
|
|
24
24
|
width: 600,
|
|
@@ -45,7 +45,7 @@ const chart = await imgflo.generate({
|
|
|
45
45
|
});
|
|
46
46
|
|
|
47
47
|
// Upload to S3
|
|
48
|
-
await
|
|
48
|
+
await floimg.save(chart, './output/bar.svg');
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
## Examples
|
|
@@ -53,7 +53,7 @@ await imgflo.save(chart, './output/bar.svg');
|
|
|
53
53
|
### Bar Chart
|
|
54
54
|
|
|
55
55
|
```typescript
|
|
56
|
-
const barChart = await
|
|
56
|
+
const barChart = await floimg.generate({
|
|
57
57
|
generator: 'd3',
|
|
58
58
|
params: {
|
|
59
59
|
width: 800,
|
|
@@ -104,7 +104,7 @@ const barChart = await imgflo.generate({
|
|
|
104
104
|
### Line Chart
|
|
105
105
|
|
|
106
106
|
```typescript
|
|
107
|
-
const lineChart = await
|
|
107
|
+
const lineChart = await floimg.generate({
|
|
108
108
|
generator: 'd3',
|
|
109
109
|
params: {
|
|
110
110
|
width: 800,
|
|
@@ -158,7 +158,7 @@ const lineChart = await imgflo.generate({
|
|
|
158
158
|
### Pie Chart
|
|
159
159
|
|
|
160
160
|
```typescript
|
|
161
|
-
const pieChart = await
|
|
161
|
+
const pieChart = await floimg.generate({
|
|
162
162
|
generator: 'd3',
|
|
163
163
|
params: {
|
|
164
164
|
width: 500,
|
|
@@ -207,7 +207,7 @@ const pieChart = await imgflo.generate({
|
|
|
207
207
|
### Scatter Plot
|
|
208
208
|
|
|
209
209
|
```typescript
|
|
210
|
-
const scatterPlot = await
|
|
210
|
+
const scatterPlot = await floimg.generate({
|
|
211
211
|
generator: 'd3',
|
|
212
212
|
params: {
|
|
213
213
|
width: 600,
|
|
@@ -258,7 +258,7 @@ const scatterPlot = await imgflo.generate({
|
|
|
258
258
|
### Area Chart
|
|
259
259
|
|
|
260
260
|
```typescript
|
|
261
|
-
const areaChart = await
|
|
261
|
+
const areaChart = await floimg.generate({
|
|
262
262
|
generator: 'd3',
|
|
263
263
|
params: {
|
|
264
264
|
width: 800,
|
|
@@ -312,7 +312,7 @@ const areaChart = await imgflo.generate({
|
|
|
312
312
|
### Heatmap
|
|
313
313
|
|
|
314
314
|
```typescript
|
|
315
|
-
const heatmap = await
|
|
315
|
+
const heatmap = await floimg.generate({
|
|
316
316
|
generator: 'd3',
|
|
317
317
|
params: {
|
|
318
318
|
width: 600,
|
|
@@ -369,7 +369,7 @@ const heatmap = await imgflo.generate({
|
|
|
369
369
|
## Configuration
|
|
370
370
|
|
|
371
371
|
```typescript
|
|
372
|
-
|
|
372
|
+
floimg.registerGenerator(d3viz({
|
|
373
373
|
width: 1000, // Default width
|
|
374
374
|
height: 600, // Default height
|
|
375
375
|
backgroundColor: '#f0f0f0' // Default background
|
|
@@ -403,9 +403,9 @@ For full D3 capabilities and examples:
|
|
|
403
403
|
```typescript
|
|
404
404
|
// Generate multiple charts for a report
|
|
405
405
|
const charts = await Promise.all([
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
406
|
+
floimg.generate({ generator: 'd3', params: salesChartConfig }),
|
|
407
|
+
floimg.generate({ generator: 'd3', params: revenueChartConfig }),
|
|
408
|
+
floimg.generate({ generator: 'd3', params: growthChartConfig })
|
|
409
409
|
]);
|
|
410
410
|
```
|
|
411
411
|
|
|
@@ -415,14 +415,14 @@ const charts = await Promise.all([
|
|
|
415
415
|
// Update charts with live data
|
|
416
416
|
setInterval(async () => {
|
|
417
417
|
const liveData = await fetchLiveData();
|
|
418
|
-
const chart = await
|
|
418
|
+
const chart = await floimg.generate({
|
|
419
419
|
generator: 'd3',
|
|
420
420
|
params: {
|
|
421
421
|
render: createChartRenderer(),
|
|
422
422
|
data: liveData
|
|
423
423
|
}
|
|
424
424
|
});
|
|
425
|
-
await
|
|
425
|
+
await floimg.save(chart, './output/dashboard-live.svg');
|
|
426
426
|
}, 60000);
|
|
427
427
|
```
|
|
428
428
|
|
|
@@ -431,7 +431,7 @@ setInterval(async () => {
|
|
|
431
431
|
```typescript
|
|
432
432
|
app.get('/api/chart/:type', async (req, res) => {
|
|
433
433
|
const data = await fetchData(req.params.type);
|
|
434
|
-
const chart = await
|
|
434
|
+
const chart = await floimg.generate({
|
|
435
435
|
generator: 'd3',
|
|
436
436
|
params: { render: getRenderer(req.params.type), data }
|
|
437
437
|
});
|
|
@@ -445,5 +445,5 @@ MIT
|
|
|
445
445
|
|
|
446
446
|
## See Also
|
|
447
447
|
|
|
448
|
-
- [
|
|
448
|
+
- [floimg](https://github.com/bcooke/floimg) - Core library
|
|
449
449
|
- [D3.js](https://d3js.org/) - Data visualization library
|
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export declare const d3Schema: GeneratorSchema;
|
|
|
8
8
|
*
|
|
9
9
|
* This generator accepts D3 code directly (pass-through pattern).
|
|
10
10
|
* You provide a render function that uses D3 to create visualizations.
|
|
11
|
-
* No
|
|
11
|
+
* No floimg abstraction - you get full D3 capabilities.
|
|
12
12
|
*
|
|
13
13
|
* @see https://d3js.org/ - D3 documentation
|
|
14
14
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teamflojo/floimg-d3",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "D3 data visualization generator for floimg using server-side rendering",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -16,6 +16,14 @@
|
|
|
16
16
|
"README.md",
|
|
17
17
|
"LICENSE"
|
|
18
18
|
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "tsc",
|
|
21
|
+
"dev": "tsc --watch",
|
|
22
|
+
"test": "vitest",
|
|
23
|
+
"typecheck": "tsc --noEmit",
|
|
24
|
+
"clean": "rm -rf dist",
|
|
25
|
+
"prepublishOnly": "npm run build"
|
|
26
|
+
},
|
|
19
27
|
"keywords": [
|
|
20
28
|
"floimg",
|
|
21
29
|
"d3",
|
|
@@ -42,18 +50,11 @@
|
|
|
42
50
|
"@types/d3": "^7.4.3",
|
|
43
51
|
"@types/jsdom": "^21.1.7",
|
|
44
52
|
"@types/node": "^22.10.2",
|
|
53
|
+
"@teamflojo/floimg": "workspace:*",
|
|
45
54
|
"typescript": "^5.7.2",
|
|
46
|
-
"vitest": "^2.1.8"
|
|
47
|
-
"@teamflojo/floimg": "0.1.0"
|
|
55
|
+
"vitest": "^2.1.8"
|
|
48
56
|
},
|
|
49
57
|
"engines": {
|
|
50
58
|
"node": ">=18.0.0"
|
|
51
|
-
},
|
|
52
|
-
"scripts": {
|
|
53
|
-
"build": "tsc",
|
|
54
|
-
"dev": "tsc --watch",
|
|
55
|
-
"test": "vitest",
|
|
56
|
-
"typecheck": "tsc --noEmit",
|
|
57
|
-
"clean": "rm -rf dist"
|
|
58
59
|
}
|
|
59
|
-
}
|
|
60
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 Brett Cooke
|
|
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.
|