@ttoss/react-dashboard 0.1.6 → 0.1.10

package/dist/esm/index.js

@@ -8,7 +8,6 @@ var __name = (target, value) => __defProp(target, "name", {
 
 // src/Dashboard.tsx
 import { Divider, Flex as Flex6 } from "@ttoss/ui";
-import * as React8 from "react";
 
 // src/DashboardGrid.tsx
 import "react-grid-layout/css/styles.css";
@@ -133,10 +132,10 @@ var getValueColor = /* @__PURE__ */__name((color, variant) => {
 }, "getValueColor");
 var getTrendColor = /* @__PURE__ */__name(status => {
   if (status === "positive") {
-    return "display.text.accent.default";
+    return "feedback.text.positive.default";
   }
   if (status === "negative") {
-    return "display.text.negative.default";
+    return "feedback.text.negative.default";
   }
   return "display.text.primary.default";
 }, "getTrendColor");
@@ -179,16 +178,13 @@ var BigNumber = /* @__PURE__ */__name(props => {
   }) : props.trend.status === "negative" ? /* @__PURE__ */React.createElement(Icon, {
     icon: "mdi:arrow-down",
     width: 16
-  }) : null, props.trend.status === "neutral" ? /* @__PURE__ */React.createElement(Icon, {
-    icon: "mdi:arrow-right",
-    width: 16
-  }) : null), /* @__PURE__ */React.createElement(Text2, {
+  }) : null), ["positive", "negative"].includes(props.trend?.status || "") && /* @__PURE__ */React.createElement(Text2, {
     sx: {
       color: getTrendColor(props.trend.status),
       fontSize: "sm",
       fontWeight: "medium"
     }
-  }, props.trend.status === "positive" ? "+" : "", props.trend.status === "negative" ? "-" : "", props.trend.status === "neutral" ? "" : "", props.trend.value.toFixed(1), "%", " ", props.trend ? "vs. per\xEDodo anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text2, {
+  }, props.trend.status === "positive" ? "+" : "", props.trend.value.toFixed(1), "%", " ", props.trend ? "vs. per\xEDodo anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text2, {
     sx: {
       color: getValueColor(props.color, props.variant),
       fontSize: "sm",
@@ -315,7 +311,8 @@ var DashboardProvider = /* @__PURE__ */__name(props => {
   const {
     filters: externalFilters,
     templates: externalTemplates,
-    onFiltersChange
+    onFiltersChange,
+    selectedTemplate
   } = props;
   const onFiltersChangeRef = React2.useRef(onFiltersChange);
   const filtersRef = React2.useRef(externalFilters);
@@ -336,14 +333,6 @@ var DashboardProvider = /* @__PURE__ */__name(props => {
   }, []
   // Empty deps - we use refs for current values
   );
-  const selectedTemplate = React2.useMemo(() => {
-    const templateId = externalFilters.find(filter => {
-      return filter.key === "template";
-    })?.value;
-    return externalTemplates.find(template => {
-      return template.id === templateId;
-    });
-  }, [externalFilters, externalTemplates]);
   return /* @__PURE__ */React2.createElement(DashboardContext.Provider, {
     value: {
       filters: externalFilters,
@@ -573,37 +562,38 @@ var DashboardHeader = /* @__PURE__ */__name(({
 // src/Dashboard.tsx
 var DashboardContent = /* @__PURE__ */__name(({
   loading = false,
-  headerChildren
+  headerChildren,
+  selectedTemplate
 }) => {
-  const {
-    selectedTemplate
-  } = useDashboard();
-  return /* @__PURE__ */React8.createElement(Flex6, {
+  return /* @__PURE__ */React.createElement(Flex6, {
     sx: {
       flexDirection: "column",
       gap: "5",
       padding: "2",
       width: "100%"
     }
-  }, /* @__PURE__ */React8.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React8.createElement(Divider, null), /* @__PURE__ */React8.createElement(DashboardGrid, {
+  }, /* @__PURE__ */React.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React.createElement(Divider, null), /* @__PURE__ */React.createElement(DashboardGrid, {
     loading,
     selectedTemplate
   }));
 }, "DashboardContent");
 var Dashboard = /* @__PURE__ */__name(({
+  selectedTemplate,
   loading = false,
   templates = [],
   filters = [],
   headerChildren,
   onFiltersChange
 }) => {
-  return /* @__PURE__ */React8.createElement(DashboardProvider, {
+  return /* @__PURE__ */React.createElement(DashboardProvider, {
     filters,
     templates,
-    onFiltersChange
-  }, /* @__PURE__ */React8.createElement(DashboardContent, {
+    onFiltersChange,
+    selectedTemplate
+  }, /* @__PURE__ */React.createElement(DashboardContent, {
     loading,
-    headerChildren
+    headerChildren,
+    selectedTemplate
   }));
 }, "Dashboard");
 export { Dashboard, DashboardCard, DashboardFilterType, DashboardFilters, DashboardGrid, DashboardHeader, DashboardProvider, useDashboard };

package/dist/index.d.ts

@@ -23,11 +23,18 @@ type CardVariant = 'default' | 'dark' | 'light-green';
 type TrendIndicator = {
     value: number;
     status?: 'positive' | 'negative' | 'neutral';
+    type?: 'higher' | 'lower';
 };
 type StatusIndicator = {
     text: string;
     icon?: string;
 };
+type SourceType = CardSourceType['source'];
+type MetricsRecord = {
+    [K in SourceType]: {
+        [P in K]: string[];
+    } & Partial<Record<Exclude<SourceType, K>, string[]>>;
+}[SourceType];
 interface DashboardCard {
     title: string;
     description?: string;
@@ -42,6 +49,7 @@ interface DashboardCard {
     trend?: TrendIndicator;
     additionalInfo?: string;
     status?: StatusIndicator;
+    metrics?: MetricsRecord[];
 }
 declare const DashboardCard: (props: DashboardCard) => react_jsx_runtime.JSX.Element | null;
 
@@ -83,7 +91,8 @@ interface DashboardTemplate {
     description?: string;
     grid: DashboardGridItem[];
 }
-declare const Dashboard: ({ loading, templates, filters, headerChildren, onFiltersChange, }: {
+declare const Dashboard: ({ selectedTemplate, loading, templates, filters, headerChildren, onFiltersChange, }: {
+    selectedTemplate?: DashboardTemplate;
     loading?: boolean;
     headerChildren?: React.ReactNode;
     templates?: DashboardTemplate[];
@@ -105,6 +114,7 @@ declare const DashboardProvider: (props: {
     filters: DashboardFilter[];
     templates: DashboardTemplate[];
     onFiltersChange?: (filters: DashboardFilter[]) => void;
+    selectedTemplate?: DashboardTemplate;
 }) => react_jsx_runtime.JSX.Element;
 declare const useDashboard: () => {
     filters: DashboardFilter[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-dashboard",
-  "version": "0.1.6",
+  "version": "0.1.10",
   "description": "ttoss dashboard module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -26,11 +26,11 @@
   "dependencies": {
     "react-day-picker": "^9.11.3",
     "react-grid-layout": "^1.5.2",
-    "@ttoss/components": "^2.11.2",
-    "@ttoss/forms": "^0.36.3",
-    "@ttoss/react-i18n": "^2.0.25",
+    "@ttoss/components": "^2.11.4",
+    "@ttoss/forms": "^0.36.5",
     "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/ui": "^6.3.0"
+    "@ttoss/react-i18n": "^2.0.25",
+    "@ttoss/ui": "^6.3.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0"