// The Lucia project. // Copyright 2023-2026 DSP, inc. All rights reserved. // Authors: // chiayin.kuo@dsp.im (chiayin), 2023/1/31 // imacat.yang@dsp.im (imacat), 2023/9/23 // cindy.chang@dsp.im (Cindy Chang), 2024/5/30 /** @module constants Application-wide constants and chart configuration. */ /** @constant {number} Maximum number of ticks on PrimeVue chart axes. */ export const PRIME_VUE_TICKS_LIMIT = 6; /** @constant {number} Number of data items to render per batch. */ export const ONCE_RENDER_NUM_OF_DATA = 9; /** @constant {number} Minimum valid password length. */ export const PWD_VALID_LENGTH = 6; /** @constant {string} Default grid line color (Tailwind slate-500). */ export const GRID_COLOR = '#64748b'; /** @constant {string} Modal type for creating a new account. */ export const MODAL_CREATE_NEW = 'MODAL_CREATE_NEW'; /** @constant {string} Modal type for editing an account. */ export const MODAL_ACCT_EDIT = 'MODAL_ACCT_EDIT'; /** @constant {string} Modal type for viewing account info. */ export const MODAL_ACCT_INFO = 'MODAL_ACCT_INFO'; /** @constant {string} Modal type for deleting an account. */ export const MODAL_DELETE = 'MODAL_DELETE'; /** @constant {string} LocalStorage key for saved Cytoscape node positions. */ export const SAVE_KEY_NAME = 'CYTOSCAPE_NODE_POSITION'; /** @constant {number} Duration (minutes) to highlight newly created accounts. */ export const JUST_CREATE_ACCOUNT_HOT_DURATION_MINS = 2; /** * @constant {Array<[string, string]>} Field keys and display labels for * process insights (self-loops, short-loops, traces). */ export const INSIGHTS_FIELDS_AND_LABELS = [ ['self_loops', 'Self-Loop'], ['short_loops', 'Short-Loop'], ['shortest_traces', 'Shortest Trace'], ['longest_traces', 'Longest Trace'], ['most_freq_traces', 'Most Frequent Trace'], ]; /** @constant {Object} Default Chart.js layout padding options. */ export const knownLayoutChartOption = { padding: { top: 16, left: 8, right: 8, } }; /** @constant {Object} Default Chart.js scale options for line charts. */ export const knownScaleLineChartOptions = { x: { type: 'time', title: { display: true, color: '#334155', font: { size: 12, lineHeight: 2 } }, time: { displayFormats: { second: 'h:mm:ss', // ex: 1:11:11 minute: 'M/d h:mm', // ex: 1/1 1:11 hour: 'M/d h:mm', // ex: 1/1 1:11 day: 'M/d h', // ex: 1/1 1 month: 'y/M/d', // ex: 1911/1/1 }, }, ticks: { display: true, maxRotation: 0, // Do not rotate labels (range 0~50) color: '#64748b', source: 'labels', // Proportionally display the number of labels }, border: { color: '#64748b', }, grid: { tickLength: 0, // Whether grid lines extend beyond the axis } }, y: { beginAtZero: true, // Scale includes 0 title: { display: true, color: '#334155', font: { size: 12, lineHeight: 2 }, }, ticks:{ color: '#64748b', padding: 8, }, grid: { color: '#64748b', }, border: { display: false, // Hide the extra line on the left side }, }, }; /** @constant {Object} Default Chart.js scale options for horizontal charts. */ export const knownScaleHorizontalChartOptions = { x: { title: { display: true, color: '#334155', font: { size: 12, lineHeight: 2 } }, ticks: { display: true, maxRotation: 0, // Do not rotate labels (range 0~50) color: '#64748b', }, grid: { color: '#64748b', tickLength: 0, // Whether grid lines extend beyond the axis }, border: { display:false, }, }, y: { beginAtZero: true, // Scale includes 0 type: 'category', title: { display: true, color: '#334155', font: { size: 12, lineHeight: 2 }, }, ticks:{ color: '#64748b', padding: 8, }, grid: { display:false, color: '#64748b', }, border: { display: false, // Hide the extra line on the left side }, }, }; /** @constant {Object} Default Chart.js scale options for bar charts. */ export const knownScaleBarChartOptions = { x: { title: { display: true, color: '#334155', font: { size: 12, lineHeight: 2 } }, ticks: { display: true, maxRotation: 0, // Do not rotate labels (range 0~50) color: '#64748b', }, grid: { color: '#64748b', tickLength: 0, // Whether grid lines extend beyond the axis }, border: { display:false, }, }, y: { beginAtZero: true, // Scale includes 0 type: 'category', title: { display: true, color: '#334155', font: { size: 12, lineHeight: 2 }, }, ticks:{ color: '#64748b', padding: 8, }, grid: { display:false, color: '#64748b', }, border: { display: false, // Hide the extra line on the left side }, }, };