@cryptlex/web-components 6.6.6-alpha90 → 6.6.6-alpha92
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.
|
@@ -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{formatNumber as d}from"../utilities/numbers.js";import{XAxis as b,YAxis as x,CartesianGrid as C,Legend as k,Tooltip as A,ResponsiveContainer as c,LineChart as S,Line as $,BarChart as L,Bar as K,PieChart as N,Pie as B}from"recharts";function h({...t}){return r(b,{stroke:"var(--color-neutral-6)",...t})}function f({...t}){return r(x,{stroke:"var(--color-neutral-6)",tickFormatter:e=>d(e),...t})}function p({...t}){return r(C,{stroke:"var(--color-neutral-4)",...t})}function s({...t}){return r(k,{iconSize:12,formatter:e=>r("span",{className:"text-foreground",children:e}),wrapperStyle:{background:"var(--color-elevation-1)"},...t})}function u({...t}){return r(A,{formatter:e=>typeof e=="number"?d(e):e,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"},...t})}function F({className:t,data:e,config:o,...n}){return r(c,{...n,children:l(S,{className:"body-sm",data:e,children:[r(p,{strokeDasharray:"3 3"}),r(h,{dataKey:o.xAxis.toString()}),r(f,{}),r(u,{}),r(s,{iconType:"plainline"}),o.lines.map((i,a)=>r($,{strokeWidth:2,type:"monotone",dataKey:i.toString(),stroke:`var(--color-chart-${a%5+1}`}))]})})}function G({className:t,data:e,config:o,...n}){return r(c,{className:t,...n,children:l(L,{className:"body-sm",data:e,children:[r(p,{strokeDasharray:"3 3"}),r(h,{dataKey:o.xAxis.toString()}),r(f,{}),r(u,{}),r(s,{}),o.bars.map((i,a)=>r(K,{dataKey:i.toString(),fill:`var(--color-chart-${a%5+1}`,stroke:`var(--color-chart-${a%5+1}`}))]})})}function P(t){const{name:e,percent:o}=t;return`${e}: ${((typeof o=="number"?o:0)*100).toFixed(0)}%`}function W({data:t,variant:e="full",showLabels:o=!0,...n}){const i=e==="semi"?180:0,a=e==="semi"?0:360,y=e==="semi"?"100%":"50%";return r(c,{...n,children:l(N,{children:[r(u,{}),r(s,{}),r(B,{data:Object.entries(t).map(([g,v],m)=>({fill:`var(--color-chart-${m%5+1})`,stroke:`var(--color-chart-${m%5+1})`,name:g,value:v})),dataKey:"value",nameKey:"name",cx:"50%",cy:y,startAngle:i,endAngle:a,label:o?P:void 0,labelLine:{stroke:"var(--color-neutral-6)"},isAnimationActive:!0})]})})}export{G as Barchart,p as ChartCartesianGrid,s as ChartLegend,u as ChartTooltip,h as ChartXAxis,f as ChartYAxis,F as Linechart,W 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 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","
|
|
1
|
+
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport { formatNumber } from '../utilities/numbers';\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)\" tickFormatter={v => formatNumber(v)} {...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 formatter={v => (typeof v === 'number' ? formatNumber(v) : v)}\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","formatNumber","v","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","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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"}
|
|
@@ -135,6 +135,8 @@ export declare const DataTableContext: import('react').Context<{
|
|
|
135
135
|
id: string;
|
|
136
136
|
} | {
|
|
137
137
|
id: string;
|
|
138
|
+
} | {
|
|
139
|
+
id: string;
|
|
138
140
|
} | {
|
|
139
141
|
accountAlias: string;
|
|
140
142
|
} | {
|
|
@@ -359,6 +361,8 @@ export declare const DataTableContext: import('react').Context<{
|
|
|
359
361
|
id: string;
|
|
360
362
|
} | {
|
|
361
363
|
id: string;
|
|
364
|
+
} | {
|
|
365
|
+
id: string;
|
|
362
366
|
} | {
|
|
363
367
|
resellerId: string;
|
|
364
368
|
} | {
|
|
@@ -508,6 +512,8 @@ export declare const DataTableContext: import('react').Context<{
|
|
|
508
512
|
id: string;
|
|
509
513
|
} | {
|
|
510
514
|
id: string;
|
|
515
|
+
} | {
|
|
516
|
+
id: string;
|
|
511
517
|
} | undefined> | undefined;
|
|
512
518
|
} | null>;
|
|
513
519
|
export declare function useDataTable(): {
|
|
@@ -593,6 +599,8 @@ export declare function useDataTable(): {
|
|
|
593
599
|
id: string;
|
|
594
600
|
} | {
|
|
595
601
|
id: string;
|
|
602
|
+
} | {
|
|
603
|
+
id: string;
|
|
596
604
|
} | {
|
|
597
605
|
accountAlias: string;
|
|
598
606
|
} | {
|
|
@@ -817,6 +825,8 @@ export declare function useDataTable(): {
|
|
|
817
825
|
id: string;
|
|
818
826
|
} | {
|
|
819
827
|
id: string;
|
|
828
|
+
} | {
|
|
829
|
+
id: string;
|
|
820
830
|
} | {
|
|
821
831
|
resellerId: string;
|
|
822
832
|
} | {
|
|
@@ -966,6 +976,8 @@ export declare function useDataTable(): {
|
|
|
966
976
|
id: string;
|
|
967
977
|
} | {
|
|
968
978
|
id: string;
|
|
979
|
+
} | {
|
|
980
|
+
id: string;
|
|
969
981
|
} | undefined> | undefined;
|
|
970
982
|
};
|
|
971
983
|
export declare function DataTableProvider<T extends object, TOperation extends keyof operations>({ children, ...props }: {
|
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-alpha92",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"*.{ts,tsx,css,scss,json}": "prettier --write"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"@cryptlex/web-api-types": "2.
|
|
51
|
+
"@cryptlex/web-api-types": "2.129.0",
|
|
52
52
|
"@dnd-kit/core": "6.3.1",
|
|
53
53
|
"@dnd-kit/sortable": "10.0.0",
|
|
54
54
|
"@dnd-kit/utilities": "3.2.2",
|