import ContriGraph from 'contrib-graph';

// 创建一个 Canvas 元素
const canvas = document.getElementById('myCanvas');

// 或者
const svg = document.getElementById("mySvg")

// 创建 ContriGraph 实例 /canvas渲染
const contribGraph = new ContriGraph({
  canvas: canvas,
  size: 10,
  gapSize: 5,
  data: { /* 数据 */ },
  year: 2022,
  colorParse: /* 自定义颜色解析函数 */,
});

// 创建 ContriGraph 实例 /svg渲染
const contribGraph = new ContriGraph({
  svg: svg,
  size: 10,
  gapSize: 5,
  data: { /* 数据 */ },
  year: 2022,
  colorParse: /* 自定义颜色解析函数 */,
  radius:2
});

// 渲染月份或整年的贡献图
contribGraph.render(1); // 渲染一月份
// 或
contribGraph.render(); // 渲染整年

new ContriGraph({
  canvas?: HTMLCanvasElement, // Canvas 元素 优先canvas 否则为svg渲染需要传入svg元素
  svg?:SVGSVGElement, //svg 元素
  size?: number, // 方块大小，默认为 10
  gapSize?: number, // 方块间隙大小，默认为 5
  data?: Record<string, number>, // 贡献数据，默认为空对象
  year?: number, // 年份，默认为当前年份
  colorParse?: (value: number) => string, // 颜色解析函数，默认为内置的颜色解析函数
  radius?:string //如果为svg模式 radius生效，canvas不生效 默认为 2
});