Miao-Yunzai/resources/html/ledger/ledger-sr.html

{{extend genshinLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}html/ledger/ledger-sr.css"/>
<link rel="preload" href="{{_res_path}}script/g2plot.min.js" as="script"/>
{{/block}}

{{block 'main'}}
<div class="container">
  <div class="title">
    <div class="uid">
      <div class="uid_item"><span class="uid_text">UID:</span><span class="uid_span">{{uid}}</span>
      </div>
      <div class="uid_item"><span class="day_span">开拓月历·{{day}}</span></div>
    </div>
  </div>
  <div class="title_date">
    <div class="icon">
      <img src="{{_res_path}}StarRail/img/role/{{icon}}"/>
    </div>
    <div class="title_date_text">
      <div>{{nowDay}}</div>
      <div>{{srday}}</div>
    </div>
  </div>
  <div class="subject">
    <div class="subject_solid"><span style="width: {{bfStamina}};"></span></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_hcoin}} | {{month_data.gacha}} 抽</div>
        </div>
        <div class="primogems">
          <div class="icon-mola"></div>
          <div class="text">专&通票：{{month_data.current_rails_pass}} 张</div>
        </div>
      </div>
      <div class="day">
        <div class="head">上月获取：</div>
        <div class="primogems">
          <div class="icon-ys"></div>
          <div class="text">星琼：{{month_data.last_hcoin}} | {{month_data.last_gacha}} 抽</div>
        </div>
        <div class="primogems">
          <div class="icon-mola"></div>
          <div class="text">专&通票：{{month_data.last_rails_pass}} 张</div>
        </div>
      </div>
    </div>
  </div>
  <div class="title_wt">
    <div>
      星琼收入统计
    </div>
  </div>
  <div class="chart-box">
    <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"><em>{{val.action_name}}</em></span> <span
          class="num"><em>{{val.num}}</em></span><span
          class="percent"><em>{{val.percent}}%</em></span>
        </li>
        {{/each}}
      </ul>
    </div>
  </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_name',
    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',
        'fontSize': 24
      },
      formatter: ({ percent }) => {
        percent = (percent * 100).toFixed(0)
        return percent > 2 ? `${percent}%` : ''
      }
    },
    statistic: {
      title: {
        offsetY: -18,
        content: '总计',
        style: {
          fontFamily: 'tttgbnumber',
          'fontSize': 32
        }
      },
      content: {
        offsetY: -10,
        style: {
          fontFamily: 'tttgbnumber',
          'fontSize': 48
        }
      }
    },
    legend: false
  })
  piePlot.render()
</script>

{{/block}}