// G2Plot 深色主题通用配置片段
// 供驾驶舱（views/home）复用，保证深色大屏下图表配色/坐标轴/图例一致

export const PALETTE = [
  '#38a5f8',
  '#22d3ee',
  '#9078e5',
  '#34d399',
  '#fbbf24',
  '#fb7185',
  '#60a5fa',
  '#f472b6',
  '#a78bfa',
  '#2dd4bf'
];

const AXIS_LABEL_COLOR = '#9aa7c7';
const AXIS_LINE_COLOR = '#253455';
const GRID_LINE_COLOR = 'rgba(120, 140, 190, 0.14)';
const LEGEND_TEXT_COLOR = '#c3cde4';

// 类目轴
export function xAxis(extra = {}) {
  const { label, ...rest } = extra;
  return {
    label: { style: { fill: AXIS_LABEL_COLOR, fontSize: 12 }, ...(label || {}) },
    line: { style: { stroke: AXIS_LINE_COLOR } },
    tickLine: { style: { stroke: AXIS_LINE_COLOR } },
    ...rest
  };
}

// 数值轴
export function yAxis(extra = {}) {
  const { label, ...rest } = extra;
  return {
    label: { style: { fill: AXIS_LABEL_COLOR, fontSize: 12 }, ...(label || {}) },
    grid: { line: { style: { stroke: GRID_LINE_COLOR, lineDash: [3, 3] } } },
    ...rest
  };
}

export function legend(extra = {}) {
  return {
    position: 'top',
    text: { style: { fill: LEGEND_TEXT_COLOR, fontSize: 12 } },
    marker: { symbol: 'circle', style: { r: 4 } },
    itemHeight: 14,
    ...extra
  };
}

export function tooltip(extra = {}) {
  return {
    domStyles: {
      'g2-tooltip': {
        backgroundColor: 'rgba(13, 20, 43, 0.94)',
        color: '#e6edff',
        boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45)',
        borderRadius: '8px',
        padding: '10px 14px'
      },
      'g2-tooltip-title': { color: '#aeb9d8', marginBottom: '6px' },
      'g2-tooltip-list-item': { color: '#e6edff' },
      'g2-tooltip-marker': { borderRadius: '50%' }
    },
    ...extra
  };
}