@teamflojo/floimg-quickchart 0.2.1 → 0.2.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Flojo, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,6 +2,16 @@
 
 QuickChart.io generator for floimg - create charts using Chart.js configuration.
 
+## Standing on the Shoulders of Giants
+
+This plugin is a thin wrapper around [Chart.js](https://www.chartjs.org/) via [QuickChart](https://quickchart.io/). We don't abstract or limit the underlying library—your configuration passes through directly.
+
+- **Full Chart.js power**: Every Chart.js option works
+- **Native format**: Use Chart.js config, not a FloImg abstraction
+- **Their docs are your docs**: See [Chart.js documentation](https://www.chartjs.org/docs/)
+
+FloImg orchestrates the workflow (generate → transform → save). Chart.js does what it does best.
+
 ## Installation
 
 ```bash
@@ -11,14 +21,14 @@ npm install @teamflojo/floimg @teamflojo/floimg-quickchart
 ## Usage
 
 ```typescript
-import createClient from '@teamflojo/floimg';
-import quickchart from '@teamflojo/floimg-quickchart';
+import createClient from "@teamflojo/floimg";
+import quickchart from "@teamflojo/floimg-quickchart";
 
 const floimg = createClient({
   store: {
-    default: 's3',
-    s3: { region: 'us-east-1', bucket: 'my-charts' }
-  }
+    default: "s3",
+    s3: { region: "us-east-1", bucket: "my-charts" },
+  },
 });
 
 // Register the QuickChart generator
@@ -26,30 +36,32 @@ floimg.registerGenerator(quickchart());
 
 // Generate a bar chart
 const chart = await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    type: 'bar',
+    type: "bar",
     data: {
-      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
-      datasets: [{
-        label: 'Revenue ($M)',
-        data: [12, 19, 3, 5],
-        backgroundColor: 'rgba(75, 192, 192, 0.6)'
-      }]
+      labels: ["Q1", "Q2", "Q3", "Q4"],
+      datasets: [
+        {
+          label: "Revenue ($M)",
+          data: [12, 19, 3, 5],
+          backgroundColor: "rgba(75, 192, 192, 0.6)",
+        },
+      ],
     },
     options: {
       scales: {
         y: {
-          beginAtZero: true
-        }
-      }
-    }
-  }
+          beginAtZero: true,
+        },
+      },
+    },
+  },
 });
 
 // Convert to PNG and save
-const png = await floimg.transform({ blob: chart, op: 'convert', to: 'image/png' });
-const result = await floimg.save(png, './output/revenue.png');
+const png = await floimg.transform({ blob: chart, op: "convert", to: "image/png" });
+const result = await floimg.save(png, "./output/revenue.png");
 
 console.log(result.url); // Use in slides, emails, etc.
 ```
@@ -62,14 +74,14 @@ QuickChart supports all Chart.js chart types:
 
 ```typescript
 await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    type: 'bar',
+    type: "bar",
     data: {
-      labels: ['Red', 'Blue', 'Yellow'],
-      datasets: [{ data: [12, 19, 3] }]
-    }
-  }
+      labels: ["Red", "Blue", "Yellow"],
+      datasets: [{ data: [12, 19, 3] }],
+    },
+  },
 });
 ```
 
@@ -77,19 +89,21 @@ await floimg.generate({
 
 ```typescript
 await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    type: 'line',
+    type: "line",
     data: {
-      labels: ['Jan', 'Feb', 'Mar', 'Apr'],
-      datasets: [{
-        label: 'Sales',
-        data: [10, 15, 13, 17],
-        borderColor: 'rgb(75, 192, 192)',
-        tension: 0.1
-      }]
-    }
-  }
+      labels: ["Jan", "Feb", "Mar", "Apr"],
+      datasets: [
+        {
+          label: "Sales",
+          data: [10, 15, 13, 17],
+          borderColor: "rgb(75, 192, 192)",
+          tension: 0.1,
+        },
+      ],
+    },
+  },
 });
 ```
 
@@ -97,17 +111,19 @@ await floimg.generate({
 
 ```typescript
 await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    type: 'pie',
+    type: "pie",
     data: {
-      labels: ['Desktop', 'Mobile', 'Tablet'],
-      datasets: [{
-        data: [45, 40, 15],
-        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
-      }]
-    }
-  }
+      labels: ["Desktop", "Mobile", "Tablet"],
+      datasets: [
+        {
+          data: [45, 40, 15],
+          backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
+        },
+      ],
+    },
+  },
 });
 ```
 
@@ -115,14 +131,14 @@ await floimg.generate({
 
 ```typescript
 await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    type: 'doughnut',
+    type: "doughnut",
     data: {
-      labels: ['Win', 'Loss', 'Draw'],
-      datasets: [{ data: [10, 5, 3] }]
-    }
-  }
+      labels: ["Win", "Loss", "Draw"],
+      datasets: [{ data: [10, 5, 3] }],
+    },
+  },
 });
 ```
 
@@ -131,27 +147,31 @@ await floimg.generate({
 ### Generator Options
 
 ```typescript
-floimg.registerGenerator(quickchart({
-  width: 800,              // Default width
-  height: 600,             // Default height
-  backgroundColor: 'white', // Default background
-  format: 'png',           // 'png' | 'svg' | 'webp'
-  devicePixelRatio: 2.0    // For high DPI displays
-}));
+floimg.registerGenerator(
+  quickchart({
+    width: 800, // Default width
+    height: 600, // Default height
+    backgroundColor: "white", // Default background
+    format: "png", // 'png' | 'svg' | 'webp'
+    devicePixelRatio: 2.0, // For high DPI displays
+  })
+);
 ```
 
 ### Per-Chart Overrides
 
 ```typescript
 await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    width: 1200,           // Override width
-    height: 800,           // Override height
-    backgroundColor: '#f0f0f0',
-    type: 'bar',
-    data: { /* ... */ }
-  }
+    width: 1200, // Override width
+    height: 800, // Override height
+    backgroundColor: "#f0f0f0",
+    type: "bar",
+    data: {
+      /* ... */
+    },
+  },
 });
 ```
 
@@ -170,33 +190,33 @@ Since this generator uses Chart.js format directly, refer to the official Chart.
 
 ```typescript
 await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    type: 'line',
+    type: "line",
     data: {
-      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+      labels: ["Jan", "Feb", "Mar", "Apr", "May"],
       datasets: [
         {
-          label: '2023',
+          label: "2023",
           data: [10, 15, 13, 17, 20],
-          borderColor: 'rgb(75, 192, 192)'
+          borderColor: "rgb(75, 192, 192)",
         },
         {
-          label: '2024',
+          label: "2024",
           data: [12, 17, 15, 19, 23],
-          borderColor: 'rgb(255, 99, 132)'
-        }
-      ]
+          borderColor: "rgb(255, 99, 132)",
+        },
+      ],
     },
     options: {
       plugins: {
         title: {
           display: true,
-          text: 'Sales Comparison'
-        }
-      }
-    }
-  }
+          text: "Sales Comparison",
+        },
+      },
+    },
+  },
 });
 ```
 
@@ -204,23 +224,23 @@ await floimg.generate({
 
 ```typescript
 await floimg.generate({
-  generator: 'quickchart',
+  generator: "quickchart",
   params: {
-    type: 'bar',
+    type: "bar",
     data: {
-      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+      labels: ["Q1", "Q2", "Q3", "Q4"],
       datasets: [
-        { label: 'Product A', data: [10, 15, 12, 18], backgroundColor: '#FF6384' },
-        { label: 'Product B', data: [8, 12, 10, 14], backgroundColor: '#36A2EB' }
-      ]
+        { label: "Product A", data: [10, 15, 12, 18], backgroundColor: "#FF6384" },
+        { label: "Product B", data: [8, 12, 10, 14], backgroundColor: "#36A2EB" },
+      ],
     },
     options: {
       scales: {
         x: { stacked: true },
-        y: { stacked: true }
-      }
-    }
-  }
+        y: { stacked: true },
+      },
+    },
+  },
 });
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamflojo/floimg-quickchart",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "QuickChart.io generator for floimg - create charts using Chart.js",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,13 +16,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "npm run build"
-  },
   "keywords": [
     "floimg",
     "quickchart",
@@ -40,15 +33,22 @@
     "directory": "packages/floimg-quickchart"
   },
   "peerDependencies": {
-    "@teamflojo/floimg": "^0.2.0"
+    "@teamflojo/floimg": "^0.8.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
-    "@teamflojo/floimg": "workspace:*",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.9"
+    "vitest": "^2.1.9",
+    "@teamflojo/floimg": "0.9.0"
   },
   "engines": {
     "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest --run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
   }
-}
+}