@layerfi/components 0.1.40 → 0.1.42

package/dist/index.d.ts

@@ -2387,10 +2387,11 @@ declare module '@layerfi/components/components/ProfitAndLoss/ProfitAndLoss' {
           asContainer?: boolean | undefined;
           stringOverrides?: import("@layerfi/components/components/ProfitAndLossTable/ProfitAndLossTable").ProfitAndLossTableStringOverrides | undefined;
       }) => React.JSX.Element;
-      DetailedCharts: ({ scope, hideClose, showDatePicker, stringOverrides, }: {
+      DetailedCharts: ({ scope, hideClose, showDatePicker, chartColorsList, stringOverrides, }: {
           scope?: import("@layerfi/components/hooks/useProfitAndLoss/useProfitAndLoss").SidebarScope;
           hideClose?: boolean | undefined;
           showDatePicker?: boolean | undefined;
+          chartColorsList?: string[] | undefined;
           stringOverrides?: import("@layerfi/components/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts").ProfitAndLossDetailedChartsStringOverrides | undefined;
       }) => React.JSX.Element;
   };
@@ -2451,8 +2452,9 @@ declare module '@layerfi/components/components/ProfitAndLossDetailedCharts/Detai
       date: number | Date;
       isLoading?: boolean;
       showDatePicker?: boolean;
+      chartColorsList?: string[];
   }
-  export const DetailedChart: ({ filteredData, filteredTotal, hoveredItem, setHoveredItem, sidebarScope, date, isLoading, showDatePicker, }: DetailedChartProps) => React.JSX.Element;
+  export const DetailedChart: ({ filteredData, filteredTotal, hoveredItem, setHoveredItem, sidebarScope, date, chartColorsList, isLoading, showDatePicker, }: DetailedChartProps) => React.JSX.Element;
   export {};
 
 }
@@ -2473,13 +2475,14 @@ declare module '@layerfi/components/components/ProfitAndLossDetailedCharts/Detai
       sidebarScope: SidebarScope;
       filters: ProfitAndLossFilters;
       sortBy: (scope: Scope, field: string, direction?: SortDirection) => void;
+      chartColorsList?: string[];
       stringOverrides?: DetailedTableStringOverrides;
   }
-  export const mapColorsToTypes: (data: any[]) => {
+  export const mapTypesToColors: (data: any[], colorList?: string[]) => {
       color: any;
       opacity: any;
   }[];
-  export const DetailedTable: ({ filteredData, sidebarScope, filters, sortBy, hoveredItem, setHoveredItem, stringOverrides, }: DetailedTableProps) => React.JSX.Element;
+  export const DetailedTable: ({ filteredData, sidebarScope, filters, sortBy, hoveredItem, setHoveredItem, chartColorsList, stringOverrides, }: DetailedTableProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/ProfitAndLossDetailedCharts/Filters' {
@@ -2502,10 +2505,11 @@ declare module '@layerfi/components/components/ProfitAndLossDetailedCharts/Profi
   export interface ProfitAndLossDetailedChartsStringOverrides {
       detailedTableStringOverrides?: DetailedTableStringOverrides;
   }
-  export const ProfitAndLossDetailedCharts: ({ scope, hideClose, showDatePicker, stringOverrides, }: {
+  export const ProfitAndLossDetailedCharts: ({ scope, hideClose, showDatePicker, chartColorsList, stringOverrides, }: {
       scope?: SidebarScope;
       hideClose?: boolean | undefined;
       showDatePicker?: boolean | undefined;
+      chartColorsList?: string[] | undefined;
       stringOverrides?: ProfitAndLossDetailedChartsStringOverrides | undefined;
   }) => React.JSX.Element;
 
@@ -3253,7 +3257,7 @@ declare module '@layerfi/components/config/charts' {
   export const INACTIVE_OPACITY_LEVELS: number[];
   export const DEFAULT_CHART_OPACITY: number[];
   export const DEFAULT_CHART_COLOR_TYPE: string[];
-  export const DEFAULT_CHART_COLORS: {
+  export const DEFAULT_MINICHART_COLORS: {
       color: string;
       opacity: number;
   }[];
@@ -5373,9 +5377,10 @@ declare module '@layerfi/components/views/AccountingOverview/AccountingOverview'
       enableOnboarding?: boolean;
       onTransactionsToReviewClick?: () => void;
       middleBanner?: ReactNode;
+      chartColorsList?: string[];
       stringOverrides?: AccountingOverviewStringOverrides;
   }
-  export const AccountingOverview: ({ title, enableOnboarding, onTransactionsToReviewClick, middleBanner, stringOverrides, }: AccountingOverviewProps) => React.JSX.Element;
+  export const AccountingOverview: ({ title, enableOnboarding, onTransactionsToReviewClick, middleBanner, chartColorsList, stringOverrides, }: AccountingOverviewProps) => React.JSX.Element;
   export {};
 
 }

package/dist/index.js

@@ -9460,9 +9460,9 @@ var ProfitAndLossChart = ({
     name: getMonthName(pnl),
     revenue: pnl?.income || 0,
     revenueUncategorized: pnl?.uncategorizedInflows || 0,
-    expenses: -(pnl?.totalExpenses || 0),
+    expenses: -(pnl?.operatingExpenses || 0),
     expensesUncategorized: -(pnl?.uncategorizedOutflows || 0),
-    operatingExpensesInverse: pnl?.totalExpenses || 0,
+    operatingExpensesInverse: pnl?.operatingExpensesInverse || 0,
     uncategorizedOutflowsInverse: pnl?.uncategorizedOutflowsInverse || 0,
     netProfit: pnl?.netProfit || 0,
     selected: !!pnl && pnl.month === selectionMonth.month + 1 && pnl.year === selectionMonth.year,
@@ -10062,9 +10062,6 @@ var convertCurrencyToNumber = (amount) => {
   return parseFloat(inputValue);
 };
 
-// src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-var import_recharts2 = require("recharts");
-
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
 var import_react105 = __toESM(require("react"));
 
@@ -10083,7 +10080,7 @@ var DEFAULT_CHART_COLOR_TYPE = [
   "#6A52CC",
   "#71CC56"
 ];
-var DEFAULT_CHART_COLORS = [
+var DEFAULT_MINICHART_COLORS = [
   {
     color: "#7417B3",
     opacity: 1
@@ -10225,14 +10222,14 @@ var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
 var import_classnames44 = __toESM(require("classnames"));
-var mapColorsToTypes = (data) => {
+var mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
   const typeToColor = {};
   const typeToLastOpacity = {};
   let colorIndex = 0;
   return data.map((obj) => {
     const type = obj.type;
     if (!typeToColor[type]) {
-      typeToColor[type] = DEFAULT_CHART_COLOR_TYPE[colorIndex % DEFAULT_CHART_COLOR_TYPE.length];
+      typeToColor[type] = colorList[colorIndex % colorList.length];
       colorIndex++;
       typeToLastOpacity[type] = 1;
     } else {
@@ -10252,6 +10249,7 @@ var DetailedTable = ({
   sortBy,
   hoveredItem,
   setHoveredItem,
+  chartColorsList,
   stringOverrides
 }) => {
   const buildColClass = (column) => {
@@ -10260,8 +10258,8 @@ var DetailedTable = ({
       sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
     );
   };
-  const typeColorMapping = mapColorsToTypes(filteredData);
-  let colorIndex = 0;
+  const typeColorMapping = mapTypesToColors(filteredData, chartColorsList);
+  const colorIndex = 0;
   return /* @__PURE__ */ import_react105.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react105.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react105.default.createElement("table", null, /* @__PURE__ */ import_react105.default.createElement("thead", null, /* @__PURE__ */ import_react105.default.createElement("tr", null, /* @__PURE__ */ import_react105.default.createElement(
     "th",
     {
@@ -10319,6 +10317,7 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
+var import_recharts2 = require("recharts");
 var DetailedChart = ({
   filteredData,
   filteredTotal,
@@ -10326,6 +10325,7 @@ var DetailedChart = ({
   setHoveredItem,
   sidebarScope,
   date,
+  chartColorsList,
   isLoading,
   showDatePicker = true
 }) => {
@@ -10349,7 +10349,7 @@ var DetailedChart = ({
     });
   }, [filteredData, isLoading]);
   const noValue = chartData.length === 0 || !chartData.find((x) => x.value !== 0);
-  const typeColorMapping = mapColorsToTypes(chartData);
+  const typeColorMapping = mapTypesToColors(chartData, chartColorsList);
   return /* @__PURE__ */ import_react106.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react106.default.createElement("div", { className: "header--tablet" }, showDatePicker && /* @__PURE__ */ import_react106.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react106.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react106.default.createElement(import_recharts2.ResponsiveContainer, null, /* @__PURE__ */ import_react106.default.createElement(import_recharts2.PieChart, null, !isLoading && !noValue ? /* @__PURE__ */ import_react106.default.createElement(
     import_recharts2.Pie,
     {
@@ -10629,6 +10629,7 @@ var ProfitAndLossDetailedCharts = ({
   scope,
   hideClose = false,
   showDatePicker = false,
+  chartColorsList,
   stringOverrides
 }) => {
   const {
@@ -10666,6 +10667,7 @@ var ProfitAndLossDetailedCharts = ({
       sidebarScope: theScope,
       date: dateRange.startDate,
       isLoading,
+      chartColorsList,
       showDatePicker
     }
   ), /* @__PURE__ */ import_react108.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ import_react108.default.createElement(
@@ -10685,6 +10687,7 @@ var ProfitAndLossDetailedCharts = ({
       sortBy,
       hoveredItem,
       setHoveredItem,
+      chartColorsList,
       stringOverrides: stringOverrides?.detailedTableStringOverrides
     }
   ))));
@@ -10715,7 +10718,7 @@ var MiniChart = ({ data }) => {
       animationEasing: "ease-in-out"
     },
     data.map((entry, index) => {
-      const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+      const colorConfig = DEFAULT_MINICHART_COLORS[index % DEFAULT_MINICHART_COLORS.length];
       return /* @__PURE__ */ import_react109.default.createElement(
         import_recharts3.Cell,
         {
@@ -15316,6 +15319,7 @@ var AccountingOverview = ({
   enableOnboarding = false,
   onTransactionsToReviewClick,
   middleBanner,
+  chartColorsList,
   stringOverrides
 }) => {
   const [pnlToggle, setPnlToggle] = (0, import_react174.useState)("revenue");
@@ -15374,7 +15378,8 @@ var AccountingOverview = ({
       {
         scope: "revenue",
         hideClose: true,
-        stringOverrides: stringOverrides?.profitAndLoss?.detailedCharts
+        stringOverrides: stringOverrides?.profitAndLoss?.detailedCharts,
+        chartColorsList
       }
     )
   ), /* @__PURE__ */ import_react174.default.createElement(
@@ -15390,7 +15395,8 @@ var AccountingOverview = ({
       {
         scope: "expenses",
         hideClose: true,
-        stringOverrides: stringOverrides?.profitAndLoss?.detailedCharts
+        stringOverrides: stringOverrides?.profitAndLoss?.detailedCharts,
+        chartColorsList
       }
     )
   ))));