@credithub/harlan-components 1.13.8 → 1.14.0

package/lib/cjs/components/chart/chartContent.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
-import { DataInput } from "./plotly/types";
-interface ChartContentProps {
+import { DataInput } from "./types/iChart";
+declare const ChartContent: React.FC<{
     dataInput: DataInput;
-}
-declare const ChartContent: React.FC<ChartContentProps>;
+}>;
 export default ChartContent;

package/lib/cjs/components/chart/chartContent.js

@@ -1,87 +1,55 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_plotly_js_1 = __importDefault(require("react-plotly.js"));
-var chartHelper_1 = require("./chartHelper");
-var plotly_1 = require("./plotly");
-var processChartData_1 = require("./processChartData");
-var pieChartDataStrategy_1 = require("./plotly/pieChartDataStrategy");
-var getUniqueDates_1 = require("./getUniqueDates");
-var underscore_1 = require("underscore");
-var categoryProtestos_1 = __importDefault(require("./categoryProtestos"));
+var react_1 = __importDefault(require("react"));
+var chart_js_1 = require("chart.js");
+var categoryProtestos_1 = __importDefault(require("./components/categoryProtestos"));
 var responsiveGrid_1 = __importDefault(require("../interface/responsiveGrid"));
+var PieChart_1 = __importDefault(require("./components/PieChart"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var MixedChart_1 = __importDefault(require("./components/MixedChart"));
+var chartjs_plugin_datalabels_1 = __importDefault(require("chartjs-plugin-datalabels"));
+var useWindowSize_1 = require("../../hooks/useWindowSize");
+chart_js_1.Chart.register.apply(chart_js_1.Chart, __spreadArray([chartjs_plugin_datalabels_1.default], chart_js_1.registerables, false));
+var Title = styled_components_1.default.h2(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: left;\n  margin-bottom: 20px;\n"], ["\n  text-align: left;\n  margin-bottom: 20px;\n"])));
+var getWidth = function (windowWidth, chartType) {
+    var baseWidth = windowWidth <= 768 ? "98%" : windowWidth <= 1200 ? "92%" : "100%";
+    if (chartType === "pie") {
+        return windowWidth <= 1001 ? "80%" : windowWidth <= 1200 ? "80%" : "100%";
+    }
+    return baseWidth;
+};
+var ChartContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
+    var windowWidth = _a.windowWidth, chartType = _a.chartType;
+    return getWidth(windowWidth, chartType);
+});
 var ChartContent = function (_a) {
-    var _b;
     var dataInput = _a.dataInput;
-    var _c = (0, react_1.useState)(window.innerWidth), windowWidth = _c[0], setWindowWidth = _c[1];
-    // Atualiza a largura da janela
-    var updateWindowWidth = function () {
-        setWindowWidth(window.innerWidth);
-    };
-    (0, react_1.useEffect)(function () {
-        window.addEventListener("resize", updateWindowWidth);
-        return function () { return window.removeEventListener("resize", updateWindowWidth); };
-    }, []);
-    var pieChartData = (0, react_1.useMemo)(function () {
-        var pieChartStrategy = new pieChartDataStrategy_1.PieChartDataStrategy();
-        return (0, chartHelper_1.createPieChart)(pieChartStrategy.processData(dataInput));
-    }, [dataInput]);
-    var pieChartWidth = windowWidth > 1000 ? windowWidth * 0.4 : windowWidth * 0.92;
-    var lineBarChartWidth = windowWidth > 1000 && (pieChartData === null || pieChartData === void 0 ? void 0 : pieChartData.possuiPendencias) ? windowWidth * 0.55 : windowWidth * 0.92;
-    var dates = (0, react_1.useMemo)(function () {
-        return (0, getUniqueDates_1.getUniqueDates)(dataInput);
-    }, [dataInput]);
-    var chartData = (0, react_1.useMemo)(function () {
-        return dataInput ? (0, processChartData_1.processChartData)({ dataInput: dataInput, dates: dates }) : [];
-    }, [dataInput, dates]);
-    var lastDate = (0, underscore_1.max)(dates, function (x) { return x.getTime(); });
-    var plotLayout = (0, plotly_1.layoutLineBarChart)(lineBarChartWidth, lastDate);
+    var windowWidth = (0, useWindowSize_1.useWindowSize)().width;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(responsiveGrid_1.default, { desktop: "1fr 2fr" },
-            react_1.default.createElement("div", { hidden: !pieChartData.possuiPendencias, style: { width: pieChartWidth } },
-                react_1.default.createElement("h2", null, "Quantidade de Ocorr\u00EAncias"),
-                react_1.default.createElement(react_plotly_js_1.default, { config: { displayModeBar: false }, data: [__assign(__assign({}, pieChartData), { values: (_b = pieChartData === null || pieChartData === void 0 ? void 0 : pieChartData.values) === null || _b === void 0 ? void 0 : _b.map(function (e) { return e === '0' ? null : e; }) })], layout: { width: pieChartWidth, paper_bgcolor: "rgba(0,0,0,0)" } })),
-            react_1.default.createElement("div", { style: { width: lineBarChartWidth } },
-                react_1.default.createElement("h2", null, "Quantidade de Ocorr\u00EAncias por Consulta"),
-                react_1.default.createElement(react_plotly_js_1.default, { data: chartData, layout: plotLayout }))),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(categoryProtestos_1.default, { width: windowWidth * 0.9, height: 256 }))));
+            react_1.default.createElement(ChartContainer, { windowWidth: windowWidth, chartType: "pie" },
+                react_1.default.createElement(Title, null, "Resumo de Ocorr\u00EAncias"),
+                react_1.default.createElement(PieChart_1.default, { dataInput: dataInput })),
+            react_1.default.createElement(ChartContainer, { windowWidth: windowWidth, chartType: "mixed" },
+                react_1.default.createElement(Title, null, "Detalhamento por Categoria"),
+                react_1.default.createElement(MixedChart_1.default, { dataInput: dataInput }))),
+        react_1.default.createElement(categoryProtestos_1.default, { dataInput: dataInput.protestosCategory || [] })));
 };
 exports.default = ChartContent;
+var templateObject_1, templateObject_2;

package/lib/cjs/components/chart/chartSystem.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ChartSystemProps {
+    documento: string;
+}
+declare const ChartSystem: React.FC<ChartSystemProps>;
+export default ChartSystem;

package/lib/cjs/components/chart/chartSystem.js

@@ -0,0 +1,50 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var chartUtils_1 = require("./utils/chartUtils");
+var header_1 = __importDefault(require("../interface/header"));
+var statusMessage_1 = __importDefault(require("../interface/statusMessage"));
+var useToggle_1 = __importDefault(require("../../hooks/useToggle"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var quantityResult_1 = __importDefault(require("./quantityResult"));
+var chartContent_1 = __importDefault(require("./chartContent"));
+var btnWrapper_1 = __importDefault(require("../../assets/btn/btnWrapper"));
+var chevronUp_1 = __importDefault(require("../../assets/btn/chevronUp"));
+var chevronDown_1 = __importDefault(require("../../assets/btn/chevronDown"));
+var useChartData_1 = __importDefault(require("./hooks/useChartData"));
+var result_1 = require("../interface/result");
+var resumoNegativacoes_1 = __importDefault(require("../../assets/icones/resumoNegativacoes"));
+var Content = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n"], ["\n  display: ", ";\n"])), function (props) { return (props.isOpen ? "block" : "none"); });
+var ChartSystem = function (_a) {
+    var _b, _c, _d;
+    var documento = _a.documento;
+    var _e = (0, useChartData_1.default)(documento), data = _e.data, isLoading = _e.isLoading, error = _e.error;
+    var errorMessage = typeof error === "string" ? error : error === null || error === void 0 ? void 0 : error.toString();
+    var _f = (0, useToggle_1.default)(true), isOpen = _f[0], toggleOpen = _f[1];
+    var ultimaOcorrenciaCCF = (0, chartUtils_1.useUltimaOcorrenciaCCF)();
+    var quantidadeProtestos = ((_c = (_b = data === null || data === void 0 ? void 0 : data.protestos) === null || _b === void 0 ? void 0 : _b[(data === null || data === void 0 ? void 0 : data.protestos.length) - 1]) === null || _c === void 0 ? void 0 : _c.quantidade) || 0;
+    var valorTotalProtestos = (0, chartUtils_1.useCalculation)((data === null || data === void 0 ? void 0 : data.protestos) || []).valorTotal;
+    var _g = (0, chartUtils_1.useDividasPublicas)(), quantidadeDividas = _g.quantidade, valorTotalDividas = _g.valorTotal;
+    var _h = (0, chartUtils_1.useCalculation)((data === null || data === void 0 ? void 0 : data.serasa) || []), quantidadeSerasa = _h.quantidade, valorTotalSerasa = _h.valorTotal;
+    var _j = (0, chartUtils_1.useCalculation)((data === null || data === void 0 ? void 0 : data.boaVista) || []), quantidadeBoaVista = _j.quantidade, valorTotalBoaVista = _j.valorTotal;
+    var quantidadeCCFs = (0, chartUtils_1.useCalculation)((data === null || data === void 0 ? void 0 : data.ccfs) || []).quantidade;
+    var ultimaOcorrenciaProtestos = "";
+    if ((data === null || data === void 0 ? void 0 : data.protestos) && data.protestos.length > 0) {
+        ultimaOcorrenciaProtestos = new Date(data.protestos[data.protestos.length - 1].data).toLocaleDateString();
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(header_1.default, { title: "Resumo de Negativa\u00E7\u00F5es", subtitle: "Veja a quantidade de ocorr\u00EAncias conforme o documento foi consultado ao longo do tempo", description: errorMessage && (react_1.default.createElement(statusMessage_1.default, { type: "error" }, errorMessage)), variant: isLoading ? "loading" : "default", icon: resumoNegativacoes_1.default, actions: react_1.default.createElement(btnWrapper_1.default, { onClick: toggleOpen }, isOpen ? react_1.default.createElement(chevronUp_1.default, null) : react_1.default.createElement(chevronDown_1.default, null)) }),
+        react_1.default.createElement(result_1.Result, null,
+            react_1.default.createElement(Content, { isOpen: isOpen },
+                data && react_1.default.createElement(chartContent_1.default, { dataInput: data }),
+                !isLoading && (react_1.default.createElement(quantityResult_1.default, { quantidadeProtestos: quantidadeProtestos, quantidadeProcessos: (_d = data === null || data === void 0 ? void 0 : data.pieChartTotalConfig) === null || _d === void 0 ? void 0 : _d.processosJuridicos, quantidadeDividas: quantidadeDividas, quantidadeDividasSerasa: quantidadeSerasa, quantidadeDividasBoaVista: quantidadeBoaVista, quantidadeChequesSemFundos: quantidadeCCFs, ultimaOcorrenciaChequesSemFundos: ultimaOcorrenciaCCF, valorTotalDividasSerasa: valorTotalSerasa, valorTotalDividasBoaVista: valorTotalBoaVista, valorTotalProtestos: valorTotalProtestos, valorTotalDividas: valorTotalDividas, ultimaOcorrenciaProtestos: ultimaOcorrenciaProtestos }))))));
+};
+exports.default = ChartSystem;
+var templateObject_1;

package/lib/cjs/components/chart/components/MixedChart.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DataInput } from "../types/iChart";
+interface MixedChartProps {
+    dataInput: DataInput;
+}
+declare const MixedChart: React.FC<MixedChartProps>;
+export default MixedChart;

package/lib/cjs/components/chart/components/MixedChart.js

@@ -0,0 +1,55 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_chartjs_2_1 = require("react-chartjs-2");
+var useMixedChartData_1 = require("../hooks/useMixedChartData");
+var styled_components_1 = __importStar(require("styled-components"));
+var TimeFilterButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 16px;\n  margin-right: 5px;\n  background-color: #f0f0f0;\n  border: 1px solid #ccc;\n  border-radius: 8px;\n  cursor: pointer;\n  width: 100px;\n  min-width: 100px;\n  text-align: center;\n\n  ", "\n\n  &:hover {\n    background-color: #007af2;\n    color: white;\n  }\n"], ["\n  padding: 8px 16px;\n  margin-right: 5px;\n  background-color: #f0f0f0;\n  border: 1px solid #ccc;\n  border-radius: 8px;\n  cursor: pointer;\n  width: 100px;\n  min-width: 100px;\n  text-align: center;\n\n  ", "\n\n  &:hover {\n    background-color: #007af2;\n    color: white;\n  }\n"])), function (props) {
+    return props.isActive && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: #007af2;\n      color: white;\n      border-color: #007af2;\n    "], ["\n      background-color: #007af2;\n      color: white;\n      border-color: #007af2;\n    "])));
+});
+var MixedChart = function (_a) {
+    var dataInput = _a.dataInput;
+    var _b = (0, react_1.useState)("1m"), timeFilter = _b[0], setTimeFilter = _b[1];
+    var _c = (0, useMixedChartData_1.useMixedChartData)(dataInput, timeFilter), data = _c.data, options = _c.options;
+    var chartType = data.datasets.some(function (dataset) { return dataset.type === "bar"; })
+        ? "bar"
+        : "line";
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", null, ["all", "1y", "6m", "1m"].map(function (filter) { return (react_1.default.createElement(TimeFilterButton, { key: filter, onClick: function () { return setTimeFilter(filter); }, isActive: timeFilter === filter }, filter === "all"
+            ? "All"
+            : filter === "1y"
+                ? "1 Ano"
+                : filter === "6m"
+                    ? "6 Meses"
+                    : "1 Mês")); })),
+        react_1.default.createElement(react_chartjs_2_1.Chart, { type: chartType, data: data, options: options })));
+};
+exports.default = MixedChart;
+var templateObject_1, templateObject_2;

package/lib/cjs/components/chart/components/PieChart.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DataInput } from "../types/iChart";
+interface PieChartProps {
+    dataInput: DataInput;
+}
+declare const PieChart: React.FC<PieChartProps>;
+export default PieChart;

package/lib/cjs/components/chart/components/PieChart.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_chartjs_2_1 = require("react-chartjs-2");
+var usePieChartData_1 = require("../hooks/usePieChartData");
+var PieChart = function (_a) {
+    var dataInput = _a.dataInput;
+    var _b = (0, usePieChartData_1.usePieChartData)(dataInput), data = _b.data, options = _b.options;
+    return react_1.default.createElement(react_chartjs_2_1.Pie, { data: data, options: options });
+};
+exports.default = PieChart;

package/lib/cjs/components/chart/components/categoryProtestos.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DataInput } from "../types/iChart";
+interface ProtestoCategory {
+    dataInput: DataInput["protestosCategory"];
+}
+declare const CategoriaProtesto: React.FC<ProtestoCategory>;
+export default CategoriaProtesto;

package/lib/cjs/components/chart/components/categoryProtestos.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_chartjs_2_1 = require("react-chartjs-2");
+var styled_components_1 = __importDefault(require("styled-components"));
+var useCategoryProtestos_1 = require("../hooks/useCategoryProtestos");
+var ChartContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 400px;\n  width: 100%;\n"], ["\n  height: 400px;\n  width: 100%;\n"])));
+var CategoriaProtesto = function (_a) {
+    var dataInput = _a.dataInput;
+    var _b = (0, useCategoryProtestos_1.useCategoryProtestos)(dataInput), data = _b.data, options = _b.options;
+    return (react_1.default.createElement(ChartContainer, null,
+        react_1.default.createElement(react_chartjs_2_1.Bar, { data: data, options: options })));
+};
+exports.default = CategoriaProtesto;
+var templateObject_1;

package/lib/cjs/components/chart/hooks/useCategoryProtestos.d.ts

@@ -0,0 +1,6 @@
+import { ChartData, ChartOptions } from "chart.js";
+import { DataInput } from "../types/iChart";
+export declare const useCategoryProtestos: (dataInput: DataInput["protestosCategory"]) => {
+    data: ChartData<"bar", number[], string>;
+    options: ChartOptions<"bar">;
+};

package/lib/cjs/components/chart/hooks/useCategoryProtestos.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCategoryProtestos = void 0;
+var react_1 = require("react");
+var useCategoryProtestos = function (dataInput) {
+    var data = (0, react_1.useMemo)(function () {
+        var safeDataInput = dataInput || [];
+        var categoryCounts = {
+            "Protestos de Crédito": 0,
+            "Protestos de Impostos": 0,
+            "Protestos Gerais": 0,
+        };
+        safeDataInput.forEach(function (item) {
+            categoryCounts[item.categoria] = item.quantidade;
+        });
+        var labels = Object.keys(categoryCounts);
+        var dataValues = Object.values(categoryCounts);
+        return {
+            labels: labels,
+            datasets: [
+                {
+                    data: dataValues,
+                    backgroundColor: [
+                        "rgba(255, 99, 132, 0.2)",
+                        "rgba(255, 159, 64, 0.2)",
+                        "rgba(54, 162, 235, 0.2)",
+                    ],
+                    borderColor: [
+                        "rgba(255, 99, 132, 1)",
+                        "rgba(255, 159, 64, 1)",
+                        "rgba(54, 162, 235, 1)",
+                    ],
+                    borderWidth: 1,
+                },
+            ],
+        };
+    }, [dataInput]);
+    var options = (0, react_1.useMemo)(function () {
+        return {
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: 0,
+                        stepSize: 1,
+                        suggestedMin: 0,
+                        callback: function (value) {
+                            return Number.isInteger(value) ? value : null;
+                        },
+                    },
+                },
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                title: {
+                    display: true,
+                    text: "Quantidade de Protestos por Categoria",
+                    font: {
+                        size: 12,
+                    },
+                    padding: {
+                        bottom: 10,
+                        top: 20,
+                    },
+                },
+            },
+        };
+    }, []);
+    return { data: data, options: options };
+};
+exports.useCategoryProtestos = useCategoryProtestos;

package/lib/cjs/components/chart/hooks/useChartData.d.ts

@@ -0,0 +1,8 @@
+import { DataInput } from "../../../components/chart/types/iChart";
+declare const useChartData: (documento: string) => {
+    data: DataInput | null;
+    isLoading: boolean;
+    error: string | Error | null;
+    refetch: () => void;
+};
+export default useChartData;

package/lib/cjs/components/chart/hooks/useChartData.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var webservice_1 = require("../../../components/webservice");
+var dataProcessing_1 = require("../utils/dataProcessing");
+var useChartData = function (documento) {
+    var _a = (0, react_1.useState)(null), data = _a[0], setData = _a[1];
+    var _b = (0, react_1.useState)(null), errorState = _b[0], setErrorState = _b[1];
+    var _c = (0, webservice_1.useQuery)("SELECT FROM 'DOCUMENTHISTORY'.'BASICHISTORY'", {
+        documento: documento,
+    }), response = _c.response, queryError = _c.error, isLoading = _c.isLoading, refetch = _c.refetch;
+    var ctxProtestos = (0, react_1.useContext)(webservice_1.Queries.Protestos);
+    var ctxCCF = (0, react_1.useContext)(webservice_1.Queries.CCF);
+    var ctxProcessosJuridicos = (0, react_1.useContext)(webservice_1.Queries.ProcessosJuridicos);
+    var quantidadeProcessosJuridicos = (0, react_1.useMemo)(function () {
+        var _a;
+        if ((ctxProcessosJuridicos === null || ctxProcessosJuridicos === void 0 ? void 0 : ctxProcessosJuridicos.type) === webservice_1.RequestStatus.Success &&
+            ((_a = ctxProcessosJuridicos.document) === null || _a === void 0 ? void 0 : _a.empresa)) {
+            return ctxProcessosJuridicos.document.empresa.length;
+        }
+        return 0;
+    }, [ctxProcessosJuridicos]);
+    var liveQueriesIsFinish = (0, react_1.useMemo)(function () {
+        return [
+            ctxProtestos === null || ctxProtestos === void 0 ? void 0 : ctxProtestos.type,
+            ctxCCF === null || ctxCCF === void 0 ? void 0 : ctxCCF.type,
+            ctxProcessosJuridicos === null || ctxProcessosJuridicos === void 0 ? void 0 : ctxProcessosJuridicos.type,
+        ].every(function (status) { return status !== webservice_1.RequestStatus.Loading; });
+    }, [ctxProtestos, ctxCCF, ctxProcessosJuridicos]);
+    var dadosProtestos = (0, react_1.useMemo)(function () {
+        if ((ctxProtestos === null || ctxProtestos === void 0 ? void 0 : ctxProtestos.type) === webservice_1.RequestStatus.Success && ctxProtestos.data) {
+            return (0, dataProcessing_1.processProtestData)(ctxProtestos.document);
+        }
+        return [];
+    }, [ctxProtestos]);
+    (0, react_1.useEffect)(function () {
+        if (!isLoading &&
+            !queryError &&
+            (response === null || response === void 0 ? void 0 : response.document) &&
+            liveQueriesIsFinish) {
+            try {
+                var parsedData = JSON.parse(response.document);
+                parsedData.protestosCategory = dadosProtestos;
+                var processedData = (0, dataProcessing_1.processData)(parsedData, quantidadeProcessosJuridicos);
+                setData(processedData);
+            }
+            catch (e) {
+                console.error("Erro ao processar os dados", e);
+                setErrorState("Erro ao processar os dados");
+            }
+        }
+    }, [
+        isLoading,
+        response,
+        queryError,
+        liveQueriesIsFinish,
+        quantidadeProcessosJuridicos,
+    ]);
+    return { data: data, isLoading: isLoading, error: errorState || queryError, refetch: refetch };
+};
+exports.default = useChartData;

package/lib/cjs/components/chart/hooks/useMixedChartData.d.ts

@@ -0,0 +1,10 @@
+import { ChartData, ChartOptions } from "chart.js";
+import { DataInput, TimeFilter } from "../types/iChart";
+import "chartjs-adapter-date-fns";
+export declare const useMixedChartData: (dataInput: DataInput, timeFilter?: TimeFilter) => {
+    data: ChartData<"line" | "bar", (number | {
+        x: string;
+        y: number;
+    })[], string>;
+    options: ChartOptions<"line" | "bar">;
+};

package/lib/cjs/components/chart/hooks/useMixedChartData.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMixedChartData = void 0;
+var react_1 = require("react");
+require("chartjs-adapter-date-fns");
+var dataManipulation_1 = require("../utils/dataManipulation");
+var chartCustomization_1 = require("../utils/chartCustomization");
+var useMixedChartData = function (dataInput, timeFilter) {
+    if (timeFilter === void 0) { timeFilter = "1m"; }
+    return (0, react_1.useMemo)(function () {
+        var filteredStartDate = (0, dataManipulation_1.getFilteredStartDate)(timeFilter, dataInput);
+        var endDate = (0, dataManipulation_1.getEndDate)();
+        var fullDataStartDate = (0, dataManipulation_1.getEarliestDate)(dataInput);
+        var fullProcessedData = {
+            protestos: (0, dataManipulation_1.addMissingDateEntries)(dataInput.protestos, fullDataStartDate, endDate),
+            ccfs: (0, dataManipulation_1.addMissingDateEntries)(dataInput.ccfs, fullDataStartDate, endDate),
+            serasa: (0, dataManipulation_1.addMissingDateEntries)(dataInput.serasa, fullDataStartDate, endDate),
+            boaVista: (0, dataManipulation_1.addMissingDateEntries)(dataInput.boaVista, fullDataStartDate, endDate),
+            dividasPublicasGrafico: (0, dataManipulation_1.addMissingDateEntries)(dataInput.dividasPublicasGrafico, fullDataStartDate, endDate),
+        };
+        var processedData = {
+            protestos: fullProcessedData.protestos.filter(function (d) { return new Date(d.data) >= filteredStartDate; }),
+            ccfs: fullProcessedData.ccfs.filter(function (d) { return new Date(d.data) >= filteredStartDate; }),
+            serasa: fullProcessedData.serasa.filter(function (d) { return new Date(d.data) >= filteredStartDate; }),
+            boaVista: fullProcessedData.boaVista.filter(function (d) { return new Date(d.data) >= filteredStartDate; }),
+            dividasPublicasGrafico: fullProcessedData.dividasPublicasGrafico.filter(function (d) { return new Date(d.data) >= filteredStartDate; }),
+        };
+        var uniqueDates = (0, dataManipulation_1.getUniqueDates)(processedData);
+        var datasets = (0, chartCustomization_1.createDatasets)(processedData, uniqueDates, timeFilter);
+        var options = (0, chartCustomization_1.getChartOptions)(timeFilter);
+        if (!options.plugins) {
+            options.plugins = {};
+        }
+        options.plugins.datalabels = {
+            display: false,
+        };
+        var labels = uniqueDates;
+        return {
+            data: {
+                labels: labels,
+                datasets: datasets,
+            },
+            options: options,
+        };
+    }, [dataInput, timeFilter]);
+};
+exports.useMixedChartData = useMixedChartData;

package/lib/cjs/components/chart/hooks/usePieChartData.d.ts

@@ -0,0 +1,6 @@
+import { ChartData, ChartOptions } from "chart.js";
+import { DataInput } from "../types/iChart";
+export declare const usePieChartData: (dataInput: DataInput) => {
+    data: ChartData<"pie", number[], string>;
+    options: ChartOptions<"pie">;
+};

package/lib/cjs/components/chart/hooks/usePieChartData.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePieChartData = void 0;
+var react_1 = require("react");
+var useWindowSize_1 = require("../../../hooks/useWindowSize");
+var usePieChartData = function (dataInput) {
+    var width = (0, useWindowSize_1.useWindowSize)().width;
+    return (0, react_1.useMemo)(function () {
+        var _a;
+        var getLastValue = function (arr) { var _a; return arr.length > 0 ? (_a = arr[arr.length - 1].quantidade) !== null && _a !== void 0 ? _a : 0 : 0; };
+        var totalProtestos = getLastValue(dataInput.protestos);
+        var totalCCFs = getLastValue(dataInput.ccfs);
+        var totalSerasa = getLastValue(dataInput.serasa);
+        var totalBoaVista = getLastValue(dataInput.boaVista);
+        var totalDividasPublicas = getLastValue(dataInput.dividasPublicasGrafico);
+        var processosJuridicos = (_a = dataInput.pieChartTotalConfig) === null || _a === void 0 ? void 0 : _a.processosJuridicos;
+        var chartData = {
+            labels: [
+                "Protestos",
+                "Cheques Devolvidos",
+                "Pefin/Refin Serasa",
+                "Pefin/Refin Boa Vista",
+                "Dívidas Públicas",
+                "Processos Jurídicos",
+            ],
+            datasets: [
+                {
+                    data: [
+                        totalProtestos,
+                        totalCCFs,
+                        totalSerasa,
+                        totalBoaVista,
+                        totalDividasPublicas,
+                        processosJuridicos !== null && processosJuridicos !== void 0 ? processosJuridicos : 0,
+                    ],
+                    backgroundColor: [
+                        "#ff4081",
+                        "#3f51b5",
+                        "#008cf8",
+                        "#ffc107",
+                        "#4caf50",
+                        "#58508d",
+                    ],
+                    hoverOffset: 4,
+                },
+            ],
+        };
+        var aspectRatio = width < 1000 ? 1.5 : 1;
+        var options = {
+            responsive: true,
+            maintainAspectRatio: true,
+            aspectRatio: aspectRatio,
+            layout: {
+                padding: {
+                    top: 32,
+                },
+            },
+            plugins: {
+                legend: {
+                    position: "right",
+                    align: "start",
+                    fullSize: true,
+                    labels: {
+                        boxWidth: 16,
+                        padding: 16,
+                    },
+                },
+                title: {
+                    display: true,
+                    text: "Quantidade de Ocorrências",
+                    font: {
+                        size: 12,
+                    },
+                    padding: {
+                        bottom: 8,
+                    },
+                },
+                datalabels: {
+                    color: "#fff",
+                    formatter: function (value) {
+                        return value > 0 ? value.toString() : "";
+                    },
+                    font: {
+                        weight: "bold",
+                    },
+                    textAlign: "center",
+                },
+            },
+        };
+        return { data: chartData, options: options };
+    }, [dataInput]);
+};
+exports.usePieChartData = usePieChartData;