const COLORS = [
  "#FF5733",
  "#33FF57",
  "#3357FF",
  "#F1C40F",
  "#8E44AD",
  "#E67E22",
  "#3498DB",
  "#2ECC71",
  "#E74C3C",
  "#1ABC9C"
]


numberLineFontSize = 1.25;
  numberLineStrokeWidth = 0.1;
  strokeWidth = 0.5;
  lineHeight = 0.75;
  lineGap = 1;
  points = [
    { start: 0, end: 20, count: 2 },
    // { start: 0, end: 36.5, count: 1 },
    // { start: 36.5, end: 10, count: 3 },
    // { start: 10, end: 45, count: 1 },
    // { start: 45, end: 87, count: 1 },
    // { start: 87, end: 4.5, count: 1 },
    // { start: 4.5, end: 100, count: 1 },
    // { start: 100, end: 2, count: 1 }
  ]

  get maxPoint(): number {
    return Math.max(...this.points.map(item => item.end));
  }

  get normalizedNumberLineFontSize(): number {
    return this.maxPoint / 100 * this.numberLineFontSize;
  }

  get normalizedNumberLineStrokeWidth(): number {
    return this.maxPoint / 100 * this.numberLineStrokeWidth;
  }

  get normalizedStrokeWidth(): number {
    return this.maxPoint / 100 * this.strokeWidth;
  }

  get normalizedLineHeight(): number {
    return (this.getLineNumber(this.points.length - 1, this.points[this.points.length - 1].count) + 1) / 10 * this.lineHeight;
  }

  get viewBox(): string {
    return `0 0 ${Math.max(...this.points.map(item => item.end))} ${this.getLineNumber(this.points.length - 1, this.points[this.points.length - 1].count) + 1}`
  }

  lineCountNumber(n: number): number[] {
    return Array(n).fill(null).map((_, i) => i + 1);
  }
  getLineNumber(index: number, lineCount: number): number {
    return this.points.slice(0, index).map(item => item.count).reduce((total, num) => total += num, 0) + lineCount + 5;
  }
  getSinglePoints(): number[] {
    // get all points in one array (start + end)
    const allPoints = this.points.map(item => [item.start, item.end]).reduce((pV, cV) => { pV.push(...cV); return pV }, []);
    // remove duplicates and sort
    const singlePoints = allPoints.filter((item, index) => allPoints.findIndex(n => n === item) === index).sort((a, b) => a - b);
    return singlePoints
  }
  getRandomColor(n: number): string {
    return COLORS[n % COLORS.length];
  }