variable.js

/**
 * @description 색상 데이터셋
 */
const colors = [
  [239, 83, 80],
  [244, 67, 54],
  [229, 57, 53],
  [211, 47, 47],
  [198, 40, 40],
  [183, 28, 28],
  [236, 64, 122],
  [233, 30, 99],
  [216, 27, 96],
  [194, 24, 91],
  [173, 20, 87],
  [136, 14, 79],
  [171, 71, 188],
  [156, 39, 176],
  [142, 36, 170],
  [123, 31, 162],
  [106, 27, 154],
  [74, 20, 140],
  [92, 107, 192],
  [63, 81, 181],
  [57, 73, 171],
  [48, 63, 159],
  [40, 53, 147],
  [26, 35, 126],
  [66, 165, 245],
  [33, 150, 243],
  [30, 136, 229],
  [25, 118, 210],
  [21, 101, 192],
  [13, 71, 161],
  [38, 198, 218],
  [0, 188, 212],
  [0, 172, 193],
  [0, 151, 167],
  [0, 131, 143],
  [0, 96, 100],
  [38, 166, 154],
  [0, 150, 136],
  [0, 137, 123],
  [0, 121, 107],
  [0, 105, 92],
  [0, 77, 64],
  [102, 187, 106],
  [76, 175, 80],
  [67, 160, 71],
  [56, 142, 60],
  [46, 125, 50],
  [27, 94, 32],
  [255, 238, 88],
  [255, 235, 59],
  [253, 216, 53],
  [251, 192, 45],
  [249, 168, 37],
  [245, 127, 23],
  [255, 167, 38],
  [255, 152, 0],
  [251, 140, 0],
  [245, 124, 0],
  [239, 108, 0],
  [230, 81, 0],
];

/**
 * @description chartJS에서 쓰이는 차트명칭을 Gamify에서 쓰이는 명칭으로 변경
 */
const defineType = {
  histogram: 'bar',
  horizontalHistogram: 'horizontalBar',
};

/**
 * @description chartJS에서 지원하지 않는 차트 타입
 */
const nonChartJsType = ['treemap', 'map'];

/**
 * @description 이미 로드된 script
 */
const loadedScript = [];

/**
 * @description chartJS에서 만들수 있는 차트타입들의 기초 옵션
 */
const settingDefualtChartOption = {
  line: (chartJsOption) => {
    for (let i = 0; i < chartJsOption.data.datasets.length; i++) {
      chartJsOption.data.datasets[i].fill = false;
    }
  },
  pie: (chartJsOption) => {
    for (let i = 0; i < chartJsOption.data.datasets.length; i++) {
      chartJsOption.data.datasets[i].borderWidth = 0;
      // chartJsOption.data.datasets[i].borderColor = 'rgba(255,255,255,1)';
    }
  },
  histogram: (chartJsOption) => {
    chartJsOption.options = {
      elements: {
        rectangle: {
          stepLabel: {
            display: true,
            fontSize: 20,
            // color: "red"
          },
        },
      },
      scales: {
        xAxes: [{
          type: 'category',

          // Specific to Bar Controller
          categoryPercentage: 1,
          barPercentage: 1,

          // grid line settings
          gridLines: {
            offsetGridLines: true,
          },
        }],
        yAxes: [{
          type: 'linear',
          ticks: {
            beginAtZero: true,
          },
        }],
      },
    };
  },
  horizontalHistogram: (chartJsOption) => {
    chartJsOption.options = {
      elements: {
        rectangle: {
          stepLabel: {
            display: true,
            fontSize: 20,
            // color: "red"
          },
        },
      },
      scales: {
        xAxes: [{

          type: 'linear',
          ticks: {
            beginAtZero: true,
          },
        }],
        yAxes: [{
          type: 'category',

          // Specific to Bar Controller
          categoryPercentage: 1,
          barPercentage: 1,

          // grid line settings
          gridLines: {
            offsetGridLines: true,
          },
        }],
      },
    };
  },
};

/**
 * @description easing function
 */
const EasingFunctions = {
  // no easing, no acceleration
  linear: t => t,
  // accelerating from zero velocity
  easeInQuad: t => t * t,
  // decelerating to zero velocity
  easeOutQuad: t => t * (2 - t),
  // acceleration until halfway, then deceleration
  easeInOutQuad: t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
  // accelerating from zero velocity
  easeInCubic: t => t * t * t,
  // decelerating to zero velocity
  easeOutCubic: t => (--t) * t * t + 1,
  // acceleration until halfway, then deceleration
  easeInOutCubic: t => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1),
  // accelerating from zero velocity
  easeInQuart: t => t * t * t * t,
  // decelerating to zero velocity
  easeOutQuart: t => 1 - (--t) * t * t * t,
  // acceleration until halfway, then deceleration
  easeInOutQuart: t => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t),
  // accelerating from zero velocity
  easeInQuint: t => t * t * t * t * t,
  // decelerating to zero velocity
  easeOutQuint: t => 1 + (--t) * t * t * t * t,
  // acceleration until halfway, then deceleration
  easeInOutQuint: t => (t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t),
};

export {
  settingDefualtChartOption, colors, defineType, nonChartJsType, EasingFunctions, loadedScript,
};