Upgrade idea

unosquare · Oct 12, 2023 · ee8a2f5 · ee8a2f5
1 parent aae6655
commit ee8a2f5
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
         "tailwind.config.js"
     ],
     "dependencies": {
-        "@fluentui/react-icons": "^2.0.219",
-        "@tremor/react": "^3.9.1",
+        "@fluentui/react-icons": "^2.0.220",
+        "@tremor/react": "^3.9.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "recharts": "^2.8.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sample/index.tsx b/sample/index.tsx
@@ -9,6 +9,7 @@ import {
 } from '@fluentui/react-icons';
 import { Button, Card, Col, Flex, Grid, Select, SelectItem, Text, Title } from '@tremor/react';
 import {
+    AwaitableMetric,
     BasicToolbar,
     Blur,
     Burger,
@@ -141,7 +142,7 @@ const Application = () => {
                             </StyledMenuActions>
                             <Flex justifyContent='between' alignItems='center' className='gap-4'>
                                 <Text>Options</Text>
-                                <Select value={currentOption} onValueChange={setCurrentOption}>
+                                <Select enableClear={false} value={currentOption} onValueChange={setCurrentOption}>
                                     <SelectItem value={options.A}>Apple</SelectItem>
                                     <SelectItem value={options.B}>Bolt</SelectItem>
                                     <SelectItem value={options.C}>Cactus</SelectItem>
@@ -172,14 +173,25 @@ const Application = () => {
             </BasicToolbar>
             <TremorContainer hasToolbar>
                 <Grid numItems={3} numItemsSm={1} numItemsMd={2} className='gap-6'>
+                    <Card>
+                        <Text>Metric 1</Text>
+                        <AwaitableMetric>{!loading && '100%'}</AwaitableMetric>
+                    </Card>
+                    <Card>
+                        <Text>Metric 2</Text>
+                        <AwaitableMetric>{!loading && '100%'}</AwaitableMetric>
+                    </Card>
+                    <Card>
+                        <Text>Metric 3</Text>
+                        <AwaitableMetric>{!loading && '100%'}</AwaitableMetric>
+                    </Card>
                     <Card>
                         <DataChart
-                            rawData={chartData}
+                            rawData={loading ? undefined : chartData}
                             dataCallback={identity}
                             legend
                             className='mt-5'
                             legendFormatType='percentage'
-                            isLoading={loading}
                             tooltip='tremor'
                             onClick={console.log}
                         />
@@ -188,9 +200,8 @@ const Application = () => {
                         <Text className='font-medium'>Bar Chart</Text>
                         <ChartBar
                             className='mt-5'
-                            rawData={chartData}
+                            rawData={loading ? undefined : chartData}
                             dataCallback={identity}
-                            isLoading={loading}
                             legendFormatType='percentage'
                             legend
                             tooltip='tremor'
@@ -200,7 +211,7 @@ const Application = () => {
                     <Card className='h-96'>
                         <Text className='font-medium'>Pie Chart</Text>
                         <PieChart
-                            rawData={chartData}
+                            rawData={loading ? undefined : chartData}
                             dataCallback={(d) => Object.values(d).map((x: any) => ({ name: x.name, value: x.Value }))}
                             legendFormatType='money'
                         />

diff --git a/src/AwaitableMetric/index.tsx b/src/AwaitableMetric/index.tsx
@@ -1,14 +1,10 @@
 import React, { PropsWithChildren } from 'react';
 import { Metric } from '@tremor/react';
 import { twMerge } from 'tailwind-merge';
+import { ClassNameComponent } from '../constants';
 
-export type MetricSettings = {
-    isLoading: boolean;
-    className?: string;
-};
-
-export const AwaitableMetric = ({ isLoading = false, className, children }: PropsWithChildren<MetricSettings>) =>
-    isLoading ? (
+export const AwaitableMetric = ({ className, children }: PropsWithChildren<ClassNameComponent>) =>
+    !children ? (
         <Metric className={twMerge(className, 'loading-shimmer')}>&nbsp;</Metric>
     ) : (
         <Metric className={className}>{children}</Metric>

diff --git a/src/ChartBar/index.tsx b/src/ChartBar/index.tsx
@@ -21,7 +21,7 @@ import { getColorClassNames } from '@tremor/react/dist/lib/utils';
 import { BaseColors } from '@tremor/react/dist/lib/constants';
 import ChartLegend from '@tremor/react/dist/components/chart-elements/common/ChartLegend';
 import { UnoChartTooltip } from '../ChartLegend';
-import { ChartTooltipType, LegendFormatType } from '../constants';
+import { ChartComponent, ChartTooltipType, LegendFormatType } from '../constants';
 import { NoData } from '../NoData';
 import { formatTicks, getValueFormatted } from '../utils';
 import { ChartBarShimmer } from '../ChartShimmers';
@@ -30,12 +30,9 @@ type XAxisPrimaryFormatter = {
     (input: string): string;
 };
 
-export type ChartBarSettings<TDataIn> = {
-    rawData?: TDataIn;
+export type ChartBarSettings<TDataIn> = ChartComponent<TDataIn, Record<string, unknown>[]> & {
     tooltip?: ChartTooltipType;
-    colors?: Color[];
     legendFormatType?: LegendFormatType;
-    dataCallback?: (data: TDataIn) => Record<string, unknown>[];
     legend?: boolean;
     domain?: number;
     unit?: string;
@@ -50,8 +47,6 @@ export type ChartBarSettings<TDataIn> = {
     accumulated?: boolean;
     scroll?: boolean;
     refLineY?: { value: number; label: string; color: string };
-    isLoading?: boolean;
-    className?: string;
 };
 
 export const ChartBar = <T,>({
@@ -70,7 +65,6 @@ export const ChartBar = <T,>({
     legendFormatType,
     accumulated = false,
     scroll = false,
-    isLoading = false,
     refLineY,
     className,
 }: ChartBarSettings<T>) => {
@@ -100,7 +94,7 @@ export const ChartBar = <T,>({
         setDataStore((dataCallback && rawData && dataCallback(rawData)) || []);
     }, [rawData, dataCallback]);
 
-    if (isLoading) return <ChartBarShimmer className={className} />;
+    if (!rawData) return <ChartBarShimmer className={className} />;
 
     return (
         <Flex className={twMerge('w-full h-60', className)}>

diff --git a/src/ComposedLineChart/index.tsx b/src/ComposedLineChart/index.tsx
@@ -33,7 +33,6 @@ interface ComposedLineChartSettings<TDataIn> extends ChartComponent<TDataIn, Rec
     domain?: number;
     unit?: string;
     refLineY?: { value: number; label: string; color: string };
-    isLoading?: boolean;
     formats?: FormatTypes[];
     legendFormatTypes?: legendXAxis;
     lines: lineChart[];
@@ -60,7 +59,6 @@ export const ComposedLineChart = <T,>({
     domain,
     unit,
     refLineY,
-    isLoading,
     formats,
     lines,
 }: ComposedLineChartSettings<T>) => {
@@ -80,7 +78,7 @@ export const ComposedLineChart = <T,>({
         themeColorRange,
     );
 
-    if (isLoading) return <ChartLineShimmer />;
+    if (!rawData) return <ChartLineShimmer />;
 
     return (
         <Flex className='w-full h-48'>

diff --git a/src/DataChart/index.tsx b/src/DataChart/index.tsx
@@ -32,7 +32,6 @@ export type DataChartSettings<TDataIn> = ChartComponent<TDataIn, Record<string,
     domain?: number;
     unit?: string;
     refLineY?: { value: number; label: string; color: string };
-    isLoading?: boolean;
 };
 
 const margin = {
@@ -67,7 +66,6 @@ export const DataChart = <T,>({
     domain,
     unit,
     refLineY,
-    isLoading,
     className,
     tooltip = 'classic',
 }: DataChartSettings<T>) => {
@@ -90,7 +88,7 @@ export const DataChart = <T,>({
         setDataStore((dataCallback && rawData && dataCallback(rawData)) || []);
     }, [rawData, dataCallback]);
 
-    if (isLoading) return <ChartLineShimmer className={className} />;
+    if (!rawData) return <ChartLineShimmer className={className} />;
 
     return (
         <Flex className={twMerge('w-full h-60', className)}>

diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
@@ -23,6 +23,12 @@ export const PieChart = <T,>({
         colors,
     );
 
+    if (!rawData) {
+        return (
+            <div className={twMerge('h-60 w-60 content-center loading-shimmer rounded-full', className)}>&nbsp;</div>
+        );
+    }
+
     return dataStore.length > 0 ? (
         <div className={twMerge('h-60', className)}>
             <ResponsiveContainer>

diff --git a/src/Table/index.tsx b/src/Table/index.tsx
@@ -26,25 +26,28 @@ import { twMerge } from 'tailwind-merge';
 import { tremorTwMerge } from '@tremor/react/dist/lib/tremorTwMerge';
 import { sizing } from '@tremor/react/dist/lib/sizing';
 import { border } from '@tremor/react/dist/lib/shape';
-import { DataTypes, SortDirection } from '../constants';
+import { ClassNameComponent, DataComponent, DataTypes, SortDirection } from '../constants';
 import { NoData } from '../NoData';
 import { searchData, searchFooter, sortData, TableCellTypes, TableColumn } from './sortData';
 import { ExportCsvButton } from '../ExportCsvButton';
 import { useDebounce } from '../hooks';
-import { DataComponent } from '../utils';
 
 export * from './sortData';
 
-export type TableSettings<TDataIn> = DataComponent<TDataIn, TableCellTypes[][]> & {
-    columns: TableColumn[];
-    noDataElement?: React.ReactNode;
-    searchable?: boolean;
-    calculateFooter?: (data: TDataIn) => unknown[];
-    sortable?: boolean;
-    exportCsv?: boolean;
-    render?: (data: TableCellTypes[][], definitions: TableColumn[], rawData: TDataIn | undefined) => React.ReactNode;
-    className?: string;
-};
+export type TableSettings<TDataIn> = DataComponent<TDataIn, TableCellTypes[][]> &
+    ClassNameComponent & {
+        columns: TableColumn[];
+        noDataElement?: React.ReactNode;
+        searchable?: boolean;
+        calculateFooter?: (data: TDataIn) => unknown[];
+        sortable?: boolean;
+        exportCsv?: boolean;
+        render?: (
+            data: TableCellTypes[][],
+            definitions: TableColumn[],
+            rawData: TDataIn | undefined,
+        ) => React.ReactNode;
+    };
 
 type HeaderSettings = {
     $sortable: boolean;
@@ -260,8 +263,8 @@ const getRows = (data: TableCellTypes[][], definitions: TableColumn[]) =>
     ));
 
 const renderToRowString = (data: TableCellTypes[][], definitions: TableColumn[]) =>
-    data.map((row: TableCellTypes[]) =>
-        row.map((cell: TableCellTypes, index: number) => {
+    data.map((row) =>
+        row.map((cell, index) => {
             const dataType = definitions[index]?.dataType;
             if (dataType === 'boolean') return cell ? 'TRUE' : 'FALSE';
             if (!cell && dataType === 'money') return '$0.00';

diff --git a/src/constants.ts b/src/constants.ts
@@ -28,10 +28,17 @@ export type DataTypes =
 
 export type SortDirection = 'asc' | 'desc';
 
-export type ChartComponent<TDataIn, TDataOut> = {
-    colors?: Color[];
-    legendFormatType?: LegendFormatType;
-    rawData?: TDataIn;
-    dataCallback?: (data: TDataIn) => TDataOut;
+export type ClassNameComponent = {
     className?: string;
 };
+
+export type DataComponent<TDataIn, TDataOut> = {
+    rawData: TDataIn | undefined;
+    dataCallback: (data: TDataIn) => TDataOut;
+};
+
+export type ChartComponent<TDataIn, TDataOut> = DataComponent<TDataIn, TDataOut> &
+    ClassNameComponent & {
+        colors?: Color[];
+        legendFormatType?: LegendFormatType;
+    };
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,11 +1,6 @@
 import { formatter } from 'uno-js';
 import { LegendFormatType } from './constants';
 
-export type DataComponent<TDataIn, TDataOut> = {
-    rawData: TDataIn | undefined;
-    dataCallback: (data: TDataIn) => TDataOut;
-};
-
 export const translateFormat = (format?: LegendFormatType) => {
     switch (format) {
         case 'money':