@cryptlex/web-components 6.6.6-alpha47 → 6.6.6-alpha50
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.
|
@@ -18,3 +18,8 @@ export declare function Barchart<T>({ className, data, config, ...props }: Omit<
|
|
|
18
18
|
bars: (keyof T)[];
|
|
19
19
|
};
|
|
20
20
|
}): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function PieChart<T extends Record<string, number>>({ data, variant, showLabels, ...props }: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {
|
|
22
|
+
data: T;
|
|
23
|
+
variant?: 'full' | 'semi';
|
|
24
|
+
showLabels?: boolean;
|
|
25
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as
|
|
1
|
+
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as g,YAxis as x,CartesianGrid as C,Legend as b,Tooltip as k,ResponsiveContainer as c,LineChart as A,Line as S,BarChart as $,Bar as L,PieChart as K,Pie as B}from"recharts";function h({...e}){return r(g,{stroke:"var(--color-neutral-6)",...e})}function m({...e}){return r(x,{stroke:"var(--color-neutral-6)",...e})}function f({...e}){return r(C,{stroke:"var(--color-neutral-4)",...e})}function s({...e}){return r(b,{iconSize:12,formatter:t=>r("span",{className:"text-foreground",children:t}),wrapperStyle:{background:"var(--color-elevation-1)"},...e})}function u({...e}){return r(k,{contentStyle:{backgroundColor:"var(--color-elevation-2)",border:"var(--color-border)"},labelStyle:{color:"var(--color-muted-foreground)",fontWeight:"600",marginBottom:"0.5rem"},itemStyle:{color:"var(--color-foreground)",padding:"0"},...e})}function T({className:e,data:t,config:o,...n}){return r(c,{...n,children:l(A,{className:"body-sm",data:t,children:[r(f,{strokeDasharray:"3 3"}),r(h,{dataKey:o.xAxis.toString()}),r(m,{}),r(u,{}),r(s,{iconType:"plainline"}),o.lines.map((i,a)=>r(S,{strokeWidth:2,type:"monotone",dataKey:i.toString(),stroke:`var(--color-chart-${a%5+1}`}))]})})}function D({className:e,data:t,config:o,...n}){return r(c,{className:e,...n,children:l($,{className:"body-sm",data:t,children:[r(f,{strokeDasharray:"3 3"}),r(h,{dataKey:o.xAxis.toString()}),r(m,{}),r(u,{}),r(s,{}),o.bars.map((i,a)=>r(L,{dataKey:i.toString(),fill:`var(--color-chart-${a%5+1}`,stroke:`var(--color-chart-${a%5+1}`}))]})})}function N(e){const{name:t,percent:o}=e;return`${t}: ${((typeof o=="number"?o:0)*100).toFixed(0)}%`}function G({data:e,variant:t="full",showLabels:o=!0,...n}){const i=t==="semi"?180:0,a=t==="semi"?0:360,p=t==="semi"?"100%":"50%";return r(c,{...n,children:l(K,{children:[r(u,{}),r(s,{}),r(B,{data:Object.entries(e).map(([v,y],d)=>({fill:`var(--color-chart-${d%5+1})`,stroke:`var(--color-chart-${d%5+1})`,name:v,value:y})),dataKey:"value",nameKey:"name",cx:"50%",cy:p,startAngle:i,endAngle:a,label:o?N:void 0,labelLine:{stroke:"var(--color-neutral-6)"},isAnimationActive:!0})]})})}export{D as Barchart,f as ChartCartesianGrid,s as ChartLegend,u as ChartTooltip,h as ChartXAxis,m as ChartYAxis,T as Linechart,G as PieChart};
|
|
2
2
|
//# sourceMappingURL=charts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n} from 'recharts';\n\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return <RechartsXAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartYAxis({ ...props }: React.ComponentProps<typeof RechartsYAxis>) {\n return <RechartsYAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartCartesianGrid({ ...props }: React.ComponentProps<typeof RechartsCartesianGrid>) {\n return <RechartsCartesianGrid stroke=\"var(--color-neutral-4)\" {...props} />;\n}\n\nexport function ChartLegend({ ...props }: React.ComponentProps<typeof RechartsLegend>) {\n return (\n <RechartsLegend\n iconSize={12}\n formatter={v => <span className=\"text-foreground\">{v}</span>}\n wrapperStyle={{ background: 'var(--color-elevation-1)' }}\n {...props}\n />\n );\n}\n\nexport function ChartTooltip({ ...props }: React.ComponentProps<typeof RechartsTooltip>) {\n return (\n <RechartsTooltip\n contentStyle={{\n backgroundColor: 'var(--color-elevation-2)',\n border: 'var(--color-border)',\n }}\n labelStyle={{\n color: 'var(--color-muted-foreground)',\n fontWeight: '600',\n marginBottom: '0.5rem',\n }}\n itemStyle={{\n color: 'var(--color-foreground)',\n padding: '0',\n }}\n {...props}\n />\n );\n}\nexport function Linechart<T extends object>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n lines: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer {...props}>\n <LineChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend iconType=\"plainline\" />\n {config.lines.map((l, i) => (\n <Line\n strokeWidth={2}\n type=\"monotone\"\n dataKey={l.toString()}\n stroke={`var(--color-chart-${(i % 5) + 1}`}\n />\n ))}\n </LineChart>\n </ResponsiveContainer>\n );\n}\n\nexport function Barchart<T>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n bars: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer className={className} {...props}>\n <BarChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend />\n {config.bars.map((b, i) => (\n <Bar\n dataKey={b.toString()}\n fill={`var(--color-chart-${(i % 5) + 1}`}\n stroke={`var(--color-chart-${(i % 5) + 1}`}\n />\n ))}\n </BarChart>\n </ResponsiveContainer>\n );\n}\n"],"names":["ChartXAxis","props","jsx","RechartsXAxis","ChartYAxis","RechartsYAxis","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","v","ChartTooltip","RechartsTooltip","Linechart","className","data","config","ResponsiveContainer","LineChart","l","i","Line","Barchart","jsxs","BarChart","b","Bar"],"mappings":"
|
|
1
|
+
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n Pie,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n PieChart as RechartsPieChart,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n type PieLabelRenderProps,\n} from 'recharts';\n\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return <RechartsXAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartYAxis({ ...props }: React.ComponentProps<typeof RechartsYAxis>) {\n return <RechartsYAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartCartesianGrid({ ...props }: React.ComponentProps<typeof RechartsCartesianGrid>) {\n return <RechartsCartesianGrid stroke=\"var(--color-neutral-4)\" {...props} />;\n}\n\nexport function ChartLegend({ ...props }: React.ComponentProps<typeof RechartsLegend>) {\n return (\n <RechartsLegend\n iconSize={12}\n formatter={v => <span className=\"text-foreground\">{v}</span>}\n wrapperStyle={{ background: 'var(--color-elevation-1)' }}\n {...props}\n />\n );\n}\n\nexport function ChartTooltip({ ...props }: React.ComponentProps<typeof RechartsTooltip>) {\n return (\n <RechartsTooltip\n contentStyle={{\n backgroundColor: 'var(--color-elevation-2)',\n border: 'var(--color-border)',\n }}\n labelStyle={{\n color: 'var(--color-muted-foreground)',\n fontWeight: '600',\n marginBottom: '0.5rem',\n }}\n itemStyle={{\n color: 'var(--color-foreground)',\n padding: '0',\n }}\n {...props}\n />\n );\n}\nexport function Linechart<T extends object>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n lines: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer {...props}>\n <LineChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend iconType=\"plainline\" />\n {config.lines.map((l, i) => (\n <Line\n strokeWidth={2}\n type=\"monotone\"\n dataKey={l.toString()}\n stroke={`var(--color-chart-${(i % 5) + 1}`}\n />\n ))}\n </LineChart>\n </ResponsiveContainer>\n );\n}\n\nexport function Barchart<T>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n bars: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer className={className} {...props}>\n <BarChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend />\n {config.bars.map((b, i) => (\n <Bar\n dataKey={b.toString()}\n fill={`var(--color-chart-${(i % 5) + 1}`}\n stroke={`var(--color-chart-${(i % 5) + 1}`}\n />\n ))}\n </BarChart>\n </ResponsiveContainer>\n );\n}\n\nfunction getLabel(props: PieLabelRenderProps) {\n const { name, percent } = props;\n return `${name}: ${((typeof percent === 'number' ? percent : 0) * 100).toFixed(0)}%`;\n}\nexport function PieChart<T extends Record<string, number>>({\n data,\n variant = 'full',\n showLabels = true,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T;\n variant?: 'full' | 'semi';\n showLabels?: boolean;\n}) {\n const finalStartAngle = variant === 'semi' ? 180 : 0;\n const finalEndAngle = variant === 'semi' ? 0 : 360;\n const cy = variant === 'semi' ? '100%' : '50%';\n\n return (\n <ResponsiveContainer {...props}>\n <RechartsPieChart>\n <ChartTooltip />\n <ChartLegend />\n <Pie\n data={Object.entries(data).map(([name, value], i) => {\n return {\n fill: `var(--color-chart-${(i % 5) + 1})`,\n stroke: `var(--color-chart-${(i % 5) + 1})`,\n name,\n value,\n };\n })}\n dataKey=\"value\"\n nameKey=\"name\"\n cx=\"50%\"\n cy={cy}\n startAngle={finalStartAngle}\n endAngle={finalEndAngle}\n label={showLabels ? getLabel : undefined}\n labelLine={{ stroke: 'var(--color-neutral-6)' }}\n isAnimationActive={true}\n />\n </RechartsPieChart>\n </ResponsiveContainer>\n );\n}\n"],"names":["ChartXAxis","props","jsx","RechartsXAxis","ChartYAxis","RechartsYAxis","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","v","ChartTooltip","RechartsTooltip","Linechart","className","data","config","ResponsiveContainer","LineChart","l","i","Line","Barchart","jsxs","BarChart","b","Bar","getLabel","name","percent","PieChart","variant","showLabels","finalStartAngle","finalEndAngle","cy","RechartsPieChart","Pie","value"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "6.6.6-
|
|
3
|
+
"version": "6.6.6-alpha50",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -52,9 +52,9 @@
|
|
|
52
52
|
"@dnd-kit/core": "6.3.1",
|
|
53
53
|
"@dnd-kit/sortable": "10.0.0",
|
|
54
54
|
"@dnd-kit/utilities": "3.2.2",
|
|
55
|
-
"@internationalized/date": "3.
|
|
55
|
+
"@internationalized/date": "3.10.1",
|
|
56
56
|
"@tanstack/react-form": "1.6.3",
|
|
57
|
-
"@tanstack/react-query": "5.
|
|
57
|
+
"@tanstack/react-query": "5.90.2",
|
|
58
58
|
"@tanstack/react-table": "8.20.5",
|
|
59
59
|
"@types/lodash-es": "4.17.12",
|
|
60
60
|
"@uidotdev/usehooks": "2.4.1",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"clsx": "2.1.1",
|
|
63
63
|
"date-fns": "3.0.0",
|
|
64
64
|
"lodash-es": "4.17.21",
|
|
65
|
-
"openapi-fetch": "0.
|
|
65
|
+
"openapi-fetch": "0.15.0",
|
|
66
66
|
"react": "^19.1.0",
|
|
67
67
|
"react-aria-components": "1.12.0",
|
|
68
68
|
"react-dom": "^19.1.0",
|
|
@@ -82,6 +82,7 @@
|
|
|
82
82
|
"@storybook/react-vite": "9.1.4",
|
|
83
83
|
"@tailwindcss/cli": "4.1.12",
|
|
84
84
|
"@tailwindcss/vite": "4.1.12",
|
|
85
|
+
"@tariq007/storybook-addon-html-validator-w3c": "5.0.1",
|
|
85
86
|
"@types/node": "^22.7.8",
|
|
86
87
|
"@types/react": "^19.1.0",
|
|
87
88
|
"@types/react-dom": "^19.1.0",
|