-
+
+
+
+
+
+
+
+ -
-
-
+
-
+
+
+
+
+
+
+
+
diff --git a/addons_extensions/one2many_search_widget/static/src/css/header.css b/addons_extensions/one2many_search_widget/static/src/css/header.css
new file mode 100644
index 000000000..eb7a41629
--- /dev/null
+++ b/addons_extensions/one2many_search_widget/static/src/css/header.css
@@ -0,0 +1,11 @@
+.oe_search_value{
+ border-radius: 25px;
+ border: 2px solid #eceff2;
+ padding: 10px;
+ margin-top: 20px;
+ margin-left: 10px;
+ width: 600px;
+ height: 20px;
+ color:#495057;
+ font-size: 16px;
+}
diff --git a/addons_extensions/one2many_search_widget/static/src/fields/one2manysearch/one2manysearch.js b/addons_extensions/one2many_search_widget/static/src/fields/one2manysearch/one2manysearch.js
new file mode 100644
index 000000000..832457157
--- /dev/null
+++ b/addons_extensions/one2many_search_widget/static/src/fields/one2manysearch/one2manysearch.js
@@ -0,0 +1,22 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import { X2ManyField, x2ManyField } from "@web/views/fields/x2many/x2many_field";
+
+export class One2ManySearch extends X2ManyField {
+// Whenever text is entered into the search input box, it dynamically
+// filters the content of the One2Many field to display only matching records
+ onInputKeyUp(event) {
+ const value = event.currentTarget.value.toLowerCase();
+ const rows = document.querySelectorAll(".o_list_table tbody tr");
+ rows.forEach(row => {
+ const text = row.textContent.toLowerCase();
+ row.style.display = text.includes(value) ? "" : "none";
+ });
+}
+}
+One2ManySearch.template = "One2ManySearchTemplate";
+export const one2ManySearch = {
+ ...x2ManyField,
+ component: One2ManySearch,
+};
+registry.category("fields").add("one2many_search", one2ManySearch);
diff --git a/addons_extensions/one2many_search_widget/static/src/fields/one2manysearch/one2manysearch_template.xml b/addons_extensions/one2many_search_widget/static/src/fields/one2manysearch/one2manysearch_template.xml
new file mode 100644
index 000000000..7c80fed95
--- /dev/null
+++ b/addons_extensions/one2many_search_widget/static/src/fields/one2manysearch/one2manysearch_template.xml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Quick Search Feature for One2many Fields In Odoo. +
+One2many Search Widget +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+
+
+ Email Us
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Quick Search Feature for any One2Many Field. +
++ Users can perform searches within One2Many fields using this widget.
+ +
+
+
+
+
+
+
+
+ + Search for Both Texts and Numbers. +
++ You can search for both texts and numbers using this widget. + +
+
+
+
+
+
+
+
+
+ + Community,Enterprise and Odoo.sh Support +
++ Available in both community, enterprise and odoo.sh editions. +
+
+
+
+
+
+
+
+
+
+ One2many Search Widget
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Set one2many_search + + Widget +
+
+
+ + Set the "one2many_search" widget for the One2Many field. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Search Bar is + + Located +
+
+
+ + A search bar is located above the One2Many field. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + All lines are shown when the search bar is + + Empty +
+
+
+ + When the search bar is empty, all rows in the one2many field will be visible. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Filtering Based on + + Text +
+
+
+ + The One2Many field is filtered based on the text entered the search bar. + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + Filtering Based on + + Numbers +
+
+
+ + The One2Many field is filtered based on the numbers entered the search bar. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Available in Odoo Community , Enterprise and Sh.
+
+
+
+
+
+
+
+
+ + Can Search for Both Texts and Numbers.
+
+
+
+
+
+
+
+
+
+
+ + Can Search within One2Many Fields Using this Widget.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + To enable the search functionality, you need to set the one2many_search widget for the desired One2Many field in your Odoo form view. This can be done by modifying the XML view definition of the form to include the widget="one2many_search" attribute for the One2Many field. Once set, a search bar will appear above the One2Many field, allowing users to filter records. +
+
+
+
+
+
+ + Yes, the One2many Search Widget supports filtering for both text and numbers. Users can enter text or numeric values in the search bar above the One2Many field to filter the displayed rows based on the entered criteria. If the search bar is left empty, all rows in the One2Many field will be visible. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 11th July, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+
+
++ Edit and collaborate on office files within Odoo Documents +
+
+
+
+
+ Work with office documents uploaded in Odoo using ONLYOFFICE Docs.
+ *In any Odoo section where you can upload/attach files
+
+
+
+
+
+ Edit attached deal notes in the Sales section
+
+
+
+ 
+
+
+
+
+
+
+
+ Open chat attachments in the Discuss section
+
+
+
+ 
+
+
+
+
+
+
+
+ Features and file formats
+
+
+ -
+
- Edit text documents, spreadsheets, and presentations (DOCX, XLSX, PPTX) +
- Collaborate on documents with your colleagues in real time +
- Edit form templates in PDF +
- Read PDF files +
- + Open other office file formats for viewing, including RTF, TXT, CSV, etc. + +
+ 
+
+
+
+ 
+
+
+
+
+
+
+ ONLYOFFICE cannot be reached. Please contact admin.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Suggest a feature +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a public test server, please do not use it for private sensitive data.
+ The server will be available during a 30-day period.
+
+
+ +
+
+ GET NOW
+
+
+
+ 
+
+
+
+
+
+
+ ONLYOFFICE cannot be reached. Please contact admin.
+No cost data available
';
+ return;
+ }
+
+ const options = {
+ series: series,
+ chart: {
+ type: 'donut',
+ height: 320
+ },
+ labels: labels.map(label => this.capitalizeFirstLetter(label)),
+ colors: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#6B7280'],
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '65%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ label: 'Total Costs',
+ formatter: () => `₹${this.formatNumber(series.reduce((a, b) => a + b, 0))}`
+ }
+ }
+ }
+ }
+ },
+ dataLabels: {
+ enabled: true,
+ formatter: (val, { seriesIndex, w }) => {
+ const total = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
+ const percentage = ((val / total) * 100).toFixed(1);
+ return percentage >= 5 ? `${percentage}%` : '';
+ },
+ style: {
+ fontSize: '11px',
+ fontWeight: 600
+ }
+ },
+ legend: {
+ position: 'right',
+ fontSize: '12px'
+ },
+ tooltip: {
+ y: {
+ formatter: (val) => `₹${this.formatNumber(val)}`
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating cost breakdown chart:", error);
+ }
+ }
+
+ createPerformanceGauge() {
+ const element = document.querySelector("#performanceGauge");
+ if (!element) {
+ console.warn("Performance gauge element not found");
+ return;
+ }
+
+ try {
+ const efficiency = this.state.performanceData.efficiency || 0;
+
+ const options = {
+ series: [efficiency],
+ chart: {
+ height: 220,
+ type: 'radialBar',
+ },
+ plotOptions: {
+ radialBar: {
+ startAngle: -135,
+ endAngle: 135,
+ hollow: {
+ margin: 0,
+ size: '70%',
+ background: 'transparent',
+ },
+ track: {
+ background: this.state.darkMode ? '#334155' : '#E5E7EB',
+ strokeWidth: '100%',
+ margin: 0,
+ },
+ dataLabels: {
+ name: {
+ fontSize: '16px',
+ color: this.state.darkMode ? '#CBD5E1' : '#4B5563',
+ offsetY: -10,
+ },
+ value: {
+ offsetY: 16,
+ fontSize: '22px',
+ color: this.state.darkMode ? '#F8FAFC' : '#111827',
+ formatter: (val) => `${val.toFixed(1)}%`,
+ }
+ }
+ }
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ shade: 'dark',
+ type: 'horizontal',
+ shadeIntensity: 0.5,
+ gradientToColors: ['#10B981'],
+ inverseColors: true,
+ opacityFrom: 1,
+ opacityTo: 1,
+ stops: [0, 100]
+ }
+ },
+ stroke: {
+ dashArray: 4
+ },
+ labels: ['Overall Efficiency'],
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating performance gauge:", error);
+ }
+ }
+
+ createProjectHealthChart() {
+ const element = document.querySelector("#projectHealthChart");
+ if (!element) {
+ console.warn("Project health chart element not found");
+ return;
+ }
+
+ try {
+ const projects = this.state.projectsData.slice(0, 8);
+ if (projects.length === 0) {
+ element.innerHTML = 'No project data available
';
+ return;
+ }
+
+ const categories = projects.map(p => {
+ const name = p.name || 'Unnamed';
+ return name.length > 15 ? name.substring(0, 12) + '...' : name;
+ });
+
+ const healthScores = projects.map(project => {
+ let score = 80;
+
+ if (project.budget_variance_percent < -10) score -= 20;
+ if (project.budget_variance_percent > 10) score -= 15;
+
+ return Math.max(0, Math.min(100, score));
+ });
+
+ const options = {
+ series: [{
+ name: 'Health Score',
+ data: healthScores
+ }],
+ chart: {
+ type: 'bar',
+ height: 280,
+ toolbar: { show: false }
+ },
+ plotOptions: {
+ bar: {
+ borderRadius: 4,
+ horizontal: false,
+ columnWidth: '55%',
+ colors: {
+ ranges: [{
+ from: 0,
+ to: 40,
+ color: '#EF4444'
+ }, {
+ from: 41,
+ to: 70,
+ color: '#F59E0B'
+ }, {
+ from: 71,
+ to: 100,
+ color: '#10B981'
+ }]
+ }
+ }
+ },
+ dataLabels: {
+ enabled: true,
+ formatter: (val) => `${val.toFixed(0)}`,
+ style: {
+ colors: ['#fff']
+ }
+ },
+ xaxis: {
+ categories: categories,
+ labels: {
+ rotate: -45,
+ style: {
+ fontSize: '11px'
+ }
+ }
+ },
+ yaxis: {
+ max: 100,
+ title: {
+ text: 'Health Score',
+ style: {}
+ }
+ },
+ tooltip: {
+ y: {
+ formatter: (val) => `${val.toFixed(0)}/100`
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating project health chart:", error);
+ }
+ }
+
+ createResourceUtilizationChart() {
+ const element = document.querySelector("#resourceUtilizationChart");
+ if (!element) {
+ console.warn("Resource utilization chart element not found");
+ return;
+ }
+
+ try {
+ if (!this.state.employeePerformance || this.state.employeePerformance.length === 0) {
+ element.innerHTML = 'No employee performance data available
';
+ return;
+ }
+
+ const topPerformers = this.state.employeePerformance
+ .filter(emp => emp.efficiency_rate && emp.on_time_completion_rate)
+ .sort((a, b) => (b.efficiency_rate || 0) - (a.efficiency_rate || 0))
+ .slice(0, 6);
+
+ if (topPerformers.length === 0) {
+ element.innerHTML = 'No performance data available
';
+ return;
+ }
+
+ const options = {
+ series: [{
+ name: 'Efficiency',
+ data: topPerformers.map(emp => emp.efficiency_rate || 0)
+ }, {
+ name: 'On-Time Rate',
+ data: topPerformers.map(emp => emp.on_time_completion_rate || 0)
+ }],
+ chart: {
+ type: 'radar',
+ height: 300,
+ toolbar: { show: false }
+ },
+ xaxis: {
+ categories: topPerformers.map(emp => {
+ const name = emp.employee_name || 'Employee';
+ return name.split(' ')[0] || name.substring(0, 8);
+ })
+ },
+ yaxis: {
+ min: 0,
+ max: 100,
+ labels: {
+ formatter: (val) => `${val.toFixed(0)}%`
+ }
+ },
+ fill: {
+ opacity: 0.1
+ },
+ stroke: {
+ width: 2
+ },
+ markers: {
+ size: 4
+ },
+ colors: ['#3B82F6', '#10B981'],
+ legend: {
+ position: 'bottom'
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating resource utilization chart:", error);
+ }
+ }
+
+ initFinancialCharts() {
+ try {
+ setTimeout(() => {
+ this.createBudgetVarianceChart();
+ this.createProfitLossTrendChart();
+ }, 200);
+ } catch (error) {
+ console.error("Error in initFinancialCharts:", error);
+ }
+ }
+
+ createBudgetVarianceChart() {
+ const element = document.querySelector("#budgetVarianceChart");
+ if (!element) {
+ console.warn("Budget variance chart element not found");
+ return;
+ }
+
+ try {
+ if (!this.state.projectsData || this.state.projectsData.length === 0) {
+ element.innerHTML = 'No project data available
';
+ return;
+ }
+
+ const projects = this.state.projectsData.slice(0, 10);
+ const categories = projects.map(p => {
+ const name = p.name || 'Unnamed';
+ return name.length > 12 ? name.substring(0, 9) + '...' : name;
+ });
+
+ const options = {
+ series: [{
+ name: 'Budget Variance %',
+ data: projects.map(p => p.budget_variance_percent || 0)
+ }],
+ chart: {
+ type: 'bar',
+ height: 350,
+ toolbar: { show: false }
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '55%',
+ endingShape: 'rounded'
+ }
+ },
+ colors: projects.map(p => {
+ const variance = p.budget_variance_percent || 0;
+ if (variance < -5) return '#10B981';
+ if (variance <= 5) return '#F59E0B';
+ return '#EF4444';
+ }),
+ dataLabels: {
+ enabled: true,
+ formatter: (val) => `${val.toFixed(1)}%`,
+ style: {
+ colors: ['#fff']
+ }
+ },
+ xaxis: {
+ categories: categories,
+ labels: {
+ rotate: -45,
+ style: {
+ fontSize: '11px'
+ }
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'Variance %',
+ style: {}
+ },
+ labels: {
+ formatter: (val) => `${val.toFixed(0)}%`
+ }
+ },
+ tooltip: {
+ y: {
+ formatter: (val) => `${val.toFixed(1)}% variance`
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating budget variance chart:", error);
+ }
+ }
+
+ createProfitLossTrendChart() {
+ const element = document.querySelector("#profitLossTrendChart");
+ if (!element) {
+ console.warn("Profit loss trend chart element not found");
+ return;
+ }
+
+ try {
+ if (!this.state.projectsData || this.state.projectsData.length === 0) {
+ element.innerHTML = 'No project data available
';
+ return;
+ }
+
+ const projects = this.state.projectsData.slice(0, 8);
+ const projectNames = projects.map(p => {
+ const name = p.name || 'Unnamed';
+ return name.length > 10 ? name.substring(0, 7) + '...' : name;
+ });
+
+ const options = {
+ series: [{
+ name: 'Profit',
+ data: projects.map(p => p.profit || 0)
+ }, {
+ name: 'Loss',
+ data: projects.map(p => p.loss || 0)
+ }],
+ chart: {
+ type: 'line',
+ height: 350,
+ toolbar: { show: false }
+ },
+ stroke: {
+ curve: 'smooth',
+ width: 3
+ },
+ colors: ['#10B981', '#EF4444'],
+ xaxis: {
+ categories: projectNames,
+ labels: {
+ style: {
+ fontSize: '11px'
+ }
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'Amount (₹)',
+ style: {}
+ },
+ labels: {
+ formatter: (val) => this.formatCurrency(val)
+ }
+ },
+ markers: {
+ size: 5
+ },
+ tooltip: {
+ y: {
+ formatter: (val) => `₹${this.formatNumber(val)}`
+ }
+ },
+ legend: {
+ position: 'top'
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating profit loss trend chart:", error);
+ }
+ }
+
+ initPerformanceCharts() {
+ try {
+ setTimeout(() => {
+ this.createEmployeePerformanceChart();
+ this.createTimeVarianceChart();
+ }, 200);
+ } catch (error) {
+ console.error("Error in initPerformanceCharts:", error);
+ }
+ }
+
+ createEmployeePerformanceChart() {
+ const element = document.querySelector("#employeePerformanceChart");
+ if (!element) {
+ console.warn("Employee performance chart element not found");
+ return;
+ }
+
+ try {
+ if (!this.state.employeePerformance || this.state.employeePerformance.length === 0) {
+ element.innerHTML = 'No employee performance data available
';
+ return;
+ }
+
+ const employees = this.state.employeePerformance.slice(0, 8);
+ const categories = employees.map(emp => {
+ const name = emp.employee_name || 'Emp';
+ return name.split(' ')[0] || name.substring(0, 6);
+ });
+
+ const options = {
+ series: [{
+ name: 'Efficiency Rate',
+ data: employees.map(emp => emp.efficiency_rate || 0)
+ }, {
+ name: 'On-Time Rate',
+ data: employees.map(emp => emp.on_time_completion_rate || 0)
+ }],
+ chart: {
+ type: 'bar',
+ height: 350,
+ stacked: false,
+ toolbar: { show: false }
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '55%',
+ borderRadius: 5
+ }
+ },
+ colors: ['#3B82F6', '#10B981'],
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent']
+ },
+ xaxis: {
+ categories: categories,
+ labels: {
+ style: {
+ fontSize: '11px'
+ }
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'Percentage (%)',
+ style: {}
+ },
+ labels: {
+ formatter: (val) => `${val.toFixed(0)}%`
+ }
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ y: {
+ formatter: (val) => `${val.toFixed(1)}%`
+ }
+ },
+ legend: {
+ position: 'top'
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating employee performance chart:", error);
+ }
+ }
+
+ createTimeVarianceChart() {
+ const element = document.querySelector("#timeVarianceChart");
+ if (!element) {
+ console.warn("Time variance chart element not found");
+ return;
+ }
+
+ try {
+ if (!this.state.employeePerformance || this.state.employeePerformance.length === 0) {
+ element.innerHTML = 'No employee performance data available
';
+ return;
+ }
+
+ const employees = this.state.employeePerformance.slice(0, 6);
+ const categories = employees.map(emp => {
+ const name = emp.employee_name || 'Emp';
+ return name.split(' ')[0] || name.substring(0, 6);
+ });
+
+ const options = {
+ series: [{
+ name: 'Time Variance',
+ data: employees.map(emp => emp.time_variance_percent || 0)
+ }],
+ chart: {
+ type: 'bar',
+ height: 300,
+ toolbar: { show: false }
+ },
+ plotOptions: {
+ bar: {
+ borderRadius: 4,
+ horizontal: true,
+ distributed: true,
+ dataLabels: {
+ position: 'top'
+ }
+ }
+ },
+ colors: employees.map(emp => {
+ const variance = emp.time_variance_percent || 0;
+ if (variance <= 0) return '#10B981';
+ if (variance <= 10) return '#F59E0B';
+ if (variance <= 20) return '#F97316';
+ return '#EF4444';
+ }),
+ dataLabels: {
+ enabled: true,
+ formatter: (val) => `${val.toFixed(1)}%`,
+ offsetX: 0,
+ style: {
+ fontSize: '11px',
+ colors: ['#fff']
+ }
+ },
+ xaxis: {
+ categories: categories,
+ labels: {
+ formatter: (val) => `${val.toFixed(1)}%`,
+ style: {
+ fontSize: '11px'
+ }
+ }
+ },
+ yaxis: {
+ labels: {
+ style: {
+ fontSize: '11px'
+ }
+ }
+ },
+ tooltip: {
+ y: {
+ formatter: (val) => val > 0 ? `+${val.toFixed(1)}% delay` : `${val.toFixed(1)}% ahead`
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating time variance chart:", error);
+ }
+ }
+
+ initProjectsCharts() {
+ try {
+ setTimeout(() => {
+ this.createProjectsBudgetChart();
+ }, 200);
+ } catch (error) {
+ console.error("Error in initProjectsCharts:", error);
+ }
+ }
+
+ createProjectsBudgetChart() {
+ const element = document.querySelector("#projectsBudgetChart");
+ if (!element) {
+ console.warn("Projects budget chart element not found");
+ return;
+ }
+
+ try {
+ if (!this.state.projectsData || this.state.projectsData.length === 0) {
+ element.innerHTML = 'No project data available
';
+ return;
+ }
+
+ const projects = this.state.projectsData;
+ const projectNames = projects.map(p => {
+ const name = p.name || 'Unnamed';
+ return name.length > 12 ? name.substring(0, 9) + '...' : name;
+ });
+
+ const options = {
+ series: [
+ {
+ name: 'Estimated',
+ data: projects.map(p => p.estimated_amount || 0)
+ },
+ {
+ name: 'Client Budget',
+ data: projects.map(p => p.project_cost || 0)
+ },
+ {
+ name: 'Actual',
+ data: projects.map(p => p.actual_cost || 0)
+ }
+ ],
+ chart: {
+ type: 'bar',
+ height: 350,
+ stacked: true,
+ toolbar: { show: false }
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '50%',
+ borderRadius: 5
+ }
+ },
+ colors: ['#3B82F6', '#10B981', '#F59E0B'],
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ width: 1,
+ colors: ['#fff']
+ },
+ xaxis: {
+ categories: projectNames,
+ labels: {
+ rotate: -45,
+ style: {
+ fontSize: '11px'
+ }
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'Amount (₹)',
+ style: {}
+ },
+ labels: {
+ formatter: (val) => this.formatCurrency(val)
+ }
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ y: {
+ formatter: (val) => `₹${this.formatNumber(val)}`
+ }
+ },
+ legend: {
+ position: 'top'
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ } catch (error) {
+ console.error("Error creating projects budget chart:", error);
+ }
+ }
+
+ // FIXED: Added missing toggleKPI method
+ toggleKPI(kpi) {
+ if (this.state && this.state.expandedKPIs) {
+ this.state.expandedKPIs[kpi] = !this.state.expandedKPIs[kpi];
+ }
+ }
+
+ // FIXED: Added missing toggleView method
+ toggleView(view) {
+ if (this.state) {
+ this.state.activeView = view;
+ setTimeout(() => {
+ this.initCharts();
+ }, 100);
+ }
+ }
+
+ getPortfolioKPIs() {
+ if (!this.state.portfolioData) return {};
+
+ const data = this.state.portfolioData;
+ const projects = this.state.projectsData || [];
+
+ return {
+ totalProjects: projects.length,
+ activeProjects: projects.filter(p => p.active).length,
+ totalBudget: data.total_client_budget || 0,
+ totalActual: data.total_actual_budget || 0,
+ netProfit: data.net_profit || 0,
+ avgEfficiency: data.overall_efficiency || 0,
+ onTimeRate: data.on_time_completion_rate || 0,
+ timeVariance: data.avg_time_variance || 0,
+ budgetVariance: data.budget_variance || 0,
+ budgetStatus: data.budget_status || 'on_track'
+ };
+ }
+
+ getPerformanceStatusClass(status) {
+ switch (status) {
+ case 'excellent': return 'status-excellent';
+ case 'good': return 'status-good';
+ case 'average': return 'status-average';
+ case 'poor': return 'status-poor';
+ case 'critical': return 'status-critical';
+ default: return 'status-average';
+ }
+ }
+
+ getBudgetStatusClass(status) {
+ switch (status) {
+ case 'under': return 'status-success';
+ case 'on_track': return 'status-warning';
+ case 'over': return 'status-danger';
+ default: return 'status-info';
+ }
+ }
+
+ formatNumber(num) {
+ if (num === null || num === undefined) return '0';
+ const n = Number(num);
+ if (isNaN(n)) return '0';
+
+ if (n >= 10000000) {
+ return (n / 10000000).toFixed(1) + 'Cr';
+ }
+ if (n >= 100000) {
+ return (n / 100000).toFixed(1) + 'L';
+ }
+ if (n >= 1000) {
+ return (n / 1000).toFixed(1) + 'K';
+ }
+ return n.toLocaleString('en-IN', { maximumFractionDigits: 0 });
+ }
+
+ formatCurrency(num) {
+ return `₹${this.formatNumber(num)}`;
+ }
+
+ capitalizeFirstLetter(string) {
+ if (!string) return '';
+ return string.charAt(0).toUpperCase() + string.slice(1);
+ }
+
+ onClickRefresh() {
+ this.loadPortfolioData();
+ this.notificationService.add("Portfolio dashboard refreshed!", { type: 'info' });
+ }
+
+ onClickToggleDarkMode() {
+ if (this.state) {
+ this.state.darkMode = !this.state.darkMode;
+ localStorage.setItem('dashboardDarkMode', this.state.darkMode);
+ document.body.classList.toggle('o_dark_mode', this.state.darkMode);
+
+ if (this.charts) {
+ this.charts.forEach(chart => {
+ try {
+ chart.updateOptions({
+ theme: { mode: this.state.darkMode ? 'dark' : 'light' }
+ });
+ } catch (e) {
+ console.warn("Error updating chart theme:", e);
+ }
+ });
+ }
+
+ this.notificationService.add(
+ this.state.darkMode ? "Dark mode enabled" : "Light mode enabled",
+ { type: 'info' }
+ );
+ }
+ }
+
+ onClickToggleAnimations() {
+ if (this.state) {
+ this.state.animationEnabled = !this.state.animationEnabled;
+
+ if (this.charts) {
+ this.charts.forEach(chart => {
+ try {
+ chart.updateOptions({
+ chart: { animations: { enabled: this.state.animationEnabled } }
+ });
+ } catch (e) {
+ console.warn("Error updating chart animations:", e);
+ }
+ });
+ }
+
+ this.notificationService.add(
+ this.state.animationEnabled ? "Animations enabled" : "Animations disabled",
+ { type: 'info' }
+ );
+ }
+ }
+
+ onClickViewProjects() {
+ if (this.state.portfolioData) {
+ this.actionService.doAction({
+ type: 'ir.actions.act_window',
+ res_model: 'project.project',
+ name: 'Projects',
+ views: [[false, 'kanban'], [false, 'list'], [false, 'form']],
+ domain: [['portfolio_id', '=', this.state.portfolioData.id]],
+ context: {
+ default_portfolio_id: this.state.portfolioData.id
+ }
+ });
+ }
+ }
+
+ onClickViewEmployeePerformance() {
+ if (this.state.portfolioData) {
+ this.actionService.doAction({
+ type: 'ir.actions.act_window',
+ res_model: 'project.portfolio.employee.performance',
+ name: 'Employee Performance',
+ views: [[false, 'list'], [false, 'graph'], [false, 'pivot']],
+ domain: [['portfolio_id', '=', this.state.portfolioData.id]],
+ context: {
+ default_portfolio_id: this.state.portfolioData.id,
+ search_default_group_by_employee: 1
+ }
+ });
+ }
+ }
+
+ onClickDownload() {
+ try {
+ const reportData = {
+ portfolio: this.state.portfolioData,
+ summary: this.getPortfolioKPIs(),
+ projects_summary: this.state.projectsData.map(project => ({
+ name: project.name,
+ estimated: project.estimated_amount,
+ client_budget: project.project_cost,
+ actual: project.actual_cost,
+ profit: project.profit,
+ loss: project.loss,
+ status: project.stage_id ? project.stage_id[1] : 'No Stage'
+ })),
+ employee_performance: this.state.employeePerformance,
+ generated_at: new Date().toISOString()
+ };
+
+ const dataStr = JSON.stringify(reportData, null, 2);
+ const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+
+ const portfolioName = this.state.portfolioData?.name || 'portfolio';
+ const exportFileName = `${portfolioName}_dashboard_${new Date().toISOString().split('T')[0]}.json`;
+
+ const linkElement = document.createElement('a');
+ linkElement.setAttribute('href', dataUri);
+ linkElement.setAttribute('download', exportFileName);
+ document.body.appendChild(linkElement);
+ linkElement.click();
+ document.body.removeChild(linkElement);
+
+ this.notificationService.add("Portfolio dashboard exported successfully!", { type: 'success' });
+ } catch (error) {
+ console.error("Error downloading dashboard:", error);
+ this.notificationService.add("Error exporting dashboard", { type: 'danger' });
+ }
+ }
+
+ cleanupCharts() {
+ if (this.charts && this.charts.length > 0) {
+ this.charts.forEach(chart => {
+ try {
+ chart.destroy();
+ } catch (e) {
+ console.warn("Error destroying chart:", e);
+ }
+ });
+ this.charts = [];
+ }
+ }
+}
+
+export const portfolioDashboardWidget = {
+ component: PortfolioDashboardWidget,
+};
+
+registry.category("view_widgets").add("portfolio_dashboard", portfolioDashboardWidget);
+registry.category("actions").add("portfolio_dashboard", portfolioDashboardWidget);
\ No newline at end of file
diff --git a/addons_extensions/project_dashboards_management/static/src/js/dashboard/project_dashboard.js b/addons_extensions/project_dashboards_management/static/src/js/dashboard/project_dashboard.js
new file mode 100644
index 000000000..2906f9a8a
--- /dev/null
+++ b/addons_extensions/project_dashboards_management/static/src/js/dashboard/project_dashboard.js
@@ -0,0 +1,960 @@
+/** @odoo-module **/
+
+import { Component, useState, onMounted } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { standardWidgetProps } from "@web/views/widgets/standard_widget_props";
+import { rpc } from "@web/core/network/rpc";
+
+
+class ProjectDashboardWidget extends Component {
+ static template = "project_dashboards_management.ProjectDashboardWidget";
+ static props = {
+ ...standardWidgetProps,
+ };
+
+ setup() {
+ debugger;
+ super.setup();
+
+ this.state = useState({
+ loading: true,
+ darkMode: false,
+ animationEnabled: true,
+ projectData: null,
+ tasksData: [],
+ employeePerformance: [],
+ budgetData: null,
+ error: null
+ });
+
+ this.actionService = useService("action");
+ this.dialogService = useService("dialog");
+ this.orm = useService("orm");
+ this.notificationService = useService("notification");
+ this.rpc = rpc;
+
+ onMounted(() => this.loadDashboardData());
+ this.checkSystemTheme();
+ }
+
+ checkSystemTheme() {
+ const savedTheme = localStorage.getItem('dashboardDarkMode');
+ if (savedTheme !== null) {
+ this.state.darkMode = savedTheme === 'true';
+ } else {
+ const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ this.state.darkMode = prefersDark;
+ }
+ document.body.classList.toggle('o_dark_mode', this.state.darkMode);
+ }
+
+ async loadDashboardData() {
+ debugger;
+
+ this.state.loading = true;
+ this.state.error = null;
+
+ try {
+ // Check if we're in a project context
+ if (!this.props.record || this.props.record.resModel !== 'project.project') {
+ this.state.error = "This dashboard widget only works on Project records.";
+ this.state.loading = false;
+ return;
+ }
+
+ const projectId = this.props.record.resId;
+
+ // Single API call to the controller
+ const response = await this.rpc('/project_dashboard/get_dashboard_data', {
+ project_id: projectId
+ });
+
+ if (response.success) {
+ this.state.projectData = response.project_data;
+ this.state.tasksData = response.tasks_data;
+ this.state.employeePerformance = response.employee_performance;
+ this.state.budgetData = response.budget_data;
+
+ // Initialize charts after data is loaded
+ setTimeout(() => this.initCharts(), 100);
+ } else {
+ this.state.error = response.error || "Failed to load dashboard data.";
+ this.notificationService.add("Error loading dashboard data", {
+ type: 'danger'
+ });
+ }
+
+ } catch (error) {
+ console.error("Error loading dashboard data:", error);
+ this.state.error = "Failed to load dashboard data. Please try again.";
+ this.notificationService.add("Error loading dashboard data", {
+ type: 'danger'
+ });
+ } finally {
+ this.state.loading = false;
+ }
+ }
+
+
+ async initCharts() {
+ if (!window.ApexCharts) {
+ console.warn("ApexCharts not loaded");
+ return;
+ }
+
+ try {
+ // Destroy existing charts
+ if (this.charts) {
+ this.charts.forEach(chart => chart.destroy());
+ }
+ this.charts = [];
+
+ // Initialize all charts
+ await Promise.all([
+
+ this.initResourceMiniChart(),
+ this.initAssetMiniChart(),
+ this.initUsageMiniChart(),
+ this.initMainBudgetChart(),
+ this.initEmployeePerformanceChart(),
+ this.initTaskProgressChart(),
+ this.initTimeVarianceChart(),
+ this.initStageDistributionChart(),
+ this.initTimelineChart()
+ ]);
+
+ } catch (error) {
+ console.error("Error initializing charts:", error);
+ }
+ }
+
+ initResourceMiniChart() {
+ if (!this.state.budgetData) return;
+ let data = this.state.budgetData
+ new ApexCharts(
+ document.querySelector("#resourceBudgetMini"),
+ {
+ series: [data.resource_cost, data.planned_resource_cost || 0],
+ chart: { type: 'donut', height: 160 },
+ labels: ['Used', 'Planned'],
+ colors: ['#3B82F6', '#E5E7EB'],
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '78%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ label: 'Used',
+ fontSize: '12px',
+ color: '#64748B',
+ formatter: () =>
+ `₹${this.formatNumber(data.resource_cost)}`
+ }
+ }
+ }
+ }
+ },
+ dataLabels: { enabled: false }, // 🔑 FIX
+ legend: { show: false }, // 🔑 FIX
+ title: {
+ text: 'Resource Budget',
+ align: 'center',
+ style: { fontSize: '13px', fontWeight: 600 }
+ },
+ tooltip: {
+ y: { formatter: v => `₹${this.formatNumber(v)}` }
+ }
+ }
+ ).render();
+ }
+
+
+ initAssetMiniChart() {
+ if (!this.state.budgetData) return;
+ let data = this.state.budgetData
+ new ApexCharts(
+ document.querySelector("#assetBudgetMini"),
+ {
+ series: [data.asset_cost, data.planned_asset_cost || 0],
+ chart: { type: 'donut', height: 160 },
+ labels: ['Used', 'Planned'],
+ colors: ['#10B981', '#E5E7EB'],
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '78%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ label: 'Used',
+ fontSize: '12px',
+ color: '#64748B',
+ formatter: () =>
+ `₹${this.formatNumber(data.asset_cost)}`
+ }
+ }
+ }
+ }
+ },
+ dataLabels: { enabled: false }, // 🔑 FIX
+ legend: { show: false },
+ title: {
+ text: 'Asset Budget',
+ align: 'center',
+ style: { fontSize: '13px', fontWeight: 600 }
+ },
+ tooltip: {
+ y: { formatter: v => `₹${this.formatNumber(v)}` }
+ }
+ }
+ ).render();
+ }
+
+
+ initUsageMiniChart() {
+ if (!this.state.budgetData) return;
+ let data = this.state.budgetData
+ new ApexCharts(
+ document.querySelector("#usageBudgetMini"),
+ {
+ series: [data.used_budget, data.available_budget],
+ chart: { type: 'donut', height: 160 },
+ labels: ['Used', 'Available'],
+ colors: ['#F59E0B', '#22C55E'],
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '78%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ label: 'Used',
+ fontSize: '12px',
+ color: '#64748B',
+ formatter: () =>
+ `${((data.used_budget / data.total_budget) * 100).toFixed(1)}%`
+ }
+ }
+ }
+ }
+ },
+ dataLabels: { enabled: false }, // 🔑 FIX
+ legend: { show: false },
+ title: {
+ text: 'Budget Usage',
+ align: 'center',
+ style: { fontSize: '13px', fontWeight: 600 }
+ },
+ tooltip: {
+ y: { formatter: v => `₹${this.formatNumber(v)}` }
+ }
+ }
+ ).render();
+ }
+
+
+ initMainBudgetChart() {
+ if (!this.state.budgetData) return;
+ let data = this.state.budgetData
+ const exceeded = data.used_budget > data.total_budget;
+
+ new ApexCharts(
+ document.querySelector("#budgetMainChart"),
+ {
+ series: [
+ data.resource_cost,
+ data.asset_cost,
+ data.available_budget
+ ],
+ chart: {
+ type: 'donut',
+ height: 300
+ },
+ labels: ['Resource Cost', 'Asset Cost', 'Remaining'],
+ colors: ['#3B82F6', '#10B981', '#E5E7EB'],
+ stroke: { width: 3, colors: ['#ffffff']},
+ states: {
+ hover: {
+ filter: { type: 'none' }
+ },
+ active: {
+ filter: { type: 'none' }
+ }
+ },
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '65%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ label: exceeded ? '⚠ Over Budget' : 'Total Budget',
+ color: exceeded ? '#EF4444' : '#374151',
+ formatter: () => `₹${this.formatNumber(data.total_budget)}`
+ }
+ }
+ }
+ }
+ },
+ tooltip: {
+ y: {
+ formatter: v => `₹${this.formatNumber(v)}`
+ }
+ }
+ }
+ ).render();
+ }
+
+ initEmployeePerformanceChart() {
+ if (!this.state.employeePerformance.length) return;
+
+ const element = document.querySelector("#employeePerformanceChart");
+ if (!element) return;
+
+ const employees = this.state.employeePerformance.slice(0, 10); // Top 10 employees
+ const categories = employees.map(emp => emp.employee_name.split(' ')[0]); // First names
+
+ const options = {
+ series: [{
+ name: 'Efficiency Rate',
+ data: employees.map(emp => emp.efficiency_rate)
+ }, {
+ name: 'On-Time Rate',
+ data: employees.map(emp => emp.on_time_rate)
+ }],
+ chart: {
+ type: 'bar',
+ height: 350,
+ stacked: false,
+ toolbar: { show: false }
+ },
+ colors: ['#00e396', '#008ffb'],
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '55%',
+ borderRadius: 5
+ },
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent']
+ },
+ xaxis: {
+ categories: categories,
+ labels: {
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'Percentage (%)',
+ style: {
+ }
+ },
+ labels: {
+ formatter: function(val) {
+ return val.toFixed(0) + '%';
+ },
+ style: {
+ }
+ }
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ y: {
+ formatter: function(val) {
+ return val.toFixed(1) + '%';
+ }
+ }
+ },
+ legend: {
+ position: 'top',
+ horizontalAlign: 'center',
+ labels: {
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ }
+
+ initTaskProgressChart() {
+ if (!this.state.tasksData.length) return;
+
+ const element = document.querySelector("#taskProgressChart");
+ if (!element) return;
+
+ // Calculate completion percentages
+ const completedTasks = this.state.tasksData.filter(task => task.state === '1_done' || task.state === '1_canceled').length;
+ const inProgressTasks = this.state.tasksData.filter(task => task.state === '01_in_progress').length;
+ const todoTasks = this.state.tasksData.filter(task => task.state === '04_waiting_normal').length;
+ const totalTasks = this.state.tasksData.length;
+
+ const completionRate = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
+
+ const options = {
+ series: [completionRate],
+ chart: {
+ height: 250,
+ type: 'radialBar',
+ offsetY: -10
+ },
+ plotOptions: {
+ radialBar: {
+ startAngle: -135,
+ endAngle: 135,
+ dataLabels: {
+ name: {
+ fontSize: '16px',
+ offsetY: 120
+ },
+ value: {
+ offsetY: 76,
+ fontSize: '34px',
+ formatter: function(val) {
+ return val.toFixed(1) + '%';
+ }
+ }
+ }
+ }
+ },
+ colors: ['#00e396'],
+ fill: {
+ type: 'gradient',
+ gradient: {
+ shade: 'dark',
+ shadeIntensity: 0.15,
+ inverseColors: false,
+ opacityFrom: 1,
+ opacityTo: 1,
+ stops: [0, 50, 65, 91]
+ },
+ },
+ stroke: {
+ dashArray: 4
+ },
+ labels: ['Overall Completion'],
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ }
+
+ initTimeVarianceChart() {
+ if (!this.state.employeePerformance.length) return;
+
+ const element = document.querySelector("#timeVarianceChart");
+ if (!element) return;
+
+ const employees = this.state.employeePerformance.slice(0, 8);
+ const categories = employees.map(emp => emp.employee_name.split(' ')[0]);
+
+ const options = {
+ series: [{
+ name: 'Time Variance',
+ data: employees.map(emp => emp.time_variance)
+ }],
+ chart: {
+ type: 'bar',
+ height: 300,
+ toolbar: { show: false }
+ },
+ plotOptions: {
+ bar: {
+ borderRadius: 4,
+ horizontal: true,
+ distributed: true,
+ dataLabels: {
+ position: 'top'
+ }
+ }
+ },
+ colors: employees.map(emp => {
+ const variance = emp.time_variance;
+ if (variance <= 0) return '#00e396'; // Green for ahead of schedule
+ if (variance <= 10) return '#ffb800'; // Yellow for minor delay
+ if (variance <= 20) return '#ff9f00'; // Orange for moderate delay
+ return '#ff4560'; // Red for major delay
+ }),
+ dataLabels: {
+ enabled: true,
+ formatter: function(val) {
+ return val.toFixed(1) + '%';
+ },
+ offsetX: 0,
+ style: {
+ fontSize: '12px',
+ colors: ['#fff']
+ }
+ },
+ xaxis: {
+ categories: categories,
+ labels: {
+ formatter: function(val) {
+ return val.toFixed(1) + '%';
+ },
+ style: {
+ }
+ }
+ },
+ yaxis: {
+ labels: {
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ tooltip: {
+ y: {
+ formatter: function(val) {
+ return val > 0 ? `+${val.toFixed(1)}% delay` : `${val.toFixed(1)}% ahead`;
+ }
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ }
+
+ getDeterministicColor(stageName, usedColors) {
+ const CUSTOM_STAGE_PALETTE = [
+ '#2563EB', // blue
+ '#7C3AED', // violet
+ '#0891B2', // cyan
+ '#0D9488', // teal
+ '#65A30D', // olive
+ '#CA8A04', // amber
+ '#DB2777', // rose
+ '#9333EA', // purple
+ '#0284C7', // sky
+ '#16A34A', // green
+ ];
+
+ let hash = 0;
+ for (let i = 0; i < stageName.length; i++) {
+ hash = stageName.charCodeAt(i) + ((hash << 5) - hash);
+ }
+
+ let index = Math.abs(hash) % CUSTOM_STAGE_PALETTE.length;
+ let color = CUSTOM_STAGE_PALETTE[index];
+
+ // 🔒 Avoid collisions with already-used colors
+ let i = 1;
+ while (usedColors.has(color)) {
+ color = CUSTOM_STAGE_PALETTE[(index + i) % CUSTOM_STAGE_PALETTE.length];
+ i++;
+ }
+
+ usedColors.add(color);
+ return color;
+ }
+
+ resolveStageColor(stageName, usedColors) {
+ const name = stageName.toLowerCase();
+ let color;
+
+ if (name.includes('done') || name.includes('complete')) {
+ color = '#00E396'; // emerald
+ }
+ else if (name.includes('cancel') || name.includes('reject')) {
+ color = '#9CA3AF'; // neutral gray
+ }
+ else if (name.includes('hold') || name.includes('wait')) {
+ color = '#F59E0B'; // amber
+ }
+ else if (name.includes('progress') || name.includes('doing')) {
+ color = '#3B82F6'; // blue
+ }
+ else if (name.includes('test') || name.includes('review')) {
+ color = '#8B5CF6'; // violet
+ }
+ else {
+ color = this.getDeterministicColor(stageName, usedColors);
+ return color;
+ }
+
+ // 🔒 IMPORTANT: register semantic colors too
+ if (!usedColors.has(color)) {
+ usedColors.add(color);
+ }
+
+ return color;
+ }
+
+
+ initStageDistributionChart() {
+ if (!this.state.tasksData?.length) return;
+
+ const element = document.querySelector("#stageDistributionChart");
+ if (!element) return;
+
+ // 1️⃣ Group by stage
+ const stageCounts = {};
+ this.state.tasksData.forEach(task => {
+ const stage = task.stage_name || 'No Stage';
+ stageCounts[stage] = (stageCounts[stage] || 0) + 1;
+ });
+
+ const stages = Object.keys(stageCounts);
+ const counts = Object.values(stageCounts);
+ const totalTasks = counts.reduce((a, b) => a + b, 0);
+
+ // 2️⃣ Resolve colors
+ const usedColors = new Set();
+ const colors = stages.map(stage =>
+ this.resolveStageColor(stage, usedColors)
+ );
+
+ // 3️⃣ Chart options
+ const options = {
+ series: counts,
+ chart: {
+ type: 'donut',
+ height: 340,
+ animations: {
+ enabled: true,
+ easing: 'easeinout',
+ speed: 900
+ }
+ },
+
+ labels: stages,
+ colors: colors,
+
+ stroke: {
+ width: 3,
+ colors: ['#ffffff']
+ },
+
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '68%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ label: 'Total Tasks',
+ fontSize: '14px',
+ color: '#6B7280',
+ formatter: () => totalTasks
+ }
+ }
+ },
+ expandOnClick: true
+ }
+ },
+
+ dataLabels: {
+ enabled: true,
+ style: {
+ fontSize: '13px',
+ fontWeight: 600
+ },
+ formatter: (val, opts) => {
+ const count = opts.w.config.series[opts.seriesIndex];
+ return count >= 2 ? count : '';
+ }
+ },
+
+ legend: {
+ position: 'right',
+ fontSize: '14px',
+ markers: {
+ radius: 12
+ },
+ itemMargin: {
+ vertical: 6
+ },
+ labels: {
+ }
+ },
+
+ tooltip: {
+ y: {
+ formatter: (val) => {
+ const percent = ((val / totalTasks) * 100).toFixed(1);
+ return `${val} tasks (${percent}%)`;
+ }
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ }
+
+
+
+ initTimelineChart() {
+ if (!this.state.tasksData.length) return;
+
+ const element = document.querySelector("#timelineChart");
+ if (!element) return;
+
+ // Get tasks with deadlines
+ const tasksWithDeadlines = this.state.tasksData
+ .filter(task => task.date_deadline)
+ .slice(0, 15) // Limit to 15 for readability
+ .map(task => ({
+ x: task.sequence_name || task.name,
+ y: [
+ new Date(task.planned_date_begin || task.date_deadline).getTime(),
+ new Date(task.date_deadline).getTime()
+ ],
+ fillColor: this.getTaskColor(task)
+ }));
+
+ const options = {
+ series: [{
+ data: tasksWithDeadlines
+ }],
+ chart: {
+ height: 350,
+ type: 'rangeBar'
+ },
+ plotOptions: {
+ bar: {
+ horizontal: true,
+ distributed: true,
+ dataLabels: {
+ hideOverflowingLabels: false
+ }
+ }
+ },
+ dataLabels: {
+ enabled: true,
+ formatter: function(val, opts) {
+ const hours = (opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].estimated_hours || 0).toFixed(1);
+ return hours + 'h';
+ }
+ },
+ xaxis: {
+ type: 'datetime',
+ labels: {
+ style: {
+ }
+ }
+ },
+ yaxis: {
+ show: true,
+ labels: {
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ grid: {
+ row: {
+ colors: ['#f3f4f6', '#fff'],
+ opacity: 0.5
+ }
+ },
+ legend: {
+ show: false
+ },
+ tooltip: {
+ custom: function({ series, seriesIndex, dataPointIndex, w }) {
+ const data = w.config.series[seriesIndex].data[dataPointIndex];
+ const start = new Date(data.y[0]).toLocaleDateString();
+ const end = new Date(data.y[1]).toLocaleDateString();
+ return `
+
+ `;
+ }
+ }
+ };
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ this.charts.push(chart);
+ }
+
+ getTaskColor(task) {
+ if (task.is_overdue) return '#ff4560';
+ if (task.has_warning) return '#ffb800';
+ if (task.state === '1_done') return '#00e396';
+ if (task.state === '1_done') return '#94A3B8';
+ if (task.state === '01_in_progress') return '#008ffb';
+ return '#4facfe';
+ }
+
+ formatNumber(num) {
+ if (!num) return '0';
+ if (num >= 1000000) {
+ return (num / 1000000).toFixed(1) + 'M';
+ }
+ if (num >= 1000) {
+ return (num / 1000).toFixed(1) + 'K';
+ }
+ return num.toLocaleString();
+ }
+
+ getProjectKPIs() {
+ if (!this.state.projectData) return {};
+
+ const project = this.state.projectData;
+ const tasks = this.state.tasksData;
+
+ return {
+ totalTasks: tasks.length,
+ completedTasks: tasks.filter(t => t.state === '1_done' || t.state === '1_canceled').length,
+ overdueTasks: tasks.filter(t => t.is_overdue).length,
+ totalHours: tasks.reduce((sum, t) => sum + (t.estimated_hours || 0), 0),
+ actualHours: tasks.reduce((sum, t) => sum + (t.actual_hours || 0), 0),
+ budgetUsed: this.state.budgetData ?
+ (this.state.budgetData.used_budget) : 0,
+ totalBudget: this.state.budgetData?.total_budget || 0,
+ teamMembers: project.members_ids ? project.members_ids.length : 0,
+ completionRate: tasks.length > 0 ?
+ (tasks.filter(t => t.state === '1_done' || t.state === '1_canceled').length / tasks.length) * 100 : 0
+ };
+ }
+
+ async onClickOpenPopup() {
+ try {
+ const { ProjectDashboardPopup } = await import('./project_dashboard_popup');
+ this.dialogService.add(ProjectDashboardPopup, {
+ projectData: this.state.projectData,
+ tasksData: this.state.tasksData,
+ employeePerformance: this.state.employeePerformance,
+ budgetData: this.state.budgetData,
+ onClose: () => console.log("Popup closed"),
+ onDownload: () => this.onClickDownload(),
+ });
+ } catch (error) {
+ console.error("Error opening popup:", error);
+ this.notificationService.add("Error opening popup", { type: 'danger' });
+ }
+ }
+
+ onClickDownload() {
+ try {
+ const reportData = {
+ project: this.state.projectData,
+ summary: this.getProjectKPIs(),
+ tasks_summary: this.state.tasksData.map(task => ({
+ name: task.name,
+ stage: task.stage_id ? task.stage_id[1] : 'No Stage',
+ estimated_hours: task.estimated_hours,
+ actual_hours: task.actual_hours,
+ completion_rate: task.completion_rate,
+ status: task.state
+ })),
+ employee_performance: this.state.employeePerformance,
+ budget_data: this.state.budgetData,
+ generated_at: new Date().toISOString()
+ };
+
+ const dataStr = JSON.stringify(reportData, null, 2);
+ const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+
+ const projectName = this.state.projectData?.sequence_name || 'project';
+ const exportFileName = `${projectName}_dashboard_${new Date().toISOString().split('T')[0]}.json`;
+
+ const linkElement = document.createElement('a');
+ linkElement.setAttribute('href', dataUri);
+ linkElement.setAttribute('download', exportFileName);
+ document.body.appendChild(linkElement);
+ linkElement.click();
+ document.body.removeChild(linkElement);
+
+ this.notificationService.add("Dashboard exported successfully!", { type: 'success' });
+ } catch (error) {
+ console.error("Error downloading dashboard:", error);
+ this.notificationService.add("Error exporting dashboard", { type: 'danger' });
+ }
+ }
+
+ onClickToggleDarkMode() {
+ this.state.darkMode = !this.state.darkMode;
+ localStorage.setItem('dashboardDarkMode', this.state.darkMode);
+ document.body.classList.toggle('o_dark_mode', this.state.darkMode);
+
+ // Update charts theme
+ if (this.charts) {
+ this.charts.forEach(chart => {
+ try {
+ chart.updateOptions({
+ theme: { mode: this.state.darkMode ? 'dark' : 'light' }
+ });
+ } catch (e) {
+ console.warn("Error updating chart theme:", e);
+ }
+ });
+ }
+
+ this.notificationService.add(
+ this.state.darkMode ? "Dark mode enabled" : "Light mode enabled",
+ { type: 'info' }
+ );
+ }
+
+ onClickToggleAnimations() {
+ this.state.animationEnabled = !this.state.animationEnabled;
+
+ if (this.charts) {
+ this.charts.forEach(chart => {
+ try {
+ chart.updateOptions({
+ chart: { animations: { enabled: this.state.animationEnabled } }
+ });
+ } catch (e) {
+ console.warn("Error updating chart animations:", e);
+ }
+ });
+ }
+
+ this.notificationService.add(
+ this.state.animationEnabled ? "Animations enabled" : "Animations disabled",
+ { type: 'info' }
+ );
+ }
+
+ onClickRefresh() {
+ this.loadDashboardData();
+ this.notificationService.add("Dashboard refreshed!", { type: 'info' });
+ }
+
+ // Clean up charts when component is destroyed
+ onWillDestroy() {
+ if (this.charts) {
+ this.charts.forEach(chart => chart.destroy());
+ }
+ }
+}
+
+export const projectDashboardWidget = {
+ component: ProjectDashboardWidget,
+};
+
+export const projectDashboardAction = {
+ component: ProjectDashboardWidget
+};
+registry.category("view_widgets").add("project_dashboard", projectDashboardWidget);
+registry.category("actions").add("project_dashboard", projectDashboardAction);
\ No newline at end of file
diff --git a/addons_extensions/project_dashboards_management/static/src/js/external_lib/apexcharts/apexcharts.js b/addons_extensions/project_dashboards_management/static/src/js/external_lib/apexcharts/apexcharts.js
new file mode 100644
index 000000000..e09b5a4a5
--- /dev/null
+++ b/addons_extensions/project_dashboards_management/static/src/js/external_lib/apexcharts/apexcharts.js
@@ -0,0 +1,37 @@
+/*!
+ * ApexCharts v5.3.6
+ * (c) 2018-2025 ApexCharts
+ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ApexCharts=e()}(this,(function(){"use strict";function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,a=Array(e);i\n '.concat(t.config.series[e].name?t.config.series[e].name:"series-"+(e+1),": ").concat(t.globals.series[e][i],"\n
"):'')+"
"}}]),t}(),Wi=function(){function t(e){i(this,t),this.opts=e}return s(t,[{key:"init",value:function(t){var e=t.responsiveOverride,i=this.opts,a=new Oi,s=new Ni(i);this.chartType=i.chart.type,i=this.extendYAxis(i),i=this.extendAnnotations(i);var r=a.init(),n={};if(i&&"object"===b(i)){var o,l,h,c,d,u,g,p,f,x,m={};m=-1!==["line","area","bar","candlestick","boxPlot","rangeBar","rangeArea","bubble","scatter","heatmap","treemap","pie","polarArea","donut","radar","radialBar"].indexOf(i.chart.type)?s[i.chart.type]():s.line(),null!==(o=i.plotOptions)&&void 0!==o&&null!==(l=o.bar)&&void 0!==l&&l.isFunnel&&(m=s.funnel()),i.chart.stacked&&"bar"===i.chart.type&&(m=s.stackedBars()),null!==(h=i.chart.brush)&&void 0!==h&&h.enabled&&(m=s.brush(m)),null!==(c=i.plotOptions)&&void 0!==c&&null!==(d=c.line)&&void 0!==d&&d.isSlopeChart&&(m=s.slope()),i.chart.stacked&&"100%"===i.chart.stackType&&(i=s.stacked100(i)),null!==(u=i.plotOptions)&&void 0!==u&&null!==(g=u.bar)&&void 0!==g&&g.isDumbbell&&(i=s.dumbbell(i)),this.checkForDarkTheme(window.Apex),this.checkForDarkTheme(i),i.xaxis=i.xaxis||window.Apex.xaxis||{},e||(i.xaxis.convertedCatToNumeric=!1),(null!==(p=(i=this.checkForCatToNumericXAxis(this.chartType,m,i)).chart.sparkline)&&void 0!==p&&p.enabled||null!==(f=window.Apex.chart)&&void 0!==f&&null!==(x=f.sparkline)&&void 0!==x&&x.enabled)&&(m=s.sparkline(m)),n=v.extend(r,m)}var y=v.extend(n,window.Apex);return r=v.extend(y,i),r=this.handleUserInputErrors(r)}},{key:"checkForCatToNumericXAxis",value:function(t,e,i){var a,s,r=new Ni(i),n=("bar"===t||"boxPlot"===t)&&(null===(a=i.plotOptions)||void 0===a||null===(s=a.bar)||void 0===s?void 0:s.horizontal),o="pie"===t||"polarArea"===t||"donut"===t||"radar"===t||"radialBar"===t||"heatmap"===t,l="datetime"!==i.xaxis.type&&"numeric"!==i.xaxis.type,h=i.xaxis.tickPlacement?i.xaxis.tickPlacement:e.xaxis&&e.xaxis.tickPlacement;return n||o||!l||"between"===h||(i=r.convertCatToNumeric(i)),i}},{key:"extendYAxis",value:function(t,e){var i=new Oi;(void 0===t.yaxis||!t.yaxis||Array.isArray(t.yaxis)&&0===t.yaxis.length)&&(t.yaxis={}),t.yaxis.constructor!==Array&&window.Apex.yaxis&&window.Apex.yaxis.constructor!==Array&&(t.yaxis=v.extend(t.yaxis,window.Apex.yaxis)),t.yaxis.constructor!==Array?t.yaxis=[v.extend(i.yAxis,t.yaxis)]:t.yaxis=v.extendArray(t.yaxis,i.yAxis);var a=!1;t.yaxis.forEach((function(t){t.logarithmic&&(a=!0)}));var s=t.series;return e&&!s&&(s=e.config.series),a&&s.length!==t.yaxis.length&&s.length&&(t.yaxis=s.map((function(e,a){if(e.name||(s[a].name="series-".concat(a+1)),t.yaxis[a])return t.yaxis[a].seriesName=s[a].name,t.yaxis[a];var r=v.extend(i.yAxis,t.yaxis[0]);return r.show=!1,r}))),a&&s.length>1&&s.length!==t.yaxis.length&&console.warn("A multi-series logarithmic chart should have equal number of series and y-axes"),t}},{key:"extendAnnotations",value:function(t){return void 0===t.annotations&&(t.annotations={},t.annotations.yaxis=[],t.annotations.xaxis=[],t.annotations.points=[]),t=this.extendYAxisAnnotations(t),t=this.extendXAxisAnnotations(t),t=this.extendPointAnnotations(t)}},{key:"extendYAxisAnnotations",value:function(t){var e=new Oi;return t.annotations.yaxis=v.extendArray(void 0!==t.annotations.yaxis?t.annotations.yaxis:[],e.yAxisAnnotation),t}},{key:"extendXAxisAnnotations",value:function(t){var e=new Oi;return t.annotations.xaxis=v.extendArray(void 0!==t.annotations.xaxis?t.annotations.xaxis:[],e.xAxisAnnotation),t}},{key:"extendPointAnnotations",value:function(t){var e=new Oi;return t.annotations.points=v.extendArray(void 0!==t.annotations.points?t.annotations.points:[],e.pointAnnotation),t}},{key:"checkForDarkTheme",value:function(t){t.theme&&"dark"===t.theme.mode&&(t.tooltip||(t.tooltip={}),"light"!==t.tooltip.theme&&(t.tooltip.theme="dark"),t.chart.foreColor||(t.chart.foreColor="#f6f7f8"),t.theme.palette||(t.theme.palette="palette4"))}},{key:"handleUserInputErrors",value:function(t){var e=t;if(e.tooltip.shared&&e.tooltip.intersect)throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.");if("bar"===e.chart.type&&e.plotOptions.bar.horizontal){if(e.yaxis.length>1)throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false");e.yaxis[0].reversed&&(e.yaxis[0].opposite=!0),e.xaxis.tooltip.enabled=!1,e.yaxis[0].tooltip.enabled=!1,e.chart.zoom.enabled=!1}return"bar"!==e.chart.type&&"rangeBar"!==e.chart.type||e.tooltip.shared&&"barWidth"===e.xaxis.crosshairs.width&&e.series.length>1&&(e.xaxis.crosshairs.width="tickWidth"),"candlestick"!==e.chart.type&&"boxPlot"!==e.chart.type||e.yaxis[0].reversed&&(console.warn("Reversed y-axis in ".concat(e.chart.type," chart is not supported.")),e.yaxis[0].reversed=!1),e}}]),t}(),Bi=function(){function t(){i(this,t)}return s(t,[{key:"initGlobalVars",value:function(t){t.series=[],t.seriesCandleO=[],t.seriesCandleH=[],t.seriesCandleM=[],t.seriesCandleL=[],t.seriesCandleC=[],t.seriesRangeStart=[],t.seriesRangeEnd=[],t.seriesRange=[],t.seriesPercent=[],t.seriesGoals=[],t.seriesX=[],t.seriesZ=[],t.seriesNames=[],t.seriesTotals=[],t.seriesLog=[],t.seriesColors=[],t.stackedSeriesTotals=[],t.seriesXvalues=[],t.seriesYvalues=[],t.dataWasParsed=!1,t.originalSeries=null,t.labels=[],t.hasXaxisGroups=!1,t.groups=[],t.barGroups=[],t.lineGroups=[],t.areaGroups=[],t.hasSeriesGroups=!1,t.seriesGroups=[],t.categoryLabels=[],t.timescaleLabels=[],t.noLabelsProvided=!1,t.resizeTimer=null,t.selectionResizeTimer=null,t.lastWheelExecution=0,t.delayedElements=[],t.pointsArray=[],t.dataLabelsRects=[],t.isXNumeric=!1,t.skipLastTimelinelabel=!1,t.skipFirstTimelinelabel=!1,t.isDataXYZ=!1,t.isMultiLineX=!1,t.isMultipleYAxis=!1,t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE,t.minYArr=[],t.maxYArr=[],t.maxX=-Number.MAX_VALUE,t.minX=Number.MAX_VALUE,t.initialMaxX=-Number.MAX_VALUE,t.initialMinX=Number.MAX_VALUE,t.maxDate=0,t.minDate=Number.MAX_VALUE,t.minZ=Number.MAX_VALUE,t.maxZ=-Number.MAX_VALUE,t.minXDiff=Number.MAX_VALUE,t.yAxisScale=[],t.xAxisScale=null,t.xAxisTicksPositions=[],t.yLabelsCoords=[],t.yTitleCoords=[],t.barPadForNumericAxis=0,t.padHorizontal=0,t.xRange=0,t.yRange=[],t.zRange=0,t.dataPoints=0,t.xTickAmount=0,t.multiAxisTickAmount=0}},{key:"globalVars",value:function(t){return{chartID:null,cuid:null,events:{beforeMount:[],mounted:[],updated:[],clicked:[],selection:[],dataPointSelection:[],zoomed:[],scrolled:[]},colors:[],clientX:null,clientY:null,fill:{colors:[]},stroke:{colors:[]},dataLabels:{style:{colors:[]}},radarPolygons:{fill:{colors:[]}},markers:{colors:[],size:t.markers.size,largestSize:0},animationEnded:!1,isTouchDevice:"ontouchstart"in window||navigator.msMaxTouchPoints,isDirty:!1,isExecCalled:!1,initialConfig:null,initialSeries:[],lastXAxis:[],lastYAxis:[],columnSeries:null,labels:[],timescaleLabels:[],noLabelsProvided:!1,allSeriesCollapsed:!1,collapsedSeries:[],collapsedSeriesIndices:[],ancillaryCollapsedSeries:[],ancillaryCollapsedSeriesIndices:[],risingSeries:[],dataFormatXNumeric:!1,capturedSeriesIndex:-1,capturedDataPointIndex:-1,selectedDataPoints:[],invalidLogScale:!1,ignoreYAxisIndexes:[],maxValsInArrayIndex:0,radialSize:0,selection:void 0,zoomEnabled:"zoom"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.zoom&&t.chart.zoom.enabled,panEnabled:"pan"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.pan,selectionEnabled:"selection"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.selection,yaxis:null,mousedown:!1,lastClientPosition:{},visibleXRange:void 0,yValueDecimal:0,total:0,SVGNS:"http://www.w3.org/2000/svg",svgWidth:0,svgHeight:0,noData:!1,locale:{},dom:{},memory:{methodsToExec:[]},shouldAnimate:!0,skipLastTimelinelabel:!1,skipFirstTimelinelabel:!1,delayedElements:[],axisCharts:!0,isDataXYZ:!1,isSlopeChart:t.plotOptions.line.isSlopeChart,resized:!1,resizeTimer:null,comboCharts:!1,dataChanged:!1,previousPaths:[],allSeriesHasEqualX:!0,pointsArray:[],dataLabelsRects:[],lastDrawnDataLabelsIndexes:[],hasNullValues:!1,zoomed:!1,gridWidth:0,gridHeight:0,rotateXLabels:!1,defaultLabels:!1,xLabelFormatter:void 0,yLabelFormatters:[],xaxisTooltipFormatter:void 0,ttKeyFormatter:void 0,ttVal:void 0,ttZFormatter:void 0,LINE_HEIGHT_RATIO:1.618,xAxisLabelsHeight:0,xAxisGroupLabelsHeight:0,xAxisLabelsWidth:0,yAxisLabelsWidth:0,scaleX:1,scaleY:1,translateX:0,translateY:0,translateYAxisX:[],yAxisWidths:[],translateXAxisY:0,translateXAxisX:0,tooltip:null,niceScaleAllowedMagMsd:[[1,1,2,5,5,5,10,10,10,10,10],[1,1,2,5,5,5,10,10,10,10,10]],niceScaleDefaultTicks:[1,2,4,4,6,6,6,6,6,6,6,6,6,6,6,6,6,6,12,12,12,12,12,12,12,12,12,24],seriesYAxisMap:[],seriesYAxisReverseMap:[]}}},{key:"init",value:function(t){var e=this.globalVars(t);return this.initGlobalVars(e),e.initialConfig=v.extend({},t),e.initialSeries=v.clone(t.series),e.lastXAxis=v.clone(e.initialConfig.xaxis),e.lastYAxis=v.clone(e.initialConfig.yaxis),e}}]),t}(),Gi=function(){function t(e){i(this,t),this.opts=e}return s(t,[{key:"init",value:function(){var t=new Wi(this.opts).init({responsiveOverride:!1});return{config:t,globals:(new Bi).init(t)}}}]),t}(),ji=function(){function t(e){i(this,t),this.ctx=e,this.w=e.w,this.opts=null,this.seriesIndex=0,this.patternIDs=[]}return s(t,[{key:"clippedImgArea",value:function(t){var e=this.w,i=e.config,a=parseInt(e.globals.gridWidth,10),s=parseInt(e.globals.gridHeight,10),r=a>s?a:s,n=t.image,o=0,l=0;void 0===t.width&&void 0===t.height?void 0!==i.fill.image.width&&void 0!==i.fill.image.height?(o=i.fill.image.width+1,l=i.fill.image.height):(o=r+1,l=r):(o=t.width,l=t.height);var h=document.createElementNS(e.globals.SVGNS,"pattern");Mi.setAttrs(h,{id:t.patternID,patternUnits:t.patternUnits?t.patternUnits:"userSpaceOnUse",width:o+"px",height:l+"px"});var c=document.createElementNS(e.globals.SVGNS,"image");h.appendChild(c),c.setAttributeNS(window.SVG.xlink,"href",n),Mi.setAttrs(c,{x:0,y:0,preserveAspectRatio:"none",width:o+"px",height:l+"px"}),c.style.opacity=t.opacity,e.globals.dom.elDefs.node.appendChild(h)}},{key:"getSeriesIndex",value:function(t){var e=this.w,i=e.config.chart.type;return("bar"===i||"rangeBar"===i)&&e.config.plotOptions.bar.distributed||"heatmap"===i||"treemap"===i?this.seriesIndex=t.seriesNumber:this.seriesIndex=t.seriesNumber%e.globals.series.length,this.seriesIndex}},{key:"computeColorStops",value:function(t,e){var i,a=this.w,s=null,n=null,o=r(t);try{for(o.s();!(i=o.n()).done;){var l=i.value;l>=e.threshold?(null===s||l>s)&&(s=l):(null===n||l".concat(a[0],': ')+r+"
"+"".concat(a[1],': ')+n+"
"+(o?"".concat(a[2],': ')+o+"
":"")+"".concat(a[3],': ')+l+"
"+"".concat(a[4],': ')+h+"
".concat(i.val,"
")})),m.innerHTML=t+"",v.innerHTML=e+""};n?l.globals.seriesGoals[e][i]&&Array.isArray(l.globals.seriesGoals[e][i])?y():(m.innerHTML="",v.innerHTML=""):y()}else m.innerHTML="",v.innerHTML="";null!==p&&(a[e].querySelector(".apexcharts-tooltip-text-z-label").innerHTML=l.config.tooltip.z.title,a[e].querySelector(".apexcharts-tooltip-text-z-value").innerHTML=void 0!==p?p:"");if(n&&f[0]){if(l.config.tooltip.hideEmptySeries){var w=a[e].querySelector(".apexcharts-tooltip-marker"),k=a[e].querySelector(".apexcharts-tooltip-text");0==parseFloat(c)?(w.style.display="none",k.style.display="none"):(w.style.display="block",k.style.display="block")}null==c||l.globals.ancillaryCollapsedSeriesIndices.indexOf(e)>-1||l.globals.collapsedSeriesIndices.indexOf(e)>-1||Array.isArray(h.tConfig.enabledOnSeries)&&-1===h.tConfig.enabledOnSeries.indexOf(e)?f[0].parentNode.style.display="none":f[0].parentNode.style.display=l.config.tooltip.items.display}else Array.isArray(h.tConfig.enabledOnSeries)&&-1===h.tConfig.enabledOnSeries.indexOf(e)&&(f[0].parentNode.style.display="none")}},{key:"toggleActiveInactiveSeries",value:function(t,e){var i=this.w;if(t)this.tooltipUtil.toggleAllTooltipSeriesGroups("enable");else{this.tooltipUtil.toggleAllTooltipSeriesGroups("disable");var a=i.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group-".concat(e));a&&(a.classList.add("apexcharts-active"),a.style.display=i.config.tooltip.items.display)}}},{key:"getValuesToPrint",value:function(t){var e=t.i,i=t.j,a=this.w,s=this.ctx.series.filteredSeriesX(),r="",n="",o=null,l=null,h={series:a.globals.series,seriesIndex:e,dataPointIndex:i,w:a},c=a.globals.ttZFormatter;null===i?l=a.globals.series[e]:a.globals.isXNumeric&&"treemap"!==a.config.chart.type?(r=s[e][i],0===s[e].length&&(r=s[this.tooltipUtil.getFirstActiveXArray(s)][i])):r=new Ji(this.ctx).isFormatXY()?void 0!==a.config.series[e].data[i]?a.config.series[e].data[i].x:"":void 0!==a.globals.labels[i]?a.globals.labels[i]:"";var d=r;a.globals.isXNumeric&&"datetime"===a.config.xaxis.type?r=new Xi(this.ctx).xLabelFormat(a.globals.ttKeyFormatter,d,d,{i:void 0,dateFormatter:new zi(this.ctx).formatDate,w:this.w}):r=a.globals.isBarHorizontal?a.globals.yLabelFormatters[0](d,h):a.globals.xLabelFormatter(d,h);return void 0!==a.config.tooltip.x.formatter&&(r=a.globals.ttKeyFormatter(d,h)),a.globals.seriesZ.length>0&&a.globals.seriesZ[e].length>0&&(o=c(a.globals.seriesZ[e][i],a)),n="function"==typeof a.config.xaxis.tooltip.formatter?a.globals.xaxisTooltipFormatter(d,h):r,{val:Array.isArray(l)?l.join(" "):l,xVal:Array.isArray(r)?r.join(" "):r,xAxisTTVal:Array.isArray(n)?n.join(" "):n,zVal:o}}},{key:"handleCustomTooltip",value:function(t){var e=t.i,i=t.j,a=t.y1,s=t.y2,r=t.w,n=this.ttCtx.getElTooltip(),o=r.config.tooltip.custom;Array.isArray(o)&&o[e]&&(o=o[e]);var l=o({ctx:this.ctx,series:r.globals.series,seriesIndex:e,dataPointIndex:i,y1:a,y2:s,w:r});"string"==typeof l||"number"==typeof l?n.innerHTML=l:(l instanceof Element||"string"==typeof l.nodeName)&&(n.innerHTML="",n.appendChild(l.cloneNode(!0)))}}]),t}(),ka=function(){function t(e){i(this,t),this.ttCtx=e,this.ctx=e.ctx,this.w=e.w}return s(t,[{key:"moveXCrosshairs",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.ttCtx,a=this.w,s=i.getElXCrosshairs(),r=t-i.xcrosshairsWidth/2,n=a.globals.labels.slice().length;if(null!==e&&(r=a.globals.gridWidth/n*e),null===s||a.globals.isBarHorizontal||(s.setAttribute("x",r),s.setAttribute("x1",r),s.setAttribute("x2",r),s.setAttribute("y2",a.globals.gridHeight),s.classList.add("apexcharts-active")),r<0&&(r=0),r>a.globals.gridWidth&&(r=a.globals.gridWidth),i.isXAxisTooltipEnabled){var o=r;"tickWidth"!==a.config.xaxis.crosshairs.width&&"barWidth"!==a.config.xaxis.crosshairs.width||(o=r+i.xcrosshairsWidth/2),this.moveXAxisTooltip(o)}}},{key:"moveYCrosshairs",value:function(t){var e=this.ttCtx;null!==e.ycrosshairs&&Mi.setAttrs(e.ycrosshairs,{y1:t,y2:t}),null!==e.ycrosshairsHidden&&Mi.setAttrs(e.ycrosshairsHidden,{y1:t,y2:t})}},{key:"moveXAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;if(null!==i.xaxisTooltip&&0!==i.xcrosshairsWidth){i.xaxisTooltip.classList.add("apexcharts-active");var a=i.xaxisOffY+e.config.xaxis.tooltip.offsetY+e.globals.translateY+1+e.config.xaxis.offsetY;if(t-=i.xaxisTooltip.getBoundingClientRect().width/2,!isNaN(t)){t+=e.globals.translateX;var s;s=new Mi(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML),i.xaxisTooltipText.style.minWidth=s.width+"px",i.xaxisTooltip.style.left=t+"px",i.xaxisTooltip.style.top=a+"px"}}}},{key:"moveYAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;null===i.yaxisTTEls&&(i.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));var a=parseInt(i.ycrosshairsHidden.getAttribute("y1"),10),s=e.globals.translateY+a,r=i.yaxisTTEls[t].getBoundingClientRect(),n=r.height,o=e.globals.translateYAxisX[t]-2;e.config.yaxis[t].opposite&&(o-=r.width),s-=n/2,-1===e.globals.ignoreYAxisIndexes.indexOf(t)&&s>0&&s\n '.concat(t.config.series[e].name?t.config.series[e].name:"series-"+(e+1),": ").concat(t.globals.series[e][i],"\n
"):'')+"
"}}]),t}(),E=function(){function t(e){a(this,t),this.opts=e}return r(t,[{key:"init",value:function(t){var e=t.responsiveOverride,a=this.opts,s=new L,r=new X(a);this.chartType=a.chart.type,a=this.extendYAxis(a),a=this.extendAnnotations(a);var o=s.init(),n={};if(a&&"object"===i(a)){var l,h,c,d,g,u,p,f,b,v,m={};m=-1!==["line","area","bar","candlestick","boxPlot","rangeBar","rangeArea","bubble","scatter","heatmap","treemap","pie","polarArea","donut","radar","radialBar"].indexOf(a.chart.type)?r[a.chart.type]():r.line(),null!==(l=a.plotOptions)&&void 0!==l&&null!==(h=l.bar)&&void 0!==h&&h.isFunnel&&(m=r.funnel()),a.chart.stacked&&"bar"===a.chart.type&&(m=r.stackedBars()),null!==(c=a.chart.brush)&&void 0!==c&&c.enabled&&(m=r.brush(m)),a.chart.stacked&&"100%"===a.chart.stackType&&(a=r.stacked100(a)),null!==(d=a.plotOptions)&&void 0!==d&&null!==(g=d.bar)&&void 0!==g&&g.isDumbbell&&(a=r.dumbbell(a)),"monotoneCubic"===(null===(u=a)||void 0===u||null===(p=u.stroke)||void 0===p?void 0:p.curve)&&(a.stroke.curve="smooth"),this.checkForDarkTheme(window.Apex),this.checkForDarkTheme(a),a.xaxis=a.xaxis||window.Apex.xaxis||{},e||(a.xaxis.convertedCatToNumeric=!1),(null!==(f=(a=this.checkForCatToNumericXAxis(this.chartType,m,a)).chart.sparkline)&&void 0!==f&&f.enabled||null!==(b=window.Apex.chart)&&void 0!==b&&null!==(v=b.sparkline)&&void 0!==v&&v.enabled)&&(m=r.sparkline(m)),n=x.extend(o,m)}var y=x.extend(n,window.Apex);return o=x.extend(y,a),o=this.handleUserInputErrors(o)}},{key:"checkForCatToNumericXAxis",value:function(t,e,i){var a,s,r=new X(i),o=("bar"===t||"boxPlot"===t)&&(null===(a=i.plotOptions)||void 0===a||null===(s=a.bar)||void 0===s?void 0:s.horizontal),n="pie"===t||"polarArea"===t||"donut"===t||"radar"===t||"radialBar"===t||"heatmap"===t,l="datetime"!==i.xaxis.type&&"numeric"!==i.xaxis.type,h=i.xaxis.tickPlacement?i.xaxis.tickPlacement:e.xaxis&&e.xaxis.tickPlacement;return o||n||!l||"between"===h||(i=r.convertCatToNumeric(i)),i}},{key:"extendYAxis",value:function(t,e){var i=new L;(void 0===t.yaxis||!t.yaxis||Array.isArray(t.yaxis)&&0===t.yaxis.length)&&(t.yaxis={}),t.yaxis.constructor!==Array&&window.Apex.yaxis&&window.Apex.yaxis.constructor!==Array&&(t.yaxis=x.extend(t.yaxis,window.Apex.yaxis)),t.yaxis.constructor!==Array?t.yaxis=[x.extend(i.yAxis,t.yaxis)]:t.yaxis=x.extendArray(t.yaxis,i.yAxis);var a=!1;t.yaxis.forEach((function(t){t.logarithmic&&(a=!0)}));var s=t.series;return e&&!s&&(s=e.config.series),a&&s.length!==t.yaxis.length&&s.length&&(t.yaxis=s.map((function(e,a){if(e.name||(s[a].name="series-".concat(a+1)),t.yaxis[a])return t.yaxis[a].seriesName=s[a].name,t.yaxis[a];var r=x.extend(i.yAxis,t.yaxis[0]);return r.show=!1,r}))),a&&s.length>1&&s.length!==t.yaxis.length&&console.warn("A multi-series logarithmic chart should have equal number of series and y-axes"),t}},{key:"extendAnnotations",value:function(t){return void 0===t.annotations&&(t.annotations={},t.annotations.yaxis=[],t.annotations.xaxis=[],t.annotations.points=[]),t=this.extendYAxisAnnotations(t),t=this.extendXAxisAnnotations(t),t=this.extendPointAnnotations(t)}},{key:"extendYAxisAnnotations",value:function(t){var e=new L;return t.annotations.yaxis=x.extendArray(void 0!==t.annotations.yaxis?t.annotations.yaxis:[],e.yAxisAnnotation),t}},{key:"extendXAxisAnnotations",value:function(t){var e=new L;return t.annotations.xaxis=x.extendArray(void 0!==t.annotations.xaxis?t.annotations.xaxis:[],e.xAxisAnnotation),t}},{key:"extendPointAnnotations",value:function(t){var e=new L;return t.annotations.points=x.extendArray(void 0!==t.annotations.points?t.annotations.points:[],e.pointAnnotation),t}},{key:"checkForDarkTheme",value:function(t){t.theme&&"dark"===t.theme.mode&&(t.tooltip||(t.tooltip={}),"light"!==t.tooltip.theme&&(t.tooltip.theme="dark"),t.chart.foreColor||(t.chart.foreColor="#f6f7f8"),t.chart.background||(t.chart.background="#424242"),t.theme.palette||(t.theme.palette="palette4"))}},{key:"handleUserInputErrors",value:function(t){var e=t;if(e.tooltip.shared&&e.tooltip.intersect)throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.");if("bar"===e.chart.type&&e.plotOptions.bar.horizontal){if(e.yaxis.length>1)throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false");e.yaxis[0].reversed&&(e.yaxis[0].opposite=!0),e.xaxis.tooltip.enabled=!1,e.yaxis[0].tooltip.enabled=!1,e.chart.zoom.enabled=!1}return"bar"!==e.chart.type&&"rangeBar"!==e.chart.type||e.tooltip.shared&&"barWidth"===e.xaxis.crosshairs.width&&e.series.length>1&&(e.xaxis.crosshairs.width="tickWidth"),"candlestick"!==e.chart.type&&"boxPlot"!==e.chart.type||e.yaxis[0].reversed&&(console.warn("Reversed y-axis in ".concat(e.chart.type," chart is not supported.")),e.yaxis[0].reversed=!1),e}}]),t}(),Y=function(){function t(){a(this,t)}return r(t,[{key:"initGlobalVars",value:function(t){t.series=[],t.seriesCandleO=[],t.seriesCandleH=[],t.seriesCandleM=[],t.seriesCandleL=[],t.seriesCandleC=[],t.seriesRangeStart=[],t.seriesRangeEnd=[],t.seriesRange=[],t.seriesPercent=[],t.seriesGoals=[],t.seriesX=[],t.seriesZ=[],t.seriesNames=[],t.seriesTotals=[],t.seriesLog=[],t.seriesColors=[],t.stackedSeriesTotals=[],t.seriesXvalues=[],t.seriesYvalues=[],t.labels=[],t.hasXaxisGroups=!1,t.groups=[],t.hasSeriesGroups=!1,t.seriesGroups=[],t.categoryLabels=[],t.timescaleLabels=[],t.noLabelsProvided=!1,t.resizeTimer=null,t.selectionResizeTimer=null,t.delayedElements=[],t.pointsArray=[],t.dataLabelsRects=[],t.isXNumeric=!1,t.skipLastTimelinelabel=!1,t.skipFirstTimelinelabel=!1,t.isDataXYZ=!1,t.isMultiLineX=!1,t.isMultipleYAxis=!1,t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE,t.minYArr=[],t.maxYArr=[],t.maxX=-Number.MAX_VALUE,t.minX=Number.MAX_VALUE,t.initialMaxX=-Number.MAX_VALUE,t.initialMinX=Number.MAX_VALUE,t.maxDate=0,t.minDate=Number.MAX_VALUE,t.minZ=Number.MAX_VALUE,t.maxZ=-Number.MAX_VALUE,t.minXDiff=Number.MAX_VALUE,t.yAxisScale=[],t.xAxisScale=null,t.xAxisTicksPositions=[],t.yLabelsCoords=[],t.yTitleCoords=[],t.barPadForNumericAxis=0,t.padHorizontal=0,t.xRange=0,t.yRange=[],t.zRange=0,t.dataPoints=0,t.xTickAmount=0}},{key:"globalVars",value:function(t){return{chartID:null,cuid:null,events:{beforeMount:[],mounted:[],updated:[],clicked:[],selection:[],dataPointSelection:[],zoomed:[],scrolled:[]},colors:[],clientX:null,clientY:null,fill:{colors:[]},stroke:{colors:[]},dataLabels:{style:{colors:[]}},radarPolygons:{fill:{colors:[]}},markers:{colors:[],size:t.markers.size,largestSize:0},animationEnded:!1,isTouchDevice:"ontouchstart"in window||navigator.msMaxTouchPoints,isDirty:!1,isExecCalled:!1,initialConfig:null,initialSeries:[],lastXAxis:[],lastYAxis:[],columnSeries:null,labels:[],timescaleLabels:[],noLabelsProvided:!1,allSeriesCollapsed:!1,collapsedSeries:[],collapsedSeriesIndices:[],ancillaryCollapsedSeries:[],ancillaryCollapsedSeriesIndices:[],risingSeries:[],dataFormatXNumeric:!1,capturedSeriesIndex:-1,capturedDataPointIndex:-1,selectedDataPoints:[],goldenPadding:35,invalidLogScale:!1,ignoreYAxisIndexes:[],yAxisSameScaleIndices:[],maxValsInArrayIndex:0,radialSize:0,selection:void 0,zoomEnabled:"zoom"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.zoom&&t.chart.zoom.enabled,panEnabled:"pan"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.pan,selectionEnabled:"selection"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.selection,yaxis:null,mousedown:!1,lastClientPosition:{},visibleXRange:void 0,yValueDecimal:0,total:0,SVGNS:"http://www.w3.org/2000/svg",svgWidth:0,svgHeight:0,noData:!1,locale:{},dom:{},memory:{methodsToExec:[]},shouldAnimate:!0,skipLastTimelinelabel:!1,skipFirstTimelinelabel:!1,delayedElements:[],axisCharts:!0,isDataXYZ:!1,resized:!1,resizeTimer:null,comboCharts:!1,dataChanged:!1,previousPaths:[],allSeriesHasEqualX:!0,pointsArray:[],dataLabelsRects:[],lastDrawnDataLabelsIndexes:[],hasNullValues:!1,easing:null,zoomed:!1,gridWidth:0,gridHeight:0,rotateXLabels:!1,defaultLabels:!1,xLabelFormatter:void 0,yLabelFormatters:[],xaxisTooltipFormatter:void 0,ttKeyFormatter:void 0,ttVal:void 0,ttZFormatter:void 0,LINE_HEIGHT_RATIO:1.618,xAxisLabelsHeight:0,xAxisGroupLabelsHeight:0,xAxisLabelsWidth:0,yAxisLabelsWidth:0,scaleX:1,scaleY:1,translateX:0,translateY:0,translateYAxisX:[],yAxisWidths:[],translateXAxisY:0,translateXAxisX:0,tooltip:null}}},{key:"init",value:function(t){var e=this.globalVars(t);return this.initGlobalVars(e),e.initialConfig=x.extend({},t),e.initialSeries=x.clone(t.series),e.lastXAxis=x.clone(e.initialConfig.xaxis),e.lastYAxis=x.clone(e.initialConfig.yaxis),e}}]),t}(),F=function(){function t(e){a(this,t),this.opts=e}return r(t,[{key:"init",value:function(){var t=new E(this.opts).init({responsiveOverride:!1});return{config:t,globals:(new Y).init(t)}}}]),t}(),R=function(){function t(e){a(this,t),this.ctx=e,this.w=e.w,this.opts=null,this.seriesIndex=0}return r(t,[{key:"clippedImgArea",value:function(t){var e=this.w,i=e.config,a=parseInt(e.globals.gridWidth,10),s=parseInt(e.globals.gridHeight,10),r=a>s?a:s,o=t.image,n=0,l=0;void 0===t.width&&void 0===t.height?void 0!==i.fill.image.width&&void 0!==i.fill.image.height?(n=i.fill.image.width+1,l=i.fill.image.height):(n=r+1,l=r):(n=t.width,l=t.height);var h=document.createElementNS(e.globals.SVGNS,"pattern");m.setAttrs(h,{id:t.patternID,patternUnits:t.patternUnits?t.patternUnits:"userSpaceOnUse",width:n+"px",height:l+"px"});var c=document.createElementNS(e.globals.SVGNS,"image");h.appendChild(c),c.setAttributeNS(window.SVG.xlink,"href",o),m.setAttrs(c,{x:0,y:0,preserveAspectRatio:"none",width:n+"px",height:l+"px"}),c.style.opacity=t.opacity,e.globals.dom.elDefs.node.appendChild(h)}},{key:"getSeriesIndex",value:function(t){var e=this.w,i=e.config.chart.type;return("bar"===i||"rangeBar"===i)&&e.config.plotOptions.bar.distributed||"heatmap"===i||"treemap"===i?this.seriesIndex=t.seriesNumber:this.seriesIndex=t.seriesNumber%e.globals.series.length,this.seriesIndex}},{key:"fillPath",value:function(t){var e=this.w;this.opts=t;var i,a,s,r=this.w.config;this.seriesIndex=this.getSeriesIndex(t);var o=this.getFillColors()[this.seriesIndex];void 0!==e.globals.seriesColors[this.seriesIndex]&&(o=e.globals.seriesColors[this.seriesIndex]),"function"==typeof o&&(o=o({seriesIndex:this.seriesIndex,dataPointIndex:t.dataPointIndex,value:t.value,w:e}));var n=t.fillType?t.fillType:this.getFillType(this.seriesIndex),l=Array.isArray(r.fill.opacity)?r.fill.opacity[this.seriesIndex]:r.fill.opacity;t.color&&(o=t.color),o||(o="#fff",console.warn("undefined color - ApexCharts"));var h=o;if(-1===o.indexOf("rgb")?o.length<9&&(h=x.hexToRgba(o,l)):o.indexOf("rgba")>-1&&(l=x.getOpacityFromRGBA(o)),t.opacity&&(l=t.opacity),"pattern"===n&&(a=this.handlePatternFill({fillConfig:t.fillConfig,patternFill:a,fillColor:o,fillOpacity:l,defaultColor:h})),"gradient"===n&&(s=this.handleGradientFill({fillConfig:t.fillConfig,fillColor:o,fillOpacity:l,i:this.seriesIndex})),"image"===n){var c=r.fill.image.src,d=t.patternID?t.patternID:"";this.clippedImgArea({opacity:l,image:Array.isArray(c)?t.seriesNumber".concat(a[0],': ')+r+"
"+"".concat(a[1],': ')+o+"
"+(n?"".concat(a[2],': ')+n+"
":"")+"".concat(a[3],': ')+l+"
"+"".concat(a[4],': ')+h+"
".concat(i.val,"
")})),v.innerHTML=t+"",m.innerHTML=e+""};o?l.globals.seriesGoals[e][i]&&Array.isArray(l.globals.seriesGoals[e][i])?y():(v.innerHTML="",m.innerHTML=""):y()}else v.innerHTML="",m.innerHTML="";null!==p&&(a[e].querySelector(".apexcharts-tooltip-text-z-label").innerHTML=l.config.tooltip.z.title,a[e].querySelector(".apexcharts-tooltip-text-z-value").innerHTML=void 0!==p?p:"");if(o&&f[0]){if(l.config.tooltip.hideEmptySeries){var w=a[e].querySelector(".apexcharts-tooltip-marker"),k=a[e].querySelector(".apexcharts-tooltip-text");0==parseFloat(c)?(w.style.display="none",k.style.display="none"):(w.style.display="block",k.style.display="block")}null==c||l.globals.ancillaryCollapsedSeriesIndices.indexOf(e)>-1||l.globals.collapsedSeriesIndices.indexOf(e)>-1?f[0].parentNode.style.display="none":f[0].parentNode.style.display=l.config.tooltip.items.display}}},{key:"toggleActiveInactiveSeries",value:function(t){var e=this.w;if(t)this.tooltipUtil.toggleAllTooltipSeriesGroups("enable");else{this.tooltipUtil.toggleAllTooltipSeriesGroups("disable");var i=e.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group");i&&(i.classList.add("apexcharts-active"),i.style.display=e.config.tooltip.items.display)}}},{key:"getValuesToPrint",value:function(t){var e=t.i,i=t.j,a=this.w,s=this.ctx.series.filteredSeriesX(),r="",o="",n=null,l=null,h={series:a.globals.series,seriesIndex:e,dataPointIndex:i,w:a},c=a.globals.ttZFormatter;null===i?l=a.globals.series[e]:a.globals.isXNumeric&&"treemap"!==a.config.chart.type?(r=s[e][i],0===s[e].length&&(r=s[this.tooltipUtil.getFirstActiveXArray(s)][i])):r=void 0!==a.globals.labels[i]?a.globals.labels[i]:"";var d=r;a.globals.isXNumeric&&"datetime"===a.config.xaxis.type?r=new T(this.ctx).xLabelFormat(a.globals.ttKeyFormatter,d,d,{i:void 0,dateFormatter:new I(this.ctx).formatDate,w:this.w}):r=a.globals.isBarHorizontal?a.globals.yLabelFormatters[0](d,h):a.globals.xLabelFormatter(d,h);return void 0!==a.config.tooltip.x.formatter&&(r=a.globals.ttKeyFormatter(d,h)),a.globals.seriesZ.length>0&&a.globals.seriesZ[e].length>0&&(n=c(a.globals.seriesZ[e][i],a)),o="function"==typeof a.config.xaxis.tooltip.formatter?a.globals.xaxisTooltipFormatter(d,h):r,{val:Array.isArray(l)?l.join(" "):l,xVal:Array.isArray(r)?r.join(" "):r,xAxisTTVal:Array.isArray(o)?o.join(" "):o,zVal:n}}},{key:"handleCustomTooltip",value:function(t){var e=t.i,i=t.j,a=t.y1,s=t.y2,r=t.w,o=this.ttCtx.getElTooltip(),n=r.config.tooltip.custom;Array.isArray(n)&&n[e]&&(n=n[e]),o.innerHTML=n({ctx:this.ctx,series:r.globals.series,seriesIndex:e,dataPointIndex:i,y1:a,y2:s,w:r})}}]),t}(),ut=function(){function t(e){a(this,t),this.ttCtx=e,this.ctx=e.ctx,this.w=e.w}return r(t,[{key:"moveXCrosshairs",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.ttCtx,a=this.w,s=i.getElXCrosshairs(),r=t-i.xcrosshairsWidth/2,o=a.globals.labels.slice().length;if(null!==e&&(r=a.globals.gridWidth/o*e),null===s||a.globals.isBarHorizontal||(s.setAttribute("x",r),s.setAttribute("x1",r),s.setAttribute("x2",r),s.setAttribute("y2",a.globals.gridHeight),s.classList.add("apexcharts-active")),r<0&&(r=0),r>a.globals.gridWidth&&(r=a.globals.gridWidth),i.isXAxisTooltipEnabled){var n=r;"tickWidth"!==a.config.xaxis.crosshairs.width&&"barWidth"!==a.config.xaxis.crosshairs.width||(n=r+i.xcrosshairsWidth/2),this.moveXAxisTooltip(n)}}},{key:"moveYCrosshairs",value:function(t){var e=this.ttCtx;null!==e.ycrosshairs&&m.setAttrs(e.ycrosshairs,{y1:t,y2:t}),null!==e.ycrosshairsHidden&&m.setAttrs(e.ycrosshairsHidden,{y1:t,y2:t})}},{key:"moveXAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;if(null!==i.xaxisTooltip&&0!==i.xcrosshairsWidth){i.xaxisTooltip.classList.add("apexcharts-active");var a=i.xaxisOffY+e.config.xaxis.tooltip.offsetY+e.globals.translateY+1+e.config.xaxis.offsetY;if(t-=i.xaxisTooltip.getBoundingClientRect().width/2,!isNaN(t)){t+=e.globals.translateX;var s;s=new m(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML),i.xaxisTooltipText.style.minWidth=s.width+"px",i.xaxisTooltip.style.left=t+"px",i.xaxisTooltip.style.top=a+"px"}}}},{key:"moveYAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;null===i.yaxisTTEls&&(i.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));var a=parseInt(i.ycrosshairsHidden.getAttribute("y1"),10),s=e.globals.translateY+a,r=i.yaxisTTEls[t].getBoundingClientRect().height,o=e.globals.translateYAxisX[t]-2;e.config.yaxis[t].opposite&&(o-=26),s-=r/2,-1===e.globals.ignoreYAxisIndexes.indexOf(t)?(i.yaxisTTEls[t].classList.add("apexcharts-active"),i.yaxisTTEls[t].style.top=s+"px",i.yaxisTTEls[t].style.left=o+e.config.yaxis[t].tooltip.offsetX+"px"):i.yaxisTTEls[t].classList.remove("apexcharts-active")}},{key:"moveTooltip",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.ttCtx,r=s.getElTooltip(),o=s.tooltipRect,n=null!==i?parseFloat(i):1,l=parseFloat(t)+n+5,h=parseFloat(e)+n/2;if(l>a.globals.gridWidth/2&&(l=l-o.ttWidth-n-10),l>a.globals.gridWidth-o.ttWidth-10&&(l=a.globals.gridWidth-o.ttWidth),l<-20&&(l=-20),a.config.tooltip.followCursor){var c=s.getElGrid().getBoundingClientRect();(l=s.e.clientX-c.left)>a.globals.gridWidth/2&&(l-=s.tooltipRect.ttWidth),(h=s.e.clientY+a.globals.translateY-c.top)>a.globals.gridHeight/2&&(h-=s.tooltipRect.ttHeight)}else a.globals.isBarHorizontal||o.ttHeight/2+h>a.globals.gridHeight&&(h=a.globals.gridHeight-o.ttHeight+a.globals.translateY);isNaN(l)||(l+=a.globals.translateX,r.style.left=l+"px",r.style.top=h+"px")}},{key:"moveMarkers",value:function(t,e){var i=this.w,a=this.ttCtx;if(i.globals.markers.size[t]>0)for(var s=i.globals.dom.baseEl.querySelectorAll(" .apexcharts-series[data\\:realIndex='".concat(t,"'] .apexcharts-marker")),r=0;r