Miao-Yunzai/plugins/genshin/resources/html/ledger/ledger-gs.html

{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}html/ledger/ledger-gs.css"/>
<link rel="preload" href="{{_res_path}}script/g2plot.min.js" as="script"/>
<link rel="preload" href="{{_res_path}}img/other/bg.webp" as="image">
<link rel="preload" href="{{_res_path}}img/other/chart.png" as="image">
{{/block}}

{{block 'main'}}
<div class="title-box">
  <div class="info">
    <div class="uid">ID：{{uid}}</div>
    <div class="month">{{day}}札记</div>
  </div>
  <img class="genshin_logo" src="{{_res_path}}img/other/原神.png"/>
</div>
<div class="data-box">
  <div class="month">
    <div class="head">当月获取：</div>
    <div class="primogems">
      <div class="icon-ys"></div>
      <div class="text">原石：{{month_data.current_primogems}} | {{month_data.gacha}} 抽</div>
    </div>
    <div class="primogems">
      <div class="icon-mola"></div>
      <div class="text">摩拉：{{month_data.current_mora}}</div>
    </div>
  </div>
  <div class="day">
    <div class="head">上月获取：</div>
    <div class="primogems">
      <div class="icon-ys"></div>
      <div class="text">原石：{{month_data.last_primogems}} | {{month_data.last_gacha}} 抽</div>
    </div>
    <div class="primogems">
      <div class="icon-mola"></div>
      <div class="text">摩拉：{{month_data.last_mora}}</div>
    </div>
  </div>
</div>
<div class="chart-box">
  <div class="head">原石收入组成：</div>
  <div class="chart-info">
    <div id="chartContainer"></div>
    <ul class="tooltip">
      {{each month_data.group_by val}}
      <li>
        <i style="background: {{val.color}}"></i>
        <span class="action">{{val.action}}</span> <em>{{val.percent}}%</em><span class="num">{{val.num}}</span>
      </li>
      {{/each}}
    </ul>
  </div>
</div>


<script type="text/javascript" src="{{_res_path}}script/g2plot.min.js"></script>
<script>
  const { Pie } = G2Plot
  const data = JSON.parse(`{{@ group_by}}`)
  const piePlot = new Pie('chartContainer', {
    renderer: 'svg',
    animation: false,
    data: data,
    appendPadding: 10,
    angleField: 'num',
    colorField: 'action',
    radius: 1,
    innerRadius: 0.7,
    color: JSON.parse(`{{@ color}}`),
    meta: {
      // num: {
      //   formatter: (v) => `${v}`,
      // },
    },
    label: {
      type: 'inner',
      offset: '-50%',
      autoRotate: false,
      style: {
        textAlign: 'center',
        fontFamily: 'tttgbnumber'
      },
      formatter: ({ percent }) => {
        percent = (percent * 100).toFixed(0)
        return percent > 2 ? `${percent}%` : ''
      }
    },
    statistic: {
      title: {
        offsetY: -18,
        content: '总计'
      },
      content: {
        offsetY: -10,
        style: {
          fontFamily: 'tttgbnumber'
        }
      }
    },
    legend: false
  })
  piePlot.render()
</script>

{{/block}}