lucia-frontend/src/constants/constants.js

// 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
    },
    },
};