const func = (x, a) => {
  return a[0] + a[1] * x + a[2] * x ** 2;
};

const ctx = document.getElementById('chart');
const myChart = new Chart(ctx, {
  // 散布図を表す
  type: 'scatter',
  // データ
  data: {
    // データ系列の設定
    datasets: [{
      // 凡例に表示する配列
      label: 'sample data',
      // 線を表示する
      showLine: true,
      // 実際のXYデータの配列
      data: ((a) => {
        const ret = [];
        for(let x = 0; x <= 10; x++){
          ret.push({ x: x, y: func(x, a) });
        }
        return ret;
      })([ 0.1, 2, 1 ]),
    }],
  },
  // グラフオプション
  options: {
    // レスポンシブ対応
    responsive: true,
    plugins: {
      // グラフタイトルの設定
      title: {
        text: 'Chart.js設定例',
        display: true,
        font: {
          size: 16,
        }
      },
      // 凡例の設定
      legend: {
        display: true,
        position: 'top',
        align: 'center',
      },
      // Chartjs-plugin-zoomの設定
      zoom: {
        pan: {
          enabled: true,
          mode: 'x',
          overScaleMode: 'x',
        },
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          drag: {
            enabled: false,
          },
          mode: 'xy',
          overScaleMode: 'y',
          // onZoomイベントハンドラを指定する
          onZoom: ({chart}) => {
            const animation = chart.config.options.animation;
            // アニメーションを一時OFFにする
            chart.config.options.animation = false;
            // Y軸の最小値を0にする
            chart.config.options.scales.y.min = 0;
            // 画面を更新する
            chart.update();
            // アニメーションの設定を元に戻す
            chart.config.options.animation = animation;
          },
        },
        limits: {
          x: {
            min: 0,
          },
          y: {
            min: 0,
          },
        }
      }
    },
    // x軸,y軸の設定
    scales: {
      x: {
        type: 'linear',
        display: true,
        position: 'bottom',
        min: 0,
        max: 12,
        title: {
          display: true,
          text: 'x',
          font: {
            size: 14,
          }
        },
        ticks: {
          stepSize: 2,
        }
      },
      y: {
        type: 'linear',
        display: true,
        title: {
          display: true,
          text: 'y',
          font: {
            size: 14,
          }
        },
      }
    },
  },
});

const resetZoom = () => {
  myChart.resetZoom();
}

const setZoom = () => {
  const maxValue = document.getElementById("axis").max.value;
  const minValue = document.getElementById("axis").min.value;
  const axisType = document.getElementById("axis").axis.value;
  const min_v = parseInt(minValue);
  const max_v = parseInt(maxValue);
  myChart.zoomScale(
    (axisType === 'y' ? 'y' : 'x'),
    { min: min_v, max: max_v},
    'default'
  );
}