@inglorious/ui 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -280,10 +280,10 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "6.0.0",
+    "@inglorious/charts": "6.0.1",
     "@inglorious/store": "11.0.0",
-    "@inglorious/utils": "3.8.0",
-    "@inglorious/web": "6.0.0"
+    "@inglorious/web": "6.0.1",
+    "@inglorious/utils": "3.8.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
@@ -297,11 +297,11 @@
     "storybook": "^10.3.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
-    "@inglorious/eslint-config": "1.1.2",
+    "@inglorious/vite-plugin-jsx": "2.0.0",
+    "@inglorious/web": "6.0.1",
     "@inglorious/store": "11.0.0",
-    "@inglorious/web": "6.0.0",
     "@inglorious/vite-plugin-vue": "1.0.1",
-    "@inglorious/vite-plugin-jsx": "2.0.0"
+    "@inglorious/eslint-config": "1.1.2"
   },
   "engines": {
     "node": ">= 22"

package/src/examples/dashboard/dashboard.stories.js

@@ -1,6 +1,6 @@
 import "./style.css"
 
-import { areaChart, barChart, lineChart } from "@inglorious/charts"
+import { Chart } from "@inglorious/charts"
 
 import {
   createEntityRender,
@@ -21,9 +21,9 @@ const baseTypes = {
   AppDrawer,
   AppHeader,
   PrimitiveSection,
-  area: areaChart,
-  bar: barChart,
-  line: lineChart,
+  area: Chart,
+  bar: Chart,
+  line: Chart,
 }
 
 export default {

package/src/examples/dashboard/social-card.js

@@ -1,4 +1,4 @@
-import { chart } from "@inglorious/charts"
+import { Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Divider } from "../../data-display/divider"
@@ -48,18 +48,16 @@ export const SocialCard = {
   },
 
   renderAreaSpark(entity, api) {
-    return chart.renderAreaChart(
+    return Chart.render(
       {
         type: "area",
         data: entity.data.map((value, index) => ({ name: `${index}`, value })),
-      },
-      {
         width: 640,
         height: 200,
         padding: 0,
         dataKeys: ["value"],
         children: [
-          chart.Area({
+          Chart.Area({
             dataKey: "value",
             stroke: "rgba(255,255,255,0.9)",
             fill: "rgba(255,255,255,0.35)",

package/src/examples/dashboard/stat-card.js

@@ -1,4 +1,4 @@
-import { chart } from "@inglorious/charts"
+import { Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
@@ -54,7 +54,7 @@ export const StatCard = {
       value,
     }))
 
-    const chartConfig = {
+    const base = {
       id: entity.id,
       type: entity.chartType,
       data,
@@ -66,19 +66,19 @@ export const StatCard = {
     const children = []
     if (entity.hasDots) {
       children.push(
-        chart.Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
+        Chart.Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
       )
     }
 
     if (entity.chartType === "area") {
-      children.push(chart.Area({ fill: "rgba(255,255,255,0.3)" }))
-      return chart.renderAreaChart(chartConfig, { children }, api)
-    } else if (entity.chartType === "bar") {
-      children.push(chart.Bar({ fill: "rgba(255,255,255,0.3)" }))
-      return chart.renderBarChart(chartConfig, { children }, api)
-    } else {
-      children.push(chart.Line({ stroke: "white" }))
-      return chart.renderLineChart(chartConfig, { children }, api)
+      children.push(Chart.Area({ fill: "rgba(255,255,255,0.3)" }))
+      return Chart.render({ ...base, children }, api)
     }
+    if (entity.chartType === "bar") {
+      children.push(Chart.Bar({ fill: "rgba(255,255,255,0.3)" }))
+      return Chart.render({ ...base, children }, api)
+    }
+    children.push(Chart.Line({ stroke: "white" }))
+    return Chart.render({ ...base, children }, api)
   },
 }

package/src/examples/dashboard/traffic-card.js

@@ -1,4 +1,4 @@
-import { chart } from "@inglorious/charts"
+import { Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
@@ -84,22 +84,24 @@ export const TrafficCard = {
   },
 
   renderTrafficChart(_, api) {
-    return chart.renderAreaChart(
-      { id: "traffic", type: "area", data: trafficSeries },
+    return Chart.render(
       {
+        id: "traffic",
+        type: "area",
+        data: trafficSeries,
         width: 1400,
         height: 320,
         dataKeys: ["visits", "unique"],
         children: [
-          chart.CartesianGrid({
+          Chart.CartesianGrid({
             stroke: "rgba(255,255,255,0.08)",
             strokeDasharray: "4 4",
           }),
-          chart.XAxis({ dataKey: "month" }),
-          chart.YAxis({ width: "auto" }),
-          chart.Area({ dataKey: "visits", stroke: "#39a2f1", strokeWidth: 3 }),
-          chart.Area({ dataKey: "unique", stroke: "#2eb85c", strokeWidth: 3 }),
-          chart.Tooltip({}),
+          Chart.XAxis({ dataKey: "month" }),
+          Chart.YAxis({ width: "auto" }),
+          Chart.Area({ dataKey: "visits", stroke: "#39a2f1", strokeWidth: 3 }),
+          Chart.Area({ dataKey: "unique", stroke: "#2eb85c", strokeWidth: 3 }),
+          Chart.Tooltip({}),
         ],
       },
       api,