@dappworks/kit 0.4.83 → 0.4.84

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,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ValueFormatter, CustomTooltipProps } from '@tremor/react';
2
+ import { ValueFormatter, CurveType, Color, CustomTooltipProps } from '@tremor/react';
3
3
 
4
4
  interface ChartBox {
5
5
  title?: React.ReactNode;
@@ -34,8 +34,8 @@ type LineChartCard = ChartBox & {
34
34
  type?: 'LineChartCard';
35
35
  categories?: string[];
36
36
  index?: string;
37
- curveType?: 'linear' | 'step' | 'monotone';
38
- colors?: ('slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose')[];
37
+ curveType?: CurveType;
38
+ colors?: (Color | string)[];
39
39
  showLegend?: boolean;
40
40
  showGridLines?: boolean;
41
41
  showXAxis?: boolean;
@@ -45,6 +45,7 @@ type LineChartCard = ChartBox & {
45
45
  showAnimation?: boolean;
46
46
  autoMinValue?: boolean;
47
47
  valueFormatter?: ValueFormatter;
48
+ customTooltip?: React.ComponentType<CustomTooltipProps>;
48
49
  };
49
50
  declare const LineChartCard: (props: LineChartCard) => React.JSX.Element;
50
51
 
@@ -52,8 +53,8 @@ type AreaChartCard = ChartBox & {
52
53
  type?: 'AreaChartCard';
53
54
  categories?: string[];
54
55
  index?: string;
55
- curveType?: 'linear' | 'step' | 'monotone';
56
- colors?: ('slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose')[];
56
+ curveType?: CurveType;
57
+ colors?: (Color | string)[];
57
58
  showLegend?: boolean;
58
59
  showGridLines?: boolean;
59
60
  stack?: boolean;
package/dist/metrics.mjs CHANGED
@@ -58,7 +58,8 @@ var LineChartCard = (props) => {
58
58
  showTooltip = true,
59
59
  showAnimation = true,
60
60
  autoMinValue = true,
61
- valueFormatter = (number) => `${number}`
61
+ valueFormatter = (number) => `${number}`,
62
+ customTooltip
62
63
  } = props;
63
64
  return /* @__PURE__ */ React8.createElement(ChartBox, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(
64
65
  LineChart,
@@ -77,7 +78,8 @@ var LineChartCard = (props) => {
77
78
  startEndOnly,
78
79
  showTooltip,
79
80
  showAnimation,
80
- autoMinValue
81
+ autoMinValue,
82
+ customTooltip
81
83
  }
82
84
  ));
83
85
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../components/JSONMetricsView/index.tsx","../components/JSONMetricsView/BarChartCard/index.tsx","../components/JSONMetricsView/ChartBox/index.tsx","../components/JSONMetricsView/LineChartCard/index.tsx","../components/JSONMetricsView/AreaChartCard/index.tsx","../components/JSONMetricsView/DonutChartCard/index.tsx","../components/JSONMetricsView/CountCard/index.tsx","../components/JSONMetricsView/TableCard/index.tsx","../components/JSONMetricsView/KPICard/index.tsx"],"names":["React","AreaChart","LineChart"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Col, Grid } from '@tremor/react';\nimport { BarChartCard } from './BarChartCard';\nimport { LineChartCard } from './LineChartCard';\nimport { AreaChartCard } from './AreaChartCard';\nimport { DonutChartCard } from './DonutChartCard';\nimport { CountCard } from './CountCard';\nimport { TableCard } from './TableCard';\nimport { KPICard } from './KPICard';\n\nexport type JSONMetricsViewType = AreaChartCard | LineChartCard | BarChartCard | DonutChartCard | CountCard | TableCard | KPICard;\n\nconst components = {\n AreaChartCard,\n LineChartCard,\n BarChartCard,\n DonutChartCard,\n CountCard,\n TableCard,\n KPICard,\n};\n\nconst JSONMetricsView = ({ data }: { data: JSONMetricsViewType[] }) => {\n return (\n <Grid numItems={1} numItemsSm={1} numItemsLg={2} numItemsMd={2} className=\"gap-2\">\n {data.map((item, index) => {\n const Component = components[item.type];\n return (\n <Col key={index} numColSpanSm={1} numColSpanMd={item.numColSpanMd ?? 1}>\n {/* @ts-ignore */}\n <Component {...item} />\n </Col>\n );\n })}\n </Grid>\n );\n};\n\nexport const MetricsView = ({ data }: { data: JSONMetricsViewType }) => {\n const Comp = components[data.type];\n // @ts-ignore\n return <Comp {...data} />;\n};\n\nexport { JSONMetricsView };\n","import React from 'react';\nimport { BarChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type BarChartCard = ChartBox & {\n type?: 'BarChartCard';\n categories?: string[];\n index?: string;\n valueFormatter?: ValueFormatter;\n showLegend?: boolean;\n showGridLines?: boolean;\n stack?: boolean;\n showAnimation?: boolean;\n};\n\nexport const BarChartCard = (props: BarChartCard) => {\n const {\n data = [],\n categories = ['value'],\n index = 'date',\n valueFormatter = (number) => `${number}`,\n showLegend = false,\n showGridLines = false,\n stack = false,\n chartClassName,\n showAnimation = true,\n } = props;\n\n return (\n <ChartBox {...props}>\n <BarChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n valueFormatter={valueFormatter}\n yAxisWidth={48}\n showLegend={showLegend}\n showGridLines={showGridLines}\n stack={stack}\n showAnimation={showAnimation}\n />\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\n\nexport interface ChartBox {\n title?: React.ReactNode;\n description?: string;\n error?: string;\n data?: {\n [key: string]: any;\n }[];\n children?: React.ReactNode;\n gridH?: number; // grid units, not pixels\n numColSpanMd?: number;\n className?: string;\n headerClassName?: string;\n contentClassName?: string;\n chartClassName?: string;\n}\n\nexport const ChartBox = ({ title, description, error, children, className, headerClassName, contentClassName }: ChartBox) => {\n return (\n <Card className={cn('shadow-sm border dark:border-[#3e3e3e]', className)}>\n {(title || description) && (\n <div className={cn('p-4 h-[60px]', headerClassName)}>\n {title && <div>{title}</div>}\n {description && <div className=\"text-xs\">{description}</div>}\n </div>\n )}\n <div className={cn('px-2 pb-5', contentClassName)}>{error ? <div className=\"text-red-600\">{error}</div> : children}</div>\n </Card>\n );\n};\n","import React from 'react';\nimport { LineChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type LineChartCard = ChartBox & {\n type?: 'LineChartCard';\n categories?: string[];\n index?: string;\n curveType?: 'linear' | 'step' | 'monotone';\n colors?: (\n | 'slate'\n | 'gray'\n | 'zinc'\n | 'neutral'\n | 'stone'\n | 'red'\n | 'orange'\n | 'amber'\n | 'yellow'\n | 'lime'\n | 'green'\n | 'emerald'\n | 'teal'\n | 'cyan'\n | 'sky'\n | 'blue'\n | 'indigo'\n | 'violet'\n | 'purple'\n | 'fuchsia'\n | 'pink'\n | 'rose'\n )[];\n showLegend?: boolean;\n showGridLines?: boolean;\n showXAxis?: boolean;\n showYAxis?: boolean;\n startEndOnly?: boolean;\n showTooltip?: boolean;\n showAnimation?: boolean;\n autoMinValue?: boolean;\n valueFormatter?: ValueFormatter;\n};\n\nexport const LineChartCard = (props: LineChartCard) => {\n const {\n data = [],\n categories = ['value'],\n index = 'date',\n curveType = 'linear',\n colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n showLegend = false,\n showGridLines = false,\n chartClassName,\n showXAxis = true,\n showYAxis = true,\n startEndOnly = false,\n showTooltip = true,\n showAnimation = true,\n autoMinValue = true,\n valueFormatter = (number) => `${number}`,\n } = props;\n\n return (\n <ChartBox {...props}>\n <LineChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={colors}\n valueFormatter={valueFormatter}\n showLegend={showLegend}\n showGridLines={showGridLines}\n curveType={curveType}\n showXAxis={showXAxis}\n showYAxis={showYAxis}\n startEndOnly={startEndOnly}\n showTooltip={showTooltip}\n showAnimation={showAnimation}\n autoMinValue={autoMinValue}\n />\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { AreaChart, CustomTooltipProps, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type AreaChartCard = ChartBox & {\n type?: 'AreaChartCard';\n categories?: string[];\n index?: string;\n curveType?: 'linear' | 'step' | 'monotone';\n colors?: (\n | 'slate'\n | 'gray'\n | 'zinc'\n | 'neutral'\n | 'stone'\n | 'red'\n | 'orange'\n | 'amber'\n | 'yellow'\n | 'lime'\n | 'green'\n | 'emerald'\n | 'teal'\n | 'cyan'\n | 'sky'\n | 'blue'\n | 'indigo'\n | 'violet'\n | 'purple'\n | 'fuchsia'\n | 'pink'\n | 'rose'\n )[];\n showLegend?: boolean;\n showGridLines?: boolean;\n stack?: boolean;\n showXAxis?: boolean;\n showYAxis?: boolean;\n startEndOnly?: boolean;\n showTooltip?: boolean;\n showAnimation?: boolean;\n autoMinValue?: boolean;\n valueFormatter?: ValueFormatter;\n customTooltip?: React.ComponentType<CustomTooltipProps>\n};\n\n\nexport const AreaChartCard = (props: AreaChartCard) => {\n const {\n data = [],\n categories = ['value'],\n index = 'date',\n curveType = 'linear',\n colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n showLegend = false,\n showGridLines = false,\n stack = false,\n chartClassName,\n showXAxis = true,\n showYAxis = true,\n startEndOnly = false,\n showTooltip = true,\n showAnimation = true,\n autoMinValue = true,\n valueFormatter = (number) => `${number}`,\n customTooltip,\n } = props;\n\n return (\n <ChartBox {...props}>\n <AreaChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={colors}\n valueFormatter={valueFormatter}\n showLegend={showLegend}\n showGridLines={showGridLines}\n stack={stack}\n curveType={curveType}\n showXAxis={showXAxis}\n showYAxis={showYAxis}\n startEndOnly={startEndOnly}\n showTooltip={showTooltip}\n showAnimation={showAnimation}\n autoMinValue={autoMinValue}\n customTooltip={customTooltip}\n />\n </ChartBox>\n );\n};\n\n","import React from 'react';\nimport { DonutChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type DonutChartCard = ChartBox & {\n type?: 'DonutChartCard';\n categories?: string[];\n index?: string;\n valueFormatter?: ValueFormatter;\n showLabel?: boolean;\n variant?: 'donut' | 'pie';\n showAnimation?: boolean;\n};\n\nexport const DonutChartCard = (props: DonutChartCard) => {\n const { data = [], categories = ['value'], index = 'name', valueFormatter = (number) => `${number}`, showLabel = true, variant = 'donut', chartClassName, showAnimation = true } = props;\n const category = categories[0];\n return (\n <ChartBox {...props}>\n <DonutChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n category={category}\n colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n valueFormatter={valueFormatter}\n showLabel={showLabel}\n variant={variant}\n showAnimation={showAnimation}\n />\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type CountCard = ChartBox & {\n type?: 'CountCard';\n summedColumnIndex?: string;\n};\n\nexport const CountCard = (props: CountCard) => {\n if (!props.data?.length) {\n return (\n <ChartBox {...props}>\n <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n <span className=\"text-gray-400\">No data</span>\n </div>\n </ChartBox>\n );\n }\n\n if (!props.summedColumnIndex) {\n return (\n <ChartBox {...props}>\n <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n <span className=\"text-gray-400 text-sm\">\n set <span className=\"font-bold\">summedColumnIndex</span> to sum up values\n </span>\n </div>\n </ChartBox>\n );\n }\n\n const sum = props.data.reduce((acc, cur) => {\n const v = cur[props.summedColumnIndex];\n if (typeof v == 'number') {\n return acc + v;\n } else {\n return acc;\n }\n }, 0);\n\n return (\n <ChartBox {...props}>\n <div className={cn(\"mt-2 ml-2 font-bold text-2xl overflow-auto\", props.chartClassName)}>{sum}</div>\n </ChartBox>\n );\n};","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { JSONTable } from '../../JSONTable';\nimport { cn } from '../../../lib/utils';\n\nexport type TableCard = ChartBox & {\n type?: 'TableCard';\n columnOptions?: {\n [key: string]: {\n label: string;\n hidden: boolean;\n }\n }\n}\n\nexport const TableCard = (props: TableCard) => {\n const { data = [], columnOptions = {}, chartClassName } = props;\n return (\n <ChartBox {...props}>\n {data?.length > 0\n ? <JSONTable dataSource={data} columnOptions={columnOptions} className={cn(\"h-[256px]\", chartClassName)} />\n : <div className={cn(\"h-[256px] flex justify-center items-center text-gray-400\", chartClassName)}>No data</div>\n }\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { AreaChart, LineChart, Text, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { SkeletonBox } from '../../Common/SkeletonBox';\nimport { cn } from '../../../lib/utils';\n\nexport type KPICard = ChartBox & {\n type?: 'KPICard';\n categories?: string[];\n index?: string;\n chartType?: 'area' | 'line';\n curveType?: 'linear' | 'step' | 'monotone';\n metricTitle?: string;\n metric?: string | number;\n valueFormatter?: ValueFormatter;\n loading?: boolean;\n};\n\nexport const KPICard = (props: KPICard) => {\n const { metricTitle, metric, chartType = 'area', data = [], categories = ['value'], index = 'date', valueFormatter = (number) => `${number}`, curveType = 'linear', loading, chartClassName } = props;\n\n if (loading) {\n return (\n <ChartBox {...props}>\n <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n <div className=\"w-auto\">\n <Text className=\"whitespace-nowrap\">Loading...</Text>\n <div className=\"font-bold text-3xl\">-</div>\n </div>\n <SkeletonBox className=\"flex-col w-full\" skClassName=\"h-[100px] overflow-hidden\" line={1} />\n </div>\n </ChartBox>\n );\n }\n\n const ChartComp = chartType === 'area' ? AreaChart : LineChart;\n\n return (\n <ChartBox {...props}>\n <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n <div className=\"w-auto\">\n <Text className=\"whitespace-nowrap\">{metricTitle}</Text>\n <div className=\"font-bold text-3xl\">{metric ?? '-'}</div>\n </div>\n <ChartComp\n className={cn('h-[100px] overflow-hidden', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n valueFormatter={valueFormatter}\n curveType={curveType}\n showXAxis={false}\n showGridLines={false}\n startEndOnly={true}\n showYAxis={false}\n showLegend={false}\n autoMinValue={true}\n showAnimation={true}\n />\n </div>\n </ChartBox>\n );\n};\n"]}
1
+ {"version":3,"sources":["../components/JSONMetricsView/index.tsx","../components/JSONMetricsView/BarChartCard/index.tsx","../components/JSONMetricsView/ChartBox/index.tsx","../components/JSONMetricsView/LineChartCard/index.tsx","../components/JSONMetricsView/AreaChartCard/index.tsx","../components/JSONMetricsView/DonutChartCard/index.tsx","../components/JSONMetricsView/CountCard/index.tsx","../components/JSONMetricsView/TableCard/index.tsx","../components/JSONMetricsView/KPICard/index.tsx"],"names":["React","AreaChart","LineChart"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Col, Grid } from '@tremor/react';\nimport { BarChartCard } from './BarChartCard';\nimport { LineChartCard } from './LineChartCard';\nimport { AreaChartCard } from './AreaChartCard';\nimport { DonutChartCard } from './DonutChartCard';\nimport { CountCard } from './CountCard';\nimport { TableCard } from './TableCard';\nimport { KPICard } from './KPICard';\n\nexport type JSONMetricsViewType = AreaChartCard | LineChartCard | BarChartCard | DonutChartCard | CountCard | TableCard | KPICard;\n\nconst components = {\n AreaChartCard,\n LineChartCard,\n BarChartCard,\n DonutChartCard,\n CountCard,\n TableCard,\n KPICard,\n};\n\nconst JSONMetricsView = ({ data }: { data: JSONMetricsViewType[] }) => {\n return (\n <Grid numItems={1} numItemsSm={1} numItemsLg={2} numItemsMd={2} className=\"gap-2\">\n {data.map((item, index) => {\n const Component = components[item.type];\n return (\n <Col key={index} numColSpanSm={1} numColSpanMd={item.numColSpanMd ?? 1}>\n {/* @ts-ignore */}\n <Component {...item} />\n </Col>\n );\n })}\n </Grid>\n );\n};\n\nexport const MetricsView = ({ data }: { data: JSONMetricsViewType }) => {\n const Comp = components[data.type];\n // @ts-ignore\n return <Comp {...data} />;\n};\n\nexport { JSONMetricsView };\n","import React from 'react';\nimport { BarChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type BarChartCard = ChartBox & {\n type?: 'BarChartCard';\n categories?: string[];\n index?: string;\n valueFormatter?: ValueFormatter;\n showLegend?: boolean;\n showGridLines?: boolean;\n stack?: boolean;\n showAnimation?: boolean;\n};\n\nexport const BarChartCard = (props: BarChartCard) => {\n const {\n data = [],\n categories = ['value'],\n index = 'date',\n valueFormatter = (number) => `${number}`,\n showLegend = false,\n showGridLines = false,\n stack = false,\n chartClassName,\n showAnimation = true,\n } = props;\n\n return (\n <ChartBox {...props}>\n <BarChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n valueFormatter={valueFormatter}\n yAxisWidth={48}\n showLegend={showLegend}\n showGridLines={showGridLines}\n stack={stack}\n showAnimation={showAnimation}\n />\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\n\nexport interface ChartBox {\n title?: React.ReactNode;\n description?: string;\n error?: string;\n data?: {\n [key: string]: any;\n }[];\n children?: React.ReactNode;\n gridH?: number; // grid units, not pixels\n numColSpanMd?: number;\n className?: string;\n headerClassName?: string;\n contentClassName?: string;\n chartClassName?: string;\n}\n\nexport const ChartBox = ({ title, description, error, children, className, headerClassName, contentClassName }: ChartBox) => {\n return (\n <Card className={cn('shadow-sm border dark:border-[#3e3e3e]', className)}>\n {(title || description) && (\n <div className={cn('p-4 h-[60px]', headerClassName)}>\n {title && <div>{title}</div>}\n {description && <div className=\"text-xs\">{description}</div>}\n </div>\n )}\n <div className={cn('px-2 pb-5', contentClassName)}>{error ? <div className=\"text-red-600\">{error}</div> : children}</div>\n </Card>\n );\n};\n","import React from 'react';\nimport { Color, CurveType, CustomTooltipProps, LineChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type LineChartCard = ChartBox & {\n type?: 'LineChartCard';\n categories?: string[];\n index?: string;\n curveType?: CurveType;\n colors?: (Color | string)[];\n showLegend?: boolean;\n showGridLines?: boolean;\n showXAxis?: boolean;\n showYAxis?: boolean;\n startEndOnly?: boolean;\n showTooltip?: boolean;\n showAnimation?: boolean;\n autoMinValue?: boolean;\n valueFormatter?: ValueFormatter;\n customTooltip?: React.ComponentType<CustomTooltipProps>;\n};\n\nexport const LineChartCard = (props: LineChartCard) => {\n const {\n data = [],\n categories = ['value'],\n index = 'date',\n curveType = 'linear',\n colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n showLegend = false,\n showGridLines = false,\n chartClassName,\n showXAxis = true,\n showYAxis = true,\n startEndOnly = false,\n showTooltip = true,\n showAnimation = true,\n autoMinValue = true,\n valueFormatter = (number) => `${number}`,\n customTooltip\n } = props;\n\n return (\n <ChartBox {...props}>\n <LineChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={colors}\n valueFormatter={valueFormatter}\n showLegend={showLegend}\n showGridLines={showGridLines}\n curveType={curveType}\n showXAxis={showXAxis}\n showYAxis={showYAxis}\n startEndOnly={startEndOnly}\n showTooltip={showTooltip}\n showAnimation={showAnimation}\n autoMinValue={autoMinValue}\n customTooltip={customTooltip}\n />\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { AreaChart, Color, CurveType, CustomTooltipProps, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type AreaChartCard = ChartBox & {\n type?: 'AreaChartCard';\n categories?: string[];\n index?: string;\n curveType?: CurveType;\n colors?: (Color | string)[];\n showLegend?: boolean;\n showGridLines?: boolean;\n stack?: boolean;\n showXAxis?: boolean;\n showYAxis?: boolean;\n startEndOnly?: boolean;\n showTooltip?: boolean;\n showAnimation?: boolean;\n autoMinValue?: boolean;\n valueFormatter?: ValueFormatter;\n customTooltip?: React.ComponentType<CustomTooltipProps>\n};\n\n\nexport const AreaChartCard = (props: AreaChartCard) => {\n const {\n data = [],\n categories = ['value'],\n index = 'date',\n curveType = 'linear',\n colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n showLegend = false,\n showGridLines = false,\n stack = false,\n chartClassName,\n showXAxis = true,\n showYAxis = true,\n startEndOnly = false,\n showTooltip = true,\n showAnimation = true,\n autoMinValue = true,\n valueFormatter = (number) => `${number}`,\n customTooltip,\n } = props;\n\n return (\n <ChartBox {...props}>\n <AreaChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={colors}\n valueFormatter={valueFormatter}\n showLegend={showLegend}\n showGridLines={showGridLines}\n stack={stack}\n curveType={curveType}\n showXAxis={showXAxis}\n showYAxis={showYAxis}\n startEndOnly={startEndOnly}\n showTooltip={showTooltip}\n showAnimation={showAnimation}\n autoMinValue={autoMinValue}\n customTooltip={customTooltip}\n />\n </ChartBox>\n );\n};\n\n","import React from 'react';\nimport { DonutChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type DonutChartCard = ChartBox & {\n type?: 'DonutChartCard';\n categories?: string[];\n index?: string;\n valueFormatter?: ValueFormatter;\n showLabel?: boolean;\n variant?: 'donut' | 'pie';\n showAnimation?: boolean;\n};\n\nexport const DonutChartCard = (props: DonutChartCard) => {\n const { data = [], categories = ['value'], index = 'name', valueFormatter = (number) => `${number}`, showLabel = true, variant = 'donut', chartClassName, showAnimation = true } = props;\n const category = categories[0];\n return (\n <ChartBox {...props}>\n <DonutChart\n className={cn('h-72 mt-4', chartClassName)}\n data={data}\n index={index}\n category={category}\n colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n valueFormatter={valueFormatter}\n showLabel={showLabel}\n variant={variant}\n showAnimation={showAnimation}\n />\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type CountCard = ChartBox & {\n type?: 'CountCard';\n summedColumnIndex?: string;\n};\n\nexport const CountCard = (props: CountCard) => {\n if (!props.data?.length) {\n return (\n <ChartBox {...props}>\n <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n <span className=\"text-gray-400\">No data</span>\n </div>\n </ChartBox>\n );\n }\n\n if (!props.summedColumnIndex) {\n return (\n <ChartBox {...props}>\n <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n <span className=\"text-gray-400 text-sm\">\n set <span className=\"font-bold\">summedColumnIndex</span> to sum up values\n </span>\n </div>\n </ChartBox>\n );\n }\n\n const sum = props.data.reduce((acc, cur) => {\n const v = cur[props.summedColumnIndex];\n if (typeof v == 'number') {\n return acc + v;\n } else {\n return acc;\n }\n }, 0);\n\n return (\n <ChartBox {...props}>\n <div className={cn(\"mt-2 ml-2 font-bold text-2xl overflow-auto\", props.chartClassName)}>{sum}</div>\n </ChartBox>\n );\n};","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { JSONTable } from '../../JSONTable';\nimport { cn } from '../../../lib/utils';\n\nexport type TableCard = ChartBox & {\n type?: 'TableCard';\n columnOptions?: {\n [key: string]: {\n label: string;\n hidden: boolean;\n }\n }\n}\n\nexport const TableCard = (props: TableCard) => {\n const { data = [], columnOptions = {}, chartClassName } = props;\n return (\n <ChartBox {...props}>\n {data?.length > 0\n ? <JSONTable dataSource={data} columnOptions={columnOptions} className={cn(\"h-[256px]\", chartClassName)} />\n : <div className={cn(\"h-[256px] flex justify-center items-center text-gray-400\", chartClassName)}>No data</div>\n }\n </ChartBox>\n );\n};\n","import React from 'react';\nimport { AreaChart, LineChart, Text, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { SkeletonBox } from '../../Common/SkeletonBox';\nimport { cn } from '../../../lib/utils';\n\nexport type KPICard = ChartBox & {\n type?: 'KPICard';\n categories?: string[];\n index?: string;\n chartType?: 'area' | 'line';\n curveType?: 'linear' | 'step' | 'monotone';\n metricTitle?: string;\n metric?: string | number;\n valueFormatter?: ValueFormatter;\n loading?: boolean;\n};\n\nexport const KPICard = (props: KPICard) => {\n const { metricTitle, metric, chartType = 'area', data = [], categories = ['value'], index = 'date', valueFormatter = (number) => `${number}`, curveType = 'linear', loading, chartClassName } = props;\n\n if (loading) {\n return (\n <ChartBox {...props}>\n <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n <div className=\"w-auto\">\n <Text className=\"whitespace-nowrap\">Loading...</Text>\n <div className=\"font-bold text-3xl\">-</div>\n </div>\n <SkeletonBox className=\"flex-col w-full\" skClassName=\"h-[100px] overflow-hidden\" line={1} />\n </div>\n </ChartBox>\n );\n }\n\n const ChartComp = chartType === 'area' ? AreaChart : LineChart;\n\n return (\n <ChartBox {...props}>\n <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n <div className=\"w-auto\">\n <Text className=\"whitespace-nowrap\">{metricTitle}</Text>\n <div className=\"font-bold text-3xl\">{metric ?? '-'}</div>\n </div>\n <ChartComp\n className={cn('h-[100px] overflow-hidden', chartClassName)}\n data={data}\n index={index}\n categories={categories}\n colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n valueFormatter={valueFormatter}\n curveType={curveType}\n showXAxis={false}\n showGridLines={false}\n startEndOnly={true}\n showYAxis={false}\n showLegend={false}\n autoMinValue={true}\n showAnimation={true}\n />\n </div>\n </ChartBox>\n );\n};\n"]}
package/dist/ui.mjs CHANGED
@@ -23,7 +23,8 @@ var Copy = ({ className = "", value, iconSize = 20, iconClassName = "" }) => {
23
23
  "button",
24
24
  {
25
25
  className: cn("rounded-sm p-1 hover:bg-gray-300 dark:hover:bg-gray-600", className),
26
- onClick: () => {
26
+ onClick: (e) => {
27
+ e.preventDefault();
27
28
  copyToClipboard(value);
28
29
  setCopied(true);
29
30
  }
package/dist/ui.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../components/Common/PanelCard/index.tsx","../components/Common/Copy/index.tsx","../components/Common/JSONHighlight/index.tsx"],"names":["React"],"mappings":";;;;;;;;;AACA,SAAS,YAAY;AACrB,OAAO,WAAW;AAOX,IAAM,YAAY,CAAC,EAAE,OAAO,SAAS,UAAU,MAA0C;AAC9F,SACE,oCAAC,QAAK,WAAW,GAAG,2DAA2D,SAAS,KACtF,oCAAC,OAAE,WAAU,gDAA8C,KAAM,GACjE,oCAAC,SAAI,WAAW,GAAG,2EAA2E,KAAI,OAAQ,CAC5G;AAEJ;;;ACdA,OAAOA,UAAS,WAAW,gBAAgB;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,QAAQ,UAAU,iBAAiB;AAGrC,IAAM,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,WAAW,IAAI,gBAAgB,GAAG,MAAwF;AACtK,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM;AACd,QAAI,QAAQ;AACV,YAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAU,KAAK;AAAA,MACjB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACX,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MAClF,SAAS,MAAM;AACb,wBAAgB,KAAK;AACrB,kBAAU,IAAI;AAAA,MAChB;AAAA;AAAA,IACC,SAAS,gBAAAA,OAAA,cAAC,aAAU,MAAM,UAAU,WAAW,eAAe,IAAK,gBAAAA,OAAA,cAAC,YAAS,MAAM,UAAU,WAAW,eAAe;AAAA,EAC1H;AAEJ;;;AC3BA,OAAOA,YAAW;AAGX,SAAS,cAAc,EAAE,SAAS,UAAU,GAA4C;AAC7F,MAAI,CAAC;AAAS,WAAO;AACrB,YAAU,QAAQ,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM;AACnF,QAAM,MAAM,QAAQ,QAAQ,0GAA0G,SAAU,OAAO;AAErJ,QAAI,MAAM;AACV,QAAI,KAAK,KAAK,KAAK,GAAG;AACpB,UAAI,KAAK,KAAK,KAAK,GAAG;AAEpB,cAAM;AAAA,MACR,OAAO;AAEL,cAAM;AAAA,MACR;AAAA,IACF,WAAW,aAAa,KAAK,KAAK,GAAG;AAEnC,YAAM;AAAA,IACR,WAAW,OAAO,KAAK,KAAK,GAAG;AAE7B,YAAM;AAAA,IACR;AACA,WAAO,gBAAgB,GAAG,KAAK,KAAK;AAAA,EACtC,CAAC;AAED,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAW,GAAG,0CAA0C,SAAS,GAAG,yBAAyB,EAAE,QAAQ,IAAI,GAAG;AAEvH","sourcesContent":["import { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\nimport React from 'react';\n\nexport interface PanelCard {\n title: string | JSX.Element;\n content?: string | JSX.Element;\n}\n\nexport const PanelCard = ({ title, content, className }: PanelCard & { className?: string }) => {\n return (\n <Card className={cn('flex flex-col justify-between border-none p-4 shadow-sm', className)}>\n <p className=\"text-[#6B7280] dark:text-[#cecdcd] text-sm\">{title}</p>\n <div className={cn('mt-2 break-all text-[#374151] dark:text-[#cecdcd] text-base font-semibold')}>{content}</div>\n </Card>\n );\n};\n","\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport copyToClipboard from \"copy-to-clipboard\";\nimport { Copy as CopyIcon, CopyCheck } from \"lucide-react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport const Copy = ({ className = '', value, iconSize = 20, iconClassName = '' }: { className?: string; value: string; iconSize?: number, iconClassName?: string }) => {\n const [copied, setCopied] = useState(false);\n useEffect(() => {\n if (copied) {\n const timer = setTimeout(() => {\n setCopied(false);\n }, 2000);\n return () => clearTimeout(timer);\n }\n }, [copied]);\n return (\n <button\n className={cn(\"rounded-sm p-1 hover:bg-gray-300 dark:hover:bg-gray-600\", className)}\n onClick={() => {\n copyToClipboard(value);\n setCopied(true);\n }}>\n {copied ? <CopyCheck size={iconSize} className={iconClassName} /> : <CopyIcon size={iconSize} className={iconClassName} />}\n </button>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport function JSONHighlight({ jsonStr, className }: { jsonStr: string, className?: string }) {\n if (!jsonStr) return null;\n jsonStr = jsonStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n const str = jsonStr.replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function (match) {\n // number\n let cls = 'text-blue-500';\n if (/^\"/.test(match)) {\n if (/:$/.test(match)) {\n // key\n cls = 'text-gray-700 dark:text-gray-400';\n } else {\n // string\n cls = 'text-green-600';\n }\n } else if (/true|false/.test(match)) {\n // boolean\n cls = 'text-purple-500';\n } else if (/null/.test(match)) {\n // null\n cls = 'text-red-400';\n }\n return `<span class=\"${cls}\">${match}</span>`;\n });\n\n return (\n <pre className={cn('w-full overflow-auto text-xs font-bold', className)} dangerouslySetInnerHTML={{ __html: str }} />\n )\n}\n"]}
1
+ {"version":3,"sources":["../components/Common/PanelCard/index.tsx","../components/Common/Copy/index.tsx","../components/Common/JSONHighlight/index.tsx"],"names":["React"],"mappings":";;;;;;;;;AACA,SAAS,YAAY;AACrB,OAAO,WAAW;AAOX,IAAM,YAAY,CAAC,EAAE,OAAO,SAAS,UAAU,MAA0C;AAC9F,SACE,oCAAC,QAAK,WAAW,GAAG,2DAA2D,SAAS,KACtF,oCAAC,OAAE,WAAU,gDAA8C,KAAM,GACjE,oCAAC,SAAI,WAAW,GAAG,2EAA2E,KAAI,OAAQ,CAC5G;AAEJ;;;ACdA,OAAOA,UAAS,WAAW,gBAAgB;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,QAAQ,UAAU,iBAAiB;AAGrC,IAAM,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,WAAW,IAAI,gBAAgB,GAAG,MAAwF;AACtK,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM;AACd,QAAI,QAAQ;AACV,YAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAU,KAAK;AAAA,MACjB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACX,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MAClF,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,wBAAgB,KAAK;AACrB,kBAAU,IAAI;AAAA,MAChB;AAAA;AAAA,IACC,SAAS,gBAAAA,OAAA,cAAC,aAAU,MAAM,UAAU,WAAW,eAAe,IAAK,gBAAAA,OAAA,cAAC,YAAS,MAAM,UAAU,WAAW,eAAe;AAAA,EAC1H;AAEJ;;;AC5BA,OAAOA,YAAW;AAGX,SAAS,cAAc,EAAE,SAAS,UAAU,GAA4C;AAC7F,MAAI,CAAC;AAAS,WAAO;AACrB,YAAU,QAAQ,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM;AACnF,QAAM,MAAM,QAAQ,QAAQ,0GAA0G,SAAU,OAAO;AAErJ,QAAI,MAAM;AACV,QAAI,KAAK,KAAK,KAAK,GAAG;AACpB,UAAI,KAAK,KAAK,KAAK,GAAG;AAEpB,cAAM;AAAA,MACR,OAAO;AAEL,cAAM;AAAA,MACR;AAAA,IACF,WAAW,aAAa,KAAK,KAAK,GAAG;AAEnC,YAAM;AAAA,IACR,WAAW,OAAO,KAAK,KAAK,GAAG;AAE7B,YAAM;AAAA,IACR;AACA,WAAO,gBAAgB,GAAG,KAAK,KAAK;AAAA,EACtC,CAAC;AAED,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAW,GAAG,0CAA0C,SAAS,GAAG,yBAAyB,EAAE,QAAQ,IAAI,GAAG;AAEvH","sourcesContent":["import { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\nimport React from 'react';\n\nexport interface PanelCard {\n title: string | JSX.Element;\n content?: string | JSX.Element;\n}\n\nexport const PanelCard = ({ title, content, className }: PanelCard & { className?: string }) => {\n return (\n <Card className={cn('flex flex-col justify-between border-none p-4 shadow-sm', className)}>\n <p className=\"text-[#6B7280] dark:text-[#cecdcd] text-sm\">{title}</p>\n <div className={cn('mt-2 break-all text-[#374151] dark:text-[#cecdcd] text-base font-semibold')}>{content}</div>\n </Card>\n );\n};\n","\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport copyToClipboard from \"copy-to-clipboard\";\nimport { Copy as CopyIcon, CopyCheck } from \"lucide-react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport const Copy = ({ className = '', value, iconSize = 20, iconClassName = '' }: { className?: string; value: string; iconSize?: number, iconClassName?: string }) => {\n const [copied, setCopied] = useState(false);\n useEffect(() => {\n if (copied) {\n const timer = setTimeout(() => {\n setCopied(false);\n }, 2000);\n return () => clearTimeout(timer);\n }\n }, [copied]);\n return (\n <button\n className={cn(\"rounded-sm p-1 hover:bg-gray-300 dark:hover:bg-gray-600\", className)}\n onClick={(e) => {\n e.preventDefault();\n copyToClipboard(value);\n setCopied(true);\n }}>\n {copied ? <CopyCheck size={iconSize} className={iconClassName} /> : <CopyIcon size={iconSize} className={iconClassName} />}\n </button>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport function JSONHighlight({ jsonStr, className }: { jsonStr: string, className?: string }) {\n if (!jsonStr) return null;\n jsonStr = jsonStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n const str = jsonStr.replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function (match) {\n // number\n let cls = 'text-blue-500';\n if (/^\"/.test(match)) {\n if (/:$/.test(match)) {\n // key\n cls = 'text-gray-700 dark:text-gray-400';\n } else {\n // string\n cls = 'text-green-600';\n }\n } else if (/true|false/.test(match)) {\n // boolean\n cls = 'text-purple-500';\n } else if (/null/.test(match)) {\n // null\n cls = 'text-red-400';\n }\n return `<span class=\"${cls}\">${match}</span>`;\n });\n\n return (\n <pre className={cn('w-full overflow-auto text-xs font-bold', className)} dangerouslySetInnerHTML={{ __html: str }} />\n )\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dappworks/kit",
3
- "version": "0.4.83",
3
+ "version": "0.4.84",
4
4
  "description": "",
5
5
  "main": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.mts",
@@ -129,4 +129,4 @@
129
129
  "dependencies": {
130
130
  "@internationalized/date": "^3.5.4"
131
131
  }
132
- }
132
+ }